@zeniai/web-components 3.16.53 → 3.16.55

package/dist/PortfolioDetails-DqkKO361.cjs

@@ -0,0 +1,218 @@
+"use strict";const e=require("./vendor-.pnpm-BW93Fnli.cjs"),q=require("react"),s=require("@emotion/styled"),t=require("./index-DWk0ezoc.cjs"),O=require("./treasuryColorHelper-DeuFLe5I.cjs"),{common:l,spendManagement:{treasury:r},dateFormat:_}=t.appLocale.getLocalizedStrings(),g={portfolioYieldMarginTop:new t.ResponsiveSized(-t.sp[1],t.sp[0]),sliderWidth:new t.ResponsiveSized(143,177)},U=({isInReview:o,isSetup:i,fundDetails:m,allocation:x,amount:u,fundAllocations:y,page:f})=>{const a=V(m);return e.jsxRuntimeExports.jsxs(K,{children:[!i&&e.jsxRuntimeExports.jsx(J,{style:{alignSelf:"flex-start",padding:`${t.Space.sp2} ${t.Space.sp0}`},children:`${r.portfolioAllocation.title}`}),a.map((R,d)=>{const Y=y?.find(T=>T.fundCode===m[d].fundCode)?.amount;return e.jsxRuntimeExports.jsx(H,{portfolio:R,fund:m[d],fundIndex:d,allocationPercentage:x.allocation?.[m[d].fundCode]||0,isInReview:o,isSetup:i,isLast:d===a.length-1,amount:u,currentAllocationAmount:Y,page:f},m[d]?.fundCode||d)})]})},V=o=>o.map(i=>[{label:r.promoPage.liquidity,value:i.liquidityTimeline||l.strings.hyphen},{label:r.promoPage.fundSize,value:t.currencyAmountCompactFormatter(i.fundSize,i.currencyCode)},{label:r.promoPage.maturity,value:`${i.maturity} ${l.timeStrings.days}`},{label:r.promoPage.expenseRatio,value:`${i.expenseRatio}${r.promoPage.expenseRatioSuffix}`},{label:r.promoPage.riskRating,value:i.riskRating||l.strings.hyphen},{label:r.promoPage.composition,value:Array.isArray(i.compositions)&&i.compositions.length>0?`${i.compositions[0].investedIn} ${i.compositions[0].percentage}${l.strings.percentage}`:l.strings.hyphen,tag:Array.isArray(i.compositions)&&i.compositions.length>1?`+${i.compositions.length-1}`:void 0,compositions:i.compositions??[]}]),H=({portfolio:o,fund:i,fundIndex:m,allocationPercentage:x,isInReview:u,isSetup:y,isLast:f,amount:a,currentAllocationAmount:R,page:d})=>{const T=t.useToolkitContext().analytics,k=e.useTheme(),n=t.useWindowSizeContext(),S=R?R.amount:a!=null&&a.amount>0&&x>0?a.amount*x/100:void 0,[p,F]=q.useState(!1),j=O.getFundColorsByIndex(m,k),v=()=>{p||T.trackTreasuryProspectusClick(i.fundName,i.fundCode,d),F(c=>!c)};return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(G,{children:e.jsxRuntimeExports.jsxs(X,{windowSize:n,children:[e.jsxRuntimeExports.jsxs(Q,{windowSize:n,children:[e.jsxRuntimeExports.jsxs(Z,{windowSize:n,children:[e.jsxRuntimeExports.jsxs(ee,{isInReview:u,windowSize:n,children:[e.jsxRuntimeExports.jsx(te,{children:i.fundCode}),e.jsxRuntimeExports.jsx(oe,{color:j.fundNameColor,children:`${i.fundCompanyName} ${i.fundName}`})]}),n!=="small"&&e.jsxRuntimeExports.jsxs($,{onClick:v,children:[p?r.transferDrawer.calculator.footerText.hide:r.overviewPage.fundTile.viewDetails,p?e.jsxRuntimeExports.jsx(P,{}):e.jsxRuntimeExports.jsx(b,{})]})]}),n!=="small"&&e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:u?e.jsxRuntimeExports.jsxs(L,{style:{alignItems:"flex-start"},children:[e.jsxRuntimeExports.jsxs(h,{windowSize:n,children:[x,l.strings.percentage]}),e.jsxRuntimeExports.jsx(B,{children:S!=null?t.amountToString("0,0.[00]",{amount:S,currencyCode:a?.currencyCode!=null&&a.currencyCode!==""?a.currencyCode:"USD",currencySymbol:a?.currencySymbol!=null&&a.currencySymbol!==""?a.currencySymbol:"$"}):l.strings.empty})]}):e.jsxRuntimeExports.jsxs(ie,{children:[e.jsxRuntimeExports.jsxs(h,{windowSize:n,children:[x,l.strings.percentage]}),e.jsxRuntimeExports.jsxs(A,{children:[e.jsxRuntimeExports.jsx(I,{type:"range",min:0,max:100,step:1,value:x,readOnly:!0,windowSize:n}),e.jsxRuntimeExports.jsx(M,{color:j.fundNameColor,style:{width:`calc(${g.sliderWidth.value(n)}/100*${x}px)`,zIndex:1}})]})]})}),n!=="small"&&e.jsxRuntimeExports.jsxs(L,{children:[e.jsxRuntimeExports.jsxs(E,{children:[r.overviewPage.sevenDayYield,e.jsxRuntimeExports.jsx(t.Tooltip,{data:r.overviewPage.fundTile.sevenDayYieldTooltip,variant:"small-description",placement:"bottom-end",style:{minWidth:"496px",padding:`12px ${t.Space.sp3}`},enterDelay:300,children:e.jsxRuntimeExports.jsx(D,{})})]}),e.jsxRuntimeExports.jsxs(w,{windowSize:n,style:{marginRight:t.Space.sp3},children:[i.yield,l.strings.percentage]})]})]}),n==="small"&&e.jsxRuntimeExports.jsx(de,{children:y?e.jsxRuntimeExports.jsxs(je,{children:[e.jsxRuntimeExports.jsxs(he,{children:[e.jsxRuntimeExports.jsxs(ye,{children:[e.jsxRuntimeExports.jsxs(h,{windowSize:n,children:[x,l.strings.percentage]}),e.jsxRuntimeExports.jsxs(A,{children:[e.jsxRuntimeExports.jsx(I,{type:"range",min:0,max:100,step:1,value:x,readOnly:!0,windowSize:n}),e.jsxRuntimeExports.jsx(M,{color:j.fundNameColor,style:{width:`calc(${g.sliderWidth.value(n)}/100*${x}px)`,zIndex:1}})]})]}),e.jsxRuntimeExports.jsxs(ge,{children:[e.jsxRuntimeExports.jsxs(E,{children:[r.overviewPage.sevenDayYield,e.jsxRuntimeExports.jsx(t.Tooltip,{data:r.overviewPage.fundTile.sevenDayYieldTooltip,variant:"small-description",placement:"bottom-end",style:{padding:`12px ${t.Space.sp3}`},enterDelay:300,children:e.jsxRuntimeExports.jsx(D,{})})]}),e.jsxRuntimeExports.jsxs(w,{windowSize:n,children:[i.yield,l.strings.percentage]})]})]}),e.jsxRuntimeExports.jsxs($,{onClick:v,style:{marginBottom:t.Space.sp2},children:[p?r.transferDrawer.calculator.footerText.hide:r.overviewPage.fundTile.viewDetails,p?e.jsxRuntimeExports.jsx(P,{}):e.jsxRuntimeExports.jsx(b,{})]})]}):u?e.jsxRuntimeExports.jsxs(me,{children:[e.jsxRuntimeExports.jsxs(W,{children:[e.jsxRuntimeExports.jsxs(h,{windowSize:n,children:[x,l.strings.percentage]}),e.jsxRuntimeExports.jsx(B,{children:S!=null?t.amountToString("0,0.[00]",{amount:S,currencyCode:a?.currencyCode!=null&&a.currencyCode!==""?a.currencyCode:"USD",currencySymbol:a?.currencySymbol!=null&&a.currencySymbol!==""?a.currencySymbol:"$"}):l.strings.empty}),e.jsxRuntimeExports.jsxs($,{onClick:v,style:{margin:`${t.Space.sp2} ${t.Space.sp0}`,...f?{marginBottom:t.Space.sp0}:{}},children:[p?r.transferDrawer.calculator.footerText.hide:r.overviewPage.fundTile.viewDetails,p?e.jsxRuntimeExports.jsx(P,{}):e.jsxRuntimeExports.jsx(b,{})]})]}),e.jsxRuntimeExports.jsxs(N,{children:[e.jsxRuntimeExports.jsxs(E,{children:[r.overviewPage.sevenDayYield,e.jsxRuntimeExports.jsx(t.Tooltip,{data:r.overviewPage.fundTile.sevenDayYieldTooltip,variant:"small-description",placement:"bottom-end",style:{padding:`12px ${t.Space.sp3}`},enterDelay:300,children:e.jsxRuntimeExports.jsx(D,{})})]}),e.jsxRuntimeExports.jsxs(w,{windowSize:n,children:[i.yield,l.strings.percentage]})]})]}):e.jsxRuntimeExports.jsxs(ue,{children:[e.jsxRuntimeExports.jsxs(W,{children:[e.jsxRuntimeExports.jsxs(h,{windowSize:n,children:[x,l.strings.percentage]}),e.jsxRuntimeExports.jsxs(A,{children:[e.jsxRuntimeExports.jsx(I,{type:"range",min:0,max:100,step:1,value:x,readOnly:!0,windowSize:n}),e.jsxRuntimeExports.jsx(M,{color:j.fundNameColor,style:{width:`calc(${g.sliderWidth.value(n)}/100*${x}px)`,zIndex:1}})]}),e.jsxRuntimeExports.jsxs($,{onClick:v,children:[p?r.transferDrawer.calculator.footerText.hide:r.overviewPage.fundTile.viewDetails,p?e.jsxRuntimeExports.jsx(P,{}):e.jsxRuntimeExports.jsx(b,{})]})]}),e.jsxRuntimeExports.jsxs(N,{children:[e.jsxRuntimeExports.jsxs(E,{children:[r.overviewPage.sevenDayYield,e.jsxRuntimeExports.jsx(t.Tooltip,{data:r.overviewPage.fundTile.sevenDayYieldTooltip,variant:"small-description",placement:"bottom-end",style:{padding:`12px ${t.Space.sp3}`},enterDelay:300,children:e.jsxRuntimeExports.jsx(D,{})})]}),e.jsxRuntimeExports.jsxs(w,{windowSize:n,children:[i.yield,l.strings.percentage]})]})]})})]},o[0].label)}),p&&e.jsxRuntimeExports.jsxs(ne,{children:[e.jsxRuntimeExports.jsx(C,{children:i.description}),e.jsxRuntimeExports.jsx(re,{style:{marginLeft:t.Space.sp3},children:o.map(c=>e.jsxRuntimeExports.jsxs(le,{windowSize:n,children:[e.jsxRuntimeExports.jsx(C,{children:l.strings.dividerDot}),e.jsxRuntimeExports.jsx(C,{style:{minWidth:"140px"},children:c.label}),e.jsxRuntimeExports.jsxs(C,{style:{color:c.label===r.promoPage.fundSize?j.fundNameColor:k.colors.primary,borderBottom:`1px solid ${k.colors.grey3}`,width:"100%",padding:`${t.Space.sp1} ${t.Space.sp0}`,display:"flex",flexDirection:"row",alignItems:"center",gap:t.Space.sp2},children:[c.value,!!c.tag&&c.label===r.promoPage.composition&&e.jsxRuntimeExports.jsx(t.Tooltip,{variant:"list-description",data:{title:l.strings.empty,items:Array.isArray(c.compositions)&&c.compositions.length>0?c.compositions.map(z=>({text:`${l.strings.dividerDot}  ${z.investedIn}`,amount:`${z.percentage}${l.strings.percentage}`})):[]},placement:"bottom-end",style:{minWidth:"312px",padding:`12px ${t.Space.sp3}`},children:e.jsxRuntimeExports.jsx(ae,{children:c.tag})})]})]},c.label))}),e.jsxRuntimeExports.jsxs(ce,{onClick:()=>window.open(i.url,"_blank"),children:[e.jsxRuntimeExports.jsx(se,{children:`${r.promoPage.asOf} ${i.asOfDate.format(_.visual.MMMDCommaYYYYformat)}`}),e.jsxRuntimeExports.jsx(xe,{})]})]}),(!f||y)&&e.jsxRuntimeExports.jsx(pe,{style:{width:"100%",marginBottom:t.Space.sp3}})]})},G=s.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${t.Space.sp2};
+  width: 100%;
+`,J=s(t.StandardRegular)`
+  color: ${o=>o.theme.colors.hero};
+`,K=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+`,Q=s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  align-items: flex-start;
+`,X=s.div`
+  display: flex;
+  flex-direction: ${o=>o.windowSize==="small"?"column":"row"};
+  width: 100%;
+  margin-bottom: ${t.Space.sp2};
+`,Z=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: ${o=>o.windowSize==="small"?"auto":"245px"};
+`,ee=s(t.StandardMedium)`
+  color: ${t.Colors.graphColor34Dark};
+  max-width: 280px;
+`,te=s.span`
+  color: ${o=>o.theme.colors.primary};
+  margin-right: ${t.Space.sp1};
+`,oe=s.span`
+  color: ${o=>o.color??t.Colors.graphColor34Dark};
+`,L=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  width: 129px;
+`,h=s(t.LargeSemiBold)`
+  color: ${o=>o.theme.colors.primary};
+  min-width: ${t.Space.sp7};
+  text-align: left;
+`,w=s(t.StandardMedium)`
+  color: ${t.Colors.success};
+  margin-top: ${o=>g.portfolioYieldMarginTop.valuePx(o.windowSize)};
+`,E=s(t.SmallRegular)`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: ${t.Space.sp1};
+  color: ${o=>o.theme.colors.hero};
+`,se=s(t.ExtraSmallRegular)`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: ${t.Space.sp1};
+`,B=s(t.SmallRegular)`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: ${t.Space.sp1};
+  color: ${o=>o.theme.colors.primary};
+`,ie=s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${t.Space.sp2};
+  width: 240px;
+`,A=s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+  flex: 1;
+`,re=s.div``,I=s.input`
+  width: ${({windowSize:o})=>g.sliderWidth.valuePx(o)};
+  cursor: default;
+  pointer-events: none;
+
+  &[type="range"]::-webkit-slider-runnable-track {
+    height: 2px;
+    background-color: ${o=>o.theme.colors.grey3};
+  }
+
+  &[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  &[type="range"]::-webkit-slider-thumb {
+    visibility: hidden;
+  }
+`,M=s.div`
+  position: absolute;
+  height: 2px;
+  background-color: ${o=>o.color??t.Colors.graphColor34Dark};
+`,$=s(t.SmallRegular)`
+  color: ${o=>o.theme.colors.hero};
+  align-self: flex-start;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${t.Space.sp1};
+  cursor: pointer;
+`,b=s(t.SvgArrowRight)`
+  width: 12px;
+  height: 12px;
+  color: ${o=>o.theme.colors.hero};
+`,ne=s.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-self: flex-start;
+  gap: ${t.Space.sp2};
+  margin-bottom: ${t.Space.sp3};
+`,C=s(t.StandardRegular)`
+  color: ${o=>o.theme.colors.hero};
+`,le=s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${o=>o.windowSize==="small"?t.Space.sp1:t.Space.sp2};
+`,ae=s(t.ExtraSmallRegularSp)`
+  color: ${o=>o.theme.colors.hero};
+  padding: 1px 6px;
+  border: 1px solid ${o=>o.theme.colors.grey2};
+  border-radius: ${t.Space.sp1};
+`,xe=s(t.SvgOpenLink)`
+  width: 12px;
+  height: 12px;
+`,ce=s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: ${t.Space.sp2};
+  width: fit-content;
+  cursor: pointer;
+  color: ${o=>o.theme.colors.hero};
+
+  &:hover {
+    color: ${o=>o.theme.colors.primary};
+    text-decoration: underline;
+  }
+`,P=s(t.SvgArrowBottom)`
+  cursor: pointer;
+  width: 12px;
+  height: 12px;
+  min-width: 12px;
+  min-height: 12px;
+  color: ${o=>o.theme.colors.hero};
+`,pe=s.div`
+  display: flex;
+  flex: 1;
+  background-color: ${o=>o.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`,D=s(t.SvgInfo)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  color: ${o=>o.theme.colors.hero};
+  margin-bottom: -3px;
+  cursor: pointer;
+  :hover {
+    color: ${o=>o.theme.colors.primary};
+  }
+`,de=s.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+  margin-top: ${t.Space.sp2};
+`,me=s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
+`,ue=s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`,W=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+`,N=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`,je=s.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: ${t.Space.sp2};
+`,he=s.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  gap: ${t.Space.sp2};
+  justify-content: space-between;
+`,ge=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`,ye=s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${t.Space.sp3};
+`;exports.PortfolioAllocationDetails=U;

package/dist/ProductsCarousel-Cc7YoRAm.cjs

@@ -0,0 +1,142 @@
+"use strict";const o=require("./vendor-.pnpm-BW93Fnli.cjs"),t=require("./index-DWk0ezoc.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/ProductsCarousel-n8JigLY0.js

@@ -0,0 +1,309 @@
+import { j as t } from "./vendor-.pnpm-Q8NJHkXi.js";
+import { a as E, fZ as N, V as W, p as I, S as l, aI as B, C, dB as V, F, J, D as U } from "./index-Dc_o2gSy.js";
+import { useState as S, useCallback as Z, useEffect as G } from "react";
+import o from "@emotion/styled";
+const h = E.getLocalizedStrings(), w = {
+  large: {
+    labelComp: N,
+    title: W,
+    subtitle: I,
+    seeMoreLink: I
+  }
+}, 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(B)`
+  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, O = 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(F)`
+  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 = V().analytics, R = de * me * s / 2, L = he * s + R + pe / 2, f = Z(
+    (r) => {
+      v || (j(!0), a((x) => (x + r + b) % b), setTimeout(() => j(!1), 1e3));
+    },
+    [v, b]
+  );
+  G(() => {
+    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, P = (r) => {
+    const y = Array.from(
+      { length: O },
+      (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: O },
+        (ke, H) => _(H)
+      ).indexOf(x);
+      if (p === -1)
+        return null;
+      const { positionX: y, scale: T } = k[p], $ = p === u, X = T * s, D = y * s, M = 1.02 * s;
+      return /* @__PURE__ */ t.jsx(
+        $e,
+        {
+          isForeFront: $,
+          positionX: D,
+          scale: X,
+          hoverScale: M,
+          onClick: () => P(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
+};