@zeniai/web-components 3.17.11 → 3.17.12

package/dist/IssueChargeCardPage-C9_fG44Z.cjs

@@ -0,0 +1,532 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./vendor-.pnpm-D0ILHvHB.cjs"),_=require("react"),l=require("@emotion/styled"),e=require("./index-CDBWihyC.cjs"),He=require("./LabeledUserSingleSelectWithSubtitlesField-CiFCQ-hB.cjs"),ct=require("@zeniai/client-epic-state"),Ge=require("./RoleWithToolTip-DbTvj0RC.cjs"),le=t=>{const{common:a,spendManagement:{chargeCard:{issueCard:o}}}=e.appLocale.getLocalizedStrings();switch(t){case"monthly":return o.frequencySubLabels.monthly;case"quarterly":return o.frequencySubLabels.quarterly;case"weekly":return o.frequencySubLabels.weekly;case"yearly":return o.frequencySubLabels.yearly;default:return a.strings.empty}},pt=["creditCard","debitCard"],we=t=>ct.stringToUnion(t,pt),c=(t,a)=>`${t}.${a}`,{commonSetUp:{businessVerification:{addressPlaceholder:Le,customAddressPlaceholder:ut}},spendManagement:{chargeCard:{issueCard:A}}}=e.appLocale.getLocalizedStrings(),N={largeLabelWidth:new e.ResponsiveSized(120,120,200),labelMarginRight:new e.ResponsiveSized(e.sp[3],e.sp[4]),labelMarginBottom:new e.ResponsiveSized(e.sp[2],e.sp[0]),infoLabelMarginTop:new e.ResponsiveSized(e.sp[1],e.sp[0]),radioLabelPaddingLeftRight:new e.ResponsiveSized(e.sp[2],e.sp[3]),radioLabelPaddingLeft:new e.ResponsiveSized(e.sp[0],e.sp[3]),radioLabelPaddingRight:new e.ResponsiveSized(10,e.sp[3]),labeledFieldPaddingLeft:new e.ResponsiveSized(e.sp[3],e.sp[0]),labeledFieldPaddingRight:new e.ResponsiveSized(e.sp[3],e.sp[2]),labeledFieldPaddingBottom:new e.ResponsiveSized(e.sp[3],e.sp[2])},mt={infoLabel:new e.ResponsiveSizedStyle("smallRegular","smallRegular")},ht="creditCard.physicalCard.amount",xt="creditCard.physicalCard.cardName",gt="creditCard.physicalCard.user",bt="creditCard.physicalCard.frequency",ee="creditCard.physicalCard.addressType",ft=({lineData:t,issueCardSectionId:a,limit:o,creditLimitFrequency:u,activeChargeCardCount:b,allRoles:x,allAccountingClasses:P,companyAddress:h,customAddress:E,userAddress:T,userList:n,maxPhysicalChargeCardPerUser:j,openAddAddressDrawerHandler:m})=>{const d=e.useWindowSizeContext(),W=r.useTheme(),{getValues:B}=r.useFormContext(),f=N.largeLabelWidth.value(d),V=()=>{m(t.lineId,"creditCard")},k=(i,R)=>r.jsxRuntimeExports.jsx(St,{isOptionSelected:R,children:le(i)}),s=t.creditCard.physicalCard.addressType,p=t.creditCard.physicalCard.amount,S=e.currencyAmountCompactFormatter(o.amount),I=p!=null&&p>o.amount,y=I?A.amountExceedError.replace("_amount_",S):void 0,w=t.creditCard.physicalCard.user,v=w.allUsers.find(i=>i.userId===w.selectedUser),H=v?.userId,D=H!=null?T[H]:void 0,X=i=>{let R=b[i]?.physicalCardCount??0;return B().lineInfo.forEach($=>{$.creditCard.cardType==="business_physical_credit_card"&&$.creditCard.physicalCard.user.selectedUser===i&&(R+=1)}),R>=j};return r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsx(He.LabeledUserSingleSelectWithSubtitlesField,{label:{label:A.cardholderLabel,width:f},userSingleSelectWithSubTitlesField:{name:c(a,gt),placeholderLabel:A.usersPlaceholder,value:{allUsers:n,selectedUser:t.creditCard.physicalCard.user.selectedUser},registerOptions:{required:!0,validate:i=>i?.selectedUser?.length>0},valueToSubtitle:i=>{const R=x.find($=>$.userId===i),g=[];return R?.accountingClassIDs.forEach($=>{const M=P.find(de=>de.classId===$);M!=null&&M.className&&g.push(M.className)}),g},additionalLabelInfo:A.additionalInfoPhysical,showOnlyAvatar:!0,showAvatarAndSubtitles:!1,isOptionDisabled:X,disabledOptionHint:A.cardLimitWarning,bigMarginRightForSmallScreens:!0,optionStyles:{maxHeight:e.Space.sp10,minHeight:e.Space.sp6,height:"max-content"}},style:{width:"100%",paddingLeft:N.labelMarginBottom.value(d)}}),r.jsxRuntimeExports.jsx(pe,{}),r.jsxRuntimeExports.jsx(e.LabeledTextField,{label:{label:A.cardNameLabel,width:f},style:{width:"auto",paddingLeft:N.labelMarginBottom.value(d)},text:{type:"text",name:c(a,xt),defaultValue:t.creditCard.physicalCard.cardName,placeholder:A.cardNamePlaceholder,options:{required:!0,validate:i=>i!=null}}}),r.jsxRuntimeExports.jsx(pe,{}),r.jsxRuntimeExports.jsx(e.LabeledFormattedTextField,{label:{label:A.amountLabel,width:f},showAdditionalInfoLabel:I,additionalInfoLabel:y,formattedTextField:{type:"number",name:c(a,ht),defaultValue:t.creditCard.physicalCard.amount,placeholder:A.amountPlaceholder,returnValueType:"floatValue",prefix:"$",allowNegative:!0,isNumericString:!1,registerOptions:{required:!0,validate:i=>!!i&&i>0&&i<=o.amount},autoComplete:"off",decimalSeparator:".",decimalScale:2,fixedDecimalScale:!1,thousandSeparator:!0},isFieldError:I,style:{width:"auto",paddingLeft:N.labelMarginBottom.value(d)}}),r.jsxRuntimeExports.jsx(pe,{}),r.jsxRuntimeExports.jsx(e.LabeledSingleSelectPickerField,{isDisabled:"readonly",label:{label:A.frequencyLabel,width:f,style:{marginBottom:N.labelMarginBottom.valuePx(d),marginRight:N.labelMarginRight.valuePx(d)}},style:{width:"100%",paddingLeft:N.labelMarginBottom.valuePx(d)},infoLabelStyle:{...e.textStyles.smallRegular.cssObject,textAlign:"right",paddingRight:e.Space.sp3,marginTop:N.infoLabelMarginTop.valuePx(d),color:W.colors.hero},valueToAdditionalLabel:i=>le(i),singleSelectPickerField:{name:c(a,bt),placeholder:A.frequencyPlaceholder,style:{position:"relative"},capitalizeOptions:!0,showSubLabelsInSingleValue:!1,defaultValue:{selectedOption:t.creditCard.physicalCard.frequency.selectedOption,allOptions:u.map(i=>({label:i.name,value:i.code}))},valueToSubLabels:(i,R)=>k(i,R),textAlignment:"right",registerOptions:{required:!0,validate:i=>i!=null&&!!i.selectedOption}}}),r.jsxRuntimeExports.jsx(pe,{}),r.jsxRuntimeExports.jsxs(vt,{windowSize:d,children:[r.jsxRuntimeExports.jsxs(jt,{windowSize:d,children:[r.jsxRuntimeExports.jsx(e.Label,{label:A.address.shippingAddressLabel,htmlFor:c(a,ee),style:{marginLeft:e.Space.sp4,marginRight:N.labelMarginRight.valuePx(d),marginTop:e.Space.sp2,width:d==="small"?"auto":f}}),r.jsxRuntimeExports.jsx(Rt,{windowSize:d,children:r.jsxRuntimeExports.jsxs($t,{isDisabled:v==null,children:[D!=null&&r.jsxRuntimeExports.jsx(e.LabeledRadioField,{isContainerClickable:!0,label:{label:A.address.personal},isDisabled:v==null?"disabled":void 0,style:{padding:`${e.Space.sp2} ${e.Space.sp0}`,paddingLeft:N.radioLabelPaddingLeftRight.value(d),paddingRight:N.radioLabelPaddingRight.value(d),width:"fit-content"},radioField:{name:c(a,ee),id:`${c(a,ee)}.${A.address.personal}`,value:"card_holder_personal_address",radioSize:"small",registerOptions:{required:!0}}}),r.jsxRuntimeExports.jsx(e.LabeledRadioField,{isContainerClickable:!0,label:{label:A.address.company},isDisabled:v==null?"disabled":void 0,style:{padding:`${e.Space.sp2} ${e.Space.sp0}`,paddingLeft:N.radioLabelPaddingLeft.value(d),paddingRight:N.radioLabelPaddingRight.value(d),width:"fit-content"},radioField:{name:c(a,ee),id:`${c(a,ee)}.${A.address.company}`,value:"company_address",radioSize:"small",registerOptions:{required:!0}}}),r.jsxRuntimeExports.jsx(e.LabeledRadioField,{isContainerClickable:!0,label:{label:A.address.custom},isDisabled:v==null?"disabled":void 0,style:{padding:`${e.Space.sp2} ${e.Space.sp0}`,paddingLeft:N.radioLabelPaddingLeft.value(d),paddingRight:N.radioLabelPaddingLeftRight.value(d),width:"fit-content"},radioField:{name:c(a,ee),id:`${c(a,ee)}.${A.address.custom}`,value:"custom_address",radioSize:"small",registerOptions:{required:!0}}})]})})]}),r.jsxRuntimeExports.jsx(Ct,{windowSize:d,children:v?.user!=null&&s!=null&&r.jsxRuntimeExports.jsx(yt,{children:s==="card_holder_personal_address"?r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsx(e.AddressValueField,{name:"personal_address_value_field",defaultValue:D,isDisabled:"readonly",placeholder:Le,style:{minHeight:e.Space.sp4,paddingTop:e.Space.sp2,paddingBottom:e.Space.sp2,width:"100%",display:"flex",flexGrow:1}}),r.jsxRuntimeExports.jsx(Ee,{windowSize:d,children:A.address.personalAddressText.replace("_name_",v.user.firstName)})]}):s==="company_address"?r.jsxRuntimeExports.jsx(e.AddressValueField,{name:"company_address_value_field",defaultValue:h,isDisabled:"readonly",placeholder:Le,style:{minHeight:e.Space.sp4,paddingTop:e.Space.sp2,paddingBottom:e.Space.sp2,width:"100%",display:"flex",flexGrow:1}}):r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsx(e.AddressValueField,{name:"custom_address_value_field",defaultValue:E[t.lineId],placeholder:ut,style:{minHeight:e.Space.sp4,paddingTop:e.Space.sp2,paddingBottom:e.Space.sp2,width:"100%",display:"flex",flexGrow:1},onClick:V}),r.jsxRuntimeExports.jsx(Ee,{windowSize:d,children:A.address.customAddressText})]})})})]})]})},yt=l.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: flex-end;
+  flex-grow: 1;
+`,Ee=l(e.SmallRegular)`
+  display: flex;
+  color: ${t=>t.theme.colors.hero};
+  padding-right: 12px;
+  text-align: right;
+  ${t=>`${mt.infoLabel.style(t.windowSize)}`};
+`,St=l(e.SmallRegular)`
+  color: ${t=>t.isOptionSelected?t.theme.colors.primary:t.theme.colors.grey1};
+`,pe=l.div`
+  display: flex;
+  flex: 1;
+  background-color: ${t=>t.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`,vt=l.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  background-color: ${t=>t.theme.colors.grey5};
+  min-height: ${e.Space.sp6};
+  padding-right: ${e.Space.sp2};
+  padding-top: ${e.Space.sp2};
+  padding-bottom: ${e.Space.sp2};
+
+  &:focus-within {
+    border-color: ${t=>t.theme.colors.primary};
+    color: ${t=>t.theme.colors.primary};
+    z-index: 2;
+    outline: 1px solid ${t=>t.theme.colors.primary};
+  }
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${t=>t.theme.colors.primary};
+    .user-multi-select-field__control {
+      background-color: ${t=>t.theme.colors.background};
+    }
+  }
+`,Rt=l.div`
+  flex-grow: 1;
+  display: flex;
+  width: ${t=>t.windowSize==="small"?"auto":`calc(100% - ${N.largeLabelWidth.valuePx(t.windowSize)})`};
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: ${t=>N.labelMarginBottom.valuePx(t.windowSize)};
+`,Ct=l.div`
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+  color: ${t=>t.theme.colors.primary};
+  padding-left: ${e.Space.sp4};
+  width: 100%;
+`,jt=l.div`
+  color: ${t=>t.theme.colors.primary};
+  width: 100%;
+  display: flex;
+  flex-direction: ${t=>t.windowSize==="small"?"column":"row"};
+`,$t=l.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  &:hover {
+    fill: ${t=>t.theme.colors.primary};
+  }
+`,{spendManagement:{chargeCard:{issueCard:G}}}=e.appLocale.getLocalizedStrings(),Y={largeLabelWidth:new e.ResponsiveSized(120,120,200),labelMarginRight:new e.ResponsiveSized(e.sp[3],e.sp[4]),largeLabelMarginRight:new e.ResponsiveSized(e.sp[2],12),labelMarginBottom:new e.ResponsiveSized(e.sp[2],e.sp[0]),infoLabelMarginTop:new e.ResponsiveSized(e.sp[1],e.sp[0])},wt={infoLabel:new e.ResponsiveSizedStyle("smallRegular","smallRegular")},Lt="debitCard.virtualCard.amount",Et="debitCard.virtualCard.cardName",Te="debitCard.virtualCard.users",Tt="debitCard.virtualCard.frequency",Pt="debitCard.virtualCard.connectedAccount",It=({lineData:t,issueCardSectionId:a,cardHolderCandidates:o,creditLimitFrequency:u,allRoles:b,depositAccounts:x,allAccountingClasses:P,activeDebitCardCount:h,maxVirtualDebitCardPerUser:E})=>{const T=r.useTheme(),n=e.useWindowSizeContext(),{getValues:j}=r.useFormContext(),m=Y.largeLabelWidth.value(n),d=t.debitCard.virtualCard.amount,B=x.find(s=>s.id===t.debitCard.virtualCard.connectedAccount.selectedOption)?.cardLimits.dailyCardTransactionLimit.amount,f=d!=null&&B!=null&&d>B,V=f?G.amountExceedDebitCardError.replace("_amount_",e.currencyAmountCompactFormatter(B)):void 0,k=s=>{let p=0;const S=t.debitCard.virtualCard.connectedAccount.selectedOption;return S!=null&&h?.[S]?.[s]!=null&&(p=h[S][s].virtualCardCount),j().lineInfo.forEach(y=>{y.debitCard.cardType==="business_virtual_debit_card"&&y.debitCard.virtualCard.users.selectedUsers.forEach(w=>{w.userId===s&&(p+=1)})}),p>=E};return r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsx(Ie,{label:{label:G.connectedAccountLabel,width:m,style:{marginLeft:e.Space.sp4,marginRight:Y.largeLabelMarginRight.value(n),marginTop:e.Space.sp2,width:m}},style:{width:"auto"},singleSelectPickerField:{name:c(a,Pt),placeholder:G.selectAccountPlaceholder,style:{position:"relative"},capitalizeOptions:!0,valueToLogo:(s,p)=>Ze(x,s,p),valueToSubLabels:(s,p)=>xe(x,s,p),defaultValue:{selectedOption:t.debitCard.virtualCard.connectedAccount.selectedOption,allOptions:x.map(s=>({label:s.accountName,value:s.id}))},isOptionRemovable:!1,textAlignment:"right",registerOptions:{required:!0,validate:s=>s!=null&&!!s.selectedOption}}}),r.jsxRuntimeExports.jsx(ue,{}),r.jsxRuntimeExports.jsxs(kt,{windowSize:n,children:[r.jsxRuntimeExports.jsx(e.Label,{label:G.cardholdersLabel,htmlFor:c(a,Te),style:{marginLeft:e.Space.sp4,marginRight:Y.labelMarginRight.value(n),marginTop:e.Space.sp2,width:m}}),r.jsxRuntimeExports.jsxs(Nt,{windowSize:n,children:[r.jsxRuntimeExports.jsx(e.UserMultiSelectField,{hideEmailTooltip:!0,shouldHaveBackgroundColor:!1,showBackgroundColorIfHasAnySelectedOption:!1,placeholderLabel:G.usersPlaceholder,name:c(a,Te),value:{allUsers:o,selectedUsers:t.debitCard.virtualCard.users.selectedUsers,allNonUsers:[],selectedNonUsers:[]},registerOptions:{required:!0,validate:s=>s?.selectedUsers?.length>0},valueToSubtitle:s=>{const p=b.find(I=>I.userId===s),S=[];return p!=null&&(S.push(r.jsxRuntimeExports.jsx(Ge.RoleWithToolTip,{roles:p.userRoles})),p.accountingClassIDs.forEach(I=>{const y=P.find(w=>w.classId===I);y!=null&&y.className&&S.push(y.className)})),S},disableCurrentOption:k,disabledOptionHint:G.cardLimitWarning,customStyleConfig:{placeholder:()=>({margin:e.Space.sp0}),input:(s,{selectProps:p})=>({display:p.menuIsOpen===!1&&t.debitCard.virtualCard.users.selectedUsers.length>0&&n!=="small"?"none":"unset",width:n==="small"&&t.debitCard.virtualCard.users.selectedUsers.length>0?"100%":`calc(100% - ${e.Space.sp5})`,padding:t.debitCard.virtualCard.users.selectedUsers.length===0?`${e.Space.sp0} ${e.Space.sp3}`:e.Space.sp0,...e.textStyles.standardRegular.cssObject,height:e.Space.sp4,zIndex:0,position:t.debitCard.virtualCard.users.selectedUsers.length===0||n==="small"&&p.menuIsOpen===!1?"absolute":"unset",left:e.Space.sp0,">input":{...e.textStyles.smallBold.cssObject,height:"100%",cursor:"pointer"}})}}),r.jsxRuntimeExports.jsx(Mt,{size:n,children:G.additionalInfoVirtual})]})]}),r.jsxRuntimeExports.jsx(ue,{}),r.jsxRuntimeExports.jsx(e.LabeledTextField,{label:{label:G.cardNameLabel,width:m},style:{width:"auto",paddingLeft:Y.labelMarginBottom.value(n)},text:{type:"text",name:c(a,Et),defaultValue:t.debitCard.virtualCard.cardName,placeholder:G.cardNamePlaceholder,options:{required:!0,validate:s=>s!=null}}}),r.jsxRuntimeExports.jsx(ue,{}),r.jsxRuntimeExports.jsx(e.LabeledFormattedTextField,{label:{label:G.amountLabel,width:m},showAdditionalInfoLabel:f,additionalInfoLabel:V,formattedTextField:{type:"number",name:c(a,Lt),defaultValue:t.debitCard.virtualCard.amount,placeholder:G.amountPlaceholder,returnValueType:"floatValue",prefix:"$",allowNegative:!0,isNumericString:!1,registerOptions:{required:!0,validate:s=>B!=null?!!s&&s>0&&s<=B:!!s&&s>0},autoComplete:"off",decimalSeparator:".",decimalScale:2,fixedDecimalScale:!1,thousandSeparator:!0},style:{width:"auto",paddingLeft:Y.labelMarginBottom.value(n)},isFieldError:f}),r.jsxRuntimeExports.jsx(ue,{}),r.jsxRuntimeExports.jsx(Ut,{size:n,children:r.jsxRuntimeExports.jsx(Ie,{isDisabled:"readonly",label:{label:G.frequencyLabel,width:m,style:{marginLeft:e.Space.sp0,marginBottom:Y.labelMarginBottom.valuePx(n),marginRight:Y.labelMarginRight.valuePx(n)}},style:{width:"100%",padding:e.Space.sp0,display:n==="small"?"flex":"inherit"},infoLabelStyle:{...e.textStyles.smallRegular.cssObject,textAlign:"right",paddingRight:e.Space.sp3,marginTop:Y.infoLabelMarginTop.valuePx(n),color:T.colors.hero},valueToAdditionalLabel:s=>le(s),singleSelectPickerField:{name:c(a,Tt),placeholder:G.frequencyPlaceholder,style:{position:"relative"},capitalizeOptions:!0,showSubLabelsInSingleValue:!1,defaultValue:{selectedOption:t.debitCard.virtualCard.frequency.selectedOption,allOptions:u.map(s=>({label:s.name,value:s.code}))},valueToSubLabels:(s,p)=>xe(x,s,p),textAlignment:"right",registerOptions:{required:!0,validate:s=>s!=null&&!!s.selectedOption}}})})]})},Ze=(t,a,o)=>{if(a==="")return r.jsxRuntimeExports.jsx(_t,{});const u=t.find(x=>x.id===a),b=t.findIndex(x=>x.id===a);return u!=null?r.jsxRuntimeExports.jsx(At,{isOptionSelected:o,children:r.jsxRuntimeExports.jsx(Ft,{color:e.getAccountsColorMappingFromIndex(b)})}):null},xe=(t,a,o)=>{if(!a)return null;const u=t.find(b=>b.id===a);return o===!0?r.jsxRuntimeExports.jsx(zt,{children:u?.maskedAccountNumber}):r.jsxRuntimeExports.jsxs(Bt,{className:"option-sublabel",children:[r.jsxRuntimeExports.jsx(Pe,{children:u?.maskedAccountNumber}),u?.accountBalance?.available?r.jsxRuntimeExports.jsx(Ot,{}):null,u?.accountBalance?.available?r.jsxRuntimeExports.jsx(Pe,{children:e.amountToString("0,0[.]00",u.accountBalance.available)}):null]})},zt=l.span`
+  margin-left: ${e.Space.sp2};
+`,Pe=l.div``,Ot=l.div`
+  width: ${e.Space.sp1};
+  height: ${e.Space.sp1};
+  min-width: ${e.Space.sp1};
+  background-color: ${t=>t.theme.colors.grey1};
+  border-radius: 50%;
+`,At=l.div`
+  min-width: ${t=>t.isOptionSelected?e.Space.sp4:e.Space.sp5};
+  width: ${t=>t.isOptionSelected?e.Space.sp4:e.Space.sp5};
+  height: ${t=>t.isOptionSelected?e.Space.sp4:e.Space.sp5};
+  margin-right: ${e.Space.sp2};
+`,Ft=l(e.SvgZeniBrandCheckingAcc)`
+  min-width: inherit;
+  width: inherit;
+  height: inherit;
+`,_t=l(e.SvgAddRound)`
+  min-width: ${e.Space.sp4};
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  margin-right: 12px;
+  margin-left: ${e.Space.sp1};
+  color: ${t=>t.theme.colors.hero};
+`,Ut=l.div`
+  display: flex;
+  flex-direction: row;
+  padding: ${e.Space.sp2};
+  padding-left: ${e.Space.sp4};
+  justify-content: space-between;
+  color: ${t=>t.theme.colors.hero};
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+`,Bt=l(e.ExtraSmallRegular)`
+  color: ${t=>t.theme.colors.grey1};
+  display: flex;
+  align-items: center;
+  gap: ${e.Space.sp2};
+`,Mt=l.label`
+  color: ${t=>t.theme.colors.hero};
+  width: 100%;
+  ${t=>`${wt.infoLabel.style(t.size)}`};
+  padding-right: ${e.Space.sp3};
+  text-align: right;
+  white-space: pre-line;
+`,ue=l.div`
+  display: flex;
+  flex: 1;
+  background-color: ${t=>t.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`,Nt=l.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  width: ${t=>`calc(100% - ${Y.largeLabelWidth.valuePx(t.windowSize)})`};
+  align-items: flex-end;
+  flex-grow: 1;
+`,Ie=l(e.LabeledSingleSelectPickerField)`
+  border-radius: ${e.Space.sp2};
+  border: 1px solid ${t=>t.theme.colors.grey3};
+`,kt=l.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${t=>t.theme.colors.grey5};
+  min-height: ${e.Space.sp6};
+  padding-right: ${e.Space.sp2};
+  padding-top: ${e.Space.sp2};
+  padding-bottom: ${e.Space.sp2};
+
+  &:focus-within {
+    border-color: ${t=>t.theme.colors.primary};
+    color: ${t=>t.theme.colors.primary};
+    z-index: 2;
+    outline: 1px solid ${t=>t.theme.colors.primary};
+  }
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${t=>t.theme.colors.primary};
+    .user-multi-select-field__control {
+      background-color: ${t=>t.theme.colors.background};
+    }
+  }
+`,{commonSetUp:{businessVerification:{addressPlaceholder:ze,customAddressPlaceholder:Vt}},spendManagement:{chargeCard:{issueCard:O}}}=e.appLocale.getLocalizedStrings(),U={largeLabelWidth:new e.ResponsiveSized(120,120,200),labelMarginRight:new e.ResponsiveSized(e.sp[3],e.sp[4]),largeLabelMarginRight:new e.ResponsiveSized(e.sp[2],12),labelMarginBottom:new e.ResponsiveSized(e.sp[2],e.sp[0]),infoLabelMarginTop:new e.ResponsiveSized(e.sp[1],e.sp[0]),radioLabelPaddingLeftRight:new e.ResponsiveSized(e.sp[2],e.sp[3]),radioLabelPaddingLeft:new e.ResponsiveSized(e.sp[0],e.sp[3]),radioLabelPaddingRight:new e.ResponsiveSized(10,e.sp[3]),labeledFieldPaddingLeft:new e.ResponsiveSized(e.sp[3],e.sp[0]),labeledFieldPaddingRight:new e.ResponsiveSized(e.sp[3],e.sp[2]),labeledFieldPaddingBottom:new e.ResponsiveSized(e.sp[3],e.sp[2])},Wt={infoLabel:new e.ResponsiveSizedStyle("smallRegular","smallRegular")},qt="debitCard.physicalCard.amount",Ht="debitCard.physicalCard.cardName",Gt="debitCard.physicalCard.user",Zt="debitCard.physicalCard.frequency",te="debitCard.physicalCard.addressType",Dt="debitCard.physicalCard.connectedAccount",Jt=({lineData:t,issueCardSectionId:a,creditLimitFrequency:o,activeDebitCardCount:u,allRoles:b,depositAccounts:x,allAccountingClasses:P,companyAddress:h,customAddress:E,userAddress:T,userList:n,maxPhysicalDebitCardPerUser:j,openAddAddressDrawerHandler:m})=>{const d=e.useWindowSizeContext(),W=r.useTheme(),{getValues:B}=r.useFormContext(),f=U.largeLabelWidth.value(d),V=()=>{m(t.lineId,"debitCard")},k=t.debitCard.physicalCard.amount,p=x.find(i=>i.id===t.debitCard.physicalCard.connectedAccount.selectedOption)?.cardLimits.dailyCardTransactionLimit.amount,S=k!=null&&p!=null&&k>p,I=S?O.amountExceedDebitCardError.replace("_amount_",e.currencyAmountCompactFormatter(p)):void 0,y=t.debitCard.physicalCard.addressType,w=t.debitCard.physicalCard.user,v=w.allUsers.find(i=>i.userId===w.selectedUser),H=v?.userId,D=H!=null?T[H]:void 0,X=i=>{let R=0;const g=t.debitCard.physicalCard.connectedAccount.selectedOption;return g!=null&&u?.[g]?.[i]!=null&&(R=u[g][i].physicalCardCount),B().lineInfo.forEach(M=>{M.debitCard.cardType==="business_physical_debit_card"&&M.debitCard.physicalCard.user.selectedUser===i&&(R+=1)}),R>=j};return r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsx(Yt,{label:{label:O.connectedAccountLabel,width:f,style:{marginLeft:e.Space.sp4,marginRight:U.largeLabelMarginRight.value(d),marginTop:e.Space.sp2,width:f}},style:{width:"auto"},singleSelectPickerField:{name:c(a,Dt),placeholder:O.selectAccountPlaceholder,style:{position:"relative"},capitalizeOptions:!0,valueToLogo:(i,R)=>Ze(x,i,R),valueToSubLabels:(i,R)=>xe(x,i,R),defaultValue:{selectedOption:t.debitCard.physicalCard.connectedAccount.selectedOption,allOptions:x.map(i=>({label:i.accountName,value:i.id}))},textAlignment:"right",isOptionRemovable:!1,registerOptions:{required:!0,validate:i=>i!=null&&!!i.selectedOption}}}),r.jsxRuntimeExports.jsx(ne,{}),r.jsxRuntimeExports.jsx(He.LabeledUserSingleSelectWithSubtitlesField,{label:{label:O.cardholderLabel,width:f},userSingleSelectWithSubTitlesField:{name:c(a,Gt),placeholderLabel:O.usersPlaceholder,value:{allUsers:n,selectedUser:t.debitCard.physicalCard.user.selectedUser},registerOptions:{required:!0,validate:i=>i?.selectedUser?.length>0},valueToSubtitle:i=>{const R=b.find($=>$.userId===i),g=[];return R?.accountingClassIDs.forEach($=>{const M=P.find(de=>de.classId===$);M!=null&&M.className&&g.push(M.className)}),g},additionalLabelInfo:O.additionalInfoPhysical,showOnlyAvatar:!0,showAvatarAndSubtitles:!1,isOptionDisabled:X,disabledOptionHint:O.cardLimitWarning,bigMarginRightForSmallScreens:!0,optionStyles:{maxHeight:e.Space.sp10,minHeight:e.Space.sp6,height:"max-content"}},style:{width:"auto",paddingLeft:U.labelMarginBottom.value(d)}}),r.jsxRuntimeExports.jsx(ne,{}),r.jsxRuntimeExports.jsx(e.LabeledTextField,{label:{label:O.cardNameLabel,width:f},style:{width:"auto",paddingLeft:U.labelMarginBottom.value(d)},text:{type:"text",name:c(a,Ht),defaultValue:t.debitCard.physicalCard.cardName,placeholder:O.cardNamePlaceholder,options:{required:!0,validate:i=>i!=null}}}),r.jsxRuntimeExports.jsx(ne,{}),r.jsxRuntimeExports.jsx(e.LabeledFormattedTextField,{label:{label:O.amountLabel,width:f},showAdditionalInfoLabel:S,additionalInfoLabel:I,formattedTextField:{type:"number",name:c(a,qt),defaultValue:t.debitCard.physicalCard.amount,placeholder:O.amountPlaceholder,returnValueType:"floatValue",prefix:"$",allowNegative:!0,isNumericString:!1,registerOptions:{required:!0,validate:i=>p!=null?!!i&&i>0&&i<=p:!!i&&i>0},autoComplete:"off",decimalSeparator:".",decimalScale:2,fixedDecimalScale:!1,thousandSeparator:!0},style:{width:"auto",paddingLeft:U.labelMarginBottom.value(d)},isFieldError:S}),r.jsxRuntimeExports.jsx(ne,{}),r.jsxRuntimeExports.jsx(e.LabeledSingleSelectPickerField,{isDisabled:"readonly",label:{label:O.frequencyLabel,width:f,style:{marginBottom:U.labelMarginBottom.valuePx(d),marginRight:U.labelMarginRight.valuePx(d)}},style:{width:"auto",paddingLeft:U.labelMarginBottom.valuePx(d)},infoLabelStyle:{...e.textStyles.smallRegular.cssObject,textAlign:"right",paddingRight:e.Space.sp3,marginTop:U.infoLabelMarginTop.valuePx(d),color:W.colors.hero},valueToAdditionalLabel:i=>le(i),singleSelectPickerField:{name:c(a,Zt),placeholder:O.frequencyPlaceholder,style:{position:"relative"},capitalizeOptions:!0,showSubLabelsInSingleValue:!1,defaultValue:{selectedOption:t.debitCard.physicalCard.frequency.selectedOption,allOptions:o.map(i=>({label:i.name,value:i.code}))},valueToSubLabels:(i,R)=>xe(x,i,R),textAlignment:"right",registerOptions:{required:!0,validate:i=>i!=null&&!!i.selectedOption}}}),r.jsxRuntimeExports.jsx(ne,{}),r.jsxRuntimeExports.jsxs(Kt,{windowSize:d,children:[r.jsxRuntimeExports.jsxs(tr,{windowSize:d,children:[r.jsxRuntimeExports.jsx(e.Label,{label:O.address.shippingAddressLabel,htmlFor:c(a,te),style:{marginLeft:e.Space.sp4,marginRight:U.labelMarginRight.valuePx(d),marginTop:e.Space.sp2,width:d==="small"?"auto":f}}),r.jsxRuntimeExports.jsx(Qt,{windowSize:d,children:r.jsxRuntimeExports.jsxs(rr,{isDisabled:v==null,children:[D!=null&&r.jsxRuntimeExports.jsx(e.LabeledRadioField,{isContainerClickable:!0,label:{label:O.address.personal},isDisabled:v==null?"disabled":void 0,style:{padding:`${e.Space.sp2} ${e.Space.sp0}`,paddingLeft:U.radioLabelPaddingLeftRight.value(d),paddingRight:U.radioLabelPaddingRight.value(d),width:"fit-content"},radioField:{name:c(a,te),id:`${c(a,te)}.${O.address.personal}`,value:"card_holder_personal_address",radioSize:"small",registerOptions:{required:!0}}}),r.jsxRuntimeExports.jsx(e.LabeledRadioField,{isContainerClickable:!0,label:{label:O.address.company},isDisabled:v==null?"disabled":void 0,style:{padding:`${e.Space.sp2} ${e.Space.sp0}`,paddingLeft:U.radioLabelPaddingLeft.value(d),paddingRight:U.radioLabelPaddingRight.value(d),width:"fit-content"},radioField:{name:c(a,te),id:`${c(a,te)}.${O.address.company}`,value:"company_address",radioSize:"small",registerOptions:{required:!0}}}),r.jsxRuntimeExports.jsx(e.LabeledRadioField,{isContainerClickable:!0,label:{label:O.address.custom},isDisabled:v==null?"disabled":void 0,style:{padding:`${e.Space.sp2} ${e.Space.sp0}`,paddingLeft:U.radioLabelPaddingLeft.value(d),paddingRight:U.radioLabelPaddingLeftRight.value(d),width:"fit-content"},radioField:{name:c(a,te),id:`${c(a,te)}.${O.address.custom}`,value:"custom_address",radioSize:"small",registerOptions:{required:!0}}})]})})]}),r.jsxRuntimeExports.jsx(er,{windowSize:d,children:v?.user!=null&&y!=null&&r.jsxRuntimeExports.jsx(Xt,{children:y==="card_holder_personal_address"?r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsx(e.AddressValueField,{name:"personal_address_value_field",defaultValue:D,isDisabled:"readonly",placeholder:ze,style:{minHeight:e.Space.sp4,paddingTop:e.Space.sp2,paddingBottom:e.Space.sp2,width:"100%",display:"flex",flexGrow:1}}),r.jsxRuntimeExports.jsx(Oe,{windowSize:d,children:O.address.personalAddressText.replace("_name_",v.user.firstName)})]}):y==="company_address"?r.jsxRuntimeExports.jsx(e.AddressValueField,{name:"company_address_value_field",defaultValue:h,isDisabled:"readonly",placeholder:ze,style:{minHeight:e.Space.sp4,paddingTop:e.Space.sp2,paddingBottom:e.Space.sp2,width:"100%",display:"flex",flexGrow:1}}):r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsx(e.AddressValueField,{name:"custom_address_value_field",defaultValue:E[t.lineId],placeholder:Vt,style:{minHeight:e.Space.sp4,paddingTop:e.Space.sp2,paddingBottom:e.Space.sp2,width:"100%",display:"flex",flexGrow:1},onClick:V}),r.jsxRuntimeExports.jsx(Oe,{windowSize:d,children:O.address.customAddressText})]})})})]})]})},Xt=l.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: flex-end;
+  flex-grow: 1;
+`,Yt=l(e.LabeledSingleSelectPickerField)`
+  border-radius: ${e.Space.sp2};
+  border: 1px solid ${t=>t.theme.colors.grey3};
+`,Oe=l(e.SmallRegular)`
+  display: flex;
+  color: ${t=>t.theme.colors.hero};
+  padding-right: 12px;
+  text-align: right;
+  ${t=>`${Wt.infoLabel.style(t.windowSize)}`};
+`,ne=l.div`
+  display: flex;
+  flex: 1;
+  background-color: ${t=>t.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`,Kt=l.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  background-color: ${t=>t.theme.colors.grey5};
+  min-height: ${e.Space.sp6};
+  padding-right: ${e.Space.sp2};
+  padding-top: ${e.Space.sp2};
+  padding-bottom: ${e.Space.sp2};
+
+  &:focus-within {
+    border-color: ${t=>t.theme.colors.primary};
+    color: ${t=>t.theme.colors.primary};
+    z-index: 2;
+    outline: 1px solid ${t=>t.theme.colors.primary};
+  }
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${t=>t.theme.colors.primary};
+    .user-multi-select-field__control {
+      background-color: ${t=>t.theme.colors.background};
+    }
+  }
+`,Qt=l.div`
+  flex-grow: 1;
+  display: flex;
+  width: ${t=>t.windowSize==="small"?"auto":`calc(100% - ${U.largeLabelWidth.valuePx(t.windowSize)})`};
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: ${t=>U.labelMarginBottom.valuePx(t.windowSize)};
+`,er=l.div`
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+  color: ${t=>t.theme.colors.primary};
+  padding-left: ${e.Space.sp4};
+  width: 100%;
+`,tr=l.div`
+  color: ${t=>t.theme.colors.primary};
+  width: 100%;
+  display: flex;
+  flex-direction: ${t=>t.windowSize==="small"?"column":"row"};
+`,rr=l.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  &:hover {
+    fill: ${t=>t.theme.colors.primary};
+  }
+`,{spendManagement:{chargeCard:{issueCard:J}}}=e.appLocale.getLocalizedStrings(),K={largeLabelWidth:new e.ResponsiveSized(120,120,200),labelMarginRight:new e.ResponsiveSized(e.sp[3],e.sp[4]),labelMarginBottom:new e.ResponsiveSized(e.sp[2],e.sp[0]),infoLabelMarginTop:new e.ResponsiveSized(e.sp[1],e.sp[0])},ar={infoLabel:new e.ResponsiveSizedStyle("smallRegular","smallRegular")},sr="creditCard.virtualCard.amount",ir="creditCard.virtualCard.cardName",Ae="creditCard.virtualCard.users",lr="creditCard.virtualCard.frequency",dr=({lineData:t,issueCardSectionId:a,cardHolderCandidates:o,limit:u,creditLimitFrequency:b,allRoles:x,allAccountingClasses:P,activeChargeCardCount:h,maxVirtualChargeCardPerUser:E})=>{const T=r.useTheme(),n=e.useWindowSizeContext(),{getValues:j}=r.useFormContext(),m=K.largeLabelWidth.value(n),d=(s,p)=>r.jsxRuntimeExports.jsx(nr,{isOptionSelected:p,children:le(s)}),W=t.creditCard.virtualCard.amount,B=e.currencyAmountCompactFormatter(u.amount),f=W!=null&&W>u.amount,V=f?J.amountExceedError.replace("_amount_",B):void 0,k=s=>{let p=h[s]?.virtualCardCount??0;return j().lineInfo.forEach(I=>{I.creditCard.cardType==="business_virtual_credit_card"&&I.creditCard.virtualCard.users.selectedUsers.forEach(y=>{y.userId===s&&(p+=1)})}),p>=E};return r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsxs(mr,{windowSize:n,children:[r.jsxRuntimeExports.jsx(e.Label,{label:J.cardholdersLabel,htmlFor:c(a,Ae),style:{marginLeft:e.Space.sp4,marginRight:K.labelMarginRight.value(n),marginTop:e.Space.sp2,width:m}}),r.jsxRuntimeExports.jsxs(pr,{windowSize:n,children:[r.jsxRuntimeExports.jsx(e.UserMultiSelectField,{hideEmailTooltip:!0,shouldHaveBackgroundColor:!1,showBackgroundColorIfHasAnySelectedOption:!1,placeholderLabel:J.usersPlaceholder,name:c(a,Ae),value:{allUsers:o,selectedUsers:t.creditCard.virtualCard.users.selectedUsers,allNonUsers:[],selectedNonUsers:[]},registerOptions:{required:!0,validate:s=>s?.selectedUsers?.length>0},valueToSubtitle:s=>{const p=x.find(I=>I.userId===s),S=[];return p!=null&&(S.push(r.jsxRuntimeExports.jsx(Ge.RoleWithToolTip,{roles:p.userRoles})),p.accountingClassIDs.forEach(I=>{const y=P.find(w=>w.classId===I);y!=null&&y.className&&S.push(y.className)})),S},disableCurrentOption:k,disabledOptionHint:J.cardLimitWarning,customStyleConfig:{placeholder:()=>({margin:e.Space.sp0}),input:(s,{selectProps:p})=>({display:p.menuIsOpen===!1&&t.creditCard.virtualCard.users.selectedUsers.length>0&&n!=="small"?"none":"unset",width:n==="small"&&t.creditCard.virtualCard.users.selectedUsers.length>0?"100%":`calc(100% - ${e.Space.sp5})`,padding:t.creditCard.virtualCard.users.selectedUsers.length===0?`${e.Space.sp0} ${e.Space.sp3}`:e.Space.sp0,...e.textStyles.standardRegular.cssObject,height:e.Space.sp4,position:t.creditCard.virtualCard.users.selectedUsers.length===0||n==="small"&&p.menuIsOpen===!1?"absolute":"unset",left:e.Space.sp0,">input":{...e.textStyles.smallBold.cssObject,height:"100%",cursor:"pointer"}})}}),r.jsxRuntimeExports.jsx(cr,{size:n,children:J.additionalInfoVirtual})]})]}),r.jsxRuntimeExports.jsx(ye,{}),r.jsxRuntimeExports.jsx(e.LabeledTextField,{label:{label:J.cardNameLabel,width:m},style:{width:"auto",paddingLeft:K.labelMarginBottom.value(n)},text:{type:"text",name:c(a,ir),defaultValue:t.creditCard.virtualCard.cardName,placeholder:J.cardNamePlaceholder,options:{required:!0,validate:s=>s!=null}}}),r.jsxRuntimeExports.jsx(ye,{}),r.jsxRuntimeExports.jsx(e.LabeledFormattedTextField,{label:{label:J.amountLabel,width:m},showAdditionalInfoLabel:f,additionalInfoLabel:V,formattedTextField:{type:"number",name:c(a,sr),defaultValue:t.creditCard.virtualCard.amount,placeholder:J.amountPlaceholder,returnValueType:"floatValue",prefix:"$",allowNegative:!0,isNumericString:!1,registerOptions:{required:!0,validate:s=>!!s&&s>0&&s<=u.amount},autoComplete:"off",decimalSeparator:".",decimalScale:2,fixedDecimalScale:!1,thousandSeparator:!0},style:{width:"auto",paddingLeft:K.labelMarginBottom.value(n)},isFieldError:f}),r.jsxRuntimeExports.jsx(ye,{}),r.jsxRuntimeExports.jsx(or,{size:n,children:r.jsxRuntimeExports.jsx(ur,{isDisabled:"readonly",label:{label:J.frequencyLabel,width:m,style:{marginLeft:e.Space.sp0,marginBottom:K.labelMarginBottom.valuePx(n),marginRight:K.labelMarginRight.valuePx(n)}},style:{width:"100%",padding:e.Space.sp0,display:n==="small"?"flex":"inherit"},infoLabelStyle:{...e.textStyles.smallRegular.cssObject,textAlign:"right",paddingRight:e.Space.sp3,marginTop:K.infoLabelMarginTop.valuePx(n),color:T.colors.hero},valueToAdditionalLabel:s=>le(s),singleSelectPickerField:{name:c(a,lr),placeholder:J.frequencyPlaceholder,style:{position:"relative"},capitalizeOptions:!0,showSubLabelsInSingleValue:!1,defaultValue:{selectedOption:t.creditCard.virtualCard.frequency.selectedOption,allOptions:b.map(s=>({label:s.name,value:s.code}))},valueToSubLabels:(s,p)=>d(s,p),textAlignment:"right",registerOptions:{required:!0,validate:s=>s!=null&&!!s.selectedOption}}})})]})},or=l.div`
+  display: flex;
+  flex-direction: row;
+  padding: ${e.Space.sp2};
+  padding-left: ${e.Space.sp4};
+  justify-content: space-between;
+  color: ${t=>t.theme.colors.hero};
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+`,nr=l(e.SmallRegular)`
+  color: ${t=>t.isOptionSelected?t.theme.colors.primary:t.theme.colors.grey1};
+`,cr=l.label`
+  color: ${t=>t.theme.colors.hero};
+  width: 100%;
+  ${t=>`${ar.infoLabel.style(t.size)}`};
+  padding-right: ${e.Space.sp3};
+  text-align: right;
+  white-space: pre-line;
+`,ye=l.div`
+  display: flex;
+  flex: 1;
+  background-color: ${t=>t.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`,pr=l.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  width: ${t=>`calc(100% - ${K.largeLabelWidth.valuePx(t.windowSize)})`};
+  align-items: flex-end;
+  flex-grow: 1;
+`,ur=l(e.LabeledSingleSelectPickerField)`
+  border-radius: ${e.Space.sp2};
+  border: 1px solid ${t=>t.theme.colors.grey3};
+`,mr=l.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${t=>t.theme.colors.grey5};
+  min-height: ${e.Space.sp6};
+  padding-right: ${e.Space.sp2};
+  padding-top: ${e.Space.sp2};
+  padding-bottom: ${e.Space.sp2};
+
+  &:focus-within {
+    border-color: ${t=>t.theme.colors.primary};
+    color: ${t=>t.theme.colors.primary};
+    z-index: 2;
+    outline: 1px solid ${t=>t.theme.colors.primary};
+  }
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${t=>t.theme.colors.primary};
+    .user-multi-select-field__control {
+      background-color: ${t=>t.theme.colors.background};
+    }
+  }
+`,Z={containerPaddingBottom:new e.ResponsiveSized(e.sp[3],e.sp[4]),sectionTitleContainerPadding:new e.ResponsiveSized(e.sp[2],e.sp[3]),largeLabelWidth:new e.ResponsiveSized(120,120,200),labelPaddingLeft:new e.ResponsiveSized(e.sp[3],e.sp[4]),radioLabelPaddingLeft:new e.ResponsiveSized(e.sp[4],e.sp[4]),radioLabelPaddingRight:new e.ResponsiveSized(e.sp[2],e.sp[3]),labelPaddingRight:new e.ResponsiveSized(e.sp[4],e.sp[4]),firstItemMarginTop:new e.ResponsiveSized(e.sp[4],e.sp[2]),paddingLeft:new e.ResponsiveSized(e.sp[3],e.sp[5])},{spendManagement:{chargeCard:{issueCard:q}}}=e.appLocale.getLocalizedStrings(),hr=t=>{const{lineData:a,issueCardSectionId:o,cardHolderCandidates:u,userList:b,limit:x,creditLimitFrequency:P,allRoles:h,allAccountingClasses:E,hasMultipleLineItems:T,depositAccounts:n,isIssuePhysicalCardEnabled:j,isIssuePhysicalDebitCardEnabled:m,isDebitCardFeatureEnabled:d,isChargeCardFeatureEnabled:W,isChargeCardSetupEnabled:B,isDebitCardSetupEnabled:f,lineIndex:V,customAddress:k,userAddress:s,onRemoveIssueCardLine:p,companyAddress:S,maxPhysicalChargeCardPerUser:I,maxVirtualChargeCardPerUser:y,maxPhysicalDebitCardPerUser:w,maxVirtualDebitCardPerUser:v,cardsSectionRef:H,openAddAddressDrawerHandler:D,clearTentativeNameForLine:X,activeChargeCardCount:i,activeDebitCardCount:R}=t,g=e.useWindowSizeContext(),$=Z.largeLabelWidth.value(g);return r.jsxRuntimeExports.jsxs(gr,{windowSize:g,ref:H,className:"cards-item",children:[T&&r.jsxRuntimeExports.jsxs(yr,{windowSize:g,children:[r.jsxRuntimeExports.jsx(Sr,{windowSize:g,children:`${q.card} ${V+1}`}),r.jsxRuntimeExports.jsx(vr,{className:"deleteIconWrapper",windowSize:g,"data-testid":e.generateDataTestId("delete-icon",a.lineId),onClick:()=>{X?.(a.lineId??"1"),p(V)},children:r.jsxRuntimeExports.jsx(e.Tooltip,{enterDelay:600,title:q.deleteCard,placement:"left",children:r.jsxRuntimeExports.jsx(Rr,{})})})]}),r.jsxRuntimeExports.jsxs(br,{showTopMargin:!T,windowSize:g,children:[d&&f&&W&&B?r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsxs(xr,{children:[r.jsxRuntimeExports.jsx(e.LabeledRadioField,{isContainerClickable:!0,label:{label:q.creditCard},style:{padding:`${e.Space.sp3} ${e.Space.sp0}`,paddingLeft:Z.labelPaddingLeft.value(g),borderTopLeftRadius:"inherit"},showOutline:!0,radioField:{name:c(o,"chargeCardType"),id:`${c(o,"chargeCardType")}.creditCard`,value:"credit_card",radioSize:"small"}}),r.jsxRuntimeExports.jsx(fr,{}),r.jsxRuntimeExports.jsx(e.LabeledRadioField,{isContainerClickable:!0,label:{label:q.debitCard},style:{padding:`${e.Space.sp3} ${e.Space.sp0}`,paddingLeft:Z.labelPaddingLeft.value(g),borderTopRightRadius:"inherit"},showOutline:!0,radioField:{name:c(o,"chargeCardType"),id:`${c(o,"chargeCardType")}.debitCard`,value:"debit_card",radioSize:"small"}})]}),r.jsxRuntimeExports.jsx(Se,{})]}):null,a.chargeCardType==="credit_card"?r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsxs(_e,{size:g,isDebitCardSetupEnabled:f,isDebitCardFeatureEnabled:d,children:[r.jsxRuntimeExports.jsx(e.Label,{label:q.type,htmlFor:c(o,"creditCard.cardType"),style:{padding:`${e.Space.sp2} ${e.Space.sp0}`,paddingLeft:Z.radioLabelPaddingLeft.value(g),paddingRight:Z.radioLabelPaddingRight.value(g),width:"fit-content"}}),r.jsxRuntimeExports.jsxs(Fe,{labelWidth:$,children:[r.jsxRuntimeExports.jsx(e.LabeledRadioField,{label:{label:q.virtualCard},style:{width:"auto"},radioField:{name:c(o,"creditCard.cardType"),id:`${c(o,"creditCard.cardType")}.${q.virtualCard}`,value:"business_virtual_credit_card",style:{height:e.Space.sp3,width:e.Space.sp3,opacity:j?1:0},radioSize:"small"}}),j&&r.jsxRuntimeExports.jsx(e.LabeledRadioField,{label:{label:q.physicalCard},style:{width:"auto",paddingLeft:Z.paddingLeft.valuePx(g)},radioField:{name:c(o,"creditCard.cardType"),id:`${c(o,"creditCard.cardType")}.${q.physicalCard}`,value:"business_physical_credit_card",style:{height:e.Space.sp3,width:e.Space.sp3},radioSize:"small"}})]})]}),r.jsxRuntimeExports.jsx(Se,{}),a.creditCard.cardType==="business_physical_credit_card"?r.jsxRuntimeExports.jsx(ft,{lineData:a,issueCardSectionId:`${o}`,limit:x,creditLimitFrequency:P,companyAddress:S,openAddAddressDrawerHandler:D,customAddress:k,userAddress:s,activeChargeCardCount:i,userList:b,allRoles:h,allAccountingClasses:E,maxPhysicalChargeCardPerUser:I}):r.jsxRuntimeExports.jsx(dr,{lineData:a,issueCardSectionId:`${o}`,cardHolderCandidates:u,limit:x,creditLimitFrequency:P,allRoles:h,allAccountingClasses:E,activeChargeCardCount:i,maxVirtualChargeCardPerUser:y})]}):null,a.chargeCardType==="debit_card"?r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsxs(_e,{size:g,isDebitCardSetupEnabled:f,isDebitCardFeatureEnabled:d,children:[r.jsxRuntimeExports.jsx(e.Label,{label:q.type,htmlFor:c(o,"debitCard.cardType"),style:{padding:`${e.Space.sp2} ${e.Space.sp0}`,paddingLeft:Z.radioLabelPaddingLeft.value(g),paddingRight:Z.radioLabelPaddingRight.value(g),width:"fit-content"}}),r.jsxRuntimeExports.jsxs(Fe,{labelWidth:$,children:[r.jsxRuntimeExports.jsx(e.LabeledRadioField,{label:{label:q.virtualCard},style:{width:"auto"},radioField:{name:c(o,"debitCard.cardType"),id:`${c(o,"debitCard.cardType")}.${q.virtualCard}`,value:"business_virtual_debit_card",style:{height:e.Space.sp3,width:e.Space.sp3,opacity:m?1:0},radioSize:"small"}}),m&&r.jsxRuntimeExports.jsx(e.LabeledRadioField,{label:{label:q.physicalCard},style:{width:"auto",paddingLeft:Z.paddingLeft.valuePx(g)},radioField:{name:c(o,"debitCard.cardType"),id:`${c(o,"debitCard.cardType")}.${q.physicalCard}`,value:"business_physical_debit_card",style:{height:e.Space.sp3,width:e.Space.sp3},radioSize:"small"}})]})]}),r.jsxRuntimeExports.jsx(Se,{}),a.debitCard.cardType==="business_physical_debit_card"?r.jsxRuntimeExports.jsx(Jt,{lineData:a,issueCardSectionId:`${o}`,creditLimitFrequency:P,companyAddress:S,openAddAddressDrawerHandler:D,customAddress:k,userAddress:s,depositAccounts:n,activeDebitCardCount:R,userList:b,allRoles:h,allAccountingClasses:E,maxPhysicalDebitCardPerUser:w}):r.jsxRuntimeExports.jsx(It,{lineData:a,issueCardSectionId:`${o}`,cardHolderCandidates:u,depositAccounts:n,creditLimitFrequency:P,allRoles:h,allAccountingClasses:E,activeDebitCardCount:R,maxVirtualDebitCardPerUser:v})]}):null]})]})},xr=l.div`
+  display: flex;
+  flex-direction: row;
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+`,Fe=l.div`
+  display: flex;
+  flex-direction: row;
+  width: ${t=>`calc(100% - ${t.labelWidth}px)`};
+  align-items: flex-end;
+  justify-content: flex-end;
+  flex-grow: 1;
+  height: ${e.Space.sp6};
+  align-items: center;
+`,gr=l.div`
+  display: flex;
+  flex-direction: column;
+  padding-bottom: ${t=>Z.containerPaddingBottom.valuePx(t.windowSize)};
+  .deleteIconWrapper {
+    ${t=>t.windowSize==="small"&&" display: block; "}
+  }
+  &:hover {
+    .deleteIconWrapper {
+      display: block;
+    }
+  }
+`,br=l.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${t=>t.theme.colors.grey5};
+  border: 1px solid ${t=>t.theme.colors.grey3};
+  box-shadow: ${t=>`${e.Space.sp0} 1px 2px ${e.Space.sp0} ${t.theme.colors.issueChargeCardBackgroundShadow}`};
+  border-radius: ${e.Space.sp2};
+  margin-top: ${t=>t.showTopMargin?Z.firstItemMarginTop.valuePx(t.windowSize):e.Space.sp0};
+`,fr=l.div`
+  background-color: ${t=>t.theme.colors.grey3};
+  min-width: 1px;
+  max-width: 1px;
+`,Se=l.div`
+  display: flex;
+  flex: 1;
+  background-color: ${t=>t.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`,_e=l.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${t=>t.theme.colors.grey5};
+  min-height: ${e.Space.sp6};
+  padding-right: ${t=>Z.labelPaddingRight.valuePx(t.size)};
+  padding-top: ${e.Space.sp2};
+  padding-bottom: ${e.Space.sp2};
+  align-items: center;
+  border-top-left-radius: ${t=>t.isDebitCardFeatureEnabled&&t.isDebitCardSetupEnabled?"unset":"inherit"};
+  border-top-right-radius: ${t=>t.isDebitCardFeatureEnabled&&t.isDebitCardSetupEnabled?"unset":"inherit"};
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${t=>t.theme.colors.primary};
+  }
+`,yr=l.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${t=>`${Z.sectionTitleContainerPadding.valuePx(t.windowSize)} ${e.Space.sp0}`};
+`,Sr=l(e.LargeBold)`
+  color: ${t=>t.theme.colors.primary};
+`,vr=l.div`
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+  cursor: pointer;
+  display: none;
+  color: ${t=>t.theme.colors.hero};
+  &:hover {
+    color: ${e.Colors.important};
+  }
+`,Rr=l(e.SvgDelete)`
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+  cursor: pointer;
+`,me={marginTop:new e.ResponsiveSized(e.sp[3],e.sp[4]),addCardButtonMarginBottom:new e.ResponsiveSized(e.sp[3],e.sp[4]),addCardButtonMarginTop:new e.ResponsiveSized(e.sp[2],e.sp[0]),addCardButtonPaddingTopBottom:new e.ResponsiveSized(e.sp[2],e.sp[2]),addCardButtonPaddingLeftRight:new e.ResponsiveSized(e.sp[3],e.sp[4])},Cr={title:new e.ResponsiveSizedStyle("standardMedium","standardMedium")},jr=({issueChargeCards:t,issueCardSectionId:a,cardHolderCandidates:o,userList:u,limit:b,creditLimitFrequency:x,allRoles:P,allAccountingClasses:h,isIssuePhysicalCardEnabled:E,isIssuePhysicalDebitCardEnabled:T,isDebitCardFeatureEnabled:n,isChargeCardFeatureEnabled:j,isChargeCardSetupEnabled:m,isDebitCardSetupEnabled:d,defaultCardType:W,getInitialLineFormData:B,clearTentativeNameForLine:f,companyAddress:V,containerRef:k,cardsSectionRef:s,openAddAddressDrawerHandler:p})=>{const{control:S,watch:I,setValue:y}=r.useFormContext(),{fields:w}=r.useFieldArray({name:a,control:S}),v=I(a,w),H=Math.max(...Object.keys(t.localData??{}).map(g=>Number(g)),0),D=()=>{const g=v[v.length-1],$=B(v.length,Number(g.lineId)>H?String(Number(g.lineId)+1):String(H+1),o,x,u,t.depositAccounts,j,n,m,d,V,W);y(a,[...v,$]),setTimeout(()=>{e.scrollContainerToTargetAdjusted(s.current,k.current)},50)},X=g=>{y(a,v.filter(($,M)=>M!==g))},i=e.useWindowSizeContext(),{spendManagement:{chargeCard:{issueCard:R}}}=e.appLocale.getLocalizedStrings();return r.jsxRuntimeExports.jsxs($r,{ref:k,children:[v.map((g,$)=>r.jsxRuntimeExports.jsx(hr,{lineIndex:$,lineData:g,issueCardSectionId:`${a}.${$}`,cardHolderCandidates:o,userList:u,limit:b,creditLimitFrequency:x,allRoles:P,allAccountingClasses:h,hasMultipleLineItems:v.length>1,clearTentativeNameForLine:f,onRemoveIssueCardLine:X,companyAddress:V,cardsSectionRef:s,openAddAddressDrawerHandler:p,depositAccounts:t.depositAccounts,customAddress:t.customAddress,userAddress:t.userAddress,activeChargeCardCount:t.activeChargeCardCount,activeDebitCardCount:t.activeDebitCardCountByDepositAccountId,maxPhysicalChargeCardPerUser:t.chargeCardConfig.creditTerm.maxPhysicalChargeCardPerUser,maxVirtualChargeCardPerUser:t.chargeCardConfig.creditTerm.maxVirtualChargeCardPerUser,maxVirtualDebitCardPerUser:t.chargeCardConfig.creditTerm.maxVirtualDebitCardPerUser,maxPhysicalDebitCardPerUser:t.chargeCardConfig.creditTerm.maxPhysicalDebitCardPerUser,isIssuePhysicalCardEnabled:E,isIssuePhysicalDebitCardEnabled:T,isDebitCardFeatureEnabled:n,isChargeCardFeatureEnabled:j,isChargeCardSetupEnabled:m,isDebitCardSetupEnabled:d},$)),r.jsxRuntimeExports.jsxs(wr,{windowSize:i,onClick:()=>{D()},"data-testid":e.generateDataTestId("add-card-button"),children:[r.jsxRuntimeExports.jsx(Er,{}),r.jsxRuntimeExports.jsx(Lr,{windowSize:i,children:R.addCard})]})]})},$r=l.div`
+  display: flex;
+  flex-direction: column;
+`,wr=l.div`
+  padding: ${t=>`${me.addCardButtonPaddingTopBottom.valuePx(t.windowSize)} ${me.addCardButtonPaddingLeftRight.valuePx(t.windowSize)}`};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid
+    ${t=>t.hasError===!0?e.Colors.important:t.theme.colors.grey1};
+  border-radius: ${e.Space.sp2};
+  color: ${t=>t.hasError===!0?e.Colors.important:t.theme.colors.primary};
+  cursor: pointer;
+  &:hover {
+    border: 1px solid
+      ${t=>t.hasError===!0?e.Colors.important:t.theme.colors.primary};
+  }
+  margin-bottom: ${t=>me.addCardButtonMarginBottom.valuePx(t.windowSize)};
+  margin-top: ${t=>me.addCardButtonMarginTop.valuePx(t.windowSize)};
+`,Lr=l(e.StyledText)`
+  ${t=>`${Cr.title.style(t.windowSize)}`};
+  color: inherit;
+`,Er=l(e.SvgAddRound)`
+  margin-right: ${e.Space.sp2};
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+`,Tr="user",Ue="addressType",Be="physicalCard",Me="virtualCard",De="lineInfo",Ne="issueCardDetailPage",Pr=100,ve=t=>`${t}_form`,{common:Q,spendManagement:{chargeCard:{issueCard:he}}}=e.appLocale.getLocalizedStrings(),Je=t=>t!=null?{amount:t,currencyCode:Q.currency.currencyCode,currencySymbol:Q.currency.currencySymbol}:void 0,ke=(t,a=!1)=>{const o={userIds:t.users.selectedUsers.map(u=>u.userId),cardName:t.cardName,amount:Je(t.amount),frequency:t.frequency.selectedOption};return a?{...o,connectedAccountId:t.connectedAccount.selectedOption}:o},Ve=(t,a=!1)=>{const o={userId:t.user.selectedUser,cardName:t.cardName,amount:Je(t.amount),frequency:t.frequency.selectedOption,addressType:t.addressType,addressId:t.addressId};return a?{...o,connectedAccountId:t.connectedAccount.selectedOption}:o},re={containerPaddingLeft:new e.ResponsiveSized(e.sp[4],e.sp[6],e.sp[8]),containerPaddingRight:new e.ResponsiveSized(e.sp[4],e.sp[6],e.sp[8]),navbarHeight:new e.ResponsiveSized(44,e.sp[9]),navBarContainerPaddingXaxis:new e.ResponsiveSized(10,e.sp[4]),closeIconMarginRight:new e.ResponsiveSized(e.sp[4],e.sp[8]),rightSectionWidth:new e.ResponsiveSized(e.sp[12],58),footerTopPadding:new e.ResponsiveSized(e.sp[3],10)},Ir={title:new e.ResponsiveSizedStyle("standardMedium","largeSemiBold")},zr=({issueChargeCards:t,cardHolderCandidates:a,userList:o,companyName:u,allRoles:b,allAccountingClasses:x,isIssuePhysicalCardEnabled:P,isIssuePhysicalDebitCardEnabled:h,isDebitCardFeatureEnabled:E,isChargeCardFeatureEnabled:T,isDebitCardSetupEnabled:n,isChargeCardSetupEnabled:j,signedInUser:m,defaultCardType:d,onSaveChangesToLocalStore:W,onIssueCardClick:B,onDismissClick:f,resetCustomAddressByLineID:V,handleZeniLogoClick:k,openAddAddressDrawerHandler:s,clearTentativeNameForLine:p})=>{const{chargeCardConfig:{creditLimitFrequency:S},creditAccount:{limit:I},companyAddress:y}=t,w=e.useWindowSizeContext(),v=_.useRef(null),H=_.useRef(null),[D,X]=_.useState(!0),[i,R]=_.useState(!0),g=_.useRef(null),$=_.useRef(null),[M,de]=_.useState(0),[ge,Ye]=_.useState(0),[ce,Ke]=_.useState(0),[Qe,et]=_.useState(0),[tt,rt]=_.useState(t.localData);_.useEffect(()=>{const C=new IntersectionObserver(F=>{F.forEach(ae=>{ae.target===v.current&&X(ae.isIntersecting),ae.target===H.current&&R(ae.isIntersecting)})},{threshold:.1}),L=v.current,z=H.current;return L&&C.observe(L),z&&C.observe(z),()=>{L&&C.unobserve(L),z&&C.unobserve(z)}},[]);const oe=r.useForm({mode:"all",reValidateMode:"onChange",defaultValues:_.useMemo(()=>qe(t.localData,a,S,o,t.depositAccounts,T,E,j,n,y,d),[t,a,S,o,T,E,j,n,y,d]),values:_.useMemo(()=>qe(t.localData,a,S,o,t.depositAccounts,T,E,j,n,y,d),[t.localData,t.depositAccounts,a,S,o,T,E,j,n,y,d])}),{isValid:at}=oe.formState,Ce=C=>C.map(L=>({lineId:L.lineId,chargeCardType:L.chargeCardType,creditCard:{cardType:L.creditCard.cardType,virtualCard:ke(L.creditCard[Me]),physicalCard:Ve(L.creditCard[Be])},debitCard:{cardType:L.debitCard.cardType,virtualCard:ke(L.debitCard[Me],!0),physicalCard:Ve(L.debitCard[Be],!0)}})),st=async(C,L)=>{if(C!=null){const{lineInfo:z}=L,F=Number(C.split(".")[1]);if(C.includes("cardName")||C.includes("amount"))return;if(C.includes("physicalCard.user")){const se=we(C.split(".")[2]);z[F][se].physicalCard.addressType=void 0,z[F].creditCard.physicalCard.addressId=void 0;const ie=z[F].lineId;t.customAddress[ie]?.addressId!=null&&V(ie,se)}if(C.includes("physicalCard.addressType")){const se=we(C.split(".")[2]),ie=z[F][se].physicalCard;if(ie[Ue]==="card_holder_personal_address"){const fe=ie[Tr].selectedUser;if(fe!=null){const nt=t.userAddress[fe];z[F][se].physicalCard.addressId=nt.addressId}}else ie[Ue]==="company_address"&&(z[F][se].physicalCard.addressId=y?.addressId)}const ae=Ce(z);W(ae)}};_.useEffect(()=>{const C=oe.watch((L,{name:z})=>{z!=null&&L!=null&&r.defer(()=>st(z,L))});return()=>{C.unsubscribe()}});const it=oe.handleSubmit(()=>{if(at){const{lineInfo:C}=oe.getValues(),L=Ce(C);W(L),B()}}),lt=t.issueCardStatus.error?.message??Q.strings.empty,dt=t.issueCardStatus.error?.title??Q.strings.empty,be=_.useCallback(()=>{de($.current?.scrollTop??0),Math.abs(M-ge)>Pr&&Ye(M),document.querySelectorAll(".cards-item").forEach((L,z)=>{const F=L.getBoundingClientRect();F.top>=0&&F.bottom<=window.innerHeight&&Ke(z),F.top<window.innerHeight&&F.bottom>0&&et(z)})},[M,ge]);_.useEffect(()=>{const C=$.current;return C?.addEventListener("scroll",be),()=>{C?.removeEventListener("scroll",be)}},[be,$]);const je=t.localData;_.useEffect(()=>{if(ce!==null){const C=Math.max(0,ce-2),L=ce+1,z=je.slice(C,L);rt(z)}},[ce,Qe,je]);const ot=((C,L,z)=>C.length===0?[{cardId:"1",cardType:Xe(T,L,j,n,z)==="debit_card"?"business_virtual_debit_card":"business_virtual_credit_card",cardUUID:"1",limit:{amount:0,currencyCode:Q.currency.currencyCode,currencySymbol:Q.currency.currencySymbol}}]:C.map(F=>({cardId:F.lineId,cardType:F.chargeCardType==="credit_card"?F.creditCard.cardType:F.debitCard.cardType,cardUUID:F.lineId,limit:{amount:0,currencyCode:Q.currency.currencyCode,currencySymbol:Q.currency.currencySymbol}})))(tt,E,d),$e=!(D&&i)||w==="small";return r.jsxRuntimeExports.jsxs(_r,{windowSize:w,children:[w!=="small"?r.jsxRuntimeExports.jsxs(Ar,{children:[r.jsxRuntimeExports.jsxs(qr,{children:[r.jsxRuntimeExports.jsx(Hr,{onClick:k,"data-testid":e.generateDataTestId("issue-card-nav-bar-zeni-logo")}),r.jsxRuntimeExports.jsxs(Gr,{showContent:m?.userEmailDomain==="zeni.ai",children:[r.jsxRuntimeExports.jsx(Zr,{}),r.jsxRuntimeExports.jsx(Dr,{children:u})]})]}),r.jsxRuntimeExports.jsx(e.MemoAnimatedCardStack,{cardArrProp:ot,insertFromTop:M<ge,containerScale:1.2})]}):null,r.jsxRuntimeExports.jsxs(Fr,{windowSize:w,children:[r.jsxRuntimeExports.jsxs(Br,{windowSize:w,shouldShowTitle:$e,children:[$e&&r.jsxRuntimeExports.jsx(Ur,{windowSize:w,children:he.title}),r.jsxRuntimeExports.jsx(Mr,{windowSize:w,onClick:f,"data-testid":e.generateDataTestId("issue-card-nav-bar-close")})]}),r.jsxRuntimeExports.jsxs(Or,{windowSize:w,ref:$,children:[w!=="small"?r.jsxRuntimeExports.jsx(Nr,{ref:v,children:he.title}):null,t.issueCardStatus.fetchState==="Error"?r.jsxRuntimeExports.jsxs(kr,{children:[r.jsxRuntimeExports.jsx(Wr,{}),r.jsxRuntimeExports.jsxs(Vr,{children:[r.jsxRuntimeExports.jsx(We,{style:{fontWeight:e.FontWeight.medium},children:dt}),r.jsxRuntimeExports.jsx(We,{children:lt})]})]}):null,r.jsxRuntimeExports.jsx(r.FormProvider,{...oe,children:r.jsxRuntimeExports.jsx("form",{id:ve(Ne),onSubmit:it,children:r.jsxRuntimeExports.jsx(jr,{issueChargeCards:t,issueCardSectionId:De,cardHolderCandidates:a,userList:o,limit:I,creditLimitFrequency:S,allRoles:b,allAccountingClasses:x,getInitialLineFormData:Re,clearTentativeNameForLine:p,companyAddress:y,containerRef:$,cardsSectionRef:g,openAddAddressDrawerHandler:s,isIssuePhysicalCardEnabled:P,isIssuePhysicalDebitCardEnabled:h,isDebitCardFeatureEnabled:E,isChargeCardFeatureEnabled:T,isChargeCardSetupEnabled:j,isDebitCardSetupEnabled:n,defaultCardType:d})})})]}),r.jsxRuntimeExports.jsx(e.Footer,{style:{zIndex:1,padding:re.footerTopPadding.valuePx(w)},formId:ve(Ne),helperStyle:{paddingTop:e.Space.sp0,paddingBottom:e.Space.sp0},primaryBtn:{label:he.primaryBtnText,isLoading:t.issueCardStatus.fetchState==="In-Progress",style:{minWidth:110}},cancelBtn:{label:he.secondaryBtnText,onClick:f,style:{minWidth:110}},separatorStyle:{marginRight:e.Space.sp4}})]})]})},Or=l.div`
+  padding-left: ${t=>re.containerPaddingLeft.valuePx(t.windowSize)};
+  padding-right: ${t=>re.containerPaddingRight.valuePx(t.windowSize)};
+  height: 100%;
+  overflow-y: auto;
+`,Ar=l.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  width: 42%;
+  background-color: ${t=>t.theme.colors.background};
+  margin-top: unset;
+`,Fr=l.div`
+  background-color: ${t=>t.theme.colors.grey4};
+  display: flex;
+  flex-direction: column;
+  width: ${t=>re.rightSectionWidth.valuePercentage(t.windowSize)};
+  overflow: auto;
+  box-shadow: ${t=>`${e.Space.sp0} 2px ${e.Space.sp1} ${t.theme.colors.dropShadowNormal}`};
+`,_r=l.div`
+  display: flex;
+  height: 100vh;
+  flex-direction: row;
+  width: 100vw;
+  overflow-y: scroll;
+`,Ur=l(e.StyledText)`
+  ${t=>`${Ir.title.style(t.windowSize)}`};
+  color: ${t=>t.theme.colors.primary};
+  padding-left: ${t=>re.containerPaddingLeft.valuePx(t.windowSize)};
+`,Br=l.div`
+  position: sticky;
+  display: flex;
+  justify-content: ${t=>t.shouldShowTitle?"space-between":"flex-end"};
+  align-items: center;
+  width: 100%;
+  min-height: ${t=>re.navbarHeight.valuePx(t.windowSize)};
+  top: ${e.Space.sp0};
+  z-index: 2;
+  background-color: ${t=>t.theme.colors.grey4};
+`,Mr=l(e.SvgClose)`
+  cursor: pointer;
+  color: ${t=>t.theme.colors.hero};
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  min-height: ${e.Space.sp4};
+  margin-right: ${t=>re.closeIconMarginRight.valuePx(t.windowSize)};
+  &:hover {
+    color: ${t=>t.theme.colors.primary};
+  }
+  padding: 0;
+`,Nr=l(e.H5Regular)`
+  color: ${t=>t.theme.colors.primary};
+  margin-top: ${e.Space.sp3};
+  margin-bottom: ${e.Space.sp3};
+`,kr=l.div`
+  background-color: ${e.Colors.alertLight};
+  border: 1px solid ${e.Colors.brandColorGoldDark};
+  border-radius: ${e.Space.sp2};
+  display: flex;
+  gap: ${e.Space.sp2};
+  padding: ${e.Space.sp3} ${e.Space.sp4};
+  margin-bottom: ${e.Space.sp2};
+`,Vr=l.div`
+  display: flex;
+  flex-direction: column;
+`,We=l(e.StandardMedium)`
+  color: ${e.Colors.brandColorGoldDark};
+`,Wr=l(e.SvgHighImportanceFilled)`
+  min-width: ${e.Space.sp4};
+  min-height: ${e.Space.sp4};
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  color: ${e.Colors.brandColorGoldDark};
+`,qr=l.div`
+  margin-bottom: ${e.Space.sp3};
+  margin-top: ${e.Space.sp3};
+  margin-left: ${e.Space.sp8};
+  position: relative;
+  display: flex;
+  align-items: center;
+`,Hr=l(e.SvgZeniIconOnly)`
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  cursor: pointer;
+  color: ${t=>t.theme.colors.brandColorJade};
+`,Gr=l.div`
+  display: ${t=>t.showContent?"flex":"none"};
+  align-items: center;
+`,Zr=l.div`
+  width: 1px;
+  height: ${e.Space.sp3};
+  margin: ${e.Space.sp0} ${e.Space.sp3};
+  background-color: ${t=>t.theme.colors.hero};
+`,Dr=l(e.LargeSemiBold)`
+  color: ${t=>t.theme.colors.primary};
+`,Jr=(t,a,o,u,b,x,P)=>({lineIndex:a,lineId:t.lineId??String(a+1),chargeCardType:t.chargeCardType,creditCard:{cardType:t.creditCard.cardType,virtualCard:{cardName:t.creditCard.virtualCard?.cardName??"",amount:t.creditCard.virtualCard?.amount?.amount??void 0,users:{allUsers:o,selectedUsers:o.filter(h=>t.creditCard.virtualCard?.userIds.includes(h.userId)),allNonUsers:[],selectedNonUsers:[]},frequency:{allOptions:u.map(h=>({label:h.name,value:h.code})),selectedOption:t.creditCard.virtualCard?.frequency}},physicalCard:{cardName:t.creditCard.physicalCard?.cardName??"",amount:t.creditCard.physicalCard?.amount?.amount??void 0,user:{allUsers:b,selectedUser:t.creditCard.physicalCard.userId},frequency:{allOptions:u.map(h=>({label:h.name,value:h.code})),selectedOption:t.creditCard.physicalCard?.frequency},addressType:t.creditCard.physicalCard?.addressType,addressId:t.creditCard.physicalCard?.addressId??P?.addressId}},debitCard:{cardType:t.debitCard.cardType,virtualCard:{cardName:t.debitCard.virtualCard?.cardName??"",amount:t.debitCard.virtualCard?.amount?.amount??void 0,users:{allUsers:o,selectedUsers:o.filter(h=>t.debitCard.virtualCard?.userIds.includes(h.userId)),allNonUsers:[],selectedNonUsers:[]},connectedAccount:{allOptions:x.map(h=>({label:h.accountName,value:h.id})),selectedOption:t.debitCard.virtualCard.connectedAccountId},frequency:{allOptions:u.map(h=>({label:h.name,value:h.code})),selectedOption:t.debitCard.virtualCard?.frequency}},physicalCard:{cardName:t.debitCard.physicalCard?.cardName??"",amount:t.debitCard.physicalCard?.amount?.amount??void 0,user:{allUsers:b,selectedUser:t.debitCard.physicalCard.userId},connectedAccount:{allOptions:x.map(h=>({label:h.accountName,value:h.id})),selectedOption:t.debitCard.physicalCard.connectedAccountId},frequency:{allOptions:u.map(h=>({label:h.name,value:h.code})),selectedOption:t.debitCard.physicalCard?.frequency},addressType:t.debitCard.physicalCard?.addressType,addressId:t.debitCard.physicalCard?.addressId??P?.addressId}}}),Re=(t,a,o,u,b,x,P,h,E,T,n,j)=>({lineIndex:t,lineId:a,chargeCardType:Xe(P,h,E,T,j),creditCard:{cardType:"business_virtual_credit_card",physicalCard:{cardName:"",amount:void 0,user:{allUsers:b,selectedUser:void 0},frequency:{allOptions:u.map(m=>({label:m.name,value:m.code})),selectedOption:"monthly"},addressType:void 0,addressId:n?.addressId},virtualCard:{cardName:"",amount:void 0,users:{allUsers:o,selectedUsers:[],allNonUsers:[],selectedNonUsers:[]},frequency:{allOptions:u.map(m=>({label:m.name,value:m.code})),selectedOption:"monthly"}}},debitCard:{cardType:"business_virtual_debit_card",physicalCard:{cardName:"",amount:void 0,user:{allUsers:b,selectedUser:void 0},frequency:{allOptions:u.map(m=>({label:m.name,value:m.code})),selectedOption:"monthly"},addressType:void 0,addressId:n?.addressId,connectedAccount:{allOptions:x.map(m=>({label:m.accountName,value:m.id})),selectedOption:x.length===1?x[0].id:void 0}},virtualCard:{cardName:"",amount:void 0,users:{allUsers:o,selectedUsers:[],allNonUsers:[],selectedNonUsers:[]},frequency:{allOptions:u.map(m=>({label:m.name,value:m.code})),selectedOption:"monthly"},connectedAccount:{allOptions:x.map(m=>({label:m.accountName,value:m.id})),selectedOption:x.length===1?x[0].id:void 0}}}}),Xe=(t,a,o,u,b)=>{if(b!=null){if(a&&u&&b==="debitCard")return"debit_card";if(t&&o&&b==="creditCard")return"credit_card"}return a&&u&&(!t||!o)?"debit_card":"credit_card"},qe=(t,a,o,u,b,x,P,h,E,T,n)=>{const j=[];return Object.values(t).forEach((m,d)=>{m?.lineId!=null&&j.push(Jr(m,d,a,o,u,b,T))}),j.length===0&&j.push(Re(0,"1",a,o,u,b,x,P,h,E,T,n)),{[De]:j}};exports.default=zr;exports.getInitialLineFormData=Re;exports.uniqueFormName=ve;