@zeniai/web-cockpit-ui 1.14.82-dev → 1.14.83-dev

package/dist/assets/LockCardPage-Do7WCHaW-DegBv6L_.js

@@ -0,0 +1,623 @@
+import{u as he,i as Me,a8 as me,R as d,dN as ue,j as t,gw as _e,a as W,aa as ge,al as Ue,hm as We,b as r,t as Ve,cH as Ye,bn as re,dL as qe,bK as X,fF as Xe,A as Ge,bC as Je,ak as Ke,dv as ur,B as pe,a7 as gr,a$ as xr,i9 as wr,bm as de,hx as $r,s as y,f as Qe,cJ as xe,H as Ze,ah as b,bH as we,af as J,eQ as er,bz as rr,dq as tr,C as G,ai as ir,k6 as oe,km as fr,kn as yr,ki as br,eR as Te,gK as vr,fY as jr}from"./index-2CdI-B2B.js";import{a as ae}from"./core-tlHkQPPu.js";import{n as i}from"./mui-kiGMfX4-.js";import{eI as Sr}from"./zeni-epic-state-Bo1aGezX.js";import{y as or}from"./RoleWithToolTip-CWH-iJqI-DmzPBpda.js";import{h as ar}from"./CardNumberSubText-COZ0PEHK-CGMTIPNh.js";const Z="cardName",fe=W.getLocalizedStrings().spendManagement.chargeCard.renamePopup;function vi({currentCardName:e,renameFetchState:x,onCancelClick:p,onSubmitClick:c}){const l=he(),w="RenameCardForm",n=me({mode:"all",defaultValues:{[Z]:e},values:{[Z]:e}});ae.useEffect(()=>{n.setFocus(Z)},[]);const m=n.handleSubmit(()=>{const g=n.getValues(Z);g!=null&&c(g)}),B=ue(n.formState.errors,Z),A=W.getLocalizedStrings().common,o=le.largeLabelWidth.value(l);return t.jsx(Cr,{windowSize:l,role:"presentation",children:t.jsx(Ke,{onClickAway:()=>p(),children:t.jsxs(zr,{windowSize:l,children:[t.jsx(ge,{...n,children:t.jsxs(Rr,{id:w,onSubmit:g=>{g.preventDefault(),m()},children:[t.jsx(kr,{windowSize:l,children:fe.heading}),t.jsx(Dr,{hasError:B,children:t.jsx(ur,{label:{label:fe.newName,width:o},style:{width:"auto"},text:{type:"text",name:Z,defaultValue:e,placeholder:fe.placeholder,options:{required:!0,validate:g=>g!=null}}})})]})}),t.jsx(Pr,{children:t.jsxs(Lr,{children:[t.jsx(pe,{label:A.cancel,onClick:()=>{p()},style:{width:84}}),t.jsx(Tr,{}),t.jsx(pe,{variant:"primary",label:A.texts.update,style:{width:84,whiteSpace:"nowrap"},loading:x==="In-Progress",type:"submit",form:w})]})})]})})})}const le={width:new d(343,500,500),largeLabelWidth:new d(108,108,108),popupLeftRightPadding:new d(y[5],y[6]),popupTopBottomPadding:new d(y[5],y[5])},Cr=i.div`
+  position: fixed;
+  top: ${r.sp0};
+  left: ${r.sp0};
+  width: 100%;
+  z-index: 100;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: ${G.overlayDark};
+`,zr=i.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+  text-align: center;
+  background: ${e=>e.theme.colors.grey4};
+  border-radius: ${r.sp2};
+  position: relative;
+  margin: auto;
+  width: ${e=>le.width.valuePx(e.windowSize)};
+  padding: ${e=>`${le.popupTopBottomPadding.valuePx(e.windowSize)} ${le.popupLeftRightPadding.valuePx(e.windowSize)}`};
+  box-sizing: border-box;
+`,kr=i(xe)`
+  color: ${e=>e.theme.colors.primary};
+  margin-bottom: ${r.sp3};
+`,Lr=i.div`
+  display: flex;
+  justify-content: center;
+  padding-top: ${r.sp4};
+`,Tr=i.div`
+  width: ${r.sp3};
+`,Pr=i.div`
+  display: flex;
+  flex-direction: column;
+`,Dr=i.div`
+  border: ${e=>`1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${e=>`${r.sp0} 1px 2px ${r.sp0} ${e.theme.colors.issueChargeCardBackgroundShadow}`};
+  border-radius: ${r.sp2};
+  background-color: ${e=>e.theme.colors.grey5};
+  width: 100%;
+  :hover {
+    border: ${e=>`1px solid ${e.theme.colors.primary}`};
+    input {
+      background-color: ${e=>e.hasError?G.importantLight:e.theme.colors.background} !important;
+    }
+  }
+`,Rr=i.form`
+  display: contents;
+`,ee="spendLimit",Q=W.getLocalizedStrings().spendManagement.chargeCard.updateSpendLimitPopup,{dateFormat:ye}=W.getLocalizedStrings();function ji({controllerEmails:e,isChargeCardFeatureEnabled:x,isDebitCardFeatureEnabled:p,isDebitCardSetupEnabled:c,isChargeCardSetupEnabled:l,cardDetail:w,transactionStatistics:n,depositAccountLimitFetchState:m,creditAccount:B,creditAccountRepayment:A,signedInUser:o,isDebitCard:g,classListFetchState:I,currentLimitAmount:_,currentSpentAmount:v,productInformation:U,creditAccountInformation:V,debitAccountInformation:Y,maxLimitAmount:O,isDisabled:K,updateLimitFetchState:N,recommendations:q,cardIssuedByRoles:$,cardHolderRoles:C,loggedInUserRole:D,cardIssuedByDepartmentName:a,cardHolderDepartmentName:s,onCancelClick:z,onSubmitClick:u}){const h=gr().analytics,R=he(),se="SpendLimitForm",sr=xr();Sr(sr.loggedInUserRoleMap);const te=me({mode:"onBlur",reValidateMode:"onBlur",defaultValues:{[ee]:void 0}}),{control:nr,formState:{errors:dr}}=te,[lr,cr]=ae.useState(void 0),ne=wr({control:nr,name:ee}),Ce=w?.type.code.includes("physical")===!0?w.cardActivationAttemptHistory[0]?.timestamp:w?.createTime,ze=(w?.recommendations??[]).map(f=>f.creditLimit.amount),pr=te.handleSubmit(()=>{const f=te.getValues(ee);f!=null&&(Pe({analytics:h,controllerEmails:e,isChargeCardFeatureEnabled:x,cardDetail:w,transactionStatistics:n,depositAccountLimitFetchState:m,creditAccount:B,creditAccountRepayment:A,signedInUser:o,isDebitCard:g,classListFetchState:I,currentLimitAmount:_,recommendedLimitAmounts:ze,cardActivationDate:Ce,cardIssuedByRoles:$,cardHolderRoles:C,cardIssuedByDepartmentName:a,cardHolderDepartmentName:s,loggedInUserRole:D,productInformation:U,creditAccountInformation:V,debitAccountInformation:Y,clickItem:"Update",newSpendLimitAmount:f}),u(f))}),ke=ue(dr,ee),$e=W.getLocalizedStrings().common,hr=ce.largeLabelWidth.value(R);ae.useEffect(()=>{cr(Ar(v,O,ne))},[ne,v,O]);const mr=(f,ie)=>t.jsxs(Ur,{isSelected:ne===f.amount,onClick:()=>{return Le=f.amount,void te.setValue(ee,Le,{shouldValidate:!0});var Le},"data-testid":de("quick-amount-button",ie.toString()),children:[ie===1&&t.jsx(Wr,{}),re("0,0.[00]",f)]},ie);return t.jsx(Ir,{windowSize:R,role:"presentation","data-testid":de("update-spend-limit-popup"),children:t.jsx(Ke,{onClickAway:()=>z(),children:t.jsxs(Nr,{windowSize:R,children:[t.jsx(ge,{...te,children:t.jsxs(Vr,{id:se,onSubmit:f=>{f.preventDefault(),pr()},children:[t.jsx(Fr,{windowSize:R,children:Q.heading}),t.jsxs(Er,{windowSize:R,children:[Q.currentLimit,$e.strings.space," ",re("0,0.[00]",_),Q.slashMonth]}),t.jsxs(Mr,{hasError:ke,children:[t.jsx($r,{label:{label:Q.newLimit,width:hr},showAdditionalInfoLabel:ke,additionalInfoLabel:lr,formattedTextField:{type:"number",name:ee,defaultValue:void 0,placeholder:Q.placeholder,returnValueType:"floatValue",prefix:"$",allowNegative:!0,isNumericString:!1,registerOptions:{required:!0,validate:f=>!!f&&f>0&&f>v.amount&&(O==null||f<=O.amount)},autoComplete:"off",decimalSeparator:".",decimalScale:2,fixedDecimalScale:!1,thousandSeparator:!0},style:{width:"auto"},showOutlineOnFocus:!1}),q?.length?t.jsx(_r,{windowSize:R,children:q?.map((f,ie)=>mr(f.creditLimit,ie))}):null]})]})}),t.jsx(Hr,{children:t.jsxs(Br,{children:[t.jsx(pe,{label:$e.cancel,onClick:()=>{w!=null&&Pe({analytics:h,controllerEmails:e,isChargeCardFeatureEnabled:x,cardDetail:w,transactionStatistics:n,depositAccountLimitFetchState:m,creditAccount:B,creditAccountRepayment:A,signedInUser:o,isDebitCard:g,classListFetchState:I,currentLimitAmount:_,recommendedLimitAmounts:ze,cardActivationDate:Ce,cardIssuedByRoles:$,cardHolderRoles:C,cardIssuedByDepartmentName:a,cardHolderDepartmentName:s,loggedInUserRole:D,clickItem:"Cancel",newSpendLimitAmount:ne,productInformation:U,creditAccountInformation:V,debitAccountInformation:Y}),z()},style:{width:84},"data-testid":de("update-spend-limit-cancel-button")}),t.jsx(Or,{}),t.jsx(pe,{variant:"primary",label:$e.texts.update,style:{width:84,whiteSpace:"nowrap"},loading:N==="In-Progress",type:"submit",form:se,"data-testid":de("update-spend-limit-submit-button"),disabled:K})]})})]})})})}const Ar=(e,x,p)=>{if(p!=null){if(p<=e.amount)return Q.amountBelowError.replace("_amount_",re("0,0.[00]",e));if(x!=null&&p>x.amount)return Q.amountExceedError.replace("_amount_",re("0,0.[00]",x))}},Pe=({analytics:e,controllerEmails:x,isChargeCardFeatureEnabled:p,productInformation:c,creditAccountInformation:l,debitAccountInformation:w,cardDetail:n,transactionStatistics:m,depositAccountLimitFetchState:B,creditAccount:A,creditAccountRepayment:o,signedInUser:g,isDebitCard:I,classListFetchState:_,currentLimitAmount:v,recommendedLimitAmounts:U,cardActivationDate:V,cardIssuedByRoles:Y,cardHolderRoles:O,cardIssuedByDepartmentName:K,cardHolderDepartmentName:N,loggedInUserRole:q,clickItem:$,newSpendLimitAmount:C})=>{n==null||_!=="Completed"||m==null||m.fetchState!=="Completed"||p&&(A.fetchState!=="Completed"||o.fetchState!=="Completed")||I&&B!=="Completed"||e.trackCardsUpdateSpendLimitClick(x,c,{cardId:n.id,cardName:n.cardName,cardType:yr(n.type.code),cardCategory:n.type.code.includes("physical")?"physical":"virtual",cardLimit:oe(n.limit.amount),cardLastFourDigits:n.accountLast4,cardStatus:n.status.code,cardAssignedDate:n.createTime?.format(ye.analytics.MMMDashDDDashYYYYFormat),cardIssuedDate:n.providerCardCreateTime?.format(ye.analytics.MMMDashDDDashYYYYFormat),cardActivatedDate:V?.format(ye.analytics.MMMDashDDDashYYYYFormat),cardLimitFrequency:n.creditLimitFrequency.name,cardSpentAmount:oe(n.balance.amount),cardAvailableLimit:oe(n.available.amount),cardUtilizationPercent:fr(n.limit.amount,n.available.amount),cardUtilizationAmount:oe(br(n)),totalNumberOfDeclinedTransactions:m.statistics.totalNumberOfDeclinedTransactions,numberOfDeclinedTransactionsCurrentMonth:m.statistics.numberOfDeclinedTransactionsCurrentMonth,totalNumberOfPaidTransactions:m.statistics.totalNumberOfPaidTransactions,numberOfPaidTransactionsCurrentMonth:m.statistics.numberOfPaidTransactionsCurrentMonth,totalNumberOfCanceledTransactions:m.statistics.totalNumberOfCanceledTransactions,numberOfCanceledTransactionsCurrentMonth:m.statistics.numberOfCanceledTransactionsCurrentMonth,totalNumberOfAuthorizedTransactions:m.statistics.totalNumberOfAuthorizedTransactions,numberOfAuthorizedTransactionsCurrentMonth:m.statistics.numberOfAuthorizedTransactionsCurrentMonth,totalNumberOfTransactionsWithReceipts:m.statistics.totalNumberOfTransactionsWithReceipts,numberOfTransactionsWithReceiptsCurrentMonth:m.statistics.numberOfTransactionsWithReceiptsCurrentMonth},{cardIssuedByName:Te(n.cardCreatedByUser,!1),cardIssuedByEmail:n.cardCreatedByUser?.email,cardIssuedByUserId:n.cardCreatedByUser?.userId,cardIssuedByRole:Y,cardIssuedByDepartment:K},{cardholderName:Te(n.cardHolderUser,!1),cardholderEmail:n.cardHolderUser?.email,cardholderRole:O,cardholderUserId:n.cardHolderUser?.userId,cardholderDepartment:N},{cardLimitUpdatedByName:vr(g),cardLimitUpdatedByEmail:g.userEmail,cardLimitUpdatedByRole:q,cardLimitUpdatedByUserId:g.userId},$,oe(v.amount),U,C!=null&&U.includes(C),C,l,w)},ce={width:new d(343,500,500),largeLabelWidth:new d(108,108,108),popupLeftRightPadding:new d(y[5],y[6]),popupTopBottomPadding:new d(y[5],y[5])},Ir=i.div`
+  position: fixed;
+  top: ${r.sp0};
+  left: ${r.sp0};
+  width: 100%;
+  z-index: 100;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: ${G.overlayDark};
+`,Nr=i.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+  text-align: center;
+  background: ${e=>e.theme.colors.grey4};
+  border-radius: ${r.sp2};
+  position: relative;
+  margin: auto;
+  width: ${e=>ce.width.valuePx(e.windowSize)};
+  padding: ${e=>`${ce.popupTopBottomPadding.valuePx(e.windowSize)} ${ce.popupLeftRightPadding.valuePx(e.windowSize)}`};
+  box-sizing: border-box;
+`,Fr=i(xe)`
+  color: ${e=>e.theme.colors.primary};
+  margin-bottom: ${r.sp2};
+`,Er=i(b)`
+  color: ${e=>e.theme.colors.hero};
+  margin-bottom: ${r.sp3};
+`,Br=i.div`
+  display: flex;
+  justify-content: center;
+  padding-top: ${r.sp4};
+`,Or=i.div`
+  width: ${r.sp3};
+`,Hr=i.div`
+  display: flex;
+  flex-direction: column;
+`,Mr=i.div`
+  border: ${e=>`1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${e=>`${r.sp0} 1px 2px ${r.sp0} ${e.theme.colors.issueChargeCardBackgroundShadow}`};
+  border-radius: ${r.sp2};
+  background-color: ${e=>e.theme.colors.grey5};
+  width: 100%;
+  :hover {
+    border: ${e=>`1px solid ${e.theme.colors.primary}`};
+    input {
+      background-color: ${e=>e.hasError?G.importantLight:e.theme.colors.background} !important;
+    }
+  }
+`,_r=i.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: ${r.sp2};
+  margin: ${r.sp0} ${r.sp4} ${r.sp3} ${r.sp4};
+`,Ur=i(b)`
+  color: ${e=>e.isSelected?e.theme.colors.primary:e.theme.colors.hero};
+  border: 1px solid
+    ${e=>e.isSelected?e.theme.colors.primary:e.theme.colors.grey2};
+  border-radius: ${r.sp1};
+  padding: 2px ${r.sp2};
+  background-color: ${e=>e.theme.colors.grey5};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  :hover {
+    color: ${e=>e.theme.colors.primary};
+    border: ${e=>`1px solid ${e.theme.colors.primary}`};
+  }
+`,Wr=i(jr)`
+  color: ${G.brandColorJade};
+  fill: ${G.brandColorJade};
+  width: ${r.sp3};
+  height: ${r.sp3};
+`,Vr=i.form`
+  display: contents;
+`,T={navBarContainerPaddingXaxis:new d(10,19),containerPaddingLeft:new d(16,40,56),containerPaddingRight:new d(16,40,56),largeLabelWidth:new d(120,120,200),webkitLineClamp:new d(2,1,1,1,1),overlayWidth:new d(100,100,58),cardHolderDetailsPaddingX:new d(y[3],y[4]),cardNameSectionMarginLeft:new d(y[7],0),cardHolderDetailsGap:new d(y[1],0),recurringExpenseMerchantWidth:new d(112,240),recurringExpenseNextPaymentDateWidth:new d(112,104),recurringExpenseAmountWidth:new d(100,312),reasonTextFieldMarginTop:new d(y[3],0)},{common:j,closeCard:H}=W.getLocalizedStrings().spendManagement.chargeCard,k="reasonSection",De="closeCardPage",F=(e,x)=>`${e}.${x}`,Re=e=>`${e}_form`,{common:be,dateFormat:Yr,cockpit:qr}=W.getLocalizedStrings(),Si=({showCloseCardDrawer:e,onCloseCloseCardDrawer:x,isChargeCardAdmin:p,chargeCardsByCardId:c,cardRecurringExpensesByCardId:l,cardRecurringExpenseFetchState:w,closeCardFetchState:n,onRemoveCardClick:m,onConfirmClick:B,onDismissClick:A})=>{const o=he(),g=Me(),[I,_]=ae.useState(Object.fromEntries(Object.keys(l).map((a,s)=>[a,s===0]))),v=me({mode:"all",reValidateMode:"onBlur",defaultValues:{[k]:{reason:void 0,reasonType:void 0}},values:{[k]:{reason:void 0,reasonType:void 0}}}),U=T.largeLabelWidth.value(o),{isValid:V,errors:Y}=v.formState,O=a=>`${c[a].cardHolderUser?.firstName??""} ${c[a].cardHolderUser?.lastName??""}`,K=ue(Y,F(k,"reasonType")),N=v.watch("reasonSection.reasonType"),q=v.handleSubmit(()=>{if(V){const a=v.getValues(),s={reason:a[k].reason,reasonType:a[k].reasonType};B(s)}}),$=Object.keys(l).length>1,C=Object.keys(l).length,D=Object.values(l).reduce((a,s)=>a+s.length,0);return t.jsx(_e,{anchor:"right",open:e,onClose:x,PaperProps:{style:{width:T.overlayWidth.valuePercentage(o),boxShadow:"none"}},slotProps:{backdrop:{style:{backgroundColor:g.colors.black,opacity:.75,cursor:"pointer"}}},transitionDuration:250,children:t.jsxs(Xr,{windowSize:o,children:[t.jsxs(Gr,{windowSize:o,children:[t.jsx(Jr,{windowSize:o,children:t.jsx(Qr,{onClick:()=>{A()}})}),o==="small"?t.jsx(st,{windowSize:o,children:$?H.closeCards:H.closeCard}):t.jsx(nt,{children:$?H.closeCards:H.closeCard}),w==="Completed"?t.jsx(ge,{...v,children:t.jsxs("form",{id:Re(De),onSubmit:q,children:[t.jsxs(dt,{children:[t.jsx(lt,{windowSize:o,children:$?D>0?`${H.multipleCardsHasRecurringExpenses.replace("_number_of_cards_",C.toString()).replace("_number_of_recurring_expenses_",D.toString())} ${D===1?j.expense:j.expenses} ${H.multipleCardsHasRecurringExpensesSuffix}`:H.multipleCardsNoRecurringExpenses.replace("_number_of_cards_",C.toString()):H.firstCardHasRecurringExpenses.replace("_number_of_recurring_expenses_",D.toString()).replace("_expense_",D===1?j.expense:j.expenses)}),$&&t.jsx(kt,{children:`${C} ${C===1?j.card:j.cards} ${j.selected}`}),Object.keys(l).map((a,s)=>{const z=l[a].length>0;return t.jsxs(ct,{onClick:()=>z?(u=>{_(h=>h[u]?{...h,[u]:!1}:{...Object.fromEntries(Object.keys(h).map(R=>[R,!1])),[u]:!0})})(a):void 0,isMoreThanOneCard:$,isLastCard:s===Object.keys(l).length-1,children:[t.jsxs(ht,{windowSize:o,children:[t.jsxs(mt,{windowSize:o,children:[t.jsxs(ut,{windowSize:o,children:[c[a].cardHolderUser?.photo!==void 0?t.jsx(Zr,{src:c[a].cardHolderUser?.photo.href,alt:qr.userProfileAltText,onError:({currentTarget:u})=>{u.onerror=null,u.src=Ue},loading:"lazy"}):t.jsx(We,{firstName:c[a].cardHolderUser?.firstName??"",lastName:c[a].cardHolderUser?.lastName??"",size:r.sp6}),t.jsxs("div",{children:[t.jsx(pt,{children:O(a)}),t.jsx(gt,{children:t.jsx(or,{roles:c[a].cardHolderRoles.userRoles})})]})]}),o==="small"&&z&&(I[a]?t.jsx(Ie,{}):t.jsx(Ne,{}))]}),t.jsxs(xt,{windowSize:o,children:[c[a].cardName,t.jsx(ar,{cardDetail:c[a],forDetailPage:!0,styles:{...Ve.smallRegular.cssObject,position:"relative",top:"-5px"}})]}),t.jsxs(wt,{windowSize:o,children:[t.jsxs(St,{children:[t.jsx(Ct,{children:l[a].length}),t.jsx(jt,{children:j.recurringExpenses})]}),o!=="small"&&z&&(I[a]?t.jsx(Ie,{}):t.jsx(Ne,{}))]})]}),$&&t.jsx(tt,{children:t.jsx(Ye,{variant:"standard",title:be.remove,children:t.jsx(rt,{onClick:()=>m(a)})})}),I[a]&&z&&t.jsxs(t.Fragment,{children:[t.jsx(Ae,{}),t.jsxs($t,{children:[t.jsxs(zt,{children:[t.jsx(je,{width:o==="small"?112:240,children:j.merchant}),t.jsx(je,{width:o==="small"?112:104,children:j.nextPaymentDate}),t.jsx(Lt,{width:o==="small"?100:312,children:j.amount})]}),l[a].map((u,h)=>t.jsxs("div",{children:[h>0&&t.jsx(Ae,{}),t.jsxs(ft,{children:[t.jsxs(yt,{windowSize:o,children:[t.jsx(it,{src:u.merchant.logo?.url?.href}),t.jsx(et,{windowSize:o,children:u.merchant.brandName??u.merchant.name})]}),t.jsx(bt,{windowSize:o,children:u.nextPaymentDate.format(Yr.visual.MMMDCommaYYYYformat)}),t.jsx(vt,{windowSize:o,children:re("0,0.00",u.amount)})]},u.merchant.name)]},u.merchant.name))]})]})]},a)})]}),t.jsx(Pt,{windowSize:o,children:j.letUsKnowWhy}),t.jsxs(Tt,{isReasonTextFieldVisible:N==="other",children:[t.jsxs(ot,{size:o,children:[t.jsx(qe,{label:j.reasonLabel,htmlFor:F(k,"reasonType"),style:{padding:`${r.sp2} ${r.sp0}`,width:"fit-content"}}),t.jsxs(at,{labelWidth:U,size:o,children:[t.jsx(X,{label:{label:j.reason.lost},style:{width:"auto"},radioField:{name:F(k,"reasonType"),id:`${F(k,"reasonType")}.Lost or stolen`,value:"Lost or stolen",style:{height:r.sp3,width:r.sp3},registerOptions:{required:!p,validate:a=>!!p||!!a},radioSize:"small"}}),t.jsx(X,{label:{label:j.reason.fraud},style:{width:"auto"},radioField:{name:F(k,"reasonType"),id:`${F(k,"reasonType")}.Fraud detected`,value:"Fraud detected",style:{height:r.sp3,width:r.sp3},registerOptions:{required:!p,validate:a=>!!p||!!a},radioSize:"small"}}),t.jsx(X,{label:{label:j.reason.not_needed},style:{width:"auto"},radioField:{name:F(k,"reasonType"),id:`${F(k,"reasonType")}.Not needed`,value:"Not needed",style:{height:r.sp3,width:r.sp3},registerOptions:{required:!p,validate:a=>!!p||!!a},radioSize:"small"}}),t.jsx(X,{label:{label:j.reason.other},style:{width:"auto"},radioField:{name:F(k,"reasonType"),id:`${F(k,"reasonType")}.other`,value:"other",style:{height:r.sp3,width:r.sp3},registerOptions:{required:!p,validate:a=>!!p||!!a},radioSize:"small"}})]})]}),N==="other"?t.jsx(Xe,{style:{height:r.sp6,width:"100%",backgroundColor:g.colors.background,marginTop:`${T.reasonTextFieldMarginTop.valuePx(o)}`},type:"text",name:F(k,"reason"),placeholder:H.reasonPlaceholder,className:"reason-text-field",registerOptions:{required:!p,validate:a=>!!p||!!a}}):N==null&&!p&&K?t.jsx(Kr,{children:H.youNeedToProvideReasonToCloseCard}):null]})]})}):t.jsx(Ge,{size:"Standard",start:!0,style:{display:"flex",justifyContent:"center",alignItems:"center",height:"calc(100vh - 210px)"}})]}),w==="Completed"&&t.jsx(Je,{style:{zIndex:4,paddingTop:r.sp3,paddingBottom:r.sp3},formId:Re(De),helperStyle:{paddingTop:r.sp0,paddingBottom:r.sp0},primaryBtn:{label:be.confirm,isLoading:n==="In-Progress",variant:"danger"},cancelBtn:{label:be.cancel,style:{width:"90px"},onClick:()=>{A?.()}}})]})})},Xr=i.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${e=>e.theme.colors.grey4};
+  overflow-x: hidden;
+  height: 100vh;
+  width: 100%;
+`,Gr=i.div`
+  height: auto;
+  padding-left: ${e=>`${T.containerPaddingLeft.valuePx(e.windowSize)}`};
+  padding-right: ${e=>`${T.containerPaddingRight.valuePx(e.windowSize)}`};
+  margin-bottom: auto;
+`,Jr=i.div`
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  top: ${r.sp0};
+  padding: ${e=>`${T.navBarContainerPaddingXaxis.valuePx(e.windowSize)} ${r.sp0}`};
+  z-index: 2;
+  background-color: ${e=>e.theme.colors.grey4};
+`,Kr=i(J)`
+  color: ${e=>e.theme.colors.important};
+  text-align: end;
+`,Qr=i(Qe)`
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  width: ${r.sp4};
+  height: ${r.sp4};
+  min-height: ${r.sp4};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Zr=i.img`
+  height: ${r.sp6};
+  width: ${r.sp6};
+  border-radius: 50%;
+  justify-content: center;
+  color: ${e=>e.theme.colors.hero};
+`,et=i(b)`
+  margin-right: ${r.sp3};
+  color: inherit;
+  -webkit-line-clamp: ${e=>T.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-transform: capitalize;
+`,rt=i(tr)`
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  width: ${r.sp3};
+  height: ${r.sp3};
+  min-height: ${r.sp3};
+  background-color: ${e=>e.theme.colors.grey5};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,tt=i.div`
+  position: absolute;
+  right: -${r.sp2};
+  top: -${r.sp2};
+`,it=i.img`
+  display: flex;
+  width: ${r.sp4};
+  height: ${r.sp4};
+  min-width: ${r.sp4};
+`,ot=i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${e=>e.theme.colors.grey5};
+  min-height: ${r.sp6};
+  padding-top: ${r.sp2};
+  align-items: ${e=>e.size==="small"?"flex-start":"center"};
+  flex-direction: ${e=>e.size==="small"?"column":"row"};
+`,at=i.div`
+  display: flex;
+  flex-direction: row;
+  width: ${e=>`calc(100% - ${e.labelWidth}px)`};
+  align-items: flex-end;
+  justify-content: flex-end;
+  flex-grow: 1;
+  height: ${r.sp6};
+  align-items: center;
+  gap: ${r.sp5};
+  ${e=>e.size==="small"&&`
+
+    flex-wrap: wrap;
+    flex-direction: column;
+    width: unset;
+    height: unset;
+    justify-content: start;
+    height: ${r.sp11};
+    align-items: start;
+    `}
+`,st=i(xe)`
+  color: ${e=>e.theme.colors.primary};
+  margin-top: ${r.sp3};
+  margin-bottom: ${r.sp0};
+  margin-right: ${r.sp3};
+`,nt=i(Ze)`
+  color: ${e=>e.theme.colors.primary};
+  margin-top: ${r.sp3};
+  margin-bottom: ${r.sp2};
+`,dt=i.div``,lt=i(b)`
+  color: ${e=>e.theme.colors.hero};
+  margin-bottom: ${r.sp3};
+`,ct=i.div`
+  cursor: pointer;
+  background-color: ${e=>e.theme.colors.grey5};
+  border-radius: ${r.sp2};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  position: relative;
+  margin-bottom: ${e=>e.isLastCard?r.sp0:r.sp3};
+  color: ${e=>e.theme.colors.hero};
+  box-shadow: 0px 1px 2px 0px ${e=>e.theme.colors.dropShadowHover};
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${e=>e.theme.colors.primary};
+    color: ${e=>e.theme.colors.primary};
+    .cardName {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+`,pt=i(b)`
+  color: inherit;
+`,ht=i.div`
+  display: flex;
+  justify-content: space-between;
+  padding-top: ${r.sp3};
+  padding-bottom: ${r.sp3};
+  padding-left: ${e=>`${T.cardHolderDetailsPaddingX.valuePx(e.windowSize)}`};
+  padding-right: ${e=>`${T.cardHolderDetailsPaddingX.valuePx(e.windowSize)}`};
+  flex-direction: ${e=>e.windowSize==="small"?"column":"row"};
+  gap: ${e=>`${T.cardHolderDetailsGap.valuePx(e.windowSize)}`};
+`,mt=i.div`
+  display: flex;
+  justify-content: space-between;
+`,ut=i.div`
+  width: 200px;
+  color: inherit;
+  display: flex;
+  gap: ${r.sp2};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,gt=i(J)`
+  color: inherit;
+  position: relative;
+  top: -5px;
+`,xt=i(b)`
+  width: 216px;
+  color: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-left: ${e=>`${T.cardNameSectionMarginLeft.valuePx(e.windowSize)}`};
+`,wt=i.div`
+  width: 163px;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  gap: ${r.sp3};
+  margin-left: ${e=>`${T.cardNameSectionMarginLeft.valuePx(e.windowSize)}`};
+`,$t=i.div`
+  margin: ${r.sp3} ${r.sp4} ${r.sp0} ${r.sp4};
+  padding-bottom: ${r.sp2};
+`,ft=i.div`
+  display: flex;
+  justify-content: space-between;
+  margin: ${r.sp2} ${r.sp0};
+`,Ae=i.div`
+  background-color: ${e=>e.theme.mode==="light"?e.theme.colors.background:G.neutralGrey3Dark};
+  min-height: 1px;
+  max-height: 1px;
+  width: 100%;
+`,yt=i(b)`
+  width: ${e=>`${T.recurringExpenseMerchantWidth.valuePx(e.windowSize)}`};
+  text-align: left;
+  color: inherit;
+  display: flex;
+  gap: ${r.sp2};
+`,bt=i(b)`
+  width: ${e=>`${T.recurringExpenseNextPaymentDateWidth.valuePx(e.windowSize)}`};
+  text-align: left;
+  color: inherit;
+`,vt=i(b)`
+  width: ${e=>`${T.recurringExpenseAmountWidth.valuePx(e.windowSize)}`};
+  text-align: right;
+  color: inherit;
+`,jt=i(J)`
+  color: inherit;
+  position: relative;
+  top: -5px;
+`,St=i(J)`
+  color: inherit;
+`,Ct=i(b)`
+  color: inherit;
+`,zt=i.div`
+  display: flex;
+  justify-content: space-between;
+  margin: ${r.sp1} ${r.sp0};
+`,kt=i(we)`
+  color: ${e=>e.theme.colors.primary};
+  padding: ${r.sp3} ${r.sp0};
+`,Ie=i(er)`
+  width: ${r.sp4};
+  height: ${r.sp4};
+  min-width: ${r.sp4};
+  min-height: ${r.sp4};
+  color: inherit;
+`,Ne=i(rr)`
+  cursor: pointer;
+  width: ${r.sp4};
+  height: ${r.sp4};
+  min-width: ${r.sp4};
+  min-height: ${r.sp4};
+  color: inherit;
+`,je=i(ir)`
+  width: ${e=>e.width}px;
+  color: ${e=>e.theme.colors.hero};
+`,Lt=i(je)`
+  text-align: right;
+`,Tt=i.div`
+  border-radius: ${r.sp2};
+  padding-left: ${r.sp4};
+  padding-right: ${r.sp4};
+  padding-bottom: ${e=>e.isReasonTextFieldVisible?r.sp3:r.sp2};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  box-shadow: 0px 1px 2px 0px ${e=>e.theme.colors.dropShadowHover};
+  background: ${e=>e.theme.colors.grey5};
+  margin-bottom: ${r.sp6};
+  &:hover {
+    z-index: 1;
+    border: 1px solid ${e=>e.theme.colors.primary};
+    .reason-text-field > input {
+      background-color: ${e=>e.theme.colors.background};
+    }
+  }
+`,Pt=i(we)`
+  margin-bottom: ${r.sp3};
+  margin-top: ${r.sp7};
+  color: ${e=>e.theme.colors.primary};
+`,P={navBarContainerPaddingXaxis:new d(10,19),containerPaddingLeft:new d(16,40,56),containerPaddingRight:new d(16,40,56),largeLabelWidth:new d(120,120,200),webkitLineClamp:new d(2,1,1,1,1),overlayWidth:new d(100,100,58),cardHolderDetailsPaddingX:new d(y[3],y[4]),cardNameSectionMarginLeft:new d(y[7],0),cardHolderDetailsGap:new d(y[1],0),recurringExpenseMerchantWidth:new d(112,240),recurringExpenseNextPaymentDateWidth:new d(112,104),recurringExpenseAmountWidth:new d(100,312),reasonTextFieldMarginTop:new d(y[3],0)},{lockCard:M,common:S}=W.getLocalizedStrings().spendManagement.chargeCard,L="reasonSection",Fe="lockCardPage",E=(e,x)=>`${e}.${x}`,Ee=e=>`${e}_form`,{common:ve,dateFormat:Dt,cockpit:Rt}=W.getLocalizedStrings(),Ci=({showLockCardDrawer:e,onCloseLockCardDrawer:x,isChargeCardAdmin:p,chargeCardsByCardId:c,cardRecurringExpensesByCardId:l,cardRecurringExpenseFetchState:w,lockCardFetchState:n,onRemoveCardClick:m,onConfirmClick:B,onDismissClick:A})=>{const o=he(),g=Me(),[I,_]=ae.useState(Object.fromEntries(Object.keys(l).map((s,z)=>[s,z===0]))),v=me({mode:"all",reValidateMode:"onBlur",defaultValues:{[L]:{reason:void 0,reasonType:void 0}},values:{[L]:{reason:void 0,reasonType:void 0}}}),U=P.largeLabelWidth.value(o),{isValid:V,errors:Y}=v.formState,O=s=>`${c[s].cardHolderUser?.firstName??""} ${c[s].cardHolderUser?.lastName??""}`,K=ue(Y,E(L,"reasonType")),N=v.watch("reasonSection.reasonType"),q=v.handleSubmit(()=>{if(V){const s=v.getValues(),z={reason:s[L].reason,reasonType:s[L].reasonType};B(z)}}),$=Object.keys(l).length>1,C=Object.keys(l).length,D=Object.values(l).reduce((s,z)=>s+z.length,0),a=l[Object.keys(l)[0]].length>0;return t.jsx(_e,{anchor:"right",open:e,onClose:x,PaperProps:{style:{width:P.overlayWidth.valuePercentage(o),boxShadow:"none"}},slotProps:{backdrop:{style:{backgroundColor:g.colors.black,opacity:.75,cursor:"pointer"}}},transitionDuration:250,children:t.jsxs(At,{windowSize:o,children:[t.jsxs(It,{windowSize:o,children:[t.jsx(Et,{windowSize:o,children:t.jsx(Ot,{onClick:()=>{A()}})}),o==="small"?t.jsx(Yt,{windowSize:o,children:$?M.lockCards:M.lockCard}):t.jsx(qt,{children:$?M.lockCards:M.lockCard}),w==="Completed"?t.jsx(ge,{...v,children:t.jsxs("form",{id:Ee(Fe),onSubmit:q,children:[t.jsxs(Xt,{children:[t.jsx(Gt,{windowSize:o,children:$?D>0?`${M.multipleCardsHasRecurringExpenses.replace("_number_of_cards_",C.toString()).replace("_number_of_recurring_expenses_",D.toString())} ${D===1?S.expense:S.expenses}.`:M.multipleCardsNoRecurringExpenses.replace("_number_of_cards_",C.toString()):a?M.firstCardHasRecurringExpenses.replace("_number_of_recurring_expenses_",D.toString()).replace("_expense_",D===1?S.expense:S.expenses):M.firstCardNoRecurringExpenses}),$&&t.jsx(hi,{children:`${C} ${C===1?S.card:S.cards} ${S.selected}`}),Object.keys(l).map((s,z)=>{const u=l[s].length>0;return t.jsxs(Jt,{onClick:()=>u?(h=>{_(R=>R[h]?{...R,[h]:!1}:{...Object.fromEntries(Object.keys(R).map(se=>[se,!1])),[h]:!0})})(s):void 0,isMoreThanOneCard:$,isLastCard:z===Object.keys(l).length-1,children:[t.jsxs(Qt,{windowSize:o,children:[t.jsxs(Ft,{windowSize:o,children:[t.jsxs(Zt,{windowSize:o,children:[c[s].cardHolderUser?.photo!==void 0?t.jsx(Ht,{src:c[s].cardHolderUser?.photo.href,alt:Rt.userProfileAltText,onError:({currentTarget:h})=>{h.onerror=null,h.src=Ue},loading:"lazy"}):t.jsx(We,{firstName:c[s].cardHolderUser?.firstName??"",lastName:c[s].cardHolderUser?.lastName??"",size:r.sp6}),t.jsxs("div",{children:[t.jsx(Kt,{children:O(s)}),t.jsx(ei,{children:t.jsx(or,{roles:c[s].cardHolderRoles.userRoles})})]})]}),o==="small"&&u&&(I[s]?t.jsx(Oe,{}):t.jsx(He,{}))]}),t.jsxs(ri,{windowSize:o,children:[c[s].cardName,t.jsx(ar,{cardDetail:c[s],forDetailPage:!0,styles:{...Ve.smallRegular.cssObject,position:"relative",top:"-5px"}})]}),t.jsxs(ti,{windowSize:o,children:[t.jsxs(di,{children:[t.jsx(ci,{children:l[s].length}),t.jsx(li,{children:S.recurringExpenses})]}),o!=="small"&&u&&(I[s]?t.jsx(Oe,{}):t.jsx(He,{}))]})]}),$&&t.jsx(Nt,{children:t.jsx(Ye,{variant:"standard",title:ve.remove,children:t.jsx(_t,{onClick:()=>m(s)})})}),I[s]&&u&&t.jsxs(t.Fragment,{children:[t.jsx(Be,{}),t.jsxs(ii,{children:[t.jsxs(pi,{children:[t.jsx(Se,{width:o==="small"?112:240,children:S.merchant}),t.jsx(Se,{width:o==="small"?112:104,children:S.nextPaymentDate}),t.jsx(mi,{width:o==="small"?100:312,children:S.amount})]}),l[s].map((h,R)=>t.jsxs("div",{children:[R>0&&t.jsx(Be,{}),t.jsxs(oi,{children:[t.jsxs(ai,{windowSize:o,children:[t.jsx(Ut,{src:h.merchant.logo?.url?.href}),t.jsx(Mt,{windowSize:o,children:h.merchant.brandName??h.merchant.name})]}),t.jsx(si,{windowSize:o,children:h.nextPaymentDate.format(Dt.visual.MMMDCommaYYYYformat)}),t.jsx(ni,{windowSize:o,children:re("0,0.00",h.amount)})]},h.merchant.name)]},h.merchant.name))]})]})]},s)})]}),t.jsx(gi,{windowSize:o,children:S.letUsKnowWhy}),t.jsxs(ui,{isReasonTextFieldVisible:N==="other",children:[t.jsxs(Wt,{size:o,children:[t.jsx(qe,{label:S.reasonLabel,htmlFor:E(L,"reasonType"),style:{padding:`${r.sp2} ${r.sp0}`,width:"fit-content"}}),t.jsxs(Vt,{labelWidth:U,size:o,children:[t.jsx(X,{label:{label:S.reason.lost},style:{width:"auto"},radioField:{name:E(L,"reasonType"),id:`${E(L,"reasonType")}.Lost or stolen`,value:"Lost or stolen",style:{height:r.sp3,width:r.sp3},radioSize:"small"}}),t.jsx(X,{label:{label:S.reason.fraud},style:{width:"auto"},radioField:{name:E(L,"reasonType"),id:`${E(L,"reasonType")}.Fraud detected`,value:"Fraud detected",style:{height:r.sp3,width:r.sp3},radioSize:"small"}}),t.jsx(X,{label:{label:S.reason.not_needed},style:{width:"auto"},radioField:{name:E(L,"reasonType"),id:`${E(L,"reasonType")}.Not needed`,value:"Not needed",style:{height:r.sp3,width:r.sp3},radioSize:"small"}}),t.jsx(X,{label:{label:S.reason.other},style:{width:"auto"},radioField:{name:E(L,"reasonType"),id:`${E(L,"reasonType")}.other`,value:"other",style:{height:r.sp3,width:r.sp3},radioSize:"small"}})]})]}),N==="other"?t.jsx(Xe,{style:{height:r.sp6,width:"100%",backgroundColor:g.colors.background,marginTop:`${P.reasonTextFieldMarginTop.valuePx(o)}`},type:"text",name:E(L,"reason"),placeholder:M.reasonPlaceholder,className:"reason-text-field"}):N==null&&!p&&K?t.jsx(Bt,{children:M.youNeedToProvideReasonToLockCard}):null]})]})}):t.jsx(Ge,{size:"Standard",start:!0,style:{display:"flex",justifyContent:"center",alignItems:"center",height:"calc(100vh - 210px)"}})]}),w==="Completed"&&t.jsx(Je,{style:{zIndex:4,paddingTop:r.sp3,paddingBottom:r.sp3},formId:Ee(Fe),helperStyle:{paddingTop:r.sp0,paddingBottom:r.sp0},primaryBtn:{label:ve.confirm,isLoading:n==="In-Progress"},cancelBtn:{label:ve.cancel,style:{width:"90px"},onClick:()=>{A?.()}}})]})})},At=i.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${e=>e.theme.colors.grey4};
+  overflow-x: hidden;
+  height: 100vh;
+  width: 100%;
+`,It=i.div`
+  height: auto;
+  padding-left: ${e=>`${P.containerPaddingLeft.valuePx(e.windowSize)}`};
+  padding-right: ${e=>`${P.containerPaddingRight.valuePx(e.windowSize)}`};
+  margin-bottom: auto;
+`,Nt=i.div`
+  position: absolute;
+  right: -${r.sp2};
+  top: -${r.sp2};
+`,Ft=i.div`
+  display: flex;
+  justify-content: space-between;
+`,Et=i.div`
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  top: ${r.sp0};
+  padding: ${e=>`${P.navBarContainerPaddingXaxis.valuePx(e.windowSize)} ${r.sp0}`};
+  z-index: 2;
+  background-color: ${e=>e.theme.colors.grey4};
+`,Bt=i(J)`
+  color: ${e=>e.theme.colors.important};
+  text-align: end;
+`,Ot=i(Qe)`
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  width: ${r.sp4};
+  height: ${r.sp4};
+  min-height: ${r.sp4};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Ht=i.img`
+  height: ${r.sp6};
+  width: ${r.sp6};
+  border-radius: 50%;
+  justify-content: center;
+  color: ${e=>e.theme.colors.hero};
+`,Mt=i(b)`
+  margin-right: ${r.sp3};
+  color: inherit;
+  -webkit-line-clamp: ${e=>P.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-transform: capitalize;
+`,_t=i(tr)`
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  width: ${r.sp3};
+  height: ${r.sp3};
+  min-height: ${r.sp3};
+  background-color: ${e=>e.theme.colors.grey5};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Ut=i.img`
+  display: flex;
+  width: ${r.sp4};
+  height: ${r.sp4};
+`,Wt=i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${e=>e.theme.colors.grey5};
+  min-height: ${r.sp6};
+  padding-top: ${r.sp2};
+  align-items: ${e=>e.size==="small"?"flex-start":"center"};
+  flex-direction: ${e=>e.size==="small"?"column":"row"};
+`,Vt=i.div`
+  display: flex;
+  flex-direction: row;
+  width: ${e=>`calc(100% - ${e.labelWidth}px)`};
+  align-items: flex-end;
+  justify-content: flex-end;
+  flex-grow: 1;
+  height: ${r.sp6};
+  align-items: center;
+  gap: ${r.sp5};
+  ${e=>e.size==="small"&&`
+
+    flex-wrap: wrap;
+    flex-direction: column;
+    width: unset;
+    height: unset;
+    justify-content: start;
+    height: ${r.sp11};
+    align-items: start;
+    `}
+`,Yt=i(xe)`
+  color: ${e=>e.theme.colors.primary};
+  margin-top: ${r.sp3};
+  margin-bottom: ${r.sp0};
+  margin-right: ${r.sp3};
+`,qt=i(Ze)`
+  color: ${e=>e.theme.colors.primary};
+  margin-top: ${r.sp3};
+  margin-bottom: ${r.sp2};
+`,Xt=i.div``,Gt=i(b)`
+  color: ${e=>e.theme.colors.hero};
+  margin-bottom: ${r.sp3};
+`,Jt=i.div`
+  cursor: pointer;
+  background-color: ${e=>e.theme.colors.grey5};
+  border-radius: ${r.sp2};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  position: relative;
+  margin-bottom: ${e=>e.isLastCard?r.sp0:r.sp3};
+  color: ${e=>e.theme.colors.hero};
+  box-shadow: 0px 1px 2px 0px ${e=>e.theme.colors.dropShadowHover};
+  &:hover {
+    z-index: 1;
+    border: 1px solid ${e=>e.theme.colors.primary};
+    color: ${e=>e.theme.colors.primary};
+    .cardName {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+`,Kt=i(b)`
+  color: inherit;
+`,Qt=i.div`
+  display: flex;
+  justify-content: space-between;
+  padding-top: ${r.sp3};
+  padding-bottom: ${r.sp3};
+  padding-left: ${e=>`${P.cardHolderDetailsPaddingX.valuePx(e.windowSize)}`};
+  padding-right: ${e=>`${P.cardHolderDetailsPaddingX.valuePx(e.windowSize)}`};
+  flex-direction: ${e=>e.windowSize==="small"?"column":"row"};
+  gap: ${e=>`${P.cardHolderDetailsGap.valuePx(e.windowSize)}`};
+`,Zt=i.div`
+  width: 200px;
+  color: inherit;
+  display: flex;
+  gap: ${r.sp2};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,ei=i(J)`
+  color: inherit;
+  position: relative;
+  top: -5px;
+`,ri=i(b)`
+  width: 216px;
+  color: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-left: ${e=>`${P.cardNameSectionMarginLeft.valuePx(e.windowSize)}`};
+`,ti=i.div`
+  width: 163px;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  gap: ${r.sp3};
+  margin-left: ${e=>`${P.cardNameSectionMarginLeft.valuePx(e.windowSize)}`};
+`,ii=i.div`
+  margin: ${r.sp3} ${r.sp4} ${r.sp0} ${r.sp4};
+  padding-bottom: ${r.sp2};
+`,oi=i.div`
+  display: flex;
+  justify-content: space-between;
+  margin: ${r.sp2} ${r.sp0};
+`,Be=i.div`
+  background-color: ${e=>e.theme.mode==="light"?e.theme.colors.background:G.neutralGrey3Dark};
+  min-height: 1px;
+  max-height: 1px;
+  width: 100%;
+`,ai=i(b)`
+  width: ${e=>`${P.recurringExpenseMerchantWidth.valuePx(e.windowSize)}`};
+  text-align: left;
+  color: inherit;
+  display: flex;
+  gap: ${r.sp2};
+`,si=i(b)`
+  width: ${e=>`${P.recurringExpenseNextPaymentDateWidth.valuePx(e.windowSize)}`};
+  text-align: left;
+  color: inherit;
+`,ni=i(b)`
+  width: ${e=>`${P.recurringExpenseAmountWidth.valuePx(e.windowSize)}`};
+  text-align: right;
+  color: inherit;
+`,di=i(J)`
+  color: inherit;
+`,li=i(J)`
+  color: inherit;
+  position: relative;
+  top: -5px;
+`,ci=i(b)`
+  color: inherit;
+`,pi=i.div`
+  display: flex;
+  justify-content: space-between;
+  margin: ${r.sp1} ${r.sp0};
+`,hi=i(we)`
+  color: ${e=>e.theme.colors.primary};
+  padding: ${r.sp3} ${r.sp0};
+`,Oe=i(er)`
+  width: ${r.sp4};
+  height: ${r.sp4};
+  min-width: ${r.sp4};
+  min-height: ${r.sp4};
+  color: inherit;
+`,He=i(rr)`
+  cursor: pointer;
+  width: ${r.sp4};
+  height: ${r.sp4};
+  min-width: ${r.sp4};
+  min-height: ${r.sp4};
+  color: inherit;
+`,Se=i(ir)`
+  width: ${e=>e.width}px;
+  color: ${e=>e.theme.colors.hero};
+`,mi=i(Se)`
+  text-align: right;
+`,ui=i.div`
+  border-radius: ${r.sp2};
+  padding-left: ${r.sp4};
+  padding-right: ${r.sp4};
+  padding-bottom: ${e=>e.isReasonTextFieldVisible?r.sp3:r.sp2};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  box-shadow: 0px 1px 2px 0px ${e=>e.theme.colors.dropShadowHover};
+  background: ${e=>e.theme.colors.grey5};
+  margin-bottom: ${r.sp6};
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${e=>e.theme.colors.primary};
+    .reason-text-field > input {
+      background-color: ${e=>e.theme.colors.background};
+    }
+  }
+`,gi=i(we)`
+  margin-bottom: ${r.sp3};
+  margin-top: ${r.sp7};
+  color: ${e=>e.theme.colors.primary};
+`;export{Ci as E,Si as O,vi as r,ji as u};