@zeniai/web-components 3.17.6 → 3.17.7

package/dist/CreditCardPaymentDrawerPage-zh7UEUpY.cjs

@@ -0,0 +1,224 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./vendor-.pnpm-D0ILHvHB.cjs"),o=require("@emotion/styled"),d=require("react"),e=require("./index-DxfP_W_n.cjs"),Fe=require("react-plaid-link"),P=require("@zeniai/client-epic-state"),ze=require("./LabeledControlledCheckBoxField-DpjBYqHk.cjs"),K={largeLabelWidth:new e.ResponsiveSized(120,120,160),navBarContainerPaddingXaxis:new e.ResponsiveSized(10,19),containerPaddingLeft:new e.ResponsiveSized(e.sp[3],e.sp[6],e.sp[8]),containerPaddingRight:new e.ResponsiveSized(e.sp[3],e.sp[6],e.sp[8]),reviewContentWrapperPaddingBottom:new e.ResponsiveSized(e.sp[5],e.sp[8])},oe={pageTitle:new e.ResponsiveSizedStyle("h6Regular","h5Regular"),integerAmountInput:new e.ResponsiveSizedStyle("h5Regular","h2Regular"),decimalAmountInput:new e.ResponsiveSizedStyle("largeSemiBold","h5Medium")},{dateFormat:{visual:{MMMDCommaYYYYformat:Be}},common:{edit:Me,labels:de,currency:pe,navBar:{back:_e}},spendManagement:{zeniAccounts:{zeniAccountList:{transferDrawer:Oe}},chargeCard:{payEarly:Z}}}=e.appLocale.getLocalizedStrings(),Ne=({paymentDetails:t,isCashbackInfoFetchStateCompleted:r,isCreditCardInfoFetchStateCompleted:g,isDebitCardInfoFetchStateCompleted:n,controllerEmails:x,productInformation:s,cashbackInformation:u,paymentSourceInformation:j,creditAccountInformation:h,debitAccountInformation:m,setShowReviewContent:y,onTransferClick:S,isCompleteOutstandingBalanceBeingPaid:w})=>{const c=e.useWindowSizeContext(),T=a.useTheme(),A=e.useToolkitContext().analytics,[z,v]=d.useState(!1);d.useEffect(()=>{t.error!=null?v(!0):v(!1)},[t.error]);const D=K.largeLabelWidth.value(c);return a.jsxRuntimeExports.jsxs(a.jsxRuntimeExports.Fragment,{children:[a.jsxRuntimeExports.jsxs(Ke,{windowSize:c,children:[a.jsxRuntimeExports.jsx(ot,{windowSize:c,children:a.jsxRuntimeExports.jsx(e.Tooltip,{title:_e,enterTouchDelay:600,placement:"bottom",children:a.jsxRuntimeExports.jsx(nt,{"data-testid":e.generateDataTestId("nav-bar-back-credit-card-payment-review"),onClick:()=>{r&&g&&n&&u!=null&&A.trackCardsPayEarlyFormClick(x,s,u,"Back",t.chargeCardRepaymentDetailLocalData.isAutoRepayment,{paymentAmount:t.chargeCardRepaymentDetailLocalData.amount.amount,paymentAccountName:t.chargeCardRepaymentDetailLocalData.transferFrom?.label,paymentAccountType:t.chargeCardRepaymentDetailLocalData.transferFrom?.accType,paymentAccountLastFourDigits:t.chargeCardRepaymentDetailLocalData.transferFrom?.accountLast4,paymentCompleteEta:void 0,paymentInitiatedDate:void 0},j,h,m),y(!1)}})})}),a.jsxRuntimeExports.jsx(rt,{windowSize:c,children:Oe.reviewAndConfirm}),a.jsxRuntimeExports.jsx(Ie,{children:a.jsxRuntimeExports.jsx(e.AmountBalance,{amount:t.chargeCardRepaymentDetailLocalData.amount,integerStyles:oe.integerAmountInput.styleObject(c),decimalStyles:oe.decimalAmountInput.styleObject(c)})}),z?a.jsxRuntimeExports.jsx(Ze,{children:a.jsxRuntimeExports.jsxs(qe,{children:[a.jsxRuntimeExports.jsxs(Xe,{children:[a.jsxRuntimeExports.jsx(Qe,{}),a.jsxRuntimeExports.jsxs(He,{children:[a.jsxRuntimeExports.jsx(Ue,{children:t.error?.title}),a.jsxRuntimeExports.jsx(Ge,{children:t.error?.message})]})]}),a.jsxRuntimeExports.jsx(Je,{children:a.jsxRuntimeExports.jsx(et,{"data-testid":e.generateDataTestId("close-error-credit-card-payment-review"),onClick:()=>{v(!1)},style:{width:e.Space.sp3,height:e.Space.sp3,color:e.Colors.heroLight}})})]})}):null,a.jsxRuntimeExports.jsx(at,{windowSize:c,children:a.jsxRuntimeExports.jsxs(Ye,{children:[a.jsxRuntimeExports.jsx(e.LabeledReadOnlyTextField,{label:{label:de.transferFrom,width:D},text:a.jsxRuntimeExports.jsxs(ue,{windowSize:c,children:[we(t.transferFromAccounts,t.chargeCardRepaymentDetailLocalData.transferFrom?.id??"",!0),a.jsxRuntimeExports.jsx(Ve,{windowSize:c,children:t.chargeCardRepaymentDetailLocalData.transferFrom?.label})]}),style:{width:"auto"}}),a.jsxRuntimeExports.jsx(tt,{}),a.jsxRuntimeExports.jsx(e.LabeledReadOnlyTextField,{label:{label:de.amount,width:D},showAdditionalInfoLabel:!0,additionalInfoLabel:`${w?Z.creditLimitReset:Z.creditLimitUpdate} ${P.zeniDate(P.getNextNthWorkingDay(P.dateNow().toDate(),[0,6],3).toDateString()).format(Be)} ${Z.business23Days}`,additionalInfoLabelStyles:{color:T.colors.hero,...e.textStyles.smallRegular.cssObject},text:a.jsxRuntimeExports.jsx(ue,{windowSize:c,children:e.amountToString("0,0.[00]",{amount:t.chargeCardRepaymentDetailLocalData.amount.amount,currencyCode:pe.currencyCode,currencySymbol:pe.currencySymbol})}),style:{width:"auto"}})]})})]}),a.jsxRuntimeExports.jsx(e.Footer,{style:{zIndex:4,paddingTop:e.Space.sp3,paddingBottom:e.Space.sp0},helperText:Z.byClickingPayNowIAuthorizeZeniToInitiateThePayment,helperStyle:{padding:`${e.Space.sp0} ${e.Space.sp0} ${e.Space.sp3} ${e.Space.sp0}`},cancelBtn:{label:Me,onClick:()=>{r&&g&&n&&u!=null&&A.trackCardsPayEarlyFormClick(x,s,u,"Edit",t.chargeCardRepaymentDetailLocalData.isAutoRepayment,{paymentAmount:t.chargeCardRepaymentDetailLocalData.amount.amount,paymentAccountName:t.chargeCardRepaymentDetailLocalData.transferFrom?.label,paymentAccountType:t.chargeCardRepaymentDetailLocalData.transferFrom?.accType,paymentAccountLastFourDigits:t.chargeCardRepaymentDetailLocalData.transferFrom?.accountLast4,paymentCompleteEta:void 0,paymentInitiatedDate:void 0},j,h,m),y(!1)},style:{minWidth:94}},primaryBtn:{label:Z.payNow,onClick:S,isLoading:t.updateStatus==="In-Progress",style:{minWidth:94}}})]})},we=(t,r,g)=>{if(r==="")return a.jsxRuntimeExports.jsx(pt,{});const n=t.find(s=>s.id===r),x=t.findIndex(s=>s.id===r);if(n!=null){if(n.accType==="depositAccount")return a.jsxRuntimeExports.jsx(ct,{isOptionSelected:g,children:a.jsxRuntimeExports.jsx(dt,{color:e.getAccountsColorMappingFromIndex(x)})});if(n.accType==="paymentAccount")return n.logo!==void 0&&(n.logo.base64||n.logo.url)?a.jsxRuntimeExports.jsx(it,{src:We(n.logo),isOptionSelected:g,loading:"lazy"}):a.jsxRuntimeExports.jsx(st,{isOptionSelected:g,children:a.jsxRuntimeExports.jsx(lt,{})})}return null},We=t=>t.base64!==void 0?`${e.JPEG_IMAGE_BASE_64}${t.base64.toString()}`:t.url!==void 0?t.url.toString():"",Ie=o(e.H2Regular)`
+  color: ${t=>t.theme.colors.primary};
+  padding-top: ${e.Space.sp3};
+`,Ve=o.div`
+  display: flex;
+  flex-direction: ${t=>t.windowSize==="small"?"column":"row"};
+`,ue=o(e.StandardRegular)`
+  display: flex;
+  align-items: ${t=>t.windowSize==="small"?"start":"center"};
+`,Ye=o.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${t=>t.theme.colors.grey5};
+  border: 1px solid ${t=>t.theme.colors.grey3};
+  box-shadow: ${t=>`${e.Space.sp0} 2px ${e.Space.sp1} ${t.theme.colors.dropShadowNormal}`};
+  border-radius: ${e.Space.sp2};
+`,qe=o.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  padding: ${e.Space.sp3} ${e.Space.sp4};
+  background-color: ${e.Colors.importantLight};
+  border-radius: ${e.Space.sp2};
+`,He=o.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: ${e.Space.sp2};
+`,Ue=o(e.StandardMedium)`
+  color: ${e.Colors.important};
+`,Ge=o(e.StandardRegular)`
+  color: ${e.Colors.important};
+`,Ze=o.div`
+  margin-top: ${e.Space.sp3};
+  display: flex;
+  background-color: ${t=>t.theme.colors.grey5};
+  justify-content: space-between;
+  padding: ${e.Space.sp3} ${e.Space.sp4};
+  border: ${t=>`1px solid ${t.theme.colors.grey3}`};
+  border-radius: ${e.Space.sp2};
+  box-shadow: ${t=>`${e.Space.sp0} 2px 2px ${t.theme.colors.dropShadowNormal}`};
+`,Ke=o.div`
+  height: auto;
+  padding-left: ${t=>`${K.containerPaddingLeft.valuePx(t.windowSize)}`};
+  padding-right: ${t=>`${K.containerPaddingRight.valuePx(t.windowSize)}`};
+  margin-bottom: auto;
+`,Xe=o.div`
+  display: flex;
+  align-items: flex-start;
+`,Je=o.div``,Qe=o(e.SvgAlertRound)`
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  color: ${e.Colors.important};
+`,et=o(e.SvgClose)`
+  cursor: pointer;
+  color: ${t=>t.theme.colors.hero};
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  min-height: ${e.Space.sp4};
+  &:hover {
+    color: ${t=>t.theme.colors.primary};
+  }
+`,tt=o.div`
+  display: flex;
+  flex: 1;
+  background-color: ${t=>t.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`,at=o.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: ${e.Space.sp3};
+  padding-bottom: ${t=>`${K.reviewContentWrapperPaddingBottom.valuePx(t.windowSize)}`};
+`,nt=o(e.SvgArrowLeft)`
+  cursor: pointer;
+  color: ${t=>t.theme.colors.hero};
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  min-height: ${e.Space.sp4};
+  &:hover {
+    color: ${t=>t.theme.colors.primary};
+  }
+`,ot=o.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  top: ${e.Space.sp0};
+  padding: ${t=>`${K.navBarContainerPaddingXaxis.valuePx(t.windowSize)} ${e.Space.sp0}`};
+  z-index: 2;
+  background-color: ${t=>t.theme.colors.grey4};
+`,rt=o(e.H6Regular)`
+  ${t=>`${oe.pageTitle.style(t.windowSize)}`};
+  color: ${t=>t.theme.colors.primary};
+  padding: ${e.Space.sp3} ${e.Space.sp0} ${e.Space.sp3} ${e.Space.sp0};
+`,it=o.img`
+  display: flex;
+  width: ${t=>t.isOptionSelected?e.Space.sp4:e.Space.sp5};
+  height: ${t=>t.isOptionSelected?e.Space.sp4:e.Space.sp5};
+  min-width: ${t=>t.isOptionSelected?e.Space.sp4:e.Space.sp5};
+  margin-right: ${e.Space.sp2};
+`,st=o.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};
+`,lt=o(e.SvgExternalAccount)`
+  min-width: inherit;
+  width: inherit;
+  height: inherit;
+  margin-right: ${e.Space.sp2};
+`,ct=o.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};
+`,dt=o(e.SvgZeniBrandCheckingAcc)`
+  min-width: inherit;
+  width: inherit;
+  height: inherit;
+  margin-right: ${e.Space.sp2};
+`,pt=o(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};
+`,{common:ne,spendManagement:{zeniAccounts:{zeniAccountList:ut},billPay:{insufficientFunds:mt},chargeCard:{payEarly:I}},commonSetUp:{setUp:{accountsPlg:Q}}}=e.appLocale.getLocalizedStrings(),ve="amount",gt="withdrawFrom",B="paymentDetails",Ce="creditCardPaymentPage",ee=(t,r)=>`${t}.${r}`,$e=t=>`${t}_form`,f={largeLabelWidth:new e.ResponsiveSized(120,120,160),labelMarginRight:new e.ResponsiveSized(e.sp[3],e.sp[3]),labelMarginLeftPicker:new e.ResponsiveSized(e.sp[3],e.sp[4]),labelMarginRightPicker:new e.ResponsiveSized(e.sp[3],e.sp[4]),labelMarginTopPicker:new e.ResponsiveSized(e.sp[2],e.sp[2]),labeledFieldPaddingLeft:new e.ResponsiveSized(e.sp[2],e.sp[0]),labeledFieldPaddingRight:new e.ResponsiveSized(e.sp[2],e.sp[2]),labeledFieldPaddingTop:new e.ResponsiveSized(e.sp[2],e.sp[2]),labeledFieldPaddingBottom:new e.ResponsiveSized(e.sp[2],e.sp[2]),infoLabelPaddingRight:new e.ResponsiveSized(e.sp[0],e.sp[3]),infoLabelMarginTop:new e.ResponsiveSized(e.sp[1],e.sp[0]),checkBoxTop:new e.ResponsiveSized(e.sp[1],e.sp[0])},me={integerAmountInput:new e.ResponsiveSizedStyle("h5Regular","h2Regular"),decimalAmountInput:new e.ResponsiveSizedStyle("largeSemiBold","h5Medium")};function xt({autoPayThreshold:t,plaidConnectionDetails:r,maxInsuredAmount:g,paymentDetails:n,lowBalanceAdditionalInfo:x,paymentAccount:s,isAccountsEnabled:u,onSaveChangesToLocalStore:j,onUpdatePaymentAccountStatus:h,onEstablishConnectionClick:m,onEstablishConnectionSuccess:y,onFetchLinkTokenClick:S,setShowReviewLoading:w,onSignUpAccountClick:c,onMoveMoneyClick:T,isCashbackInfoFetchStateCompleted:M,isCreditCardInfoFetchStateCompleted:A,isDebitCardInfoFetchStateCompleted:z,controllerEmails:v,productInformation:D,cashbackInformation:_,paymentSourceInformation:Y,creditAccountInformation:q,debitAccountInformation:H}){const l=e.useWindowSizeContext(),te=a.useTheme(),R=f.largeLabelWidth.value(l),U=e.useToolkitContext().analytics,G=d.useRef(null),[k,F]=d.useState(!1),[L,O]=d.useState(void 0),$=r.link_account,J=r.update_account,C=L==="update_account"?J:$,[N,re]=d.useState(C.linkToken??null),ie=e.usePrevious($.updateStatus.fetchState),W=a.useForm({mode:"all",reValidateMode:"onBlur",defaultValues:d.useMemo(()=>ge(n),[n]),values:d.useMemo(()=>ge(n),[n])}),se=s?.isLoginRequired??!1,b=s?.providerVerificationStatus?.code,le=e.usePrevious(J.updateStatus.fetchState),Le=d.useCallback((i,p)=>{const E=p.accounts.find(ke=>ke.id===s?.providerAccountId)??p.accounts[0];s?.paymentAccountId!=null&&L==="update_account"&&E?.verification_status!=null&&!se?h(E?.verification_status,s.paymentAccountId,"update_account"):m?.(i,L),O(void 0),F(!1)},[s?.paymentAccountId,s?.providerAccountId,L,se,h,m]),be=d.useCallback((i,p)=>{i!=null&&(i.error_code==="TOO_MANY_VERIFICATION_ATTEMPTS"&&s?.paymentAccountId!=null&&h("verification_failed",s.paymentAccountId,"update_account"),console.log("Plaid Connection Error",i,p)),O(void 0),F(!1)},[s?.paymentAccountId,h]),{open:ae,ready:ce}=Fe.usePlaidLink({token:N,onSuccess:Le,onExit:be});d.useEffect(()=>{(ie==="In-Progress"&&$.updateStatus.fetchState==="Completed"||le==="In-Progress"&&J.updateStatus.fetchState==="Completed")&&(P.isVerifiedPaymentAccountProviderStatusCode(b??"")||(S?.("link_account"),y()))},[$.updateStatus.fetchState,y,S,ie,le,J.updateStatus.fetchState,b]),d.useEffect(()=>{(P.isVerifiedStatusCode(b??"")||b==="verification_failed")&&!k&&L!=null&&C.linkToken===N&&C.fetchStatus.fetchState==="Completed"&&ce&&F(!0)},[ce,N,C.fetchStatus.fetchState,C.linkToken,b,L,k]),d.useEffect(()=>{C.fetchStatus.fetchState==="Completed"&&C.linkToken!=null&&C.linkToken!==N&&re(C.linkToken)},[C.fetchStatus.fetchState,C.linkToken,N]),d.useEffect(()=>{k&&ae()},[k,ae]),d.useEffect(()=>{(b==null||b==="verification_failed"||b==="verification_expired"||P.isVerifiedStatusCode(b))&&(P.zeniDate(new Date().toISOString()).isAfter($.expiration)||$.linkToken==null)&&S?.("link_account")},[]);const{isValid:Ee}=W.formState,Pe=async(i,p)=>{if(i!=null){if(i.includes("amount"))return;const E=xe(p,n.transferFromAccounts,n.chargeCardRepaymentDetailLocalData.idempotencyKey);j(E)}},Te=i=>{if(x!=null)return x;const p=n.transferFromAccounts.find(E=>E.id===i);return p?.accountBalance?.available!=null&&P.checkIfLowBalance(n.chargeCardRepaymentDetailLocalData.amount,p?.accountBalance?.available)?mt.addMoney:""};d.useEffect(()=>{const i=W.watch((p,{name:E})=>{E!=null&&p!=null&&a.defer(()=>Pe(E,p))});return()=>{i.unsubscribe()}});const Ae=W.watch("paymentDetails.amount"),De=W.handleSubmit(()=>{if(Ee){const i=W.getValues(),p=xe(i,n.transferFromAccounts,n.chargeCardRepaymentDetailLocalData.idempotencyKey);j(p),w(!0),M&&A&&z&&_!=null&&U.trackCardsPayEarlyFormClick(v,D,_,"Review",n.chargeCardRepaymentDetailLocalData.isAutoRepayment,{paymentAmount:n.chargeCardRepaymentDetailLocalData.amount.amount,paymentAccountName:n.chargeCardRepaymentDetailLocalData.transferFrom?.label,paymentAccountType:n.chargeCardRepaymentDetailLocalData.transferFrom?.accType,paymentAccountLastFourDigits:n.chargeCardRepaymentDetailLocalData.transferFrom?.accountLast4,paymentCompleteEta:void 0,paymentInitiatedDate:void 0},Y,q,H)}});return a.jsxRuntimeExports.jsxs(a.jsxRuntimeExports.Fragment,{children:[a.jsxRuntimeExports.jsx(Rt,{children:a.jsxRuntimeExports.jsx(e.AmountBalance,{amount:{amount:Ae??0,currencyCode:n.chargeCardRepaymentDetailLocalData.amount.currencyCode,currencySymbol:n.chargeCardRepaymentDetailLocalData.amount.currencySymbol},integerStyles:me.integerAmountInput.styleObject(l),decimalStyles:me.decimalAmountInput.styleObject(l)})}),a.jsxRuntimeExports.jsx(a.FormProvider,{...W,children:a.jsxRuntimeExports.jsx(ft,{id:$e(Ce),onSubmit:De,children:a.jsxRuntimeExports.jsxs(wt,{children:[a.jsxRuntimeExports.jsx(e.LabeledSingleSelectPickerField,{selectRef:G,label:{label:ne.labels.transferFrom,width:R,style:{marginLeft:f.labelMarginLeftPicker.valuePx(l),marginTop:f.labelMarginTopPicker.valuePx(l),marginRight:f.labelMarginRightPicker.valuePx(l),width:f.largeLabelWidth.value(l)}},style:{paddingTop:f.labeledFieldPaddingTop.valuePx(l),paddingBottom:f.labeledFieldPaddingBottom.valuePx(l),paddingLeft:f.labeledFieldPaddingLeft.valuePx(l),paddingRight:f.labeledFieldPaddingRight.valuePx(l),border:"none",width:"auto",display:"flex"},infoLabelStyle:{textAlign:"right",paddingRight:f.infoLabelPaddingRight.valuePx(l),marginTop:f.infoLabelMarginTop.valuePx(l),color:e.Colors.brandColorGoldDark},bottomComponent:a.jsxRuntimeExports.jsx(ze.LabeledControlledCheckBoxField,{label:{label:I.enableAutoPay.replace("__autoPayThreshold__",t.toString()),style:{textAlign:l==="small"?"end":"center",color:te.colors.primary}},style:{width:"unset",marginRight:e.Space.sp3,alignItems:l==="small"?"flex-start":"center"},checkBoxField:{name:ee(B,"enableAutoPay"),checkBoxValue:ee(B,"enableAutoPay"),defaultChecked:n.chargeCardRepaymentDetailLocalData.isAutoRepayment,style:{top:f.checkBoxTop.valuePx(l)}}}),singleSelectPickerField:{name:ee(B,gt),placeholder:e.getPlaceholderTextWithPrefix(ne.labels.transferFrom),style:{position:"relative"},capitalizeOptions:!0,isOptionRemovable:!1,showTickIcon:!1,valueToLogo:(i,p)=>we(n.transferFromAccounts,i,p),valueToSubLabels:(i,p)=>e.getSubLabels(n.transferFromAccounts,i,p,!0),defaultValue:{selectedOption:n.chargeCardRepaymentDetailLocalData.transferFrom?.id,allOptions:n.transferFromAccounts.map(i=>({label:i.label,value:i.id,isRecommended:i.accType==="depositAccount"}))},textAlignment:"right",registerOptions:{required:!0,validate:i=>i!=null&&!!i.selectedOption},showCreateOption:!0,onClickCreateOption:()=>{O("link_account"),$.linkToken==null||P.zeniDate(new Date().toISOString()).isAfter($.expiration)?S?.("link_account"):N!==$.linkToken?re($.linkToken):k?ae():F(!0)}},valueToAdditionalLabel:Te}),n?.chargeCardRepaymentDetailLocalData.transferFrom==null||n?.chargeCardRepaymentDetailLocalData.transferFrom?.accType==="paymentAccount"?a.jsxRuntimeExports.jsx(e.CreditCardPaymentPlgSection,{maxInsuredAmount:g,heading:a.jsxRuntimeExports.jsxs(ht,{windowSize:l,children:[I.earn,a.jsxRuntimeExports.jsx(St,{children:I.percentageCashback.replace("__percentage__",e.CASHBACK_PERCENTAGE_WHEN_YOU_PAY_VIA_ZENI_CHECKING)}),I.whenYouPayViaZeniChecking]}),buttonText:u?Q.switchButtonText:Q.signUpButtonText,isAccountsEnabled:u,pageName:I.creditCardPayment,onSignUpClick:c,onSwitchClick:()=>{G.current!=null&&G.current.focus()}}):n?.chargeCardRepaymentDetailLocalData.transferFrom?.accType==="depositAccount"&&n?.chargeCardRepaymentDetailLocalData.transferFrom.accountBalance!=null&&n.chargeCardRepaymentDetailLocalData.transferFrom.accountBalance.available!=null&&n.chargeCardRepaymentDetailLocalData.transferFrom.accountBalance.available.amount<n.chargeCardRepaymentDetailLocalData.amount.amount?a.jsxRuntimeExports.jsx(e.CreditCardPaymentPlgSection,{maxInsuredAmount:g,heading:Q.moveMoneyHeading,buttonText:Q.moveMoneyButtonText,isAccountsEnabled:u,pageName:I.creditCardPayment,onMoveMoneyClick:T}):a.jsxRuntimeExports.jsx(yt,{}),a.jsxRuntimeExports.jsx(e.LabeledFormattedTextField,{showAdditionalInfoLabel:!1,label:{label:ne.labels.amount,width:R},formattedTextField:{type:"number",name:ee(B,ve),defaultValue:n.chargeCardRepaymentDetailLocalData.amount.amount===0?void 0:n.chargeCardRepaymentDetailLocalData.amount.amount,placeholder:ut.transferDrawer.amountPlaceholder,returnValueType:"floatValue",prefix:"$",allowNegative:!1,isNumericString:!1,registerOptions:{required:!0,validate:i=>!!i&&i>0},autoComplete:"off",decimalSeparator:".",decimalScale:2,fixedDecimalScale:!1,thousandSeparator:!0,allowLeadingZeros:!1},style:{width:"auto",paddingLeft:f.labeledFieldPaddingLeft.valuePx(l)}})]})})})]})}const ht=o(e.StandardMediumSp)`
+  color: ${t=>t.theme.colors.primary};
+  width: ${t=>t.windowSize==="small"?"80%":"100%"};
+`,St=o(e.ExtraLargeBoldSp)`
+  color: ${t=>t.theme.colors.primary};
+`,yt=o.div`
+  display: flex;
+  flex: 1;
+  background-color: ${t=>t.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`,ge=t=>({paymentDetails:{[ve]:t.chargeCardRepaymentDetailLocalData.amount.amount,withdrawFrom:{allOptions:t.transferFromAccounts.map(r=>({label:r.label,value:r.id})),selectedOption:t.chargeCardRepaymentDetailLocalData.transferFrom?.id},enableAutoPay:t.chargeCardRepaymentDetailLocalData.isAutoRepayment}}),ft=o.form`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: ${e.Space.sp6};
+`,Rt=o(e.H2Regular)`
+  color: ${t=>t.theme.colors.primary};
+  margin: ${e.Space.sp5} ${e.Space.sp0} ${e.Space.sp3} ${e.Space.sp0};
+`,wt=o.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${t=>t.theme.colors.grey5};
+  border: 1px solid ${t=>t.theme.colors.grey3};
+  box-shadow: ${t=>`${e.Space.sp0} 2px ${e.Space.sp1} ${t.theme.colors.dropShadowNormal}`};
+  border-radius: ${e.Space.sp2};
+`,xe=(t,r,g)=>({amount:{amount:t[B].amount??0,currencyCode:"USD",currencySymbol:"$"},transferFrom:r.find(n=>n.id===t[B].withdrawFrom.selectedOption),isAutoRepayment:t[B].enableAutoPay,idempotencyKey:g}),X={navBarContainerPaddingXaxis:new e.ResponsiveSized(10,19),containerPaddingLeft:new e.ResponsiveSized(16,40,56),containerPaddingRight:new e.ResponsiveSized(16,40,56),successContentMargin:new e.ResponsiveSized(e.sp[3],e.sp[12]),buttonTrayGap:new e.ResponsiveSized(e.sp[4],e.sp[5])},vt={sectionTitle:new e.ResponsiveSizedStyle("h6Regular","h5Regular")},he=e.appLocale.getLocalizedStrings().spendManagement.zeniAccounts.zeniAccountList,V=e.appLocale.getLocalizedStrings().spendManagement.chargeCard.payEarly,{dateFormat:Se}=e.appLocale.getLocalizedStrings(),Ct=({autoPayThreshold:t,paymentDetails:r,maxInsuredAmount:g,isAccountsEnabled:n,productInformation:x,controllerEmails:s,creditAccountInformation:u,creditAccountSpentAmount:j,debitAccountInformation:h,cashbackInformation:m,paymentSourceInformation:y,isCashbackInfoFetchStateCompleted:S,isCreditCardInfoFetchStateCompleted:w,isDebitCardInfoFetchStateCompleted:c,paymentInitiatedDate:T,onSaveChangesToLocalStore:M,onTransferClick:A,goToCards:z,onDismissClick:v,onEstablishConnectionClick:D,onFetchLinkTokenClick:_,plaidConnectionDetails:Y,onSignUpAccountClick:q,onMoveMoneyClick:H,onUpdatePaymentAccountStatus:l,onEstablishConnectionSuccess:te})=>{const R=e.useWindowSizeContext(),U=e.useToolkitContext().analytics,[G,k]=d.useState(!1),[F,L]=d.useState(!1);d.useEffect(()=>{F&&setTimeout(()=>{L(!1),k(!0)},1e3)},[F]);const O=r.chargeCardRepaymentDetailLocalData.amount.amount===j;return a.jsxRuntimeExports.jsx($t,{windowSize:R,children:r.updateStatus==="Completed"?a.jsxRuntimeExports.jsxs(ye,{windowSize:R,isTransferCompleted:!0,children:[a.jsxRuntimeExports.jsx(fe,{windowSize:R,children:a.jsxRuntimeExports.jsx(Re,{"data-testid":e.generateDataTestId("cross-credit-card-payment-success-close-button"),onClick:()=>{S&&w&&c&&m!=null&&U.trackCardsPayEarlyFormClick(s,x,m,"Cross Icon",r.chargeCardRepaymentDetailLocalData.isAutoRepayment,{paymentAmount:r.chargeCardRepaymentDetailLocalData.amount.amount,paymentAccountName:r.chargeCardRepaymentDetailLocalData.transferFrom?.label,paymentAccountType:r.chargeCardRepaymentDetailLocalData.transferFrom?.accType,paymentAccountLastFourDigits:r.chargeCardRepaymentDetailLocalData.transferFrom?.accountLast4,paymentCompleteEta:void 0,paymentInitiatedDate:void 0},y,u,h),v?.()}})}),a.jsxRuntimeExports.jsxs(Et,{windowSize:R,children:[a.jsxRuntimeExports.jsx(e.MoneyTransferSuccessAnimation,{width:150,height:150,shouldDisplay:!0,animationInLoop:1}),a.jsxRuntimeExports.jsx(jt,{children:a.jsxRuntimeExports.jsxs(a.jsxRuntimeExports.Fragment,{children:[V.youvePaid,a.jsxRuntimeExports.jsx(Lt,{children:e.amountToString("0,0.[00]",r.chargeCardRepaymentDetailLocalData.amount)}),he.transferDrawer.internal.transferSuccessMsgMidfix,`"${r.chargeCardRepaymentDetailLocalData.transferFrom?.label}".`,O?V.theCreditLimitWillResetWithin23BusinessDays:V.theCreditLimitWillUpdateWithin23BusinessDays]})}),a.jsxRuntimeExports.jsx(bt,{windowSize:R,children:a.jsxRuntimeExports.jsx(e.Button,{variant:"primary",label:V.goToCards,"data-testid":e.generateDataTestId("back-to-cards-button"),onClick:z})})]})]}):G?a.jsxRuntimeExports.jsx(Ne,{paymentDetails:r,setShowReviewContent:k,onTransferClick:A,isCashbackInfoFetchStateCompleted:S,isCreditCardInfoFetchStateCompleted:w,isDebitCardInfoFetchStateCompleted:c,controllerEmails:s,productInformation:x,cashbackInformation:m,paymentSourceInformation:y,creditAccountInformation:u,debitAccountInformation:h,isCompleteOutstandingBalanceBeingPaid:O}):a.jsxRuntimeExports.jsxs(a.jsxRuntimeExports.Fragment,{children:[a.jsxRuntimeExports.jsxs(ye,{windowSize:R,isTransferCompleted:!1,children:[a.jsxRuntimeExports.jsx(fe,{windowSize:R,children:a.jsxRuntimeExports.jsx(Re,{"data-testid":e.generateDataTestId("cross-amount-details-close-button"),onClick:()=>{S&&w&&c&&m!=null&&U.trackCardsPayEarlyFormClick(s,x,m,"Cross Icon",r.chargeCardRepaymentDetailLocalData.isAutoRepayment,{paymentAmount:r.chargeCardRepaymentDetailLocalData.amount.amount,paymentAccountName:r.chargeCardRepaymentDetailLocalData.transferFrom?.label,paymentAccountType:r.chargeCardRepaymentDetailLocalData.transferFrom?.accType,paymentAccountLastFourDigits:r.chargeCardRepaymentDetailLocalData.transferFrom?.accountLast4,paymentCompleteEta:T?.add(3,"day").format(Se.visual.MMMDCommaYYYYformat),paymentInitiatedDate:T?.format(Se.visual.MMMDCommaYYYYformat)},y,u,h),v?.()}})}),R==="small"?a.jsxRuntimeExports.jsx(Pt,{windowSize:R,children:V.payCreditCardBalance}):a.jsxRuntimeExports.jsx(Tt,{children:V.payCreditCardBalance}),r.fetchState==="Completed"?a.jsxRuntimeExports.jsx(xt,{autoPayThreshold:t,maxInsuredAmount:g,onSaveChangesToLocalStore:M,plaidConnectionDetails:Y,paymentDetails:r,setShowReviewLoading:L,onEstablishConnectionSuccess:te,isAccountsEnabled:n,onFetchLinkTokenClick:_,onUpdatePaymentAccountStatus:l,onEstablishConnectionClick:D,onSignUpAccountClick:q,onMoveMoneyClick:H,isCashbackInfoFetchStateCompleted:S,isCreditCardInfoFetchStateCompleted:w,isDebitCardInfoFetchStateCompleted:c,controllerEmails:s,productInformation:x,cashbackInformation:m,paymentSourceInformation:y,creditAccountInformation:u,debitAccountInformation:h}):a.jsxRuntimeExports.jsx(e.ActivityIndicator,{size:"Standard",start:!0,style:{display:"flex",justifyContent:"center",alignItems:"center",height:"calc(100vh - 210px)"}})]}),a.jsxRuntimeExports.jsx(e.Footer,{style:{zIndex:4,paddingTop:e.Space.sp3,paddingBottom:e.Space.sp3},formId:$e(Ce),helperStyle:{paddingTop:e.Space.sp0,paddingBottom:e.Space.sp0},primaryBtn:{label:e.appLocale.getLocalizedStrings().common.review,isLoading:F},cancelBtn:{label:he.transferDrawer.cancelBtn,onClick:()=>{S&&w&&c&&m!=null&&U.trackCardsPayEarlyFormClick(s,x,m,"Cancel",r.chargeCardRepaymentDetailLocalData.isAutoRepayment,{paymentAmount:r.chargeCardRepaymentDetailLocalData.amount.amount,paymentAccountName:r.chargeCardRepaymentDetailLocalData.transferFrom?.label,paymentAccountType:r.chargeCardRepaymentDetailLocalData.transferFrom?.accType,paymentAccountLastFourDigits:r.chargeCardRepaymentDetailLocalData.transferFrom?.accountLast4,paymentCompleteEta:void 0,paymentInitiatedDate:void 0},y,u,h),v?.()}}})]})})},$t=o.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${t=>t.theme.colors.grey4};
+  overflow-x: hidden;
+  height: 100vh;
+  width: 100%;
+`,jt=o(e.LargeRegular)`
+  color: ${t=>t.theme.colors.primary};
+  text-align: center;
+  white-space: pre-line;
+`,Lt=o(e.LargeSemiBoldSp)`
+  display: inline;
+`,ye=o.div`
+  height: ${t=>t.isTransferCompleted?"100%":"auto"};
+  padding-left: ${t=>`${X.containerPaddingLeft.valuePx(t.windowSize)}`};
+  padding-right: ${t=>`${X.containerPaddingRight.valuePx(t.windowSize)}`};
+  margin-bottom: auto;
+`,bt=o.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: ${t=>t.windowSize==="small"?"column-reverse":"row"};
+  margin-top: ${e.Space.sp6};
+  gap: ${t=>`${X.buttonTrayGap.valuePx(t.windowSize)}`};
+`,Et=o.div`
+  height: 80%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: ${t=>`${e.Space.sp0} ${X.successContentMargin.valuePx(t.windowSize)}`};
+  align-items: center;
+`,fe=o.div`
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  top: ${e.Space.sp0};
+  padding: ${t=>`${X.navBarContainerPaddingXaxis.valuePx(t.windowSize)} ${e.Space.sp0}`};
+  z-index: 2;
+  background-color: ${t=>t.theme.colors.grey4};
+`,Re=o(e.SvgClose)`
+  cursor: pointer;
+  color: ${t=>t.theme.colors.hero};
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  min-height: ${e.Space.sp4};
+  &:hover {
+    color: ${t=>t.theme.colors.primary};
+  }
+`,Pt=o(e.H6Regular)`
+  ${t=>`${vt.sectionTitle.style(t.windowSize)}`};
+  color: ${t=>t.theme.colors.primary};
+  margin-top: ${e.Space.sp3};
+  margin-bottom: ${e.Space.sp0};
+  margin-right: ${e.Space.sp3};
+`,Tt=o(e.H5Regular)`
+  color: ${t=>t.theme.colors.primary};
+  margin-top: ${e.Space.sp3};
+  margin-bottom: ${e.Space.sp2};
+`,At=({autoPayThreshold:t,paymentDetails:r,isZeniAccountSetupEnabled:g,maxInsuredAmount:n,onUpdatePaymentAccountStatus:x,onSaveChangesToLocalStore:s,creditAccountSpentAmount:u,onTransferClick:j,controllerEmails:h,productInformation:m,creditAccountInformation:y,debitAccountInformation:S,cashbackInformation:w,paymentSourceInformation:c,isCashbackInfoFetchStateCompleted:T,isCreditCardInfoFetchStateCompleted:M,isDebitCardInfoFetchStateCompleted:A,goToCards:z,onDismissClick:v,onEstablishConnectionClick:D,onEstablishConnectionSuccess:_,onFetchLinkTokenClick:Y,plaidConnectionDetails:q,onSignUpAccountClick:H,onMoveMoneyClick:l})=>a.jsxRuntimeExports.jsx(Dt,{children:a.jsxRuntimeExports.jsx(Ct,{autoPayThreshold:t,paymentDetails:r,maxInsuredAmount:n,productInformation:m,controllerEmails:h,creditAccountInformation:y,debitAccountInformation:S,cashbackInformation:w,paymentSourceInformation:c,isCashbackInfoFetchStateCompleted:T,isCreditCardInfoFetchStateCompleted:M,isDebitCardInfoFetchStateCompleted:A,creditAccountSpentAmount:u,onSaveChangesToLocalStore:s,onTransferClick:j,goToCards:z,onDismissClick:v,plaidConnectionDetails:q,isAccountsEnabled:g,onEstablishConnectionClick:D,onFetchLinkTokenClick:Y,onUpdatePaymentAccountStatus:x,onEstablishConnectionSuccess:_,onSignUpAccountClick:H,onMoveMoneyClick:l})}),Dt=o.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${t=>t.theme.colors.grey4};
+  overflow-x: hidden;
+  height: 100%;
+  width: 100%;
+`;exports.default=At;

package/dist/CurrencySelectField-DNpKR0E8.js

@@ -0,0 +1,348 @@
+import { d as R, u as E, m as M, j as o, e as P, S as N, n as _, V as z, c as g, _ as H, $ as T } from "./vendor-.pnpm-B2klaOGU.js";
+import { useState as B, createElement as A } from "react";
+import i from "@emotion/styled";
+import { a as W, e as x, S as t, o as q, t as S, hj as G, F as J, p as K, b as Q, C as p } from "./index-CH2cBxe4.js";
+const Se = ({
+  name: e,
+  registerOptions: s,
+  defaultValue: l,
+  isDisabled: a,
+  style: c,
+  placeholder: d,
+  isOptionRemovable: r = !0,
+  menuItemHeight: u = 40,
+  controlStyle: h
+}) => {
+  const {
+    control: b,
+    formState: { errors: f }
+  } = R(), y = E(), [j, O] = B(!1), v = M(f, e ?? ""), k = W.getLocalizedStrings().common.currency, F = (n) => {
+    if (!(n == null || !n))
+      return {
+        value: n,
+        label: l.allOptions.find((m) => m.value === n)?.label ?? n,
+        countryCode: l.allOptions.find((m) => m.value === n)?.countryCode ?? k.countryCode
+      };
+  }, I = {
+    container: (n) => ({
+      ...n,
+      width: "100%",
+      ...c
+    }),
+    menu: (n) => ({
+      ...n,
+      backgroundColor: y.colors.grey5,
+      borderRadius: t.sp1,
+      boxShadow: `${t.sp0} 2px ${t.sp2} ${y.colors.dropShadowHover}`,
+      border: `1px solid ${y.colors.grey3}`,
+      // TODO - Add border and radius to every dropdown menu
+      whiteSpace: "nowrap",
+      zIndex: 2,
+      width: "100%",
+      margin: `1px ${t.sp0} ${t.sp0} ${t.sp0}`,
+      overflow: "hidden"
+    }),
+    menuList: (n) => ({
+      ...n,
+      borderRadius: t.sp1
+    }),
+    input: () => ({
+      color: y.colors.primary,
+      margin: 0
+    }),
+    singleValue: (n) => ({
+      ...n,
+      margin: 0,
+      position: "absolute"
+    })
+  }, D = {
+    hasError: v,
+    menuItemHeight: u,
+    controlStyle: h,
+    isOptionRemovable: r
+  };
+  return /* @__PURE__ */ o.jsx(
+    P,
+    {
+      name: e,
+      control: b,
+      defaultValue: l,
+      rules: s,
+      "data-testid": x("currency-select-field", e),
+      render: ({ field: { onChange: n, onBlur: m, value: V, ref: L } }) => {
+        const C = V;
+        return /* @__PURE__ */ A(
+          N,
+          {
+            ...D,
+            ref: L,
+            isMulti: !1,
+            isSearchable: !0,
+            isClearable: r,
+            autoFocus: j === !0,
+            openMenuOnClick: !0,
+            controlShouldRenderValue: !0,
+            placeholder: d,
+            value: F(C.selectedOption),
+            options: l.allOptions,
+            "data-testid": x("currency-select", e),
+            onChange: ($) => {
+              r && $?.value != null && C?.selectedOption === $.value ? n({
+                selectedOption: void 0,
+                allOptions: l.allOptions
+              }) : n({
+                selectedOption: $?.value,
+                allOptions: l.allOptions
+              });
+            },
+            onMenuClose: () => O(!1),
+            key: _(),
+            tabSelectsValue: !1,
+            openMenuOnFocus: !0,
+            classNamePrefix: "currency-select-field",
+            onBlur: m,
+            menuPlacement: "auto",
+            maxMenuHeight: 240,
+            menuShouldScrollIntoView: !1,
+            closeMenuOnSelect: !0,
+            components: {
+              Control: U,
+              Option: X,
+              Input: ee,
+              SingleValue: te,
+              ValueContainer: Z,
+              DropdownIndicator: pe,
+              IndicatorSeparator: ge,
+              Placeholder: oe,
+              ClearIndicator: ye,
+              MenuList: Y
+            },
+            hideSelectedOptions: !1,
+            styles: I,
+            isDisabled: a != null
+          }
+        );
+      }
+    }
+  );
+}, U = (e) => {
+  const { menuIsOpen: s, isFocused: l, isDisabled: a, selectProps: c } = e, { value: d, hasError: r, controlStyle: u } = c;
+  return /* @__PURE__ */ o.jsx(
+    ne,
+    {
+      controlStyle: u,
+      menuIsOpen: s,
+      isFocused: l,
+      isDisabled: a,
+      selectedValue: d,
+      hasError: r,
+      children: /* @__PURE__ */ o.jsx(g.Control, { ...e, className: "select-control", children: e.children })
+    }
+  );
+}, X = (e) => {
+  const { data: s, isSelected: l, isDisabled: a, isFocused: c, selectProps: d } = e, { isOptionRemovable: r } = d, u = s.countryCode, h = typeof s.label == "string" ? s.label : s.value;
+  return /* @__PURE__ */ o.jsx(
+    se,
+    {
+      isOptionRemovable: r,
+      className: "select-option-wrapper",
+      isFocused: c,
+      isSelected: l,
+      isDisabled: a,
+      "data-testid": x(
+        "currency-select-field-option",
+        h
+      ),
+      children: /* @__PURE__ */ o.jsx(g.Option, { ...e, className: "select-option", children: /* @__PURE__ */ o.jsxs(re, { children: [
+        /* @__PURE__ */ o.jsx(le, { countryCode: u }),
+        /* @__PURE__ */ o.jsx(ce, { isSelected: l, children: /* @__PURE__ */ o.jsx(ae, { isSelected: l, isDisabled: a, children: s.label }) }),
+        l ? /* @__PURE__ */ o.jsxs(ue, { children: [
+          /* @__PURE__ */ o.jsx(he, { className: "right-tick-icon" }),
+          /* @__PURE__ */ o.jsx(me, { className: "close-tick-icon" })
+        ] }) : null
+      ] }) })
+    }
+  );
+}, Y = (e) => {
+  const { options: s, children: l, maxHeight: a, getValue: c, selectProps: d } = e, { menuItemHeight: r } = d, [u] = c(), h = s.indexOf(u) * r;
+  return /* @__PURE__ */ o.jsx(
+    z,
+    {
+      height: l.length > 7 ? a : l.length * r,
+      width: "100%",
+      itemCount: l.length,
+      itemSize: () => r,
+      initialScrollOffset: h,
+      children: ({ index: b, style: f }) => /* @__PURE__ */ o.jsx(de, { style: f, children: l[b] })
+    }
+  );
+}, Z = (e) => /* @__PURE__ */ o.jsx(g.ValueContainer, { ...e, className: "select-value-container", children: e.children }), ee = (e) => {
+  const { selectProps: s } = e, { placeholder: l, value: a } = s;
+  return /* @__PURE__ */ o.jsx(w, { children: /* @__PURE__ */ o.jsx(
+    g.Input,
+    {
+      ...e,
+      autoComplete: "new-password",
+      placeholder: a == null ? l : void 0,
+      children: e.children
+    }
+  ) });
+}, te = (e) => {
+  const { data: s } = e;
+  return /* @__PURE__ */ o.jsx(g.SingleValue, { ...e, children: /* @__PURE__ */ o.jsx(w, { children: s.label }) });
+}, w = i(q)`
+  color: ${(e) => e.theme.colors.primary};
+`, oe = () => null, le = ({
+  countryCode: e
+}) => {
+  if (e != null && H(e) === !1)
+    return /* @__PURE__ */ o.jsx(o.Fragment, {});
+  {
+    const l = (
+      //added this typecasting since above if condition will filter out any CountryCode whose flag is not present. EX-"AN"
+      T[`${G(
+        e ?? ""
+      )}`]
+    );
+    return /* @__PURE__ */ o.jsx(ie, { children: /* @__PURE__ */ o.jsx(l, { width: t.sp4, height: t.sp3 }) });
+  }
+}, ne = i.span`
+  width: 100%;
+  background-color: ${(e) => e.hasError ? p.importantLight : e.menuIsOpen ? e.theme.colors.background : e.controlStyle?.backgroundColor != null ? e.controlStyle?.backgroundColor : e.theme.colors.grey5};
+  border-radius: ${t.sp1};
+  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+  .select-control {
+    border: none;
+    height: ${t.sp6};
+    background-color: inherit;
+    box-shadow: none;
+    &:hover {
+      fill: ${(e) => e.theme.colors.primary};
+      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.hasError ? p.importantLight : e.theme.colors.background};
+      border-color: none;
+    }
+    width: auto;
+    min-height: auto;
+    cursor: pointer;
+  }
+
+  .select-value-container {
+    width: 100%;
+    display: flex;
+    margin: ${t.sp0} ${t.sp3};
+    padding: 0;
+    max-width: 100%;
+    height: 100%;
+    min-width: auto;
+    align-items: center;
+    flex-wrap: nowrap;
+    cursor: pointer;
+    justify-content: ${(e) => e.controlStyle?.justifyContent != null ? e.controlStyle?.justifyContent : e.menuIsOpen === !1 ? "flex-end" : "flex-start"};
+
+    .currency-select-field__single-value {
+      display: flex;
+      margin: ${t.sp0};
+      color: ${(e) => e.hasError ? p.important : e.theme.colors.primary};
+      ${S.standardRegular.css};
+    }
+
+    .currency-select-field__input-container {
+      display: flex;
+      width: ${(e) => e.menuIsOpen === !1 && e.selectedValue != null ? t.sp0 : "100%"};
+      position: ${(e) => e.isFocused === !1 && e.selectedValue == null ? "initial" : "absolute"};
+      ${S.standardRegular.css};
+      color: ${(e) => e.hasError === !0 ? p.important : e.theme.colors.primary};
+      margin: ${t.sp0};
+      cursor: inherit;
+      top: ${t.sp2};
+
+      > input {
+        text-align: ${(e) => e.isFocused === !1 && e.selectedValue == null ? "right" : "initial"};
+        text-align: ${(e) => e.isFocused === !1 ? "right" : "left"};
+        align-items: center;
+        overflow: hidden;
+        cursor: inherit;
+        :disabled {
+          visibility: visible;
+        }
+        ::placeholder {
+          color: ${(e) => e.hasError ? p.important : e.theme.colors.grey1};
+        }
+      }
+    }
+  }
+`, se = i.div`
+  border-radius: inherit;
+  .select-option {
+    ${S.smallRegular.css};
+    height: ${t.sp6};
+    padding: 9px ${t.sp3};
+    color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.champion};
+    opacity: ${(e) => e.isDisabled ? 0.32 : 1};
+    background-color: ${(e) => e.isSelected ? e.theme.colors.grey3 : e.theme.colors.grey5};
+    ${(e) => e.isFocused && `background-color: ${e.theme.colors.background}`};
+    cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+    border-top: none;
+    border-radius: inherit;
+    .close-tick-icon {
+      display: none;
+    }
+
+    &:hover {
+      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.theme.colors.background};
+      color: ${(e) => e.isDisabled ? e.theme.colors.champion : e.theme.colors.primary};
+      .right-tick-icon {
+        display: ${(e) => e.isOptionRemovable ? "none" : "inline-block"};
+      }
+      .close-tick-icon {
+        display: ${(e) => e.isOptionRemovable ? "inline-block" : "none"};
+      }
+    }
+  }
+`, re = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`, ie = i.div`
+  padding-right: ${t.sp2};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  fill: initial;
+  color: initial;
+`, ae = i(J)`
+  padding-right: 10px;
+  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+  ${(e) => e.isSelected && "cursor: default"};
+`, ce = i.div`
+  width: ${(e) => e.isSelected ? `calc(100% - ${t.sp3})` : "100%"};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`, de = i.div`
+  :first-of-type {
+    border-top-left-radius: ${t.sp1};
+    border-top-right-radius: ${t.sp1};
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: ${t.sp1};
+    border-bottom-right-radius: ${t.sp1};
+  }
+`, ue = i.div`
+  display: flex;
+`, he = i(K)`
+  width: 12px;
+  height: 12px;
+  margin-right: 2px;
+  margin-left: ${t.sp1};
+  color: ${(e) => e.theme.colors.primary};
+`, me = i(Q)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  color: ${(e) => e.theme.colors.primary};
+`, pe = () => null, ge = () => null, ye = () => null;
+export {
+  Se as C
+};