@zeniai/web-components 3.16.31 → 3.16.32

package/dist/VendorFiling1099EditablePage-BduWVF51.js

@@ -0,0 +1,842 @@
+import { j as t, u as Re, g as We, h as ze, F as ke, m as Me } from "./vendor-.pnpm-DxbX2tX4.js";
+import { useState as Oe, useRef as M, useEffect as B } from "react";
+import i from "@emotion/styled";
+import { u as ae, a as de, R as p, iS as He, iT as qe, iU as U, iV as ce, aQ as C, he as Ee, hf as G, D as l, S as o, aJ as V, C as P, aE as Ue, j as _e, fm as De, iE as Ge, ib as Je, fn as Ke, iF as Qe, iG as Ze, aB as Xe, ap as Ye, dS as et, b as tt, fg as ot, iW as st, ai as lt, _ as nt, p as ue, az as rt } from "./index-Cynhe4j_.js";
+import { L as it } from "./LabeledDropDownFormattedTextField-r2aCE7Vv.js";
+const oe = {
+  paddingTopBottom: new p(l[3], l[3]),
+  paddingLeftRight: new p(l[3], l[8]),
+  paddingLeftRightSubPage: new p(l[3], l[8]),
+  marginLeftSubtitle: new p(l[4], l[8]),
+  marginTopSubtitle: new p(l[4], l[3]),
+  largeLabelWidth: new p(160, 210, 230),
+  paddingBottom: new p(l[3], l[2]),
+  customTitleFont: new p(l[4], l[5]),
+  customTitleMarginBottom: new p(l[0], l[3]),
+  customTitleMarginLeft: new p(l[3], l[8])
+}, v = (e, n) => `${e}.${n}`;
+function at(e) {
+  const { loadingState: n } = e;
+  return /* @__PURE__ */ t.jsx(
+    dt,
+    {
+      ...e,
+      isDisabled: e.isDisabled || n === "In-Progress" ? "disabled" : void 0
+    }
+  );
+}
+function dt({
+  googleAPIKey: e,
+  addressToEdit: n,
+  sectionId: a,
+  isDisabled: m,
+  style: H
+}) {
+  const k = ae(), u = de.getLocalizedStrings().companyPassport, g = oe.largeLabelWidth.value(k);
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(se, { type: "hidden", value: "noAutoFill" }),
+    /* @__PURE__ */ t.jsx(ct, { style: H, children: /* @__PURE__ */ t.jsxs(ut, { children: [
+      /* @__PURE__ */ t.jsx(
+        He,
+        {
+          isDisabled: m,
+          label: {
+            label: u.address.street,
+            width: g,
+            showBullet: !0
+          },
+          addressField: {
+            name: v(a, "street"),
+            defaultValue: {
+              addressString: n?.street[0] ?? "",
+              addressValue: n != null ? ce(n) : void 0
+            },
+            placeholder: U(u.address.street),
+            registerOptions: {
+              required: !0,
+              validate: ($) => $ != null ? !!$.addressString : !1
+            },
+            autoComplete: "new-password",
+            googleAPIKey: e,
+            addressFormatter: qe
+          },
+          style: {
+            border: "none",
+            width: "100%",
+            outline: "none"
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        C,
+        {
+          isDisabled: m,
+          label: {
+            label: u.address.suite,
+            width: g,
+            showBullet: !0
+          },
+          style: {
+            wordBreak: "break-word",
+            width: "100%",
+            outline: "none"
+          },
+          text: {
+            type: "text",
+            name: v(a, "suite"),
+            defaultValue: n?.street[1],
+            placeholder: u.address.suitePlaceholder,
+            autoComplete: "new-password"
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        C,
+        {
+          isDisabled: m,
+          label: {
+            label: u.address.city,
+            width: g,
+            showBullet: !0
+          },
+          style: {
+            width: "100%",
+            outline: "none"
+          },
+          text: {
+            type: "text",
+            name: v(a, "city"),
+            defaultValue: n?.city,
+            placeholder: U(u.address.city),
+            autoComplete: "new-password",
+            options: {
+              required: !0
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        C,
+        {
+          isDisabled: m,
+          label: {
+            label: u.address.state,
+            width: g,
+            showBullet: !0
+          },
+          style: {
+            width: "100%",
+            outline: "none"
+          },
+          text: {
+            type: "text",
+            name: v(a, "state"),
+            defaultValue: n?.state,
+            placeholder: U(u.address.state),
+            autoComplete: "new-password",
+            options: {
+              required: !0
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(se, { readOnly: !0, value: "noAutoFill" }),
+      /* @__PURE__ */ t.jsx(
+        Ee,
+        {
+          isDisabled: m,
+          label: {
+            label: u.address.country,
+            width: g,
+            showBullet: !0
+          },
+          style: {
+            width: "100%",
+            outline: "none"
+          },
+          countrySelectField: {
+            name: v(a, "country"),
+            placeholder: u.address.countryPlaceholder,
+            defaultValue: G(n?.country),
+            registerOptions: {
+              validate: ($) => !!($ != null && $.selectedOption)
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        C,
+        {
+          isDisabled: m,
+          label: {
+            label: u.address.zipCode,
+            width: g,
+            showBullet: !0
+          },
+          style: {
+            width: "100%",
+            outline: "none"
+          },
+          text: {
+            type: "text",
+            name: v(a, "postalCode"),
+            defaultValue: n?.postalCode,
+            placeholder: u.address.zipCodePlaceHolder,
+            autoComplete: "new-password",
+            options: {
+              required: !0
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        C,
+        {
+          isDisabled: m,
+          label: {
+            label: u.address.secondaryInfo,
+            width: g,
+            showBullet: !0
+          },
+          style: {
+            paddingBottom: oe.paddingBottom.valuePx(k),
+            width: "100%",
+            outline: "none"
+          },
+          text: {
+            type: "text",
+            name: v(a, "secondaryInfo"),
+            defaultValue: n?.street[2],
+            placeholder: u.address.secondaryInfoPlaceholder,
+            autoComplete: "new-password"
+          }
+        }
+      )
+    ] }) })
+  ] });
+}
+const ct = i.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: ${o.sp3};
+`, ut = i.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border-radius: ${o.sp2};
+  padding-right: ${o.sp2};
+`, se = i.input`
+  display: none;
+`, pt = i.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${o.sp7};
+  margin-bottom: ${o.sp4};
+`, gt = i.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${o.sp3};
+`, ht = i.div`
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  filter: drop-shadow(
+    ${o.sp0} 2px ${o.sp1} ${P.boxShadowElevation}
+  );
+  border-radius: ${o.sp2};
+  background: ${(e) => e.theme.colors.grey5};
+`, mt = i.div`
+  margin-left: ${o.sp3};
+`, _ = i.div`
+  padding: ${o.sp3};
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid ${(e) => e.theme.colors.grey3};
+`, xt = () => /* @__PURE__ */ t.jsx(pt, { children: [...Array(1)].map((e, n) => /* @__PURE__ */ t.jsxs(gt, { children: [
+  /* @__PURE__ */ t.jsx(
+    V,
+    {
+      style: { marginBottom: o.sp4 },
+      width: 120,
+      height: l[4]
+    }
+  ),
+  /* @__PURE__ */ t.jsxs(ht, { children: [
+    [...Array(5)].map((a, m) => /* @__PURE__ */ t.jsxs(_, { children: [
+      /* @__PURE__ */ t.jsx(V, { width: 70, height: l[4] }),
+      /* @__PURE__ */ t.jsx(V, { width: 140, height: l[4] })
+    ] }, m)),
+    /* @__PURE__ */ t.jsx(_, { children: /* @__PURE__ */ t.jsx(V, { width: 120, height: l[4] }) }),
+    /* @__PURE__ */ t.jsx(mt, { children: [...Array(7)].map((a, m) => /* @__PURE__ */ t.jsxs(_, { children: [
+      /* @__PURE__ */ t.jsx(V, { width: 70, height: l[4] }),
+      /* @__PURE__ */ t.jsx(V, { width: 140, height: l[4] })
+    ] }, m)) })
+  ] })
+] }, n)) }), w = {
+  largeLabelWidth: new p(130, 200, 300),
+  labelMarginLeft: new p(l[3], l[4]),
+  labelMarginTop: new p(l[2], l[3]),
+  labelMarginBottom: new p(l[2], l[3]),
+  containerPaddingLeft: new p(l[3], l[6], l[8]),
+  containerPaddingRight: new p(l[3], l[6], l[8]),
+  marginRight: new p(l[2], l[3])
+}, yt = {
+  zIndex: 2,
+  minHeight: 62
+}, s = "vendor1099FilingSectionId", pe = "legalName", ge = "email", he = "phone", me = "taxClassification", xe = "tinType", ye = "tinValue", ft = "street", bt = "suite", wt = "city", $t = "state", vt = "country", St = "countryCode", Ct = "postalCode", jt = "secondaryInfo", D = (e) => `${e}_form`, T = (e, n) => `${e}.${n}`, { spendManagement: Ft, common: r } = de.getLocalizedStrings(), S = Ft.billPay.vendorCreation, R = r.labels, le = r.footer, Qt = (e) => {
+  const n = ae(), a = new AbortController(), m = Re(), H = a.signal, {
+    onVendorFiling1099UploadDetailsSave: k,
+    vendorId: u,
+    vendorFiling1099UploadDetailsViewState: g,
+    onSaveChangesToLocalStore: $,
+    vendorFiling1099UploadDetails: j,
+    fetchVendorFetchStatus: J,
+    onAddressEditHandler: fe,
+    goBackToListPage: K,
+    onResetVendorFiling1099FormStatus: be,
+    googleAPIKey: we
+  } = e, {
+    vendor1099DetailsSaveStatus: I,
+    vendor1099DetailsLocalData: c,
+    w9FormUploadStatus: Q
+  } = g, [Z, X] = Oe(
+    j.addressStatus?.addressToCreate ?? {
+      street: [],
+      city: "",
+      state: "",
+      country: "",
+      countryCode: "",
+      postalCode: ""
+    }
+  ), Y = M(null), { vendorTypeList: q } = j, N = M(null), A = M(null), ee = M(!1);
+  B(() => {
+    A.current === null && c.legalName != r.strings.empty && g.vendor1099DetailsAutoFilledValues?.legalName === !0 && (A.current = c.legalName);
+  }, [c.legalName]), B(() => {
+    N.current === null && c.legalName !== r.strings.empty && (N.current = c.legalName);
+  }, [c.legalName]), B(() => {
+    j?.addressStatus?.addressToCreate && g.vendor1099DetailsAutoFilledValues?.address === !0 && ee.current === !1 && (X(
+      j.addressStatus.addressToCreate
+    ), ee.current = !0);
+  }, [
+    j,
+    g.vendor1099DetailsAutoFilledValues?.address
+  ]);
+  const x = We({
+    mode: "onSubmit",
+    defaultValues: ie(
+      c,
+      q ?? [],
+      Z
+    ),
+    values: ie(
+      c,
+      q ?? [],
+      Z
+    )
+  }), { isValid: $e } = x.formState, ve = x.handleSubmit(() => {
+    $e && (fe(x.getValues()), k(u, H));
+  }), { vendor1099DetailsAutoFilledValues: f } = g, Se = () => f?.tin.type === !0 || f?.tin.value === !0 || f?.legalName === !0 || f?.taxClassification === !0, Ce = async (y, d) => {
+    if (y != null) {
+      const h = { ...d }, Ve = h[s].legalName, Te = h[s].email, Pe = h[s].phone, Ie = h[s].taxClassification, Ne = h[s].tinType, te = h[s].tinValue, Ae = {
+        legalName: Ve ?? r.strings.empty,
+        vendorId: u,
+        contact: {
+          email: Te ?? r.strings.empty,
+          phone: Pe ?? r.strings.empty,
+          fullName: c.contact?.fullName ?? r.strings.empty,
+          id: c.contact?.id ?? r.strings.empty
+        },
+        taxClassification: Ie.selectedType ?? r.strings.empty,
+        tin: {
+          type: Ne ?? null,
+          value: te ?? null
+        },
+        tinValue: te ?? null
+      };
+      if (y.includes(`${s}.street`) && d.vendor1099FilingSectionId.street != null) {
+        const { addressValue: L } = d.vendor1099FilingSectionId.street, Be = x.getValues(
+          `${s}.country`
+        ), E = G(L?.country);
+        x.setValue(s, {
+          ...d[s],
+          street: d.vendor1099FilingSectionId.street,
+          city: L?.locality ?? "",
+          state: L?.administrativeAreaLevel1 ?? "",
+          country: E,
+          countryCode: L?.countryCode ?? "",
+          postalCode: L?.postalCode ?? "",
+          secondaryInfo: d.vendor1099FilingSectionId.secondaryInfo ?? "",
+          suite: d.vendor1099FilingSectionId.suite ?? ""
+        }), Me(
+          x.formState.errors,
+          `${s}.city`
+        ) && L?.locality && x.trigger(`${s}.city`), Be.selectedOption !== E.selectedOption && x.setValue(
+          `${s}.country`,
+          E
+        );
+      } else y === "vendor1099FilingSectionId.country" && d[s].country.selectedOption != null && x.setValue(
+        `${s}.countryCode`,
+        et(d[s].country.selectedOption)
+      );
+      $(Ae);
+    }
+  };
+  B(() => {
+    const y = x.watch((d, { name: h }) => {
+      h != null && d != null && ((h.startsWith(`${s}.street`) || h.startsWith(`${s}.city`) || h.startsWith(`${s}.state`) || h.startsWith(`${s}.country`) || h.startsWith(`${s}.postalCode`)) && d[s] != null && X({
+        street: [
+          d[s].street?.addressString ?? r.strings.empty,
+          d[s].suite ?? r.strings.empty,
+          d[s].secondaryInfo ?? r.strings.empty
+        ],
+        city: d[s].city ?? r.strings.empty,
+        state: d[s].state ?? r.strings.empty,
+        country: d[s].country?.selectedOption ?? r.strings.empty,
+        countryCode: d[s].countryCode,
+        postalCode: d[s].postalCode ?? r.strings.empty
+      }), ze(
+        () => Ce(
+          h,
+          d
+        )
+      ));
+    });
+    return () => {
+      y.unsubscribe();
+    };
+  });
+  const F = w.largeLabelWidth.value(n), je = I.error?.message ?? r.strings.empty, Fe = I.error?.title ?? r.strings.empty, Le = () => I?.fetchState === "In-Progress" || J?.fetchState === "In-Progress" || Q?.fetchState === "In-Progress", b = J?.fetchState === "In-Progress" || Q?.fetchState === "In-Progress";
+  return B(() => () => {
+    a.abort(), be();
+  }, []), /* @__PURE__ */ t.jsx(Vt, { windowSize: n, children: /* @__PURE__ */ t.jsxs(Lt, { windowSize: n, children: [
+    /* @__PURE__ */ t.jsxs(Tt, { windowSize: n, ref: Y, children: [
+      /* @__PURE__ */ t.jsx(
+        Ue,
+        {
+          title: (g.vendor1099DetailsAutoFilledValues?.legalName === !0 ? A.current : N.current) ?? r.strings.empty,
+          backgroundColor: m.colors.grey4,
+          leftSideComponent: /* @__PURE__ */ t.jsx(t.Fragment, {}),
+          rightSideComponent: /* @__PURE__ */ t.jsx(
+            It,
+            {
+              windowSize: n,
+              onClick: K,
+              "data-testid": _e(
+                "vendor-filling-1099-details-editable-page-close-icon"
+              )
+            }
+          ),
+          scrollableContent: Y,
+          enableTitleOnScroll: !0,
+          scrollThreshold: 50,
+          source: "VendorFiling1099EditablePage"
+        }
+      ),
+      b === !0 ? /* @__PURE__ */ t.jsx(ne, { windowSize: n, isLoading: b, children: /* @__PURE__ */ t.jsx(xt, {}) }) : /* @__PURE__ */ t.jsxs(ne, { windowSize: n, isLoading: b, children: [
+        n === "small" ? /* @__PURE__ */ t.jsx(Nt, { windowSize: n, children: g.vendor1099DetailsAutoFilledValues?.legalName === !0 ? A.current : N.current }) : /* @__PURE__ */ t.jsx(At, { children: g.vendor1099DetailsAutoFilledValues?.legalName === !0 ? A.current : N.current }),
+        I.fetchState === "Error" ? /* @__PURE__ */ t.jsxs(Bt, { children: [
+          /* @__PURE__ */ t.jsx(kt, {}),
+          /* @__PURE__ */ t.jsxs(Rt, { children: [
+            /* @__PURE__ */ t.jsx(Wt, { children: Fe }),
+            /* @__PURE__ */ t.jsx(zt, { children: je })
+          ] })
+        ] }) : null,
+        Se() && /* @__PURE__ */ t.jsxs(Ht, { children: [
+          /* @__PURE__ */ t.jsx(z, {}),
+          /* @__PURE__ */ t.jsx(qt, { children: S.vendorDetails.banner })
+        ] }),
+        /* @__PURE__ */ t.jsx(ke, { ...x, children: /* @__PURE__ */ t.jsx(
+          "form",
+          {
+            id: D(s),
+            onSubmit: ve,
+            children: /* @__PURE__ */ t.jsxs(Pt, { isLoading: b, children: [
+              /* @__PURE__ */ t.jsx(O, { children: f?.legalName === !0 && !b ? /* @__PURE__ */ t.jsx(z, {}) : null }),
+              /* @__PURE__ */ t.jsx(
+                C,
+                {
+                  label: {
+                    label: R.legalName,
+                    width: F,
+                    style: {
+                      marginLeft: o.sp4
+                    }
+                  },
+                  style: {
+                    width: "auto",
+                    borderTopLeftRadius: o.sp2,
+                    borderTopRightRadius: o.sp2
+                  },
+                  text: {
+                    type: "text",
+                    name: T(s, pe),
+                    defaultValue: c.legalName,
+                    placeholder: S.vendorDetails.legalNamePlaceHolder,
+                    options: {
+                      required: !0,
+                      validate: (y) => y !== r.strings.empty
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ t.jsx(W, {}),
+              /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+                /* @__PURE__ */ t.jsx(
+                  C,
+                  {
+                    label: {
+                      label: R.email,
+                      width: F,
+                      style: {
+                        marginLeft: o.sp4
+                      }
+                    },
+                    style: { width: "auto" },
+                    text: {
+                      type: "email",
+                      name: T(s, ge),
+                      defaultValue: c.contact?.email,
+                      placeholder: S.vendorDetails.emailPlaceHolder,
+                      options: {
+                        required: !1
+                      }
+                    }
+                  }
+                ),
+                /* @__PURE__ */ t.jsx(W, {}),
+                /* @__PURE__ */ t.jsx(
+                  De,
+                  {
+                    label: {
+                      label: R.phone,
+                      width: F,
+                      style: {
+                        marginLeft: o.sp4
+                      }
+                    },
+                    text: {
+                      name: T(s, he),
+                      placeholder: S.vendorDetails.phonePlaceHolder,
+                      defaultValue: c.contact?.phone,
+                      autoComplete: "off",
+                      options: {
+                        required: !1
+                      }
+                    },
+                    style: { width: "auto" }
+                  }
+                ),
+                /* @__PURE__ */ t.jsx(W, {})
+              ] }),
+              /* @__PURE__ */ t.jsxs(Et, { isLoading: b, children: [
+                /* @__PURE__ */ t.jsx(O, { children: f?.taxClassification === !0 && !b ? /* @__PURE__ */ t.jsx(z, {}) : null }),
+                /* @__PURE__ */ t.jsxs(re, { children: [
+                  /* @__PURE__ */ t.jsx(
+                    Mt,
+                    {
+                      width: F,
+                      windowSize: n,
+                      children: R.taxClassification
+                    }
+                  ),
+                  /* @__PURE__ */ t.jsx(
+                    Ot,
+                    {
+                      size: n,
+                      labelWidth: F,
+                      children: /* @__PURE__ */ t.jsx(
+                        Ge,
+                        {
+                          name: T(
+                            s,
+                            me
+                          ),
+                          value: {
+                            allTypes: q?.map((y) => ({
+                              code: y.code,
+                              name: y.name,
+                              label: y.name
+                            })) ?? [],
+                            selectedType: c.taxClassification
+                          },
+                          placeholderLabel: S.vendorDetails.taxClassificationPlaceHolder
+                        }
+                      )
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ t.jsx(W, {}),
+              /* @__PURE__ */ t.jsx(O, { children: (f?.tin.type === !0 || f?.tin.value === !0) && !b ? /* @__PURE__ */ t.jsx(z, {}) : null }),
+              /* @__PURE__ */ t.jsx(re, { children: /* @__PURE__ */ t.jsx(
+                it,
+                {
+                  name: T(s, xe),
+                  menuPlacement: "auto",
+                  style: {
+                    height: o.sp6,
+                    width: "100%",
+                    marginLeft: o.sp4
+                  },
+                  dropdownStyle: { width: "40%" },
+                  defaultValue: {
+                    dropDownValue: c.tin?.type ?? r.strings.empty,
+                    dropDownList: [
+                      {
+                        code: r.texts.ein,
+                        label: r.texts.ein.toUpperCase()
+                      },
+                      {
+                        code: r.texts.ssn,
+                        label: r.texts.ssn.toUpperCase()
+                      }
+                    ]
+                  },
+                  registerOptions: {
+                    required: !1
+                  },
+                  label: {
+                    width: F
+                  },
+                  placeholderLabel: S.placeholders.tinType,
+                  formattedText: {
+                    type: "text",
+                    name: T(s, ye),
+                    placeholder: S.placeholders.tinValue,
+                    format: c.tin?.type === r.texts.ssn ? Qe : Ze,
+                    registerOptions: {
+                      required: !!c?.tin?.type,
+                      pattern: c.tin?.type === r.texts.ssn ? Je : Ke
+                    },
+                    style: {
+                      width: "100%",
+                      height: o.sp6
+                    },
+                    defaultValue: c.tin?.value ?? r.strings.empty,
+                    maxLength: 9,
+                    allowLeadingZeros: !0,
+                    autoComplete: "new-password",
+                    isDisabled: c.tin?.type === null ? "disabled" : void 0
+                  }
+                }
+              ) }),
+              /* @__PURE__ */ t.jsx(W, {}),
+              /* @__PURE__ */ t.jsxs(Ut, { children: [
+                /* @__PURE__ */ t.jsx(O, { children: f?.address === !0 && !b ? /* @__PURE__ */ t.jsx(z, {}) : null }),
+                /* @__PURE__ */ t.jsx(
+                  Xe,
+                  {
+                    label: R.address,
+                    style: {
+                      marginLeft: o.sp4,
+                      marginTop: w.labelMarginTop.value(n),
+                      marginBottom: o.sp2
+                    }
+                  }
+                ),
+                /* @__PURE__ */ t.jsx(
+                  at,
+                  {
+                    googleAPIKey: we,
+                    formId: D(s),
+                    addressToEdit: j?.addressStatus?.addressToCreate,
+                    sectionId: s
+                  }
+                )
+              ] })
+            ] })
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ t.jsx(
+      Ye,
+      {
+        separatorStyle: { marginRight: o.sp4 },
+        formId: D(s),
+        cancelBtn: {
+          label: le.cancel,
+          style: { width: "83px" },
+          onClick: K
+        },
+        primaryBtn: {
+          label: le.save,
+          isLoading: I.fetchState === "In-Progress",
+          style: { width: "83px" },
+          isDisabled: Le()
+        },
+        style: yt
+      }
+    )
+  ] }) });
+}, Lt = i.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-between;
+`, Vt = i.div`
+  height: 100%;
+`, ne = i.div`
+  padding-left: ${(e) => w.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${(e) => w.containerPaddingRight.valuePx(e.windowSize)};
+  height: ${(e) => e.isLoading ? void 0 : "100%"};
+  padding-bottom: 112px;
+`, Tt = i.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey4};
+  overflow-x: hidden;
+  height: 100%;
+  width: 100%;
+`, Pt = i.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.isLoading ? void 0 : e.theme.colors.grey5};
+  border: ${(e) => e.isLoading ? void 0 : `1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${(e) => e.isLoading ? void 0 : `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${o.sp2};
+  position: relative;
+`, W = i.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, It = i(tt)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: ${o.sp4};
+  height: ${o.sp4};
+  min-height: ${o.sp4};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Nt = i(ot)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${o.sp0};
+  margin-right: ${o.sp3};
+`, At = i(st)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${o.sp4};
+`, Bt = i.div`
+  background-color: ${P.alertLight};
+  border: 1px solid ${P.brandColorGoldDark};
+  border-radius: ${o.sp2};
+  display: flex;
+  gap: ${o.sp2};
+  padding: ${o.sp3} ${o.sp4};
+  margin-bottom: ${o.sp3};
+`, Rt = i.div`
+  display: flex;
+  flex-direction: column;
+`, Wt = i(nt)`
+  color: ${P.brandColorGoldDark};
+`, zt = i(ue)`
+  color: ${P.brandColorGoldDark};
+`, kt = i(lt)`
+  width: ${o.sp4};
+  min-height: ${o.sp4};
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${P.brandColorGoldDark};
+`, re = i.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: ${o.sp8};
+  width: 100%;
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+    input {
+      background-color: ${(e) => e.theme.colors.background};
+    }
+  }
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+`, Mt = i(ue)`
+  width: ${(e) => e.width}px;
+  color: ${(e) => e.theme.colors.hero};
+  margin: ${(e) => `${w.labelMarginTop.valuePx(e.windowSize)} ${w.labelMarginLeft.valuePx(
+  e.windowSize
+)} ${w.labelMarginBottom.valuePx(
+  e.windowSize
+)} ${w.labelMarginLeft.valuePx(e.windowSize)}`};
+  padding-right: ${o.sp5};
+`, Ot = i.div`
+  width: ${(e) => e.labelWidth != null ? `calc(100% - ${e.labelWidth}px)` : "100%"};
+  display: flex;
+  flex-grow: ${(e) => e.size === "small" ? 1 : 0};
+  align-items: center;
+  margin-right: ${o.sp2};
+`, z = i(rt)`
+  color: ${(e) => e.theme.colors.primary};
+  width: ${o.sp3};
+  height: ${o.sp3};
+`, Ht = i.div`
+  display: flex;
+  gap: ${o.sp2};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  padding: ${o.sp3};
+  border-radius: ${o.sp2};
+  align-items: center;
+  margin: ${o.sp3};
+  margin-left: ${o.sp0};
+  margin-right: ${o.sp0};
+`, qt = i.span`
+  color: ${(e) => e.theme.colors.hero};
+`, Et = i.div`
+  position: relative;
+`, O = i.div`
+  position: absolute;
+  top: 20px;
+  left: -${o.sp4};
+`, Ut = i.div`
+  display: flex;
+  position: relative;
+  width: 100%;
+  flex-direction: column;
+  z-index: unset;
+
+  &:hover {
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+`, ie = (e, n, a) => ({
+  //vendor details
+  [s]: {
+    [pe]: e.legalName ?? r.strings.empty,
+    [ge]: e.contact?.email ?? r.strings.empty,
+    [he]: e.contact?.phone ?? r.strings.empty,
+    [me]: {
+      selectedType: e.taxClassification,
+      allTypes: n
+    },
+    [xe]: e.tin?.type ?? null,
+    [ye]: e.tin?.value ?? null,
+    //address details
+    [ft]: {
+      addressString: a?.street[0] ?? "",
+      addressValue: a != null ? ce(a) : void 0
+    },
+    [wt]: a?.city ?? "",
+    [$t]: a?.state ?? "",
+    [vt]: G(a?.country),
+    [St]: a?.countryCode ?? "",
+    [Ct]: a?.postalCode ?? "",
+    [jt]: a?.street[2] ?? "",
+    [bt]: a?.street[1] ?? ""
+  }
+});
+export {
+  Qt as default,
+  D as uniqueFormName
+};