@zeniai/web-components 3.17.8 → 3.17.9

package/dist/VendorFirstReviewPage-ZWFzEAsw.js

@@ -0,0 +1,2748 @@
+import { j as n, d as it, u as hn, m as rt, l as Pn, e as st, a7 as lt, c as re, C as dt, g as at, h as ct, F as mt, A as ut, I as pt, V as ht } from "./vendor-.pnpm-B2klaOGU.js";
+import { useState as P, useEffect as je, useCallback as Ln, useRef as Je, useMemo as fn } from "react";
+import o from "@emotion/styled";
+import { Event as Ne } from "@zeniai/client-analytics";
+import { toVendorFirstReviewViewColumnKeyType as gt, toZeniUrlWithoutBaseURL as xt } from "@zeniai/client-epic-state";
+import { u as se, S as t, K as vt, gi as wt, a as Ce, n as Ye, a9 as gn, C as H, bc as _n, a7 as Fn, f_ as ft, R as x, gh as An, D as c, aI as Le, o as Ae, e as X, F as ke, aa as bt, eF as zn, ab as St, Z as We, iH as $t, ax as yt, ay as jt, be as Rt, t as Bn, E as Hn, aw as Vt, gp as Ct, U as un, dB as En, g4 as bn, fq as dn, jC as kt, jD as an, go as It, gx as Sn, ag as Mt, ae as Tt, B as $n, jE as Nt, jF as ie, jG as Ot, jH as yn, jI as me, jJ as _e, jK as be, jL as Se, jM as $e, jy as Pt, aE as Lt, aL as _t, aP as Ft, aQ as At, aR as zt, e_ as Bt, z as Ht, fh as Et, A as Wt, P as Ut } from "./index-usWkcKCS.js";
+import { css as pn } from "@emotion/react";
+import { createPortal as Dt } from "react-dom";
+import { M as Gt } from "./Menu-BF-2MaoX.js";
+const Wn = ({ steps: e }) => {
+  const s = se();
+  return /* @__PURE__ */ n.jsx(Qt, { windowSize: s, children: e.map((m, d) => /* @__PURE__ */ n.jsxs(qt, { children: [
+    /* @__PURE__ */ n.jsx(Jt, { children: d !== e.length - 1 ? d + 1 : /* @__PURE__ */ n.jsx(Zt, {}) }),
+    /* @__PURE__ */ n.jsx(Xt, { children: m }),
+    d < e.length - 1 ? /* @__PURE__ */ n.jsx(Kt, {}) : null
+  ] }, `step_${d}`)) });
+}, qt = o.div`
+  display: flex;
+  flex-direction: row;
+  position: relative;
+`, Qt = o.div`
+  width: 100%;
+  margin-top: ${t.sp4};
+`, Kt = o.div`
+  top: ${t.sp2};
+  width: 1px;
+  height: 100%;
+  position: absolute;
+  left: ${t.sp3};
+  width: 2px;
+  background: ${(e) => e.theme.colors.grey2};
+`, Jt = o.div`
+  width: ${t.sp5};
+  height: ${t.sp5};
+  border: 1px solid ${(e) => e.theme.colors.grey1};
+  background: ${(e) => e.theme.colors.grey5};
+  border-radius: 50%;
+  z-index: 1;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: ${vt.bold};
+  color: ${(e) => e.theme.colors.hero};
+`, Xt = o.div`
+  padding-bottom: ${t.sp4};
+  margin-left: ${t.sp6};
+`, Zt = o(wt)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+`, C = Ce.getLocalizedStrings(), Yt = () => /* @__PURE__ */ n.jsx(
+  Wn,
+  {
+    steps: [eo(), no(), to(), oo(), io()]
+  }
+), eo = () => {
+  const e = C.vendorReview.firstReview.popupMessages.mergeInQBOSteppedContent.step1;
+  return /* @__PURE__ */ n.jsxs(Ue, { children: [
+    e.navigateTo,
+    /* @__PURE__ */ n.jsx(Ve, { children: e.expenses }),
+    e.andSelectThe,
+    /* @__PURE__ */ n.jsx(Ve, { children: e.vendors }),
+    e.tab
+  ] });
+}, no = () => {
+  const e = C.vendorReview.firstReview.popupMessages.mergeInQBOSteppedContent.step2;
+  return /* @__PURE__ */ n.jsxs(Ue, { children: [
+    e.lineText,
+    /* @__PURE__ */ n.jsxs(Ve, { children: [
+      /* @__PURE__ */ n.jsx(Un, {}),
+      C.common.edit
+    ] }),
+    e.andCopy,
+    /* @__PURE__ */ n.jsxs(ro, { children: [
+      /* @__PURE__ */ n.jsx(so, {}),
+      /* @__PURE__ */ n.jsx(jn, { children: e.company }),
+      C.common.and,
+      /* @__PURE__ */ n.jsx(jn, { children: e.display }),
+      C.common.texts.name.toLowerCase(),
+      C.common.strings.space,
+      /* @__PURE__ */ n.jsx(lo, {})
+    ] })
+  ] });
+}, to = () => {
+  const e = C.vendorReview.firstReview.popupMessages.mergeInQBOSteppedContent.step3;
+  return /* @__PURE__ */ n.jsxs(Ue, { children: [
+    e.goBackTo,
+    /* @__PURE__ */ n.jsx(Ve, { children: C.common.headers.vendors }),
+    e.lineText,
+    /* @__PURE__ */ n.jsxs(Ve, { children: [
+      /* @__PURE__ */ n.jsx(Un, {}),
+      C.common.edit
+    ] })
+  ] });
+}, oo = () => {
+  const e = C.vendorReview.firstReview.popupMessages.mergeInQBOSteppedContent.step4;
+  return /* @__PURE__ */ n.jsx(Ue, { children: e.lineText });
+}, io = () => {
+  const e = C.vendorReview.firstReview.popupMessages.mergeInQBOSteppedContent.step5;
+  return /* @__PURE__ */ n.jsxs(Ue, { children: [
+    C.common.texts.select,
+    C.common.strings.space,
+    /* @__PURE__ */ n.jsx(Ve, { children: C.common.footer.save }),
+    e.andThen,
+    /* @__PURE__ */ n.jsx(Ve, { children: C.common.yes }),
+    C.common.strings.space,
+    C.common.to,
+    C.common.texts.confirm.toLowerCase(),
+    C.common.strings.dot
+  ] });
+}, Ue = o(Ye)`
+  color: ${(e) => e.theme.colors.hero};
+`, ro = o.div`
+  display: flex;
+  align-items: center;
+  color: ${(e) => e.theme.colors.primary};
+`, Un = o(gn)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  padding: 2px;
+  vertical-align: middle;
+`, so = o(_n)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  vertical-align: middle;
+  margin-right: ${t.sp2};
+  color: ${H.success};
+`, lo = o(ft)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  margin-left: ${t.sp1};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Ve = o(Ye)`
+  color: ${(e) => e.theme.colors.primary};
+  border-radius: ${t.sp1};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  background: ${(e) => e.theme.colors.background};
+  padding: ${t.sp1} ${t.sp2};
+  align-items: center;
+  justify-content: center;
+`, jn = o(Fn)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-left: ${t.sp1};
+  margin-right: ${t.sp1};
+`, Z = Ce.getLocalizedStrings(), ao = () => /* @__PURE__ */ n.jsx(
+  Wn,
+  {
+    steps: [
+      co(),
+      mo(),
+      uo(),
+      po(),
+      ho(),
+      go(),
+      xo(),
+      vo(),
+      wo(),
+      fo()
+    ]
+  }
+), co = () => {
+  const e = Z.vendorReview.firstReview.popupMessages.mergeInNetSuiteSteppedContent.step1;
+  return /* @__PURE__ */ n.jsxs(Y, { children: [
+    e.goTo,
+    /* @__PURE__ */ n.jsx(_, { children: e.lists }),
+    e.then,
+    /* @__PURE__ */ n.jsx(_, { children: e.relationships }),
+    e.then2,
+    /* @__PURE__ */ n.jsx(_, { children: e.vendors })
+  ] });
+}, mo = () => {
+  const e = Z.vendorReview.firstReview.popupMessages.mergeInNetSuiteSteppedContent.step2;
+  return /* @__PURE__ */ n.jsxs(Y, { children: [
+    e.click,
+    /* @__PURE__ */ n.jsxs(_, { children: [
+      /* @__PURE__ */ n.jsx(bo, {}),
+      e.edit
+    ] }),
+    e.next,
+    /* @__PURE__ */ n.jsx(_, { children: e.vendor }),
+    e.sourceInfo
+  ] });
+}, uo = () => {
+  const e = Z.vendorReview.firstReview.popupMessages.mergeInNetSuiteSteppedContent.step3;
+  return /* @__PURE__ */ n.jsxs(Y, { children: [
+    e.onThe,
+    /* @__PURE__ */ n.jsx(_, { children: e.vendor }),
+    e.page,
+    /* @__PURE__ */ n.jsx(_, { children: e.actions }),
+    e.click,
+    /* @__PURE__ */ n.jsx(_, { children: e.merge })
+  ] });
+}, po = () => {
+  const e = Z.vendorReview.firstReview.popupMessages.mergeInNetSuiteSteppedContent.step4;
+  return /* @__PURE__ */ n.jsxs(Y, { children: [
+    e.onThe,
+    /* @__PURE__ */ n.jsx(_, { children: e.mergeVendor }),
+    e.endText
+  ] });
+}, ho = () => {
+  const e = Z.vendorReview.firstReview.popupMessages.mergeInNetSuiteSteppedContent.step5;
+  return /* @__PURE__ */ n.jsx(Y, { children: e.text });
+}, go = () => {
+  const e = Z.vendorReview.firstReview.popupMessages.mergeInNetSuiteSteppedContent.step6;
+  return /* @__PURE__ */ n.jsxs(Y, { children: [
+    e.click,
+    /* @__PURE__ */ n.jsx(_, { children: e.merge }),
+    e.text,
+    /* @__PURE__ */ n.jsx(_, { children: e.ok })
+  ] });
+}, xo = () => {
+  const e = Z.vendorReview.firstReview.popupMessages.mergeInNetSuiteSteppedContent.step7;
+  return /* @__PURE__ */ n.jsxs(Y, { children: [
+    e.onThe,
+    /* @__PURE__ */ n.jsx(_, { children: e.duplicateResolution }),
+    e.text
+  ] });
+}, vo = () => {
+  const e = Z.vendorReview.firstReview.popupMessages.mergeInNetSuiteSteppedContent.step8;
+  return /* @__PURE__ */ n.jsxs(Y, { children: [
+    e.click,
+    /* @__PURE__ */ n.jsx(_, { children: e.refresh }),
+    e.processText,
+    /* @__PURE__ */ n.jsx(_, { children: e.cancel }),
+    e.haltText
+  ] });
+}, wo = () => {
+  const e = Z.vendorReview.firstReview.popupMessages.mergeInNetSuiteSteppedContent.step9;
+  return /* @__PURE__ */ n.jsxs(Y, { children: [
+    e.the,
+    /* @__PURE__ */ n.jsx(_, { children: e.status }),
+    e.text
+  ] });
+}, fo = () => {
+  const e = Z.vendorReview.firstReview.popupMessages.mergeInNetSuiteSteppedContent.step10;
+  return /* @__PURE__ */ n.jsxs(Y, { children: [
+    e.text,
+    /* @__PURE__ */ n.jsx(So, {})
+  ] });
+}, Y = o(Ye)`
+  color: ${(e) => e.theme.colors.hero};
+`, bo = o(gn)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  padding: 2px;
+  vertical-align: middle;
+`, So = o(_n)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  vertical-align: middle;
+  margin-right: ${t.sp2};
+  color: ${H.success};
+`, _ = o(Ye)`
+  color: ${(e) => e.theme.colors.primary};
+  border-radius: ${t.sp1};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  background: ${(e) => e.theme.colors.background};
+  padding: ${t.sp1} ${t.sp2};
+  align-items: center;
+  justify-content: center;
+`, B = {
+  containerPaddingLeft: new x(c[3], c[4]),
+  containerPaddingRight: new x(c[3], c[4]),
+  containerPaddingTop: new x(c[2], c[3]),
+  containerPaddingBottom: new x(c[2], c[3]),
+  containerMarginLeft: new x(c[4], c[8]),
+  vendorsContainerWidth: new x(25, 25),
+  recommendedContainerWidth: new x(20, 20),
+  retainedContainerWidth: new x(25, 25),
+  statusContainerWidth: new x(10, 10),
+  invoiceContainerWidth: new x(5, 5),
+  logoToValueGap: new x(c[2], c[2]),
+  webkitLineClamp: new x(2, 2, 1, 1, 1)
+}, $o = () => {
+  const e = se();
+  return /* @__PURE__ */ n.jsx(yo, { windowSize: e, children: /* @__PURE__ */ n.jsx(jo, { children: /* @__PURE__ */ n.jsxs(Ro, { children: [
+    /* @__PURE__ */ n.jsxs(
+      He,
+      {
+        windowSize: e,
+        width: B.vendorsContainerWidth,
+        gap: B.logoToValueGap,
+        children: [
+          /* @__PURE__ */ n.jsx(An, { width: c[6], height: c[6] }),
+          /* @__PURE__ */ n.jsx(Ee, { windowSize: e, children: /* @__PURE__ */ n.jsx(Le, { width: 120, height: c[4] }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ n.jsx(
+      He,
+      {
+        windowSize: e,
+        width: B.invoiceContainerWidth,
+        children: /* @__PURE__ */ n.jsx(Ee, { windowSize: e, children: /* @__PURE__ */ n.jsx(Le, { width: 120, height: c[4] }) })
+      }
+    ),
+    /* @__PURE__ */ n.jsx(
+      He,
+      {
+        windowSize: e,
+        width: B.recommendedContainerWidth,
+        children: /* @__PURE__ */ n.jsx(Ee, { windowSize: e, children: /* @__PURE__ */ n.jsx(Le, { width: 120, height: c[4] }) })
+      }
+    ),
+    /* @__PURE__ */ n.jsx(
+      He,
+      {
+        windowSize: e,
+        width: B.retainedContainerWidth,
+        children: /* @__PURE__ */ n.jsx(Ee, { windowSize: e, children: /* @__PURE__ */ n.jsx(Le, { width: 120, height: c[4] }) })
+      }
+    ),
+    /* @__PURE__ */ n.jsx(
+      He,
+      {
+        windowSize: e,
+        width: B.statusContainerWidth,
+        children: /* @__PURE__ */ n.jsx(Ee, { windowSize: e, children: /* @__PURE__ */ n.jsx(Le, { width: 120, height: c[4] }) })
+      }
+    )
+  ] }) }) });
+}, yo = o.div`
+  display: flex;
+  margin-bottom: ${t.sp3};
+  background-color: ${(e) => e.theme.colors.grey5};
+  padding-left: ${(e) => B.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${(e) => B.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${(e) => B.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => B.containerPaddingBottom.valuePx(e.windowSize)};
+  border: ${(e) => ` 1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${(e) => e.theme.mode === "dark" ? `${H.dropShadowNormalDark} ${t.sp0} 2px ${t.sp1}` : `${t.sp0} 2px ${t.sp1} ${H.dropShadowNormalLight}`};
+  border-radius: ${t.sp2};
+  cursor: pointer;
+  &:hover {
+    border-color: ${(e) => e.theme.colors.primary};
+    div {
+      color: ${(e) => e.theme.colors.primary};
+    }
+    .entity-icon {
+      color: ${(e) => e.theme.colors.grey5};
+    }
+  }
+  margin-right: ${(e) => B.containerMarginLeft.valuePx(e.windowSize)};
+  margin-left: ${(e) => B.containerMarginLeft.valuePx(e.windowSize)};
+  box-sizing: border-box;
+  align-items: center;
+`, jo = o.div`
+  display: block;
+  width: 100%;
+`, Ro = o.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+`, He = o.div`
+  display: flex;
+  align-items: center;
+  gap: ${(e) => e.gap?.valuePx(e.windowSize)};
+  width: ${(e) => e.width.valuePercentage(e.windowSize)};
+  :last-of-type {
+    padding-right: 0;
+  }
+`, Ee = o(Ae)`
+  color: ${(e) => e.theme.colors.hero};
+  flex-grow: 1;
+  word-break: break-word;
+  white-space: nowrap;
+  -webkit-line-clamp: ${(e) => B.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: ${(e) => e.windowSize === "small" ? "200px" : "initial"};
+  display: "inline-block";
+  margin-right: ${t.sp4};
+`, Vo = 88, Co = 156, Dn = 58, ko = 45, xn = Ce.getLocalizedStrings(), en = xn.vendors.reviewVendorList.header, Gn = {
+  key: "vendor",
+  value: en.vendors,
+  sortOrder: "ascending",
+  width: 25
+}, qn = {
+  key: "updateTo",
+  value: en.updateTo,
+  sortOrder: "ascending",
+  width: 27
+}, Io = {
+  key: "retain",
+  value: en.retain,
+  sortOrder: "ascending",
+  width: 20
+}, Qn = {
+  key: "status",
+  value: en.status,
+  sortOrder: "ascending",
+  width: 10
+}, Mo = {
+  key: "action",
+  value: xn.common.strings.empty,
+  sortOrder: "ascending",
+  width: 15
+}, To = {
+  key: "viewTenantInvoice",
+  value: xn.common.strings.empty,
+  sortOrder: "ascending",
+  width: c[1]
+}, No = [
+  Gn,
+  To,
+  qn,
+  Io,
+  Qn,
+  Mo
+], Rn = [
+  Gn.key,
+  qn.key,
+  Qn.key
+], cn = {
+  sortKey: "ytd",
+  sortOrder: "descending"
+}, Oe = {
+  headerLastColumnTopPadding: new x(c[0], c[4]),
+  headerLastColumnRightPadding: new x(c[3], c[11]),
+  headerLastColumnBottomPadding: new x(c[0], c[4]),
+  headerLastColumnLeftPadding: new x(c[3], c[11]),
+  headerHeight: new x(ko, Dn)
+}, Kn = ({
+  sortConfig: e,
+  disableClick: s = !1,
+  onColumnSortConfigChanged: m
+}) => {
+  const d = se(), [i, R] = P(No);
+  je(() => {
+    const p = [...i];
+    for (const V of p)
+      V.key === e.sortKey ? V.sortOrder = e.sortOrder : V.sortOrder = "ascending";
+    R(p);
+  }, [e.sortKey, e.sortOrder]);
+  const S = (p, V) => {
+    let F = V;
+    e.sortKey === p && (F = V === "ascending" ? "descending" : "ascending"), m(p, F);
+  }, T = (p) => {
+    s === !1 && p.key != null && Rn.includes(p.key) && S(
+      gt(p.key),
+      p.sortOrder
+    );
+  };
+  return /* @__PURE__ */ n.jsx(Oo, { windowSize: d, children: i.map((p) => /* @__PURE__ */ n.jsxs(
+    Po,
+    {
+      sortDataValue: e.sortKey,
+      actualDataValue: p.key,
+      wrapperWidth: p.width,
+      isClickDisabled: s,
+      windowSize: d,
+      children: [
+        /* @__PURE__ */ n.jsx(
+          Ao,
+          {
+            onClick: () => T(p),
+            isClickDisabled: s,
+            isSortingDisabled: p.key === "retain",
+            "data-testid": X(
+              "vendor-first-review-page-header-name-wrapper"
+            ),
+            children: /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+              p.key === "updateTo" ? /* @__PURE__ */ n.jsx(zo, { children: /* @__PURE__ */ n.jsx(Bo, {}) }) : null,
+              /* @__PURE__ */ n.jsx(ke, { children: p.value }),
+              Rn.includes(p.key) ? /* @__PURE__ */ n.jsx(
+                _o,
+                {
+                  sortConfig: e,
+                  headerdata: p,
+                  children: /* @__PURE__ */ n.jsx(bt, { width: 12, height: 12 })
+                }
+              ) : null
+            ] })
+          }
+        ),
+        /* @__PURE__ */ n.jsx(
+          Fo,
+          {
+            isClickDisabled: s,
+            sortDataValue: e.sortKey,
+            isVisible: e.sortKey === p.key && p.key !== cn.sortKey,
+            children: /* @__PURE__ */ n.jsx(
+              Lo,
+              {
+                onClick: () => {
+                  s === !1 && S(
+                    cn.sortKey,
+                    cn.sortOrder
+                    // default sort order
+                  );
+                },
+                "data-testid": X(
+                  "vendor-first-review-page-header-sort-cancel-icon"
+                )
+              }
+            )
+          }
+        )
+      ]
+    },
+    p.key
+  )) });
+}, Oo = o.div`
+  top: ${t.sp0};
+  left: ${t.sp0};
+  min-height: ${(e) => Oe.headerHeight.valuePx(e.windowSize)};
+  max-height: ${(e) => Oe.headerHeight.valuePx(e.windowSize)};
+  width: 100%;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${(e) => `${Oe.headerLastColumnTopPadding.valuePx(
+  e.windowSize
+)} ${Oe.headerLastColumnRightPadding.valuePx(
+  e.windowSize
+)} ${Oe.headerLastColumnBottomPadding.valuePx(
+  e.windowSize
+)} ${Oe.headerLastColumnLeftPadding.valuePx(e.windowSize)}`};
+  background-color: ${(e) => e.theme.colors.grey4};
+  position: sticky;
+`, Po = o.div`
+  color: ${(e) => e.isClickDisabled ? e.theme.colors.grey1 : e.sortDataValue === e.actualDataValue ? e.theme.colors.primary : e.theme.colors.grey1};
+
+  width: ${(e) => `${e.wrapperWidth}%`};
+  max-width: ${(e) => `${e.wrapperWidth}%`};
+  padding-left: ${t.sp0};
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  left: ${t.sp0};
+  justify-content: flex-start;
+  position: static;
+  z-index: 0;
+  box-sizing: border-box;
+`, Lo = o(St)`
+  width: 12px;
+  height: 12px;
+`, _o = o.div`
+  display: flex;
+  align-items: center;
+  transform: ${(e) => e.headerdata.sortOrder === "descending" ? "rotate(180deg)" : "rotate(0deg)"};
+  ${(e) => e.headerdata.sortOrder === "ascending" ? "padding-top: 2px" : "padding-bottom: 2px"};
+`, Fo = o.div`
+  display: ${(e) => e.isVisible ? "flex" : "none"};
+  align-items: center;
+  padding-top: 2px;
+  cursor: ${(e) => e.isClickDisabled === !0 ? "not-allowed" : "pointer"};
+  &:hover {
+    color: ${(e) => e.isClickDisabled ? e.theme.colors.grey1 : e.theme.colors.primary};
+  }
+`, Ao = o.div`
+  display: flex;
+  cursor: ${(e) => e.isClickDisabled === !0 ? "not-allowed" : e.isSortingDisabled === !0 ? "auto" : "pointer"};
+  gap: 6px;
+  &:hover {
+    color: ${(e) => e.isClickDisabled || e.isSortingDisabled ? e.theme.colors.grey1 : e.theme.colors.primary};
+  }
+`, zo = o.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, Bo = o(zn)`
+  color: ${(e) => e.theme.colors.brandColorJade};
+  width: ${t.sp3};
+  height: ${t.sp3};
+`, Ho = ({
+  sortConfig: e,
+  onColumnSortConfigChanged: s
+}) => {
+  const m = se();
+  return /* @__PURE__ */ n.jsxs(Eo, { windowSize: m, children: [
+    /* @__PURE__ */ n.jsx(
+      Kn,
+      {
+        sortConfig: e,
+        disableClick: !0,
+        onColumnSortConfigChanged: s
+      }
+    ),
+    /* @__PURE__ */ n.jsx(Wo, { windowSize: m, children: [...Array(7)].map((d, i) => /* @__PURE__ */ n.jsx($o, {}, i)) })
+  ] });
+}, Eo = o.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+`, Wo = o.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+`, ue = {
+  autocompleteEmptyPaddingTop: new x(0, c[1]),
+  autocompleteEmptyPaddingBottom: new x(0, c[1]),
+  loadingStateOptionTopMargin: new x(9.5, 9.5),
+  loadingStateOptionBottomMargin: new x(9.5, 9.5),
+  loadingStateOptionLeftMargin: new x(16, 16),
+  loadingStateOptionRightMargin: new x(19, 19),
+  loadingStateOptionRowGap: new x(19, 19),
+  loadingStateRowGap: new x(10, 10)
+}, Uo = {
+  selectFieldInput: new Vt("smallRegular", "standardRegular")
+}, Do = ({
+  name: e,
+  registerOptions: s,
+  menuIsOpen: m,
+  defaultValue: d,
+  isDisabled: i,
+  style: R,
+  placeholder: S,
+  customStyleConfig: T,
+  showDownChevronWithValue: p,
+  isOptionRemovable: V = !0,
+  autoFocus: F = !1,
+  getRenameOptionText: le,
+  onClickRenameOption: ee,
+  onMenuClose: f,
+  valueToInfo: G,
+  valueToId: ne,
+  loadOptions: A
+}) => {
+  const {
+    control: De,
+    formState: { errors: Ie }
+  } = it(), Me = hn(), [pe, z] = P(
+    null
+  ), U = rt(Ie, e), ze = Ln(
+    (h) => ({
+      value: h.value,
+      label: h.label,
+      info: G?.(h.value) ?? "",
+      id: ne?.(h.value) ?? null,
+      isDisabled: h.isDisabled,
+      isOptionRecommended: h.isOptionRecommended
+    }),
+    [G, ne]
+  ), te = (h) => h.map(($) => ({
+    label: $.label,
+    options: $.options.map(
+      (D) => ze(D)
+    )
+  })), j = (h) => {
+    if (h == null || !h)
+      return;
+    let $ = [];
+    return d.defaultOptions.forEach((D) => {
+      $ = $.concat(D.options);
+    }), {
+      value: h,
+      label: $.find((D) => D.value === h)?.label ?? h,
+      info: G?.(h) ?? ""
+    };
+  }, Te = (h) => {
+    z(h);
+  }, q = {
+    ...T,
+    container: (h) => ({
+      ...h,
+      width: "100%",
+      ...R
+    }),
+    valueContainer: (h, $) => ({
+      ...h,
+      justifyContent: $.selectProps.menuIsOpen === !1 ? "flex-end" : "flex-start",
+      ...T?.valueContainer?.(h, $)
+    }),
+    menu: (h) => ({
+      ...h,
+      backgroundColor: Me.colors.grey5,
+      borderRadius: t.sp1,
+      boxShadow: `${t.sp0} 2px ${t.sp2} ${Me.colors.dropShadowHover}`,
+      whiteSpace: "nowrap",
+      zIndex: 2,
+      width: "100%",
+      margin: 0
+    }),
+    menuList: (h) => ({
+      ...h,
+      borderRadius: t.sp1
+    })
+  }, M = {
+    hasError: U,
+    showDownChevronWithValue: p,
+    customFirstGroup: pe,
+    updateCustomFirstGroup: Te,
+    getRenameOptionText: le,
+    onClickRenameOption: ee
+  }, k = Ce.getLocalizedStrings().autoComplete, E = se(), v = (h) => h.inputValue.trim().length < 2 ? null : /* @__PURE__ */ n.jsxs(yi, { windowSize: E, children: [
+    /* @__PURE__ */ n.jsx(ji, {}),
+    /* @__PURE__ */ n.jsx(Ri, { children: k.input.noMatches })
+  ] }), de = (h, $) => {
+    A(h, $);
+  }, he = Je(
+    Pn(
+      (h, $) => de(h, $),
+      500,
+      {
+        trailing: !0
+      }
+    )
+  ).current, Q = (h, $) => {
+    if (h.trim().length < 2)
+      return $([]);
+    he(h, $);
+  };
+  return /* @__PURE__ */ n.jsx(
+    st,
+    {
+      name: e,
+      control: De,
+      defaultValue: d,
+      rules: s,
+      render: ({ field: { onChange: h, onBlur: $, value: D, ref: ge } }) => {
+        const K = D;
+        return /* @__PURE__ */ n.jsx(
+          lt,
+          {
+            ...M,
+            menuIsOpen: m,
+            autoFocus: F,
+            ref: ge,
+            cacheOptions: !1,
+            isMulti: !1,
+            isSearchable: !0,
+            isClearable: !0,
+            controlShouldRenderValue: !0,
+            placeholder: S,
+            noOptionsMessage: v,
+            value: j(K.selectedOption),
+            defaultOptions: te(K.defaultOptions),
+            loadOptions: Q,
+            onChange: (ae) => {
+              ae == null || ae.value != null && K?.selectedOption === ae.value ? V === !0 && h({
+                selectedOption: void 0,
+                defaultOptions: K.defaultOptions
+              }) : h({
+                selectedOption: ae.value,
+                defaultOptions: K.defaultOptions
+              });
+            },
+            tabSelectsValue: !1,
+            openMenuOnFocus: !0,
+            onMenuClose: f,
+            classNamePrefix: "auto-complete-grouped-single-select-field",
+            onBlur: $,
+            menuPlacement: "auto",
+            maxMenuHeight: 288,
+            menuShouldScrollIntoView: !0,
+            closeMenuOnSelect: !0,
+            components: {
+              Control: Go,
+              Option: ei,
+              Input: Qo,
+              Group: Jo,
+              GroupHeading: Xo,
+              SingleValue: Zo,
+              ValueContainer: qo,
+              MenuList: Ko,
+              LoadingIndicator: Ii,
+              DropdownIndicator: Vi,
+              IndicatorSeparator: Ci,
+              Placeholder: Yo,
+              ClearIndicator: ki
+            },
+            hideSelectedOptions: !1,
+            styles: q,
+            isDisabled: i != null
+          }
+        );
+      }
+    }
+  );
+}, Go = (e) => {
+  const { menuIsOpen: s, isFocused: m, isDisabled: d, selectProps: i, options: R } = e, { value: S, hasError: T } = i;
+  let p = [];
+  R.forEach((F) => {
+    p = p.concat(F.options);
+  });
+  const V = se();
+  return /* @__PURE__ */ n.jsx(
+    ri,
+    {
+      windowSize: V,
+      menuIsOpen: s,
+      isFocused: m,
+      isDisabled: d,
+      selectedValue: S,
+      hasError: T,
+      children: /* @__PURE__ */ n.jsx(re.Control, { ...e, className: "select-control", children: e.children })
+    }
+  );
+}, qo = (e) => {
+  const { selectProps: s, children: m } = e, { showDownChevronWithValue: d } = s;
+  return /* @__PURE__ */ n.jsxs(re.ValueContainer, { ...e, className: "select-value-container", children: [
+    m,
+    d === !0 ? /* @__PURE__ */ n.jsx(Ae, { children: /* @__PURE__ */ n.jsx(si, {}) }) : null
+  ] });
+}, Qo = (e) => {
+  const { selectProps: s } = e, { placeholder: m, value: d } = s;
+  return /* @__PURE__ */ n.jsx(
+    re.Input,
+    {
+      ...e,
+      autoComplete: "off",
+      placeholder: d == null ? m : void 0,
+      children: e.children
+    }
+  );
+}, Ko = (e) => {
+  const { children: s, selectProps: m } = e, {
+    customFirstGroup: d,
+    updateCustomFirstGroup: i,
+    getRenameOptionText: R,
+    onClickRenameOption: S
+  } = m, T = se(), p = R?.(e.selectProps.inputValue);
+  return je(() => {
+    d == null && i(s[0]);
+  }, [d, i, s]), /* @__PURE__ */ n.jsx(n.Fragment, { children: e.isLoading === !0 ? /* @__PURE__ */ n.jsxs(re.MenuList, { ...e, children: [
+    d,
+    /* @__PURE__ */ n.jsx(gi, { windowSize: T, children: [...Array(2)].map((V, F) => /* @__PURE__ */ n.jsxs(xi, { windowSize: T, children: [
+      /* @__PURE__ */ n.jsx(An, { width: c[4], height: c[4] }),
+      /* @__PURE__ */ n.jsx(Le, { width: 218, height: c[4] })
+    ] }, F)) })
+  ] }) : /* @__PURE__ */ n.jsxs(re.MenuList, { ...e, children: [
+    s,
+    p != null && p.length > 0 ? /* @__PURE__ */ n.jsxs(
+      vi,
+      {
+        onClick: () => {
+          S?.(e.selectProps.inputValue);
+        },
+        children: [
+          /* @__PURE__ */ n.jsx(fi, { children: /* @__PURE__ */ n.jsx(wi, {}) }),
+          /* @__PURE__ */ n.jsx(bi, { children: p })
+        ]
+      }
+    ) : null
+  ] }) });
+}, Jo = (e) => /* @__PURE__ */ n.jsx(re.Group, { ...e, children: e.children }), Xo = (e) => {
+  const [s, m] = P(!0);
+  return /* @__PURE__ */ n.jsx(
+    ui,
+    {
+      className: "group-heading-container",
+      isGroupOpen: s,
+      onClick: () => m(!s),
+      children: /* @__PURE__ */ n.jsxs(re.GroupHeading, { ...e, children: [
+        /* @__PURE__ */ n.jsx(pi, { isGroupOpen: s, children: /* @__PURE__ */ n.jsx(hi, { className: "close-tick-icon" }) }),
+        e.children
+      ] })
+    }
+  );
+}, Zo = ({ children: e, ...s }, m) => {
+  const d = m == null || s.selectProps.menuIsOpen === !0 ? e : m.sticky === !0 ? /* @__PURE__ */ n.jsx(ni, { title: m.text, children: e }) : /* @__PURE__ */ n.jsx(
+    We,
+    {
+      style: { padding: t.sp3 },
+      title: m.text,
+      placement: "top",
+      children: e
+    }
+  );
+  return /* @__PURE__ */ n.jsx(re.SingleValue, { ...s, children: d });
+}, Yo = () => null, ei = (e) => {
+  const { data: s, isSelected: m, isDisabled: d, isFocused: i } = e;
+  return /* @__PURE__ */ n.jsx(
+    li,
+    {
+      className: "select-option-wrapper",
+      isFocused: i,
+      isSelected: m,
+      isDisabled: d,
+      isOptionRecommended: s.isOptionRecommended === !0,
+      showBottomBorder: s.info == null || s.isOptionRecommended === !1,
+      children: /* @__PURE__ */ n.jsx(re.Option, { ...e, className: "select-option", children: /* @__PURE__ */ n.jsxs(di, { isOptionRecommended: s.isOptionRecommended, children: [
+        s.isOptionRecommended === !0 ? (
+          // We need to show this thunder icon on tran. detail page only where the option is recommended
+          /* @__PURE__ */ n.jsx(Si, { children: /* @__PURE__ */ n.jsx($i, {}) })
+        ) : null,
+        /* @__PURE__ */ n.jsxs(
+          mi,
+          {
+            isSelected: m,
+            isOptionRecommended: s.isOptionRecommended,
+            children: [
+              /* @__PURE__ */ n.jsx(ai, { isSelected: m, isDisabled: d, children: s.label }),
+              s.isOptionRecommended === !0 && s.info != null ? /* @__PURE__ */ n.jsx(ci, { isSelected: m, isDisabled: d, children: s.info }) : null
+            ]
+          }
+        )
+      ] }) })
+    }
+  );
+}, ni = ({
+  children: e,
+  title: s
+}) => /* @__PURE__ */ n.jsxs(ti, { children: [
+  /* @__PURE__ */ n.jsxs(oi, { children: [
+    s,
+    /* @__PURE__ */ n.jsx(ii, {})
+  ] }),
+  e
+] }), ti = o.div`
+  position: relative;
+  display: none;
+`, oi = o.div`
+  position: absolute;
+  background: ${un.primary};
+  color: ${un.grey5};
+  padding: ${t.sp3};
+  border-radius: ${t.sp1};
+  top: -60px;
+  right: 20px;
+  opacity: 0.85;
+  pointer-events: none;
+`, ii = o.span`
+  position: absolute;
+  top: 55px;
+  left: 85%;
+  border-width: ${t.sp2};
+  border-style: solid;
+  border-color: ${un.primary} transparent transparent transparent;
+`, ri = o.span`
+  width: calc(100% - ${t.sp4});
+  background-color: ${(e) => e.hasError ? H.importantLight : e.menuIsOpen ? e.theme.colors.background : e.theme.colors.grey5};
+  border-radius: ${t.sp1};
+  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+  .select-control {
+    border: none;
+    height: ${t.sp6};
+    background-color: inherit;
+    &:hover {
+      fill: ${(e) => e.theme.colors.primary};
+      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.hasError ? H.importantLight : e.theme.colors.background};
+      border-color: none;
+    }
+    box-shadow: none;
+    width: auto;
+    min-height: auto;
+    cursor: pointer;
+  }
+
+  .select-value-container {
+    width: 100%;
+    display: flex;
+    padding: 0;
+    max-width: 100%;
+    height: 100%;
+    min-width: auto;
+    align-items: center;
+    flex-wrap: nowrap;
+    cursor: pointer;
+    justify-content: "flex-start";
+    .auto-complete-grouped-single-select-field__single-value {
+      display: flex;
+      color: ${(e) => e.hasError ? H.important : e.theme.colors.primary};
+      ${(e) => `${Uo.selectFieldInput.style(e.windowSize)}`};
+    }
+
+    .auto-complete-grouped-single-select-field__input-container {
+      display: flex;
+      width: ${(e) => e.menuIsOpen === !1 && e.selectedValue != null ? t.sp0 : "100%"};
+      position: ${(e) => e.isFocused === !1 && e.selectedValue == null ? "initial" : "absolute"};
+      ${Bn.standardRegular.css};
+      color: ${(e) => e.theme.colors.primary};
+      margin: ${t.sp0};
+      cursor: inherit;
+
+      > input {
+        text-align: ${(e) => e.isFocused === !1 && e.selectedValue == null ? "right" : "initial"};
+        align-items: center;
+        overflow: hidden;
+        cursor: inherit;
+        :disabled {
+          visibility: visible;
+        }
+        ::placeholder {
+          color: ${(e) => e.hasError ? H.important : e.theme.colors.grey1};
+        }
+      }
+    }
+  }
+
+  ~ .auto-complete-grouped-single-select-field__menu {
+    margin-top: ${t.sp3};
+    width: 125%;
+  }
+`, si = o(yt)`
+  width: 12px;
+  height: 12px;
+  color: ${(e) => e.theme.colors.hero};
+  padding-right: 12px;
+`, li = o.div`
+  height: ${(e) => e.isOptionRecommended === !0 ? t.sp8 : t.sp6};
+  &:hover {
+    background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.theme.colors.background};
+  }
+  .select-option {
+    ${Bn.smallRegular.css};
+    height: ${(e) => e.isOptionRecommended === !0 ? t.sp8 : "auto"};
+    padding: 9px ${t.sp3};
+    color: ${(e) => e.isSelected || e.isOptionRecommended ? e.theme.colors.primary : e.theme.colors.hero};
+    opacity: ${(e) => e.isDisabled ? 0.32 : 1};
+    background-color: ${(e) => e.isSelected ? e.theme.colors.background : e.theme.colors.grey5};
+    ${(e) => e.isFocused && `background-color: ${e.theme.colors.background}`};
+
+    cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+    border-top: none;
+    .close-tick-icon {
+      display: none;
+    }
+    &:hover {
+      color: ${(e) => e.isDisabled ? e.theme.colors.champion : e.theme.colors.primary};
+      .right-tick-icon {
+        display: none;
+      }
+      .close-tick-icon {
+        display: inline-block;
+      }
+    }
+  }
+`, di = o.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: ${(e) => e.isOptionRecommended === !0 ? t.sp1 : t.sp0};
+  height: ${(e) => e.isOptionRecommended === !0 ? t.sp5 : "auto"};
+`, ai = o(ke)`
+  padding-right: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+  ${(e) => e.isSelected && "cursor: default"};
+`, ci = o(Hn)`
+  padding-right: 10px;
+  color: ${(e) => e.theme.colors.grey1};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`, mi = o.div`
+  width: ${(e) => e.isSelected ? `calc(100% - ${t.sp3})` : "100%"};
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`, ui = o(jt)`
+  display: flex;
+  color: ${(e) => e.theme.colors.primary};
+  align-items: center;
+  flex-direction: row;
+  margin-bottom: ${t.sp1};
+  ~ div .select-option-wrapper {
+    display: ${(e) => e.isGroupOpen ? "flex" : "none"};
+  }
+  .auto-complete-grouped-single-select-field__group-heading {
+    display: flex;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    font-family: inherit;
+    color: inherit;
+    text-transform: capitalize;
+    cursor: pointer;
+    padding: 0 ${t.sp3};
+    margin-bottom: ${t.sp0};
+    width: 100%;
+  }
+`, pi = o.div`
+  display: flex;
+  margin-right: ${t.sp2};
+  transform: ${(e) => e.isGroupOpen ? "rotate(0deg)" : "rotate(-90deg)"};
+  align-items: center;
+`, hi = o(Rt)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  color: ${(e) => e.theme.colors.primary};
+`, gi = o.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${(e) => ue.loadingStateOptionRowGap.valuePx(e.windowSize)};
+  margin: ${(e) => `${ue.loadingStateOptionTopMargin.valuePx(
+  e.windowSize
+)} ${ue.loadingStateOptionRightMargin.valuePx(
+  e.windowSize
+)} ${ue.loadingStateOptionBottomMargin.valuePx(
+  e.windowSize
+)} ${ue.loadingStateOptionLeftMargin.valuePx(e.windowSize)}`};
+`, xi = o.div`
+  display: flex;
+  column-gap: ${(e) => ue.loadingStateRowGap.valuePx(e.windowSize)};
+`, vi = o.div`
+  display: flex;
+  align-items: flex-start;
+  padding: 9px ${t.sp3};
+  cursor: pointer;
+  border-top: none;
+  column-gap: ${t.sp2};
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    background-color: ${(e) => e.theme.colors.background};
+    border-color: none;
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, wi = o($t)`
+  height: 20px;
+  width: 20px;
+`, fi = o.div`
+  display: flex;
+  width: ${t.sp3};
+  align-items: center;
+`, bi = o(ke)`
+  overflow-wrap: break-word;
+  white-space: normal;
+  word-break: break-all;
+`, Si = o.div`
+  margin-right: ${t.sp2};
+  margin-bottom: 12px;
+`, $i = o(zn)`
+  color: ${(e) => e.theme.colors.primary};
+  width: ${t.sp3};
+  height: ${t.sp3};
+`, yi = o.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-top: ${(e) => ue.autocompleteEmptyPaddingTop.valuePx(e.windowSize)};
+  padding-right: ${t.sp3};
+  padding-bottom: ${(e) => ue.autocompleteEmptyPaddingBottom.valuePx(e.windowSize)};
+  padding-left: ${t.sp0};
+`, ji = o(Ct)`
+  width: ${t.sp4};
+  height: ${t.sp4};
+  margin: ${t.sp3} ${t.sp3} ${t.sp3} ${t.sp0};
+  color: ${(e) => e.theme.colors.hero};
+  overflow: visible;
+`, Ri = o(ke)`
+  overflow-wrap: break-word;
+  white-space: normal;
+  word-break: break-all;
+`, Vi = () => null, Ci = () => null, ki = () => null, Ii = () => null, vn = (e, s, m, d, i) => {
+  const R = Ce.getLocalizedStrings().vendorReview.firstReview, S = [];
+  return m.length > 0 && S.push({
+    label: R.vendorDropdown.recommendedVendor,
+    options: []
+  }), m.forEach((p) => {
+    S[0].options.push({
+      label: p.globalMerchantName,
+      value: p.globalMerchantId ?? p.globalMerchantName,
+      isVisible: !0,
+      isDisabled: s,
+      info: p.reason,
+      isOptionRecommended: !0
+    });
+  }), S.length && S[0].options.length === 0 && S.pop(), S.push({
+    label: R.vendorDropdown.allVendors,
+    options: e.map((p) => ({
+      label: p.globalMerchantName,
+      value: p.globalMerchantId,
+      isVisible: !0
+    }))
+  }), d != null && S[S.length - 1].options.push({
+    label: d.name,
+    value: d.id,
+    isVisible: !1,
+    isDisabled: s
+  }), i != null && S[S.length - 1].options.push({
+    label: i.name,
+    value: i.id,
+    isVisible: !1
+  }), S;
+}, L = {
+  containerPaddingLeft: new x(c[3], c[4]),
+  containerPaddingRight: new x(c[3], c[4]),
+  containerPaddingTop: new x(c[2], c[3]),
+  containerPaddingBottom: new x(c[2], c[3]),
+  containerMarginLeft: new x(c[4], c[8]),
+  nameLogoWidth: new x(c[6], c[6]),
+  nameLogoHeight: new x(c[6], c[6]),
+  logoToValueGap: new x(c[2], c[2]),
+  logoHeightAndWidth: new x(c[3], c[4]),
+  webkitLineClamp: new x(2, 2, 1, 1, 1)
+}, {
+  common: W,
+  vendorReview: { firstReview: Re }
+} = Ce.getLocalizedStrings(), Mi = ({
+  analytics: e,
+  authParams: s,
+  attachmentEndpoint: m,
+  sectionId: d,
+  rowData: i,
+  searchAutoComplete: R,
+  setCurrentVendorInAction: S,
+  onClickRenameOption: T,
+  onVendorNameClick: p,
+  onClickSave: V,
+  onClickCancel: F,
+  onClearGlobalMerchantAutoCompleteResults: le
+}) => {
+  const ee = hn(), f = se(), G = En(), [ne, A] = P(!1), [De, Ie] = P(0), [Me, pe] = P(!1), { globalMerchantAutoCompleteView: z } = R.autoCompleteData, U = i.currentSelection != null, [ze, te] = P(!1), { transactionAttachments: j } = i, [Te, q] = P([]), [M, k] = P(null), [E, v] = P(0), [de, he] = P(0), [Q, h] = P(0), $ = (l) => {
+    h(l), te(!0), xe(j[l]), k(Te[l]);
+  };
+  function D(l) {
+    v(l.targetTouches[0].clientX);
+  }
+  function ge(l) {
+    he(l.targetTouches[0].clientX);
+  }
+  function K(l) {
+    return l < 0 ? j.length + l : l % j.length;
+  }
+  function ae() {
+    E - de > 50 && de !== 0 && Q < j.length - 1 ? ($(K(Q + 1)), v(0), he(0)) : E - de < -50 && de !== 0 && Q > 0 && ($(K(Q - 1)), v(0), he(0));
+  }
+  const [Be, xe] = P(j[0]), nn = () => {
+    te(!1), k(null), q([]), j.length > 0 && xe(j[0]);
+  }, tn = () => {
+    q([]), Ie((l) => {
+      const b = l < j.length - 1 ? l + 1 : 0;
+      return Qe(i.vendorId, b), b;
+    });
+  }, on = () => {
+    q([]), Ie((l) => {
+      const b = l > 0 ? l - 1 : j.length - 1;
+      return Qe(i.vendorId, b), b;
+    });
+  }, Ge = j.length === 0, qe = j.map(
+    (l) => l.id
+  ), Qe = (l, b) => {
+    te(!0);
+    async function O(ce) {
+      return await yn(
+        m,
+        s,
+        ce
+      );
+    }
+    const fe = [qe[b]];
+    O({
+      vendorId: l,
+      attachmentIds: fe
+    }).then((ce) => {
+      q(ce), xe(j[b]), j.length > 0 && k(ce[0]);
+    });
+  }, rn = (l) => {
+    te(!0);
+    async function b(O) {
+      return await yn(
+        m,
+        s,
+        O
+      );
+    }
+    b({
+      vendorId: l,
+      attachmentIds: qe
+    }).then((O) => {
+      q(O), j.length > 0 && k(O[0]);
+    });
+  }, Ke = fn(() => i.currentSelection === "customMerchant" && i.selectedVendor.id != null && i.selectedVendor.name != null ? {
+    id: i.selectedVendor.id,
+    name: i.selectedVendor.name
+  } : void 0, [i]), ve = i.status.code === "under_review" || i.saveStatus.fetchState === "In-Progress", we = i.status.code === "merge_in_qbo" || i.status.code === "merge_in_netsuite", N = we || ve, sn = (l) => {
+    let b = l.websiteUrl?.toString();
+    if (b) {
+      if (b.includes("http") || (b = "https://".concat(b)), i.currentVendor != null) {
+        const O = l?.globalMerchantName ?? null;
+        e.trackVendorReviewWebsiteOpened({
+          reviewSource: "tenant_review",
+          vendorName: i.currentVendor.name,
+          wasRecommendationAvailable: !!O,
+          recommendedVendorName: O,
+          recommendedVendorReason: l.reason ?? null,
+          vendorWebsite: b
+        });
+      }
+      window.open(b, "_blank");
+    }
+  }, r = i.currentVendor != null ? {
+    label: {
+      label: i.currentVendor?.name,
+      style: {
+        display: "block",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      }
+    },
+    checkBoxField: {
+      name: an(d, ie, "retain"),
+      defaultChecked: i.currentSelection === "retain"
+    },
+    tooltipProps: {
+      text: i.currentVendor?.name
+    },
+    isDisabled: N
+  } : void 0, g = Ln(
+    (l) => l.logo != null ? /* @__PURE__ */ n.jsxs(Hi, { children: [
+      /* @__PURE__ */ n.jsx(
+        bn,
+        {
+          photoUrl: l.logo.toString(),
+          styles: {
+            width: L.logoHeightAndWidth.valuePx(f),
+            height: L.logoHeightAndWidth.valuePx(f)
+          },
+          placeholder: {
+            width: L.logoHeightAndWidth.value(f),
+            height: L.logoHeightAndWidth.value(f)
+          },
+          fallbackAvatar: /* @__PURE__ */ n.jsx(mn, { children: /* @__PURE__ */ n.jsx(
+            dn,
+            {
+              name: l.globalMerchantName,
+              size: L.logoHeightAndWidth.valuePx(f)
+            }
+          ) })
+        }
+      ),
+      /* @__PURE__ */ n.jsx(ye, { windowSize: f, isLastItem: !1, children: /* @__PURE__ */ n.jsx(Nn, { children: l.globalMerchantName }) })
+    ] }) : /* @__PURE__ */ n.jsx(ye, { windowSize: f, isLastItem: !1, children: /* @__PURE__ */ n.jsx(Nn, { children: l.globalMerchantName }) }),
+    [f]
+  ), w = i.recommendations.map(
+    (l, b) => {
+      const O = g(l), ce = `recommended${kt(b)}`;
+      return {
+        label: {
+          label: O,
+          style: {
+            display: "block",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          }
+        },
+        checkBoxField: {
+          name: an(d, ie, ce),
+          defaultChecked: i.currentSelection === ce
+        },
+        tooltipProps: {
+          text: l.websiteUrl?.toString().length ? /* @__PURE__ */ n.jsx(
+            Ti,
+            {
+              recommendation: l,
+              onRedirectionToRecommendedMerchantWebsiteUrl: () => sn(l)
+            }
+          ) : l.globalMerchantName,
+          maxWidth: "360px"
+        },
+        isDisabled: N,
+        fieldName: ce
+      };
+    }
+  ), a = fn(() => ({
+    defaultOptions: vn(
+      z.globalMerchants,
+      we,
+      i.recommendations,
+      i.currentVendor,
+      Ke
+    ),
+    selectedOption: i.selectedVendor.id
+  }), [
+    z,
+    i,
+    Ke,
+    we
+  ]), u = () => {
+    A(!1), le();
+  }, y = (l) => {
+    const b = i.currentVendor?.name, O = [
+      ...z.globalMerchants.map(
+        (fe) => fe.globalMerchantName
+      ),
+      ...i.recommendations.map((fe) => fe.globalMerchantName)
+    ];
+    return i.currentVendor == null || // Note: If search text matches with any of the global merchant search results or recommended vendors, then don't show rename option
+    O.includes(l) || // Do not show rename option text if search input text is same as original vendor name
+    b === l ? null : l.trim().length > 0 ? Re.vendorDropdown.fromOldName.replace(
+      "__old_name__",
+      b ?? ""
+    ) + " " + Re.vendorDropdown.toNewName.replace(
+      "__new_name__",
+      l ?? ""
+    ) : null;
+  }, J = (l) => {
+    l.stopPropagation(), V(i.vendorId);
+  }, ln = (l) => {
+    l.stopPropagation(), F(d);
+  }, Xn = (l) => {
+    l.stopPropagation(), A(!0);
+  }, Zn = () => {
+    i.selectedVendor.id != null && i.vendorQboId != null && p(i.vendorId, i.vendorQboId);
+  }, Yn = (l) => {
+    i.selectedVendor.id != null && T(i.selectedVendor.id, l), A(!1);
+  }, et = (l, b) => {
+    S(i.vendorId), R.loadOptions(l, b);
+  }, nt = (l) => i.recommendations.find(
+    (O) => O.globalMerchantId === l || O.globalMerchantName === l
+  )?.reason ?? "", tt = () => {
+    V(i.vendorId, !0);
+  }, ot = () => {
+    V(i.vendorId, !1, !0);
+  };
+  return /* @__PURE__ */ n.jsxs(
+    Oi,
+    {
+      windowSize: f,
+      isDisabled: ve,
+      isRowActive: U,
+      children: [
+        /* @__PURE__ */ n.jsx(
+          Pe,
+          {
+            windowSize: f,
+            width: 25,
+            isDisabled: ve,
+            gap: L.logoToValueGap,
+            children: /* @__PURE__ */ n.jsx(n.Fragment, { children: ne === !0 ? /* @__PURE__ */ n.jsx(dt, { onClickAway: u, children: /* @__PURE__ */ n.jsx(Ai, { windowSize: f, children: /* @__PURE__ */ n.jsx(
+              Do,
+              {
+                name: an(d, me),
+                placeholder: W.strings.empty,
+                defaultValue: a,
+                autoFocus: !0,
+                customStyleConfig: {
+                  valueContainer: () => ({
+                    justifyContent: "flex-start",
+                    margin: `${t.sp0} ${t.sp3}`
+                  }),
+                  singleValue: () => ({
+                    display: "flex",
+                    alignItems: "center",
+                    color: ee.colors.hero,
+                    "&:hover": {
+                      color: ee.colors.primary
+                    }
+                  })
+                },
+                style: {
+                  display: "flex",
+                  flexGrow: 1,
+                  width: "-webkit-fill-available",
+                  height: "20px",
+                  cursor: "inherit",
+                  alignItems: "center"
+                },
+                valueToInfo: nt,
+                menuIsOpen: ne,
+                getRenameOptionText: y,
+                onMenuClose: u,
+                loadOptions: et,
+                isOptionRemovable: !1,
+                onClickRenameOption: Yn
+              }
+            ) }) }) : /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+              i.selectedVendor?.logo != null && i.selectedVendor.name != null ? /* @__PURE__ */ n.jsx(
+                bn,
+                {
+                  photoUrl: i.selectedVendor.logo.toString(),
+                  styles: {
+                    width: L.nameLogoWidth.valuePx(f),
+                    height: L.nameLogoHeight.valuePx(f)
+                  },
+                  fallbackAvatar: /* @__PURE__ */ n.jsx(mn, { children: /* @__PURE__ */ n.jsx(
+                    dn,
+                    {
+                      name: i.selectedVendor.name,
+                      size: t.sp6
+                    }
+                  ) })
+                }
+              ) : i.selectedVendor.name != null ? /* @__PURE__ */ n.jsx(mn, { children: /* @__PURE__ */ n.jsx(
+                dn,
+                {
+                  name: i.selectedVendor.name,
+                  size: t.sp6
+                }
+              ) }) : null,
+              /* @__PURE__ */ n.jsx(
+                Li,
+                {
+                  onClick: Zn,
+                  "data-testid": X(
+                    "vendor-first-review-row-vendor-name-text"
+                  ),
+                  children: /* @__PURE__ */ n.jsxs(_i, { children: [
+                    i.selectedVendor.name ? /* @__PURE__ */ n.jsx(
+                      We,
+                      {
+                        enterDelay: 600,
+                        display: "block",
+                        placement: "bottom",
+                        title: i.selectedVendor.name,
+                        children: /* @__PURE__ */ n.jsx(kn, { children: i.selectedVendor.name })
+                      }
+                    ) : /* @__PURE__ */ n.jsx(kn, { children: W.strings.hyphen }),
+                    /* @__PURE__ */ n.jsx(
+                      We,
+                      {
+                        display: "block",
+                        placement: "bottom",
+                        title: W.tooltips.editName,
+                        enterDelay: 600,
+                        children: /* @__PURE__ */ n.jsx(
+                          Fi,
+                          {
+                            onClick: Xn,
+                            "data-testid": X(
+                              "vendor-first-review-row-edit-icon"
+                            )
+                          }
+                        )
+                      }
+                    )
+                  ] })
+                }
+              )
+            ] }) })
+          }
+        ),
+        /* @__PURE__ */ n.jsx(
+          Pe,
+          {
+            windowSize: f,
+            width: c[1],
+            isDisabled: !1,
+            children: j.length > 0 ? /* @__PURE__ */ n.jsx(
+              ye,
+              {
+                windowSize: f,
+                className: "vendor-first-review-row-item",
+                children: /* @__PURE__ */ n.jsx(
+                  Ei,
+                  {
+                    isDisabled: Ge,
+                    onClick: () => Ge === !1 ? rn(i.vendorId) : null,
+                    "data-testid": X(
+                      "vendor-first-review-row-attachment-tag-box"
+                    ),
+                    children: /* @__PURE__ */ n.jsx(
+                      We,
+                      {
+                        display: "block",
+                        placement: "top",
+                        title: Re.viewRecipts,
+                        enterDelay: 600,
+                        children: /* @__PURE__ */ n.jsx(Wi, { children: /* @__PURE__ */ n.jsx(It, { width: t.sp3, height: t.sp3 }) })
+                      }
+                    )
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ n.jsx(
+              ye,
+              {
+                className: "vendor-first-review-row-item",
+                windowSize: f,
+                children: W.strings.hyphen
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ n.jsx(
+          Pe,
+          {
+            windowSize: f,
+            width: 25,
+            isDisabled: N,
+            gap: L.logoToValueGap,
+            children: w.map((l, b) => /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+              /* @__PURE__ */ n.jsx(
+                ye,
+                {
+                  windowSize: f,
+                  className: "vendor-first-review-row-item",
+                  children: /* @__PURE__ */ n.jsx(
+                    Sn,
+                    {
+                      isHighlighted: !0,
+                      defaultChecked: i.currentSelection === l.fieldName,
+                      label: l.label,
+                      checkBoxField: l.checkBoxField,
+                      isDisabled: l.isDisabled,
+                      tooltipProps: l.tooltipProps
+                    }
+                  )
+                }
+              ),
+              b < w.length - 1 ? /* @__PURE__ */ n.jsxs(Tn, { children: [
+                " ",
+                W.texts.or
+              ] }) : null
+            ] }))
+          }
+        ),
+        /* @__PURE__ */ n.jsx(
+          Pe,
+          {
+            windowSize: f,
+            width: 20,
+            isDisabled: N,
+            children: i.currentVendor != null && r != null ? /* @__PURE__ */ n.jsx(
+              ye,
+              {
+                windowSize: f,
+                className: "vendor-first-review-row-item",
+                children: /* @__PURE__ */ n.jsx(
+                  Sn,
+                  {
+                    defaultChecked: i.currentSelection === "retain",
+                    label: r.label,
+                    checkBoxField: r.checkBoxField,
+                    isDisabled: r.isDisabled,
+                    tooltipProps: r.tooltipProps,
+                    backgroundDefaultColor: ee.colors.grey5
+                  }
+                )
+              }
+            ) : null
+          }
+        ),
+        /* @__PURE__ */ n.jsx(
+          Pe,
+          {
+            windowSize: f,
+            "data-currentVendorName": i.currentVendor?.name,
+            "data-mergeVendorName": i.mergeVendorName,
+            "data-testid": X("vendor-first-review-row-status-tag"),
+            width: U ? 10 : 25,
+            isDisabled: ve,
+            children: /* @__PURE__ */ n.jsxs(
+              ye,
+              {
+                windowSize: f,
+                className: "vendor-first-review-row-item",
+                children: [
+                  /* @__PURE__ */ n.jsxs(Tn, { children: [
+                    /* @__PURE__ */ n.jsx(
+                      Pi,
+                      {
+                        isDisabled: !1,
+                        clickable: !1,
+                        statusMergeInQBO: we,
+                        children: /* @__PURE__ */ n.jsx(Vn, { children: i.status.name })
+                      }
+                    ),
+                    we && i.currentVendor != null && i.mergeVendorName != null ? /* @__PURE__ */ n.jsx(
+                      We,
+                      {
+                        title: /* @__PURE__ */ n.jsx(
+                          Ni,
+                          {
+                            vendorName: i.currentVendor.name,
+                            mergeVendorName: i.mergeVendorName,
+                            statusCode: i.status
+                          }
+                        ),
+                        maxWidth: "312px",
+                        children: /* @__PURE__ */ n.jsx(Mt, { width: t.sp3, height: t.sp3 })
+                      }
+                    ) : null
+                  ] }),
+                  i.lastUpdatedVendorNameByUser != null && we ? /* @__PURE__ */ n.jsx(Vn, { children: `${W.by} ${Tt(
+                    i.lastUpdatedVendorNameByUser
+                  )}` }) : null
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ n.jsxs(
+          Pe,
+          {
+            windowSize: f,
+            width: U ? 15 : 0,
+            isDisabled: ve,
+            className: "vendor-first-review-action-items",
+            children: [
+              /* @__PURE__ */ n.jsx(
+                $n,
+                {
+                  variant: "light_transparent",
+                  label: W.footer.cancel,
+                  onClick: ln,
+                  size: "small",
+                  style: { height: "100%" },
+                  disabled: !U
+                }
+              ),
+              /* @__PURE__ */ n.jsx(Cn, { space: t.sp0 }),
+              /* @__PURE__ */ n.jsx(
+                $n,
+                {
+                  variant: "primary",
+                  loading: i.saveStatus.fetchState === "In-Progress",
+                  label: W.texts.confirm,
+                  onClick: J,
+                  size: "small",
+                  style: { height: "100%" },
+                  disabled: !U
+                }
+              ),
+              /* @__PURE__ */ n.jsx(Cn, { space: t.sp0 }),
+              /* @__PURE__ */ n.jsx(zi, { children: i.currentSelection == null ? /* @__PURE__ */ n.jsx(
+                Gt,
+                {
+                  menuItems: /* @__PURE__ */ n.jsxs(Bi, { children: [
+                    /* @__PURE__ */ n.jsxs(
+                      In,
+                      {
+                        onClick: () => {
+                          pe(!1), tt();
+                        },
+                        "data-testid": X(
+                          "vendor-first-review-row-mark-as-employee-menu-item"
+                        ),
+                        children: [
+                          /* @__PURE__ */ n.jsx(Mn, {}),
+                          Re.rowMoreActions.markAsEmployee
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ n.jsxs(
+                      In,
+                      {
+                        onClick: () => {
+                          pe(!1), ot();
+                        },
+                        "data-testid": X(
+                          "vendor-first-review-row-mark-as-contractor-menu-item"
+                        ),
+                        children: [
+                          /* @__PURE__ */ n.jsx(Mn, {}),
+                          Re.rowMoreActions.markAsLocalContractor
+                        ]
+                      }
+                    )
+                  ] }),
+                  setIsMenuOpen: pe,
+                  isMenuOpen: Me
+                }
+              ) : null })
+            ]
+          }
+        ),
+        ze && j.length > 0 ? Dt(
+          /* @__PURE__ */ n.jsx(
+            Nt,
+            {
+              allFiles: Te,
+              fileSource: M,
+              file: Be,
+              title: Be.fileName,
+              attachments: j,
+              showNavigation: G.connectionName === "netsuite",
+              setFileSource: k,
+              setShowFullScreenView: te,
+              onCrossClick: nn,
+              onNextClick: tn,
+              onPreviousClick: on,
+              setSelectedFileAttachment: xe,
+              handleTouchStart: D,
+              handleTouchMove: ge,
+              handleTouchEnd: ae
+            }
+          ),
+          document.body
+        ) : null
+      ]
+    }
+  );
+}, Ti = ({
+  recommendation: e,
+  onRedirectionToRecommendedMerchantWebsiteUrl: s
+}) => /* @__PURE__ */ n.jsxs(Jn, { setMaxHeight: !0, children: [
+  /* @__PURE__ */ n.jsxs(Xe, { children: [
+    /* @__PURE__ */ n.jsx(Fe, { children: W.labels.name }),
+    /* @__PURE__ */ n.jsx(Ze, { children: e.globalMerchantName })
+  ] }),
+  /* @__PURE__ */ n.jsxs(Xe, { children: [
+    /* @__PURE__ */ n.jsx(Fe, { children: W.labels.websiteURL }),
+    /* @__PURE__ */ n.jsx(
+      Ze,
+      {
+        className: "websiteUrlTooltipText",
+        onClick: s,
+        "data-testid": X(
+          "vendor-first-review-row-website-url-tooltip-content"
+        ),
+        children: e.websiteUrl?.toString()
+      }
+    )
+  ] })
+] }), Ni = ({
+  vendorName: e,
+  mergeVendorName: s,
+  statusCode: m
+}) => /* @__PURE__ */ n.jsxs(Jn, { setMaxHeight: !1, children: [
+  m.code === "merge_in_qbo" ? /* @__PURE__ */ n.jsx(Fe, { children: Re.tooltip.mergeInQBOText }) : null,
+  m.code === "merge_in_netsuite" ? /* @__PURE__ */ n.jsx(Fe, { children: Re.tooltip.mergeInNetSuiteText }) : null,
+  /* @__PURE__ */ n.jsxs(Xe, { children: [
+    /* @__PURE__ */ n.jsx(Fe, { children: W.labels.vendor }),
+    /* @__PURE__ */ n.jsx(Ze, { children: e })
+  ] }),
+  /* @__PURE__ */ n.jsxs(Xe, { children: [
+    /* @__PURE__ */ n.jsx(Fe, { children: W.labels.mergedTo }),
+    /* @__PURE__ */ n.jsx(Ze, { children: s })
+  ] })
+] }), Oi = o.div`
+  display: flex;
+  margin-bottom: ${t.sp3};
+  background-color: ${(e) => e.theme.colors.grey5};
+  padding-left: ${(e) => L.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${(e) => L.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${(e) => L.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => L.containerPaddingBottom.valuePx(e.windowSize)};
+  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${(e) => e.theme.mode === "dark" ? `${H.dropShadowNormalDark} ${t.sp0} 2px ${t.sp1}` : `${t.sp0} 2px ${t.sp1} ${H.dropShadowNormalLight}`};
+  border-radius: ${t.sp2};
+  height: ${t.sp10};
+  &:hover {
+    border-color: ${(e) => e.theme.colors.primary};
+    .entity-icon {
+      color: ${(e) => e.theme.colors.grey5};
+    }
+    .vendor-first-review-action-items {
+      width: 15%;
+      visibility: visible;
+    }
+    > div:nth-last-of-type(2) {
+      width: 11%;
+    }
+  }
+  .vendor-first-review-action-items {
+    visibility: ${(e) => e.isRowActive === !0 ? "visible" : "hidden"};
+    padding-right: 0;
+    justify-content: flex-end;
+  }
+  margin-right: ${(e) => L.containerMarginLeft.valuePx(e.windowSize)};
+  margin-left: ${(e) => L.containerMarginLeft.valuePx(e.windowSize)};
+  box-sizing: border-box;
+  align-items: center;
+  pointer-events: ${(e) => e.isDisabled === !0 ? "none" : "auto"};
+  ${(e) => e.isRowActive ? pn`
+        border-color: ${e.theme.colors.primary};
+        .vendor-first-review-row-item {
+          color: ${e.theme.colors.primary};
+        }
+        .entity-icon {
+          color: ${e.theme.colors.grey5};
+        }
+        .edit-icon {
+          visibility: visible;
+          :hover {
+            color: ${e.theme.colors.primary};
+          }
+        }
+      ` : pn``};
+`, Pe = o.div`
+  display: flex;
+  align-items: center;
+  gap: ${(e) => e.gap?.valuePx(e.windowSize)};
+  opacity: ${(e) => e.isDisabled === !0 ? "0.32" : "1"};
+  width: ${(e) => `${e.width}%`};
+  pointer-events: ${(e) => e.isDisabled === !0 ? "none" : "auto"};
+`, ye = o(Ae)`
+  flex-direction: column;
+  word-break: break-word;
+  white-space: nowrap;
+  -webkit-line-clamp: ${(e) => L.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: ${(e) => e.windowSize === "small" ? "200px" : "initial"};
+  justify-content: ${(e) => e.isLastItem === !0 ? "flex-end" : "unset"};
+  display: flex;
+`, Pi = o.div`
+  color: ${(e) => e.statusMergeInQBO === !0 ? e.theme.colors.alert : e.isDisabled === !0 ? e.theme.colors.grey3 : e.theme.colors.grey1};
+  border: 1px solid
+    ${(e) => e.statusMergeInQBO === !0 ? e.theme.colors.alert : e.isDisabled === !0 ? e.theme.colors.grey3 : e.theme.colors.grey1};
+  padding: ${t.sp0} 6px;
+  border-radius: ${t.sp1};
+  cursor: ${(e) => e.clickable ? "pointer" : "default"};
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  margin-right: ${t.sp2};
+`, Vn = o(Hn)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, Cn = o.div`
+  display: flex;
+  align-items: center;
+  height: ${t.sp4};
+  width: ${t.sp3};
+  margin-right: ${(e) => e.space};
+`, Li = o(Ae)`
+  display: flex;
+  max-width: calc(100% - ${t.sp6});
+  flex: 1 1 auto;
+  color: ${(e) => e.theme.colors.primary};
+  text-align: center;
+  align-items: center;
+  overflow: hidden;
+  display: flex;
+`, _i = o.div`
+  display: flex;
+  color: ${(e) => e.theme.colors.hero};
+  flex-grow: 1;
+  word-break: break-word;
+  white-space: nowrap;
+  align-items: center;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  max-width: 100%;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    svg {
+      visibility: visible;
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+  > div:first-of-type {
+    max-width: 80%;
+  }
+`, Fi = o(gn)`
+  color: ${(e) => e.theme.colors.hero};
+  margin: ${t.sp0} ${t.sp2};
+  align-items: center;
+  height: ${t.sp3};
+  width: ${t.sp4};
+  visibility: hidden;
+  cursor: pointer;
+`, kn = o(Ae)`
+  padding-left: ${t.sp2};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+`, Ai = o.div`
+  display: flex;
+  width: 400px;
+`, mn = o.div`
+  display: flex;
+`, Jn = o.div`
+  width: auto;
+  box-sizing: border-box;
+  max-height: ${(e) => e.setMaxHeight ? t.sp10 : "none"};
+  &:hover {
+    .websiteUrlTooltipText {
+      cursor: pointer;
+    }
+  }
+  margin-bottom: ${t.sp2};
+  padding: ${t.sp2} ${t.sp3} ${t.sp2} ${t.sp3};
+`, Xe = o.div`
+  display: flex;
+  gap: ${t.sp3};
+  justify-content: space-between;
+`, Ze = o(ke)`
+  color: ${H.primaryDark};
+  overflow: hidden;
+  word-wrap: break-word;
+  white-space: initial;
+`, Fe = o(ke)`
+  color: ${H.heroDark};
+  white-space: initial;
+  word-wrap: break-word;
+`, zi = o.div`
+  display: flex;
+  justify-content: flex-end;
+`, Bi = o.div`
+  margin: 5px ${t.sp0};
+`, In = o(ke)`
+  height: ${t.sp6};
+  display: flex;
+  align-items: center;
+  padding: ${t.sp0} ${t.sp3};
+  color: ${(e) => e.isDelete === !0 ? H.important : e.theme.colors.hero};
+  cursor: pointer;
+  gap: ${t.sp2};
+  :hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Mn = o(Ot)`
+  width: ${t.sp4};
+  height: ${t.sp4};
+`, Tn = o.div`
+  display: flex;
+`, Hi = o.div`
+  display: flex;
+  gap: ${t.sp2};
+`, Ei = o.div`
+  cursor: ${(e) => e.isDisabled ? "default" : "pointer"};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: ${(e) => e.theme.colors.hero};
+  margin-right: ${t.sp2};
+  &:hover {
+    svg {
+      color: ${(e) => e.isDisabled ? e.theme.colors.hero : e.theme.colors.primary};
+    }
+  }
+`, Wi = o.div`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  display: flex;
+  align-items: center;
+`, Ui = pn`
+  flex-grow: 1;
+  word-break: break-word;
+  white-space: nowrap;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  max-width: 100%;
+`, Nn = o.div`
+  ${Ui};
+`, Di = (e) => /* @__PURE__ */ n.jsx(Mi, { ...e }), wn = {
+  listContainerMarginTop: new x(c[3], c[3]),
+  itemHeight: new x(
+    Co,
+    Vo
+  ),
+  vendorListWrapperContainerMarginTop: new x(c[4], 0)
+}, {
+  common: oe,
+  vendorReview: { firstReview: I }
+} = Ce.getLocalizedStrings(), wr = ({
+  vendorFirstReviewView: e,
+  globalMerchantAutoCompleteData: s,
+  analytics: m,
+  authParams: d,
+  attachmentEndpoint: i,
+  onBackClick: R,
+  onVendorNameClick: S,
+  onGlobalMerchantAutoCompleteInputChange: T,
+  onUpdateLocalData: p,
+  onFetchVendorReviewView: V,
+  onUpdateScrollYOffset: F,
+  onUpdatePageToken: le,
+  onUpdateSortUiState: ee,
+  onClickSave: f,
+  updateVendorDetailLocalData: G,
+  onReloadList: ne,
+  onClickCancelPopup: A,
+  onClickRedirectToQBO: De,
+  onClearGlobalMerchantAutoCompleteResults: Ie,
+  onResetVendorLocalData: Me,
+  onClickMenuIcon: pe
+}) => {
+  const z = se(), U = En(), ze = hn(), [te, j] = P(!1), [Te, q] = P(
+    null
+  ), {
+    uiState: M,
+    fetchState: k,
+    vendorReviewView: E,
+    recentlySavedErroredVendorView: v
+  } = e, [de, he] = P(M.searchText), Q = Je(null), h = Je(), $ = at({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: On(
+      E,
+      s.globalMerchantAutoCompleteView
+    ),
+    values: On(
+      E,
+      s.globalMerchantAutoCompleteView
+    ),
+    resetOptions: {
+      keepDirtyValues: !0
+    }
+  });
+  je(() => {
+    if (s.globalMerchantAutoCompleteView.fetchState === "Completed") {
+      const r = e.vendorReviewView.find(
+        (w) => w.vendorId === Te
+      );
+      let g;
+      r != null && (g = r?.recommendations), h.current?.(
+        vn(
+          s.globalMerchantAutoCompleteView.globalMerchants,
+          r?.status.code === "merge_in_qbo",
+          g ?? []
+        )
+      ), q(null);
+    }
+  }, [
+    s.globalMerchantAutoCompleteView.fetchState
+  ]), je(() => {
+    Q.current?.resetAfterIndex(0);
+  }, [z, Q]), je(() => {
+    k === "Completed" && j(!1);
+  }, [k]), je(() => {
+    const r = $.watch((g, { name: w, type: a }) => {
+      w != null && g[_e] != null && ct(
+        () => nn(w, g, a)
+      );
+    });
+    return () => {
+      r.unsubscribe();
+    };
+  }), je(() => {
+    k === "Completed" && m.trackVendorReviewPage("tenant_review", M.totalCount);
+  }, [k]);
+  const D = (r) => wn.itemHeight.value(z), ge = (r, g, w) => {
+    V(
+      w ?? null,
+      r,
+      g
+    );
+  }, K = (r) => {
+    le(null), ge(r, !1, null);
+  }, ae = (r, g) => {
+    h.current = g, T(r, "vendor");
+  }, Be = Je(
+    Pn((r) => K(r), 500, {
+      trailing: !0
+    })
+  ).current, xe = (r, g) => {
+    ee(g, r), le(null), ge(M.searchText, !1, null);
+  }, nn = (r, g, w) => {
+    if (r.includes(_e)) {
+      const a = parseInt(r.split(".")[1]), u = Object.assign(
+        g[_e][a]
+      );
+      let y = u[ie];
+      if (u[be] != null) {
+        let J;
+        if (r.includes(`${ie}.${Se}`) && (u[Se]?.globalMerchantId != null || u[Se]?.globalMerchantName != null) ? (y = {
+          retain: !1,
+          recommendedFirst: u[ie].recommendedFirst,
+          recommendedSecond: !1,
+          rename: !1,
+          customMerchant: !1
+        }, J = u[Se].globalMerchantId ?? u[Se].globalMerchantName) : r.includes(`${ie}.${$e}`) && (u[$e]?.globalMerchantId != null || u[$e]?.globalMerchantName != null) ? (y = {
+          retain: !1,
+          recommendedFirst: !1,
+          recommendedSecond: u[ie].recommendedSecond,
+          rename: !1,
+          customMerchant: !1
+        }, J = u[$e].globalMerchantId ?? u[$e].globalMerchantName) : r.includes(`${ie}.retain`) && u[be] != null && (y = {
+          retain: u[ie].retain,
+          recommendedFirst: !1,
+          recommendedSecond: !1,
+          rename: !1,
+          customMerchant: !1
+        }, J = u[be]), r.includes(me) && (J = u[me].selectedOption, u[me].selectedOption === u[Se]?.globalMerchantId || u[me].selectedOption === u[Se]?.globalMerchantName ? y = {
+          retain: !1,
+          recommendedFirst: !0,
+          recommendedSecond: !1,
+          rename: !1,
+          customMerchant: !0
+        } : /* When second recommendation has been selected from the dropdown, we want to `check` second recomendation's checkbox */ u[me].selectedOption === u[$e]?.globalMerchantId || u[me].selectedOption === u[$e]?.globalMerchantName ? y = {
+          retain: !1,
+          recommendedFirst: !1,
+          recommendedSecond: !0,
+          rename: !1,
+          customMerchant: !0
+        } : /* When original vedndor has been selected from the dropdown, we want to `check` retain checkbox */ u[me].selectedOption === u[be] ? y = {
+          retain: !0,
+          recommendedFirst: !1,
+          recommendedSecond: !1,
+          rename: !1,
+          customMerchant: !0
+        } : y = {
+          retain: !1,
+          recommendedFirst: !1,
+          recommendedSecond: !1,
+          rename: !1,
+          customMerchant: !0
+        }), w == null) {
+          Me(u[be]);
+          return;
+        }
+        p(
+          u[be],
+          y,
+          J ?? u[be]
+        );
+      }
+    }
+  }, tn = () => {
+    j(!0), ge(M.searchText, !0, M.pageToken);
+  }, on = (r) => r < E.length, Ge = () => {
+    M.pageToken != null && k === "Completed" && tn();
+  }, qe = (r, g) => {
+    const w = e.vendorReviewView.find(
+      (a) => a.vendorId === r
+    );
+    w != null && p(
+      w.vendorId,
+      {
+        retain: !1,
+        recommendedFirst: !1,
+        recommendedSecond: !1,
+        rename: !0,
+        customMerchant: !1
+      },
+      w.vendorId,
+      g
+    );
+  }, Qe = (r) => {
+    const g = parseInt(r.split(".")[1]), w = e.vendorReviewView[g];
+    if (w?.currentVendor != null) {
+      const a = w.recommendations[0]?.globalMerchantName ?? null;
+      m.trackVendorReviewUpdateVendorCanceled({
+        reviewSource: "tenant_review",
+        vendorName: w.currentVendor.name,
+        vendorReviewStatus: w.status.code ?? null,
+        wasRecommendationAvailable: !!a,
+        recommendedVendorName: a,
+        recommendedVendorReason: w.recommendations[0]?.reason ?? null
+      });
+    }
+    $.resetField(`${_e}.${g}`);
+  }, rn = $.handleSubmit((r) => {
+  }), Ke = (r, g, w) => {
+    const a = e.vendorReviewView.find(
+      (u) => u.vendorId === r
+    );
+    if (a?.currentVendor != null) {
+      const u = [];
+      a.recommendations.forEach((y) => {
+        y.globalMerchantId != null && u.push(y.globalMerchantId);
+      }), (a?.currentSelection === "retain" || a?.currentSelection === "rename") && a?.isWebsiteUrlSaved === !1 && G({
+        id: r,
+        name: a.currentVendor.name,
+        qboId: a.vendorQboId ?? r,
+        websiteUrl: xt(
+          a.currentVendor.websiteUrl.toString()
+        )
+      });
+    }
+    if (a?.currentSelection !== "retain" && a?.currentSelection !== "rename" || a?.isWebsiteUrlSaved === !0) {
+      if (a?.currentVendor != null) {
+        const u = a.selectedVendor.name, y = a.recommendations[0]?.globalMerchantName ?? null, J = a.currentSelection, ln = a.recommendations[0]?.globalMerchantId === a.selectedVendor.id || a.recommendations[0]?.globalMerchantName === u ? a.recommendations[0] : void 0;
+        m.trackVendorReviewSaveVendorRequested({
+          reviewSource: "tenant_review",
+          vendorName: a.currentVendor.name,
+          vendorReviewStatus: a.status.code ?? null,
+          saveRequestedVendorSource: J,
+          saveRequestedVendorName: u,
+          saveRequestedVendorReason: ln?.reason ?? null,
+          isGlobalVendorRequested: a.currentSelection === "customMerchant",
+          isVendorNameRecommendationSelected: y === u,
+          isVendorNameChangedAndSelected: a.currentSelection === "rename",
+          isVendorNameRetainSelected: J === "retain",
+          recommendedVendorName: y,
+          wasRecommendationAvailable: !!y,
+          recommendedVendorReason: a.recommendations[0]?.reason ?? null,
+          isVendorNameMarkedAsEmployee: g ?? !1,
+          isVendorNameMarkedAsLocalContractor: w ?? !1
+        });
+      }
+      f(r, g, w);
+    }
+  }, ve = {
+    onOkClick: () => {
+      if (U.connectionName === "netsuite")
+        A();
+      else if (v != null) {
+        const r = e.vendorReviewView.find(
+          (g) => g.vendorId === v.vendorId
+        );
+        if (r?.currentVendor != null) {
+          const g = r.selectedVendor.name, w = r.recommendations[0]?.globalMerchantId === r.selectedVendor.id || r.recommendations[0]?.globalMerchantName === g ? r.recommendations[0] : void 0, a = r.currentSelection ?? (v.newRecommendedVendor != null ? "recommendedFirst" : null), u = r.recommendations[0]?.globalMerchantName ?? null;
+          if (v.oldRecommendedVendor != null || v.newRecommendedVendor != null) {
+            const y = {
+              vendorName: r.currentVendor.name,
+              saveRequestedVendorName: g,
+              saveRequestedVendorReason: w?.reason ?? null,
+              isVendorNameRecommendationSelected: a === "recommendedFirst" || a === "recommendedSecond",
+              isVendorNameRetainSelected: a === "retain",
+              isVendorNameChangedAndSelected: a === "rename",
+              wasRecommendationAvailable: !!u,
+              recommendedVendorName: u,
+              recommendedVendorReason: r.recommendations[0]?.reason ?? null
+            };
+            v.newRecommendedVendor != null ? (m.trackVendorReviewRecommendationUpdateContinuedOrCanceled(
+              {
+                ...y,
+                reviewSource: "tenant_review",
+                event: Ne.vendorReviewTenantRecommendationUpdateContinue,
+                saveRequestedVendorSource: a,
+                vendorReviewStatus: r.status.code ?? null,
+                updatedRecommendedVendorName: v.newRecommendedVendor.globalMerchantName,
+                updatedRecommendedVendorReason: v.newRecommendedVendor.reason ?? null
+              }
+            ), f(v.vendorId)) : m.trackVendorReviewRecommendationUpdateContinuedOrCanceled(
+              {
+                ...y,
+                reviewSource: "tenant_review",
+                event: Ne.vendorReviewTenantRecommendationUpdateCancel,
+                saveRequestedVendorSource: a,
+                vendorReviewStatus: r.status.code ?? null,
+                updatedRecommendedVendorName: null,
+                updatedRecommendedVendorReason: null
+              }
+            ), A();
+          } else
+            m.trackVendorReviewMergeInQBORedirectedOrCanceled({
+              reviewSource: "tenant_review",
+              event: Ne.vendorReviewTenantMergeInQBORedirect,
+              vendorName: r.currentVendor.name,
+              vendorReviewStatus: r.status.code ?? null,
+              saveRequestedVendorSource: a,
+              saveRequestedVendorName: g,
+              saveRequestedVendorReason: w?.reason ?? null,
+              isVendorNameRecommendationSelected: a === "recommendedFirst" || a === "recommendedSecond",
+              isVendorNameRetainSelected: a === "retain",
+              isVendorNameChangedAndSelected: a === "rename",
+              wasRecommendationAvailable: !!u,
+              recommendedVendorName: u,
+              recommendedVendorReason: r.recommendations[0]?.reason ?? null
+            }), De(), A();
+        }
+      }
+    },
+    onCancelClick: () => {
+      if (v != null) {
+        const r = e.vendorReviewView.find(
+          (g) => g.vendorId === v.vendorId
+        );
+        if (r?.currentVendor != null) {
+          const g = r.selectedVendor.name, w = r.recommendations[0]?.globalMerchantId === r.selectedVendor.id || r.recommendations[0]?.globalMerchantName === g ? r.recommendations[0] : void 0, a = r.currentSelection, u = r.recommendations[0]?.globalMerchantName ?? null;
+          if (v.oldRecommendedVendor != null || v.newRecommendedVendor != null) {
+            const y = {
+              vendorName: r.currentVendor.name,
+              saveRequestedVendorName: g,
+              saveRequestedVendorReason: w?.reason ?? null,
+              isVendorNameRecommendationSelected: a === "recommendedFirst" || a === "recommendedSecond",
+              isVendorNameRetainSelected: a === "retain",
+              isVendorNameChangedAndSelected: a === "rename",
+              wasRecommendationAvailable: !!u,
+              recommendedVendorName: u,
+              recommendedVendorReason: r.recommendations[0]?.reason ?? null
+            };
+            v.newRecommendedVendor != null ? m.trackVendorReviewRecommendationUpdateContinuedOrCanceled(
+              {
+                ...y,
+                reviewSource: "tenant_review",
+                event: Ne.vendorReviewTenantRecommendationUpdateCancel,
+                saveRequestedVendorSource: a,
+                vendorReviewStatus: r.status.code ?? null,
+                updatedRecommendedVendorName: v.newRecommendedVendor.globalMerchantName,
+                updatedRecommendedVendorReason: v.newRecommendedVendor.reason ?? null
+              }
+            ) : m.trackVendorReviewRecommendationUpdateContinuedOrCanceled(
+              {
+                ...y,
+                reviewSource: "tenant_review",
+                event: Ne.vendorReviewTenantRecommendationUpdateCancel,
+                saveRequestedVendorSource: a,
+                vendorReviewStatus: r.status.code ?? null,
+                updatedRecommendedVendorName: null,
+                updatedRecommendedVendorReason: null
+              }
+            );
+          } else
+            m.trackVendorReviewMergeInQBORedirectedOrCanceled({
+              reviewSource: "tenant_review",
+              event: Ne.vendorReviewTenantMergeInQBOCancel,
+              vendorName: r.currentVendor.name,
+              vendorReviewStatus: r.status.code ?? null,
+              saveRequestedVendorSource: a,
+              saveRequestedVendorName: g,
+              saveRequestedVendorReason: w?.reason ?? null,
+              isVendorNameRecommendationSelected: a === "recommendedFirst" || a === "recommendedSecond",
+              isVendorNameRetainSelected: a === "retain",
+              isVendorNameChangedAndSelected: a === "rename",
+              wasRecommendationAvailable: !!u,
+              recommendedVendorName: u,
+              recommendedVendorReason: r.recommendations[0]?.reason ?? null
+            });
+        }
+        A();
+      }
+    }
+  }, N = (() => {
+    if (v != null)
+      if (v.newRecommendedVendor != null && v.oldRecommendedVendor != null) {
+        const r = I.popupMessages.zeniUpdatedRecommendationPopupTitle.replace("_vendor_name_", v.vendorName).replace(
+          "_old_recommendation_",
+          v.oldRecommendedVendor.globalMerchantName
+        ).replace(
+          "_new_recommendation_",
+          v.newRecommendedVendor.globalMerchantName
+        );
+        return {
+          description: I.popupMessages.zeniUpdatedRecommendationPopupMsg,
+          title: r,
+          secondaryButtonText: oe.cancel,
+          primaryButtonText: oe.continue
+        };
+      } else if (v.newRecommendedVendor != null) {
+        const r = I.popupMessages.zeniNewRecommendationPopupTitle.replace("_vendor_name_", v.vendorName).replace(
+          "_new_recommendation_",
+          v.newRecommendedVendor.globalMerchantName
+        );
+        return {
+          description: I.popupMessages.zeniNewRecommendationPopupMsg,
+          title: r,
+          secondaryButtonText: oe.cancel,
+          primaryButtonText: oe.continue
+        };
+      } else if (v.oldRecommendedVendor != null) {
+        const r = I.popupMessages.zeniNewRecommendationNotAvailablePopupTitle.replace(
+          "_vendor_name_",
+          v.vendorName
+        );
+        return {
+          description: I.popupMessages.zeniNewRecommendationNotAvailablePopupMsg,
+          title: r,
+          primaryButtonText: oe.gotIt
+        };
+      } else
+        return U.connectionName === "netsuite" ? {
+          descriptionHeader: I.popupMessages.netsuiteLinkPopupMsgHeader,
+          title: I.popupMessages.netsuiteLinkPopupTitle.replace(
+            "_vendor_name_",
+            v.vendorName
+          ),
+          subTitle: I.popupMessages.netsuiteLinkPopupSubTitle,
+          description: I.popupMessages.netsuiteLinkPopupDescription,
+          primaryButtonText: oe.texts.close
+        } : {
+          descriptionHeader: I.popupMessages.qboLinkPopupMsgHeader,
+          title: I.popupMessages.qboLinkPopupTitle.replace(
+            "_vendor_name_",
+            v.vendorName
+          ),
+          subTitle: I.popupMessages.qboLinkPopupSubTitle,
+          secondaryButtonText: oe.cancel,
+          primaryButtonText: I.popupMessages.redirectToQBO
+        };
+  })(), sn = /* @__PURE__ */ n.jsx(
+    Pt,
+    {
+      isSearchOpen: M.searchText.length > 0,
+      searchPlaceHolder: I.searchPlaceholder,
+      searchText: de,
+      onSearchTextChanged: (r) => {
+        he(r), r.trim().length >= 2 ? Be(r) : r.trim().length == 0 && Be("");
+      }
+    }
+  );
+  return /* @__PURE__ */ n.jsx(qi, { windowSize: z, children: /* @__PURE__ */ n.jsxs(mt, { ...$, children: [
+    /* @__PURE__ */ n.jsx(
+      Lt,
+      {
+        title: I.title,
+        backgroundColor: ze.colors.grey4,
+        onBackClick: R,
+        rightSideComponent: sn,
+        showMenuIcon: z === "medium-compact" || z === "small",
+        onClickMenuIcon: pe,
+        source: "VendorFirstReviewPage"
+      }
+    ),
+    /* @__PURE__ */ n.jsx("form", { onSubmit: rn, children: /* @__PURE__ */ n.jsxs(Qi, { windowSize: z, children: [
+      /* @__PURE__ */ n.jsx(
+        _t,
+        {
+          controller: !!v?.vendorId && !!N,
+          children: /* @__PURE__ */ n.jsx(
+            Ft,
+            {
+              titleComponent: /* @__PURE__ */ n.jsx(zt, { children: /* @__PURE__ */ n.jsxs(rr, { children: [
+                /* @__PURE__ */ n.jsx(Bt, { children: N?.title }),
+                N?.subTitle != null ? /* @__PURE__ */ n.jsx(sr, { children: N.subTitle }) : null
+              ] }) }),
+              descriptionComponent: /* @__PURE__ */ n.jsxs(
+                At,
+                {
+                  style: {
+                    textAlign: N?.description == null ? "left" : "unset"
+                  },
+                  children: [
+                    N?.descriptionHeader != null ? /* @__PURE__ */ n.jsx(lr, { children: N.descriptionHeader }) : null,
+                    N?.description != null ? /* @__PURE__ */ n.jsx(dr, { children: N.description }) : U.connectionName === "netsuite" ? /* @__PURE__ */ n.jsx(ao, {}) : /* @__PURE__ */ n.jsx(Yt, {})
+                  ]
+                }
+              ),
+              primaryButtonText: N?.primaryButtonText ?? oe.continue,
+              secondaryButtonText: N?.secondaryButtonText,
+              containerStyle: { maxWidth: "624px" },
+              action: ve,
+              primaryButtonWidth: 148,
+              secondaryButtonWidth: 148
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ n.jsx(Ki, { windowSize: z, children: k === "Error" ? /* @__PURE__ */ n.jsxs(Xi, { children: [
+        /* @__PURE__ */ n.jsx(
+          Zi,
+          {
+            onClick: ne,
+            "data-testid": X(
+              "vendor-first-review-page-reload-icon"
+            ),
+            children: /* @__PURE__ */ n.jsx(Ht, {})
+          }
+        ),
+        /* @__PURE__ */ n.jsx(er, { children: oe.reloadPage.label })
+      ] }) : k === "Completed" && E.length === 0 ? /* @__PURE__ */ n.jsx(
+        Et,
+        {
+          message: M.searchText ? I.noMatchedDataText : I.noDataText
+        }
+      ) : k === "Not-Started" || k === "In-Progress" && E.length === 0 ? /* @__PURE__ */ n.jsx(
+        Ho,
+        {
+          sortConfig: {
+            sortKey: M.sortKey,
+            sortOrder: M.sortOrder
+          },
+          onColumnSortConfigChanged: xe,
+          disableClick: !0
+        }
+      ) : /* @__PURE__ */ n.jsx(Ji, { windowSize: z, children: /* @__PURE__ */ n.jsx(ut, { children: ({ height: r, width: g }) => /* @__PURE__ */ n.jsx(
+        pt,
+        {
+          isItemLoaded: on,
+          itemCount: E.length + 1,
+          loadMoreItems: Ge,
+          children: ({ onItemsRendered: w }) => /* @__PURE__ */ n.jsxs(ir, { style: { height: r, width: g }, children: [
+            /* @__PURE__ */ n.jsx(
+              or,
+              {
+                style: {
+                  width: "auto"
+                },
+                children: /* @__PURE__ */ n.jsx(
+                  Kn,
+                  {
+                    sortConfig: {
+                      sortKey: M.sortKey,
+                      sortOrder: M.sortOrder
+                    },
+                    disableClick: k !== "Completed",
+                    onColumnSortConfigChanged: xe
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ n.jsx(
+              ht,
+              {
+                height: r - Dn,
+                itemSize: D,
+                width: g,
+                ref: Q,
+                overscanCount: 1,
+                itemCount: E.length,
+                onItemsRendered: w,
+                onScroll: ({ scrollOffset: a }) => {
+                  F(a);
+                },
+                initialScrollOffset: M.scrollYOffset,
+                itemData: {
+                  vendorFirstReviewView: e,
+                  analytics: m,
+                  authParams: d,
+                  attachmentEndpoint: i,
+                  globalMerchantAutoCompleteView: s.globalMerchantAutoCompleteView,
+                  searchAutoComplete: {
+                    autoCompleteData: s,
+                    loadOptions: ae
+                  },
+                  setCurrentVendorInAction: q,
+                  onClickVendorName: S,
+                  onClickVendorRename: qe,
+                  onClickCancel: Qe,
+                  onClickSave: Ke,
+                  onClearGlobalMerchantAutoCompleteResults: Ie
+                },
+                children: Gi
+              }
+            )
+          ] })
+        }
+      ) }) }) }),
+      te === !0 ? /* @__PURE__ */ n.jsx(tr, { children: /* @__PURE__ */ n.jsx(Wt, { size: "Small", start: !0 }) }) : null
+    ] }) })
+  ] }) });
+}, Gi = ({ index: e, style: s, data: m }) => {
+  const {
+    analytics: d,
+    authParams: i,
+    attachmentEndpoint: R,
+    vendorFirstReviewView: S,
+    searchAutoComplete: T,
+    setCurrentVendorInAction: p,
+    onClickVendorName: V,
+    onClickVendorRename: F,
+    onClickCancel: le,
+    onClickSave: ee,
+    onClearGlobalMerchantAutoCompleteResults: f
+  } = m, { vendorReviewView: G, fetchState: ne } = S, A = G[e];
+  return e < G.length && A.selectedVendor != null ? /* @__PURE__ */ n.jsx(
+    nr,
+    {
+      style: {
+        ...s,
+        width: "100%"
+      },
+      className: "vendor-list-item",
+      children: /* @__PURE__ */ n.jsx(Yi, { children: /* @__PURE__ */ n.jsx(
+        Di,
+        {
+          fetchState: ne,
+          analytics: d,
+          authParams: i,
+          attachmentEndpoint: R,
+          sectionId: `${_e}.${e}`,
+          vendorId: A.currentVendor?.id,
+          rowData: A,
+          setCurrentVendorInAction: p,
+          searchAutoComplete: T,
+          onVendorNameClick: V,
+          onClickCancel: le,
+          onClickSave: ee,
+          onClickRenameOption: F,
+          onClearGlobalMerchantAutoCompleteResults: f
+        },
+        e
+      ) }, `sub-container-${e}`)
+    }
+  ) : null;
+}, On = (e, s) => {
+  const m = e.map((d) => {
+    const i = d.currentSelection === "customMerchant" && d.selectedVendor?.id != null && d.selectedVendor.name != null ? {
+      id: d.selectedVendor.id,
+      name: d.selectedVendor.name
+    } : void 0, R = d.recommendations;
+    return {
+      selectedVendor: {
+        defaultOptions: vn(
+          s.globalMerchants,
+          d.status.code === "merge_in_qbo",
+          R,
+          d.currentVendor,
+          i
+        ),
+        selectedOption: d.selectedVendor.id ?? d.vendorRenamedText
+      },
+      recommendedFirst: d.recommendations[0],
+      recommendedSecond: d.recommendations[1],
+      currentSelection: {
+        retain: d.currentSelection === "retain",
+        recommendedFirst: d.currentSelection === "recommendedFirst",
+        recommendedSecond: d.currentSelection === "recommendedSecond",
+        rename: d.currentSelection === "rename",
+        customMerchant: d.currentSelection === "customMerchant"
+      },
+      retainVendorId: d.currentVendor?.id,
+      status: d.status,
+      lastUpdatedVendorNameByUser: d.lastUpdatedVendorNameByUser
+    };
+  });
+  return {
+    [_e]: m
+  };
+}, qi = o.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+`, Qi = o.div`
+  display: block;
+  background-color: ${(e) => e.theme.colors.grey4};
+  height: calc(100vh - 120px);
+  width: 100%;
+  margin-top: ${(e) => wn.vendorListWrapperContainerMarginTop.valuePx(e.windowSize)};
+`, Ki = o.div`
+  margin-top: ${(e) => wn.listContainerMarginTop.valuePx(e.windowSize)};
+  height: 100%;
+`, Ji = o.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  max-width: 99.9%;
+`, Xi = o.div`
+  display: flex;
+  width: 100%;
+  height: calc(100% - 60px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`, Zi = o.div`
+  height: 96px;
+  width: 96px;
+  background: ${(e) => e.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+  & svg {
+    margin: ${t.sp5};
+    color: ${(e) => e.theme.colors.grey1};
+  }
+  &:hover {
+    & svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, Yi = o.div`
+  display: flex;
+  flex-direction: column;
+`, er = o(Ut)`
+  margin-top: ${t.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, nr = o.div`
+  top: ${t.sp0};
+  left: ${t.sp0};
+  padding-bottom: ${t.sp3};
+  box-sizing: border-box;
+`, tr = o.div`
+  display: flex;
+  width: 100%;
+  height: ${t.sp3};
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: ${t.sp3};
+  margin-bottom: ${t.sp3};
+`, or = o.div``, ir = o.div`
+  position: relative;
+`, rr = o.div`
+  display: flex;
+  flex-direction: column;
+`, sr = o(Ae)`
+  color: ${(e) => e.theme.colors.hero};
+  margin: ${t.sp2} ${t.sp8} 0 ${t.sp8};
+`, lr = o(Fn)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${t.sp2};
+`, dr = o.div``;
+export {
+  wr as default
+};