@zeniai/web-components 3.16.31 → 3.16.32

package/dist/SetUpDefaultSection-B4Tvbzll.js

@@ -1,537 +0,0 @@
-import { u as O, j as t, C as ee } from "./vendor-.pnpm-DxbX2tX4.js";
-import { useState as ie } from "react";
-import o from "@emotion/styled";
-import { u as te, j as w, a as oe, dZ as p, S as i, R as c, hG as B, hH as u, C as k, hI as ne, av as le, Q as re, D as s, P as L, ag as se, G as _, J as ae, E as de, aw as ce, hL as he } from "./index-BcmM9nFj.js";
-const r = {
-  sectionWidth: new c(343, 580, 726),
-  descriptionMarginBottom: new c(12, s[3]),
-  iconContainerMaxWidthHeight: new c(s[6], s[7]),
-  iconContainerMarginRight: new c(12, s[3]),
-  iconPadding: new c(10, 12),
-  rowGap: new c(s[2], s[3]),
-  containerPadding: new c(s[3], s[4]),
-  navIconLeftMargin: new c(12, s[4]),
-  tagIconContainerDivMarginTop: new c(s[2], s[0])
-}, E = {
-  title: new le("standardSemiBold", "largeSemiBold")
-}, {
-  commonSetUp: { setUp: b }
-} = oe.getLocalizedStrings(), ge = o(ce)`
-  margin-left: 6px;
-  width: 12px;
-  height: 12px;
-`, me = o.div`
-  display: flex;
-  align-items: center;
-`, xe = o.div`
-  position: relative;
-`, pe = o.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  position: absolute;
-  top: ${i.sp4};
-  right: -153px;
-  width: 300px;
-  z-index: 3;
-  height: ${i.sp7};
-  border-radius: ${i.sp1};
-  box-shadow: ${(e) => `${i.sp0} 2px ${i.sp2} ${e.theme.colors.grey1}`};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  background: ${(e) => e.theme.colors.grey4};
-`, ue = o(he)`
-  width: ${i.sp4};
-  height: ${i.sp4};
-  margin-right: ${i.sp2};
-  margin-left: ${i.sp4};
-`, $e = o(L)`
-  color: ${(e) => e.theme.colors.hero};
-  cursor: pointer;
-`, fe = o.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${(e) => e.theme.colors.grey5};
-  color: ${(e) => e.theme.colors.grey1};
-  border-radius: ${i.sp2};
-  ${(e) => e.isFootNoteAvailable && `
-    border-bottom-right-radius: ${i.sp0};
-    border-bottom-left-radius: ${i.sp0};
-  `}
-`, we = ({
-  windowSize: e,
-  title: A,
-  isError: h,
-  isCardPaymentMethod: S = !1,
-  showAddPaymentMethodDropDown: v = !1,
-  addPaymentMethodDropdownOpen: n,
-  isDisabled: x,
-  updateCardPaymentModalState: $,
-  setAddPaymentMethodDropdownOpen: a,
-  openPlaidDialog: f,
-  productType: g,
-  setEventSourceType: y,
-  referrer: z,
-  analytics: C
-}) => {
-  const R = () => {
-    n === !0 && a != null && a(!1);
-  };
-  return /* @__PURE__ */ t.jsxs(me, { children: [
-    /* @__PURE__ */ t.jsx(je, { windowSize: e, isDisabled: x, isError: h, children: A }),
-    v ? /* @__PURE__ */ t.jsxs(
-      xe,
-      {
-        "data-testid": w(
-          "add-payment-method-wrapper",
-          g
-        ),
-        children: [
-          /* @__PURE__ */ t.jsx(
-            ge,
-            {
-              "data-testid": w("add-payment-method", g),
-              onClick: (m) => {
-                m.stopPropagation(), a?.(
-                  !(n ?? !1)
-                );
-              }
-            }
-          ),
-          n === !0 ? /* @__PURE__ */ t.jsx(ee, { onClickAway: R, children: /* @__PURE__ */ t.jsxs(pe, { children: [
-            /* @__PURE__ */ t.jsx(ue, {}),
-            /* @__PURE__ */ t.jsx(
-              $e,
-              {
-                onClick: (m) => {
-                  m.stopPropagation(), S && $ != null ? ($(!0), y != null && C != null && g != null && (y("link_new_credit_card"), C.trackCreditCardConnect(
-                    g,
-                    "link_new_credit_card",
-                    z
-                  ))) : f?.(m, "link_new_bank_account"), a?.(!1);
-                },
-                "data-testid": w("add-card", g),
-                children: S ? b.addNewCard : b.linkNewAccount
-              }
-            )
-          ] }) }) : null
-        ]
-      }
-    ) : null
-  ] });
-};
-function Ke({
-  style: e,
-  header: A,
-  footNote: h,
-  title: S,
-  subTitle: v,
-  status: n,
-  statusInfoIcon: x,
-  icon: $,
-  isActive: a = !0,
-  isDisabled: f = !1,
-  isClickable: g = !0,
-  isCompleted: y = !1,
-  showCompletedIcon: z = !1,
-  isError: C,
-  hasError: R = !1,
-  subTitleIcon: m,
-  isLoading: d,
-  isTagLoading: I,
-  isActiveWhileLoading: D = !1,
-  shouldHover: F = !0,
-  showRightArrow: G = !0,
-  onClick: N,
-  showAddPaymentMethodDropDown: H = !1,
-  updateCardPaymentModalState: U,
-  openPlaidDialog: J,
-  isCardPaymentMethod: Q,
-  analytics: V,
-  productType: P,
-  referrer: Z,
-  setEventSourceType: q,
-  additionalInfo: j
-}) {
-  const l = te(), K = O(), [X, Y] = ie(!1);
-  return /* @__PURE__ */ t.jsxs(
-    Se,
-    {
-      windowSize: l,
-      style: e,
-      isActive: a && !f,
-      isLoading: d ?? !1,
-      isActiveWhileLoading: D,
-      "data-testid": w("setup-default-section", P),
-      children: [
-        /* @__PURE__ */ t.jsxs(We, { children: [
-          z === !0 ? /* @__PURE__ */ t.jsx(De, { children: y ? /* @__PURE__ */ t.jsx(Fe, {}) : /* @__PURE__ */ t.jsx(Ge, {}) }) : null,
-          /* @__PURE__ */ t.jsxs(Me, { windowSize: l, children: [
-            A,
-            a === !1 ? /* @__PURE__ */ t.jsx(_e, { children: b.comingSoon }) : null
-          ] })
-        ] }),
-        /* @__PURE__ */ t.jsxs(
-          Ie,
-          {
-            windowSize: l,
-            width: e?.width,
-            shouldHover: F,
-            isClickable: g,
-            children: [
-              /* @__PURE__ */ t.jsxs(fe, { isFootNoteAvailable: h != null, children: [
-                /* @__PURE__ */ t.jsxs(
-                  Be,
-                  {
-                    windowSize: l,
-                    width: e?.width,
-                    isfootNoteAvailable: h != null,
-                    onClick: a && !f ? N : void 0,
-                    "data-testid": w(
-                      "setup-approval-section-elements",
-                      P
-                    ),
-                    children: [
-                      /* @__PURE__ */ t.jsxs(ve, { children: [
-                        /* @__PURE__ */ t.jsxs(ye, { children: [
-                          /* @__PURE__ */ t.jsx(
-                            p,
-                            {
-                              isLoading: d ?? !1,
-                              customStyle: {
-                                width: i.sp7,
-                                height: i.sp7,
-                                borderRadius: "50%",
-                                marginRight: i.sp3
-                              },
-                              children: /* @__PURE__ */ t.jsx(
-                                Pe,
-                                {
-                                  iconColor: $.color,
-                                  windowSize: l,
-                                  isDarkMode: K.mode === "dark",
-                                  children: $.element
-                                }
-                              )
-                            }
-                          ),
-                          /* @__PURE__ */ t.jsxs(Te, { children: [
-                            /* @__PURE__ */ t.jsxs(Le, { children: [
-                              /* @__PURE__ */ t.jsx(
-                                p,
-                                {
-                                  isLoading: d ?? !1,
-                                  customStyle: {
-                                    width: "200px",
-                                    height: i.sp4,
-                                    marginBottom: `${r.descriptionMarginBottom.valuePx(
-                                      l
-                                    )}`,
-                                    marginTop: i.sp2
-                                  },
-                                  children: /* @__PURE__ */ t.jsx(
-                                    we,
-                                    {
-                                      windowSize: l,
-                                      title: S,
-                                      isError: C,
-                                      showAddPaymentMethodDropDown: H,
-                                      setAddPaymentMethodDropdownOpen: Y,
-                                      addPaymentMethodDropdownOpen: X,
-                                      updateCardPaymentModalState: U,
-                                      isCardPaymentMethod: Q ?? !1,
-                                      openPlaidDialog: J,
-                                      analytics: V,
-                                      productType: P,
-                                      referrer: Z,
-                                      setEventSourceType: q
-                                    }
-                                  )
-                                }
-                              ),
-                              v.length > 0 ? /* @__PURE__ */ t.jsx(be, { children: /* @__PURE__ */ t.jsx(
-                                p,
-                                {
-                                  isLoading: d ?? !1,
-                                  customStyle: {
-                                    width: i.sp12,
-                                    height: `${i.sp4}`,
-                                    marginBottom: `${r.descriptionMarginBottom.valuePx(
-                                      l
-                                    )}`
-                                  },
-                                  children: /* @__PURE__ */ t.jsxs(ke, { children: [
-                                    v,
-                                    m != null ? /* @__PURE__ */ t.jsx(Ae, { children: m.element }) : null
-                                  ] })
-                                }
-                              ) }) : null
-                            ] }),
-                            n != null && l === "small" ? /* @__PURE__ */ t.jsx(
-                              p,
-                              {
-                                isLoading: d ?? !1,
-                                customStyle: {
-                                  width: i.sp12,
-                                  height: i.sp4,
-                                  marginBottom: `${r.descriptionMarginBottom.valuePx(
-                                    l
-                                  )}`
-                                },
-                                children: /* @__PURE__ */ t.jsxs(W, { windowSize: l, children: [
-                                  x ?? x,
-                                  /* @__PURE__ */ t.jsx(
-                                    B,
-                                    {
-                                      style: {
-                                        width: "max-content",
-                                        padding: 0
-                                      },
-                                      tagTitle: n.name,
-                                      textColor: u(n.code),
-                                      showLoader: I
-                                    }
-                                  )
-                                ] })
-                              }
-                            ) : null,
-                            d === !1 && j != null && l === "small" ? /* @__PURE__ */ t.jsxs(He, { children: [
-                              /* @__PURE__ */ t.jsx(
-                                M,
-                                {
-                                  statusColor: n != null ? u(n.code).color : void 0
-                                }
-                              ),
-                              /* @__PURE__ */ t.jsx(
-                                T,
-                                {
-                                  statusColor: n != null ? u(n.code).color : void 0,
-                                  children: j
-                                }
-                              )
-                            ] }) : null
-                          ] })
-                        ] }),
-                        /* @__PURE__ */ t.jsxs(Ce, { children: [
-                          n != null && l !== "small" ? /* @__PURE__ */ t.jsxs(W, { windowSize: l, children: [
-                            /* @__PURE__ */ t.jsx(Ne, { children: x ?? x }),
-                            /* @__PURE__ */ t.jsx(
-                              p,
-                              {
-                                isLoading: d ?? !1,
-                                customStyle: {
-                                  width: i.sp12,
-                                  height: `${i.sp4}`,
-                                  marginBottom: `${r.descriptionMarginBottom.valuePx(
-                                    l
-                                  )}`
-                                },
-                                children: /* @__PURE__ */ t.jsx(
-                                  B,
-                                  {
-                                    style: {
-                                      width: "max-content",
-                                      padding: 0
-                                    },
-                                    tagTitle: n.name,
-                                    textColor: u(n.code),
-                                    showLoader: I
-                                  }
-                                )
-                              }
-                            )
-                          ] }) : null,
-                          G === !0 ? /* @__PURE__ */ t.jsx(ze, { windowSize: l, children: /* @__PURE__ */ t.jsx(Re, { width: i.sp4, height: i.sp4 }) }) : null
-                        ] })
-                      ] }),
-                      d === !1 && j != null && l !== "small" ? /* @__PURE__ */ t.jsxs(Ue, { children: [
-                        /* @__PURE__ */ t.jsx(
-                          M,
-                          {
-                            statusColor: n != null ? u(n.code).color : void 0
-                          }
-                        ),
-                        /* @__PURE__ */ t.jsx(
-                          T,
-                          {
-                            statusColor: n != null ? u(n.code).color : void 0,
-                            children: j
-                          }
-                        )
-                      ] }) : null
-                    ]
-                  }
-                ),
-                R ? /* @__PURE__ */ t.jsx(Je, { children: b.bankAccountLinkingError }) : null
-              ] }),
-              /* @__PURE__ */ t.jsx(
-                p,
-                {
-                  isLoading: d ?? !1,
-                  customStyle: {
-                    marginTop: r.rowGap.valuePx(l),
-                    width: "48%",
-                    height: i.sp3,
-                    marginBottom: i.sp2,
-                    marginLeft: i.sp3
-                  },
-                  children: typeof h == "string" ? /* @__PURE__ */ t.jsx(Ee, { children: h }) : h
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-const Se = o.div`
-  display: flex;
-  flex-direction: column;
-  pointer-events: ${(e) => (e.isLoading === !0 || e.isActive === !1) && e.isActiveWhileLoading === !1 ? "none" : "initial"};
-  opacity: ${(e) => e.isActive ? 1 : 0.32};
-  padding-top: ${i.sp3};
-  row-gap: ${(e) => r.rowGap.valuePx(e.windowSize)};
-`, ve = o.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex: 1;
-  width: 100%;
-`, ye = o.div`
-  display: flex;
-  align-items: center;
-`, Ce = o.div`
-  display: flex;
-  align-items: center;
-`, W = o.div`
-  display: flex;
-  align-items: flex-end;
-  margin-top: ${(e) => r.tagIconContainerDivMarginTop.valuePx(e.windowSize)};
-  gap: ${i.sp2};
-`, je = o.div`
-  ${(e) => `${E.title.style(e.windowSize)}`};
-  color: ${(e) => e.isError === !0 ? k.important : e.isDisabled === !0 ? e.theme.colors.grey1 : e.theme.colors.primary};
-`, be = o.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-`, ke = o(L)`
-  color: ${(e) => e.theme.colors.hero};
-`, Ae = o.span`
-  padding-left: ${i.sp1};
-`, ze = o.div`
-  display: flex;
-  color: inherit;
-  margin-left: ${(e) => r.navIconLeftMargin.valuePx(e.windowSize)};
-`, Re = o(ae)`
-  width: ${i.sp4};
-  height: ${i.sp4};
-`, Pe = o.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  padding: ${(e) => r.iconPadding.valuePx(e.windowSize)};
-  background: ${(e) => e.iconColor.toString()};
-  border-radius: ${i.sp11};
-  width: fit-content;
-  height: fit-content;
-  color: ${(e) => e.isDarkMode ? k.neutralGrey5Light : e.theme.colors.brandColorOnyx}; // As per design
-  max-width: ${(e) => r.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
-  max-height: ${(e) => r.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
-  margin-right: ${(e) => r.iconContainerMarginRight.valuePx(e.windowSize)};
-`, Ie = o.div`
-  width: ${(e) => e.width != null ? e.width : r.sectionWidth.valuePx(e.windowSize)};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${i.sp0} 2px ${i.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${i.sp2};
-  &:hover {
-    border: ${(e) => `1px solid  ${e.shouldHover ? e.theme.colors.primary : e.theme.colors.grey3}`};
-    color: ${(e) => e.theme.colors.primary};
-    cursor: ${(e) => e.isClickable ? "pointer" : "default"};
-    position: relative;
-  }
-`, Be = o.div`
-  display: flex;
-  flex-direction: column;
-  padding: ${(e) => r.containerPadding.valuePx(e.windowSize)};
-  background-color: ${(e) => e.theme.colors.grey5};
-  fill: ${(e) => e.theme.colors.grey1};
-  color: ${(e) => e.theme.colors.grey1};
-  border-top-right-radius: ${i.sp2};
-  border-top-left-radius: ${i.sp2};
-  border-bottom-right-radius: ${(e) => e.isfootNoteAvailable ? i.sp0 : i.sp2};
-  border-bottom-left-radius: ${(e) => e.isfootNoteAvailable ? i.sp0 : i.sp2};
-  justify-content: space-between;
-  box-sizing: border-box;
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-    fill: ${(e) => e.theme.colors.primary};
-  }
-`, We = o.div`
-  display: flex;
-  align-items: center;
-`, Me = o.div`
-  display: flex;
-  align-items: center;
-  color: ${(e) => e.theme.colors.primary};
-  ${(e) => `${E.title.style(e.windowSize)}`};
-`, Te = o.div`
-  display: flex;
-  flex-direction: column;
-`, Le = o.div``, _e = o(re)`
-  color: ${(e) => e.theme.colors.comingSoon};
-  margin-left: ${i.sp3};
-`, Ee = o(de)`
-  padding: ${i.sp2} ${i.sp4};
-  background: ${(e) => e.theme.colors.grey4};
-  border-radius: ${i.sp0} ${i.sp0} ${i.sp2} ${i.sp2};
-  width: 100%;
-  box-sizing: border-box;
-  text-align: center;
-  color: ${(e) => e.theme.colors.grey1};
-`, De = o.div`
-  margin-right: ${i.sp2};
-`, Fe = o(ne)`
-  width: ${i.sp3};
-  height: ${i.sp3};
-  color: ${k.success};
-`, Ge = o.div`
-  height: 14px;
-  width: 14px;
-  border: 1px solid ${(e) => e.theme.colors.primary};
-  border-radius: 50%;
-`, Ne = o.div`
-  width: ${i.sp3};
-  height: ${i.sp3};
-  margin: auto;
-`, He = o.div`
-  display: flex;
-  align-items: flex-start;
-  gap: ${i.sp1};
-  margin-top: ${i.sp2};
-`, Ue = o.div`
-  display: flex;
-  align-items: flex-start;
-  gap: ${i.sp1};
-  margin-top: ${i.sp2};
-  padding-left: calc(${i.sp7} + ${i.sp3});
-`, M = o(se)`
-  width: ${i.sp3};
-  height: ${i.sp3};
-  flex-shrink: 0;
-  margin-top: 2px;
-  color: ${(e) => e.statusColor != null ? e.statusColor.toString() : e.theme.colors.grey1};
-`, T = o(_)`
-  color: ${(e) => e.statusColor != null ? e.statusColor.toString() : e.theme.colors.grey1};
-`, Je = o(_)`
-  display: flex;
-  color: ${k.important};
-  margin-left: 88px;
-  margin-bottom: ${i.sp3};
-  border-radius: ${i.sp1};
-`;
-export {
-  we as A,
-  Ee as F,
-  Ke as S
-};