@zeniai/web-components 3.16.86 → 3.16.87

package/dist/ProductsCarousel-D0yVP3rN.js

@@ -0,0 +1,309 @@
+import { j as t } from "./vendor-.pnpm-D5gxGIYo.js";
+import { a as E, f$ as N, V as W, o as O, S as l, aJ as V, C, dD as B, G, O as J, D as U } from "./index-BtWKMiEc.js";
+import { useState as S, useCallback as F, useEffect as Z } from "react";
+import o from "@emotion/styled";
+const h = E.getLocalizedStrings(), w = {
+  large: {
+    labelComp: N,
+    title: W,
+    subtitle: O,
+    seeMoreLink: O
+  }
+}, Y = {
+  large: {
+    width: 496,
+    height: 512,
+    padding: 32,
+    svgSize: 12,
+    svgContainerHeight: 24,
+    gap: 8,
+    imageGap: 16,
+    borderRadius: 16
+  }
+}, i = Y.large, q = o.div`
+  width: ${(e) => e.scale * i.width}px;
+  height: ${(e) => e.scale * i.height}px;
+  overflow: hidden;
+  background-color: ${(e) => e.variant === "large" ? e.theme.colors.grey5 : e.theme.colors.grey3};
+  box-shadow: ${(e) => `${e.variant === "large" ? C.Elevation2Light : C.Elevation1Light}`};
+  outline: 1px solid
+    ${(e) => e.variant === "large" ? e.theme.colors.grey3 : e.theme.colors.grey2};
+  border-radius: ${(e) => e.scale * i.borderRadius}px;
+
+  & > * {
+    width: ${(e) => e.scale * i.width}px;
+    height: ${(e) => e.scale * i.height}px;
+    transform-origin: top left;
+    background-color: ${(e) => e.variant === "large" ? e.theme.colors.grey5 : e.theme.colors.grey3};
+    outline: 1px solid
+      ${(e) => e.variant === "large" ? e.theme.colors.grey3 : e.theme.colors.grey2};
+    box-shadow: ${(e) => `${e.variant === "large" ? C.Elevation2Light : C.Elevation1Light}`};
+    border-radius: ${(e) => e.scale * i.borderRadius}px;
+  }
+`, K = o(w.large.labelComp)`
+  color: ${(e) => e.theme.colors.brandColorRuby};
+  text-transform: uppercase;
+  margin-bottom: ${(e) => e.scale * i.gap}px;
+  text-align: left;
+`, Q = o(w.large.title)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${(e) => e.scale * i.gap}px;
+  text-align: left;
+`, ee = o(w.large.subtitle)`
+  color: ${(e) => e.theme.colors.champion};
+  margin-bottom: ${(e) => e.scale * i.gap}px;
+  text-align: left;
+`, te = o(w.large.seeMoreLink)`
+  color: ${(e) => e.theme.colors.brandColorJadeDark};
+`, oe = o.div`
+  width: ${(e) => e.scale * i.width}px;
+  height: ${(e) => e.scale * i.height}px;
+  padding: ${(e) => e.scale * e.padding}px;
+  background-color: ${(e) => e.variant === "large" ? e.theme.colors.grey5 : e.theme.colors.grey3};
+
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  z-index: 20;
+`, ie = o.a`
+  text-decoration: none;
+  display: inline-block;
+`, re = o.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+`, ne = o.div`
+  flex-shrink: 0;
+`, se = o.div`
+  display: flex;
+  align-items: center;
+  height: ${(e) => e.scale * i.svgContainerHeight}px;
+  margin-bottom: ${(e) => e.scale * i.imageGap}px;
+`, ae = o(V)`
+  width: ${(e) => e.scale * i.svgSize}px;
+  min-width: ${(e) => e.scale * i.svgSize}px;
+  height: ${(e) => e.scale * i.svgSize}px;
+  margin-left: ${l.sp1};
+  color: ${(e) => e.theme.colors.brandColorJadeDark};
+`, le = o.div`
+  width: 100%;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+`, ce = o.img`
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
+  object-position: center;
+`, ge = ({
+  scale: e = 1,
+  variant: n = "large",
+  label: c,
+  title: s,
+  subtitle: m,
+  seeMoreLink: a,
+  image: g
+}) => {
+  const d = /* @__PURE__ */ t.jsx(oe, { scale: e, variant: n, padding: i.padding * e, children: /* @__PURE__ */ t.jsxs(re, { children: [
+    /* @__PURE__ */ t.jsxs(ne, { children: [
+      c != null && c.trim() !== h.common.strings.empty ? /* @__PURE__ */ t.jsx(K, { scale: e, children: c }) : null,
+      s != null && s.trim() !== h.common.strings.empty ? /* @__PURE__ */ t.jsx(Q, { scale: e, children: s }) : null,
+      m != null && m.trim() !== h.common.strings.empty ? /* @__PURE__ */ t.jsx(ee, { scale: e, children: m }) : null,
+      a != null && a.trim() !== h.common.strings.empty ? /* @__PURE__ */ t.jsxs(se, { scale: e, children: [
+        /* @__PURE__ */ t.jsx(te, { children: h.customerOnboardingPage.productSuite.productCard.seeMore }),
+        /* @__PURE__ */ t.jsx(ae, { scale: e })
+      ] }) : null
+    ] }),
+    g != null && g.trim() !== h.common.strings.empty ? /* @__PURE__ */ t.jsx(le, { children: /* @__PURE__ */ t.jsx(ce, { src: g, loading: "lazy" }) }) : null
+  ] }) });
+  return /* @__PURE__ */ t.jsx(q, { scale: e, variant: n, children: n === "large" && a != null && a.trim() !== h.common.strings.empty ? /* @__PURE__ */ t.jsx(ie, { href: a, target: "_blank", rel: "noopener noreferrer", children: d }) : d });
+}, u = 2, I = 5, de = 496, pe = U[5], k = [
+  { positionX: -480, scale: 0.67 },
+  { positionX: -226, scale: 0.83 },
+  { positionX: 0, scale: 1 },
+  { positionX: 226, scale: 0.83 },
+  { positionX: 480, scale: 0.67 }
+], me = k[0].scale, he = Math.abs(k[0].positionX), ue = o.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, xe = o(J)`
+  width: ${l.sp3};
+  height: ${l.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, A = o.div`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  ${({ position: e, arrowOffset: n }) => e === "left" ? `left: calc(50% - ${n}px);` : `right: calc(50% - ${n}px);`}
+  display: flex;
+  width: ${l.sp5};
+  height: ${l.sp5};
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  background-color: ${(e) => e.theme.colors.grey5};
+  border-radius: 50%;
+  box-shadow: ${(e) => `${l.sp0} 2px ${l.sp1} ${e.theme.colors.dropShadowNormal}`};
+  outline: 1px solid ${(e) => e.theme.colors.grey3};
+  z-index: 3;
+  cursor: pointer;
+  &:hover {
+    .btnsvg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+    outline-color: ${(e) => e.theme.colors.primary};
+  }
+`, be = o(G)`
+  width: ${l.sp3};
+  height: ${l.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, fe = o.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+  perspective: 2000px;
+`, $e = o.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: ${({ positionX: e, scale: n }) => `translate(-50%, -50%) translateX(${e}px) scale(${n})`};
+  transition: transform 1000ms cubic-bezier(0.5, 1.3, 0.39, 1);
+  transform-style: preserve-3d;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  ${({ isForeFront: e, hoverScale: n }) => e && `
+    &:hover {
+      transform: translate(-50%, -50%) translateX(0px) translateZ(10px) scale(${n})
+    }
+  `}
+`, ve = ({
+  cards: e,
+  showUpdatePaymentDetailButton: n,
+  stopCarousel: c,
+  scale: s = 1
+}) => {
+  const [m, a] = S(2), [g, d] = S(!1), [v, j] = S(!1), b = e.length, z = B().analytics, R = de * me * s / 2, L = he * s + R + pe / 2, f = F(
+    (r) => {
+      v || (j(!0), a((x) => (x + r + b) % b), setTimeout(() => j(!1), 1e3));
+    },
+    [v, b]
+  );
+  Z(() => {
+    if (g || c || v)
+      return;
+    const r = setInterval(() => {
+      f(1);
+    }, 3e3);
+    return () => clearInterval(r);
+  }, [g, c, v, f]);
+  const _ = (r) => (m + r - u + b) % b, D = (r) => {
+    const y = Array.from(
+      { length: I },
+      (T, $) => _($)
+    ).indexOf(r) - u;
+    y !== 0 && f(y), n ? z.trackOnboardingLandingPageCardClick(e[r].cardTitle) : z.trackOnboardingInterimCard(e[r].cardTitle);
+  };
+  return /* @__PURE__ */ t.jsxs(ue, { children: [
+    /* @__PURE__ */ t.jsx(
+      A,
+      {
+        arrowOffset: L,
+        position: "left",
+        onClick: () => f(-1),
+        children: /* @__PURE__ */ t.jsx(be, { className: "btnsvg" })
+      }
+    ),
+    /* @__PURE__ */ t.jsx(fe, { children: e.map((r, x) => {
+      const p = Array.from(
+        { length: I },
+        (ke, H) => _(H)
+      ).indexOf(x);
+      if (p === -1)
+        return null;
+      const { positionX: y, scale: T } = k[p], $ = p === u, P = T * s, X = y * s, M = 1.02 * s;
+      return /* @__PURE__ */ t.jsx(
+        $e,
+        {
+          isForeFront: $,
+          positionX: X,
+          scale: P,
+          hoverScale: M,
+          onClick: () => D(x),
+          onMouseEnter: () => $ && d(!0),
+          onMouseLeave: () => $ && d(!1),
+          style: {
+            zIndex: p === u ? 5 : 5 - Math.abs(p - u)
+          },
+          children: /* @__PURE__ */ t.jsx(
+            ge,
+            {
+              label: r.cardTitle,
+              title: r.sectionTitle,
+              subtitle: r.sectionSubTitle,
+              seeMoreLink: r.redirectLink,
+              image: r.imageLink,
+              variant: p === u ? "large" : p === u - 1 ? "medium" : "small"
+            }
+          )
+        },
+        x
+      );
+    }) }),
+    /* @__PURE__ */ t.jsx(
+      A,
+      {
+        arrowOffset: L,
+        position: "right",
+        onClick: () => f(1),
+        children: /* @__PURE__ */ t.jsx(xe, { className: "btnsvg" })
+      }
+    )
+  ] });
+}, ye = [
+  "https://storage.googleapis.com/zeni-apis.appspot.com/images/zeni-reimbursements.png",
+  "https://storage.googleapis.com/zeni-apis.appspot.com/images/zeni-bill-payments.png",
+  "https://storage.googleapis.com/zeni-apis.appspot.com/images/zeni-ai-bookkeeping.png",
+  "https://storage.googleapis.com/zeni-apis.appspot.com/images/zeni-business-checking-accounts.png",
+  "https://storage.googleapis.com/zeni-apis.appspot.com/images/zeni-business-credit-cards.png"
+], Ce = [
+  "https://www.zeni.ai/product/employee-reimbursements?utm_source=onboarding_interim",
+  "https://www.zeni.ai/product/bill-pay?utm_source=onboarding_interim",
+  "https://www.zeni.ai/product/ai-bookkeeping?utm_source=onboarding_interim",
+  "https://www.zeni.ai/product/business-checking-accounts?utm_source=onboarding_interim",
+  "https://www.zeni.ai/product/business-credit-card?utm_source=onboarding_interim"
+], Te = ({
+  scale: e = 1,
+  showUpdatePaymentDetailButton: n = !1,
+  stopCarousel: c = !1
+}) => {
+  const { customerOnboardingPage: s } = E.getLocalizedStrings(), { productSuite: m } = s, a = m.productCard.cards.map((g, d) => ({
+    ...g,
+    imageLink: ye[d],
+    redirectLink: Ce[d]
+  }));
+  return /* @__PURE__ */ t.jsx(
+    ve,
+    {
+      cards: a,
+      scale: e,
+      showUpdatePaymentDetailButton: n,
+      stopCarousel: c
+    }
+  );
+};
+export {
+  Te as P
+};

package/dist/ProductsCarousel-Ddc75eyj.cjs

@@ -0,0 +1,142 @@
+"use strict";const o=require("./vendor-.pnpm-DBR6vHWn.cjs"),t=require("./index-BMqHLOEI.cjs"),v=require("react"),r=require("@emotion/styled"),u=t.appLocale.getLocalizedStrings(),j={large:{labelComp:t.EyebrowSmallMedium,title:t.H6Regular,subtitle:t.StandardRegular,seeMoreLink:t.StandardRegular}},M={large:{width:496,height:512,padding:32,svgSize:12,svgContainerHeight:24,gap:8,imageGap:16,borderRadius:16}},s=M.large,D=r.div`
+  width: ${e=>e.scale*s.width}px;
+  height: ${e=>e.scale*s.height}px;
+  overflow: hidden;
+  background-color: ${e=>e.variant==="large"?e.theme.colors.grey5:e.theme.colors.grey3};
+  box-shadow: ${e=>`${e.variant==="large"?t.Colors.Elevation2Light:t.Colors.Elevation1Light}`};
+  outline: 1px solid
+    ${e=>e.variant==="large"?e.theme.colors.grey3:e.theme.colors.grey2};
+  border-radius: ${e=>e.scale*s.borderRadius}px;
+
+  & > * {
+    width: ${e=>e.scale*s.width}px;
+    height: ${e=>e.scale*s.height}px;
+    transform-origin: top left;
+    background-color: ${e=>e.variant==="large"?e.theme.colors.grey5:e.theme.colors.grey3};
+    outline: 1px solid
+      ${e=>e.variant==="large"?e.theme.colors.grey3:e.theme.colors.grey2};
+    box-shadow: ${e=>`${e.variant==="large"?t.Colors.Elevation2Light:t.Colors.Elevation1Light}`};
+    border-radius: ${e=>e.scale*s.borderRadius}px;
+  }
+`,H=r(j.large.labelComp)`
+  color: ${e=>e.theme.colors.brandColorRuby};
+  text-transform: uppercase;
+  margin-bottom: ${e=>e.scale*s.gap}px;
+  text-align: left;
+`,N=r(j.large.title)`
+  color: ${e=>e.theme.colors.primary};
+  margin-bottom: ${e=>e.scale*s.gap}px;
+  text-align: left;
+`,W=r(j.large.subtitle)`
+  color: ${e=>e.theme.colors.champion};
+  margin-bottom: ${e=>e.scale*s.gap}px;
+  text-align: left;
+`,q=r(j.large.seeMoreLink)`
+  color: ${e=>e.theme.colors.brandColorJadeDark};
+`,B=r.div`
+  width: ${e=>e.scale*s.width}px;
+  height: ${e=>e.scale*s.height}px;
+  padding: ${e=>e.scale*e.padding}px;
+  background-color: ${e=>e.variant==="large"?e.theme.colors.grey5:e.theme.colors.grey3};
+
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  z-index: 20;
+`,U=r.a`
+  text-decoration: none;
+  display: inline-block;
+`,V=r.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+`,F=r.div`
+  flex-shrink: 0;
+`,G=r.div`
+  display: flex;
+  align-items: center;
+  height: ${e=>e.scale*s.svgContainerHeight}px;
+  margin-bottom: ${e=>e.scale*s.imageGap}px;
+`,J=r(t.SvgOpenLink)`
+  width: ${e=>e.scale*s.svgSize}px;
+  min-width: ${e=>e.scale*s.svgSize}px;
+  height: ${e=>e.scale*s.svgSize}px;
+  margin-left: ${t.Space.sp1};
+  color: ${e=>e.theme.colors.brandColorJadeDark};
+`,Z=r.div`
+  width: 100%;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+`,Y=r.img`
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
+  object-position: center;
+`,K=({scale:e=1,variant:n="large",label:c,title:a,subtitle:m,seeMoreLink:l,image:p})=>{const g=o.jsxRuntimeExports.jsx(B,{scale:e,variant:n,padding:s.padding*e,children:o.jsxRuntimeExports.jsxs(V,{children:[o.jsxRuntimeExports.jsxs(F,{children:[c!=null&&c.trim()!==u.common.strings.empty?o.jsxRuntimeExports.jsx(H,{scale:e,children:c}):null,a!=null&&a.trim()!==u.common.strings.empty?o.jsxRuntimeExports.jsx(N,{scale:e,children:a}):null,m!=null&&m.trim()!==u.common.strings.empty?o.jsxRuntimeExports.jsx(W,{scale:e,children:m}):null,l!=null&&l.trim()!==u.common.strings.empty?o.jsxRuntimeExports.jsxs(G,{scale:e,children:[o.jsxRuntimeExports.jsx(q,{children:u.customerOnboardingPage.productSuite.productCard.seeMore}),o.jsxRuntimeExports.jsx(J,{scale:e})]}):null]}),p!=null&&p.trim()!==u.common.strings.empty?o.jsxRuntimeExports.jsx(Z,{children:o.jsxRuntimeExports.jsx(Y,{src:p,loading:"lazy"})}):null]})});return o.jsxRuntimeExports.jsx(D,{scale:e,variant:n,children:n==="large"&&l!=null&&l.trim()!==u.common.strings.empty?o.jsxRuntimeExports.jsx(U,{href:l,target:"_blank",rel:"noopener noreferrer",children:g}):g})},h=2,L=5,Q=496,ee=t.sp[5],S=[{positionX:-480,scale:.67},{positionX:-226,scale:.83},{positionX:0,scale:1},{positionX:226,scale:.83},{positionX:480,scale:.67}],te=S[0].scale,oe=Math.abs(S[0].positionX),re=r.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`,se=r(t.SvgArrowRight)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,_=r.div`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  ${({position:e,arrowOffset:n})=>e==="left"?`left: calc(50% - ${n}px);`:`right: calc(50% - ${n}px);`}
+  display: flex;
+  width: ${t.Space.sp5};
+  height: ${t.Space.sp5};
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  background-color: ${e=>e.theme.colors.grey5};
+  border-radius: 50%;
+  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
+  outline: 1px solid ${e=>e.theme.colors.grey3};
+  z-index: 3;
+  cursor: pointer;
+  &:hover {
+    .btnsvg {
+      color: ${e=>e.theme.colors.primary};
+    }
+    outline-color: ${e=>e.theme.colors.primary};
+  }
+`,ie=r(t.SvgArrowLeft)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,ne=r.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+  perspective: 2000px;
+`,ae=r.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: ${({positionX:e,scale:n})=>`translate(-50%, -50%) translateX(${e}px) scale(${n})`};
+  transition: transform 1000ms cubic-bezier(0.5, 1.3, 0.39, 1);
+  transform-style: preserve-3d;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  ${({isForeFront:e,hoverScale:n})=>e&&`
+    &:hover {
+      transform: translate(-50%, -50%) translateX(0px) translateZ(10px) scale(${n})
+    }
+  `}
+`,le=({cards:e,showUpdatePaymentDetailButton:n,stopCarousel:c,scale:a=1})=>{const[m,l]=v.useState(2),[p,g]=v.useState(!1),[y,w]=v.useState(!1),b=e.length,R=t.useToolkitContext().analytics,T=Q*te*a/2,E=oe*a+T+ee/2,f=v.useCallback(i=>{y||(w(!0),l(x=>(x+i+b)%b),setTimeout(()=>w(!1),1e3))},[y,b]);v.useEffect(()=>{if(p||c||y)return;const i=setInterval(()=>{f(1)},3e3);return()=>clearInterval(i)},[p,c,y,f]);const k=i=>(m+i-h+b)%b,I=i=>{const C=Array.from({length:L},(z,$)=>k($)).indexOf(i)-h;C!==0&&f(C),n?R.trackOnboardingLandingPageCardClick(e[i].cardTitle):R.trackOnboardingInterimCard(e[i].cardTitle)};return o.jsxRuntimeExports.jsxs(re,{children:[o.jsxRuntimeExports.jsx(_,{arrowOffset:E,position:"left",onClick:()=>f(-1),children:o.jsxRuntimeExports.jsx(ie,{className:"btnsvg"})}),o.jsxRuntimeExports.jsx(ne,{children:e.map((i,x)=>{const d=Array.from({length:L},(ue,X)=>k(X)).indexOf(x);if(d===-1)return null;const{positionX:C,scale:z}=S[d],$=d===h,O=z*a,A=C*a,P=1.02*a;return o.jsxRuntimeExports.jsx(ae,{isForeFront:$,positionX:A,scale:O,hoverScale:P,onClick:()=>I(x),onMouseEnter:()=>$&&g(!0),onMouseLeave:()=>$&&g(!1),style:{zIndex:d===h?5:5-Math.abs(d-h)},children:o.jsxRuntimeExports.jsx(K,{label:i.cardTitle,title:i.sectionTitle,subtitle:i.sectionSubTitle,seeMoreLink:i.redirectLink,image:i.imageLink,variant:d===h?"large":d===h-1?"medium":"small"})},x)})}),o.jsxRuntimeExports.jsx(_,{arrowOffset:E,position:"right",onClick:()=>f(1),children:o.jsxRuntimeExports.jsx(se,{className:"btnsvg"})})]})},ce=["https://storage.googleapis.com/zeni-apis.appspot.com/images/zeni-reimbursements.png","https://storage.googleapis.com/zeni-apis.appspot.com/images/zeni-bill-payments.png","https://storage.googleapis.com/zeni-apis.appspot.com/images/zeni-ai-bookkeeping.png","https://storage.googleapis.com/zeni-apis.appspot.com/images/zeni-business-checking-accounts.png","https://storage.googleapis.com/zeni-apis.appspot.com/images/zeni-business-credit-cards.png"],pe=["https://www.zeni.ai/product/employee-reimbursements?utm_source=onboarding_interim","https://www.zeni.ai/product/bill-pay?utm_source=onboarding_interim","https://www.zeni.ai/product/ai-bookkeeping?utm_source=onboarding_interim","https://www.zeni.ai/product/business-checking-accounts?utm_source=onboarding_interim","https://www.zeni.ai/product/business-credit-card?utm_source=onboarding_interim"],ge=({scale:e=1,showUpdatePaymentDetailButton:n=!1,stopCarousel:c=!1})=>{const{customerOnboardingPage:a}=t.appLocale.getLocalizedStrings(),{productSuite:m}=a,l=m.productCard.cards.map((p,g)=>({...p,imageLink:ce[g],redirectLink:pe[g]}));return o.jsxRuntimeExports.jsx(le,{cards:l,scale:e,showUpdatePaymentDetailButton:n,stopCarousel:c})};exports.ProductsCarousel=ge;

package/dist/PromoBaseCards-DT-pLMAf.cjs

@@ -0,0 +1,218 @@
+"use strict";const i=require("./vendor-.pnpm-DBR6vHWn.cjs"),s=require("@emotion/react"),p=require("@emotion/styled"),e=require("./index-BMqHLOEI.cjs"),o={plasticCardMarginLeft:new e.ResponsiveSized(e.sp[6],120),plasticCardMarginTop:new e.ResponsiveSized(12,-9),businessTextRight:new e.ResponsiveSized(e.sp[2],13),businessTextBottom:new e.ResponsiveSized(e.sp[8],81),chargeCardWidth:new e.ResponsiveSized(240,384),chargeCardHeight:new e.ResponsiveSized(153,243),styledLogoWidth:new e.ResponsiveSized(47,76),styledLogoHeight:new e.ResponsiveSized(46,74),styledFullLogoTop:new e.ResponsiveSized(12,28),styledFullLogoRight:new e.ResponsiveSized(e.sp[2],13),styledFullLogoHeight:new e.ResponsiveSized(20,34),styledFullLogoWidth:new e.ResponsiveSized(88,142),chipLogoWidth:new e.ResponsiveSized(31,50),chipLogoHeight:new e.ResponsiveSized(e.sp[4],39),visaLogoWidth:new e.ResponsiveSized(52,84),visaLogoHeight:new e.ResponsiveSized(17,27),visaLogoRight:new e.ResponsiveSized(e.sp[2],13),visaLogoBottom:new e.ResponsiveSized(e.sp[2],13)},g={businessText:new e.ResponsiveSizedStyle("extraSmallRegular","largeRegular"),promoBusinessText:new e.ResponsiveSizedStyle("tinyLight","tinyLight")},$=({cardText:t,shouldAnimate:d,showChip:l,forDashboard:a,forListPage:r,cardPromoType:c,style:h})=>{const n=e.useWindowSizeContext();return i.jsxRuntimeExports.jsxs(C,{cardPromoType:c,windowSize:n,shouldAnimate:d,forListPage:r,forDashboard:a,style:h,children:[l&&i.jsxRuntimeExports.jsx(S,{windowSize:n,forDashboard:a,children:i.jsxRuntimeExports.jsx(e.SvgChip,{})}),i.jsxRuntimeExports.jsx(b,{windowSize:n,forDashboard:a,forListPage:r,children:i.jsxRuntimeExports.jsx(e.SvgZeniIconOnly,{})}),i.jsxRuntimeExports.jsx(x,{windowSize:n,forDashboard:a,forListPage:r,children:t}),i.jsxRuntimeExports.jsx(u,{windowSize:n,forDashboard:a,forListPage:r,children:i.jsxRuntimeExports.jsx(e.SvgVisa,{})})]})},w=({cardText:t,shouldAnimate:d,showChip:l,forDashboard:a,forListPage:r,cardPromoType:c,style:h})=>{const n=e.useWindowSizeContext();return i.jsxRuntimeExports.jsxs(R,{cardPromoType:c,windowSize:n,shouldAnimate:d,forListPage:r,forDashboard:a,style:h,children:[l&&i.jsxRuntimeExports.jsx(S,{windowSize:n,forDashboard:a,children:i.jsxRuntimeExports.jsx(e.SvgChip,{})}),i.jsxRuntimeExports.jsx(f,{windowSize:n,forDashboard:a,forListPage:r,children:i.jsxRuntimeExports.jsx(e.SvgZeniLogoNoColorFull,{})}),i.jsxRuntimeExports.jsx(x,{windowSize:n,forDashboard:a,forListPage:r,children:t}),i.jsxRuntimeExports.jsx(u,{windowSize:n,forDashboard:a,forListPage:r,children:i.jsxRuntimeExports.jsx(e.SvgVisa,{})})]})},m=s.keyframes`
+   0%{
+    transform: rotate(12.4deg);
+    translate: ${e.Space.sp0} ${e.Space.sp0};
+  }
+  14.25%{
+    transform: rotate(12.4deg);
+    translate: ${e.Space.sp0} ${e.Space.sp0};
+  }
+  35.75%{
+    transform: rotate(6.004deg);
+    translate: 20px ${e.Space.sp0};
+  }
+  64.25%{
+    transform: rotate(6.004deg);
+    translate: 20px ${e.Space.sp0};
+  }
+  85.75%{
+    transform: rotate(12.4deg);
+    translate: ${e.Space.sp0} ${e.Space.sp0};
+  }
+  100%{
+    transform: rotate(12.4deg);
+    translate: ${e.Space.sp0} ${e.Space.sp0};
+  }
+`,v=s.keyframes`
+   0%{
+    transform: rotate(12.4deg);
+    translate: ${e.Space.sp0} ${e.Space.sp0};
+  }
+  14.25%{
+    transform: rotate(12.4deg);
+    translate: ${e.Space.sp0} ${e.Space.sp0};
+  }
+  35.75%{
+    transform: rotate(6.004deg);
+    translate: ${e.Space.sp11} ${e.Space.sp0};
+  }
+  64.25%{
+    transform: rotate(6.004deg);
+    translate: ${e.Space.sp11} ${e.Space.sp0};
+  }
+  85.75%{
+    transform: rotate(12.4deg);
+    translate: ${e.Space.sp0} ${e.Space.sp0};
+  }
+  100%{
+    transform: rotate(12.4deg);
+    translate: ${e.Space.sp0} ${e.Space.sp0};
+  }
+`,z=s.keyframes`
+  0%{
+    transform: rotate(0);
+    transform-origin: top left;
+    box-shadow: 2px ${e.Space.sp1} ${e.Space.sp3} ${e.Space.sp0} ${e.Colors.chargeCardBoxShadow2};
+  }
+  14.25%{
+    transform: rotate(0);
+    transform-origin: top left;
+    box-shadow: 2px ${e.Space.sp1} ${e.Space.sp3} ${e.Space.sp0} ${e.Colors.chargeCardBoxShadow2};
+  }
+  35.75%{
+    transform: rotate(-5.31deg);
+    transform-origin: top left;
+    box-shadow: 12px 12px ${e.Space.sp5} ${e.Space.sp0} ${e.Colors.chargeCardBoxShadow2};
+  }
+  64.25%{
+    transform: rotate(-5.31deg);
+    transform-origin: top left;
+    box-shadow: 12px 12px ${e.Space.sp5} ${e.Space.sp0} ${e.Colors.chargeCardBoxShadow2};
+  }
+  85.75%{
+    transform: rotate(0);
+    transform-origin: top left;
+    box-shadow: 2px ${e.Space.sp1} ${e.Space.sp3} ${e.Space.sp0} ${e.Colors.chargeCardBoxShadow2};
+  }
+  100%{
+    transform: rotate(0);
+    transform-origin: top left;
+    box-shadow: 2px ${e.Space.sp1} ${e.Space.sp3} ${e.Space.sp0} ${e.Colors.chargeCardBoxShadow2};
+  }
+`,b=p.div`
+  color: ${t=>t.theme.colors.brandColorJade};
+  width: ${t=>o.styledLogoWidth.valuePx(t.windowSize)};
+  height: ${t=>o.styledLogoHeight.valuePx(t.windowSize)};
+  ${t=>t.forDashboard?s.css`
+          width: 38px;
+          height: 38px;
+        `:null}
+  ${t=>t.forListPage?s.css`
+          width: 28px;
+          height: 28px;
+        `:null}
+`,x=p.div`
+  color: ${e.Colors.neutralGrey5Light};
+  text-align: right;
+  ${t=>`${g.businessText.style(t.windowSize)}`};
+  text-transform: capitalize;
+  position: absolute;
+  right: ${t=>o.businessTextRight.valuePx(t.windowSize)};
+  bottom: ${t=>o.businessTextBottom.valuePx(t.windowSize)};
+  ${t=>t.forDashboard?s.css`
+          top: 61px;
+          ${g.promoBusinessText.style(t.windowSize)};
+          right: 6px;
+        `:null}
+  ${t=>t.forListPage?s.css`
+          top: 53px;
+          left: 95px;
+          ${g.promoBusinessText.style(t.windowSize)};
+        `:null}
+`,S=p.div`
+  position: absolute;
+  left: 11%;
+  bottom: 50%;
+  width: ${t=>o.chipLogoWidth.valuePx(t.windowSize)};
+  height: ${t=>o.chipLogoHeight.valuePx(t.windowSize)};
+  ${t=>t.forDashboard?s.css`
+          width: 20px;
+          height: ${e.Space.sp3};
+        `:null}
+`,u=p.div`
+  width: ${t=>o.visaLogoWidth.valuePx(t.windowSize)};
+  height: ${t=>o.visaLogoHeight.valuePx(t.windowSize)};
+  position: absolute;
+  right: ${t=>o.visaLogoRight.valuePx(t.windowSize)};
+  bottom: ${t=>o.visaLogoBottom.valuePx(t.windowSize)};
+  ${t=>t.forDashboard?s.css`
+          width: 41px;
+          height: 14px;
+          bottom: ${e.Space.sp2};
+          right: 6px;
+        `:null}
+  ${t=>t.forListPage?s.css`
+          width: ${e.Space.sp5};
+          height: 10px;
+          bottom: ${e.Space.sp1};
+        `:null}
+`,f=p.div`
+  position: absolute;
+  right: ${t=>o.styledFullLogoRight.valuePx(t.windowSize)};
+  top: ${t=>o.styledFullLogoTop.valuePx(t.windowSize)};
+  height: ${t=>o.styledFullLogoHeight.valuePx(t.windowSize)};
+  width: ${t=>o.styledFullLogoWidth.valuePx(t.windowSize)};
+  color: ${e.Colors.neutralGrey5Light};
+  ${t=>t.forDashboard?s.css`
+          width: 70px;
+          height: ${e.Space.sp3};
+          top: 14px;
+          right: 6px;
+        `:null}
+  ${t=>t.forListPage?s.css`
+          width: ${e.Space.sp7};
+          height: 12px;
+          top: 11px;
+        `:null}
+`,C=p.div`
+  width: ${t=>o.chargeCardWidth.valuePx(t.windowSize)};
+  height: ${t=>o.chargeCardHeight.valuePx(t.windowSize)};
+  background: ${t=>t.cardPromoType==="debit"?t.theme.colors.brandColorOnyx:t.theme.colors.brandColorSapphire};
+  border-radius: ${e.Space.sp2};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-repeat: no-repeat;
+  background-image: url(https://storage.googleapis.com/zeni-apis.appspot.com/images/MetalCardPattern.svg);
+  transition-timing-function: ease-in-out;
+  border: 1px solid ${e.Colors.neutralGrey5Light};
+  background-position: center;
+  background-size: cover;
+  box-shadow: ${t=>` ${e.Space.sp0} ${e.Space.sp0} ${e.Space.sp6} ${e.Space.sp0} ${t.theme.colors.dropShadowNormal}`};
+  ${t=>t.shouldAnimate?s.css`
+          animation: ${z} 2800ms infinite;
+          z-index: 1;
+        `:null}
+  ${t=>t.forDashboard?s.css`
+          width: 190px;
+          height: 121px;
+        `:null}
+    ${t=>t.forListPage?s.css`
+          width: 144px;
+          height: 91px;
+          border-radius: 3px;
+          border-width: 0.1px;
+        `:null}
+`,R=p.div`
+  width: ${t=>o.chargeCardWidth.valuePx(t.windowSize)};
+  height: ${t=>o.chargeCardHeight.valuePx(t.windowSize)};
+  background: ${t=>t.cardPromoType==="debit"?t.theme.colors.brandColorJadeDark:t.theme.colors.brandColorJade};
+  border-radius: ${e.Space.sp2};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-repeat: no-repeat;
+  background-position-y: bottom;
+  box-shadow: ${t=>` ${e.Space.sp0} ${e.Space.sp0} ${e.Space.sp6} ${e.Space.sp0} ${t.theme.colors.dropShadowNormal}`};
+  transition-timing-function: ease-in-out;
+  border: 1px solid ${e.Colors.neutralGrey5Light};
+  background-image: url(https://storage.googleapis.com/zeni-apis.appspot.com/images/PhysicalCardFrontBGPattern.svg);
+  background-size: cover;
+  ${t=>{if(t.shouldAnimate){const d=t.windowSize==="small"?m:v;return s.css`
+        position: absolute;
+        margin-left: ${o.plasticCardMarginLeft.valuePx(t.windowSize)};
+        margin-top: ${o.plasticCardMarginTop.valuePx(t.windowSize)};
+        transform: rotate(10.4deg);
+        animation: ${d} 2800ms infinite;
+      `}return null}}
+  ${t=>t.forDashboard?s.css`
+          width: 190px;
+          height: 121px;
+        `:null}
+  ${t=>t.forListPage?s.css`
+          width: 144px;
+          height: 91px;
+          border-radius: 3px;
+          border-width: 0.1px;
+        `:null}
+`;exports.MetalBaseCard=$;exports.PlasticBaseCard=w;