@zeniai/web-components 3.16.40 → 3.16.41

package/dist/ChargeCardDetailPage-TcjYQzEG.cjs

@@ -0,0 +1,1813 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./vendor-.pnpm-DHyNpoQL.cjs"),i=require("react"),s=require("@emotion/styled"),st=require("@zeniai/client-epic-state"),t=require("./index-DiGCN0Sk.cjs"),Gs=require("./MoreMenuButton-DQdfwfDW.cjs"),W=require("@emotion/react"),Us=require("./NavigationDots-D9zZX4Wm.cjs"),we=require("./ChargeCardUtils-D1gopq8F.cjs"),De=require("./add-to-wallet-BjCX6PYO.cjs"),Jo=require("./spend-limit-K8ydp2My.cjs"),qs=require("./CardNumberSubText-B1OrE3CT.cjs"),ho=require("./common-Cg5QFlS0.cjs"),Xo=require("react-dom"),Qo=require("./uploadReceipts-CkrY2t46.cjs"),xt=require("./LockCardPage-Cvw_IcbC.cjs");function Ds(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const c=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,c.get?c:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const C=Ds(i),Vo=t.appLocale.getLocalizedStrings().spendManagement.chargeCard,Ys=({controllerEmails:e,classListFetchState:n,isChargeCardFeatureEnabled:a,isDebitCardFeatureEnabled:c,isDebitCardSetupEnabled:d,isChargeCardSetupEnabled:h,chargeCardDetailView:l,productInformation:m,creditAccountInformation:u,debitAccountInformation:S,creditAccount:f,creditAccountRepayment:r,cardIssuedByRoles:x,cardIssuedByDepartmentName:g,cardHolderRoles:w,cardHolderDepartmentName:y,appleWalletLink:v,googleWalletLink:b,style:p,showDrawerAnimation:P,setWalletType:j,setIsAddToWalletDrawerOpen:z,isDebitCard:H})=>{const N=t.useToolkitContext().analytics,{isIPadScreen:X}=t.useIPadDeviceDetect(),{isAndroidScreen:U}=t.useAndroidDeviceDetect(),T=t.useGlobalInfoContext(),K=st.hasChargeCardAdminLevelAccess(T.loggedInUserRoleMap);return o.jsxRuntimeExports.jsx(Ks,{style:p,children:X===!0?o.jsxRuntimeExports.jsx(It,{onClick:()=>{we.fireCardsAddToWalletClick({chargeCardDetailView:l,classListFetchState:n,analytics:N,isDebitCard:H,isChargeCardAdmin:K,cardIssuedByRoles:x,cardIssuedByDepartmentName:g,cardHolderRoles:w,cardHolderDepartmentName:y,controllerEmails:e,pageName:"Card Detail",addToWalletType:"Add to Apple Wallet",productInformation:m,creditAccountInformation:u,debitAccountInformation:S,isChargeCardFeatureEnabled:a,creditAccount:f,creditAccountRepayment:r}),window.open(v,"_blank")}}):U===!0?o.jsxRuntimeExports.jsx(Mt,{onClick:()=>{we.fireCardsAddToWalletClick({chargeCardDetailView:l,classListFetchState:n,analytics:N,isDebitCard:H,isChargeCardAdmin:K,cardIssuedByRoles:x,cardIssuedByDepartmentName:g,cardHolderRoles:w,cardHolderDepartmentName:y,controllerEmails:e,pageName:"Card Detail",addToWalletType:"Add to Google Wallet",productInformation:m,creditAccountInformation:u,debitAccountInformation:S,isChargeCardFeatureEnabled:a,creditAccount:f,creditAccountRepayment:r}),window.open(b,"_blank")}}):o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(It,{onClick:()=>{j("apple"),P.current="slide-in-right-to-left-add-to-wallet",we.fireCardsAddToWalletClick({chargeCardDetailView:l,classListFetchState:n,analytics:N,isDebitCard:H,isChargeCardAdmin:K,cardIssuedByRoles:x,cardIssuedByDepartmentName:g,cardHolderRoles:w,cardHolderDepartmentName:y,controllerEmails:e,pageName:"Card Detail",addToWalletType:"Add to Apple Wallet",isChargeCardFeatureEnabled:a,productInformation:m,creditAccountInformation:u,debitAccountInformation:S,creditAccount:f,creditAccountRepayment:r}),z(!0)}}),o.jsxRuntimeExports.jsx(Mt,{onClick:()=>{j("google"),P.current="slide-in-right-to-left-add-to-wallet",we.fireCardsAddToWalletClick({chargeCardDetailView:l,classListFetchState:n,analytics:N,isDebitCard:H,isChargeCardAdmin:K,cardIssuedByRoles:x,cardIssuedByDepartmentName:g,cardHolderRoles:w,cardHolderDepartmentName:y,controllerEmails:e,pageName:"Card Detail",addToWalletType:"Add to Google Wallet",isChargeCardFeatureEnabled:a,productInformation:m,creditAccountInformation:u,debitAccountInformation:S,creditAccount:f,creditAccountRepayment:r}),z(!0)}})]})})},Mt=({onClick:e})=>{const n=o.useTheme();return o.jsxRuntimeExports.jsx(t.Button,{prefixIcon:o.jsxRuntimeExports.jsx(Js,{}),label:Vo.cardDetails.addToGoogleWallet,buttonColors:{borderColor:{default:n.colors.grey1,hover:n.colors.primary,disabled:n.colors.primary},backgroundColor:{default:n.colors.grey5,hover:n.colors.grey5,disabled:n.colors.grey5},textColor:{default:n.colors.primary,hover:n.colors.primary,disabled:n.colors.grey5}},textStyle:{color:n.colors.primary},style:{width:"239px",justifyContent:"center"},onClick:e,"data-testid":t.generateDataTestId("add-to-google-wallet-button")})},It=({onClick:e})=>{const n=o.useTheme();return o.jsxRuntimeExports.jsx(t.Button,{prefixIcon:o.jsxRuntimeExports.jsx(Xs,{}),label:Vo.cardDetails.addToAppleWallet,buttonColors:{borderColor:{default:n.colors.grey1,hover:n.colors.primary,disabled:n.colors.primary},backgroundColor:{default:n.colors.grey5,hover:n.colors.grey5,disabled:n.colors.grey5},textColor:{default:n.colors.primary,hover:n.colors.primary,disabled:n.colors.grey5}},textStyle:{color:n.colors.primary},style:{width:"239px",justifyContent:"center"},onClick:e,"data-testid":t.generateDataTestId("add-to-apple-wallet-button")})},Ks=s.div`
+  margin-top: ${t.Space.sp4};
+  display: flex;
+  justify-content: center;
+  gap: ${t.Space.sp5};
+`,Js=s(De.SvgGoogleWallet)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp5};
+`,Xs=s(De.SvgAppleWallet)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp5};
+`,Qs=[t.Colors.brandColorSapphire,t.Colors.brandColorJade,t.Colors.graphColor01,t.Colors.graphColor08,t.Colors.graphColor12,t.Colors.graphColor15,t.Colors.graphColor16Dark,t.Colors.graphColor23Dark,t.Colors.graphColor32Dark,t.Colors.graphColor34Dark,t.Colors.brandColorOpalDark,t.Colors.brandColorRuby],Vs=t.appLocale.getLocalizedStrings().spendManagement.chargeCard,en=({isColorPaletteVisible:e,hasBorderShadow:n,leftTransitionValue:a,colorInState:c,styles:d,colorPaletteTitleStyles:h,ColorListStyles:l,coloredCircleStyles:m,closeStyles:u,tickStyles:S,toggleColorPaletteVisibility:f,handleColorClick:r})=>o.jsxRuntimeExports.jsxs(tn,{showColorPalette:e,style:d,hasBorderShadow:n,leftTransitionValue:a,children:[o.jsxRuntimeExports.jsxs(sn,{style:h,children:[o.jsxRuntimeExports.jsx(nn,{children:Vs.cardDetails.cardTheme}),o.jsxRuntimeExports.jsx(rn,{style:u,"data-testid":t.generateDataTestId("close-color-palette"),onClick:x=>{x.stopPropagation(),f(!e)}})]}),o.jsxRuntimeExports.jsx(on,{style:l,children:Qs.map((x,g)=>o.jsxRuntimeExports.jsx(ln,{style:m,coreColor:x,onMouseEnter:()=>r(new o.Color(x),!1),onMouseLeave:()=>c!=null?r(new o.Color(c),!1):null,"data-testid":t.generateDataTestId("color-palette-item-cards",g.toString()),onClick:()=>r(new o.Color(x),!0),children:new o.Color(x).toString()===c?.toString()?o.jsxRuntimeExports.jsx(an,{style:S}):null},x))})]}),tn=s.div`
+  display: flex;
+  top: ${t.Space.sp1};
+  max-width: 78%;
+  left: ${e=>e.showColorPalette?e.hasBorderShadow?t.Space.sp1:t.Space.sp0:`${e.leftTransitionValue}px`};
+  transition: left 0.3s ease-in;
+  flex-direction: column;
+  background: ${t.Colors.neutralGrey5Light};
+  border-top-left-radius: ${t.Space.sp1};
+  border-bottom-left-radius: ${t.Space.sp1};
+  position: absolute;
+  height: ${`calc(100% - ${t.Space.sp2})`};
+  z-index: 1;
+`,on=s.div`
+  display: flex;
+  flex-wrap: wrap;
+  padding: ${t.Space.sp0} 38px ${t.Space.sp0} 31px;
+`,sn=s.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${t.Space.sp5} ${t.Space.sp5} ${t.Space.sp2} ${t.Space.sp5};
+`,nn=s(t.SmallRegular)`
+  color: ${t.Colors.brandColorOnyx};
+`,rn=s(t.SvgClose)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+`,an=s(t.SvgTick)`
+  width: ${t.Space.sp3};
+  color: ${t.Colors.neutralGrey5Light};
+`,ln=s.div`
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+  display: flex;
+  background: ${e=>e.coreColor};
+  border-radius: 50%;
+  margin: ${t.Space.sp2};
+  justify-content: center;
+  align-items: center;
+`,{spendManagement:cn,common:Ue,dateFormat:dn}=t.appLocale.getLocalizedStrings(),Ze=cn.chargeCard,Ee={secretCardNumberWrapperWidth:280,secretCVVWrapperHeight:30,secretCVVWrapperWidth:t.sp[7],cardNumberCopiedSectionTop:54,cvvCopiedSectionTop:34,cvvCopiedSectionLeft:t.sp[3],maskedCardNumberMarginTop:new t.ResponsiveSized(-2,-2,-2,t.sp[0]),expiryCopySectionTop:34,cardNumberCopyBtnTop:21},go={CardInfoTitleSize:new t.ResponsiveSized(t.textStyles.extraSmallRegular.fontSizeValue,t.textStyles.smallRegular.fontSizeValue),CardInfoTitleLineHeight:new t.ResponsiveSized(18,18,18,21)},kt=e=>o.jsxRuntimeExports.jsxs(kn,{style:{...e},children:[o.jsxRuntimeExports.jsx(En,{}),o.jsxRuntimeExports.jsx(Ln,{style:{background:t.Colors.blackColor,color:t.Colors.primaryDark,padding:`2px ${t.Space.sp2}`,borderRadius:t.Space.sp1},children:Ue.copyToClipBoard.copied})]}),So=({isSandboxEnv:e,sourceId:n,showSecretInfo:a,secretRevealed:c,vgsVaultId:d,controllerEmails:h,isChargeCardFeatureEnabled:l,productInformation:m,cashbackInformation:u,creditAccountInformation:S,debitAccountInformation:f,chargeCardCashbackDetailState:r,creditAccount:x,creditAccountRepayment:g,isDebitCard:w,depositAccountLimitFetchState:y,isCardDetailErrored:v,isCardColorUpdating:b,cardDetailsFetchState:p,isCardColorUndefined:P,cardInfoTitleStyles:j,styles:z,cvvSecStyles:H,chargeCard:R,token:N,setSecretRevealed:X,setIsCardDetailErrored:U,setCardDetailsFetchState:T,onFireOnClickAnalytics:K})=>{const ee=t.useToolkitContext().analytics,[,Q]=t.useCopyToClipboard(),I=t.useWindowSizeContext(),[O,te]=i.useState(!1),[V,re]=i.useState(!1),[oe,E]=i.useState(!1),se=t.useGlobalInfoContext(),q=st.hasChargeCardAdminLevelAccess(se.loggedInUserRoleMap),[G]=t.useScript("https://js.verygoodvault.com/vgs-show/2.0.0/show.js"),$=n==="addToWalletDrawer"?.75:I==="small"?.85:1,_=e?"sandbox":"live";i.useEffect(()=>{if(G&&R!=null&&a&&N!=null&&!c){const L=window.VGSShow.create(d).setEnvironment(_),le=R.cardProviderID,ae=L.request({name:"data-text",method:"GET",path:"/cards/"+le+"/secure-data/cvv2",headers:{Authorization:"Bearer "+N},htmlWrapper:"text",jsonPathSelector:"data.attributes.cvv2"});T({cvv:!0,number:!0}),ae.render(`#SecretCvv-${n}`,{"@font-face":{"font-family":t.fonts["PT Mono"],"font-style":"normal","font-weight":t.FontWeight.regular,"font-display":"swap",src:'local("PT Mono"), local("PTMono-Regular"), url(https://fonts.gstatic.com/s/ptmono/v7/9oRONYoBnWILk-9AnCszM_HxEcn7Hg.woff2) format("woff2")'},"font-family":t.fonts["PT Mono"],opacity:.7,color:t.Colors.brandColorOnyx,fontSize:`${$*t.textStyles.h6Regular.fontSizeValue}px`,fontWeight:t.textStyles.h6Regular.fontWeight,borderRadius:t.Space.sp1,cursor:"pointer",padding:`${t.Space.sp0} ${t.Space.sp1}`,lineHeight:`${$*t.textStyles.h6Regular.lineHeightValue}px`}),ae.on("requestSuccess",()=>{X(!0),U(!1),T({...p,cvv:!1})}),ae.on("requestFail",()=>{U(!0),T({...p,cvv:!1});const J=document.getElementById(`SecretCvv-${n}`);for(;J?.hasChildNodes()===!0;)J.removeChild(J.children[0])}),L.copyFrom(ae,{text:Ue.strings.empty},J=>{J==="success"?(re(!0),K("CVV copied"),r.fetchState==="Completed"&&(!l||x.fetchState==="Completed"&&g.fetchState==="Completed")&&(!(w&&q)||y==="Completed")&&ee.trackCardsCopyIconClick(h,m,"Cards Detail","Copy","copied","CVV","",u,S,f)):re(!1)}).render(`#CvvCopyBtn-${n}`,{cursor:"pointer",height:`${$*Ee.secretCVVWrapperHeight}px`,width:`${$*Ee.secretCVVWrapperWidth}px`});const he=L.request({name:"data-text",method:"GET",path:"/cards/"+le+"/secure-data/pan",headers:{Authorization:"Bearer "+N},htmlWrapper:"text",jsonPathSelector:"data.attributes.pan",serializers:[L.SERIALIZERS.replace("(\\d{4})(\\d{4})(\\d{4})(\\d{4})","$1 $2 $3 $4")]});he.render(`#SecretCardNumber-${n}`,{"@font-face":{"font-family":t.fonts["PT Mono"],"font-style":"normal","font-weight":t.FontWeight.regular,"font-display":"swap",src:'local("PT Mono"), local("PTMono-Regular"), url(https://fonts.gstatic.com/s/ptmono/v7/9oRONYoBnWILk-9AnCszM_HxEcn7Hg.woff2) format("woff2")'},"font-family":t.fonts["PT Mono"],opacity:.7,color:t.Colors.brandColorOnyx,fontSize:`${$*t.textStyles.h6Regular.fontSizeValue}px`,fontWeight:t.textStyles.h6Regular.fontWeight,borderRadius:t.Space.sp1,cursor:"pointer",padding:`${t.Space.sp0} ${t.Space.sp1}`,lineHeight:`${$*t.textStyles.h6Regular.lineHeightValue}px`}),he.on("requestSuccess",()=>{X(!0),U(!1),T({...p,number:!1})}),he.on("requestFail",()=>{U(!0),T({...p,number:!1});const J=document.getElementById(`SecretCardNumber-${n}`);for(;J?.hasChildNodes()===!0;)J.removeChild(J.children[0])}),L.copyFrom(he,{text:Ue.strings.empty,serializers:[L.SERIALIZERS.replace(Ue.strings.space,Ue.strings.empty)]},J=>{J==="success"?(te(!0),K("card number copied"),r.fetchState==="Completed"&&(!l||x.fetchState==="Completed"&&g.fetchState==="Completed")&&(!(w&&q)||y==="Completed")&&ee.trackCardsCopyIconClick(h,m,"Cards Detail","Copy","copied","Card Number","",u,S,f)):te(!1)}).render(`#CardNumberCopyBtn-${n}`,{cursor:"pointer",height:`${$*t.textStyles.h6Regular.lineHeightValue}px`,width:`${$*Ee.secretCardNumberWrapperWidth}px`})}},[G,R,a,N,c]),i.useEffect(()=>{if(a===!1){const L=document.getElementById(`SecretCvv-${n}`);for(;L?.hasChildNodes()===!0;)L.removeChild(L.children[0]);const le=document.getElementById(`CvvCopyBtn-${n}`);for(;le?.hasChildNodes()===!0;)le.removeChild(le.children[0]);const ae=document.getElementById(`SecretCardNumber-${n}`);for(;ae?.hasChildNodes()===!0;)ae.removeChild(ae.children[0]);const F=document.getElementById(`CardNumberCopyBtn-${n}`);for(;F?.hasChildNodes()===!0;)F.removeChild(F.children[0])}},[n,a]),i.useEffect(()=>{O===!0&&setTimeout(()=>{te(!1)},800),V===!0&&setTimeout(()=>{re(!1)},800),oe===!0&&setTimeout(()=>{E(!1)},800)},[O,V,oe]);const ie=R!=null?st.dateFromYearMonthDate(R.validThru.year,R.validThru.month-1).format(dn.visual.MMSlashYYFormat):Ue.strings.empty,D=L=>{a===!0&&(p.cvv!==!0||p.number!==!0)&&(K("validity copied"),L!=null&&r.fetchState==="Completed"&&(!l||x.fetchState==="Completed"&&g.fetchState==="Completed")&&(!(w&&q)||y==="Completed")&&ee.trackCardsCopyIconClick(h,m,"Cards Detail","Copy","copied","Valid Thru",ie,u,S,f),Q(ie),E(!0))};return o.jsxRuntimeExports.jsxs(fn,{style:z,children:[o.jsxRuntimeExports.jsxs(Cn,{children:[o.jsxRuntimeExports.jsx(Lt,{style:j,windowSize:I,children:Ze.cardDetails.cardNumber}),o.jsxRuntimeExports.jsx(yn,{sourceId:n,scaleFactor:$,showSecretInfo:a&&(p.number===!1||p.cvv===!1),isCardDetailFetching:p.number===!0||p.cvv===!0||P||b,windowSize:I,children:`${Ze.cardDetails.cardNumberHideout}
+          ${R?.accountLast4??Ue.strings.empty}`}),o.jsxRuntimeExports.jsxs(pn,{secretRevealed:c,scaleFactor:$,showSecretInfo:a&&p.cvv===!1&&p.number===!1,sourceId:n,isCardDetailErrored:v,children:[o.jsxRuntimeExports.jsx(un,{sourceId:n,scaleFactor:$,secretRevealed:c,id:`SecretCardNumber-${n}`}),o.jsxRuntimeExports.jsx(Sn,{secretRevealed:c,scaleFactor:$,id:`CardNumberCopyBtn-${n}`,sourceId:n}),O===!0?o.jsxRuntimeExports.jsx(kt,{top:$*Ee.cardNumberCopiedSectionTop}):null]})]}),o.jsxRuntimeExports.jsxs(jn,{children:[o.jsxRuntimeExports.jsxs(wn,{children:[o.jsxRuntimeExports.jsx(Lt,{style:j,windowSize:I,children:Ze.cardDetails.expiry}),o.jsxRuntimeExports.jsxs(hn,{secretRevealed:a&&(p.cvv===!1||p.number===!1),children:[c&&a&&p.cvv===!1&&p.number===!1?o.jsxRuntimeExports.jsx(bn,{sourceId:n,scaleFactor:$,windowSize:I,secretRevealed:c&&a,"data-testid":t.generateDataTestId("expiry-date-copy"),onClick:L=>{L.stopPropagation(),D(R)},children:c&&a&&p.cvv===!1&&p.number===!1?ie:Ze.cardDetails.expiryHideOut}):o.jsxRuntimeExports.jsx(Rn,{sourceId:n,windowSize:I,scaleFactor:$,isCardDetailFetching:p.cvv===!0||p.number===!0||P||b,children:Ze.cardDetails.expiryHideOut}),oe===!0?o.jsxRuntimeExports.jsx(kt,{top:$*Ee.expiryCopySectionTop,width:"auto"}):null]})]}),o.jsxRuntimeExports.jsxs($n,{style:H,children:[o.jsxRuntimeExports.jsx(Lt,{style:j,windowSize:I,children:Ze.cardDetails.cvv}),o.jsxRuntimeExports.jsx(vn,{sourceId:n,scaleFactor:$,showSecretInfo:a&&p.cvv===!1&&p.number===!1,isCardDetailFetching:p.number===!0||p.cvv===!0||P||b,windowSize:I,children:Ze.cardDetails.cvvHideOut}),o.jsxRuntimeExports.jsxs(mn,{secretRevealed:c,sourceId:n,showSecretInfo:a&&p.cvv===!1&&p.number===!1,isCardDetailErrored:v,children:[o.jsxRuntimeExports.jsx(xn,{scaleFactor:$,secretRevealed:c,sourceId:n,id:`SecretCvv-${n}`}),o.jsxRuntimeExports.jsx(gn,{windowSize:I,scaleFactor:$,secretRevealed:c,id:`CvvCopyBtn-${n}`,sourceId:n}),V===!0?o.jsxRuntimeExports.jsx(kt,{top:$*Ee.cvvCopiedSectionTop,width:"auto"}):null]})]})]})]})},pn=s.div`
+  display: ${e=>e.showSecretInfo?"block":"none"};
+  height: ${e=>e.secretRevealed?"unset":t.Space.sp0};
+  width: ${e=>e.secretRevealed?e.scaleFactor*Ee.secretCardNumberWrapperWidth:t.sp[0]}px;
+  overflow: hidden;
+  &:hover {
+    background: ${e=>e.isCardDetailErrored?"transparent":t.Colors.neutralGrey5Light};
+    border-radius: ${t.Space.sp1};
+  }
+`,un=s.div`
+  min-height: ${e=>e.secretRevealed?e.scaleFactor*t.textStyles.h6Regular.lineHeightValue:t.sp[0]}px;
+  height: ${e=>e.secretRevealed?e.scaleFactor*t.textStyles.h6Regular.lineHeightValue:t.sp[0]}px;
+  width: ${e=>e.secretRevealed?"100%":t.Space.sp0};
+  overflow: hidden;
+  position: relative;
+`,mn=s.div`
+  display: ${e=>e.showSecretInfo?"flex":"none"};
+  height: ${e=>e.secretRevealed?"unset":t.Space.sp0};
+  min-height: ${e=>e.secretRevealed?"unset":t.Space.sp0};
+  width: ${e=>e.secretRevealed?Ee.secretCVVWrapperWidth:t.sp[0]}px;
+  position: relative;
+  &:hover {
+    background: ${e=>e.isCardDetailErrored?"transparent":t.Colors.neutralGrey5Light};
+    border-radius: ${t.Space.sp1};
+  }
+`,xn=s.div`
+  height: ${e=>e.secretRevealed?e.scaleFactor*t.textStyles.h6Regular.lineHeightValue:t.sp[0]}px;
+  width: ${e=>e.secretRevealed?Ee.secretCVVWrapperWidth*e.scaleFactor:t.Space.sp0};
+  overflow: hidden;
+`,hn=s.div`
+  position: relative;
+  padding: ${t.Space.sp0} ${t.Space.sp1};
+  &:hover {
+    background: ${e=>e.secretRevealed?t.Colors.neutralGrey5Light:"transparent"};
+    border-radius: ${t.Space.sp1};
+  }
+`,gn=s.div`
+  height: ${e=>e.secretRevealed?e.scaleFactor*t.textStyles.h6Regular.lineHeightValue:t.sp[0]}px;
+  width: ${e=>e.secretRevealed?"inherit":t.Space.sp0};
+  position: absolute;
+  top: ${t.Space.sp0};
+  overflow: hidden;
+  background: transparent;
+  cursor: pointer;
+`,Sn=s.div`
+  height: ${e=>e.secretRevealed?e.scaleFactor*t.textStyles.h6Regular.lineHeightValue:t.sp[0]}px;
+  width: ${e=>e.secretRevealed?"inherit":t.Space.sp0};
+  position: absolute;
+  top: ${e=>e.scaleFactor*Ee.cardNumberCopyBtnTop}px;
+  overflow: hidden;
+  background: transparent;
+  cursor: pointer;
+`,fn=s.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${t.Space.sp4} ${t.Space.sp0} ${t.Space.sp4} ${t.Space.sp5};
+  width: 75%;
+  gap: ${t.Space.sp4};
+`,Cn=s.div`
+  position: relative;
+  width: max-content;
+`,Lt=s(t.SmallRegular)`
+  padding-left: ${t.Space.sp1};
+  color: ${t.Colors.brandColorPearl};
+  position: relative;
+  font-size: ${e=>go.CardInfoTitleSize.valuePx(e.windowSize)};
+  line-height: ${e=>go.CardInfoTitleLineHeight.valuePx(e.windowSize)};
+`,yn=s(t.ChargeCardNumberText)`
+  display: ${e=>e.showSecretInfo===!0?"none":"block"};
+  padding-left: ${t.Space.sp1};
+  color: ${e=>e.isCardDetailFetching?e.theme.colors.grey1:e.theme.colors.brandColorOnyx};
+  opacity: 0.7;
+  margin-top: ${e=>Ee.maskedCardNumberMarginTop.valuePx(e.windowSize)};
+  margin-left: -2px;
+  font-size: ${e=>e.scaleFactor*t.textStyles.chargeCardNumberText.fontSizeValue}px;
+  line-height: ${e=>e.scaleFactor*t.textStyles.chargeCardNumberText.lineHeightValue}px;
+  -webkit-font-smoothing: initial;
+  -moz-osx-font-smoothing: initial;
+  word-wrap: "break-word";
+`,jn=s.div`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: ${t.Space.sp4};
+`,$n=s.div`
+  display: flex;
+  flex-direction: column;
+  margin-right: ${t.Space.sp5};
+`,vn=s(t.ChargeCardNumberText)`
+  display: ${e=>e.showSecretInfo?"none":"block"};
+  padding-left: ${t.Space.sp1};
+  opacity: 0.7;
+  color: ${e=>e.isCardDetailFetching?e.theme.colors.grey1:e.theme.colors.brandColorOnyx};
+  font-size: ${e=>e.scaleFactor*t.textStyles.chargeCardNumberText.fontSizeValue}px;
+  line-height: ${e=>e.scaleFactor*t.textStyles.chargeCardNumberText.lineHeightValue}px;
+  -webkit-font-smoothing: initial;
+  -moz-osx-font-smoothing: initial;
+  word-wrap: "break-word";
+`,wn=s.div`
+  display: flex;
+  flex-direction: column;
+`,Rn=s(t.ChargeCardNumberText)`
+  color: ${e=>e.isCardDetailFetching?e.theme.colors.grey1:e.theme.colors.brandColorOnyx};
+  opacity: 0.7;
+  font-size: ${e=>e.scaleFactor*t.textStyles.chargeCardNumberText.fontSizeValue}px;
+  line-height: ${e=>e.scaleFactor*t.textStyles.chargeCardNumberText.lineHeightValue}px;
+  -webkit-font-smoothing: initial;
+  -moz-osx-font-smoothing: initial;
+  word-wrap: "break-word";
+`,bn=s(t.ChargeCardNumberText)`
+  display: ${e=>e.secretRevealed?"block":"none"};
+  color: ${e=>e.theme.colors.brandColorOnyx};
+  border-radius: ${t.Space.sp1};
+  opacity: 0.7;
+  padding-left: ${e=>e.secretRevealed===!0?t.Space.sp0:t.Space.sp1};
+  font-size: ${e=>e.scaleFactor*t.textStyles.chargeCardNumberText.fontSizeValue}px;
+  line-height: ${e=>e.scaleFactor*t.textStyles.chargeCardNumberText.lineHeightValue}px;
+  -webkit-font-smoothing: initial;
+  -moz-osx-font-smoothing: initial;
+  word-wrap: "break-word";
+`,En=s(t.SvgTickRoundFill)`
+  height: ${t.Space.sp3};
+  width: ${t.Space.sp3};
+  color: ${t.Colors.success};
+`,kn=s.div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: ${t.Space.sp1};
+  width: 100%;
+  justify-content: center;
+  z-index: 1;
+`,Ln=s(t.SmallRegular)`
+  color: ${t.Colors.primaryDark};
+  padding: 2px ${t.Space.sp2};
+  background-color: ${t.Colors.blackColor};
+`,Tn=e=>C.createElement("svg",{width:48,height:48,viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},C.createElement("path",{d:"M44.8249 13.5005C44.8249 11.5675 43.1119 10.0005 40.9988 10.0005H40H28.4901H7C4.88691 10.0005 3.17391 11.5675 3.17391 13.5005V34.5005C3.17391 36.4335 4.88691 38.0005 7 38.0005H9H19.2782H40.9988C43.1119 38.0005 44.8249 36.4335 44.8249 34.5005V13.5005Z",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),C.createElement("path",{d:"M4.82422 18.3999H23H33.4996H44.0002",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})),Pn=e=>C.createElement("svg",{viewBox:"0 0 35 32",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},C.createElement("path",{d:"M25.9187 17.6131C25.8526 16.3523 25.2884 15.1693 24.3501 14.3245C23.4118 13.4797 22.1764 13.0422 20.9155 13.1082L10.2189 13.6688C8.95804 13.7349 7.77508 14.2991 6.93025 15.2374C6.08541 16.1757 5.64791 17.4112 5.71399 18.672L6.08772 25.8031C6.1538 27.064 6.71804 28.2469 7.65632 29.0917C8.5946 29.9366 9.83006 30.3741 11.0909 30.308L21.7875 29.7474C23.0484 29.6813 24.2313 29.1171 25.0762 28.1788C25.921 27.2405 26.3585 26.0051 26.2924 24.7442L25.9187 17.6131Z",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),C.createElement("path",{d:"M33.4861 9.90111C33.8174 8.19696 33.5535 6.44956 32.7527 5.04334C31.9518 3.63712 30.6795 2.68725 29.2156 2.40271C27.7518 2.11816 26.2163 2.52225 24.947 3.52606C23.6776 4.52988 22.7784 6.0512 22.4472 7.75536L21.7138 11.9827",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),C.createElement("path",{d:"M13.6223 21.1127C13.6223 21.744 13.8731 22.3494 14.3195 22.7958C14.7659 23.2422 15.3713 23.493 16.0026 23.493C16.6339 23.493 17.2393 23.2422 17.6857 22.7958C18.1321 22.3494 18.3829 21.744 18.3829 21.1127C18.3829 20.4814 18.1321 19.876 17.6857 19.4296C17.2393 18.9832 16.6339 18.7324 16.0026 18.7324C15.3713 18.7324 14.7659 18.9832 14.3195 19.4296C13.8731 19.876 13.6223 20.4814 13.6223 21.1127Z",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"})),es=e=>C.createElement("svg",{viewBox:"0 0 32 34",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},C.createElement("path",{d:"M25.7696 18.2876C25.6595 17.0298 25.0544 15.8673 24.0872 15.0557C23.12 14.2441 21.87 13.85 20.6122 13.96L9.94168 14.8936C8.6839 15.0036 7.52135 15.6088 6.70978 16.576C5.8982 17.5432 5.50409 18.7932 5.61413 20.051L6.2365 27.1647C6.34654 28.4224 6.95172 29.585 7.91892 30.3966C8.88611 31.2081 10.1361 31.6022 11.3939 31.4922L22.0644 30.5587C23.3222 30.4486 24.4847 29.8434 25.2963 28.8762C26.1079 27.909 26.502 26.6591 26.392 25.4013L25.7696 18.2876Z",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),C.createElement("path",{d:"M9.36462 6.40914C9.66608 4.69947 10.6344 3.17957 12.0565 2.18381C13.4785 1.18805 15.238 0.798002 16.9476 1.09946C18.6573 1.40093 20.1772 2.36921 21.173 3.7913C22.1687 5.21339 22.5588 6.9728 22.2573 8.68247L21.5079 12.9324",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),C.createElement("path",{d:"M13.6237 22.1309C13.6237 22.7622 13.8745 23.3676 14.3209 23.814C14.7673 24.2604 15.3727 24.5112 16.004 24.5112C16.6353 24.5112 17.2407 24.2604 17.6871 23.814C18.1335 23.3676 18.3843 22.7622 18.3843 22.1309C18.3843 21.4996 18.1335 20.8941 17.6871 20.4478C17.2407 20.0014 16.6353 19.7506 16.004 19.7506C15.3727 19.7506 14.7673 20.0014 14.3209 20.4478C13.8745 20.8941 13.6237 21.4996 13.6237 22.1309Z",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"})),{common:zn,spendManagement:{chargeCard:{cardDetails:Ce}}}=t.appLocale.getLocalizedStrings(),xe={chargeCardWidth:384,chargeCardHeight:240,cardLoadingShineWidth:200,cardLoadingShineHeight:240,zeniLogoWidth:t.sp[6],zeniLogoHeight:t.sp[6],visaLogoWidth:t.sp[6],visaLogoHeight:13,cardTintIconWidth:277,cardTintIconHeight:242,colorPaletteLeftTransitionValue:-350,rightSectionWidth:384,rightSectionHeight:240,cardContainerContentGap:new t.ResponsiveSized(t.sp[4],t.sp[4],t.sp[4],t.sp[3])},ts=({isChargeCardAdmin:e,chargeCardDetailView:n,productInformation:a,cashbackInformation:c,creditAccountInformation:d,debitAccountInformation:h,secretRevealed:l,isOwnCard:m,vgsVaultId:u,showSecretInfo:S,controllerEmails:f,isChargeCardFeatureEnabled:r,isDebitCardFeatureEnabled:x,isDebitCardSetupEnabled:g,isChargeCardSetupEnabled:w,chargeCardCashbackDetailState:y,creditAccount:v,creditAccountRepayment:b,isShowingInDrawer:p,isSandboxEnv:P,isCardDetailErrored:j,signedInUserToken:z,selectedColor:H,cardDetailsFetchState:R,setCardDetailsFetchState:N,setIsCardDetailErrored:X,setShowSecretInfo:U,setSecretRevealed:T,setShowPhoneNumberForOtp:K,isCardDetailFetching:ne,handleColorCodeClick:ee,onFireOnClickAnalytics:Q,onUnlockChargeCard:I})=>{const[O,te]=i.useState(!1),[V,re]=i.useState(!1),[oe,E]=i.useState(!0),[se,q]=i.useState(!1),[G,$]=i.useState(!1),[_,ie]=i.useState(!1),[D,L]=i.useState(!1),[le,ae]=i.useState(!1),[F,he]=i.useState(!1),pe=i.useRef(null),J=i.useRef(null),B=i.useRef(null),Z=i.useRef(null),Y=i.useRef(null),ue=t.usePrevious(n.unlockChargeCardsFetchState.fetchState),me=t.usePrevious(n.lockChargeCardsFetchState.fetchState),Me=t.usePrevious(n.closeChargeCardsFetchState.fetchState),Ye=n.chargeCard?.type.code??"business_virtual_credit_card",{isMobileOrTabletScreen:Ke}=t.useDeviceDetect(),Ie=t.useWindowSizeContext(),ge=p?.75:Ie==="small"?.85:1,A=Ke?Ce.tapCardCopyText:Ce.scanNowAndAddToWallet,ce=Ke?Ce.tapCardCopyText:o.jsxRuntimeExports.jsxs(Wn,{children:[o.jsxRuntimeExports.jsx(jr,{}),Ce.clickTheCardToFetchDetailsText]}),k=n.chargeCard?.isLockedByAdmin??!1,Je=Ie==="small"?Ce.tapCardCopyText:Ce.clickTheCardToCopyDetailsText,_e=Ie==="small"?Ce.tapCardCopyText:Ce.clickTheCardToFetchDetailsText,rt=p?A:Je,it=p?ce:_e,Re=ne(R)||n.updateFetchState.fetchState==="In-Progress"||n.unlockChargeCardsFetchState.fetchState==="In-Progress",Xe=(R.cvv!==!0||R.number!==!0)&&m,Pe=!!n.chargeCard?.type.code.includes("debit"),be=n.chargeCard?.status.code==="locked",We=n.chargeCard?.status.code==="closed"||n.chargeCard?.status.code==="closed_by_customer",Qe=n.chargeCard?.status.code==="active",je=n.unlockChargeCardsFetchState.fetchState,ze=n.lockChargeCardsFetchState.fetchState,Ve=n.closeChargeCardsFetchState.fetchState;return i.useEffect(()=>{Qe&&ue!=null&&ue==="In-Progress"&&je==="Completed"&&(J.current&&clearTimeout(J.current),L(!0),J.current=setTimeout(()=>{ie(!1),L(!1),J.current=null},2700))},[Qe,je,ue]),i.useEffect(()=>()=>{J.current&&clearTimeout(J.current)},[]),i.useEffect(()=>{ue!=null&&ue==="In-Progress"&&je==="Error"&&ie(!1)},[je,ue]),i.useEffect(()=>{se===!1&&me!=null&&me==="In-Progress"&&ze==="Completed"&&(pe.current&&clearTimeout(pe.current),q(!0),$(!1),E(!1),he(!0),pe.current=setTimeout(()=>{he(!1),pe.current=null,Y.current=setTimeout(()=>{q(!1),E(!0),Y.current=null},100)},1102))},[me,ze]),i.useEffect(()=>()=>{pe.current&&clearTimeout(pe.current),Y.current&&clearTimeout(Y.current)},[]),i.useEffect(()=>{We&&Me!=null&&Me==="In-Progress"&&Ve==="Completed"&&(B.current&&clearTimeout(B.current),ae(!0),B.current=setTimeout(()=>{ae(!1),B.current=null},1200))},[We,Me,Ve]),i.useEffect(()=>()=>{B.current&&clearTimeout(B.current)},[]),i.useEffect(()=>{!se&&V?(Z.current&&(clearTimeout(Z.current),Z.current=null),$(!0)):!se&&!V&&G&&(Z.current&&clearTimeout(Z.current),Z.current=setTimeout(()=>{$(!1),Z.current=null},800))},[se,V,G]),i.useEffect(()=>()=>{Z.current&&clearTimeout(Z.current)},[]),o.jsxRuntimeExports.jsxs(Un,{windowSize:Ie,scaleFactor:ge,children:[o.jsxRuntimeExports.jsxs(pr,{isCardLocked:be,isChargeCardAdmin:e,isLockedByAdmin:k,unlockFetchState:n.unlockChargeCardsFetchState.fetchState,onClick:Le=>{Le.stopPropagation(),be&&je!=="In-Progress"&&(e||!k)&&(I(e),ie(!0))},onMouseEnter:()=>{(e||!k)&&je!=="In-Progress"&&(E(!1),re(!0))},onMouseLeave:()=>{(e||!k)&&je!=="In-Progress"&&(E(!1),re(!1))},children:[l&&p?o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(Sr,{}),o.jsxRuntimeExports.jsx(fr,{}),o.jsxRuntimeExports.jsx(Cr,{}),o.jsxRuntimeExports.jsx(yr,{})]}):null,se&&o.jsxRuntimeExports.jsxs(lr,{children:[o.jsxRuntimeExports.jsx(Yn,{}),o.jsxRuntimeExports.jsx(Kn,{})]}),be&&!F&&!(me==="In-Progress"&&ze==="Completed")&&o.jsxRuntimeExports.jsx(cr,{isLockAnimationInProgress:se,unlockFetchState:je,children:o.jsxRuntimeExports.jsxs(sr,{isHovered:V||_,isInitialDisplay:oe,children:[o.jsxRuntimeExports.jsx(Jn,{}),o.jsxRuntimeExports.jsx(_n,{isHovered:V||_,isInitialDisplay:oe,children:Ce.moreOptions.unlock})]})}),D&&o.jsxRuntimeExports.jsx(dr,{children:o.jsxRuntimeExports.jsxs(nr,{children:[o.jsxRuntimeExports.jsx(tr,{}),o.jsxRuntimeExports.jsx(or,{}),o.jsxRuntimeExports.jsx(Xn,{}),o.jsxRuntimeExports.jsx(Zn,{children:Ce.moreOptions.unlock})]})}),We?le?o.jsxRuntimeExports.jsx(ar,{children:o.jsxRuntimeExports.jsxs(rr,{children:[o.jsxRuntimeExports.jsx(Qn,{}),o.jsxRuntimeExports.jsx(Vn,{})]})}):o.jsxRuntimeExports.jsx(is,{children:o.jsxRuntimeExports.jsx(ir,{children:o.jsxRuntimeExports.jsx(er,{})})}):null,Ye.includes("virtual")?o.jsxRuntimeExports.jsxs(ur,{isShowingInDrawer:p,isOwnCard:m,scaleFactor:ge,bgColor:H?.toString(),showColorPalette:O,isDebitCard:Pe,"data-testid":t.generateDataTestId("virtual-charge-card-detail"),onClick:()=>{O===!1&&m===!0&&ne(R)===!1&&D===!1&&je!=="In-Progress"&&be===!1&&we.triggerOtpFlowToShowCardSecretInfo({signedInUserToken:z,showSecretInfo:S,setShowPhoneNumberPopup:K,onFireOnClickAnalytics:Q,setShowSecretInfo:U})},enableClick:Xe&&!be&&!We||be&&je!=="In-Progress",cardDetailsFetchState:Re||n.chargeCard?.cardColorCode===void 0,children:[o.jsxRuntimeExports.jsx(Co,{scaleFactor:ge,shouldAppear:Re||n.chargeCard?.cardColorCode===void 0}),o.jsxRuntimeExports.jsx(en,{leftTransitionValue:ge*xe.colorPaletteLeftTransitionValue,hasBorderShadow:!1,tickStyles:{width:"12px",height:"12px"},colorInState:n.chargeCard?.cardColorCode!=null?new o.Color(n.chargeCard.cardColorCode):void 0,styles:{height:"100%",maxWidth:"78%",top:p?"unset":t.Space.sp0,left:O?t.Space.sp0:`${ge*xe.colorPaletteLeftTransitionValue}px`},coloredCircleStyles:{width:t.Space.sp4,height:t.Space.sp4,margin:"unset"},colorPaletteTitleStyles:{padding:`${t.Space.sp5} ${t.Space.sp7} ${t.Space.sp3} ${t.Space.sp5}`},closeStyles:{width:t.Space.sp3,height:t.Space.sp3},ColorListStyles:{gap:t.Space.sp3},isColorPaletteVisible:O,toggleColorPaletteVisibility:Le=>{te(Le)},handleColorClick:(Le,et)=>{ee(Le,et),et&&te(!1)}}),o.jsxRuntimeExports.jsx(gr,{scaleFactor:ge}),o.jsxRuntimeExports.jsx(So,{productInformation:a,cashbackInformation:c,creditAccountInformation:d,debitAccountInformation:h,secretRevealed:l,setSecretRevealed:T,onFireOnClickAnalytics:Q,isCardColorUndefined:n.chargeCard?.cardColorCode==null,isCardColorUpdating:n.updateFetchState.fetchState==="In-Progress",isSandboxEnv:P,cardDetailsFetchState:R,setCardDetailsFetchState:N,isCardDetailErrored:j,setIsCardDetailErrored:X,chargeCard:n.chargeCard,vgsVaultId:u,showSecretInfo:S,creditAccountRepayment:b,token:z?.token,isDebitCard:Pe,depositAccountLimitFetchState:n.depositAccountLimitFetchState.fetchState,controllerEmails:f,isChargeCardFeatureEnabled:r,isDebitCardFeatureEnabled:x,isDebitCardSetupEnabled:g,isChargeCardSetupEnabled:w,creditAccount:v,chargeCardCashbackDetailState:y,cardInfoTitleStyles:{...t.textStyles.extraSmallRegular.cssObject},styles:{gap:`${t.Space.sp3}`,paddingLeft:`${t.Space.sp4}`},cvvSecStyles:{minWidth:"39px",marginRight:`${t.Space.sp3}`},sourceId:p?"addToWalletDrawer":"cardDetail"}),o.jsxRuntimeExports.jsxs(yo,{children:[o.jsxRuntimeExports.jsxs(xr,{children:[o.jsxRuntimeExports.jsx(jo,{scaleFactor:ge}),o.jsxRuntimeExports.jsx(Gn,{onClick:Le=>{Le.stopPropagation(),m&&te(!O)},"data-testid":t.generateDataTestId("card-color-selector"),children:m?o.jsxRuntimeExports.jsx(t.Tooltip,{enterDelay:600,title:Ce.cardColours,placement:"left",children:o.jsxRuntimeExports.jsx(fo,{isShowingInDrawer:p})}):o.jsxRuntimeExports.jsx(fo,{isShowingInDrawer:p})})]}),o.jsxRuntimeExports.jsx(Hn,{scaleFactor:ge})]})]}):o.jsxRuntimeExports.jsxs($r,{scaleFactor:ge,enableClick:Xe,isOwnCard:m,isShowingInDrawer:p,onClick:()=>{m===!0&&D===!1&&be===!1&&je!=="In-Progress"&&ne(R)===!1&&we.triggerOtpFlowToShowCardSecretInfo({signedInUserToken:z,showSecretInfo:S,setShowPhoneNumberPopup:K,onFireOnClickAnalytics:Q,setShowSecretInfo:U})},"data-testid":t.generateDataTestId("physical-charge-card-detail"),children:[o.jsxRuntimeExports.jsx(Co,{scaleFactor:ge,shouldAppear:Re}),o.jsxRuntimeExports.jsxs(vr,{flipCard:l,children:[o.jsxRuntimeExports.jsx(wr,{children:o.jsxRuntimeExports.jsx(t.PhysicalCardView,{scaleFactor:ge,isClickable:Xe,isLoading:Re,isDebitCard:Pe})}),S?o.jsxRuntimeExports.jsxs(Rr,{isDebitCard:Pe,children:[o.jsxRuntimeExports.jsx(So,{productInformation:a,cashbackInformation:c,creditAccountInformation:d,debitAccountInformation:h,secretRevealed:l,setSecretRevealed:T,onFireOnClickAnalytics:Q,isCardColorUndefined:n.chargeCard?.cardColorCode==null,isCardColorUpdating:n.updateFetchState.fetchState==="In-Progress",isSandboxEnv:P,cardDetailsFetchState:R,setCardDetailsFetchState:N,isCardDetailErrored:j,setIsCardDetailErrored:X,chargeCard:n.chargeCard,vgsVaultId:u,showSecretInfo:S,token:z?.token,isDebitCard:Pe,depositAccountLimitFetchState:n.depositAccountLimitFetchState.fetchState,controllerEmails:f,isChargeCardFeatureEnabled:r,isDebitCardFeatureEnabled:x,isDebitCardSetupEnabled:g,isChargeCardSetupEnabled:w,creditAccount:n.creditAccount,creditAccountRepayment:b,chargeCardCashbackDetailState:y,cardInfoTitleStyles:{...t.textStyles.extraSmallRegular.cssObject},styles:{gap:`${t.Space.sp3}`,paddingLeft:`${t.Space.sp4}`},cvvSecStyles:{minWidth:"39px",marginRight:`${t.Space.sp3}`},sourceId:p?"addToWalletDrawer":"cardDetail"}),o.jsxRuntimeExports.jsx(yo,{children:o.jsxRuntimeExports.jsx(hr,{children:o.jsxRuntimeExports.jsx(jo,{scaleFactor:ge})})})]}):null]})]})]}),We?o.jsxRuntimeExports.jsx(An,{children:Ce.cardClosedMessage}):k&&!e?o.jsxRuntimeExports.jsx(Mn,{children:Ce.cardLockedByAdminMessage}):be?o.jsxRuntimeExports.jsx(Tt,{children:Ce.cardLockedMessage}):m===!0&&!Re?R.cvv===!0&&R.number===!0?o.jsxRuntimeExports.jsx(mr,{children:zn.loading}):j?o.jsxRuntimeExports.jsx(In,{}):o.jsxRuntimeExports.jsx(Tt,{children:l?rt:it}):Re?o.jsxRuntimeExports.jsx(Tt,{children:Ce.loading}):null]})},An=s(t.SmallRegular)`
+  color: ${t.Colors.important};
+`,Mn=s(t.SmallRegular)`
+  color: ${e=>e.theme.colors.primary};
+`,In=()=>o.jsxRuntimeExports.jsxs(Nn,{children:[o.jsxRuntimeExports.jsx(Fn,{}),o.jsxRuntimeExports.jsx(Bn,{children:Ce.failedToFetchCardWebText})]}),Wn=s.div`
+  display: flex;
+  align-items: center;
+  gap: ${t.Space.sp2};
+`,Hn=s(t.SvgVisa)`
+  width: ${e=>e.scaleFactor*xe.visaLogoWidth}px;
+  height: ${e=>e.scaleFactor*xe.visaLogoHeight}px;
+`,Fn=s(t.SvgAlertRound)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  color: ${t.Colors.alert};
+`,Bn=s(t.SmallRegular)`
+  color: ${t.Colors.alert};
+`,Nn=s.div`
+  display: flex;
+  align-items: center;
+  gap: ${t.Space.sp1};
+`,On=W.keyframes`
+  0% {
+    opacity: 0;
+    max-width: 0;
+    margin-left: 0;
+    transform: translateY(${t.Space.sp1});
+  }
+  100% {
+    opacity: 1;
+    max-width: ${t.Space.sp12};
+    margin-left: ${t.Space.sp2};
+    transform: translateY(${t.Space.sp0});
+  }
+`,os=W.keyframes`
+  0% {
+    opacity: 1;
+    max-width: ${t.Space.sp12};
+    margin-left: ${t.Space.sp2};
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    max-width: 0;
+    margin-left: 0;
+    transform: translateY(${t.Space.sp1});
+  }
+`,_n=s(t.LargeRegular)`
+  color: ${e=>e.theme.colors.grey5};
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  ${e=>e.isInitialDisplay?W.css`
+          opacity: 0;
+          max-width: 0;
+          margin-left: 0;
+        `:e.isHovered?W.css`
+            opacity: 0;
+            max-width: 0;
+            margin-left: 0;
+            animation: ${On} 400ms ease-in-out 400ms forwards;
+          `:W.css`
+            animation: ${os} 400ms ease-in-out forwards;
+          `}
+`,Zn=s(t.LargeRegular)`
+  color: ${e=>e.theme.colors.grey5};
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  animation: ${os} 400ms ease-in-out forwards;
+`,Gn=s.div`
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`,fo=s.div`
+  // These are weird number because final requirement is 9 and 12px circle.
+  width: ${e=>e.isShowingInDrawer?7:10}px;
+  height: ${e=>e.isShowingInDrawer?7:10}px;
+  border: 1px solid ${t.Colors.backgroundThemeLight};
+  border-radius: 50%;
+`,Un=s.div`
+  min-height: ${e=>`calc(${e.scaleFactor*xe.rightSectionHeight}px + ${t.Space.sp2})`};
+  min-width: ${e=>`calc(${e.scaleFactor*xe.rightSectionWidth}px + ${t.Space.sp2})`};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: ${e=>xe.cardContainerContentGap.valuePx(e.windowSize)};
+`,Tt=s(t.SmallRegular)`
+  color: ${e=>e.theme.colors.primary};
+`,qn=W.keyframes`
+	0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(180%);
+  }
+`,gt=W.keyframes`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`,Wt=W.keyframes`
+  0% {
+    width: ${t.Space.sp5};
+    height: ${t.Space.sp5};
+  }
+  50% {
+    width: ${t.Space.sp7};
+    height: ${t.Space.sp7};
+  }
+  100% {
+    width: ${t.Space.sp5};
+    height: ${t.Space.sp5};
+  }
+`,qe=W.keyframes`
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+`,lt=W.keyframes`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`,Dn=W.keyframes`
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0;
+  }
+`,ss=W.keyframes`
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+`,ns=W.keyframes`
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+`,rs=W.keyframes`
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0);
+    opacity: 0;
+  }
+`,Yn=s(es)`
+  color: ${e=>e.theme.colors.grey5};
+  width: ${t.Space.sp5};
+  height: ${t.Space.sp5};
+  position: absolute;
+  z-index: 2;
+  animation:
+    ${gt} 300ms ease-out forwards,
+    ${Wt} 400ms ease-in-out 301ms forwards,
+    ${qe} 400ms ease-in-out 702ms forwards;
+`,Kn=s(t.SvgLock)`
+  color: ${e=>e.theme.colors.grey5};
+  width: ${t.Space.sp5};
+  height: ${t.Space.sp5};
+  position: absolute;
+  z-index: 2;
+  opacity: 0;
+  animation: ${lt} 400ms ease-in-out 702ms forwards;
+  transition: opacity 200ms ease-in-out;
+`,Jn=s(t.SvgLock)`
+  color: ${e=>e.theme.colors.grey5};
+  width: ${t.Space.sp5};
+  height: ${t.Space.sp5};
+  position: relative;
+  z-index: 1;
+  opacity: 1;
+`,Xn=s(t.SvgLock)`
+  color: ${e=>e.theme.colors.grey5};
+  width: ${t.Space.sp5};
+  height: ${t.Space.sp5};
+  position: relative;
+  z-index: 1;
+  opacity: 1;
+  animation:
+    ${Wt} 400ms ease-in-out 800ms forwards,
+    ${qe} 400ms ease-in-out 1200ms forwards;
+`,Qn=s(Tn)`
+  color: ${t.Colors.important};
+  width: ${t.Space.sp5};
+  height: ${t.Space.sp5};
+  position: relative;
+  z-index: 1;
+  opacity: 0;
+  animation:
+    ${lt} 300ms ease-out forwards,
+    ${Wt} 300ms ease-out 300ms forwards,
+    ${qe} 300ms ease-in-out 600ms forwards;
+`,Vn=s(Jo.SvgCloseCard)`
+  color: ${t.Colors.important};
+  width: ${t.Space.sp5};
+  height: ${t.Space.sp5};
+  position: absolute;
+  z-index: 1;
+  opacity: 0;
+  animation: ${lt} 300ms ease-out 600ms forwards;
+`,er=s(Jo.SvgCloseCard)`
+  width: ${t.Space.sp5};
+  height: ${t.Space.sp5};
+  color: ${t.Colors.important};
+  position: absolute;
+  z-index: 1;
+`,tr=s(es)`
+  color: ${e=>e.theme.colors.grey5};
+  width: ${t.Space.sp5};
+  height: ${t.Space.sp5};
+  position: absolute;
+  z-index: 1;
+  opacity: 0;
+  animation:
+    ${gt} 400ms ease-in-out 1200ms forwards,
+    ${qe} 300ms ease-in-out 1600ms forwards,
+    ${gt} 100ms ease-in-out 1900ms forwards,
+    ${qe} 700ms ease-out 2000ms forwards;
+`,or=s(Pn)`
+  color: ${e=>e.theme.colors.grey5};
+  width: ${t.Space.sp5};
+  height: ${t.Space.sp5};
+  position: absolute;
+  z-index: 1;
+  opacity: 0;
+  animation:
+    ${gt} 300ms ease-in-out 1600ms forwards,
+    ${qe} 100ms ease-in-out 1900ms forwards;
+`,sr=s.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  padding: ${t.Space.sp3};
+  border-radius: ${t.Space.sp11};
+  z-index: 2;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: ${t.Space.sp11};
+    background-color: ${e=>e.theme.colors.primary};
+    transform-origin: center center;
+    ${e=>e.isInitialDisplay?W.css`
+            opacity: 0;
+          `:e.isHovered?W.css`
+              animation: ${ns} 400ms ease-in-out forwards;
+            `:W.css`
+              animation: ${rs} 400ms ease-in-out 400ms forwards;
+            `}
+    z-index: 0;
+  }
+`,nr=s.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  padding: ${t.Space.sp3};
+  border-radius: ${t.Space.sp11};
+  z-index: 2;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: ${t.Space.sp11};
+    background-color: ${e=>e.theme.colors.primary};
+    transform-origin: center center;
+    animation: ${rs} 400ms ease-in-out 400ms forwards;
+    z-index: 0;
+  }
+`,rr=s.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  padding: ${t.Space.sp3};
+  border-radius: 192px;
+  z-index: 2;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 192px;
+    background-color: ${t.Colors.importantLight};
+    transform-origin: center center;
+    animation: ${ns} 300ms ease-out forwards;
+    z-index: 0;
+  }
+`,ir=s.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  border-radius: 192px;
+  z-index: 2;
+  height: ${t.Space.sp8};
+  width: ${t.Space.sp8};
+  background-color: ${t.Colors.importantLight};
+`,ar=s.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  border-radius: ${t.Space.sp2};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  pointer-events: none;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300%;
+    height: 300%;
+    border-radius: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transform-origin: center;
+    z-index: 1;
+    animation: ${ss} 300ms ease-in-out 900ms forwards;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: ${t.Colors.overlayDark};
+    opacity: 0;
+    z-index: 0;
+    animation: ${lt} 300ms ease-in-out 900ms forwards;
+  }
+`,lr=s.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  border-radius: ${t.Space.sp2};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  pointer-events: none;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300%;
+    height: 300%;
+    border-radius: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transform-origin: center;
+    z-index: 1;
+    animation: ${ss} 400ms ease-in-out 702ms forwards;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: ${t.Colors.overlayDark};
+    opacity: 0;
+    z-index: 0;
+    animation: ${lt} 400ms ease-in-out 702ms forwards;
+  }
+`,is=s.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  background: ${t.Colors.overlayDark};
+  border-radius: ${t.Space.sp2};
+  opacity: 1;
+`,cr=s(is)`
+  display: ${e=>e.isLockAnimationInProgress?"none":"block"};
+  background: ${e=>e.unlockFetchState==="In-Progress"?"transparent":t.Colors.overlayDark};
+`,dr=s.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  border-radius: ${t.Space.sp2};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  pointer-events: none;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300%;
+    height: 300%;
+    border-radius: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transform-origin: center;
+    z-index: 1;
+    animation: ${Dn} 400ms ease-in-out 1600ms
+      forwards;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 1;
+    z-index: 0;
+    animation: ${qe} 400ms ease-in-out 1600ms forwards;
+  }
+`,pr=s.div`
+  position: relative;
+  cursor: ${e=>e.isCardLocked&&e.unlockFetchState!=="In-Progress"&&(e.isChargeCardAdmin||!e.isLockedByAdmin)?"pointer":"default"};
+`,Co=s.div`
+  z-index: 1;
+  display: ${e=>e.shouldAppear?"block":"none"};
+  content: "";
+  width: ${e=>e.scaleFactor*xe.cardLoadingShineWidth}px;
+  height: ${e=>e.scaleFactor*xe.cardLoadingShineHeight}px;
+  position: absolute;
+  transform: translateX(-180%);
+  animation: ${qn} 1.5s infinite;
+  background: ${W.css`linear-gradient(to right, transparent 0%, ${t.Colors.backgroundThemeLight} 50%, transparent 100%)`};
+`,yo=s.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  width: 25%;
+  padding: ${t.Space.sp4} ${t.Space.sp0};
+`,ur=s.div`
+  background: ${e=>e.cardDetailsFetchState?t.Colors.chargeCardFaded:e.bgColor??(e.isDebitCard?e.theme.colors.graphColor15:e.theme.colors.brandColorJade)};
+  border-radius: ${t.Space.sp2};
+  width: ${e=>e.scaleFactor*xe.chargeCardWidth}px;
+  height: ${e=>e.scaleFactor*xe.chargeCardHeight}px;
+  background-image: url(https://storage.googleapis.com/zeni-apis.appspot.com/images/PlasticCardPatternSmall.svg);
+  background-repeat: no-repeat;
+  background-position-y: bottom;
+  cursor: ${e=>e.enableClick?"pointer":"not-allowed"};
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  overflow: hidden;
+  justify-content: space-between;
+
+  ${e=>e.showColorPalette&&`box-shadow: ${t.Space.sp0} ${t.Space.sp0} ${t.Space.sp2} ${t.Space.sp1} ${e.theme.colors.dropShadowNormal};
+  `}
+
+  &:hover {
+    ${e=>e.isOwnCard&&!e.isShowingInDrawer?W.css`
+            box-shadow: 1px 3px ${t.Space.sp4} 2px
+              ${e.theme.colors.chargeCardBackgroundShadow};
+            transform: scale(1.003);
+            outline: ${t.Space.sp1} solid ${t.Colors.neutralGrey5Light};
+          `:null};
+  }
+
+  &:hover:before {
+    ${e=>e.isOwnCard&&!e.isShowingInDrawer?W.css`
+            box-shadow: ${t.Space.sp0} ${t.Space.sp0} ${t.Space.sp2} ${t.Space.sp1}
+              ${e.theme.colors.dropShadowNormal};
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: 7px;
+            padding: ${t.Space.sp1};
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            pointer-events: none;
+          `:null};
+  }
+`,mr=s(t.SmallRegular)`
+  color: ${e=>e.theme.colors.primary};
+  text-transform: capitalize;
+`,jo=s(t.SvgZeniIconOnly)`
+  height: ${e=>e.scaleFactor*xe.zeniLogoHeight}px;
+  width: ${e=>e.scaleFactor*xe.zeniLogoWidth}px;
+  color: ${t.Colors.neutralGrey5Light};
+`,xr=s.div`
+  display: flex;
+  flex-direction: column;
+  gap: 35px;
+`,hr=s.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${t.Space.sp4};
+`,gr=s(t.SvgCardTint)`
+  position: absolute;
+  width: ${e=>e.scaleFactor*xe.cardTintIconWidth}px;
+  height: ${e=>e.scaleFactor*xe.cardTintIconHeight}px;
+  top: -1px;
+`,Sr=s(De.SvgCornerBorderTopRight)`
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  right: -${t.Space.sp3};
+  top: -${t.Space.sp3};
+`,fr=s(De.SvgCornerBorderTopLeft)`
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  left: -${t.Space.sp3};
+  top: -${t.Space.sp3};
+`,Cr=s(De.SvgCornerBorderBottomRight)`
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  right: -${t.Space.sp3};
+  bottom: -${t.Space.sp3};
+`,yr=s(De.SvgCornerBorderBottomLeft)`
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  left: -${t.Space.sp3};
+  bottom: -${t.Space.sp3};
+`,jr=s(t.SvgArrowTailTop)`
+  color: ${e=>e.theme.colors.hero};
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+`,$r=s.div`
+  cursor: ${e=>e.enableClick?"pointer":"not-allowed"};
+  width: ${e=>e.scaleFactor*xe.chargeCardWidth}px;
+  height: ${e=>e.scaleFactor*xe.chargeCardHeight}px;
+  overflow: hidden;
+  position: relative;
+  border-radius: ${t.Space.sp2};
+
+  &:hover {
+    ${e=>e.isOwnCard&&!e.isShowingInDrawer&&e.enableClick?W.css`
+            box-shadow: 1px 3px ${t.Space.sp4} 2px
+              ${e.theme.colors.chargeCardBackgroundShadow};
+            transform: scale(1.003);
+            outline: ${t.Space.sp1} solid ${t.Colors.neutralGrey5Light};
+          `:null};
+  }
+
+  &:hover:before {
+    ${e=>e.isOwnCard&&!e.isShowingInDrawer&&e.enableClick?W.css`
+            box-shadow: ${t.Space.sp0} ${t.Space.sp0} ${t.Space.sp2} ${t.Space.sp1}
+              ${e.theme.colors.dropShadowNormal};
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: 7px;
+            padding: ${t.Space.sp1};
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            pointer-events: none;
+          `:null};
+  }
+`,vr=s.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+  transform: ${e=>e.flipCard?"rotateY(180deg)":"rotateY(0deg)"};
+`,wr=s.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden; /* Safari */
+  backface-visibility: hidden;
+`,Rr=s.div`
+  position: absolute;
+  background: ${e=>e.isDebitCard?e.theme.colors.brandColorJadeDark:e.theme.colors.brandColorJade};
+  width: inherit;
+  height: inherit;
+  border-radius: 6px;
+  display: flex;
+  transition-timing-function: ease-in-out;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  background-image: url("https://storage.googleapis.com/zeni-apis.appspot.com/images/plastic-card-pattern-right-small.svg");
+  border-radius: ${t.Space.sp2};
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  background-repeat: no-repeat;
+  background-position-x: right;
+  background-position-y: bottom;
+  transform: rotateY(180deg);
+`,ye={contentContainerPadding:new t.ResponsiveSized(t.sp[3],t.sp[4],t.sp[8],t.sp[8]),bottomContentContainerPadding:new t.ResponsiveSized(t.sp[3],t.sp[8]),rightSectionWidth:new t.ResponsiveSized(343,343,343,384),rightSectionHeight:new t.ResponsiveSized(214,214,214,240),cardContainerContentGap:new t.ResponsiveSized(t.sp[2],t.sp[2],t.sp[2],t.sp[3]),ownerAddressGap:new t.ResponsiveSized(t.sp[3],t.sp[5],t.sp[5],t.sp[7]),remainingAmountContainerGap:new t.ResponsiveSized(t.sp[1],t.sp[1]),leftRightSectionGap:new t.ResponsiveSized(t.sp[0],54,54,57),styledThunderIconContainerSize:new t.ResponsiveSized(t.sp[3],t.sp[4]),emailTooltipIconContainerMarginLeft:new t.ResponsiveSized(t.sp[1],t.sp[0]),cardBalanceSectionMarginBottom:new t.ResponsiveSized(t.sp[4],t.sp[4]),barRadius:new t.ResponsiveSized(2,t.sp[2]),topSectionPaddingBottom:new t.ResponsiveSized(t.sp[4],19),rightSectionGap:new t.ResponsiveSized(t.sp[4],t.sp[3]),addressSectionHeight:new t.ResponsiveSized(109,74),addressSectionGap:new t.ResponsiveSized(t.sp[2],t.sp[4]),navigationMarginBottom:new t.ResponsiveSized(t.sp[4],t.sp[0]),addressValueGap:new t.ResponsiveSized(t.sp[0],t.sp[1]),ownerWebMinWidth:new t.ResponsiveSized(110,187)},Ht={remainingAmount:new t.ResponsiveSizedStyle("largeRegular","largeMedium"),spentAmount:new t.ResponsiveSizedStyle("h5Regular","h5Regular")},{common:Ne,dateFormat:at,spendManagement:br}=t.appLocale.getLocalizedStrings(),Oe=br.chargeCard,Er=({chargeCardDetailView:e,spent:n,controllerEmails:a,chargeCardCashbackDetailState:c,isChargeCardFeatureEnabled:d,isDebitCardFeatureEnabled:h,isDebitCardSetupEnabled:l,isChargeCardSetupEnabled:m,creditAccount:u,creditAccountRepayment:S,productInformation:f,cashbackInformation:r,creditAccountInformation:x,debitAccountInformation:g,cardIssuedByRoles:w,cardIssuedByDepartmentName:y,cardHolderRoles:v,cardHolderDepartmentName:b,classListFetchState:p,cardOwnerName:P,secretRevealed:j,appleWalletLink:z,googleWalletLink:H,isCardNotPending:R,isOwnerNameCopied:N,isAddressCopied:X,addressToShow:U,isOwnCard:T,vgsVaultId:K,showSecretInfo:ne,isSandboxEnv:ee,isCardDetailErrored:Q,signedInUserToken:I,selectedColor:O,showUpdateSpendLimitAction:te,setShowPhoneNumberPopup:V,setShowChangeSpendLimitPopup:re,cardDetailsFetchState:oe,setCardDetailsFetchState:E,setIsCardDetailErrored:se,setShowSecretInfo:q,setSecretRevealed:G,isCardDetailFetching:$,handleColorCodeClick:_,onFireOnClickAnalytics:ie,onOwnerNameCopyClick:D,onAddressCopyClick:L,onUnlockChargeCard:le,isDebitCard:ae})=>{const F=t.useWindowSizeContext(),pe=t.useToolkitContext().analytics,J=e.chargeCardConfig.rePaymentInfo?.cardLimitResetDate!=null?e.chargeCardConfig.rePaymentInfo.cardLimitResetDate.format(at.visual.MMMDFormat):st.dateNow().startOf("month").add(1,"month").format(at.visual.MMMDFormat),B=e.chargeCard!=null?Math.round(n.amount*100/e.chargeCard.limit.amount):0,{isIPhoneScreen:Z}=t.useIPhoneDeviceDetect(),Y=e.chargeCard?.type.code==="business_physical_credit_card"&&(e.chargeCard?.status.code==="inactive"||e.chargeCard?.status.code==="request_on_hold"),ue=t.useGlobalInfoContext(),me=st.hasChargeCardAdminLevelAccess(ue?.loggedInUserRoleMap);return o.jsxRuntimeExports.jsxs(Zr,{windowSize:F,children:[o.jsxRuntimeExports.jsxs(_r,{windowSize:F,children:[o.jsxRuntimeExports.jsxs(Gr,{windowSize:F,children:[o.jsxRuntimeExports.jsx(zr,{children:Ne.texts.spent}),o.jsxRuntimeExports.jsx(Ro,{children:o.jsxRuntimeExports.jsx(Ur,{windowSize:F,children:t.amountToString("0,0.[00]",n)})}),o.jsxRuntimeExports.jsx(Vr,{windowSize:F,children:o.jsxRuntimeExports.jsx(ti,{style:{width:`${B}%`,borderRadius:t.Space.sp1}})}),e.chargeCard!=null?o.jsxRuntimeExports.jsxs(Ro,{children:[o.jsxRuntimeExports.jsxs(ei,{children:[o.jsxRuntimeExports.jsxs(Tr,{windowSize:F,children:[o.jsxRuntimeExports.jsx(bo,{windowSize:F,children:t.amountToString("0,0.[00]",e.chargeCard.available)}),o.jsxRuntimeExports.jsx(Eo,{windowSize:F,children:Ne.texts.remaining})]}),te?o.jsxRuntimeExports.jsxs(Dr,{windowSize:F,children:[o.jsxRuntimeExports.jsx(Yr,{children:Oe.updateSpendLimitPopup.unlockSpending}),o.jsxRuntimeExports.jsx(Kr,{onClick:()=>{Lr({chargeCardDetailView:e,classListFetchState:p,isChargeCardFeatureEnabled:d,creditAccount:u,creditAccountRepayment:S,isDebitCard:ae,productInformation:f,creditAccountInformation:x,debitAccountInformation:g,controllerEmails:a,cardIssuedByRoles:w,cardIssuedByDepartmentName:y,cardHolderRoles:v,cardHolderDepartmentName:b,analytics:pe}),re(!0)},"data-testid":t.generateDataTestId("update-spend-limit-button"),children:Oe.updateSpendLimitPopup.updateSpendLimit})]}):null]}),o.jsxRuntimeExports.jsxs(qr,{windowSize:F,children:[o.jsxRuntimeExports.jsxs(Ar,{children:[o.jsxRuntimeExports.jsx(bo,{windowSize:F,children:t.amountToString("0,0.[00]",e.chargeCard.limit)}),o.jsxRuntimeExports.jsx(Eo,{windowSize:F,children:Oe.cardList.slashMonth})]}),e.chargeCard.status.code!=="request_on_hold"?o.jsxRuntimeExports.jsxs(Jr,{children:[o.jsxRuntimeExports.jsx(Xr,{children:Ne.texts.limitReset}),o.jsxRuntimeExports.jsx(Qr,{children:J})]}):null]})]}):null]}),o.jsxRuntimeExports.jsx(kr,{chargeCardDetailView:e,classListFetchState:p,cardOwnerName:P,addressToShow:U,isAddressCopied:X,isOwnerNameCopied:N,onOwnerNameCopyClick:D,onAddressCopyClick:L})]}),o.jsxRuntimeExports.jsx(Nr,{windowSize:F,isOwnCard:T,children:F==="small"&&!T?null:o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(Or,{windowSize:F,children:Y?o.jsxRuntimeExports.jsx(t.PhysicalCardView,{}):o.jsxRuntimeExports.jsx(ts,{isChargeCardAdmin:me,chargeCardDetailView:e,productInformation:f,cashbackInformation:r,creditAccountInformation:x,debitAccountInformation:g,creditAccount:e.creditAccount,setShowSecretInfo:q,secretRevealed:j,isOwnCard:T,isShowingInDrawer:!1,vgsVaultId:K,showSecretInfo:ne,isSandboxEnv:ee,controllerEmails:a,isChargeCardFeatureEnabled:d,isDebitCardFeatureEnabled:h,isDebitCardSetupEnabled:l,isChargeCardSetupEnabled:m,chargeCardCashbackDetailState:c,isCardDetailErrored:Q,signedInUserToken:I,selectedColor:O,cardDetailsFetchState:oe,setCardDetailsFetchState:E,setIsCardDetailErrored:se,setSecretRevealed:G,isCardDetailFetching:$,handleColorCodeClick:_,onFireOnClickAnalytics:ie,setShowPhoneNumberForOtp:V,onUnlockChargeCard:le,creditAccountRepayment:S})}),!T&&e.chargeCard?.status.code!=="closed"&&e.chargeCard?.status.code!=="closed_by_customer"&&e.chargeCard?.status.code!=="locked"?o.jsxRuntimeExports.jsx(Pr,{children:Oe.cardDetails.adminsCannotAccess}):null,F==="small"&&T&&R&&ae===!1?Z?o.jsxRuntimeExports.jsx(It,{onClick:()=>{we.fireCardsAddToWalletClick({chargeCardDetailView:e,classListFetchState:p,analytics:pe,isDebitCard:ae,isChargeCardAdmin:me,productInformation:f,creditAccountInformation:x,debitAccountInformation:g,cardIssuedByRoles:w,cardIssuedByDepartmentName:y,cardHolderRoles:v,cardHolderDepartmentName:b,controllerEmails:a,pageName:"Card Detail",addToWalletType:"Add to Apple Wallet",isChargeCardFeatureEnabled:d,creditAccount:u,creditAccountRepayment:S}),window.open(z,"_blank")}}):o.jsxRuntimeExports.jsx(Mt,{onClick:()=>{we.fireCardsAddToWalletClick({chargeCardDetailView:e,classListFetchState:p,analytics:pe,isDebitCard:ae,isChargeCardAdmin:me,productInformation:f,creditAccountInformation:x,debitAccountInformation:g,cardIssuedByRoles:w,cardIssuedByDepartmentName:y,cardHolderRoles:v,cardHolderDepartmentName:b,controllerEmails:a,pageName:"Card Detail",addToWalletType:"Add to Google Wallet",isChargeCardFeatureEnabled:d,creditAccount:u,creditAccountRepayment:S}),window.open(H,"_blank")}}):null]})})]})},kr=({chargeCardDetailView:e,classListFetchState:n,cardOwnerName:a,addressToShow:c,isOwnerNameCopied:d,isAddressCopied:h,onOwnerNameCopyClick:l,onAddressCopyClick:m})=>{const u=t.useWindowSizeContext(),S=o.useTheme(),[f,r]=i.useState(0),[x,g]=i.useState(!0),[w,y]=i.useState(!1),[v,b]=i.useState(!1),[p,P]=i.useState(!1);i.useEffect(()=>{const z=[setTimeout(()=>{r(1)},500),setTimeout(()=>{r(0),P(!0)},1e3),setTimeout(()=>{g(!1),P(!1)},2e3),setTimeout(()=>{g(!0),r(1)},2500),setTimeout(()=>{r(0),P(!0)},3e3),setTimeout(()=>{g(!1),P(!1)},4e3)];return()=>{z.forEach(clearTimeout)}},[]);const j=`${e.connectedAccount?.accountName} ${e.connectedAccount?.maskedAccountNumber}`;return o.jsxRuntimeExports.jsxs(Mr,{children:[o.jsxRuntimeExports.jsxs(Ir,{windowSize:u,children:[o.jsxRuntimeExports.jsxs(Wr,{shouldBounce:p,isActive:f==0,isAutoSlide:x,windowSize:u,children:[e.chargeCard?.cardHolderUser!=null?o.jsxRuntimeExports.jsxs($o,{windowSize:u,onClick:l,"data-testid":t.generateDataTestId("owner-name-copy-click"),onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1),children:[o.jsxRuntimeExports.jsxs(ht,{children:[Oe.cardDetails.owner,o.jsxRuntimeExports.jsxs(zo,{children:[o.jsxRuntimeExports.jsx(ko,{children:d===!0?o.jsxRuntimeExports.jsx(Po,{}):o.jsxRuntimeExports.jsx(To,{isHover:w})}),d||w?o.jsxRuntimeExports.jsx(Lo,{children:d?Ne.copyToClipBoard.copied:Ne.copyToClipBoard.copy}):null]})]}),o.jsxRuntimeExports.jsx(vo,{children:o.jsxRuntimeExports.jsx(Pt,{children:a})})]}):null,c!=null?o.jsxRuntimeExports.jsxs(wo,{windowSize:u,onClick:m,"data-testid":t.generateDataTestId("address-copy-click"),onMouseEnter:()=>b(!0),onMouseLeave:()=>b(!1),children:[o.jsxRuntimeExports.jsxs(ht,{children:[Oe.cardDetails.address,o.jsxRuntimeExports.jsxs(zo,{children:[o.jsxRuntimeExports.jsx(ko,{children:h===!0?o.jsxRuntimeExports.jsx(Po,{}):o.jsxRuntimeExports.jsx(To,{isHover:v})}),h||v?o.jsxRuntimeExports.jsx(Lo,{children:h?Ne.copyToClipBoard.copied:Ne.copyToClipBoard.copy}):null]})]}),o.jsxRuntimeExports.jsx(Br,{windowSize:u,children:o.jsxRuntimeExports.jsx(t.AddressValue,{address:c,isDisabled:"readonly",style:{padding:t.Space.sp0,...t.textStyles.smallRegular.cssObject,textTransform:"capitalize",alignItems:"flex-start",backgroundColor:S.colors.grey4,cursor:"pointer",flexDirection:u==="small"?"column":"row",gap:ye.addressValueGap.valuePx(u),textAlign:u==="small"?"left":"right"}})})]}):null]}),o.jsxRuntimeExports.jsxs(Hr,{isActive:f==1,isAutoSlide:x,children:[e.chargeCard?.type.code.includes("debit")===!0?o.jsxRuntimeExports.jsxs($o,{windowSize:u,children:[o.jsxRuntimeExports.jsx(ht,{children:Oe.connectedAccount}),o.jsxRuntimeExports.jsxs(Fr,{children:[o.jsxRuntimeExports.jsx(oi,{children:o.jsxRuntimeExports.jsx(si,{})}),o.jsxRuntimeExports.jsx(Pt,{children:j})]})]}):null,o.jsxRuntimeExports.jsxs(wo,{windowSize:u,children:[o.jsxRuntimeExports.jsx(ht,{children:Oe.department}),o.jsxRuntimeExports.jsx(vo,{children:o.jsxRuntimeExports.jsx(Pt,{children:n==="In-Progress"||n==="Not-Started"?o.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"Small",start:!0}):e.chargeCard?.department?.className??Ne.strings.hyphen})})]})]})]}),o.jsxRuntimeExports.jsx(Us.NavigationDots,{numberOfDots:2,activeIndex:f,handleClick:r,style:{marginTop:"12px",marginBottom:ye.navigationMarginBottom.valuePx(u)},dotStyle:{width:t.Space.sp2,height:t.Space.sp2},spendManagementPromoCardActive:!0,promoColor:S.colors.primary,promoColorHover:S.colors.grey1})]})},Lr=({chargeCardDetailView:e,classListFetchState:n,isChargeCardFeatureEnabled:a,creditAccount:c,creditAccountRepayment:d,isDebitCard:h,controllerEmails:l,productInformation:m,creditAccountInformation:u,debitAccountInformation:S,cardIssuedByRoles:f,cardIssuedByDepartmentName:r,cardHolderRoles:x,cardHolderDepartmentName:g,analytics:w})=>{if(e.chargeCard!=null&&n==="Completed"&&e.transactionStatistics.fetchState==="Completed"&&(!a||c.fetchState==="Completed"&&d.fetchState==="Completed")&&(!h||e.depositAccountLimitFetchState.fetchState==="Completed")){const y=e.chargeCard.type.code.includes("physical")?e.chargeCard.cardActivationAttemptHistory[0]?.timestamp:e.chargeCard.createTime;w.trackCardsUpdateSpendLimitInitiated(l,m,{cardId:e.chargeCard.id,cardName:e.chargeCard.cardName,cardType:we.getCardTypeForAnalytics(e.chargeCard.type.code),cardCategory:e.chargeCard.type.code.includes("physical")?"physical":"virtual",cardLimit:t.roundAmountIfNeeded(e.chargeCard.limit.amount),cardLastFourDigits:e.chargeCard.accountLast4,cardStatus:e.chargeCard.status.code,cardAssignedDate:e.chargeCard.createTime?.format(at.analytics.MMMDashDDDashYYYYFormat),cardIssuedDate:e.chargeCard.providerCardCreateTime?.format(at.analytics.MMMDashDDDashYYYYFormat),cardActivatedDate:y?.format(at.analytics.MMMDashDDDashYYYYFormat),cardLimitFrequency:e.chargeCard.creditLimitFrequency.name,cardSpentAmount:t.roundAmountIfNeeded(e.chargeCard.balance.amount),cardAvailableLimit:t.roundAmountIfNeeded(e.chargeCard.available.amount),cardUtilizationPercent:we.calculateCardUtilizationPercent(e.chargeCard.limit.amount,e.chargeCard.available.amount),cardUtilizationAmount:t.roundAmountIfNeeded(we.getCardUtilizedAmount(e.chargeCard)),totalNumberOfDeclinedTransactions:e.transactionStatistics.statistics.totalNumberOfDeclinedTransactions,numberOfDeclinedTransactionsCurrentMonth:e.transactionStatistics.statistics.numberOfDeclinedTransactionsCurrentMonth,totalNumberOfPaidTransactions:e.transactionStatistics.statistics.totalNumberOfPaidTransactions,numberOfPaidTransactionsCurrentMonth:e.transactionStatistics.statistics.numberOfPaidTransactionsCurrentMonth,totalNumberOfCanceledTransactions:e.transactionStatistics.statistics.totalNumberOfCanceledTransactions,numberOfCanceledTransactionsCurrentMonth:e.transactionStatistics.statistics.numberOfCanceledTransactionsCurrentMonth,totalNumberOfAuthorizedTransactions:e.transactionStatistics.statistics.totalNumberOfAuthorizedTransactions,numberOfAuthorizedTransactionsCurrentMonth:e.transactionStatistics.statistics.numberOfAuthorizedTransactionsCurrentMonth,totalNumberOfTransactionsWithReceipts:e.transactionStatistics.statistics.totalNumberOfTransactionsWithReceipts,numberOfTransactionsWithReceiptsCurrentMonth:e.transactionStatistics.statistics.numberOfTransactionsWithReceiptsCurrentMonth},{cardIssuedByName:t.getFullName(e.chargeCard.cardCreatedByUser,!1),cardIssuedByEmail:e.chargeCard.cardCreatedByUser?.email,cardIssuedByUserId:e.chargeCard.cardCreatedByUser?.userId,cardIssuedByRole:f,cardIssuedByDepartment:r},{cardholderName:t.getFullName(e.chargeCard.cardHolderUser,!1),cardholderEmail:e.chargeCard.cardHolderUser?.email,cardholderRole:x,cardholderUserId:e.chargeCard.cardHolderUser?.userId,cardholderDepartment:g},"Card Detail","Hyperlink",(e?.chargeCard?.recommendations??[]).map(v=>t.roundAmountIfNeeded(v.creditLimit.amount)),u,S)}},Tr=s.div`
+  display: flex;
+  align-items: ${e=>e.windowSize==="medium-compact"||e.windowSize==="medium-regular"?"flex-start":"center"};
+  gap: ${e=>ye.remainingAmountContainerGap.valuePx(e.windowSize)};
+  flex-direction: ${e=>e.windowSize==="medium-compact"||e.windowSize==="medium-regular"?"column":"row"};
+`,Pr=s(t.SmallRegular)`
+  color: ${e=>e.theme.colors.primary};
+`,zr=s(t.SmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+`,Ar=s.div`
+  display: flex;
+  align-items: end;
+`,Mr=s.div`
+  width: 100%;
+  overflow: hidden;
+`,Ir=s.div`
+  width: 100%;
+  gap: ${t.Space.sp3};
+  background-color: ${e=>e.theme.colors.grey4};
+  border: 1px solid ${e=>e.theme.colors.background};
+  border-radius: ${t.Space.sp2};
+  padding: ${t.Space.sp3};
+  box-sizing: border-box;
+  position: relative;
+  height: ${e=>ye.addressSectionHeight.valuePx(e.windowSize)};
+`,Wr=s.div`
+  display: flex;
+  justify-content: unset;
+  gap: ${e=>ye.addressSectionGap.valuePx(e.windowSize)};
+  position: absolute;
+  width: 100%;
+  ${({isActive:e,isAutoSlide:n})=>W.css`
+    transform: translateX(${e?"0%":n?"-10%":"-105%"});
+  `};
+  transition: transform
+    ${({isAutoSlide:e,shouldBounce:n})=>`${e?"0.5s":"0.3s"} ${n?"cubic-bezier(0.175, 0.885, 0.32, 1.125)":"ease-out"}`};
+`,Hr=s.div`
+  display: flex;
+  justify-content: unset;
+  ${({isActive:e,isAutoSlide:n})=>W.css`
+    transform: translateX(${e?n?"95%":"0%":"105%"});
+  `};
+  transition: transform
+    ${({isAutoSlide:e,isActive:n})=>e&&n?"0.5s":"0.3s"}
+    ease-out;
+  gap: ${t.Space.sp8};
+`,$o=s.div`
+  min-width: ${e=>ye.ownerWebMinWidth.valuePx(e.windowSize)};
+  cursor: pointer;
+`,ht=s(t.SmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+  display: flex;
+  align-items: center;
+`,vo=s.div``,Fr=s.div`
+  display: flex;
+  align-items: flex-start;
+  gap: ${t.Space.sp1};
+`,Br=s.div`
+  ${({windowSize:e})=>e==="small"?W.css`
+          max-width: 220px;
+        `:null};
+`,Pt=s(t.SmallRegular)`
+  color: ${e=>e.theme.colors.primary};
+  text-transform: capitalize;
+`,wo=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: "baseline";
+  justify-content: center;
+  cursor: pointer;
+`,Nr=s.div`
+  display: flex;
+  flex-direction: ${e=>e.windowSize==="small"||!e.isOwnCard?"column":"row"};
+  justify-content: center;
+  align-items: center;
+  gap: ${e=>ye.rightSectionGap.valuePx(e.windowSize)};
+  width: ${e=>e.windowSize==="small"?"100%":"max-content"};
+`,Or=s.div`
+  min-height: ${e=>`calc(${ye.rightSectionHeight.valuePx(e.windowSize)} + ${t.Space.sp2})`};
+  min-width: ${e=>`calc(${ye.rightSectionWidth.valuePx(e.windowSize)} + ${t.Space.sp2})`};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: ${e=>ye.cardContainerContentGap.valuePx(e.windowSize)};
+`,_r=s.div`
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: space-between;
+`,Zr=s.div`
+  display: flex;
+  flex-direction: ${e=>e.windowSize==="small"?"column":"row"};
+  align-items: center;
+
+  justify-content: space-between;
+  padding-top: ${t.Space.sp3};
+  padding-right: ${e=>ye.contentContainerPadding.valuePx(e.windowSize)};
+  padding-bottom: ${e=>ye.topSectionPaddingBottom.valuePx(e.windowSize)};
+  padding-left: ${e=>ye.contentContainerPadding.valuePx(e.windowSize)};
+  border-bottom: 1px solid ${e=>e.theme.colors.grey3};
+  background: ${e=>e.theme.colors.grey5};
+  gap: ${e=>ye.leftRightSectionGap.valuePx(e.windowSize)};
+`,Gr=s.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-bottom: ${({windowSize:e})=>ye.cardBalanceSectionMarginBottom.valuePx(e)};
+`,Ro=s.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+`,Ur=s(t.StyledText)`
+  color: ${e=>e.theme.colors.primary};
+  ${e=>`${Ht.spentAmount.style(e.windowSize)}`};
+`,qr=s.div`
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+  ${({windowSize:e})=>e==="small"?W.css`
+          margin-bottom: ${t.Space.sp4};
+        `:null};
+`,Dr=s.div`
+  display: flex;
+  flex-direction: ${({windowSize:e})=>e==="small"?"column":"row"};
+  align-items: ${({windowSize:e})=>e==="small"?"flex-start":"flex-end"};
+`,Yr=s(t.SmallRegularSp)`
+  color: ${e=>e.theme.colors.hero};
+  margin-right: ${t.Space.sp1};
+`,Kr=s(t.SmallRegularBtn)`
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: ${t.Space.sp0};
+  color: ${t.Colors.link};
+  &:hover {
+    text-decoration: underline;
+  }
+`,Jr=s.div`
+  display: flex;
+  align-items: flex-end;
+  gap: ${t.Space.sp1};
+`,Xr=s(t.SmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+`,Qr=s(t.SmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+`,Vr=s.div`
+  width: 100%;
+  height: ${t.Space.sp1};
+  display: flex;
+  margin: ${t.Space.sp2} ${t.Space.sp0};
+  border-radius: ${({windowSize:e})=>ye.barRadius.valuePx(e)};
+  background: ${e=>e.theme.colors.grey2};
+`,ei=s.div`
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  color: ${e=>e.theme.colors.primary};
+`,bo=s(t.StyledText)`
+  color: ${e=>e.theme.colors.primary};
+  ${e=>`${Ht.remainingAmount.style(e.windowSize)}`};
+`,Eo=s(t.LargeMedium)`
+  ${e=>`${Ht.remainingAmount.style(e.windowSize)}`};
+  color: ${e=>e.theme.colors.primary};
+`,ti=s.div`
+  background: ${t.Colors.success};
+  width: 0%;
+  height: ${t.Space.sp1};
+  transition: width 4s ease;
+`,ko=s.span`
+  display: flex;
+  color: ${e=>e.theme.colors.grey1};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Lo=s(t.ExtraSmallRegular)`
+  padding: ${t.Space.sp0} 2px;
+  color: ${t.Colors.heroDark};
+  background: ${t.Colors.blackColor};
+  border-radius: ${t.Space.sp1};
+  position: absolute;
+  left: 20px;
+`,To=s(t.SvgCopy)`
+  height: 12px;
+  width: 12px;
+  margin-left: ${t.Space.sp1};
+  color: ${e=>e.isHover?e.theme.colors.primary:e.theme.colors.grey2};
+  cursor: pointer;
+`,Po=s(t.SvgTickRoundFill)`
+  height: 12px;
+  width: 12px;
+  margin-left: ${t.Space.sp1};
+  color: ${t.Colors.success};
+`,oi=s.div`
+  width: 21px;
+  height: 21px;
+`,si=s(t.SvgZeniBrandCheckingAcc)`
+  color: ${t.Colors.brandColorOpal};
+  width: 100%;
+  height: 100%;
+`,zo=s.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+`,ct=t.appLocale.getLocalizedStrings().spendManagement.chargeCard.cardDetails.header,ni={key:"merchant",value:ct.merchant,sortOrder:"ascending",width:new t.ResponsiveSized(38,38)},ri={key:"paymentDate",value:ct.paymentDate,sortOrder:"ascending",width:new t.ResponsiveSized(21,21)},ii={key:"receipts",value:ct.receipts,sortOrder:"ascending",width:new t.ResponsiveSized(16,16)},ai={key:"type",value:ct.type,sortOrder:"ascending",width:new t.ResponsiveSized(14,14)},li={key:"amount",value:ct.amount,sortOrder:"ascending",width:new t.ResponsiveSized(11,11)},as=()=>[ni,ri,ii,ai,li],ot={headerLastColumnTopPadding:new t.ResponsiveSized(t.sp[0],t.sp[4]),headerLastColumnRightPadding:new t.ResponsiveSized(t.sp[3],t.sp[11]),headerLastColumnBottomPadding:new t.ResponsiveSized(t.sp[0],t.sp[4]),headerLastColumnLeftPadding:new t.ResponsiveSized(t.sp[3],t.sp[11]),headerHeight:new t.ResponsiveSized(ho.HEADER_HEIGHT_MOBILE,ho.HEADER_HEIGHT)};function ci({hideSorting:e,sortConfig:n,onColumnSortConfigChanged:a}){const c=o.useTheme(),d=t.useWindowSizeContext(),h=as(),l=(r,x)=>{let g=x;n.sortKey===r&&(g=x==="ascending"?"descending":"ascending"),a(r,g)},m=h.find(r=>r.key===n.sortKey)??h[0],u=r=>h.find(x=>x.key===r)?.value??"",S=h.map(r=>r.key),f=t.appLocale.getLocalizedStrings().spendManagement.chargeCard.cardList;return d==="small"?o.jsxRuntimeExports.jsxs(Ao,{windowSize:d,children:[o.jsxRuntimeExports.jsxs(mi,{children:[o.jsxRuntimeExports.jsx(hi,{children:o.jsxRuntimeExports.jsx(xi,{})}),o.jsxRuntimeExports.jsx(t.Picker$1,{title:f.sortBy,placeholder:f.sortBy,pickerValues:S,valueToLabel:u,selectedValue:n.sortKey,onPickerSelectionChanged:r=>{l(r,"ascending")},optionTextStyle:t.textStyles.smallRegular,titleTextStyle:t.textStyles.smallRegular,titleColor:c.colors.primary,selectedOptionColor:c.colors.hero,optionBackgroundColor:c.colors.grey5,downChevronVisible:!1,backgroundColor:c.colors.grey4,isDisabled:e})]}),o.jsxRuntimeExports.jsxs(fi,{hideSorting:e,onClick:()=>{e||l(m.key,m.sortOrder)},"data-testid":t.generateDataTestId("charge-card-trxn-small-header",n.sortKey),children:[o.jsxRuntimeExports.jsx(t.SmallRegular,{children:m.value}),e?null:o.jsxRuntimeExports.jsx(Mo,{sortDataValue:n.sortKey,headerData:m,children:o.jsxRuntimeExports.jsx(Io,{})})]})]}):o.jsxRuntimeExports.jsx(Ao,{windowSize:d,children:h.map(r=>o.jsxRuntimeExports.jsxs(pi,{hideSorting:e,sortDataValue:n.sortKey,actualDataValue:r.key,wrapperWidth:r.width,windowSize:d,children:[o.jsxRuntimeExports.jsxs(Si,{hideSorting:e,onClick:()=>{e||l(r.key,r.sortOrder)},"data-testid":t.generateDataTestId("charge-card-trxn-header",n.sortKey),children:[o.jsxRuntimeExports.jsx(t.SmallRegular,{children:r.value}),o.jsxRuntimeExports.jsx(Mo,{sortDataValue:n.sortKey,headerData:r,children:e?null:o.jsxRuntimeExports.jsx(Io,{})})]}),o.jsxRuntimeExports.jsx(gi,{sortDataValue:n.sortKey,windowSize:d,isVisible:e?!1:n.sortKey===r.key&&r.key!=="paymentDate",children:e?null:o.jsxRuntimeExports.jsx(ui,{onClick:()=>{e||l("paymentDate","ascending")},"data-testid":t.generateDataTestId("charge-card-trxn-close-sort",n.sortKey)})})]},r.key))})}const di=i.memo(ci),Ao=s(t.SmallRegular)`
+  top: ${t.Space.sp0};
+  left: ${t.Space.sp0};
+  min-height: ${e=>ot.headerHeight.valuePx(e.windowSize)};
+  max-height: ${e=>ot.headerHeight.valuePx(e.windowSize)};
+  width: auto;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${e=>`${ot.headerLastColumnTopPadding.valuePx(e.windowSize)} ${ot.headerLastColumnRightPadding.valuePx(e.windowSize)} ${ot.headerLastColumnBottomPadding.valuePx(e.windowSize)} ${ot.headerLastColumnLeftPadding.valuePx(e.windowSize)}`};
+  background-color: ${e=>e.theme.colors.grey4};
+  justify-content: space-between;
+  position: sticky;
+`,pi=s.div`
+  color: ${e=>e.sortDataValue===e.actualDataValue&&e.hideSorting===!1?e.theme.colors.primary:e.theme.colors.grey1};
+  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+  max-width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+  padding-left: ${t.Space.sp0};
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  left: ${t.Space.sp0};
+  justify-content: ${e=>e.actualDataValue==="amount"?"flex-end":"flex-start"};
+  ${e=>e.actualDataValue==="paymentDate"?W.css`
+          flex: 1 1 auto;
+        `:W.css`
+          padding-left: ${t.Space.sp0};
+        `};
+  box-sizing: border-box;
+  overflow: hidden;
+`,ui=s(t.SvgCloseRound)`
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+`,Mo=s.div`
+  display: flex;
+  align-items: center;
+  transform: ${e=>e.sortDataValue===e.headerData.key&&e.headerData.sortOrder==="descending"?"rotate(180deg)":"rotate(0deg)"};
+  ${e=>e.headerData.sortOrder==="ascending"?"padding-top: 2px":"padding-bottom: 2px"}
+`,Io=s(t.SvgArrowTailTop)`
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  color: inherit;
+`,mi=s.div`
+  gap: ${t.Space.sp1};
+  display: flex;
+`,xi=s(t.SvgSortBy)`
+  width: 12px;
+  height: 12px;
+  color: ${e=>e.theme.colors.grey1};
+`,hi=s.div`
+  margin-right: ${t.Space.sp1};
+  display: flex;
+  align-items: center;
+`,gi=s.div`
+  display: ${e=>e.isVisible?"flex":"none"};
+  align-items: center;
+  padding-top: 2px;
+`,Si=s.div`
+  display: flex;
+  cursor: ${e=>e.hideSorting?"default":"pointer"};
+  gap: ${e=>e.hideSorting?t.Space.sp0:"5px"};
+  &:hover {
+    color: ${e=>e.hideSorting?"inherit":e.theme.colors.primary};
+  }
+`,fi=s.div`
+  display: flex;
+  cursor: ${e=>e.hideSorting?"default":"pointer"};
+  gap: ${e=>e.hideSorting?t.Space.sp0:"5px"};
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.hideSorting?e.theme.colors.hero:e.theme.colors.primary};
+  }
+`;function ls(e,n,a){return Ci(e,n,a)}async function Ci(e,n,a,c){const d=`${e}?query=${encodeURIComponent(JSON.stringify(a))}`,h=t.appLocale.getLocalizedStrings().downloadReport;try{const l=await o.fetch(d,{method:"GET",headers:{"zeni-user-id":n.userId,"zeni-tenant-id":n.tenantId,"zeni-session-id":n.sessionId}});if(l.ok){const m=c??t.getFileNameFromResponseHeaders(l.headers,"Charge Card Transaction Receipt.pdf"),u=await l.arrayBuffer();o.fileDownload(u,m)}else console.error(`${h.reportErrorMessage} ${l.statusText}`)}catch(l){console.error(`${h.reportErrorMessage} ${JSON.stringify(l)}`)}}async function cs(e,n,a){const c=`${e}?query=${encodeURIComponent(JSON.stringify(a))}`,d=t.appLocale.getLocalizedStrings().downloadReport;try{const h=await fetch(c,{method:"GET",headers:{"zeni-user-id":n.userId,"zeni-tenant-id":n.tenantId,"zeni-session-id":n.sessionId}});if(h.ok)return await h.json();console.error(`${d.reportErrorMessage} ${h.statusText}`)}catch(h){throw console.error(`${d.reportErrorMessage} ${JSON.stringify(h)}`),h}return[]}const yi=e=>C.createElement("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},C.createElement("path",{d:"M23.3584 10.0417L23.2319 9.30243L21.7534 9.55562L21.88 10.2949L23.3584 10.0417ZM20.3835 6.50175L20.7954 7.1285L22.0489 6.30467L21.637 5.67791L20.3835 6.50175ZM18.3213 2.36228L17.6946 1.95036L16.8707 3.20388L17.4975 3.61579L18.3213 2.36228ZM13.7044 2.11928L14.4436 2.24587L14.6968 0.767397L13.9576 0.640799L13.7044 2.11928ZM10.041 0.640799L9.30172 0.767397L9.55492 2.24587L10.2942 2.11928L10.041 0.640799ZM6.50104 3.6158L7.1278 3.20388L6.30397 1.95036L5.67721 2.36228L6.50104 3.6158ZM2.36158 5.67792L1.94966 6.30467L3.20318 7.12851L3.61509 6.50175L2.36158 5.67792ZM2.11857 10.2949L2.24517 9.55562L0.766695 9.30242L0.640097 10.0417L2.11857 10.2949ZM0.640097 13.9583L0.766695 14.6975L2.24517 14.4443L2.11857 13.7051L0.640097 13.9583ZM3.61509 17.4982L3.20318 16.8714L1.94966 17.6953L2.36158 18.322L3.61509 17.4982ZM5.67721 21.6377L6.30397 22.0496L7.1278 20.7961L6.50105 20.3842L5.67721 21.6377ZM10.2942 21.8807L9.55492 21.7541L9.30172 23.2326L10.041 23.3592L10.2942 21.8807ZM13.9576 23.3592L14.6968 23.2326L14.4436 21.7541L13.7044 21.8807L13.9576 23.3592ZM17.4975 20.3842L16.8707 20.7961L17.6946 22.0496L18.3213 21.6377L17.4975 20.3842ZM21.637 18.322L22.0489 17.6953L20.7954 16.8714L20.3835 17.4982L21.637 18.322ZM21.88 13.7051L21.7534 14.4443L23.2319 14.6975L23.3584 13.9583L21.88 13.7051ZM23.5243 12C23.5243 11.333 23.4675 10.6786 23.3584 10.0417L21.88 10.2949C21.9748 10.8485 22.0243 11.4182 22.0243 12H23.5243ZM21.637 5.67791C20.7702 4.35908 19.6402 3.22904 18.3213 2.36228L17.4975 3.61579C18.6453 4.37014 19.6291 5.35396 20.3835 6.50175L21.637 5.67791ZM13.9576 0.640799C13.3206 0.531717 12.6663 0.474976 11.9993 0.474976V1.97498C12.5811 1.97498 13.1507 2.02446 13.7044 2.11928L13.9576 0.640799ZM11.9993 0.474976C11.3323 0.474976 10.6779 0.531717 10.041 0.640799L10.2942 2.11928C10.8478 2.02446 11.4175 1.97498 11.9993 1.97498V0.474976ZM5.67721 2.36228C4.35838 3.22904 3.22833 4.35909 2.36158 5.67792L3.61509 6.50175C4.36944 5.35396 5.35326 4.37014 6.50104 3.6158L5.67721 2.36228ZM0.640097 10.0417C0.531015 10.6786 0.474274 11.333 0.474274 12H1.97427C1.97427 11.4182 2.02375 10.8485 2.11857 10.2949L0.640097 10.0417ZM0.474274 12C0.474274 12.667 0.531015 13.3213 0.640097 13.9583L2.11857 13.7051C2.02375 13.1514 1.97427 12.5818 1.97427 12H0.474274ZM2.36158 18.322C3.22834 19.6409 4.35838 20.7709 5.67721 21.6377L6.50105 20.3842C5.35326 19.6298 4.36944 18.646 3.61509 17.4982L2.36158 18.322ZM10.041 23.3592C10.6779 23.4682 11.3323 23.525 11.9993 23.525V22.025C11.4175 22.025 10.8478 21.9755 10.2942 21.8807L10.041 23.3592ZM11.9993 23.525C12.6663 23.525 13.3206 23.4682 13.9576 23.3592L13.7044 21.8807C13.1507 21.9755 12.5811 22.025 11.9993 22.025V23.525ZM18.3213 21.6377C19.6402 20.7709 20.7702 19.6409 21.637 18.322L20.3835 17.4982C19.6291 18.646 18.6453 19.6298 17.4975 20.3842L18.3213 21.6377ZM23.3584 13.9583C23.4675 13.3213 23.5243 12.667 23.5243 12H22.0243C22.0243 12.5818 21.9748 13.1514 21.88 13.7051L23.3584 13.9583Z",fill:"currentColor"}),C.createElement("path",{d:"M12 6.12244V17.8775",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),C.createElement("path",{d:"M17.8776 12H6.12245",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})),ds=e=>C.createElement("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},C.createElement("path",{d:"M16.7656 6.60254H8.51562C8.10142 6.60254 7.76562 6.91434 7.76562 7.29897V20.357C7.76562 20.7416 8.10142 21.0534 8.51562 21.0534H16.7656C17.1798 21.0534 17.5156 20.7416 17.5156 20.357V7.29897C17.5156 6.91434 17.1798 6.60254 16.7656 6.60254Z",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),C.createElement("path",{d:"M12.6875 9.5C13.1017 9.5 13.4375 9.83676 13.4375 10.251V10.416C13.7384 10.4808 13.9968 10.5753 14.2031 10.6699C14.3853 10.7536 14.5315 10.8389 14.6348 10.9053C14.6862 10.9383 14.7281 10.967 14.7588 10.9893L14.8096 11.0283C14.8112 11.0296 14.8131 11.0311 14.8145 11.0322L14.8174 11.0332L14.8184 11.0342V11.0352C15.1412 11.2946 15.1931 11.767 14.9336 12.0898C14.6742 12.4122 14.2026 12.4632 13.8799 12.2041L13.8789 12.2051L13.8779 12.2041C13.8683 12.1971 13.8493 12.1838 13.8232 12.167C13.7703 12.133 13.6869 12.0832 13.5781 12.0332C13.3579 11.9321 13.0482 11.834 12.6826 11.834C12.4165 11.8341 12.1531 11.9229 11.9727 12.0518C11.7904 12.182 11.7656 12.2912 11.7656 12.334C11.7656 12.4332 11.7869 12.4702 11.7939 12.4814C11.8035 12.4966 11.8301 12.5304 11.9082 12.5752C12.0988 12.6841 12.389 12.754 12.8398 12.8506C13.222 12.9325 13.766 13.042 14.2002 13.29C14.4338 13.4235 14.6681 13.613 14.8408 13.8877C15.0164 14.1672 15.0986 14.4883 15.0986 14.834C15.0986 15.5055 14.7062 16.0208 14.2637 16.3369C14.0193 16.5114 13.7364 16.6423 13.4375 16.7266V16.917C13.4375 17.3312 13.1017 17.667 12.6875 17.667C12.2735 17.6668 11.9375 17.3311 11.9375 16.917V16.7539C11.6322 16.689 11.3697 16.5938 11.1611 16.498C10.9789 16.4144 10.8327 16.329 10.7295 16.2627C10.678 16.2296 10.6361 16.201 10.6055 16.1787L10.5547 16.1396C10.553 16.1383 10.5512 16.1368 10.5498 16.1357L10.5479 16.1348L10.5459 16.1328C10.2233 15.8734 10.1715 15.4009 10.4307 15.0781C10.6898 14.7557 11.1615 14.7046 11.4844 14.9629L11.4814 14.96C11.4826 14.9608 11.4843 14.9624 11.4863 14.9639C11.4959 14.9708 11.5148 14.9841 11.541 15.001C11.594 15.035 11.678 15.0846 11.7871 15.1348C12.0073 15.2359 12.317 15.3339 12.6826 15.334C12.9487 15.3339 13.2121 15.245 13.3926 15.1162C13.5747 14.986 13.5986 14.8768 13.5986 14.834C13.5986 14.7337 13.5771 14.6974 13.5703 14.6865C13.5607 14.6712 13.5343 14.6375 13.4561 14.5928C13.2655 14.484 12.976 14.414 12.5254 14.3174C12.1431 14.2355 11.5983 14.1261 11.1641 13.8779C10.9306 13.7444 10.696 13.5549 10.5234 13.2803C10.3479 13.0008 10.2656 12.6796 10.2656 12.334C10.2656 11.6627 10.6582 11.1472 11.1006 10.8311C11.3477 10.6545 11.6347 10.5226 11.9375 10.4385V10.251C11.9375 9.8369 12.2735 9.50022 12.6875 9.5Z",fill:"currentColor"}),C.createElement("path",{d:"M3.27344 2.94629H20.3534C20.5381 2.94629 20.7152 3.01966 20.8459 3.15027C20.9764 3.28087 21.0498 3.45801 21.0498 3.64272V7.82129",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),C.createElement("path",{d:"M3.24994 21.5894C3.6641 21.5893 3.99994 21.2535 3.99994 20.8394V8.37549L4.72748 9.10303C5.02038 9.39591 5.49514 9.39592 5.78803 9.10303C6.08091 8.81014 6.08091 8.33537 5.78803 8.04248L3.7851 6.03955C3.49221 5.74666 3.01745 5.74667 2.72455 6.03955C2.71669 6.04741 2.70953 6.05585 2.70209 6.06396C2.68584 6.07767 2.66955 6.09163 2.65424 6.10693L0.711857 8.04932C0.418964 8.34221 0.418964 8.81795 0.711857 9.11084C1.00469 9.40341 1.47957 9.40341 1.7724 9.11084L2.49994 8.3833V20.8394C2.49994 21.2536 2.83573 21.5894 3.24994 21.5894Z",fill:"currentColor"})),ps=e=>C.createElement("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},C.createElement("path",{d:"M16.7656 6.60254H8.51562C8.10142 6.60254 7.76562 6.91434 7.76562 7.29897V20.357C7.76562 20.7416 8.10142 21.0534 8.51562 21.0534H16.7656C17.1798 21.0534 17.5156 20.7416 17.5156 20.357V7.29897C17.5156 6.91434 17.1798 6.60254 16.7656 6.60254Z",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),C.createElement("path",{d:"M12.6875 9.5C13.1017 9.5 13.4375 9.83676 13.4375 10.251V10.416C13.7384 10.4808 13.9968 10.5753 14.2031 10.6699C14.3853 10.7536 14.5315 10.8389 14.6348 10.9053C14.6862 10.9383 14.7281 10.967 14.7588 10.9893L14.8096 11.0283C14.8112 11.0296 14.8131 11.0311 14.8145 11.0322L14.8174 11.0332L14.8184 11.0342V11.0352C15.1412 11.2946 15.1931 11.767 14.9336 12.0898C14.6742 12.4122 14.2026 12.4632 13.8799 12.2041L13.8789 12.2051L13.8779 12.2041C13.8683 12.1971 13.8493 12.1838 13.8232 12.167C13.7703 12.133 13.6869 12.0832 13.5781 12.0332C13.3579 11.9321 13.0482 11.834 12.6826 11.834C12.4165 11.8341 12.1531 11.9229 11.9727 12.0518C11.7904 12.182 11.7656 12.2912 11.7656 12.334C11.7656 12.4332 11.7869 12.4702 11.7939 12.4814C11.8035 12.4966 11.8301 12.5304 11.9082 12.5752C12.0988 12.6841 12.389 12.754 12.8398 12.8506C13.222 12.9325 13.766 13.042 14.2002 13.29C14.4338 13.4235 14.6681 13.613 14.8408 13.8877C15.0164 14.1672 15.0986 14.4883 15.0986 14.834C15.0986 15.5055 14.7062 16.0208 14.2637 16.3369C14.0193 16.5114 13.7364 16.6423 13.4375 16.7266V16.917C13.4375 17.3312 13.1017 17.667 12.6875 17.667C12.2735 17.6668 11.9375 17.3311 11.9375 16.917V16.7539C11.6322 16.689 11.3697 16.5938 11.1611 16.498C10.9789 16.4144 10.8327 16.329 10.7295 16.2627C10.678 16.2296 10.6361 16.201 10.6055 16.1787L10.5547 16.1396C10.553 16.1383 10.5512 16.1368 10.5498 16.1357L10.5479 16.1348L10.5459 16.1328C10.2233 15.8734 10.1715 15.4009 10.4307 15.0781C10.6898 14.7557 11.1615 14.7046 11.4844 14.9629L11.4814 14.96C11.4826 14.9608 11.4843 14.9624 11.4863 14.9639C11.4959 14.9708 11.5148 14.9841 11.541 15.001C11.594 15.035 11.678 15.0846 11.7871 15.1348C12.0073 15.2359 12.317 15.3339 12.6826 15.334C12.9487 15.3339 13.2121 15.245 13.3926 15.1162C13.5747 14.986 13.5986 14.8768 13.5986 14.834C13.5986 14.7337 13.5771 14.6974 13.5703 14.6865C13.5607 14.6712 13.5343 14.6375 13.4561 14.5928C13.2655 14.484 12.976 14.414 12.5254 14.3174C12.1431 14.2355 11.5983 14.1261 11.1641 13.8779C10.9306 13.7444 10.696 13.5549 10.5234 13.2803C10.3479 13.0008 10.2656 12.6796 10.2656 12.334C10.2656 11.6627 10.6582 11.1472 11.1006 10.8311C11.3477 10.6545 11.6347 10.5226 11.9375 10.4385V10.251C11.9375 9.8369 12.2735 9.50022 12.6875 9.5Z",fill:"currentColor"}),C.createElement("path",{d:"M3.27344 2.94629H20.3534C20.5381 2.94629 20.7152 3.01966 20.8459 3.15027C20.9764 3.28087 21.0498 3.45801 21.0498 3.64272V7.82129",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),C.createElement("path",{d:"M3.24994 5.81982C3.6641 5.81989 3.99994 6.15565 3.99994 6.56982V19.0337L4.72748 18.3062C5.02038 18.0133 5.49514 18.0133 5.78803 18.3062C6.08091 18.599 6.08091 19.0738 5.78803 19.3667L3.7851 21.3696C3.49221 21.6625 3.01745 21.6625 2.72455 21.3696C2.71669 21.3618 2.70953 21.3533 2.70209 21.3452C2.68584 21.3315 2.66955 21.3175 2.65424 21.3022L0.711857 19.3599C0.418964 19.067 0.418964 18.5912 0.711857 18.2983C1.00469 18.0058 1.47957 18.0058 1.7724 18.2983L2.49994 19.0259V6.56982C2.49994 6.15561 2.83573 5.81982 3.24994 5.81982Z",fill:"currentColor"})),{dateFormat:ji,spendManagement:{chargeCard:{cardDetails:Wo}},common:{strings:{hyphen:$i},tooltips:{addMissingReceipt:vi,addReceipt:wi,viewReceipt:Ri}}}=t.appLocale.getLocalizedStrings(),Be={containerPaddingLeft:new t.ResponsiveSized(t.sp[3],t.sp[4]),containerPaddingRight:new t.ResponsiveSized(t.sp[3],t.sp[4]),containerPaddingTop:new t.ResponsiveSized(t.sp[2],t.sp[3]),containerPaddingBottom:new t.ResponsiveSized(t.sp[2],t.sp[3]),containerMarginLeft:new t.ResponsiveSized(t.sp[4],t.sp[8]),webkitLineClamp:new t.ResponsiveSized(2,1,1,1,1)},bi=(e,n)=>e.attachments!=null&&e.attachments.length>0?Ri:e.amount.amount<=n.amount?wi:vi,us=(e,n,a,c)=>e.attachments!=null&&e.attachments.length>0?o.jsxRuntimeExports.jsx(Di,{onClick:d=>{d.stopPropagation(),c()},"data-testid":t.generateDataTestId("card-transaction-row-view-receipt",e.id)}):e.amount.amount<=n.amount?o.jsxRuntimeExports.jsx(Ji,{onClick:d=>{d.stopPropagation(),a()},"data-testid":t.generateDataTestId("card-transaction-row-optional-upload-receipt",e.id)}):o.jsxRuntimeExports.jsx(Ki,{onClick:d=>{d.stopPropagation(),a()},"data-testid":t.generateDataTestId("card-transaction-row-upload-receipt",e.id)}),Ei=({cardsEndPoint:e,documentAiReceiptMaxSizeLimit:n,isSnackbarOpen:a,isAiCategorizationEnabledForCardsTransactions:c,transactionAttachmentsEndpointToFetch:d,transactionAttachmentEndpointToDownload:h,cardId:l,uploadReceiptsFetchState:m,uploadReceiptsShowTick:u,isViewReceiptClickedImmediatelyAfterUpload:S,authParams:f,transaction:r,receiptRequiredAboveAmount:x,updateChargeCardTransactionAttachments:g,onUploadReceiptComplete:w,updateChargeCardTransactionUploadReceiptsFetchStatus:y,updateChargeCardTransactionReceiptsShowTick:v,updateChargeCardTransactionIsViewReceiptClicked:b,removeSnackbar:p,onChargeCardTransactionRowClick:P})=>{const j=t.useWindowSizeContext(),[z,H]=i.useState(!1),[R,N]=i.useState([]),[X,U]=i.useState(null);i.useEffect(()=>{!a&&S&&(ne(T[0]),V())},[a,S]);const T=r.attachments?.filter(B=>B.contentType!=null&&t.allowedDocumentPreviewContentType.includes(B.contentType))??[],[K,ne]=i.useState(T[0]),[ee,Q]=i.useState([]),[I,O]=i.useState(void 0);i.useEffect(()=>{async function B(Z){ee.includes(Z.attachment_id)?console.warn(`Attachment with ID ${Z.attachment_id} is already getting downloaded`):(Q([Z.attachment_id,...ee]),await ls(h,f,Z),Q(o.Remove(ee,Y=>Y==Z.attachment_id)))}I!=null&&(B({card_id:l,transaction_id:r.id,attachment_id:I}),O(void 0))},[I]);const te=()=>{b(r.id,l,!1),H(!1),U(null),N([]),T.length>0&&ne(T[0])},V=()=>{H(!0);const B=T.map(Y=>Y.id);async function Z(Y){return await cs(d,f,Y)}Z({card_id:l,transaction_id:r.id,attachment_ids:B}).then(Y=>{N(Y),Y.length>0&&U(Y[0])})},{merchant:re,createTime:oe,transactionType:E,thirdPartyTransactionId:se}=r,q=()=>{a?(p(),b(r.id,l,!0)):(ne(T[0]),V())},G=i.useRef(null);async function $(B,Z){y(r.id,l,"In-Progress"),await Qo.uploadReceipts(`${e}/1.0/cards/transactions/${r.id}/attachments`,f,B,Z).then(Y=>{Y!=null&&g(r.id,Y),y(r.id,l,"Completed"),v(r.id,l,!0),setTimeout(()=>{v(r.id,l,!1),w(!0)},2e3)}).catch(Y=>{y(r.id,l,"Error"),w(!1,Y)})}const _=()=>{G.current?.click()},ie=B=>{if(B.target.files!=null){const Z=B.target.files,Y=[],ue=[];for(let me=0;me<Z.length;me++)Y.push(Z[me].name),ue.push(Z[me]);$?.(ue,Y)}},D=as(),L=t.getChargeCardTransactionStatus(r.transactionStatus),le=c?re.brandName??re.name:re.name,ae=t.amountToString("0,0.00",r.amount),F=E.code==="transfer",he=se!=null&&c,pe=F&&r.direction==="debit",J=F&&r.direction==="credit";return o.jsxRuntimeExports.jsxs(zi,{windowSize:j,isClickable:he,"data-testid":t.generateDataTestId("card-transaction-row",r.id),onClick:B=>{B.stopPropagation(),he&&P(E.code,se)},children:[o.jsxRuntimeExports.jsx(Ai,{children:o.jsxRuntimeExports.jsxs(Mi,{children:[o.jsxRuntimeExports.jsxs(Ii,{windowSize:j,responsiveWidth:D[0].width,children:[pe?o.jsxRuntimeExports.jsx(Ni,{}):J?o.jsxRuntimeExports.jsx(Oi,{}):o.jsxRuntimeExports.jsx(_i,{src:re.logo?.url?.toString()}),o.jsxRuntimeExports.jsx(Wi,{windowSize:j,hasMarginRight:L.code==="paid",children:le}),L.code!=="paid"?o.jsxRuntimeExports.jsxs(Li,{children:[o.jsxRuntimeExports.jsx(Pi,{windowSize:j}),o.jsxRuntimeExports.jsx(Ti,{color:L.color,windowSize:j,children:L.value})]}):null]}),o.jsxRuntimeExports.jsx(Bi,{windowSize:j,responsiveWidth:D[1].width,children:o.jsxRuntimeExports.jsx(Zi,{children:oe.format(ji.visual.MMMDCommaYYYYformat)})}),o.jsxRuntimeExports.jsx(Ui,{windowSize:j,responsiveWidth:D[2].width,children:r.transactionStatus.code==="declined"||r.transactionStatus.code==="canceled"?$i:m?.fetchState==="In-Progress"?o.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"Small",start:!0}):u?o.jsxRuntimeExports.jsx(Yi,{}):o.jsxRuntimeExports.jsxs(t.Tooltip,{enterDelay:600,display:"flex",placement:"bottom",title:bi(r,x),children:[o.jsxRuntimeExports.jsx(ki,{"data-testid":t.generateDataTestId("card-transaction-row-upload-receipt",r.id),onClick:B=>{B.stopPropagation()},children:o.jsxRuntimeExports.jsx(t.FileInputElement,{name:"transactionLineAttachment",fileRef:G,sizeLimit:n,isSizeLimitForEachFile:!0,onFileChange:ie,multiple:!0,onFileSizeError:(B,Z)=>{B&&w(!1,{code:500,message:Z===!0?Wo.singleFileUploadSizeErrorMessage.replace("__maxFileSize__",t.formatFileSize(n,0)):Wo.multipleFileUploadSizeErrorMessage.replace("__maxFileSize__",t.formatFileSize(n,0))})}})}),us(r,x,_,q)]})}),o.jsxRuntimeExports.jsx(Gi,{windowSize:j,responsiveWidth:D[3].width,children:o.jsxRuntimeExports.jsx(qi,{title:E.name,children:E.name})}),o.jsxRuntimeExports.jsx(Hi,{windowSize:j,responsiveWidth:D[4].width,children:o.jsxRuntimeExports.jsx(Fi,{windowSize:j,title:t.amountToString("0,0.[00]",r.amount),children:r.direction==="debit"?ae:`-${ae}`})})]})}),z&&T.length>0?Xo.createPortal(o.jsxRuntimeExports.jsx(t.DocumentWithThumbnailView,{allFiles:R,fileSource:X,file:K,title:K.fileName,attachments:T,setFileSource:U,setShowFullScreenView:H,onCrossClick:te,setSelectedFileAttachment:ne,onDownloadClick:B=>{O(B.id)},handleTouchStart:()=>{},handleTouchMove:()=>{},handleTouchEnd:()=>{}}),document.body):null]})},ki=s.div``,Li=s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${t.Space.sp2};
+  margin-right: ${t.Space.sp4};
+`,Ti=s(t.ExtraSmallRegular)`
+  color: ${e=>e.color};
+`,Pi=s.div`
+  display: ${e=>e.windowSize==="small"?"none":"block"};
+  width: ${t.Space.sp1};
+  height: ${t.Space.sp1};
+  border-radius: 100%;
+  background-color: ${e=>e.theme.colors.grey1};
+`,zi=s.div`
+  display: flex;
+  background-color: ${e=>e.theme.colors.grey5};
+  padding-left: ${e=>Be.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${e=>Be.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${e=>Be.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${e=>Be.containerPaddingBottom.valuePx(e.windowSize)};
+  border: ${e=>`1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${e=>e.theme.mode==="dark"?`${t.Colors.dropShadowNormalDark} ${t.Space.sp0} 2px ${t.Space.sp1}`:`${t.Space.sp0} 2px ${t.Space.sp1} ${t.Colors.dropShadowNormalLight}`};
+  border-radius: ${t.Space.sp2};
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    border-color: ${e=>e.theme.colors.primary};
+    color: ${e=>e.theme.colors.primary};
+  }
+  margin-right: ${e=>Be.containerMarginLeft.valuePx(e.windowSize)};
+  margin-left: ${e=>Be.containerMarginLeft.valuePx(e.windowSize)};
+  box-sizing: border-box;
+  align-items: center;
+  cursor: ${e=>e.isClickable?"pointer":"default"};
+`,Ai=s.div`
+  display: block;
+  width: 100%;
+`,Mi=s.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+`,Ii=s.div`
+  display: flex;
+  flex-direction: row;
+  column-gap: ${t.Space.sp2};
+  align-items: center;
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+`,Wi=s(t.StandardRegular)`
+  margin-right: ${e=>e.hasMarginRight?t.Space.sp3:t.Space.sp0};
+  color: inherit;
+  -webkit-line-clamp: ${e=>Be.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-transform: capitalize;
+`,Hi=s(t.StandardRegular)`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+`,Fi=s(t.StandardRegular)`
+  color: inherit;
+  flex-grow: 1;
+  -webkit-line-clamp: ${e=>Be.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,Bi=s.div`
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: center;
+`,ms=e=>W.css`
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+  color: ${e.colors.hero};
+`,Ni=s(ps)`
+  ${({theme:e})=>ms(e)}
+`,Oi=s(ds)`
+  ${({theme:e})=>ms(e)}
+`,_i=s.img`
+  display: flex;
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+`,Zi=s(t.StandardRegular)`
+  color: inherit;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,Gi=s(t.StandardRegular)`
+  color: ${e=>e.theme.colors.hero};
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+`,Ui=s.div`
+  color: ${e=>e.theme.colors.hero};
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+`,qi=s(t.ExtraSmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 1px 6px;
+  border-radius: ${t.Space.sp1};
+  border: 1px solid ${e=>e.theme.colors.grey1};
+`,Di=s(t.SvgDocuments)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Yi=s(t.SvgTickRoundFill)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  color: ${t.Colors.success};
+`,Ki=s(t.SvgAddRound)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.brandColorGoldDark};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Ji=s(yi)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,{dateFormat:Xi,spendManagement:{chargeCard:{cardDetails:zt}},common:{strings:{hyphen:Qi}}}=t.appLocale.getLocalizedStrings(),Vi={webkitLineClamp:new t.ResponsiveSized(2,1,1,1,1)},ea=({cardsEndPoint:e,documentAiReceiptMaxSizeLimit:n,isSnackbarOpen:a,isAiCategorizationEnabledForCardsTransactions:c,transactionAttachmentsEndpointToFetch:d,transactionAttachmentEndpointToDownload:h,cardId:l,isViewReceiptClickedImmediatelyAfterUpload:m,uploadReceiptsShowTick:u,uploadReceiptsFetchState:S,authParams:f,transaction:r,receiptRequiredAboveAmount:x,onUploadReceiptComplete:g,updateChargeCardTransactionAttachments:w,updateChargeCardTransactionReceiptsShowTick:y,updateChargeCardTransactionIsViewReceiptClicked:v,updateChargeCardTransactionUploadReceiptsFetchStatus:b,removeSnackbar:p,onChargeCardTransactionRowClick:P})=>{const j=t.useWindowSizeContext(),[z,H]=i.useState(0),[R,N]=i.useState(0),[X,U]=i.useState(0),T=A=>{U(A),O(!0),q(E[A]),oe(te[A])};function K(A){H(A.targetTouches[0].clientX)}function ne(A){N(A.targetTouches[0].clientX)}function ee(A){return A<0?E.length+A:A%E.length}function Q(){z-R>50&&R!==0&&X<E.length-1?(T(ee(X+1)),H(0),N(0)):z-R<-50&&R!==0&&X>0&&(T(ee(X-1)),H(0),N(0))}const[I,O]=i.useState(!1),[te,V]=i.useState([]),[re,oe]=i.useState(null);i.useEffect(()=>{!a&&m&&(q(E[0]),L())},[a,m]);const E=r.attachments?.filter(A=>A.contentType!=null&&t.allowedDocumentPreviewContentType.includes(A.contentType))??[],[se,q]=i.useState(E[0]),[G,$]=i.useState([]),[_,ie]=i.useState(void 0);i.useEffect(()=>{async function A(ce){G.includes(ce.attachment_id)?console.warn(`Attachment with ID ${ce.attachment_id} is already getting downloaded`):($([ce.attachment_id,...G]),await ls(h,f,ce),$(o.Remove(G,k=>k==ce.attachment_id)))}_!=null&&(A({card_id:l,transaction_id:r.id,attachment_id:_}),ie(void 0))},[_]);const D=()=>{v(r.id,l,!1),O(!1),oe(null),V([]),E.length>0&&q(E[0])},L=()=>{O(!0);const A=E.map(k=>k.id);async function ce(k){return await cs(d,f,k)}ce({card_id:l,transaction_id:r.id,attachment_ids:A}).then(k=>{V(k),k.length>0&&oe(k[0])})},{merchant:le,createTime:ae,transactionType:F,thirdPartyTransactionId:he}=r,pe=()=>{a?(p(),v(r.id,l,!0)):(q(E[0]),L())},J=i.useRef(null);async function B(A,ce){b(r.id,l,"In-Progress"),await Qo.uploadReceipts(`${e}/1.0/cards/transactions/${r.id}/attachments`,f,A,ce).then(k=>{k!=null&&w(r.id,k),b(r.id,l,"Completed"),g(!0),y(r.id,l,!0),setTimeout(()=>y(r.id,l,!1),2e3)}).catch(k=>{b(r.id,l,"Error"),g(!1,k)})}const Z=()=>{J.current?.click()},Y=A=>{if(A.target.files!=null){const ce=A.target.files,k=[],Je=[];for(let _e=0;_e<ce.length;_e++)k.push(ce[_e].name),Je.push(ce[_e]);B?.(Je,k)}},ue=t.getChargeCardTransactionStatus(r.transactionStatus),me=c?le.brandName??le.name:le.name,Me=t.amountToString("0,0.00",r.amount),Ye=F.code==="transfer",Ke=he!=null&&c,Ie=Ye&&r.direction==="debit",ge=Ye&&r.direction==="credit";return o.jsxRuntimeExports.jsxs(pa,{windowSize:j,"data-testid":t.generateDataTestId("card-transaction-row-small",r.id),onClick:A=>{A.stopPropagation(),Ke&&P(F.code,he)},children:[o.jsxRuntimeExports.jsx(ua,{children:o.jsxRuntimeExports.jsxs(ma,{children:[o.jsxRuntimeExports.jsxs(ga,{children:[o.jsxRuntimeExports.jsx(la,{children:Ie?o.jsxRuntimeExports.jsx(ta,{}):ge?o.jsxRuntimeExports.jsx(oa,{}):o.jsxRuntimeExports.jsx(fa,{src:le.logo?.url?.toString()})}),o.jsxRuntimeExports.jsxs(Ca,{children:[o.jsxRuntimeExports.jsxs(sa,{children:[o.jsxRuntimeExports.jsx(xa,{windowSize:j,children:me}),ue.code!=="paid"?o.jsxRuntimeExports.jsxs(na,{children:[o.jsxRuntimeExports.jsx(ia,{windowSize:j}),o.jsxRuntimeExports.jsx(ra,{color:ue.color,windowSize:j,children:ue.value})]}):null]}),o.jsxRuntimeExports.jsx(ha,{children:`${zt.paymentDate} ${ae.format(Xi.visual.MMMDCommaYYYYformat)}`})]})]}),o.jsxRuntimeExports.jsxs(Sa,{children:[o.jsxRuntimeExports.jsx(ya,{children:r.direction==="debit"?Me:`-${Me}`}),o.jsxRuntimeExports.jsx(da,{title:F.name,children:F.name}),o.jsxRuntimeExports.jsx(ca,{children:r.transactionStatus.code==="declined"||r.transactionStatus.code==="canceled"?Qi:S?.fetchState==="In-Progress"?o.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"Small",start:!0}):u?o.jsxRuntimeExports.jsx(aa,{}):o.jsxRuntimeExports.jsxs(Ho,{children:[o.jsxRuntimeExports.jsx(Ho,{"data-testid":t.generateDataTestId("card-transaction-row-small-upload-receipt",r.id),onClick:A=>{A.stopPropagation()},children:o.jsxRuntimeExports.jsx(t.FileInputElement,{name:"transactionLineAttachment",fileRef:J,sizeLimit:n,isSizeLimitForEachFile:!0,onFileChange:Y,multiple:!0,onFileSizeError:(A,ce)=>{A&&g(!1,{code:500,message:ce===!0?zt.singleFileUploadSizeErrorMessage.replace("__maxFileSize__",t.formatFileSize(n,0)):zt.multipleFileUploadSizeErrorMessage.replace("__maxFileSize__",t.formatFileSize(n,0))})}})}),us(r,x,Z,pe)]})})]})]})}),I&&E.length>0?Xo.createPortal(o.jsxRuntimeExports.jsx(t.DocumentWithThumbnailView,{allFiles:te,fileSource:re,file:se,title:se.fileName,attachments:E,setFileSource:oe,setShowFullScreenView:O,onCrossClick:D,setSelectedFileAttachment:q,onDownloadClick:A=>{ie(A.id)},handleTouchStart:K,handleTouchMove:ne,handleTouchEnd:Q}),document.body):null]})},xs=e=>W.css`
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+  color: ${e.colors.hero};
+`,ta=s(ps)`
+  ${({theme:e})=>xs(e)}
+`,oa=s(ds)`
+  ${({theme:e})=>xs(e)}
+`,Ho=s.div``,sa=s.div`
+  display: flex;
+  gap: ${t.Space.sp2};
+  align-items: flex-start;
+`,na=s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${t.Space.sp2};
+  min-height: ${t.Space.sp4};
+`,ra=s(t.ExtraSmallRegular)`
+  color: ${e=>e.color};
+`,ia=s.div`
+  display: block;
+  width: ${t.Space.sp1};
+  height: ${t.Space.sp1};
+  border-radius: 100%;
+  background-color: ${e=>e.theme.colors.grey1};
+`,aa=s(t.SvgTickRoundFill)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  color: ${t.Colors.success};
+`,la=s.div``,ca=s.div`
+  margin-top: ${t.Space.sp2};
+`,da=s(t.ExtraSmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 1px 6px;
+  border-radius: ${t.Space.sp1};
+  border: 1px solid ${e=>e.theme.colors.grey1};
+`,pa=s.div`
+  display: flex;
+  background-color: ${e=>e.theme.colors.grey5};
+  border: ${e=>` 1px solid ${e.theme.colors.grey3}`};
+  padding: ${t.Space.sp3};
+  box-shadow: ${e=>`${t.Space.sp0} 1px 2px ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${t.Space.sp2};
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+    border-color: ${e=>e.theme.colors.primary};
+  }
+  margin-right: ${t.Space.sp3};
+  margin-left: ${t.Space.sp3};
+`,ua=s.div`
+  display: block;
+  width: 100%;
+`,ma=s.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`,xa=s(t.StandardRegular)`
+  color: inherit;
+  flex-grow: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: ${e=>Vi.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 112px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: capitalize;
+`,ha=s(t.ExtraSmallRegular)`
+  color: inherit;
+  min-height: 18px;
+  margin-top: -${t.Space.sp1};
+`,ga=s.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${t.Space.sp2};
+`,Sa=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`,fa=s.img`
+  display: flex;
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+`,Ca=s.div`
+  margin-bottom: 6px;
+`,ya=s(t.StandardRegular)`
+  color: inherit;
+`,ja=e=>C.createElement("svg",{width:90,height:90,viewBox:"0 0 90 90",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},C.createElement("g",{clipPath:"url(#clip0_6421_22796)"},C.createElement("mask",{id:"mask0_6421_22796",style:{maskType:"alpha"},maskUnits:"userSpaceOnUse",x:0,y:0,width:90,height:90},C.createElement("rect",{width:90,height:90,fill:"#D9D9D9"})),C.createElement("g",{mask:"url(#mask0_6421_22796)"},C.createElement("rect",{x:.471703,y:15.6197,width:85.2829,height:54.9872,rx:3.30192,stroke:"#97C3B9",strokeWidth:.943405}),C.createElement("rect",{opacity:.2,x:3.77344,y:18.9216,width:86.2263,height:55.9306,rx:3.77362,fill:"#97C3B9"}),C.createElement("path",{d:"M13.8672 56.8781L72.3583 56.878",stroke:"#EEBA7D",strokeWidth:.943405,strokeLinecap:"round"}),C.createElement("path",{d:"M0.945312 30.8197C34.0042 22.3291 52.539 22.3291 85.5978 30.8197",stroke:"#97C3B9",strokeWidth:.943405,strokeLinecap:"round"}),C.createElement("path",{d:"M15.688 42.7079L14.037 40.3117H15.037L16.1502 41.9154C16.1565 41.928 16.1911 41.9846 16.254 42.0853H16.2729C16.2854 42.0664 16.298 42.0444 16.3106 42.0192C16.3232 41.9878 16.3452 41.95 16.3766 41.906L17.4804 40.3117H18.4238L16.754 42.7456L18.4427 45.1796H17.4427L16.3012 43.5287C16.2886 43.5098 16.2509 43.4469 16.188 43.34H16.1691C16.1502 43.3903 16.1188 43.4501 16.0748 43.5192L14.9238 45.1796H13.9898L15.688 42.7079ZM20.3773 42.7079L18.7264 40.3117H19.7264L20.8396 41.9154C20.8459 41.928 20.8805 41.9846 20.9434 42.0853H20.9623C20.9748 42.0664 20.9874 42.0444 21 42.0192C21.0126 41.9878 21.0346 41.95 21.066 41.906L22.1698 40.3117H23.1132L21.4434 42.7456L23.1321 45.1796H22.1321L20.9906 43.5287C20.978 43.5098 20.9402 43.4469 20.8774 43.34H20.8585C20.8396 43.3903 20.8082 43.4501 20.7641 43.5192L19.6132 45.1796H18.6792L20.3773 42.7079ZM25.0667 42.7079L23.4158 40.3117H24.4158L25.529 41.9154C25.5353 41.928 25.5699 41.9846 25.6328 42.0853H25.6516C25.6642 42.0664 25.6768 42.0444 25.6894 42.0192C25.702 41.9878 25.724 41.95 25.7554 41.906L26.8592 40.3117H27.8026L26.1328 42.7456L27.8215 45.1796H26.8215L25.6799 43.5287C25.6674 43.5098 25.6296 43.4469 25.5667 43.34H25.5479C25.529 43.3903 25.4976 43.4501 25.4535 43.5192L24.3026 45.1796H23.3686L25.0667 42.7079ZM30.8057 42.2551H33.1076V42.9909H30.8057V42.2551ZM37.799 42.7079L36.1481 40.3117H37.1481L38.2613 41.9154C38.2676 41.928 38.3022 41.9846 38.3651 42.0853H38.3839C38.3965 42.0664 38.4091 42.0444 38.4217 42.0192C38.4342 41.9878 38.4563 41.95 38.4877 41.906L39.5915 40.3117H40.5349L38.8651 42.7456L40.5538 45.1796H39.5537L38.4122 43.5287C38.3996 43.5098 38.3619 43.4469 38.299 43.34H38.2802C38.2613 43.3903 38.2298 43.4501 38.1858 43.5192L37.0349 45.1796H36.1009L37.799 42.7079ZM42.4884 42.7079L40.8374 40.3117H41.8375L42.9507 41.9154C42.957 41.928 42.9916 41.9846 43.0544 42.0853H43.0733C43.0859 42.0664 43.0985 42.0444 43.111 42.0192C43.1236 41.9878 43.1456 41.95 43.1771 41.906L44.2809 40.3117H45.2243L43.5544 42.7456L45.2431 45.1796H44.2431L43.1016 43.5287C43.089 43.5098 43.0513 43.4469 42.9884 43.34H42.9695C42.9507 43.3903 42.9192 43.4501 42.8752 43.5192L41.7242 45.1796H40.7903L42.4884 42.7079ZM48.2274 42.2551H50.5293V42.9909H48.2274V42.2551ZM55.2207 42.7079L53.5697 40.3117H54.5697L55.683 41.9154C55.6892 41.928 55.7238 41.9846 55.7867 42.0853H55.8056C55.8182 42.0664 55.8308 42.0444 55.8433 42.0192C55.8559 41.9878 55.8779 41.95 55.9094 41.906L57.0132 40.3117H57.9566L56.2867 42.7456L57.9754 45.1796H56.9754L55.8339 43.5287C55.8213 43.5098 55.7836 43.4469 55.7207 43.34H55.7018C55.683 43.3903 55.6515 43.4501 55.6075 43.5192L54.4565 45.1796H53.5226L55.2207 42.7079ZM59.9101 42.7079L58.2591 40.3117H59.2591L60.3723 41.9154C60.3786 41.928 60.4132 41.9846 60.4761 42.0853H60.495C60.5076 42.0664 60.5201 42.0444 60.5327 42.0192C60.5453 41.9878 60.5673 41.95 60.5988 41.906L61.7025 40.3117H62.6459L60.9761 42.7456L62.6648 45.1796H61.6648L60.5233 43.5287C60.5107 43.5098 60.473 43.4469 60.4101 43.34H60.3912C60.3723 43.3903 60.3409 43.4501 60.2969 43.5192L59.1459 45.1796H58.2119L59.9101 42.7079ZM64.5995 42.7079L62.9485 40.3117H63.9485L65.0617 41.9154C65.068 41.928 65.1026 41.9846 65.1655 42.0853H65.1844C65.1969 42.0664 65.2095 42.0444 65.2221 42.0192C65.2347 41.9878 65.2567 41.95 65.2881 41.906L66.3919 40.3117H67.3353L65.6655 42.7456L67.3542 45.1796H66.3542L65.2127 43.5287C65.2001 43.5098 65.1624 43.4469 65.0995 43.34H65.0806C65.0617 43.3903 65.0303 43.4501 64.9863 43.5192L63.8353 45.1796H62.9013L64.5995 42.7079ZM69.2888 42.7079L67.6379 40.3117H68.6379L69.7511 41.9154C69.7574 41.928 69.792 41.9846 69.8549 42.0853H69.8738C69.8863 42.0664 69.8989 42.0444 69.9115 42.0192C69.9241 41.9878 69.9461 41.95 69.9775 41.906L71.0813 40.3117H72.0247L70.3549 42.7456L72.0436 45.1796H71.0436L69.9021 43.5287C69.8895 43.5098 69.8517 43.4469 69.7888 43.34H69.77C69.7511 43.3903 69.7197 43.4501 69.6756 43.5192L68.5247 45.1796H67.5907L69.2888 42.7079Z",fill:"#EEBA7D"}))),C.createElement("defs",null,C.createElement("clipPath",{id:"clip0_6421_22796"},C.createElement("rect",{width:90,height:90,fill:"white"})))),$a=e=>C.createElement("svg",{width:90,height:90,viewBox:"0 0 90 90",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},C.createElement("g",{clipPath:"url(#clip0_6421_22782)"},C.createElement("path",{opacity:.2,d:"M46.4732 89.7815C70.4353 89.7815 89.8605 70.3564 89.8605 46.3942C89.8605 22.4321 70.4353 3.00696 46.4732 3.00696C22.5111 3.00696 3.08594 22.4321 3.08594 46.3942C3.08594 70.3564 22.5111 89.7815 46.4732 89.7815Z",fill:"#97C3B9"}),C.createElement("path",{d:"M44.0435 87.3468C68.0057 87.3468 87.4308 67.9217 87.4308 43.9595C87.4308 19.9974 68.0057 0.572266 44.0435 0.572266C20.0814 0.572266 0.65625 19.9974 0.65625 43.9595C0.65625 67.9217 20.0814 87.3468 44.0435 87.3468Z",stroke:"#97C3B9",strokeWidth:1.04046,strokeMiterlimit:10}),C.createElement("path",{d:"M5.11719 45.0781C5.11719 65.6012 21.7594 82.3006 42.2149 82.3006",stroke:"#EEBA7D",strokeWidth:1.04046,strokeMiterlimit:10,strokeLinecap:"round"}),C.createElement("path",{d:"M9.14062 45.0781C9.14062 57.3347 15.7996 68.0619 25.6788 73.8104",stroke:"#EEBA7D",strokeWidth:1.04046,strokeMiterlimit:10,strokeLinecap:"round"}),C.createElement("path",{d:"M24.0625 56.6948C24.0625 49.1878 33.0053 43.1011 44.0446 43.1011C55.0839 43.1011 64.0267 49.1878 64.0267 56.6948C64.0267 71.3861 24.0677 71.5422 24.0677 56.6948H24.0625Z",stroke:"#97C3B9",strokeWidth:.988439,strokeMiterlimit:10}),C.createElement("path",{d:"M44.0423 37.0092C48.6997 37.0092 52.4753 33.2336 52.4753 28.5763C52.4753 23.9189 48.6997 20.1433 44.0423 20.1433C39.3849 20.1433 35.6094 23.9189 35.6094 28.5763C35.6094 33.2336 39.3849 37.0092 44.0423 37.0092Z",stroke:"#97C3B9",strokeWidth:.988439,strokeMiterlimit:10}),C.createElement("path",{d:"M81.918 44.0324C81.918 23.5093 65.2758 6.80988 44.8203 6.80988",stroke:"#EEBA7D",strokeWidth:1.04046,strokeMiterlimit:10,strokeLinecap:"round"}),C.createElement("path",{d:"M77.8975 44.0324C77.8975 31.7758 71.2386 21.0486 61.3594 15.3",stroke:"#EEBA7D",strokeWidth:1.04046,strokeMiterlimit:10,strokeLinecap:"round"})),C.createElement("defs",null,C.createElement("clipPath",{id:"clip0_6421_22782"},C.createElement("rect",{width:90,height:90,fill:"white"})))),{spendManagement:{chargeCard:{cardDetails:nt}},common:va}=t.appLocale.getLocalizedStrings();function wa({transactions:e,documentAiReceiptMaxSizeLimit:n,isSnackbarOpen:a,uploadReceiptsFetchStateByTransactionId:c,uploadReceiptsShowTickByTransactionId:d,isViewReceiptClickedImmediatelyAfterUploadTransactionId:h,cardId:l,receiptRequiredAboveAmount:m,isAiCategorizationEnabledForCardsTransactions:u,transactionAttachmentsEndpointToFetch:S,transactionAttachmentEndpointToDownload:f,cardsEndPoint:r,authParams:x,hideSorting:g,isOwnCard:w,uiState:y,fetchState:v,cardHolderUser:b,cardStatusCode:p="active",cardCodeType:P="business_virtual_credit_card",onReloadTransactions:j,onFetchChargeCardTransactionList:z,onColumnSortConfigChanged:H,removeSnackbar:R,onChargeCardTransactionRowClick:N,onUploadReceiptComplete:X,onUpdateScrollYOffset:U,updateChargeCardTransactionAttachments:T,updateChargeCardTransactionUploadReceiptsFetchStatus:K,updateChargeCardTransactionReceiptsShowTick:ne,updateChargeCardTransactionIsViewReceiptClicked:ee}){const Q=t.useWindowSizeContext(),I=i.useRef(null),[O,te]=i.useState(!1);i.useEffect(()=>{I.current?.resetAfterIndex(0)},[Q,I]),i.useEffect(()=>{v==="Completed"&&te(!1)},[v]);const V=()=>Q!=="small"?74:128,re=(q,G)=>{z(q,G)},oe=()=>{te(!0),re(y.pageToken,y.pageTokenType)},E=q=>q<e.length,se=()=>{y.pageToken!=null&&v==="Completed"&&oe()};return o.jsxRuntimeExports.jsxs(za,{isOwnCard:w,windowSize:Q,isEmptyTransaction:e.length===0,children:[o.jsxRuntimeExports.jsx(Aa,{windowSize:Q,children:v==="Error"?o.jsxRuntimeExports.jsxs(Wa,{children:[o.jsxRuntimeExports.jsx(Ha,{onClick:j,"data-testid":t.generateDataTestId("card-transaction-list-reload"),children:o.jsxRuntimeExports.jsx(t.SvgReload,{})}),o.jsxRuntimeExports.jsx(Fa,{children:va.reloadPage.label})]}):v==="Not-Started"||v==="In-Progress"&&e.length===0?o.jsxRuntimeExports.jsx(Na,{children:o.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"ExtraLarge",start:!0})}):v==="Completed"||v==="In-Progress"&&e.length>0?p==="request_on_hold"?o.jsxRuntimeExports.jsx(ba,{cardType:P,cardHolderUser:b}):p==="inactive"?o.jsxRuntimeExports.jsx(Ea,{cardHolderUser:b}):e.length===0?o.jsxRuntimeExports.jsx(Ra,{}):o.jsxRuntimeExports.jsx(Ia,{windowSize:Q,children:o.jsxRuntimeExports.jsx(o.AutoSizer,{children:({height:q,width:G})=>o.jsxRuntimeExports.jsx(o.InfiniteLoader,{isItemLoaded:E,itemCount:e.length+1,loadMoreItems:se,children:({onItemsRendered:$})=>o.jsxRuntimeExports.jsx(o.VariableSizeList,{ref:I,height:q,itemCount:e.length,onItemsRendered:$,itemSize:V,itemKey:_=>e[_].id,width:G,style:{willChange:"auto"},innerElementType:_=>Pa(_,g,y,v,H),onScroll:({scrollOffset:_})=>{U?.(_)},initialScrollOffset:y.scrollYOffset,children:_=>o.jsxRuntimeExports.jsx(ka,{..._,documentAiReceiptMaxSizeLimit:n,isSnackbarOpen:a,cardsEndPoint:r,isAiCategorizationEnabledForCardsTransactions:u,transactionAttachmentsEndpointToFetch:S,transactionAttachmentEndpointToDownload:f,uploadReceiptsFetchStateByTransactionId:c,uploadReceiptsShowTickByTransactionId:d,isViewReceiptClickedImmediatelyAfterUploadTransactionId:h,cardId:l,authParams:x,transactions:e,receiptRequiredAboveAmount:m,updateChargeCardTransactionAttachments:T,onUploadReceiptComplete:X,updateChargeCardTransactionUploadReceiptsFetchStatus:K,updateChargeCardTransactionReceiptsShowTick:ne,updateChargeCardTransactionIsViewReceiptClicked:ee,onChargeCardTransactionRowClick:N,removeSnackbar:R})})})})}):null}),O===!0?o.jsxRuntimeExports.jsx(Oa,{children:o.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"Small",start:!0})}):null]})}const Ra=()=>{const e=t.useWindowSizeContext();return o.jsxRuntimeExports.jsxs(Ft,{children:[o.jsxRuntimeExports.jsx(_t,{children:o.jsxRuntimeExports.jsx(gs,{})}),o.jsxRuntimeExports.jsxs(Bt,{children:[o.jsxRuntimeExports.jsx(Nt,{children:nt.transactionTable.emptyTransactions.title}),o.jsxRuntimeExports.jsx(Ot,{windowSize:e,children:nt.transactionTable.emptyTransactions.subTitle})]})]})},ba=({cardType:e,cardHolderUser:n})=>{const a=n!=null?n.firstName+" "+n.lastName:"",c=t.useWindowSizeContext();return o.jsxRuntimeExports.jsxs(Ft,{children:[o.jsxRuntimeExports.jsx(_t,{children:o.jsxRuntimeExports.jsx(Za,{})}),o.jsxRuntimeExports.jsxs(Bt,{children:[o.jsxRuntimeExports.jsx(Nt,{children:nt.transactionTable.pendingProfileCompletion.title}),o.jsxRuntimeExports.jsx(Ot,{windowSize:c,children:nt.transactionTable.pendingProfileCompletion.subTitle[e].replace("__user__",a)})]})]})},Ea=({cardHolderUser:e})=>{const n=t.useWindowSizeContext();return o.jsxRuntimeExports.jsxs(Ft,{children:[o.jsxRuntimeExports.jsx(_t,{children:o.jsxRuntimeExports.jsx(gs,{})}),o.jsxRuntimeExports.jsxs(Bt,{children:[o.jsxRuntimeExports.jsx(Nt,{children:nt.transactionTable.pendingActivation.title}),o.jsxRuntimeExports.jsx(Ot,{windowSize:n,children:nt.transactionTable.pendingActivation.subTitle.replace("__user__",e?.firstName??"")})]})]})},ka=({index:e,documentAiReceiptMaxSizeLimit:n,isSnackbarOpen:a,style:c,transactions:d,isAiCategorizationEnabledForCardsTransactions:h,uploadReceiptsFetchStateByTransactionId:l,uploadReceiptsShowTickByTransactionId:m,isViewReceiptClickedImmediatelyAfterUploadTransactionId:u,cardId:S,cardsEndPoint:f,transactionAttachmentsEndpointToFetch:r,transactionAttachmentEndpointToDownload:x,receiptRequiredAboveAmount:g,authParams:w,updateChargeCardTransactionAttachments:y,onUploadReceiptComplete:v,updateChargeCardTransactionUploadReceiptsFetchStatus:b,updateChargeCardTransactionReceiptsShowTick:p,updateChargeCardTransactionIsViewReceiptClicked:P,onChargeCardTransactionRowClick:j,removeSnackbar:z})=>o.jsxRuntimeExports.jsx(Ba,{style:{...c,width:"100%"},className:"spend-management-list-item",children:o.jsxRuntimeExports.jsx(Ta,{documentAiReceiptMaxSizeLimit:n,isSnackbarOpen:a,cardId:S,isAiCategorizationEnabledForCardsTransactions:h,cardsEndPoint:f,transactionAttachmentsEndpointToFetch:r,transactionAttachmentEndpointToDownload:x,authParams:w,receiptRequiredAboveAmount:g,transaction:d[e],uploadReceiptsFetchState:l?.[d[e].id],uploadReceiptsShowTick:m?.[d[e].id],isViewReceiptClickedImmediatelyAfterUpload:u?.[d[e].id],updateChargeCardTransactionAttachments:y,onUploadReceiptComplete:v,updateChargeCardTransactionUploadReceiptsFetchStatus:b,updateChargeCardTransactionReceiptsShowTick:p,updateChargeCardTransactionIsViewReceiptClicked:P,onChargeCardTransactionRowClick:j,removeSnackbar:z},d[e].id)}),La=({transaction:e,documentAiReceiptMaxSizeLimit:n,isSnackbarOpen:a,isAiCategorizationEnabledForCardsTransactions:c,uploadReceiptsFetchState:d,uploadReceiptsShowTick:h,isViewReceiptClickedImmediatelyAfterUpload:l,cardsEndPoint:m,transactionAttachmentsEndpointToFetch:u,transactionAttachmentEndpointToDownload:S,cardId:f,receiptRequiredAboveAmount:r,authParams:x,updateChargeCardTransactionAttachments:g,onUploadReceiptComplete:w,updateChargeCardTransactionUploadReceiptsFetchStatus:y,updateChargeCardTransactionReceiptsShowTick:v,updateChargeCardTransactionIsViewReceiptClicked:b,onChargeCardTransactionRowClick:p,removeSnackbar:P})=>{const z=t.useWindowSizeContext()==="small"?ea:Ei;return o.jsxRuntimeExports.jsx(z,{isSnackbarOpen:a,documentAiReceiptMaxSizeLimit:n,isAiCategorizationEnabledForCardsTransactions:c,transactionAttachmentsEndpointToFetch:u,transactionAttachmentEndpointToDownload:S,uploadReceiptsFetchState:d,uploadReceiptsShowTick:h,isViewReceiptClickedImmediatelyAfterUpload:l,transaction:e,cardId:f,receiptRequiredAboveAmount:r,cardsEndPoint:m,authParams:x,updateChargeCardTransactionAttachments:g,onUploadReceiptComplete:w,updateChargeCardTransactionUploadReceiptsFetchStatus:y,updateChargeCardTransactionReceiptsShowTick:v,updateChargeCardTransactionIsViewReceiptClicked:b,onChargeCardTransactionRowClick:p,removeSnackbar:P})},Ta=i.memo(La),Pa=(e,n,a,c,d)=>o.jsxRuntimeExports.jsx(hs,{...e,onColumnSortConfigChanged:d,hideSorting:n,uiState:{sortKey:a.sortKey,sortOrder:a.sortOrder},fetchState:c}),hs=i.forwardRef((e,n)=>{const{children:a,style:c,uiState:d,onColumnSortConfigChanged:h,hideSorting:l,...m}=e;return o.jsxRuntimeExports.jsxs(_a,{ref:n,style:{...c,width:"auto"},...m,children:[o.jsxRuntimeExports.jsx(di,{onColumnSortConfigChanged:h,sortConfig:{sortKey:d.sortKey,sortOrder:d.sortOrder},hideSorting:l}),o.jsxRuntimeExports.jsx(Ma,{children:a})]})});hs.displayName="Charge Card Transaction list View inner element type";const za=s.div`
+  display: block;
+  height: ${e=>e.isEmptyTransaction?"calc(100vh - 436px)":"calc(100vh - 224px)"};
+  width: 100%;
+`,Aa=s.div`
+  height: 100%;
+`,Ma=s.div`
+  position: relative;
+  width: auto;
+  height: 100%;
+`,Ia=s.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  max-width: 99.9%;
+`,Wa=s.div`
+  display: flex;
+  width: 100%;
+  height: calc(100% - 60px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`,Ha=s.div`
+  height: 96px;
+  width: 96px;
+  background: ${e=>e.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+  & svg {
+    margin: ${t.Space.sp5};
+    color: ${e=>e.theme.colors.grey1};
+  }
+  &:hover {
+    & svg {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+`,Fa=s(t.SmallRegularSp)`
+  margin-top: ${t.Space.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,Ba=s.div`
+  top: ${t.Space.sp0};
+  left: ${t.Space.sp0};
+  padding-bottom: ${t.Space.sp3};
+  box-sizing: border-box;
+`,Na=s.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: ${t.Space.sp3};
+  margin-bottom: ${t.Space.sp3};
+`,Oa=s.div`
+  display: flex;
+  width: 100%;
+  height: auto;
+  padding-bottom: ${t.Space.sp3};
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`,Ft=s.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: ${t.Space.sp2};
+  height: 100%;
+  margin: ${t.Space.sp0} ${t.Space.sp3};
+`,Bt=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`,Nt=s(t.H6Regular)`
+  color: ${e=>e.theme.colors.brandColorJade};
+`,Ot=s(t.LargeRegular)`
+  color: ${e=>e.theme.colors.primary};
+  ${e=>e.windowSize!=="small"?W.css`
+          white-space: pre;
+        `:null};
+  text-align: center;
+`,_t=s.div``,_a=s.div``,gs=s(ja)``,Za=s($a)``,{spendManagement:Ga}=t.appLocale.getLocalizedStrings(),{cardDetails:Ae}=Ga.chargeCard,Ua=W.keyframes`
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+`,qa=e=>{switch(e){case"slide-in-right-to-left-add-to-wallet":return Ua;default:return null}},Da=s.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${e=>e.theme.colors.grey4};
+  height: inherit;
+`,Ya=s(Da)`
+  animation: ${e=>qa(e.className)} 0.3s forwards;
+`,Ka=({isChargeCardAdmin:e,chargeCardDetailView:n,walletType:a,secretRevealed:c,isDrawerOpen:d,vgsVaultId:h,showSecretInfo:l,changePinInProcess:m,isSandboxEnv:u,controllerEmails:S,isChargeCardFeatureEnabled:f,isDebitCardFeatureEnabled:r,isDebitCardSetupEnabled:x,isChargeCardSetupEnabled:g,chargeCardCashbackDetailState:w,isCardDetailErrored:y,creditAccountRepayment:v,productInformation:b,creditAccountInformation:p,debitAccountInformation:P,cashbackInformation:j,signedInUserToken:z,selectedColor:H,showDrawerAnimation:R,cardDetailsFetchState:N,setCardDetailsFetchState:X,setIsCardDetailErrored:U,setShowSecretInfo:T,setSecretRevealed:K,setShowChangePinPopup:ne,setIsAddToWalletDrawerOpen:ee,isCardDetailFetching:Q,handleColorCodeClick:I,onFireOnClickAnalytics:O,onVerifyOtp:te,onVerifyOtpSuccess:V,onResendOtp:re,onFireVerifyPopOnClickAnalytics:oe,onGetOtp:E})=>{const se=o.useTheme(),[q,G]=i.useState(!1),[$,_]=i.useState(!1),ie=R.current;return i.useEffect(()=>{d?document.body.style.overflow="hidden":document.body.style.overflow="unset"},[d,R]),o.jsxRuntimeExports.jsx(o.Drawer,{onClose:()=>{ee(!1)},anchor:"right",open:!0,PaperProps:{style:{maxWidth:"512px",boxShadow:"none",background:"transparent"}},style:{backgroundColor:t.Colors.drawerBackground,display:d?"unset":"none"},disableScrollLock:!d,transitionDuration:250,"data-testid":t.generateDataTestId("add-card-to-wallet-drawer"),children:o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(t.OtpPopupSection,{phoneNumberPopupDescription:Ae.verifyPhoneNumberDescription,showOtpPopup:q,showPhoneNumberPopup:$,twoFactorAuthenticationView:n.twoFAView,loggedInUserPhone:n.loggedInUserPhone,onVerifyOtp:te,onVerifyOtpSuccess:D=>{V(D),m?ne(!0):T(!0)},onFireVerifyPopOnClickAnalytics:oe,setShowOtpPopup:G,onResendOtp:re,setShowPhoneNumberPopup:_,onGetOtp:E}),o.jsxRuntimeExports.jsxs(Ya,{className:ie,children:[o.jsxRuntimeExports.jsx(t.NavBarWithClose,{title:a==="apple"?Ae.addCardToAppleWallet:Ae.addCardToGoogleWallet,style:{zIndex:4},backgroundColor:se.colors.grey4,onCloseClick:()=>ee(!1)}),o.jsxRuntimeExports.jsxs(Xa,{children:[o.jsxRuntimeExports.jsxs(tl,{children:[o.jsxRuntimeExports.jsxs(Qa,{children:[o.jsxRuntimeExports.jsx(ll,{children:o.jsxRuntimeExports.jsx(dl,{})}),o.jsxRuntimeExports.jsx(sl,{children:Ae.openWalletAppOnPhone})]}),o.jsxRuntimeExports.jsx(nl,{children:a==="apple"?Ae.openWalletDescriptionApple:Ae.openWalletDescriptionGoogle}),o.jsxRuntimeExports.jsx(ts,{isChargeCardAdmin:e,onUnlockChargeCard:()=>{},chargeCardDetailView:n,creditAccountRepayment:v,creditAccount:n.creditAccount,setShowSecretInfo:T,secretRevealed:c,isOwnCard:!0,controllerEmails:S,isChargeCardFeatureEnabled:f,isDebitCardFeatureEnabled:r,isDebitCardSetupEnabled:x,isChargeCardSetupEnabled:g,chargeCardCashbackDetailState:w,isShowingInDrawer:!0,vgsVaultId:h,showSecretInfo:l,isSandboxEnv:u,isCardDetailErrored:y,signedInUserToken:z,productInformation:b,creditAccountInformation:p,debitAccountInformation:P,cashbackInformation:j,selectedColor:H,cardDetailsFetchState:N,setCardDetailsFetchState:X,setIsCardDetailErrored:U,setSecretRevealed:K,isCardDetailFetching:Q,handleColorCodeClick:I,onFireOnClickAnalytics:O,setShowPhoneNumberForOtp:_})]}),o.jsxRuntimeExports.jsx(el,{}),o.jsxRuntimeExports.jsxs(ol,{children:[o.jsxRuntimeExports.jsxs(Va,{children:[o.jsxRuntimeExports.jsx(al,{children:o.jsxRuntimeExports.jsx(cl,{})}),o.jsxRuntimeExports.jsx(rl,{children:Ae.verifyCard})]}),o.jsxRuntimeExports.jsx(Ja,{children:o.jsxRuntimeExports.jsx(il,{children:a==="apple"?Ae.VerifyCardDescriptionApple:Ae.VerifyCardDescriptionGoogle})})]})]})]})]})})},Ja=s.div`
+  display: flex;
+  justify-content: end;
+`,Xa=s.div`
+  margin: ${t.Space.sp3} ${t.Space.sp8};
+`,Qa=s.div`
+  display: flex;
+  align-items: center;
+  gap: ${t.Space.sp3};
+`,Va=s.div`
+  display: flex;
+  align-items: center;
+  gap: ${t.Space.sp3};
+`,el=s.div`
+  height: ${t.Space.sp4};
+  border: 1px solid ${e=>e.theme.colors.grey2};
+  width: ${t.Space.sp0};
+  margin-left: ${t.Space.sp8};
+`,tl=s.div`
+  background-color: ${e=>e.theme.colors.grey5};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  border-radius: ${t.Space.sp2};
+  padding: ${t.Space.sp4} ${t.Space.sp5};
+  box-shadow: ${t.Space.sp0} 1px 2px
+    ${e=>e.theme.colors.dropShadowNormal};
+`,ol=s.div`
+  background-color: ${e=>e.theme.colors.grey5};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  border-radius: ${t.Space.sp2};
+  padding: ${t.Space.sp4} ${t.Space.sp5};
+  box-shadow: ${t.Space.sp0} 1px 2px
+    ${e=>e.theme.colors.dropShadowNormal};
+`,sl=s(t.LargeSemiBold)`
+  color: ${e=>e.theme.colors.primary};
+`,nl=s(t.StandardRegular)`
+  color: ${e=>e.theme.colors.hero};
+  margin-left: ${t.Space.sp9};
+  padding-bottom: ${t.Space.sp4};
+`,rl=s(t.LargeSemiBold)`
+  color: ${e=>e.theme.colors.primary};
+`,il=s(t.StandardRegular)`
+  color: ${e=>e.theme.colors.hero};
+  max-width: 274px;
+`,al=s.div`
+  padding: 12px;
+  border-radius: ${t.Space.sp4};
+  background: ${t.Colors.successLight};
+  display: flex;
+`,ll=s.div`
+  padding: 12px;
+  border-radius: ${t.Space.sp4};
+  background: ${e=>e.theme.colors.graphColor16Light};
+  display: flex;
+`,cl=s(t.SvgVerified)`
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+`,dl=s(De.SvgAddToWallet)`
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+  color: ${e=>e.theme.colors.graphColor16Dark};
+`,{spendManagement:{chargeCard:{cardDetails:Ge}},common:{strings:pl}}=t.appLocale.getLocalizedStrings(),Zt={iFrameWidth:new t.ResponsiveSized(188,188)};function ul({isSandboxEnv:e,cardProviderID:n,vgsVaultId:a,signedInUserToken:c,onCancelClick:d,onUpdateDebitCardPinAttempt:h,onChangePinSuccess:l}){const m=t.useWindowSizeContext(),u=o.useTheme(),[S,f]=i.useState({}),[r,x]=i.useState(!1),[g,w]=i.useState(!1),[y,v]=i.useState(!0),[b,p]=i.useState(!0),[P,j]=i.useState(!1),[z,H]=i.useState(!1),[R,N]=i.useState(!1),[X,U]=i.useState(!1),[T,K]=i.useState(!1),[ne,ee]=i.useState(!1),[Q,I]=i.useState(!1),[O,te]=i.useState(null),[V,re]=i.useState(null),[oe]=t.useScript("https://js.verygoodvault.com/vgs-collect/2.27.0/vgs-collect.js"),E=e?"SANDBOX":"live";i.useEffect(()=>{if(oe){const G=window.VGSCollect.create(a,E,ie=>{const D=ie["data.attributes.oldPin"],L=ie["data.attributes.newPin"];D?.isTouched===!0&&D?.isValid===!1&&D?.isFocused===!1?U(!0):(D?.isTouched===!0&&D?.isValid===!0&&D?.isFocused===!1||D?.isTouched===!0&&D?.isValid===!0&&D?.isFocused===!0)&&(U(!1),I(!1)),L?.isTouched===!0&&L?.isValid===!1&&L?.isFocused===!1?K(!0):(L?.isTouched===!0&&L?.isValid===!0&&L?.isFocused===!1||L?.isTouched===!0&&L?.isValid===!0&&L?.isFocused===!0)&&K(!1)}),$=G.field("#oldPin",{type:"text",name:"data.attributes.oldPin",placeholder:"0000",autoComplete:"off",maxLength:4,hideValue:!0,validations:["required","/^([0-9]{4})$/"],css:{...t.textStyles.standardRegular.cssObject,border:"none",boxSizing:"border-box",color:u.colors.primary,height:t.Space.sp6,padding:`${t.Space.sp0} ${t.Space.sp3}`,textAlign:"right","&::placeholder":{color:u.colors.grey1,...t.textStyles.standardRegular.cssObject},"&.invalid.touched:not(.focused)":{color:t.Colors.important,background:t.Colors.importantLight},"&:focus":{background:`${u.colors.background} !important`,textAlign:"left",color:`${u.colors.primary} !important`}}}),_=G.field("#newPin",{type:"text",name:"data.attributes.newPin",placeholder:"0000",autoComplete:"off",maxLength:4,hideValue:!0,validations:["required","/^([0-9]{4})$/"],css:{...t.textStyles.standardRegular.cssObject,border:"none",boxSizing:"border-box",color:u.colors.primary,height:t.Space.sp6,padding:`${t.Space.sp0} ${t.Space.sp3}`,textAlign:"right","&::placeholder":{color:u.colors.grey1,...t.textStyles.standardRegular.cssObject},"&.invalid.touched:not(.focused)":{color:t.Colors.important,background:t.Colors.importantLight},"&:focus":{background:`${u.colors.background} !important`,textAlign:"left",color:`${u.colors.primary} !important`}}});te($),re(_),f(G),Promise.all([$.promise,_.promise]).then(function(){w(!0)})}},[oe]),i.useEffect(()=>{O?.update({hideValue:y})},[O,y]),i.useEffect(()=>{V?.update({hideValue:b})},[V,b]);const se=G=>{x(!0),I(!1),S.submit?.("/cards/"+n+"/secure-data/pin",{method:"PUT",mapDotToObject:"true",headers:{"Content-Type":"application/vnd.api+json",Authorization:"Bearer "+G?.token}},function($,_){$===200?(j(!1),H(!1),l(),h("success")):(U(!0),h("failed"),_.errors?.[0].title.toLowerCase().includes("max")?ee(!0):_.errors?.[0].title.toLowerCase().includes("invalid")&&I(!0),x(!1))},$=>{console.log("error",$),x(!1)})},q={onOkClick:()=>{if(!S.state)return;const G=S.state["data.attributes.newPin"]?.isValid,$=S.state["data.attributes.oldPin"]?.isValid;N(!0),G===!0&&$===!0&&se(c)},onCancelClick:d};return o.jsxRuntimeExports.jsx(t.ConfirmationPopup,{titleComponent:o.jsxRuntimeExports.jsx(ml,{children:Ge.moreOptions.changePin}),descriptionComponent:o.jsxRuntimeExports.jsxs(xl,{children:[o.jsxRuntimeExports.jsxs(Cl,{children:[o.jsxRuntimeExports.jsxs(Go,{showFieldError:X,windowSize:m,isFirstField:!0,validation:R,onMouseEnter:()=>j(!0),onMouseLeave:()=>j(!1),oldPinInputHighlighted:P,children:[o.jsxRuntimeExports.jsx(Oo,{children:Ge.existingPin}),o.jsxRuntimeExports.jsxs(_o,{windowSize:m,children:[o.jsxRuntimeExports.jsx(fl,{id:"oldPin",className:"cc-old-pin-form-field",windowSize:m}),o.jsxRuntimeExports.jsx(Fo,{onClick:()=>v(!y),"data-testid":t.generateDataTestId("cc-old-pin-show-text"),children:y?o.jsxRuntimeExports.jsx(Bo,{}):o.jsxRuntimeExports.jsx(No,{})})]})]}),o.jsxRuntimeExports.jsx(gl,{}),o.jsxRuntimeExports.jsxs(Go,{showFieldError:T,windowSize:m,isFirstField:!1,validation:R,onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1),newPinInputHighlighted:z,children:[o.jsxRuntimeExports.jsx(Oo,{children:Ge.newPin}),o.jsxRuntimeExports.jsxs(_o,{windowSize:m,children:[o.jsxRuntimeExports.jsx(Sl,{id:"newPin",className:"cc-new-pin-form-field",windowSize:m}),o.jsxRuntimeExports.jsx(Fo,{onClick:()=>p(!b),"data-testid":t.generateDataTestId("cc-new-pin-show-text"),children:b?o.jsxRuntimeExports.jsx(Bo,{}):o.jsxRuntimeExports.jsx(No,{})})]})]})]}),Q?o.jsxRuntimeExports.jsx(Zo,{children:Ge.incorrectCurrentPIN}):null,ne?o.jsxRuntimeExports.jsx(Zo,{children:Ge.pinAttemptsReached}):null]}),primaryButtonText:"Change",primaryButtonWidth:87,isLoading:r,isDisabled:g===!1||ne,secondaryButtonWidth:87,buttonContainerStyle:{paddingTop:t.Space.sp3,paddingBottom:t.Space.sp2},secondaryButtonText:"Cancel",action:q,containerStyle:{maxWidth:"544px"},footerHelperComponent:o.jsxRuntimeExports.jsxs(t.ConfirmationPopUpFooterHelper,{children:[o.jsxRuntimeExports.jsx(hl,{children:Ge.forgotYourPin}),pl.space,Ge.callTollFree]})})}const ml=s(t.H6Medium)`
+  margin-top: ${t.Space.sp7};
+  padding-left: ${t.Space.sp8};
+  padding-right: ${t.Space.sp8};
+  color: ${e=>e.theme.colors.primary};
+  word-break: break-word;
+`,xl=s(t.ConfirmationPopUpDescription)`
+  margin-top: ${t.Space.sp5};
+  margin-bottom: ${t.Space.sp5};
+`,hl=s.span`
+  color: ${e=>e.theme.colors.primary};
+`,Fo=s.div`
+  cursor: pointer;
+  margin-left: ${t.Space.sp2};
+`,Bo=s(t.SvgVisibleOn)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  color: ${e=>e.theme.colors.hero};
+`,No=s(t.SvgVisibleOff)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  color: ${e=>e.theme.colors.hero};
+`,Oo=s.label`
+  margin-top: ${t.Space.sp2};
+`,_o=s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  max-width: 220px;
+`,Zo=s(t.StandardRegular)`
+  color: ${t.Colors.important};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: right;
+  margin-top: ${t.Space.sp3};
+`,gl=s.div`
+  display: flex;
+  flex: 1;
+  background-color: ${e=>e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`,Sl=s.div`
+  border-radius: ${t.Space.sp1};
+  height: ${t.Space.sp6};
+  width: ${e=>Zt.iFrameWidth.valuePx(e.windowSize)};
+`,fl=s.div`
+  border-radius: ${t.Space.sp1};
+  height: ${t.Space.sp6};
+  width: ${e=>Zt.iFrameWidth.valuePx(e.windowSize)};
+`,Cl=s.div`
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  border-radius: ${t.Space.sp2};
+`,Go=s.div`
+  display: flex;
+  padding: ${t.Space.sp2};
+  padding-left: ${t.Space.sp4};
+  align-items: start;
+  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${t.Space.sp2};
+  justify-content: space-between;
+  background-color: ${e=>e.theme.colors.grey5};
+  gap: 11px;
+  &:hover {
+    z-index: 1;
+    outline: ${e=>`1px solid ${e.theme.colors.primary}`};
+  }
+  iframe {
+    height: 100%;
+    width: ${e=>Zt.iFrameWidth.valuePx(e.windowSize)};
+  }
+  .cc-new-pin-form-field {
+    background: ${e=>e.showFieldError?t.Colors.importantLight:e.newPinInputHighlighted===!0?e.theme.colors.background:"unset"};
+  }
+  .cc-old-pin-form-field {
+    background: ${e=>e.showFieldError?t.Colors.importantLight:e.oldPinInputHighlighted===!0?e.theme.colors.background:"unset"};
+  }
+  ${e=>e.isFirstField?W.css`
+          border-bottom-left-radius: ${t.Space.sp0};
+          border-bottom-right-radius: ${t.Space.sp0};
+        `:W.css`
+          border-top-left-radius: ${t.Space.sp0};
+          border-top-right-radius: ${t.Space.sp0};
+        `}
+  ${e=>e.validation?W.css`
+          .vgs-collect-container__invalid:not(.vgs-collect-container__focused) {
+            background: ${t.Colors.importantLight};
+          }
+          .vgs-collect-container__focused) {
+            background: ${e.theme.colors.background};
+          }
+        `:null}
+`,ke={bottomContentContainerPadding:new t.ResponsiveSized(t.sp[3],t.sp[8]),styledAIIconContainerSize:new t.ResponsiveSized(t.sp[3],t.sp[3]),bannerWrapperMarginLeftRight:new t.ResponsiveSized(t.sp[3],t.sp[8]),payNowSectionPaddingLeftRight:new t.ResponsiveSized(t.sp[3],t.sp[0]),styledHighImportanceIconMarginRight:new t.ResponsiveSized(t.sp[0],t.sp[1])},{common:$e,spendManagement:yl,dateFormat:jl}=t.appLocale.getLocalizedStrings(),de=yl.chargeCard,$l=({chargeCardDetailView:e,onUnlockChargeCard:n,onCloseChargeCard:a,cardsEndPoint:c,classListFetchState:d,transactionAttachmentsEndpointToFetch:h,transactionAttachmentEndpointToDownload:l,authParams:m,hideSorting:u,cardId:S,vgsVaultId:f,controllerEmails:r,isCardControlsEnabled:x,isChargeCardFeatureEnabled:g,isDebitCardFeatureEnabled:w,isDebitCardSetupEnabled:y,isChargeCardSetupEnabled:v,chargeCardCashbackDetailState:b,onFetchChargeCardsRecurringExpenses:p,productInformation:P,cashbackInformation:j,creditAccountInformation:z,debitAccountInformation:H,creditAccount:R,cardIssuedByRoles:N,cardIssuedByDepartmentName:X,cardHolderRoles:U,cardHolderDepartmentName:T,loggedInUserRole:K,appleWalletLink:ne,googleWalletLink:ee,signedInUser:Q,signedInUserToken:I,chargeCardsRecurringExpensesState:O,isSandboxEnv:te,isEarlyPayEnabled:V,documentAiReceiptMaxSizeLimit:re,isSnackbarOpen:oe,onFireOnClickAnalytics:E,onUpdateDebitCardPinAttempt:se,onFireVerifyPopOnClickAnalytics:q,onBackClick:G,onReloadTransactions:$,onFetchChargeCardTransactionList:_,onGetOtp:ie,onLockChargeCard:D,onResendOtp:L,onVerifyOtp:le,updateChargeCardName:ae,onVerifyOtpSuccess:F,onColorCodeChange:he,onColumnSortConfigChanged:pe,updateChargeCardTransactionAttachments:J,updateChargeCardTransactionUploadReceiptsFetchStatus:B,updateChargeCardTransactionReceiptsShowTick:Z,updateChargeCardTransactionIsViewReceiptClicked:Y,onUploadReceiptComplete:ue,removeSnackbar:me,onChargeCardTransactionRowClick:Me,onChargeCardRevokeInviteClick:Ye,onUpdateScrollYOffset:Ke,updateSpendLimit:Ie,shouldOpenCreditCardPaymentDrawer:ge})=>{const A=i.useRef(!0),ce=o.useTheme(),k=t.useWindowSizeContext(),Je=t.useGlobalInfoContext(),rt=t.useToolkitContext().analytics,[,it]=t.useCopyToClipboard(),[Re,Xe]=i.useState(!1),[Pe,be]=i.useState(!1),[We,Qe]=i.useState(!1),[je,ze]=i.useState(!1),[Ve,Le]=i.useState(!1),[et,Gt]=i.useState(!1),[fs,Cs]=i.useState(!1),[ys,Ut]=i.useState(!1),[js,dt]=i.useState(!1),[$s,St]=i.useState(!1),[vs,pt]=i.useState(!1),[ws,ut]=i.useState(!1),[tt,ft]=i.useState(!1),[qt,Ct]=i.useState(!1),[Dt,Yt]=i.useState(!1),[Rs,Kt]=i.useState(!1),[bs,Es]=i.useState("apple"),[Jt,Xt]=i.useState({number:!1,cvv:!1});i.useEffect(()=>{tt===!1&&Ct(!1)},[tt]);const Qt=i.useRef("noAnimation"),He=e.chargeCard?.cardHolderUserId===Q.userId,yt=`${e.chargeCard?.cardHolderUser?.firstName??""} ${e.chargeCard?.cardHolderUser?.lastName??""}`,Vt=e.chargeCard?.billingAddress,Se=st.hasChargeCardAdminLevelAccess(Je.loggedInUserRoleMap),{text1:ks,text2:Ls}=t.getAddressTexts(Vt),eo=`${ks} ${Ls}`,jt=e.chargeCard?.isDeclinedTransaction===!0,Ts=()=>{At({chargeCardDetailView:e,chargeCardCashbackDetailState:b,isChargeCardFeatureEnabled:g,productInformation:P,cashbackInformation:j,creditAccountInformation:z,debitAccountInformation:H,creditAccount:R,creditAccountRepayment:e.creditAccountRepayment,isDebitCard:ve,isChargeCardAdmin:Se,analytics:rt,controllerEmails:r,actionField:"Receipt Email",actionDetails:e.chargeCardConfig.receiptBotEmail}),it(e.chargeCardConfig.receiptBotEmail),Xe(!0)},Ps=()=>{E("card owner copied"),At({chargeCardDetailView:e,chargeCardCashbackDetailState:b,isChargeCardFeatureEnabled:g,productInformation:P,cashbackInformation:j,creditAccountInformation:z,debitAccountInformation:H,creditAccount:R,creditAccountRepayment:e.creditAccountRepayment,isDebitCard:ve,isChargeCardAdmin:Se,analytics:rt,controllerEmails:r,actionField:"Card Owner",actionDetails:yt}),it(yt),Le(!0)},zs=()=>{E("billing address copied"),At({chargeCardDetailView:e,chargeCardCashbackDetailState:b,isChargeCardFeatureEnabled:g,productInformation:P,cashbackInformation:j,creditAccountInformation:z,debitAccountInformation:H,creditAccount:R,creditAccountRepayment:e.creditAccountRepayment,isDebitCard:ve,isChargeCardAdmin:Se,analytics:rt,controllerEmails:r,actionField:"Billing Address",actionDetails:eo}),it(eo),Gt(!0)};i.useEffect(()=>{Re===!0&&setTimeout(()=>{Xe(!1)},800),Ve===!0&&setTimeout(()=>{Le(!1)},800),et===!0&&setTimeout(()=>{Gt(!1)},800)},[Ve,et,Re]);const[Xl,As]=i.useState(!1),[to,oo]=i.useState(e.chargeCard?.cardColorCode!=null?new o.Color(e.chargeCard.cardColorCode):void 0);i.useEffect(()=>{e.chargeCard?.cardColorCode!=null&&oo(new o.Color(e.chargeCard.cardColorCode))},[e.chargeCard?.cardColorCode]);const so={amount:e.chargeCard!=null?e.chargeCard.balance.amount:0,currencyCode:e.chargeCard!=null?e.chargeCard.balance.currencyCode:$e.currency.countryCode,currencySymbol:e.chargeCard!=null?e.chargeCard.balance.currencySymbol:$e.currency.currencySymbol};i.useEffect(()=>{A.current===!0?A.current=!1:E(tt===!1?"card details hidden":"card detail revealed")},[tt]);const no=(M,fe)=>{if(fe===!0){const Fe=we.convertRGBToHex(M.toString())??$e.strings.empty;E("color selected",Fe),he(Fe),As(!1)}oo(M)},ro=M=>{const{cvv:fe,number:Fe}=M;return fe===!0||Fe===!0},{isMobileOrTabletScreen:io}=t.useDeviceDetect(),$t=e.chargeCard?.status.code!=="request_on_hold"&&e.chargeCard?.status.code!=="inactive",vt=e.updateChargeCardLimitFetchState.fetchState,wt=e.updateChargeCardNameFetchState.fetchState,Rt=e.lockChargeCardsFetchState.fetchState,bt=e.closeChargeCardsFetchState.fetchState,ao=t.usePrevious(vt),lo=t.usePrevious(wt),co=t.usePrevious(Rt),po=t.usePrevious(bt);i.useEffect(()=>{ao==="In-Progress"&&vt==="Completed"?dt(!1):lo==="In-Progress"&&wt==="Completed"?St(!1):co==="In-Progress"&&Rt==="Completed"?pt(!1):po==="In-Progress"&&bt==="Completed"&&ut(!1)},[vt,wt,Rt,bt,ao,lo,co,po]);const ve=e.chargeCard?.type.code==="business_physical_debit_card"||e.chargeCard?.type.code==="business_virtual_debit_card",Ms=Se&&(e.chargeCard?.status.code==="active"||e.chargeCard?.status.code==="locked")&&so.amount<(ve?e.depositAccountLimit?.cardLimits.dailyCardTransactionLimit.amount??0:e.creditAccount.limit.amount),Is=e.creditAccountRepayment.initiatedRepayments.amount>0&&Se&&jt,Ws=()=>{if(!x)return[{value:"changePin",label:de.cardDetails.moreOptions.changePin}];const M=[{value:"changePin",label:de.cardDetails.moreOptions.changePin},{value:"unlock",label:de.cardDetails.moreOptions.unlock},{value:"updateSpendLimit",label:de.cardDetails.moreOptions.updateSpendLimit},{value:"rename",label:de.cardDetails.moreOptions.rename},{value:"lock",label:de.cardDetails.moreOptions.lock},{value:"close",label:de.cardDetails.moreOptions.close},{value:"revokeInvite",label:de.cardDetails.moreOptions.revokeInvite}],fe=e.chargeCard?.status.code,Fe=fe==="locked",Ns=fe==="inactive",Os=fe==="request_on_hold",_s=e.chargeCard?.isLockedByAdmin===!0,xo=ve&&He,mt=Se;if(Os){const Te=[];return mt&&Te.push("revokeInvite"),Te.push("rename"),M.filter(Et=>Te.includes(Et.value))}if(Ns){const Te=[];return Te.push("rename"),xo&&Te.push("changePin"),mt&&Te.push("close"),M.filter(Et=>Te.includes(Et.value))}const Zs={changePin:xo&&!Fe,lock:!Fe,unlock:Fe&&(Se||!_s),rename:!0,updateSpendLimit:mt,close:mt};return M.filter(Te=>Zs[Te.value])},uo=o.jsxRuntimeExports.jsx("div",{children:o.jsxRuntimeExports.jsx(Gs.MoreMenuButton,{entity:"debit_cards",isDisabled:e.unlockChargeCardsFetchState.fetchState==="In-Progress"?"disabled":void 0,onOptionSelection:M=>{M==="changePin"?(I==null||I.expiry.isBefore(new Date)?ie(e.loggedInUserPhone):ze(!0),Qe(!0)):M==="updateSpendLimit"?dt(!0):M==="rename"?St(!0):M==="lock"?(pt(!0),p()):M==="close"?(ut(!0),p()):M==="unlock"?n(Se):M==="revokeInvite"&&Ye()},isMoreOption:!0,options:Ws(),customStyleConfig:{control:()=>({backgroundColor:"inherit",cursor:"pointer",border:"none",":hover":{backgroundColor:"inherit"}}),valueContainer:M=>({...M,display:"flex",alignItems:"center"})}})}),mo=M=>M.reasonType==="other"?M.reason:M.reasonType,Hs=M=>{const fe=mo(M);D(Se,fe)},Fs=M=>{const fe=mo(M);a(fe)},Bs=()=>{const M=e.chargeCard?.status.code;if(M==="closed"||M==="closed_by_customer")return null;if(!x)return He&&ve?uo:null;if(!He&&!Se)return null;const fe=e.chargeCard?.isLockedByAdmin===!0;return He&&!Se&&fe&&M==="locked"?null:uo};return o.jsxRuntimeExports.jsxs(Wl,{children:[vs&&e.chargeCard!=null&&o.jsxRuntimeExports.jsx(xt.LockCardPage,{showLockCardDrawer:!0,onCloseLockCardDrawer:()=>pt(!1),isChargeCardAdmin:Se,chargeCardsByCardId:{[e.chargeCard.id]:e.chargeCard},cardRecurringExpensesByCardId:{[e.chargeCard.id]:O.recurringExpenses},cardRecurringExpenseFetchState:O.fetchState,lockCardFetchState:e.lockChargeCardsFetchState.fetchState,onConfirmClick:Hs,onDismissClick:()=>pt(!1),onRemoveCardClick:()=>{}}),ws&&e.chargeCard!=null&&o.jsxRuntimeExports.jsx(xt.CloseCardPage,{showCloseCardDrawer:!0,onCloseCloseCardDrawer:()=>ut(!1),isChargeCardAdmin:Se,chargeCardsByCardId:{[e.chargeCard.id]:e.chargeCard},cardRecurringExpensesByCardId:{[e.chargeCard.id]:O.recurringExpenses},cardRecurringExpenseFetchState:O.fetchState,closeCardFetchState:e.closeChargeCardsFetchState.fetchState,onConfirmClick:Fs,onDismissClick:()=>ut(!1),onRemoveCardClick:()=>{}}),je&&e.chargeCard?.cardProviderID!=null?o.jsxRuntimeExports.jsx(ul,{signedInUserToken:I,vgsVaultId:f,onCancelClick:()=>{ze(!1),Qe(!0)},isSandboxEnv:!0,cardProviderID:e.chargeCard?.cardProviderID,onChangePinSuccess:()=>{ze(!1),Qe(!0)},onUpdateDebitCardPinAttempt:se}):null,io?null:o.jsxRuntimeExports.jsx(Ka,{isChargeCardAdmin:Se,controllerEmails:r,isChargeCardFeatureEnabled:g,isDebitCardFeatureEnabled:w,isDebitCardSetupEnabled:y,isChargeCardSetupEnabled:v,chargeCardCashbackDetailState:b,creditAccountRepayment:e.creditAccountRepayment,productInformation:P,cashbackInformation:j,creditAccountInformation:z,debitAccountInformation:H,creditAccount:e.creditAccount,selectedColor:to,walletType:bs,onFireOnClickAnalytics:E,isSandboxEnv:te,chargeCardDetailView:e,vgsVaultId:f,signedInUserToken:I,showSecretInfo:tt,changePinInProcess:We,setShowChangePinPopup:ze,isCardDetailErrored:Dt,cardDetailsFetchState:Jt,setCardDetailsFetchState:Xt,setIsCardDetailErrored:Yt,isCardDetailFetching:ro,handleColorCodeClick:no,isDrawerOpen:Rs,setIsAddToWalletDrawerOpen:Kt,onVerifyOtp:le,onVerifyOtpSuccess:F,onFireVerifyPopOnClickAnalytics:q,onResendOtp:L,setShowSecretInfo:ft,secretRevealed:qt,setSecretRevealed:Ct,onGetOtp:ie,showDrawerAnimation:Qt}),o.jsxRuntimeExports.jsx(t.NavBar,{rightSideComponent:Bs(),navBarContainerStyles:{paddingTop:t.sp[2],alignItems:"center",paddingBottom:t.sp[2]},source:"ChargeCardDetailPage",title:e.chargeCard?.cardName??$e.strings.empty,subTitle:e.fetchState==="Completed"&&e.chargeCard!=null?o.jsxRuntimeExports.jsx(qs.CardNumberSubText,{cardDetail:e.chargeCard,forDetailPage:!0}):void 0,showBackButton:!0,showMenuIcon:!1,backgroundColor:ce.colors.grey5,style:{zIndex:3},onBackClick:G,titleStyle:{marginTop:t.sp[0],...k==="small"&&{textAlign:"left"}},leftComponentStyle:k==="small"?{width:"10%"}:void 0,middleComponentStyle:k==="small"?{width:"80%"}:void 0,rightComponentStyle:k==="small"?{width:"10%"}:void 0}),o.jsxRuntimeExports.jsx(t.OtpPopupSection,{phoneNumberPopupDescription:de.cardDetails.verifyPhoneNumberDescription,showOtpPopup:fs,showPhoneNumberPopup:ys,twoFactorAuthenticationView:e.twoFAView,loggedInUserPhone:e.loggedInUserPhone,onVerifyOtp:le,onVerifyOtpSuccess:M=>{F(M),We?ze(!0):ft(!0)},onFireVerifyPopOnClickAnalytics:q,setShowOtpPopup:Cs,onResendOtp:L,setShowPhoneNumberPopup:Ut,onGetOtp:ie}),$s&&o.jsxRuntimeExports.jsx(xt.RenamePopup,{currentCardName:e.chargeCard?.cardName??"",renameFetchState:e.updateChargeCardNameFetchState.fetchState,onCancelClick:()=>St(!1),onSubmitClick:M=>{e.chargeCard&&ae(Se,M)}}),js&&e.chargeCard!=null?o.jsxRuntimeExports.jsx(xt.UpdateSpendLimitPopup,{controllerEmails:r,isChargeCardFeatureEnabled:g,isDebitCardFeatureEnabled:w,isDebitCardSetupEnabled:y,isChargeCardSetupEnabled:v,productInformation:P,cashbackInformation:j,creditAccountInformation:z,debitAccountInformation:H,cardDetail:e.chargeCard,transactionStatistics:e.transactionStatistics,depositAccountLimitFetchState:e.depositAccountLimitFetchState.fetchState,creditAccount:R,creditAccountRepayment:e.creditAccountRepayment,signedInUser:Q,isDebitCard:ve,cardIssuedByRoles:N,cardHolderRoles:U,loggedInUserRole:K,cardIssuedByDepartmentName:X,cardHolderDepartmentName:T,classListFetchState:d,currentLimitAmount:e.chargeCard?.limit??{amount:0,currencyCode:$e.currency.countryCode,currencySymbol:$e.currency.currencySymbol},currentSpentAmount:e.chargeCard?.balance??{amount:0,currencyCode:$e.currency.countryCode,currencySymbol:$e.currency.currencySymbol},maxLimitAmount:ve?e.depositAccountLimit?.cardLimits.dailyCardTransactionLimit:e.creditAccount.limit,isDisabled:ve&&e.depositAccountLimitFetchState.fetchState!=="Completed",updateLimitFetchState:e.updateChargeCardLimitFetchState.fetchState,onCancelClick:()=>dt(!1),onSubmitClick:M=>{if(e.chargeCard){const fe={amount:M,currencyCode:e.chargeCard.limit.currencyCode,currencySymbol:e.chargeCard.limit.currencySymbol};Ie(e.chargeCard.id,fe,e.chargeCard.creditLimitFrequency,t.amountToString("0,0.[00]",fe))}},recommendations:e?.chargeCard?.recommendations}):null,e.fetchState==="Error"?o.jsxRuntimeExports.jsxs(Tl,{windowSize:k,children:[o.jsxRuntimeExports.jsx(Al,{onClick:$,"data-testid":t.generateDataTestId("reload-card-detail"),children:o.jsxRuntimeExports.jsx(Il,{})}),o.jsxRuntimeExports.jsx(Ml,{children:$e.reloadPage.label})]}):o.jsxRuntimeExports.jsxs(vl,{children:[o.jsxRuntimeExports.jsx(Er,{controllerEmails:r,isChargeCardFeatureEnabled:g,isDebitCardFeatureEnabled:w,isDebitCardSetupEnabled:y,isChargeCardSetupEnabled:v,creditAccount:R,creditAccountRepayment:e.creditAccountRepayment,productInformation:P,cashbackInformation:j,creditAccountInformation:z,debitAccountInformation:H,isDebitCard:ve,chargeCardCashbackDetailState:b,cardIssuedByRoles:N,cardIssuedByDepartmentName:X,cardHolderRoles:U,cardHolderDepartmentName:T,classListFetchState:d,chargeCardDetailView:e,spent:so,isCardNotPending:$t,cardOwnerName:yt,appleWalletLink:ne,googleWalletLink:ee,addressToShow:Vt,secretRevealed:qt,isOwnCard:He,vgsVaultId:f,showSecretInfo:tt,isSandboxEnv:te,isCardDetailErrored:Dt,signedInUserToken:I,selectedColor:to,cardDetailsFetchState:Jt,setCardDetailsFetchState:Xt,setIsCardDetailErrored:Yt,setSecretRevealed:Ct,isCardDetailFetching:ro,handleColorCodeClick:no,onFireOnClickAnalytics:E,setShowPhoneNumberPopup:Ut,setShowChangeSpendLimitPopup:dt,setShowSecretInfo:ft,isOwnerNameCopied:Ve,isAddressCopied:et,onOwnerNameCopyClick:Ps,onAddressCopyClick:zs,showUpdateSpendLimitAction:Ms,onUnlockChargeCard:n}),V?Is?o.jsxRuntimeExports.jsxs(Rl,{windowSize:k,children:[o.jsxRuntimeExports.jsx(Nl,{}),o.jsxRuntimeExports.jsx(El,{children:` ${de.payEarly.paymentOf} ${t.amountToString("0,0.[00]",e.creditAccountRepayment.initiatedRepayments)} ${de.payEarly.madeOn} ${e.creditAccountRepayment.initiatedRepaymentDate?.format(jl.visual.MMMDFormat)} ${de.payEarly.isProcessing} ${de.payEarly.theCompanyCreditLimitWillUpdateIn23BusinessDays}`})]}):jt?Se?o.jsxRuntimeExports.jsxs(Ss,{onClick:()=>{ge(!0)},windowSize:k,children:[o.jsxRuntimeExports.jsx(Uo,{windowSize:k}),o.jsxRuntimeExports.jsxs(Pl,{children:[o.jsxRuntimeExports.jsx(qo,{children:de.payEarly.transactionsMayBeDeclinedBecauseTheCompanyCreditLimitIsRunningLow}),o.jsxRuntimeExports.jsxs(kl,{className:"pay-now-button",children:[de.payEarly.payNow,o.jsxRuntimeExports.jsx(bl,{})]})]})]}):o.jsxRuntimeExports.jsxs(wl,{windowSize:k,children:[o.jsxRuntimeExports.jsx(Uo,{windowSize:k}),o.jsxRuntimeExports.jsx(zl,{children:o.jsxRuntimeExports.jsx(qo,{children:de.payEarly.yourTransactionsMayBeDeclinedBecauseTheCompanyCreditLimitIsRunningLowWeHaveNotifiedYourAdmin})})]}):null:null,He&&k!=="small"&&$t&&ve===!1?o.jsxRuntimeExports.jsx(Ys,{style:{marginTop:jt?t.Space.sp5:t.Space.sp4},classListFetchState:d,controllerEmails:r,isChargeCardFeatureEnabled:g,isDebitCardFeatureEnabled:w,isDebitCardSetupEnabled:y,isChargeCardSetupEnabled:v,chargeCardDetailView:e,creditAccount:R,creditAccountRepayment:e.creditAccountRepayment,productInformation:P,cashbackInformation:j,creditAccountInformation:z,debitAccountInformation:H,cardIssuedByRoles:N,cardHolderRoles:U,cardIssuedByDepartmentName:X,cardHolderDepartmentName:T,isDebitCard:ve,appleWalletLink:ne,googleWalletLink:ee,setWalletType:Es,setIsAddToWalletDrawerOpen:Kt,showDrawerAnimation:Qt}):null,o.jsxRuntimeExports.jsxs(Jl,{windowSize:k,isOwnCard:He,isMobileOrTabletScreen:io,children:[$t&&e.transactions.length>0?o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsxs(Fl,{windowSize:k,children:[de.cardDetails.transactionListTitle,o.jsxRuntimeExports.jsx(t.Tooltip,{display:"flex",placement:"right",title:o.jsxRuntimeExports.jsx(Ol,{children:de.cardDetails.transactionListTooltip.replace("__receiptRequiredAboveAmount__",e.chargeCardConfig.receiptRequiredAboveAmount.amount.toString())}),children:o.jsxRuntimeExports.jsx(Bl,{})})]}),o.jsxRuntimeExports.jsxs(_l,{windowSize:k,children:[o.jsxRuntimeExports.jsx(ql,{windowSize:k,children:o.jsxRuntimeExports.jsx(Dl,{})}),o.jsxRuntimeExports.jsxs(Hl,{windowSize:k,children:[o.jsxRuntimeExports.jsxs(Zl,{children:[o.jsxRuntimeExports.jsx(Ll,{children:de.aiCardAgentText}),$e.strings.space,de.receiptBotMessage,$e.strings.space]}),o.jsxRuntimeExports.jsxs(Ul,{"data-testid":t.generateDataTestId("charge-card-detail-copy-email"),onClick:Ts,onMouseEnter:()=>be(!0),onMouseLeave:()=>be(!1),children:[o.jsxRuntimeExports.jsx(Gl,{children:e.chargeCardConfig.receiptBotEmail}),Re===!0?o.jsxRuntimeExports.jsxs(Yo,{children:[o.jsxRuntimeExports.jsx(Kl,{}),o.jsxRuntimeExports.jsx(Do,{children:o.jsxRuntimeExports.jsx(Ko,{shouldDisplay:Pe||Re,color:t.Colors.primaryDark,children:$e.copyToClipBoard.copied})})]}):o.jsxRuntimeExports.jsxs(Yo,{children:[o.jsxRuntimeExports.jsx(Yl,{color:Pe?ce.colors.primary:void 0}),o.jsxRuntimeExports.jsx(Do,{children:o.jsxRuntimeExports.jsx(Ko,{shouldDisplay:Pe&&k!=="small",children:$e.copyToClipBoard.copy})})]})]})]})]})]}):null,o.jsxRuntimeExports.jsx(wa,{cardStatusCode:e.chargeCard?.status.code,cardCodeType:e.chargeCard?.type.code,cardId:S,documentAiReceiptMaxSizeLimit:re,uploadReceiptsFetchStateByTransactionId:e.uploadReceiptsFetchStateByTransactionId,isSnackbarOpen:oe,uploadReceiptsShowTickByTransactionId:e.uploadReceiptsShowTickByTransactionId,isViewReceiptClickedImmediatelyAfterUploadTransactionId:e.isViewReceiptClickedImmediatelyAfterUploadTransactionId,receiptRequiredAboveAmount:e.chargeCardConfig.receiptRequiredAboveAmount,cardsEndPoint:c,transactionAttachmentsEndpointToFetch:h,transactionAttachmentEndpointToDownload:l,authParams:m,hideSorting:u,transactions:e.transactions,cardHolderUser:e.chargeCard?.cardHolderUser,uiState:e.uiState,fetchState:e.transactionListFetchState.fetchState,isAiCategorizationEnabledForCardsTransactions:e.chargeCardConfig.isAiCategorizationEnabledForCardsTransactions,onReloadTransactions:$,onFetchChargeCardTransactionList:_,isOwnCard:He,onColumnSortConfigChanged:pe,removeSnackbar:me,onChargeCardTransactionRowClick:Me,onUpdateScrollYOffset:Ke,onUploadReceiptComplete:ue,updateChargeCardTransactionAttachments:J,updateChargeCardTransactionUploadReceiptsFetchStatus:B,updateChargeCardTransactionReceiptsShowTick:Z,updateChargeCardTransactionIsViewReceiptClicked:Y})]})]})]})},At=({chargeCardDetailView:e,chargeCardCashbackDetailState:n,isChargeCardFeatureEnabled:a,productInformation:c,cashbackInformation:d,creditAccountInformation:h,debitAccountInformation:l,creditAccount:m,creditAccountRepayment:u,isDebitCard:S,isChargeCardAdmin:f,analytics:r,controllerEmails:x,actionDetails:g,actionField:w})=>{e.chargeCard!=null&&n.fetchState==="Completed"&&(!a||m.fetchState==="Completed"&&u.fetchState==="Completed")&&(!(S&&f)||e.depositAccountLimitFetchState.fetchState==="Completed")&&r.trackCardsCopyIconClick(x,c,"Cards Detail","Copy","copied",w,g,d,h,l)},vl=s.div``,Ss=s.div`
+  background: ${t.Colors.important};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: ${t.Space.sp3};
+  padding-bottom: ${t.Space.sp3};
+  padding-left: ${({windowSize:e})=>ke.payNowSectionPaddingLeftRight.valuePx(e)};
+  padding-right: ${({windowSize:e})=>ke.payNowSectionPaddingLeftRight.valuePx(e)};
+  gap: ${t.Space.sp1};
+  align-items: start;
+  cursor: pointer;
+  :hover {
+    .pay-now-button {
+      text-decoration: underline;
+    }
+  }
+`,wl=s(Ss)``,Rl=s.div`
+  background: ${t.Colors.alertLight};
+  display: flex;
+  align-items: start;
+  justify-content: center;
+  padding-top: ${t.Space.sp3};
+  padding-bottom: ${t.Space.sp3};
+  padding-left: ${({windowSize:e})=>ke.payNowSectionPaddingLeftRight.valuePx(e)};
+  padding-right: ${({windowSize:e})=>ke.payNowSectionPaddingLeftRight.valuePx(e)};
+  gap: ${t.Space.sp2};
+`,Uo=s(t.SvgHighImportanceFilled)`
+  color: ${e=>e.theme.colors.grey5};
+  margin-right: ${({windowSize:e})=>ke.styledHighImportanceIconMarginRight.valuePx(e)};
+  min-width: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+  path:nth-child(2),
+  path:nth-child(3) {
+    stroke: ${t.Colors.important};
+  }
+`,bl=s(t.SvgArrowRight)`
+  color: ${e=>e.theme.colors.grey5};
+  min-width: 12px;
+  width: 12px;
+  height: 12px;
+`,qo=s(t.StandardRegularSp)`
+  color: ${e=>e.theme.colors.grey5};
+`,El=s(t.StandardRegularSp)`
+  color: ${t.Colors.brandColorGoldDark};
+`,kl=s(t.StandardMediumSp)`
+  color: ${e=>e.theme.colors.grey5};
+  gap: ${t.Space.sp1};
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+`,Ll=s(t.StandardSemiBoldSp)`
+  color: ${e=>e.theme.colors.brandColorSapphire};
+  ${({theme:e})=>e.mode==="dark"&&`color: ${t.Colors.brandColorPearl};`}
+`,Tl=s.div`
+  display: flex;
+  width: 100%;
+  height: calc(100vh - ${e=>t.navBarHeight.valuePx(e.windowSize)});
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: ${e=>e.theme.colors.grey5};
+`,Pl=s.div``,zl=s.div``,Al=s.div`
+  height: ${t.Space.sp12};
+  width: ${t.Space.sp12};
+  background: ${e=>e.theme.colors.background};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  cursor: pointer;
+  & svg {
+    margin: ${t.Space.sp5};
+    color: ${e=>e.theme.colors.grey1};
+  }
+  &:hover {
+    & svg {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+`,Ml=s(t.SmallRegularSp)`
+  margin-top: ${t.Space.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,Il=s(t.SvgReload)`
+  height: ${t.Space.sp5};
+  width: ${t.Space.sp5};
+  margin: ${t.Space.sp5};
+  color: ${e=>e.theme.colors.grey1};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Wl=s.div`
+  background: ${e=>e.theme.colors.grey4};
+`,Hl=s.div`
+  width: 100%;
+  max-width: ${e=>e.windowSize==="small"?"calc(100% - 20px)":"unset"};
+`,Fl=s(t.LargeSemiBold)`
+  color: ${e=>e.theme.colors.primary};
+  margin-bottom: ${t.Space.sp3};
+  display: flex;
+  align-items: center;
+  margin-right: ${e=>ke.bottomContentContainerPadding.valuePx(e.windowSize)};
+  margin-left: ${e=>ke.bottomContentContainerPadding.valuePx(e.windowSize)};
+`,Bl=s(t.SvgInfo)`
+  color: ${e=>e.theme.colors.hero};
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  margin-left: ${t.Space.sp2};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Nl=s(t.SvgInfo)`
+  color: ${t.Colors.brandColorGoldDark};
+  min-width: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+`,Ol=s(t.SmallRegular)`
+  padding: 2px ${t.Space.sp2};
+  box-sizing: content-box;
+  color: ${e=>e.theme.colors.hero};
+  background: ${e=>e.theme.colors.black};
+  border-radius: ${t.Space.sp1};
+  max-width: 178px;
+  text-align: left;
+`,_l=s.div`
+  display: flex;
+  border: 1.25px solid transparent;
+  background: ${e=>`linear-gradient(${e.theme.colors.grey4}, ${e.theme.colors.grey4}) padding-box,
+    ${t.Colors.receiptAgentLinearGradient}
+      border-box`};
+  padding: ${t.Space.sp3} ${t.Space.sp4};
+  border-radius: ${t.Space.sp2};
+  align-items: ${e=>e.windowSize==="small"?"flex-start":"center"};
+  gap: ${t.Space.sp1};
+  margin: 0
+    ${e=>ke.bannerWrapperMarginLeftRight.valuePx(e.windowSize)};
+`,Zl=s(t.StandardRegularSp)`
+  color: ${e=>e.theme.colors.primary};
+`,Gl=s(t.StandardMediumSp)`
+  color: ${e=>e.theme.colors.primary};
+`,Ul=s.span`
+  cursor: pointer;
+`,Do=s.span`
+  position: absolute;
+  bottom: -${t.Space.sp5};
+  z-index: 10;
+  left: ${t.Space.sp2};
+`,Yo=s.span`
+  position: relative;
+  margin-left: ${t.Space.sp1};
+  top: 2px;
+`,Ko=s(t.SmallRegular)`
+  position: relative;
+  background: ${e=>e.theme.colors.black};
+  color: ${e=>e.color!=null?e.color:e.theme.colors.grey1};
+  padding: 2px ${t.Space.sp2};
+  z-index: 10;
+  border-radius: ${t.Space.sp1};
+  left: -50%;
+  display: ${e=>e.shouldDisplay?"block":"none"};
+`,ql=s.div`
+  width: ${e=>ke.styledAIIconContainerSize.valuePx(e.windowSize)};
+  min-width: ${e=>ke.styledAIIconContainerSize.valuePx(e.windowSize)};
+  height: ${e=>ke.styledAIIconContainerSize.valuePx(e.windowSize)};
+  top: ${t.Space.sp1};
+  position: ${e=>e.windowSize==="small"?"relative":"static"};
+`,Dl=s(t.SvgAiIcon)`
+  color: ${e=>e.theme.colors.brandColorJade};
+  width: 100%;
+  height: 100%;
+`,Yl=s(t.SvgCopy)`
+  height: ${t.Space.sp3};
+  width: ${t.Space.sp3};
+  color: ${e=>e.color!=null?e.color:e.theme.colors.hero};
+  cursor: pointer;
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Kl=s(t.SvgTickRoundFill)`
+  height: ${t.Space.sp3};
+  width: ${t.Space.sp3};
+  color: ${t.Colors.success};
+`,Jl=s.div`
+  padding-top: ${e=>e.isOwnCard?e.isMobileOrTabletScreen?t.Space.sp3:t.Space.sp4:t.Space.sp5};
+  padding-bottom: ${t.Space.sp4};
+`;exports.default=$l;