@primer-io/primer-js 0.1.9 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/dist/chunks/{ar.6MRFCKX4.js → ar.KRXB3WQO.js} +1 -1
  2. package/dist/chunks/{bg.HRSMU7Y5.js → bg.6SKJRXIR.js} +1 -1
  3. package/dist/chunks/{ca.3FSHJL7U.js → ca.SANDLFEK.js} +1 -1
  4. package/dist/chunks/chunk.DV3REKZU.js +1 -0
  5. package/dist/chunks/{cs.WAO4WFS3.js → cs.FC4I5M3C.js} +1 -1
  6. package/dist/chunks/{da.4OFYGDVA.js → da.YI32NZ7B.js} +1 -1
  7. package/dist/chunks/{de.3FZS52IN.js → de.7M7UFQB7.js} +1 -1
  8. package/dist/chunks/{el.A4R7VG5T.js → el.XSGTYDZR.js} +1 -1
  9. package/dist/chunks/en-GB.VO4GDE3X.js +1 -0
  10. package/dist/chunks/en.MNFLVOE3.js +1 -0
  11. package/dist/chunks/{es-AR.QKHDL4JV.js → es-AR.TBWVUZEF.js} +1 -1
  12. package/dist/chunks/{es-MX.GG7MJMG2.js → es-MX.6EMWUABR.js} +1 -1
  13. package/dist/chunks/{es.FEZ6BF3S.js → es.XZLDFHYI.js} +1 -1
  14. package/dist/chunks/{et-EE.FJLPTMF3.js → et-EE.JBSFMKZ2.js} +1 -1
  15. package/dist/chunks/{fi-FI.DM5R27A5.js → fi-FI.I75VK2ID.js} +1 -1
  16. package/dist/chunks/{fr.YZV52NTA.js → fr.JBNP6RXT.js} +1 -1
  17. package/dist/chunks/{he.6SCF3XZZ.js → he.PW253QAL.js} +1 -1
  18. package/dist/chunks/{hr.PPDZ7AAS.js → hr.LM4RITYJ.js} +1 -1
  19. package/dist/chunks/{hu.6WOPSGLW.js → hu.JGCKQA6J.js} +1 -1
  20. package/dist/chunks/{id.NS22WGWL.js → id.VBXULDDY.js} +1 -1
  21. package/dist/chunks/{it.42TO3R4G.js → it.7Q6BFLDK.js} +1 -1
  22. package/dist/chunks/{ja.UEGHEUAP.js → ja.QOC76SSC.js} +1 -1
  23. package/dist/chunks/{ko.HTMDY6RY.js → ko.BANZIFNH.js} +1 -1
  24. package/dist/chunks/{lt-LT.4U3GBQTQ.js → lt-LT.Q2SRJOKH.js} +1 -1
  25. package/dist/chunks/{lt.73ME4TDM.js → lt.XMNFEN5T.js} +1 -1
  26. package/dist/chunks/{lv-LV.JRWO2BF6.js → lv-LV.3AJDTMU5.js} +1 -1
  27. package/dist/chunks/{lv.KROS45TV.js → lv.TFPDXNEV.js} +1 -1
  28. package/dist/chunks/{ms.HE3SWJFQ.js → ms.FPTX4NM4.js} +1 -1
  29. package/dist/chunks/{nb.TR6TEKBY.js → nb.CAFSKRQ2.js} +1 -1
  30. package/dist/chunks/{nl.V5QP6OXL.js → nl.7BPSDYTC.js} +1 -1
  31. package/dist/chunks/{nl_NL.FCVWIF3Y.js → nl_NL.6ZVCFPVW.js} +1 -1
  32. package/dist/chunks/{pl.DQZDG7LR.js → pl.RF34QM23.js} +1 -1
  33. package/dist/chunks/{pt-BR.CR4ROBVE.js → pt-BR.AKDHLRUA.js} +1 -1
  34. package/dist/chunks/{pt.JRWVFJPX.js → pt.VBALOWHZ.js} +1 -1
  35. package/dist/chunks/{ro.NRMWYY3F.js → ro.WN7VCF27.js} +1 -1
  36. package/dist/chunks/{ru.OWSKHXVO.js → ru.ICXGVGRR.js} +1 -1
  37. package/dist/chunks/{sk.YGBRNNWT.js → sk.SIP5JIOX.js} +1 -1
  38. package/dist/chunks/{sl.IRTDTNTP.js → sl.R77UEKCA.js} +1 -1
  39. package/dist/chunks/{sr-RS.AWGLHKVE.js → sr-RS.6M2YSTDX.js} +1 -1
  40. package/dist/chunks/{sv.O4BXFGNF.js → sv.33ZY4CDS.js} +1 -1
  41. package/dist/chunks/{th.GZCEBRT2.js → th.M27YUIZC.js} +1 -1
  42. package/dist/chunks/{tr.ZDILMEEO.js → tr.Q2SIY6NA.js} +1 -1
  43. package/dist/chunks/{uk-UA.JUUBOEW3.js → uk-UA.EJZOGSJR.js} +1 -1
  44. package/dist/chunks/{vi.IN7CFTLL.js → vi.3RROGLXM.js} +1 -1
  45. package/dist/chunks/zf.GGWFQ3Y7.js +1 -0
  46. package/dist/chunks/{zh-CN.RBRAS4RP.js → zh-CN.MQHNRMN4.js} +1 -1
  47. package/dist/chunks/{zh-HK.4CK7LBWM.js → zh-HK.WNR7XUSX.js} +1 -1
  48. package/dist/chunks/{zh-TW.374TMWNJ.js → zh-TW.GNCY2PNY.js} +1 -1
  49. package/dist/custom-elements.json +2849 -3555
  50. package/dist/jsx/index.d.ts +85 -87
  51. package/dist/primer-loader.d.ts +933 -2308
  52. package/dist/primer-loader.js +138 -2906
  53. package/dist/primer-react-wrappers.js +121 -2350
  54. package/dist/vscode.html-custom-data.json +54 -30
  55. package/dist/web-types.json +195 -117
  56. package/package.json +7 -3
  57. package/dist/chunks/chunk.I6YWTZRK.js +0 -1
  58. package/dist/chunks/en-GB.ILZ7SXSW.js +0 -1
  59. package/dist/chunks/en.7GZJA7MN.js +0 -1
  60. package/dist/chunks/zf.YT47ULXR.js +0 -1
@@ -1,1233 +1,115 @@
1
- import{a as ti,b as s}from"./chunks/chunk.I6YWTZRK.js";import{createComponent as xa}from"@lit/react";import Aa from"react";var Me=class{constructor(t){(this.host=t).addController(this)}hostConnected(){}setCardNetworksLoading(){let t={detectedCardNetwork:null,selectableCardNetworks:[],isLoading:!0};this.updateCardNetworksState(t)}updateCardNetworksState(t){this.host.primerEventsController.dispatchCardNetworkChange(t),this.host.sdkContextController.setCardNetworks(t)}async processCardNetworkChangeEvent(t){let{detectedCardNetworks:e,selectableCardNetworks:r}=t,o=e.preferred??e.items[0],a=r?.items??[];this.updateCardNetworksState({detectedCardNetwork:o,selectableCardNetworks:a,isLoading:!1})}};var Bt=class{constructor(t){(this.host=t).addController(this)}hostConnected(){}dispatchEvent(t,e){this.host.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchSdkState(t){this.dispatchEvent("primer-state-changed",t)}dispatchPaymentMethods(t){this.dispatchEvent("primer-payment-methods-updated",t)}dispatchCheckoutInitialized(t){this.dispatchEvent("primer-checkout-initialized",t)}dispatchCardNetworkChange(t){this.dispatchEvent("primer-card-network-change",t)}dispatchOnCheckoutComplete(t){this.dispatchEvent("primer-oncheckout-complete",{payment:t})}dispatchOnCheckoutFailure(t,e){this.dispatchEvent("primer-oncheckout-failure",{error:t,payment:e})}dispatchFormSubmitSuccess(t){this.dispatchEvent("primer-card-submit-success",{result:t})}dispatchFormSubmitErrors(t){this.dispatchEvent("primer-card-submit-errors",{errors:t})}};var ft=class extends Event{constructor(t,e,r,o){super("context-request",{bubbles:!0,composed:!0}),this.context=t,this.contextTarget=e,this.callback=r,this.subscribe=o??!1}};var Ft=class{constructor(t,e,r,o){if(this.subscribe=!1,this.provided=!1,this.value=void 0,this.t=(a,n)=>{this.unsubscribe&&(this.unsubscribe!==n&&(this.provided=!1,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=a,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=!0,this.callback&&this.callback(a,n)),this.unsubscribe=n},this.host=t,e.context!==void 0){let a=e;this.context=a.context,this.callback=a.callback,this.subscribe=a.subscribe??!1}else this.context=e,this.callback=r,this.subscribe=o??!1;this.host.addController(this)}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=void 0)}dispatchRequest(){this.host.dispatchEvent(new ft(this.context,this.host,this.t,this.subscribe))}};var ke=class{get value(){return this.o}set value(t){this.setValue(t)}setValue(t,e=!1){let r=e||!Object.is(t,this.o);this.o=t,r&&this.updateObservers()}constructor(t){this.subscriptions=new Map,this.updateObservers=()=>{for(let[e,{disposer:r}]of this.subscriptions)e(this.o,r)},t!==void 0&&(this.value=t)}addCallback(t,e,r){if(!r)return void t(this.value);this.subscriptions.has(t)||this.subscriptions.set(t,{disposer:()=>{this.subscriptions.delete(t)},consumerHost:e});let{disposer:o}=this.subscriptions.get(t);t(this.value,o)}clearCallbacks(){this.subscriptions.clear()}};var xr=class extends Event{constructor(t,e){super("context-provider",{bubbles:!0,composed:!0}),this.context=t,this.contextTarget=e}},I=class extends ke{constructor(t,e,r){super(e.context!==void 0?e.initialValue:r),this.onContextRequest=o=>{if(o.context!==this.context)return;let a=o.contextTarget??o.composedPath()[0];a!==this.host&&(o.stopPropagation(),this.addCallback(o.callback,a,o.subscribe))},this.onProviderRequest=o=>{if(o.context!==this.context||(o.contextTarget??o.composedPath()[0])===this.host)return;let a=new Set;for(let[n,{consumerHost:m}]of this.subscriptions)a.has(n)||(a.add(n),m.dispatchEvent(new ft(this.context,m,n,!0)));o.stopPropagation()},this.host=t,e.context!==void 0?this.context=e.context:this.context=e,this.attachListeners(),this.host.addController?.(this)}attachListeners(){this.host.addEventListener("context-request",this.onContextRequest),this.host.addEventListener("context-provider",this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new xr(this.context,this.host))}};function v({context:i,subscribe:t}){return(e,r)=>{typeof r=="object"?r.addInitializer(function(){new Ft(this,{context:i,callback:o=>{e.set.call(this,o)},subscribe:t})}):e.constructor.addInitializer(o=>{new Ft(o,{context:i,callback:a=>{o[r]=a},subscribe:t})})}}var Te="cardNetworksContext";var Kt="clientOptionsContext";var jt="computedStylesContext";var j="headlessInstanceContext";var $e="klarnaCategoriesContext";var V="managerContext";var Gt="paymentMethodsContext";var L="sdkStateContext";var qt="vaultManagerContext";var ei="vaultManagerCvvContext";var x=class x{static log(t,...e){x.enabled&&console.log(`%c${x.brandTag}%c ${t}`,x.brandStyle,x.styles.log,...e)}static info(t,...e){x.enabled&&console.info(`%c${x.brandTag}%c ${t}`,x.brandStyle,x.styles.info,...e)}static warn(t,...e){x.enabled&&console.warn(`%c${x.brandTag}%c ${t}`,x.brandStyle,x.styles.warn,...e)}static error(t,...e){x.enabled&&console.error(`%c${x.brandTag}%c ${t}`,x.brandStyle,x.styles.error,...e)}static debug(t,...e){x.enabled&&console.debug(`%c${x.brandTag}%c ${t}`,x.brandStyle,x.styles.debug,...e)}static table(t,e){x.enabled&&console.table(t,e)}static time(t){x.enabled&&console.time(`${x.brandTag} ${t}`)}static timeEnd(t){x.enabled&&console.timeEnd(`${x.brandTag} ${t}`)}};x.enabled=!0,x.defaultFont="font-family: Consolas, monospace; font-size: 12px;",x.brandTag="[PRIMER]",x.brandStyle="background: #24292e; color: #ffffff; padding: 2px 6px; border-radius: 3px; font-weight: bold; margin-right: 4px; "+x.defaultFont,x.styles={log:"color: #4CAF50; "+x.defaultFont,info:"color: #2196F3; "+x.defaultFont,warn:"color: #FF9800; "+x.defaultFont,error:"color: #F44336; "+x.defaultFont,debug:"color: #9C27B0; "+x.defaultFont};var A=x;function Ko(i,t,e,r){let o=i,a=e;return{dispatch:n=>{let m=t(o,n,a);o=m,r(m)},getState:()=>Object.freeze({...o}),setCallbacks:n=>{a={...a,...n}}}}function re(i){return(t,e,r)=>{let o=i[e.type];if(!o)throw new Error(`No handler for action type: ${e.type}`);return o(t,e,r)}}var _t=class{constructor(t,e,r,o,a=()=>{this.host.requestUpdate()}){this.host=t;this.stateHandler=a;this.host.addController(this),this._dispatcher=Ko(e,r,o,n=>{this.stateHandler(n)})}get currentState(){return this._dispatcher.getState()}dispatch(t){this._dispatcher.dispatch(t)}setCallbacks(t){this._dispatcher.setCallbacks(t)}hostConnected(){}hostDisconnected(){}},Le=class{constructor(t){this.host=t;this._controllers=[];"addController"in this.host&&this.host.addController(this)}addController(t){this._controllers.push(t)}hostConnected(){this._controllers.forEach(t=>{t.hostConnected&&t.hostConnected()})}hostDisconnected(){this._controllers.forEach(t=>{t.hostDisconnected&&t.hostDisconnected()})}};var Ie={isSuccessful:!1,isProcessing:!1,isLoading:!1,error:null,failure:null},jo={START_LOADING:i=>({...i,isLoading:!0}),START_PROCESSING:i=>({...i,failure:null,isProcessing:!0}),STOP_PROCESSING:i=>({...i,isProcessing:!1}),COMPLETE_PROCESSING:i=>({...i,isProcessing:!1,isSuccessful:!0}),SET_ERROR:(i,t)=>(A.error(t.payload.message),{...i,isProcessing:!1,error:t.payload}),SET_FAILURE:(i,t)=>({...i,isProcessing:!1,failure:t.payload}),COMPLETE_LOADING:i=>({...i,isLoading:!1}),RESET:()=>Ie,RESET_ERROR:i=>({...i,error:null,failure:null})},Go=re(jo),Ne=class extends _t{constructor(t){super(t,Ie,Go,null,e=>{t.sdkContextController.setSdkState(e),t.primerEventsController.dispatchSdkState(e)})}startLoading(){this.dispatch({type:"START_LOADING"})}startProcessing(){this.dispatch({type:"START_PROCESSING"})}stopProcessing(){this.dispatch({type:"STOP_PROCESSING"})}completeProcessing(){this.dispatch({type:"COMPLETE_PROCESSING"})}completeLoading(){this.dispatch({type:"COMPLETE_LOADING"})}setError(t){this.dispatch({type:"SET_ERROR",payload:t})}setFailure(t,e,r){this.dispatch({type:"SET_FAILURE",payload:{code:t,message:e,details:r}})}reset(){this.dispatch({type:"RESET"})}resetError(){this.dispatch({type:"RESET_ERROR"})}forceCompleteLoading(){this.currentState.isLoading&&(A.warn("Force completing loading state"),this.completeLoading())}};var Re=class{constructor(t){this.sdkStateProvider=null;this.paymentMethodsProvider=null;this.paymentManagerProvider=null;this.cardNetworksContext=null;this.vaultManagerCvvProvider=null;this.clientOptionsContext=null;this.headlessUtilsProvider=null;this.klarnaCategoriesProvider=null;this.computedStylesProvider=null;(this.host=t).addController(this),this.sdkStateProvider=new I(t,{context:L,initialValue:Ie}),this.paymentMethodsProvider=new I(t,{context:Gt,initialValue:null}),this.paymentManagerProvider=new I(t,{context:V,initialValue:new Map}),this.cardNetworksContext=new I(t,{context:Te,initialValue:null}),this.vaultManagerProvider=new I(t,{context:qt,initialValue:null}),this.vaultManagerCvvProvider=new I(t,{context:ei,initialValue:null}),this.clientOptionsContext=new I(t,{context:Kt,initialValue:null}),this.klarnaCategoriesProvider=new I(t,{context:$e,initialValue:{categories:[],isLoading:!0}}),this.headlessUtilsProvider=new I(t,{context:j,initialValue:null}),this.computedStylesProvider=new I(t,{context:jt,initialValue:null})}hostConnected(){}setSdkState(t){this.sdkStateProvider?.setValue(t)}setPaymentMethods(t){this.paymentMethodsProvider?.setValue(t)}setPaymentManagers(t){this.paymentManagerProvider?.setValue(t)}setCardNetworks(t){this.cardNetworksContext?.setValue(t)}setVaultManager(t){this.vaultManagerProvider?.setValue(t)}setKlarnaCategories(t){this.klarnaCategoriesProvider?.setValue(t)}setClientOptions(t){this.clientOptionsContext?.setValue(t)}setHeadlessUtils(t){this.headlessUtilsProvider?.setValue(t)}setComputedStyles(t){this.computedStylesProvider?.setValue(t)}setVaultManagerCvv(t){this.vaultManagerCvvProvider?.setValue(t)}};var Et=class Et{constructor(t){(this.host=t).addController(this)}processCustomStyles(t){try{let e=JSON.parse(t);this.applyStyles(e)}catch(e){A.error("Error parsing customStyles property.",e instanceof Error?e:new Error(String(e)))}}isValidCssProperty(t){return/^[a-zA-Z][a-zA-Z0-9]*$/.test(t)}isValidCssValue(t){let r=/^[\w\s#.,%()\-+/!]+$/.test(t);return r||A.warn(`Rejected potentially unsafe CSS value: ${t}`),r}getCssVarName(t){let e=Et.cssVarCache.get(t);return e||(e="--"+t.replace(/([A-Z])/g,(r,o)=>"-"+o.toLowerCase()),Et.cssVarCache.set(t,e)),e}applyStyles(t){let e=[];for(let r of Object.keys(t)){let o=t[r];if(!o)continue;if(!this.isValidCssProperty(r)){A.warn(`Skipping invalid CSS property name: ${r}`);continue}if(!this.isValidCssValue(o))continue;let a=this.getCssVarName(r);e.push([a,o])}if(e.length>0)for(let[r,o]of e)this.host.style.setProperty(r,o)}removeStyle(t){let e=this.getCssVarName(t);this.host.style.removeProperty(e)}clearAllStyles(){for(let t of Et.cssVarCache.keys()){let e=Et.cssVarCache.get(t);e&&this.host.style.removeProperty(e)}}hostDisconnected(){}};Et.cssVarCache=new Map;var Oe=Et;var De=globalThis,Ve=De.ShadowRoot&&(De.ShadyCSS===void 0||De.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,Ar=Symbol(),ri=new WeakMap,ie=class{constructor(t,e,r){if(this._$cssResult$=!0,r!==Ar)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o,e=this.t;if(Ve&&t===void 0){let r=e!==void 0&&e.length===1;r&&(t=ri.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),r&&ri.set(e,t))}return t}toString(){return this.cssText}},ii=i=>new ie(typeof i=="string"?i:i+"",void 0,Ar),h=(i,...t)=>{let e=i.length===1?i[0]:t.reduce((r,o,a)=>r+(n=>{if(n._$cssResult$===!0)return n.cssText;if(typeof n=="number")return n;throw Error("Value passed to 'css' function must be a 'css' function result: "+n+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(o)+i[a+1],i[0]);return new ie(e,i,Ar)},_r=(i,t)=>{if(Ve)i.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(let e of t){let r=document.createElement("style"),o=De.litNonce;o!==void 0&&r.setAttribute("nonce",o),r.textContent=e.cssText,i.appendChild(r)}},Ye=Ve?i=>i:i=>i instanceof CSSStyleSheet?(t=>{let e="";for(let r of t.cssRules)e+=r.cssText;return ii(e)})(i):i;var{is:qo,defineProperty:Wo,getOwnPropertyDescriptor:Zo,getOwnPropertyNames:Xo,getOwnPropertySymbols:Qo,getPrototypeOf:Jo}=Object,gt=globalThis,oi=gt.trustedTypes,ta=oi?oi.emptyScript:"",ea=gt.reactiveElementPolyfillSupport,oe=(i,t)=>i,ae={toAttribute(i,t){switch(t){case Boolean:i=i?ta:null;break;case Object:case Array:i=i==null?i:JSON.stringify(i)}return i},fromAttribute(i,t){let e=i;switch(t){case Boolean:e=i!==null;break;case Number:e=i===null?null:Number(i);break;case Object:case Array:try{e=JSON.parse(i)}catch{e=null}}return e}},Wt=(i,t)=>!qo(i,t),ai={attribute:!0,type:String,converter:ae,reflect:!1,hasChanged:Wt};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),gt.litPropertyMetadata??(gt.litPropertyMetadata=new WeakMap);var it=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??(this.l=[])).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=ai){if(e.state&&(e.attribute=!1),this._$Ei(),this.elementProperties.set(t,e),!e.noAccessor){let r=Symbol(),o=this.getPropertyDescriptor(t,r,e);o!==void 0&&Wo(this.prototype,t,o)}}static getPropertyDescriptor(t,e,r){let{get:o,set:a}=Zo(this.prototype,t)??{get(){return this[e]},set(n){this[e]=n}};return{get(){return o?.call(this)},set(n){let m=o?.call(this);a.call(this,n),this.requestUpdate(t,m,r)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??ai}static _$Ei(){if(this.hasOwnProperty(oe("elementProperties")))return;let t=Jo(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(oe("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(oe("properties"))){let e=this.properties,r=[...Xo(e),...Qo(e)];for(let o of r)this.createProperty(o,e[o])}let t=this[Symbol.metadata];if(t!==null){let e=litPropertyMetadata.get(t);if(e!==void 0)for(let[r,o]of e)this.elementProperties.set(r,o)}this._$Eh=new Map;for(let[e,r]of this.elementProperties){let o=this._$Eu(e,r);o!==void 0&&this._$Eh.set(o,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){let e=[];if(Array.isArray(t)){let r=new Set(t.flat(1/0).reverse());for(let o of r)e.unshift(Ye(o))}else t!==void 0&&e.push(Ye(t));return e}static _$Eu(t,e){let r=e.attribute;return r===!1?void 0:typeof r=="string"?r:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??(this._$EO=new Set)).add(t),this.renderRoot!==void 0&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){let t=new Map,e=this.constructor.elementProperties;for(let r of e.keys())this.hasOwnProperty(r)&&(t.set(r,this[r]),delete this[r]);t.size>0&&(this._$Ep=t)}createRenderRoot(){let t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return _r(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,r){this._$AK(t,r)}_$EC(t,e){let r=this.constructor.elementProperties.get(t),o=this.constructor._$Eu(t,r);if(o!==void 0&&r.reflect===!0){let a=(r.converter?.toAttribute!==void 0?r.converter:ae).toAttribute(e,r.type);this._$Em=t,a==null?this.removeAttribute(o):this.setAttribute(o,a),this._$Em=null}}_$AK(t,e){let r=this.constructor,o=r._$Eh.get(t);if(o!==void 0&&this._$Em!==o){let a=r.getPropertyOptions(o),n=typeof a.converter=="function"?{fromAttribute:a.converter}:a.converter?.fromAttribute!==void 0?a.converter:ae;this._$Em=o,this[o]=n.fromAttribute(e,a.type),this._$Em=null}}requestUpdate(t,e,r){if(t!==void 0){if(r??(r=this.constructor.getPropertyOptions(t)),!(r.hasChanged??Wt)(this[t],e))return;this.P(t,e,r)}this.isUpdatePending===!1&&(this._$ES=this._$ET())}P(t,e,r){this._$AL.has(t)||this._$AL.set(t,e),r.reflect===!0&&this._$Em!==t&&(this._$Ej??(this._$Ej=new Set)).add(t)}async _$ET(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}let t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(let[o,a]of this._$Ep)this[o]=a;this._$Ep=void 0}let r=this.constructor.elementProperties;if(r.size>0)for(let[o,a]of r)a.wrapped!==!0||this._$AL.has(o)||this[o]===void 0||this.P(o,this[o],a)}let t=!1,e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(r=>r.hostUpdate?.()),this.update(e)):this._$EU()}catch(r){throw t=!1,this._$EU(),r}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Ej&&(this._$Ej=this._$Ej.forEach(e=>this._$EC(e,this[e]))),this._$EU()}updated(t){}firstUpdated(t){}};it.elementStyles=[],it.shadowRootOptions={mode:"open"},it[oe("elementProperties")]=new Map,it[oe("finalized")]=new Map,ea?.({ReactiveElement:it}),(gt.reactiveElementVersions??(gt.reactiveElementVersions=[])).push("2.0.4");var yt={INITIAL:0,PENDING:1,COMPLETE:2,ERROR:3},E=Symbol(),P=class{get taskComplete(){return this.t||(this.i===1?this.t=new Promise((t,e)=>{this.o=t,this.h=e}):this.i===3?this.t=Promise.reject(this.l):this.t=Promise.resolve(this.u)),this.t}constructor(t,e,r){this.p=0,this.i=0,(this._=t).addController(this);let o=typeof e=="object"?e:{task:e,args:r};this.v=o.task,this.j=o.args,this.m=o.argsEqual??si,this.k=o.onComplete,this.A=o.onError,this.autoRun=o.autoRun??!0,"initialValue"in o&&(this.u=o.initialValue,this.i=2,this.O=this.T?.())}hostUpdate(){this.autoRun===!0&&this.S()}hostUpdated(){this.autoRun==="afterUpdate"&&this.S()}T(){if(this.j===void 0)return;let t=this.j();if(!Array.isArray(t))throw Error("The args function must return an array");return t}async S(){let t=this.T(),e=this.O;this.O=t,t===e||t===void 0||e!==void 0&&this.m(e,t)||await this.run(t)}async run(t){let e,r;t??(t=this.T()),this.O=t,this.i===1?this.q?.abort():(this.t=void 0,this.o=void 0,this.h=void 0),this.i=1,this.autoRun==="afterUpdate"?queueMicrotask(()=>this._.requestUpdate()):this._.requestUpdate();let o=++this.p;this.q=new AbortController;let a=!1;try{e=await this.v(t,{signal:this.q.signal})}catch(n){a=!0,r=n}if(this.p===o){if(e===E)this.i=0;else{if(a===!1){try{this.k?.(e)}catch{}this.i=2,this.o?.(e)}else{try{this.A?.(r)}catch{}this.i=3,this.h?.(r)}this.u=e,this.l=r}this._.requestUpdate()}}abort(t){this.i===1&&this.q?.abort(t)}get value(){return this.u}get error(){return this.l}get status(){return this.i}render(t){switch(this.i){case 0:return t.initial?.();case 1:return t.pending?.();case 2:return t.complete?.(this.value);case 3:return t.error?.(this.error);default:throw Error("Unexpected status: "+this.i)}}},si=(i,t)=>i===t||i.length===t.length&&i.every((e,r)=>!Wt(e,t[r]));var ra={SET_LOADING:(i,t)=>({...i,isLoading:t.payload}),SET_UPDATING:(i,t)=>({...i,isUpdating:t.payload}),INITIALIZE_VAULT_MANAGER:(i,t,e)=>({...i,enabled:t.vaultEnabled,cvvRecapture:t.cvvRecapture,deleteVaultedPaymentMethod:e.deleteVaultedPaymentMethod,startVaultedPaymentFlow:e.startVaultedPaymentFlow,createCvvInput:e.createCvvInput}),UPDATE_PAYMENT_METHODS:(i,t)=>({...i,vaultedPaymentMethods:t.payload,isLoading:!1,isUpdating:!1}),SET_ERROR:i=>({...i,isLoading:!1,isUpdating:!1}),DISABLE:i=>({...i,enabled:!1}),RESET:()=>ni},ia={INITIALIZE_CVV:(i,t,e)=>({...i,setCvvInput:e.setCvvInput,setSelectedVaultedPaymentMethod:e.setSelectedVaultedPaymentMethod}),SET_FORM_DIRTY:(i,t)=>({...i,formIsDirty:t.payload}),SET_CVV_INPUT:(i,t)=>({...i,cvvInput:t.payload}),SET_SELECTED_VAULTED_PAYMENT_METHOD:(i,t)=>({...i,selectedVaultedPaymentMethod:t.payload}),RESET_CVV:()=>li},oa=re(ra),aa=re(ia),ni={enabled:!1,isLoading:!1,isUpdating:!1,cvvRecapture:!1,vaultedPaymentMethods:[],createCvvInput:null,deleteVaultedPaymentMethod:()=>Promise.resolve(),startVaultedPaymentFlow:()=>Promise.resolve()},li={cvvInput:null,formIsDirty:!1,setCvvInput:()=>{},selectedVaultedPaymentMethod:null,setSelectedVaultedPaymentMethod:()=>{}},Er=class extends _t{constructor(t,e){super(t,ni,oa,e,r=>{t.sdkContextController.setVaultManager(r)})}setLoading(t){this.dispatch({type:"SET_LOADING",payload:t})}setUpdating(t){this.dispatch({type:"SET_UPDATING",payload:t})}initializeVaultManager(t,e,r){this.dispatch({type:"INITIALIZE_VAULT_MANAGER",payload:t,vaultEnabled:e,cvvRecapture:r})}updatePaymentMethods(t){this.dispatch({type:"UPDATE_PAYMENT_METHODS",payload:t})}setError(t){this.dispatch({type:"SET_ERROR",payload:t})}disable(){this.dispatch({type:"DISABLE"})}reset(){this.dispatch({type:"RESET"})}},Sr=class extends _t{constructor(t,e){super(t,li,aa,e,r=>{t.sdkContextController.setVaultManagerCvv(r)})}initializeCvv(t){this.dispatch({type:"INITIALIZE_CVV",createCvvInput:t})}setFormDirty(t){this.dispatch({type:"SET_FORM_DIRTY",payload:t})}setCvvInputState(t){this.dispatch({type:"SET_CVV_INPUT",payload:t})}setSelectedPaymentMethod(t){this.dispatch({type:"SET_SELECTED_VAULTED_PAYMENT_METHOD",payload:t})}resetCvv(){this.dispatch({type:"RESET_CVV"})}},se=class extends Le{constructor(e){super(e);this._vaultManager=null;this._options=null;this.deleteVaultedPaymentMethod=async e=>{if(!this._vaultManager)throw new Error("Vault manager not initialized");try{this.coreController.updatePaymentMethods(this.vaultManagerState.vaultedPaymentMethods),await this._vaultManager.deleteVaultedPaymentMethod(e),await this.fetchVaultedPaymentMethods()}catch(r){throw this.coreController.setError(r instanceof Error?r:new Error("Failed to delete payment method")),r}};this.setCvvInput=e=>{this.itemController.setCvvInputState(e)};this.startVaultedPaymentFlow=async()=>{if(!this._vaultManager)throw new Error("Vault manager not initialized");let e=this.vaultItemState.selectedVaultedPaymentMethod,r=this.vaultManagerState.cvvRecapture,o=this.vaultItemState.cvvInput;if(!e||r&&(!o||o.metadata.error)){this.itemController.setFormDirty(!0);return}this.host.sdkStateController.startProcessing();try{await this._vaultManager.startPaymentFlow(e.id,r?{cvv:o.valueToken}:void 0)}catch(a){A.error("VaultManagerController: Error starting vaulted payment flow",a),this.coreController.setError(a instanceof Error?a:new Error("Failed to start vaulted payment flow")),this.host.sdkStateController.stopProcessing()}};this.setSelectedVaultedPaymentMethod=e=>{this.itemController.setSelectedPaymentMethod(e),this.itemController.setFormDirty(!1)};this.coreController=new Er(e,{deleteVaultedPaymentMethod:this.deleteVaultedPaymentMethod.bind(this),startVaultedPaymentFlow:this.startVaultedPaymentFlow.bind(this),createCvvInput:this.createCvvInput.bind(this)}),this.itemController=new Sr(e,{setCvvInput:this.setCvvInput.bind(this),setSelectedVaultedPaymentMethod:this.setSelectedVaultedPaymentMethod.bind(this)}),this.addController(this.coreController),this.addController(this.itemController),new P(this.host,{task:async([r,o])=>{if(!r||!o?.vaultEnabled)return this.coreController.disable(),E;this.coreController.setLoading(!0);try{this.coreController.initializeVaultManager(r,o.vaultEnabled,!!o.captureVaultedCardCvv),this.itemController.initializeCvv(r.createCvvInput),await this.fetchVaultedPaymentMethods(!0),A.log("VaultManagerController: Vault initialized successfully",{coreState:this.coreController.currentState,cvvState:this.itemController.currentState})}catch(a){A.error("VaultManagerController: Failed to initialize vault",a),this.coreController.setError(a instanceof Error?a:new Error("Unknown error"))}return this._vaultManager},args:()=>[this.vaultManager,this.options]})}initializeVaultManager(e,r){this.vaultManager=e,this.options=r??null}get vaultManager(){return this._vaultManager}set vaultManager(e){this._vaultManager=e,this.host.requestUpdate()}get options(){return this._options}set options(e){this._options=e,this.host.requestUpdate()}get vaultManagerState(){return this.coreController.currentState}get vaultItemState(){return this.itemController.currentState}hostDisconnected(){super.hostDisconnected(),this.vaultManager=null,this.coreController.reset()}async fetchVaultedPaymentMethods(e){if(!this._vaultManager)throw new Error("Vault manager not initialized");try{e||this.coreController.setUpdating(!0);let r=await this._vaultManager.fetchVaultedPaymentMethods();return A.log("VaultManagerController: Fetched payment methods",r),this.coreController.updatePaymentMethods(r),r}catch(r){throw this.coreController.setError(r instanceof Error?r:new Error("Failed to fetch payment methods")),r}}createCvvInput(e){if(!this._vaultManager)throw new Error("Vault manager not initialized");return this._vaultManager.createCvvInput(e)}};var ne="lit-localize-status";var di=i=>typeof i!="string"&&"strTag"in i,He=(i,t,e)=>{let r=i[0];for(let o=1;o<i.length;o++)r+=t[e?e[o-1]:o-1],r+=i[o];return r};var le=i=>di(i)?He(i.strings,i.values):i;var C=le,pi=!1;function Pr(i){if(pi)throw new Error("lit-localize can only be configured once");C=i,pi=!0}var wr=class{constructor(t){this.__litLocalizeEventHandler=e=>{e.detail.status==="ready"&&this.host.requestUpdate()},this.host=t}hostConnected(){window.addEventListener(ne,this.__litLocalizeEventHandler)}hostDisconnected(){window.removeEventListener(ne,this.__litLocalizeEventHandler)}},sa=i=>i.addController(new wr(i)),ci=sa;var T=()=>(i,t)=>(i.addInitializer(ci),i);var de=class{constructor(){this.settled=!1,this.promise=new Promise((t,e)=>{this._resolve=t,this._reject=e})}resolve(t){this.settled=!0,this._resolve(t)}reject(t){this.settled=!0,this._reject(t)}};var ot=[];for(let i=0;i<256;i++)ot[i]=(i>>4&15).toString(16)+(i&15).toString(16);function mi(i){let t=0,e=8997,r=0,o=33826,a=0,n=40164,m=0,p=52210;for(let y=0;y<i.length;y++)e^=i.charCodeAt(y),t=e*435,r=o*435,a=n*435,m=p*435,a+=e<<8,m+=o<<8,r+=t>>>16,e=t&65535,a+=r>>>16,o=r&65535,p=m+(a>>>16)&65535,n=a&65535;return ot[p>>8]+ot[p&255]+ot[n>>8]+ot[n&255]+ot[o>>8]+ot[o&255]+ot[e>>8]+ot[e&255]}var na="",la="h",da="s";function hi(i,t){return(t?la:da)+mi(typeof i=="string"?i:i.join(na))}var ui=new WeakMap,fi=new Map;function gi(i,t,e){if(i){let r=e?.id??pa(t),o=i[r];if(o){if(typeof o=="string")return o;if("strTag"in o)return He(o.strings,t.values,o.values);{let a=ui.get(o);return a===void 0&&(a=o.values,ui.set(o,a)),{...o,values:a.map(n=>t.values[n])}}}}return le(t)}function pa(i){let t=typeof i=="string"?i:i.strings,e=fi.get(t);return e===void 0&&(e=hi(t,typeof i!="string"&&!("strTag"in i)),fi.set(t,e)),e}function Mr(i){window.dispatchEvent(new CustomEvent(ne,{detail:i}))}var ze="",kr,yi,Be,Tr,vi,St=new de;St.resolve();var Ue=0,bi=i=>(Pr((t,e)=>gi(vi,t,e)),ze=yi=i.sourceLocale,Be=new Set(i.targetLocales),Be.add(i.sourceLocale),Tr=i.loadLocale,{getLocale:ca,setLocale:ma}),ca=()=>ze,ma=i=>{if(i===(kr??ze))return St.promise;if(!Be||!Tr)throw new Error("Internal error");if(!Be.has(i))throw new Error("Invalid locale code");Ue++;let t=Ue;return kr=i,St.settled&&(St=new de),Mr({status:"loading",loadingLocale:i}),(i===yi?Promise.resolve({templates:void 0}):Tr(i)).then(r=>{Ue===t&&(ze=i,kr=void 0,vi=r.templates,Mr({status:"ready",readyLocale:i}),St.resolve())},r=>{Ue===t&&(Mr({status:"error",errorLocale:i,errorMessage:r.toString()}),St.reject(r))}),St.promise};var $r="en",Lr=["ar","bg","ca","cs","da","de","el","en-GB","es","es-AR","es-MX","et-EE","fi-FI","fr","he","hr","hu","id","it","ja","ko","lt","lt-LT","lv","lv-LV","ms","nb","nl","nl_NL","pl","pt","pt-BR","ro","ru","sk","sl","sr-RS","sv","th","tr","uk-UA","vi","zf","zh-CN","zh-HK","zh-TW"],Ci="You must call `loadLocale` first to set up the localized template.",xi,Fe,Ai=i=>{let t=bi({sourceLocale:$r,targetLocales:Lr,loadLocale:i});xi=t.getLocale,Fe=t.setLocale};var Nr=i=>{Ai(i)},Ir=i=>{if(!Fe)throw new Error(Ci);return Fe(i)};var pe=new Set(Lr);pe.add($r);var Rr=i=>{if(typeof i!="string")return!1;if(i==="en")return!0;let t=i.replace("_","-");if(pe.has(t))return!0;let e=t.split("-")[0];return!!pe.has(e)},Or=i=>{if(i==="en")return"en-GB";let t=i.replace("_","-");if(pe.has(t))return t;let e=t.split("-")[0];return pe.has(e)?e:"en-GB"};var me=globalThis,Ke=me.trustedTypes,_i=Ke?Ke.createPolicy("lit-html",{createHTML:i=>i}):void 0,Vr="$lit$",at=`lit$${Math.random().toFixed(9).slice(2)}$`,Yr="?"+at,ha=`<${Yr}>`,Mt=document,he=()=>Mt.createComment(""),ue=i=>i===null||typeof i!="object"&&typeof i!="function",Hr=Array.isArray,ki=i=>Hr(i)||typeof i?.[Symbol.iterator]=="function",Dr=`[
2
- \f\r]`,ce=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Ei=/-->/g,Si=/>/g,Pt=RegExp(`>|${Dr}(?:([^\\s"'>=/]+)(${Dr}*=${Dr}*(?:[^
3
- \f\r"'\`<>=]|("|')|))|$)`,"g"),Pi=/'/g,wi=/"/g,Ti=/^(?:script|style|textarea|title)$/i,Ur=i=>(t,...e)=>({_$litType$:i,strings:t,values:e}),d=Ur(1),nt=Ur(2),ip=Ur(3),st=Symbol.for("lit-noChange"),c=Symbol.for("lit-nothing"),Mi=new WeakMap,wt=Mt.createTreeWalker(Mt,129);function $i(i,t){if(!Hr(i)||!i.hasOwnProperty("raw"))throw Error("invalid template strings array");return _i!==void 0?_i.createHTML(t):t}var Li=(i,t)=>{let e=i.length-1,r=[],o,a=t===2?"<svg>":t===3?"<math>":"",n=ce;for(let m=0;m<e;m++){let p=i[m],y,b,g=-1,M=0;for(;M<p.length&&(n.lastIndex=M,b=n.exec(p),b!==null);)M=n.lastIndex,n===ce?b[1]==="!--"?n=Ei:b[1]!==void 0?n=Si:b[2]!==void 0?(Ti.test(b[2])&&(o=RegExp("</"+b[2],"g")),n=Pt):b[3]!==void 0&&(n=Pt):n===Pt?b[0]===">"?(n=o??ce,g=-1):b[1]===void 0?g=-2:(g=n.lastIndex-b[2].length,y=b[1],n=b[3]===void 0?Pt:b[3]==='"'?wi:Pi):n===wi||n===Pi?n=Pt:n===Ei||n===Si?n=ce:(n=Pt,o=void 0);let N=n===Pt&&i[m+1].startsWith("/>")?" ":"";a+=n===ce?p+ha:g>=0?(r.push(y),p.slice(0,g)+Vr+p.slice(g)+at+N):p+at+(g===-2?m:N)}return[$i(i,a+(i[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),r]},fe=class i{constructor({strings:t,_$litType$:e},r){let o;this.parts=[];let a=0,n=0,m=t.length-1,p=this.parts,[y,b]=Li(t,e);if(this.el=i.createElement(y,r),wt.currentNode=this.el.content,e===2||e===3){let g=this.el.content.firstChild;g.replaceWith(...g.childNodes)}for(;(o=wt.nextNode())!==null&&p.length<m;){if(o.nodeType===1){if(o.hasAttributes())for(let g of o.getAttributeNames())if(g.endsWith(Vr)){let M=b[n++],N=o.getAttribute(g).split(at),rt=/([.?@])?(.*)/.exec(M);p.push({type:1,index:a,name:rt[2],strings:N,ctor:rt[1]==="."?Ge:rt[1]==="?"?qe:rt[1]==="@"?We:Tt}),o.removeAttribute(g)}else g.startsWith(at)&&(p.push({type:6,index:a}),o.removeAttribute(g));if(Ti.test(o.tagName)){let g=o.textContent.split(at),M=g.length-1;if(M>0){o.textContent=Ke?Ke.emptyScript:"";for(let N=0;N<M;N++)o.append(g[N],he()),wt.nextNode(),p.push({type:2,index:++a});o.append(g[M],he())}}}else if(o.nodeType===8)if(o.data===Yr)p.push({type:2,index:a});else{let g=-1;for(;(g=o.data.indexOf(at,g+1))!==-1;)p.push({type:7,index:a}),g+=at.length-1}a++}}static createElement(t,e){let r=Mt.createElement("template");return r.innerHTML=t,r}};function kt(i,t,e=i,r){if(t===st)return t;let o=r!==void 0?e._$Co?.[r]:e._$Cl,a=ue(t)?void 0:t._$litDirective$;return o?.constructor!==a&&(o?._$AO?.(!1),a===void 0?o=void 0:(o=new a(i),o._$AT(i,e,r)),r!==void 0?(e._$Co??(e._$Co=[]))[r]=o:e._$Cl=o),o!==void 0&&(t=kt(i,o._$AS(i,t.values),o,r)),t}var je=class{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){let{el:{content:e},parts:r}=this._$AD,o=(t?.creationScope??Mt).importNode(e,!0);wt.currentNode=o;let a=wt.nextNode(),n=0,m=0,p=r[0];for(;p!==void 0;){if(n===p.index){let y;p.type===2?y=new Zt(a,a.nextSibling,this,t):p.type===1?y=new p.ctor(a,p.name,p.strings,this,t):p.type===6&&(y=new Ze(a,this,t)),this._$AV.push(y),p=r[++m]}n!==p?.index&&(a=wt.nextNode(),n++)}return wt.currentNode=Mt,o}p(t){let e=0;for(let r of this._$AV)r!==void 0&&(r.strings!==void 0?(r._$AI(t,r,e),e+=r.strings.length-2):r._$AI(t[e])),e++}},Zt=class i{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,r,o){this.type=2,this._$AH=c,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=r,this.options=o,this._$Cv=o?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode,e=this._$AM;return e!==void 0&&t?.nodeType===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=kt(this,t,e),ue(t)?t===c||t==null||t===""?(this._$AH!==c&&this._$AR(),this._$AH=c):t!==this._$AH&&t!==st&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):ki(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==c&&ue(this._$AH)?this._$AA.nextSibling.data=t:this.T(Mt.createTextNode(t)),this._$AH=t}$(t){let{values:e,_$litType$:r}=t,o=typeof r=="number"?this._$AC(t):(r.el===void 0&&(r.el=fe.createElement($i(r.h,r.h[0]),this.options)),r);if(this._$AH?._$AD===o)this._$AH.p(e);else{let a=new je(o,this),n=a.u(this.options);a.p(e),this.T(n),this._$AH=a}}_$AC(t){let e=Mi.get(t.strings);return e===void 0&&Mi.set(t.strings,e=new fe(t)),e}k(t){Hr(this._$AH)||(this._$AH=[],this._$AR());let e=this._$AH,r,o=0;for(let a of t)o===e.length?e.push(r=new i(this.O(he()),this.O(he()),this,this.options)):r=e[o],r._$AI(a),o++;o<e.length&&(this._$AR(r&&r._$AB.nextSibling,o),e.length=o)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t&&t!==this._$AB;){let r=t.nextSibling;t.remove(),t=r}}setConnected(t){this._$AM===void 0&&(this._$Cv=t,this._$AP?.(t))}},Tt=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,r,o,a){this.type=1,this._$AH=c,this._$AN=void 0,this.element=t,this.name=e,this._$AM=o,this.options=a,r.length>2||r[0]!==""||r[1]!==""?(this._$AH=Array(r.length-1).fill(new String),this.strings=r):this._$AH=c}_$AI(t,e=this,r,o){let a=this.strings,n=!1;if(a===void 0)t=kt(this,t,e,0),n=!ue(t)||t!==this._$AH&&t!==st,n&&(this._$AH=t);else{let m=t,p,y;for(t=a[0],p=0;p<a.length-1;p++)y=kt(this,m[r+p],e,p),y===st&&(y=this._$AH[p]),n||(n=!ue(y)||y!==this._$AH[p]),y===c?t=c:t!==c&&(t+=(y??"")+a[p+1]),this._$AH[p]=y}n&&!o&&this.j(t)}j(t){t===c?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}},Ge=class extends Tt{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===c?void 0:t}},qe=class extends Tt{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==c)}},We=class extends Tt{constructor(t,e,r,o,a){super(t,e,r,o,a),this.type=5}_$AI(t,e=this){if((t=kt(this,t,e,0)??c)===st)return;let r=this._$AH,o=t===c&&r!==c||t.capture!==r.capture||t.once!==r.once||t.passive!==r.passive,a=t!==c&&(r===c||o);o&&this.element.removeEventListener(this.name,this,r),a&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}},Ze=class{constructor(t,e,r){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=r}get _$AU(){return this._$AM._$AU}_$AI(t){kt(this,t)}},Ni={M:Vr,P:at,A:Yr,C:1,L:Li,R:je,D:ki,V:kt,I:Zt,H:Tt,N:qe,U:We,B:Ge,F:Ze},ua=me.litHtmlPolyfillSupport;ua?.(fe,Zt),(me.litHtmlVersions??(me.litHtmlVersions=[])).push("3.2.1");var Ii=(i,t,e)=>{let r=e?.renderBefore??t,o=r._$litPart$;if(o===void 0){let a=e?.renderBefore??null;r._$litPart$=o=new Zt(t.insertBefore(he(),a),a,void 0,e??{})}return o._$AI(i),o};var u=class extends it{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var e;let t=super.createRenderRoot();return(e=this.renderOptions).renderBefore??(e.renderBefore=t.firstChild),t}update(t){let e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=Ii(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return st}};u._$litElement$=!0,u.finalized=!0,globalThis.litElementHydrateSupport?.({LitElement:u});var fa=globalThis.litElementPolyfillSupport;fa?.({LitElement:u});(globalThis.litElementVersions??(globalThis.litElementVersions=[])).push("4.1.1");var f=i=>(t,e)=>{e!==void 0?e.addInitializer(()=>{customElements.define(i,t)}):customElements.define(i,t)};var ga={attribute:!0,type:String,converter:ae,reflect:!1,hasChanged:Wt},ya=(i=ga,t,e)=>{let{kind:r,metadata:o}=e,a=globalThis.litPropertyMetadata.get(o);if(a===void 0&&globalThis.litPropertyMetadata.set(o,a=new Map),a.set(e.name,i),r==="accessor"){let{name:n}=e;return{set(m){let p=t.get.call(this);t.set.call(this,m),this.requestUpdate(n,p,i)},init(m){return m!==void 0&&this.P(n,void 0,i),m}}}if(r==="setter"){let{name:n}=e;return function(m){let p=this[n];t.call(this,m),this.requestUpdate(n,p,i)}}throw Error("Unsupported decorator location: "+r)};function l(i){return(t,e)=>typeof e=="object"?ya(i,t,e):((r,o,a)=>{let n=o.hasOwnProperty(a);return o.constructor.createProperty(a,n?{...r,wrapped:!0}:r),n?Object.getOwnPropertyDescriptor(o,a):void 0})(i,t,e)}function _(i){return l({...i,state:!0,attribute:!1})}var $t=(i,t,e)=>(e.configurable=!0,e.enumerable=!0,Reflect.decorate&&typeof t!="object"&&Object.defineProperty(i,t,e),e);function vt(i,t){return(e,r,o)=>{let a=n=>n.renderRoot?.querySelector(i)??null;if(t){let{get:n,set:m}=typeof r=="object"?e:o??(()=>{let p=Symbol();return{get(){return this[p]},set(y){this[p]=y}}})();return $t(e,r,{get(){let p=n.call(this);return p===void 0&&(p=a(this),(p!==null||this.hasUpdated)&&m.call(this,p)),p}})}return $t(e,r,{get(){return a(this)}})}}function w(i,t,e){return i?t(i):e?.(i)}var S=h`
4
- * {
5
- box-sizing: border-box;
6
- }
7
- `,Ri=h`
8
- :host {
9
- display: block;
10
- isolation: isolate;
11
- position: relative;
12
- width: 100%;
13
- //Keep the CSS loader in the same position - check css-loader-inline.ts
14
- min-height: 64px;
15
- }
16
- `;var Oi="https://sdk.primer.io/web/v2-latest/Primer.min.js";var Xe=class{constructor(t){this._methods=t}get(t){return this._methods.get(t)}toArray(){return Array.from(this._methods.values())}size(){return this._methods.size}};var Di=typeof window<"u"&&typeof window.document<"u";function va(i){return document.querySelector(`script[src^="${i}"]`)}function ba(i,t){let e=document.createElement("script");return e.setAttribute("src",i),e.setAttribute("async",""),e.setAttribute("crossorigin","anonymous"),t&&e.setAttribute("type","module"),e}function Vi(i,t=!1){if(!Di)throw new Error("Cannot load script in server environment");let e=va(i)??ba(i,t);return new Promise((r,o)=>{e.onload=()=>{r()},e.onerror=()=>{o()},e.parentNode||document.head.appendChild(e)})}var Qe=class{constructor(t){this.createPaymentMethodManager=null;this._paymentsList=[];this.currentSdkInstance=null;this.loadingTimeout=null;this.isDisconnected=!1;(this.host=t).addController(this),this.isDisconnected=!1,this.sdkInstanceTask=new P(t,{args:()=>[this.host.clientToken,this.host.options],task:this.initializeHeadless()}),new P(t,{args:()=>[this.sdkInstanceTask.value,this.paymentsList],task:this.initializeLitContext()})}set paymentsList(t){this._paymentsList=t,this.host.requestUpdate()}get paymentsList(){return this._paymentsList}hostConnected(){this.isDisconnected=!1,this.host.sdkStateController.startLoading(),this.setupLoadingTimeout()}hostDisconnected(){this.isDisconnected=!0,this.cleanupResources()}setupLoadingTimeout(){this.clearLoadingTimeout(),this.loadingTimeout=setTimeout(()=>{this.host.sdkStateController.currentState.isLoading&&(A.warn("Loading timeout reached, resetting SDK state"),this.cleanupResources(),this.host.sdkStateController.completeLoading())},1e4)}clearLoadingTimeout(){this.loadingTimeout!==null&&(clearTimeout(this.loadingTimeout),this.loadingTimeout=null)}cleanupResources(){if(this.clearLoadingTimeout(),this.currentSdkInstance)try{this.paymentsList=[],this.createPaymentMethodManager=null,this.host.sdkStateController.reset(),A.info("SDK instance cleaned up")}catch(t){A.error("Error cleaning up SDK instance:",t)}this.currentSdkInstance=null}async _loadV2Sdk(t=Oi){if(window.Primer&&typeof window.Primer.preloadPrimer=="function"){A.info("SDK already loaded, skipping load script"),await window.Primer.preloadPrimer();return}await Vi(t),await window.Primer.preloadPrimer()}initializeHeadless(){return async([t,e])=>{if(this.isDisconnected)return A.warn("Component disconnected, aborting SDK initialization"),E;if(!t||!e)return E;this.cleanupResources();try{await this._loadV2Sdk();let{Primer:r}=window,o=await r.createHeadless(t,{...e,onAvailablePaymentMethodsLoad:n=>{this.isDisconnected||(A.info("Configuration payment methods:",n),this.paymentsList=n)},onCheckoutComplete:({payment:n})=>{this.isDisconnected||(A.info("Payment completed:",n),this.host.sdkStateController.completeProcessing(),this.host.primerEventsController.dispatchOnCheckoutComplete(n))},onCheckoutFail:(n,m)=>{this.isDisconnected||(A.error("Payment failed:",n),this.host.sdkStateController.setFailure(n.code||"UNKNOWN_ERROR",n.message||"Unknown error occurred"),this.host.primerEventsController.dispatchOnCheckoutFailure(n,m.payment))},onBeforePaymentCreate:(n,m)=>{this.isDisconnected||(this.host.sdkStateController.startProcessing(),m?.continuePaymentCreation())},onPaymentMethodAction:(n,m)=>{this.isDisconnected||n==="PAYMENT_METHOD_UNSELECTED"&&this.host.sdkStateController.stopProcessing()},onPaymentCreationStart:()=>{this.isDisconnected||this.host.sdkStateController.resetError()}});if(this.createPaymentMethodManager=o.createPaymentMethodManager.bind(o),this.currentSdkInstance=o,await o.start(),this.isDisconnected)return this.cleanupResources(),E;this.host.sdkContextController.setClientOptions(e),this.host.primerEventsController.dispatchCheckoutInitialized(o);let a=o.getSDKUtilities();return this.host.sdkContextController.setHeadlessUtils(a),this.host.vaultManagerController.initializeVaultManager(o.createVaultManager(),{vaultEnabled:e.vault?.enabled,captureVaultedCardCvv:!!a.getPaymentMethodConfiguration("PAYMENT_CARD")?.options.captureVaultedCardCvv}),o}catch(r){throw r instanceof Error&&(A.error("SDK initialization error:",r),this.host.sdkStateController.setError(r)),this.cleanupResources(),r}}}initializeLitContext(){return async([t,e])=>{if(this.isDisconnected)return E;if(!t||!e.length)return E;let r=new Map,o=new Map;try{for(let n of e){if(this.isDisconnected)break;let m=await this.initializePaymentMethodManager(n)();n&&m&&(r.set(n.type,n),o.set(n.type,m))}if(this.isDisconnected)return E;let a=new Xe(r);return this.host.sdkContextController.setPaymentManagers(o),this.host.sdkContextController.setPaymentMethods(a),this.host.primerEventsController.dispatchPaymentMethods(a),A.info("Initialized payment methods:",a.toArray()),r}catch(a){if(a instanceof Error)throw this.host.sdkStateController.setError(a),a;return null}finally{this.clearLoadingTimeout(),this.isDisconnected||this.host.sdkStateController.completeLoading()}}}initializePaymentMethodManager(t){let{type:e,managerType:r}=t;return async()=>{if(this.isDisconnected||!this.createPaymentMethodManager)return null;if(r==="KLARNA"){let o=await this.createPaymentMethodManager("KLARNA",{onPaymentMethodCategoriesChange:a=>{this.isDisconnected||this.host.sdkContextController.setKlarnaCategories({categories:a,isLoading:!1})}});return o?{type:e,manager:o}:null}try{if(r==="CARD"){let a=await this.createPaymentMethodManager(e,{onCardNetworksChange:async n=>{this.isDisconnected||await this.host.cardNetworkController.processCardNetworkChangeEvent(n)},onCardNetworksLoading:()=>{this.isDisconnected||this.host.cardNetworkController.setCardNetworksLoading()}});return a?{type:e,manager:a}:null}let o=await this.createPaymentMethodManager(e);return o?{type:e,manager:o}:null}catch(o){return A.error(`Failed to initialize manager for ${e}:`,o),null}}}};var Je=class{constructor(t){this.host=t,t.addController(this)}_error(t){let{error:e}=t.detail;this.host.sdkStateController.setFailure("UNKNOWN_ERROR",e.message)}_mandateConfirmed(){this.host.sdkStateController.completeProcessing()}_mandateDeclined(){this.host.sdkStateController.setFailure("UNKNOWN_ERROR","Mandate declined")}hostConnected(){this.host.addEventListener("primer-ach-error",this._error.bind(this)),this.host.addEventListener("primer-ach-mandate-confirmed",this._mandateConfirmed.bind(this)),this.host.addEventListener("primer-ach-mandate-declined",this._mandateDeclined.bind(this))}hostDisconnected(){this.host.removeEventListener("primer-ach-error",this._error.bind(this)),this.host.removeEventListener("primer-ach-mandate-confirmed",this._mandateConfirmed.bind(this)),this.host.removeEventListener("primer-ach-mandate-declined",this._mandateDeclined.bind(this))}};var Ca=ti({"../../localization/lit-localize/locales/ar.ts":()=>import("./chunks/ar.6MRFCKX4.js"),"../../localization/lit-localize/locales/bg.ts":()=>import("./chunks/bg.HRSMU7Y5.js"),"../../localization/lit-localize/locales/ca.ts":()=>import("./chunks/ca.3FSHJL7U.js"),"../../localization/lit-localize/locales/cs.ts":()=>import("./chunks/cs.WAO4WFS3.js"),"../../localization/lit-localize/locales/da.ts":()=>import("./chunks/da.4OFYGDVA.js"),"../../localization/lit-localize/locales/de.ts":()=>import("./chunks/de.3FZS52IN.js"),"../../localization/lit-localize/locales/el.ts":()=>import("./chunks/el.A4R7VG5T.js"),"../../localization/lit-localize/locales/en-GB.ts":()=>import("./chunks/en-GB.ILZ7SXSW.js"),"../../localization/lit-localize/locales/en.ts":()=>import("./chunks/en.7GZJA7MN.js"),"../../localization/lit-localize/locales/es-AR.ts":()=>import("./chunks/es-AR.QKHDL4JV.js"),"../../localization/lit-localize/locales/es-MX.ts":()=>import("./chunks/es-MX.GG7MJMG2.js"),"../../localization/lit-localize/locales/es.ts":()=>import("./chunks/es.FEZ6BF3S.js"),"../../localization/lit-localize/locales/et-EE.ts":()=>import("./chunks/et-EE.FJLPTMF3.js"),"../../localization/lit-localize/locales/fi-FI.ts":()=>import("./chunks/fi-FI.DM5R27A5.js"),"../../localization/lit-localize/locales/fr.ts":()=>import("./chunks/fr.YZV52NTA.js"),"../../localization/lit-localize/locales/he.ts":()=>import("./chunks/he.6SCF3XZZ.js"),"../../localization/lit-localize/locales/hr.ts":()=>import("./chunks/hr.PPDZ7AAS.js"),"../../localization/lit-localize/locales/hu.ts":()=>import("./chunks/hu.6WOPSGLW.js"),"../../localization/lit-localize/locales/id.ts":()=>import("./chunks/id.NS22WGWL.js"),"../../localization/lit-localize/locales/it.ts":()=>import("./chunks/it.42TO3R4G.js"),"../../localization/lit-localize/locales/ja.ts":()=>import("./chunks/ja.UEGHEUAP.js"),"../../localization/lit-localize/locales/ko.ts":()=>import("./chunks/ko.HTMDY6RY.js"),"../../localization/lit-localize/locales/lt-LT.ts":()=>import("./chunks/lt-LT.4U3GBQTQ.js"),"../../localization/lit-localize/locales/lt.ts":()=>import("./chunks/lt.73ME4TDM.js"),"../../localization/lit-localize/locales/lv-LV.ts":()=>import("./chunks/lv-LV.JRWO2BF6.js"),"../../localization/lit-localize/locales/lv.ts":()=>import("./chunks/lv.KROS45TV.js"),"../../localization/lit-localize/locales/ms.ts":()=>import("./chunks/ms.HE3SWJFQ.js"),"../../localization/lit-localize/locales/nb.ts":()=>import("./chunks/nb.TR6TEKBY.js"),"../../localization/lit-localize/locales/nl.ts":()=>import("./chunks/nl.V5QP6OXL.js"),"../../localization/lit-localize/locales/nl_NL.ts":()=>import("./chunks/nl_NL.FCVWIF3Y.js"),"../../localization/lit-localize/locales/pl.ts":()=>import("./chunks/pl.DQZDG7LR.js"),"../../localization/lit-localize/locales/pt-BR.ts":()=>import("./chunks/pt-BR.CR4ROBVE.js"),"../../localization/lit-localize/locales/pt.ts":()=>import("./chunks/pt.JRWVFJPX.js"),"../../localization/lit-localize/locales/ro.ts":()=>import("./chunks/ro.NRMWYY3F.js"),"../../localization/lit-localize/locales/ru.ts":()=>import("./chunks/ru.OWSKHXVO.js"),"../../localization/lit-localize/locales/sk.ts":()=>import("./chunks/sk.YGBRNNWT.js"),"../../localization/lit-localize/locales/sl.ts":()=>import("./chunks/sl.IRTDTNTP.js"),"../../localization/lit-localize/locales/sr-RS.ts":()=>import("./chunks/sr-RS.AWGLHKVE.js"),"../../localization/lit-localize/locales/sv.ts":()=>import("./chunks/sv.O4BXFGNF.js"),"../../localization/lit-localize/locales/th.ts":()=>import("./chunks/th.GZCEBRT2.js"),"../../localization/lit-localize/locales/tr.ts":()=>import("./chunks/tr.ZDILMEEO.js"),"../../localization/lit-localize/locales/uk-UA.ts":()=>import("./chunks/uk-UA.JUUBOEW3.js"),"../../localization/lit-localize/locales/vi.ts":()=>import("./chunks/vi.IN7CFTLL.js"),"../../localization/lit-localize/locales/zf.ts":()=>import("./chunks/zf.YT47ULXR.js"),"../../localization/lit-localize/locales/zh-CN.ts":()=>import("./chunks/zh-CN.RBRAS4RP.js"),"../../localization/lit-localize/locales/zh-HK.ts":()=>import("./chunks/zh-HK.4CK7LBWM.js"),"../../localization/lit-localize/locales/zh-TW.ts":()=>import("./chunks/zh-TW.374TMWNJ.js")});Nr(i=>Ca(`../../localization/lit-localize/locales/${i}.ts`));var tr={LOADER_DISABLED:"loader-disabled",CUSTOM_STYLES:"custom-styles",CLIENT_TOKEN:"client-token",JS_INIT:"js-initialized"},H=class extends u{constructor(){super();this.customStyles="";this.clientToken="";this.options={};this._jsInitialized=!1;this.previousLoadingState=!0;this.hasAssignedContent=!1;this._loadingTimeoutId=null;this.locale="en-GB";this.onSlotChange=e=>{let o=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=o.length>0,this.requestUpdate()};this.sdkContextController=new Re(this),this.sdkStateController=new Ne(this),this.primerEventsController=new Bt(this),this.styleProcessingController=new Oe(this),this.vaultManagerController=new se(this),this.cardNetworkController=new Me(this),this.achPaymentEventsController=new Je(this),new Qe(this)}set jsInitialized(e){this.requestUpdate(),this._jsInitialized=e}get jsInitialized(){return this._jsInitialized}attributeChangedCallback(e,r,o){e===tr.CUSTOM_STYLES?this.styleProcessingController.processCustomStyles(o):super.attributeChangedCallback(e,r,o)}disconnectedCallback(){this._loadingTimeoutId&&(window.clearTimeout(this._loadingTimeoutId),this._loadingTimeoutId=null),this.sdkStateController?.currentState.isLoading&&this.sdkStateController.forceCompleteLoading(),super.disconnectedCallback()}willUpdate(e){e.has("options")&&(this.options?.locale&&(Rr(this.options?.locale)?this.locale=Or(this.options?.locale):A.warn("\u{1F30E}\u2757 Unsupported locale provided:",this.options?.locale,"- Falling back to default locale `en-GB`")),Ir(this.locale||"en-GB"))}updated(){let e=getComputedStyle(this);this.sdkContextController.setComputedStyles(e),this.checkLoadingStateChange()}checkLoadingStateChange(){let e=this.sdkStateController?.currentState.isLoading||!1;this.previousLoadingState&&!e&&(this.jsInitialized=!0),this.previousLoadingState=e,e&&!this._loadingTimeoutId?this._loadingTimeoutId=window.setTimeout(()=>{this.sdkStateController?.currentState.isLoading&&(A.warn("Loading timeout in component, forcing completion"),this.sdkStateController.forceCompleteLoading(),this.jsInitialized=!0),this._loadingTimeoutId=null},1e4):!e&&this._loadingTimeoutId&&(window.clearTimeout(this._loadingTimeoutId),this._loadingTimeoutId=null)}render(){let e=this.sdkStateController.currentState,r=e.isLoading,o=e.error,a=!r&&!o;return d`
17
- ${w(r,()=>c)}
18
- ${w(o,()=>d`<primer-checkout-error></primer-checkout-error>`)}
19
- ${w(a,()=>d`
20
- <slot name="main" @slotchange=${this.onSlotChange}></slot>
21
- ${w(this.hasAssignedContent,()=>c,()=>d`<primer-main></primer-main>`)}
22
- `,()=>c)}
23
- `}addEventListener(e,r,o){super.addEventListener(e,r,o)}removeEventListener(e,r,o){super.removeEventListener(e,r,o)}};H.styles=[S,Ri],s([l({type:String,attribute:tr.CUSTOM_STYLES})],H.prototype,"customStyles",2),s([l({type:String,attribute:tr.CLIENT_TOKEN})],H.prototype,"clientToken",2),s([l({type:Object})],H.prototype,"options",2),s([l({type:Boolean,reflect:!0,attribute:tr.JS_INIT})],H.prototype,"_jsInitialized",2),s([vt("slot")],H.prototype,"defaultSlot",2),s([_()],H.prototype,"previousLoadingState",2),H=s([T(),f("primer-checkout")],H);var _a=xa({tagName:"primer-checkout",elementClass:H,react:Aa});import{createComponent as Ea}from"@lit/react";import Sa from"react";var Yi=h`
24
- :host {
25
- display: flex;
26
- flex-direction: column;
27
- align-items: center;
28
- gap: var(--primer-space-xsmall);
29
- }
30
-
31
- p {
32
- margin: 0;
33
-
34
- color: var(--primer-color-text-primary);
35
- text-align: center;
36
- font-size: var(--primer-typography-body-large-size);
37
- font-family: var(--primer-typography-body-large-font);
38
- font-weight: var(--primer-typography-body-large-weight);
39
- line-height: var(--primer-typography-body-large-line-height);
40
- letter-spacing: var(--primer-typography-body-large-letter-spacing);
41
- }
42
-
43
- p.secondary {
44
- color: var(--primer-color-text-secondary);
45
- text-align: center;
46
- font-family: var(--primer-typography-body-medium-font, Inter);
47
- font-size: var(--primer-typography-body-medium-size);
48
- font-weight: var(--primer-typography-body-medium-weight);
49
- line-height: var(--primer-typography-body-medium-line-height);
50
- letter-spacing: var(--primer-typography-body-medium-letter-spacing);
51
- }
52
- `;var lt=class extends u{constructor(){super(...arguments);this.type="complete"}render(){return this.type==="complete"?d`
53
- <!-- Successful view -->
54
- <primer-icon
55
- size="lg"
56
- name="successful-check"
57
- color="var(--primer-color-icon-positive)"
58
- >
59
- </primer-icon>
60
- <p>Checkout complete!</p>
61
- <p class="secondary">
62
- You'll be redirected to the order confirmation page soon.
63
- </p>
64
- `:d`
65
- <primer-icon
66
- size="lg"
67
- name="failure-icon"
68
- color="var(--primer-color-icon-negative)"
69
- >
70
- </primer-icon>
71
- <p>Payment failed</p>
72
- ${this.description?d`<p class="secondary">${this.description}</p>`:d`<p class="secondary">Something went wrong.</p>`}
73
- `}};lt.styles=[Yi],s([l({type:String,reflect:!0})],lt.prototype,"type",2),s([l({type:String,reflect:!0})],lt.prototype,"description",2),lt=s([f("primer-checkout-state")],lt);var Pa=Ea({tagName:"primer-checkout-state",elementClass:lt,react:Sa});import{createComponent as wa}from"@lit/react";import Ma from"react";var Hi=h`
74
- :host {
75
- display: block;
76
- }
77
-
78
- .collapsable {
79
- width: 100%;
80
- }
81
-
82
- /* Make the button display with full width */
83
- primer-button::part(button) {
84
- width: 100%;
85
- }
86
-
87
- .collapsable-wrapper {
88
- display: grid;
89
- grid-template-rows: 0fr;
90
- transition: grid-template-rows var(--primer-animation-duration)
91
- var(--primer-animation-easing);
92
- overflow: hidden;
93
- border-top: none;
94
- margin-top: -1px;
95
- }
96
-
97
- .collapsable-wrapper.expanded {
98
- grid-template-rows: 1fr;
99
- }
100
-
101
- .collapsable-content {
102
- min-height: 0;
103
- overflow: hidden;
104
- padding: var(--primer-space-medium, 12px) 0;
105
- }
106
-
107
- .icon-container {
108
- display: flex;
109
- align-items: center;
110
- justify-content: center;
111
- transition: transform var(--primer-animation-duration)
112
- var(--primer-animation-easing);
113
- font-size: 0.75em;
114
- }
115
-
116
- .icon-container.expanded {
117
- transform: rotate(180deg);
118
- }
119
-
120
- /* Disable animation for users who prefer reduced motion */
121
- @media (prefers-reduced-motion: reduce) {
122
- .collapsable-wrapper,
123
- .icon-container {
124
- transition: none;
125
- }
126
- }
127
- `;var Y=class extends u{constructor(){super(...arguments);this.header="";this.expanded=!1;this.expandText="Expand";this.collapseText="Collapse";this.ariaLabel="";this.buttonVariant="primary";this.isExpanded=!1}connectedCallback(){super.connectedCallback(),this.isExpanded=this.expanded}dispatchExpandedChangedEvent(e){this.dispatchEvent(new CustomEvent("expanded-changed",{bubbles:!0,composed:!0,detail:{expanded:e}}))}toggleExpanded(){this.isExpanded=!this.isExpanded,this.dispatchExpandedChangedEvent(this.isExpanded)}expand(){this.isExpanded||(this.isExpanded=!0,this.dispatchExpandedChangedEvent(!0))}collapse(){this.isExpanded&&(this.isExpanded=!1,this.dispatchExpandedChangedEvent(!1))}render(){let e=this.isExpanded?this.collapseText:this.expandText,r=this.ariaLabel||this.header||e,o=this.header||e;return d`
128
- <div class="collapsable">
129
- <primer-button
130
- variant=${this.buttonVariant}
131
- buttonType="button"
132
- @click=${this.toggleExpanded}
133
- aria-expanded=${this.isExpanded}
134
- aria-controls="collapsable-content"
135
- aria-label=${r}
136
- >
137
- <span>${o}</span>
138
- </primer-button>
139
-
140
- <div
141
- class="collapsable-wrapper ${this.isExpanded?"expanded":""}"
142
- id="collapsable-content"
143
- role="region"
144
- aria-labelledby="collapsable-header"
145
- >
146
- <div class="collapsable-content">
147
- <slot></slot>
148
- </div>
149
- </div>
150
- </div>
151
- `}};Y.styles=[Hi],s([l({type:String})],Y.prototype,"header",2),s([l({type:Boolean})],Y.prototype,"expanded",2),s([l({type:String})],Y.prototype,"expandText",2),s([l({type:String})],Y.prototype,"collapseText",2),s([l({type:String})],Y.prototype,"ariaLabel",2),s([l({type:String})],Y.prototype,"buttonVariant",2),s([_()],Y.prototype,"isExpanded",2),Y=s([f("primer-collapsable")],Y);var ka=wa({tagName:"primer-collapsable",elementClass:Y,react:Ma});import{createComponent as Ta}from"@lit/react";import $a from"react";var Ui=h`
152
- :host {
153
- display: contents;
154
- }
155
-
156
- .backdrop {
157
- position: absolute;
158
- top: 0;
159
- left: 0;
160
- background-color: rgba(0, 0, 0, 0.5);
161
- z-index: 1000;
162
- display: flex;
163
- justify-content: center;
164
- align-items: center;
165
- width: 100vw;
166
- height: 100vh;
167
- }
168
-
169
- .dialog {
170
- background-color: white;
171
- padding: var(--primer-space-medium);
172
- border-radius: var(--primer-radius-medium);
173
- max-width: 600px;
174
- }
175
-
176
- .header {
177
- display: flex;
178
- justify-content: flex-end;
179
- }
180
- `;var er={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},ge=i=>(...t)=>({_$litDirective$:i,values:t}),Xt=class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,r){this._$Ct=t,this._$AM=e,this._$Ci=r}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};var R=ge(class extends Xt{constructor(i){if(super(i),i.type!==er.ATTRIBUTE||i.name!=="class"||i.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(i){return" "+Object.keys(i).filter(t=>i[t]).join(" ")+" "}update(i,[t]){if(this.st===void 0){this.st=new Set,i.strings!==void 0&&(this.nt=new Set(i.strings.join(" ").split(/\s/).filter(r=>r!=="")));for(let r in t)t[r]&&!this.nt?.has(r)&&this.st.add(r);return this.render(t)}let e=i.element.classList;for(let r of this.st)r in t||(e.remove(r),this.st.delete(r));for(let r in t){let o=!!t[r];o===this.st.has(r)||this.nt?.has(r)||(o?(e.add(r),this.st.add(r)):(e.remove(r),this.st.delete(r)))}return st}});var Lt=class extends u{_handleCloseClick(){this.dispatchEvent(new CustomEvent("primer-dialog-close",{bubbles:!0,composed:!0}))}render(){return d`
181
- <div
182
- class=${R({backdrop:!0})}
183
- @click=${t=>{t.preventDefault()}}
184
- >
185
- <div class="dialog">
186
- <div class="header">
187
- <primer-button variant="tertiary" @click=${this._handleCloseClick}>
188
- <primer-icon name="close"></primer-icon>
189
- </primer-button>
190
- </div>
191
- <div class="content">
192
- <slot></slot>
193
- </div>
194
- </div>
195
- </div>
196
- `}};Lt.styles=[Ui],Lt=s([f("primer-dialog")],Lt);var La=Ta({tagName:"primer-dialog",elementClass:Lt,react:$a});import{createComponent as Na}from"@lit/react";import Ia from"react";var zi=h`
197
- :host {
198
- display: block;
199
- width: 100%;
200
- box-sizing: border-box;
201
- }
202
-
203
- .error-message {
204
- display: flex;
205
- align-items: flex-start;
206
- padding: var(--primer-space-medium);
207
- background-color: var(--primer-color-red-100);
208
- border-radius: var(--primer-radius-medium);
209
- border: 1px solid var(--primer-color-border-outlined-error);
210
- margin-top: var(--primer-space-small);
211
- box-sizing: border-box;
212
- width: 100%;
213
-
214
- /* Add animation properties */
215
- opacity: 1;
216
- transform: translateY(0);
217
- transition:
218
- opacity var(--primer-animation-duration) var(--primer-animation-easing),
219
- transform var(--primer-animation-duration) var(--primer-animation-easing);
220
- }
221
-
222
- .error-message.hidden {
223
- opacity: 0;
224
- transform: translateY(-var(--primer-space-medium));
225
- pointer-events: none;
226
- }
227
-
228
- .error-icon {
229
- flex-shrink: 0;
230
- margin-right: var(--primer-space-medium);
231
- color: var(--primer-color-icon-negative);
232
- }
233
-
234
- .error-content {
235
- flex: 1;
236
- font-family: var(--primer-typography-body-medium-font);
237
- font-size: var(--primer-typography-body-medium-size);
238
- font-weight: var(--primer-typography-body-medium-weight);
239
- line-height: var(--primer-typography-body-medium-line-height);
240
- letter-spacing: var(--primer-typography-body-medium-letter-spacing);
241
- color: var(--primer-color-text-negative);
242
- }
243
-
244
- /* Respect user's preference for reduced motion */
245
- @media (prefers-reduced-motion: reduce) {
246
- .error-message {
247
- transition: opacity var(--primer-animation-duration)
248
- var(--primer-animation-easing);
249
- transform: none;
250
- }
251
-
252
- .error-message.hidden {
253
- transform: none;
254
- }
255
- }
256
- `;var W=class extends u{constructor(){super(...arguments);this.message="";this.visible=!1;this.role="alert";this.showMessage=!1}updated(e){e.has("visible")&&this.handleVisibilityChange()}handleVisibilityChange(){this.visible?(this.showMessage=!0,this.setAttribute("aria-hidden","false")):setTimeout(()=>{this.showMessage=!1,this.setAttribute("aria-hidden","true")},200)}render(){if(!this.showMessage&&!this.visible)return c;let e={"error-message":!0,hidden:!this.visible};return d`
257
- <div
258
- part="error-message"
259
- class=${R(e)}
260
- aria-live="assertive"
261
- aria-atomic="true"
262
- >
263
- <div part="error-icon" class="error-icon">
264
- <primer-icon
265
- name="failure-icon"
266
- size="sm"
267
- color="var(--primer-color-icon-negative)"
268
- ></primer-icon>
269
- </div>
270
- <div part="error-content" class="error-content">${this.message}</div>
271
- </div>
272
- `}};W.styles=[zi],s([l({type:String})],W.prototype,"message",2),s([l({type:Boolean,reflect:!0})],W.prototype,"visible",2),s([l({type:String,reflect:!0})],W.prototype,"role",2),s([_()],W.prototype,"showMessage",2),W=s([f("primer-error-message")],W);var Ra=Na({tagName:"primer-error-message",elementClass:W,react:Ia});import{createComponent as Oa}from"@lit/react";import Da from"react";var Bi={pencil:nt`
273
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
274
- <path d="M12.3292 1.82659C12.142 1.63935 11.8779 1.53418 11.6028 1.53418C11.3277 1.53418 11.0636 1.63935 10.8764 1.82659L2.92969 9.77325V13.0666H6.22306L14.1698 5.11992C14.357 4.93268 14.4622 4.66859 14.4622 4.39352C14.4622 4.11844 14.357 3.85435 14.1698 3.66711L12.3292 1.82659ZM5.77375 11.7333H4.26302V10.2225L10.8764 3.60919L12.3871 5.11992L5.77375 11.7333Z" fill="currentColor"/>
275
- </svg>
276
- `,trash:nt`
277
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
278
- <path d="M13.8333 2.99992H11.5V2.49992C11.5 2.05789 11.3244 1.63397 11.0118 1.32141C10.6993 1.00885 10.2754 0.833252 9.83333 0.833252H6.16667C5.72464 0.833252 5.30072 1.00885 4.98816 1.32141C4.67559 1.63397 4.5 2.05789 4.5 2.49992V2.99992H2.16667C1.98986 2.99992 1.82029 3.07015 1.69526 3.19518C1.57024 3.32021 1.5 3.48978 1.5 3.66659C1.5 3.8434 1.57024 4.01297 1.69526 4.138C1.82029 4.26302 1.98986 4.33326 2.16667 4.33326H2.83333V12.4999C2.83333 12.942 3.00893 13.3659 3.32149 13.6784C3.63405 13.991 4.05797 14.1666 4.5 14.1666H11.5C11.942 14.1666 12.3659 13.991 12.6785 13.6784C12.9911 13.3659 13.1667 12.942 13.1667 12.4999V4.33326H13.8333C14.0101 4.33326 14.1797 4.26302 14.3047 4.138C14.4298 4.01297 14.5 3.8434 14.5 3.66659C14.5 3.48978 14.4298 3.32021 14.3047 3.19518C14.1797 3.07015 14.0101 2.99992 13.8333 2.99992ZM5.83333 2.49992C5.83333 2.32311 5.90357 2.15354 6.0286 2.02851C6.15362 1.90349 6.32319 1.83325 6.5 1.83325H9.5C9.67681 1.83325 9.84638 1.90349 9.9714 2.02851C10.0964 2.15354 10.1667 2.32311 10.1667 2.49992V2.99992H5.83333V2.49992ZM11.8333 12.4999C11.8333 12.6767 11.7631 12.8463 11.6381 12.9713C11.513 13.0964 11.3435 13.1666 11.1667 13.1666H4.83333C4.65652 13.1666 4.48695 13.0964 4.36193 12.9713C4.2369 12.8463 4.16667 12.6767 4.16667 12.4999V4.33326H11.8333V12.4999Z" fill="currentColor"/>
279
- <path d="M6.5 10.9999C6.67681 10.9999 6.84638 10.9297 6.9714 10.8047C7.09643 10.6796 7.16667 10.5101 7.16667 10.3333V7.33325C7.16667 7.15644 7.09643 6.98687 6.9714 6.86184C6.84638 6.73682 6.67681 6.66658 6.5 6.66658C6.32319 6.66658 6.15362 6.73682 6.0286 6.86184C5.90357 6.98687 5.83333 7.15644 5.83333 7.33325V10.3333C5.83333 10.5101 5.90357 10.6796 6.0286 10.8047C6.15362 10.9297 6.32319 10.9999 6.5 10.9999Z" fill="currentColor"/>
280
- <path d="M9.5 10.9999C9.67681 10.9999 9.84638 10.9297 9.9714 10.8047C10.0964 10.6796 10.1667 10.5101 10.1667 10.3333V7.33325C10.1667 7.15644 10.0964 6.98687 9.9714 6.86184C9.84638 6.73682 9.67681 6.66658 9.5 6.66658C9.32319 6.66658 9.15362 6.73682 9.0286 6.86184C8.90357 6.98687 8.83333 7.15644 8.83333 7.33325V10.3333C8.83333 10.5101 8.90357 10.6796 9.0286 10.8047C9.15362 10.9297 9.32319 10.9999 9.5 10.9999Z" fill="currentColor"/>
281
- </svg>
282
- `,"successful-check":nt`
283
- <svg
284
- viewBox="0 0 56 56"
285
- fill="none"
286
- xmlns="http://www.w3.org/2000/svg"
287
- >
288
- <g id="icon/check-circle-large">
289
- <path
290
- id="vector"
291
- fill-rule="evenodd"
292
- clip-rule="evenodd"
293
- d="M20.1762 29.5746L24.8429 34.2413C25.295 34.7007 26.0387 34.7007 26.4908 34.2413L35.8241 24.9079C36.2835 24.4559 36.2835 23.7121 35.8241 23.26C35.372 22.8007 34.6283 22.8007 34.1762 23.26L25.6668 31.7694L21.8241 27.9267C21.372 27.4673 20.6283 27.4673 20.1762 27.9267C19.7168 28.3788 19.7168 29.1225 20.1762 29.5746ZM28.0002 47.4173C38.3106 47.4173 46.6668 39.0611 46.6668 28.7507C46.6668 18.4402 38.3106 10.084 28.0002 10.084C17.6897 10.084 9.3335 18.4402 9.3335 28.7507C9.3335 39.0611 17.6897 47.4173 28.0002 47.4173Z"
294
- />
295
- </g>
296
- </svg>
297
- `,"failure-icon":nt`
298
- <svg
299
- viewBox="0 0 40 40"
300
- fill="none"
301
- xmlns="http://www.w3.org/2000/svg"
302
- >
303
- <path
304
- fill-rule="evenodd"
305
- clip-rule="evenodd"
306
- d="M20.0008 23.3333C20.4614 23.3333 20.7873 22.9606 20.7873 22.5V15C20.7873 14.5394 20.4146 14.1666 20.0008 14.1666C19.587 14.1666 19.1675 14.5416 19.1675 15V22.5C19.1675 22.9583 19.5425 23.3333 20.0008 23.3333ZM32.9331 27.3594L22.5269 9.75935C22.0008 8.86821 21.0529 8.33488 20.0008 8.33331C18.9487 8.33331 18.006 8.8656 17.4748 9.75831L7.06331 27.3625C6.53987 28.2463 6.53206 29.3073 7.04134 30.201C7.568 31.1198 8.51904 31.6666 9.58935 31.6666H30.4175C31.4857 31.6666 32.4357 31.1182 32.9597 30.1995C33.4696 29.3073 33.4591 28.2448 32.9331 27.3594ZM18.7977 26.6666C18.7977 25.976 19.3107 25.4166 20.0008 25.4166C20.6935 25.4166 21.2508 25.9739 21.2039 26.6666C21.2039 27.3568 20.6909 27.9166 20.0008 27.9166C19.3576 27.9166 18.7977 27.3568 18.7977 26.6666Z"
307
- />
308
- </svg>
309
- `,"payment-card":nt`
310
- <svg width="28" height="21" viewBox="0 0 28 21" fill="none" xmlns="http://www.w3.org/2000/svg">
311
- <rect y="0.748047" width="28" height="20" rx="2" fill="#E0E0E0"/>
312
- <rect y="6.74805" width="28" height="4" fill="#212121"/>
313
- <rect x="19" y="13.748" width="6" height="4" rx="0.933333" fill="white"/>
314
- </svg>
315
- `,"chevron-down":nt`
316
- <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
317
- <path d="M4.41978 4.90118C4.32079 5.02361 4.16188 5.08353 4.00037 5.08353C3.83887 5.08353 3.67996 5.02361 3.55753 4.90118L0.63995 1.9836C0.395733 1.73939 0.395733 1.34382 0.63995 1.09947C0.884167 0.855124 1.27973 0.855254 1.52408 1.09947L4.00037 3.57524L6.47589 1.09973C6.72011 0.855515 7.11567 0.855515 7.36002 1.09973C7.60437 1.34395 7.60424 1.73952 7.36002 1.98386L4.41978 4.90118Z" fill="#212121"/>
318
- </svg>`,checkmark:nt`
319
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
320
- <path d="M15.6326 6.12193C15.8983 6.3668 15.8983 6.76276 15.6326 6.98418L8.75546 13.8613C8.53404 14.127 8.13808 14.127 7.89321 13.8613L4.35119 10.3186C4.10706 10.0971 4.10706 9.70118 4.35119 9.45631C4.59531 9.21404 4.99126 9.21404 5.23535 9.45631L8.33606 12.5588L14.7704 6.12193C15.0152 5.87863 15.4112 5.87863 15.6326 6.12193Z" fill="#212121"/>
321
- </svg>
322
- `,close:nt`
323
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
324
- <path
325
- d="M14.7551 13.734C15.0479 14.0269 15.0479 14.502 14.7551 14.7949C14.4622 15.0879 13.987 15.0878 13.6941 14.7949L10.0005 11.0738L6.28054 14.7937C5.98767 15.0866 5.51249 15.0866 5.21959 14.7937C4.92668 14.5008 4.92671 14.0256 5.21959 13.7327L8.94075 10.0141L5.21856 6.26604C4.92568 5.97316 4.92568 5.49798 5.21856 5.20508C5.51143 4.91217 5.98661 4.91221 6.27951 5.20508L10.0005 8.95438L13.7204 5.23446C14.0132 4.94159 14.4884 4.94159 14.7813 5.23446C15.0742 5.52734 15.0742 6.00252 14.7813 6.29542L11.0602 10.0141L14.7551 13.734Z"
326
- fill="#212121"
327
- />
328
- </svg>
329
- `};var Fi=h`
330
- :host {
331
- display: inline-block;
332
- line-height: 0; /* so you don’t get extra space around the icon */
333
- }
334
-
335
- /* Styling svgs rendered by passing *name* attribute - from our library file */
336
- :host([size='sm']) svg {
337
- width: 20px;
338
- height: 20px;
339
- }
340
-
341
- :host([size='md']) svg {
342
- width: 42px;
343
- height: 42px;
344
- }
345
-
346
- :host([size='lg']) svg {
347
- width: 56px;
348
- height: 56px;
349
- }
350
-
351
- svg {
352
- /* --internal used for abstracting away the icon component */
353
- fill: var(--internal-icon-color, currentColor);
354
- }
355
-
356
- /* For slotted icons */
357
- :host([size='sm']) ::slotted(svg) {
358
- width: 20px;
359
- height: 20px;
360
- }
361
-
362
- :host([size='lg']) ::slotted(svg) {
363
- width: 56px;
364
- height: 56px;
365
- }
366
-
367
- ::slotted(svg) {
368
- /* --internal used for abstracting away the icon component */
369
- fill: var(--internal-icon-color, currentColor);
370
- }
371
- `;var Q=class extends u{constructor(){super(...arguments);this.color="var(--primer-color-icon-primary)";this.size="lg"}render(){let e=this.name?Bi[this.name]:null;return d`
372
- <div style="--internal-icon-color: ${this.color}">
373
- ${e||d`<slot></slot>`}
374
- </div>
375
- `}};Q.styles=[Fi],s([l({type:String,reflect:!0})],Q.prototype,"color",2),s([l({type:String,reflect:!0})],Q.prototype,"size",2),s([l({reflect:!0})],Q.prototype,"name",2),Q=s([f("primer-icon")],Q);var Va=Oa({tagName:"primer-icon",elementClass:Q,react:Da});import{createComponent as Ua}from"@lit/react";import za from"react";var Ki=h`
376
- :host {
377
- display: contents;
378
- }
379
-
380
- input {
381
- width: 100%;
382
- padding: 0;
383
- border: none;
384
- height: var(--primer-typography-body-large-line-height);
385
- font-size: var(--primer-typography-body-large-size);
386
- font-family: var(--primer-typography-body-large-font);
387
- color: var(--primer-color-text-primary);
388
- background-color: transparent;
389
- outline: none;
390
- }
391
-
392
- input::placeholder {
393
- color: var(--primer-color-text-placeholder);
394
- font-size: var(--primer-typography-body-large-size);
395
- font-family: var(--primer-typography-body-large-font);
396
- }
397
-
398
- :host([disabled]) input {
399
- color: var(--primer-color-text-disabled);
400
- cursor: not-allowed;
401
- }
402
-
403
- :host([disabled]) input::placeholder {
404
- color: var(--primer-color-text-disabled);
405
- }
406
- `;var Ya=["text","password","email","number","tel","url","search","date","time","datetime-local","month","week","color"];function Ha(i){return Ya.includes(i)}var k=class extends u{constructor(){super(...arguments);this.value="";this.placeholder="";this.disabled=!1;this.name="";this.type="text";this.required=!1;this.readonly=!1;this.pattern="";this.min="";this.max="";this.step="";this.autocomplete="";this.id="";this.hasFocus=!1;this.hasError=!1}handleInput(e){e.stopPropagation();let r=e.target;this.value=r.value;let o=new CustomEvent("input",{detail:this.value,bubbles:!0,composed:!0});this.dispatchEvent(o)}handleChange(e){e.stopPropagation();let r=e.target;this.value=r.value;let o=new CustomEvent("change",{detail:this.value,bubbles:!0,composed:!0});this.dispatchEvent(o)}handleFocus(){this.hasFocus=!0,this.dispatchEvent(new FocusEvent("focus",{bubbles:!0,composed:!0}))}handleBlur(){this.hasFocus=!1,this.dispatchEvent(new FocusEvent("blur",{bubbles:!0,composed:!0}))}handleInvalid(e){e.stopPropagation(),this.hasError=!0,this.dispatchEvent(new Event("invalid",{bubbles:!0,composed:!0}))}focus(e){this.inputElement?.focus(e)}blur(){this.inputElement?.blur()}select(){this.inputElement?.select()}setSelectionRange(e,r,o){this.inputElement?.setSelectionRange(e,r,o)}get validity(){return this.inputElement?.validity||{}}get validationMessage(){return this.inputElement?.validationMessage||""}checkValidity(){return this.inputElement?.checkValidity()||!1}reportValidity(){return this.inputElement?.reportValidity()||!1}render(){let e={input:!0,"input--focused":this.hasFocus,"input--disabled":this.disabled,"input--error":this.hasError,"input--readonly":this.readonly},r=Object.entries(e).filter(([,o])=>o).map(([o])=>o).join(" ");return d`
407
- <input
408
- part="input"
409
- class=${r}
410
- .value=${this.value}
411
- .type=${this.type}
412
- ?disabled=${this.disabled}
413
- ?required=${this.required}
414
- ?readonly=${this.readonly}
415
- placeholder=${this.placeholder}
416
- pattern=${this.pattern}
417
- minlength=${this.minlength??""}
418
- maxlength=${this.maxlength??""}
419
- min=${this.min}
420
- max=${this.max}
421
- step=${this.step}
422
- autocomplete=${this.autocomplete}
423
- name=${this.name}
424
- id=${this.id}
425
- @input=${this.handleInput}
426
- @change=${this.handleChange}
427
- @focus=${this.handleFocus}
428
- @blur=${this.handleBlur}
429
- @invalid=${this.handleInvalid}
430
- />
431
- `}addEventListener(e,r,o){super.addEventListener(e,r,o)}removeEventListener(e,r,o){super.removeEventListener(e,r,o)}};k.styles=[Ki],s([vt("input")],k.prototype,"inputElement",2),s([l({type:String,reflect:!0})],k.prototype,"value",2),s([l({type:String,reflect:!0})],k.prototype,"placeholder",2),s([l({type:Boolean,reflect:!0})],k.prototype,"disabled",2),s([l({type:String,reflect:!0})],k.prototype,"name",2),s([l({type:String,reflect:!0,converter:{fromAttribute:e=>!e||!Ha(e)?(e&&e!=="text"&&A.warn(`Invalid input type: ${e}. Defaulting to 'text'.`),"text"):e}})],k.prototype,"type",2),s([l({type:Boolean,reflect:!0})],k.prototype,"required",2),s([l({type:Boolean,reflect:!0})],k.prototype,"readonly",2),s([l({type:String,reflect:!0})],k.prototype,"pattern",2),s([l({type:Number,reflect:!0})],k.prototype,"minlength",2),s([l({type:Number,reflect:!0})],k.prototype,"maxlength",2),s([l({type:String,reflect:!0})],k.prototype,"min",2),s([l({type:String,reflect:!0})],k.prototype,"max",2),s([l({type:String,reflect:!0})],k.prototype,"step",2),s([l({type:String,reflect:!0})],k.prototype,"autocomplete",2),s([l({type:String,reflect:!0})],k.prototype,"id",2),s([_()],k.prototype,"hasFocus",2),s([_()],k.prototype,"hasError",2),k=s([f("primer-input")],k);var Ba=Ua({tagName:"primer-input",elementClass:k,react:za});import{createComponent as Fa}from"@lit/react";import Ka from"react";var ji=h`
432
- :host {
433
- display: contents;
434
- }
1
+ import{a as Ai,b as l,c as O}from"./chunks/chunk.DV3REKZU.js";import{createComponent as xs}from"@lit/react";import Ss from"react";var $t=class{constructor(t){(this.host=t).addController(this)}hostConnected(){}setCardNetworksLoading(){let t={detectedCardNetwork:null,selectableCardNetworks:[],isLoading:!0};this.updateCardNetworksState(t)}updateCardNetworksState(t){this.host.primerEventsController.dispatchCardNetworkChange(t),this.host.sdkContextController.setCardNetworks(t)}processCardNetworkChangeEvent(t){let{detectedCardNetworks:e,selectableCardNetworks:r}=t,o=e.preferred??e.items[0],a=r?.items??[];this.updateCardNetworksState({detectedCardNetwork:o,selectableCardNetworks:a,isLoading:!1})}};var tt=class{constructor(t){(this.host=t).addController(this)}hostConnected(){}dispatchEvent(t,e){this.host.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchSdkState(t){this.dispatchEvent("primer:state-change",t)}dispatchPaymentMethods(t){this.dispatchEvent("primer:methods-update",t)}dispatchCheckoutInitialized(t){this.dispatchEvent("primer:ready",t)}dispatchCardNetworkChange(t){this.dispatchEvent("primer:card-network-change",t)}dispatchCardSubmit(t){this.dispatchEvent("primer:card-submit",{source:t})}dispatchFormSubmitSuccess(t){this.dispatchEvent("primer:card-success",{result:t})}dispatchFormSubmitErrors(t){this.dispatchEvent("primer:card-error",{errors:t})}};var Se=class extends Event{constructor(t,e,r,o){super("context-request",{bubbles:!0,composed:!0}),this.context=t,this.contextTarget=e,this.callback=r,this.subscribe=o??!1}};var rt=class{constructor(t,e,r,o){if(this.subscribe=!1,this.provided=!1,this.value=void 0,this.t=(a,n)=>{this.unsubscribe&&(this.unsubscribe!==n&&(this.provided=!1,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=a,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=!0,this.callback&&this.callback(a,n)),this.unsubscribe=n},this.host=t,e.context!==void 0){let a=e;this.context=a.context,this.callback=a.callback,this.subscribe=a.subscribe??!1}else this.context=e,this.callback=r,this.subscribe=o??!1;this.host.addController(this)}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=void 0)}dispatchRequest(){this.host.dispatchEvent(new Se(this.context,this.host,this.t,this.subscribe))}};var Yt=class{get value(){return this.o}set value(t){this.setValue(t)}setValue(t,e=!1){let r=e||!Object.is(t,this.o);this.o=t,r&&this.updateObservers()}constructor(t){this.subscriptions=new Map,this.updateObservers=()=>{for(let[e,{disposer:r}]of this.subscriptions)e(this.o,r)},t!==void 0&&(this.value=t)}addCallback(t,e,r){if(!r)return void t(this.value);this.subscriptions.has(t)||this.subscriptions.set(t,{disposer:()=>{this.subscriptions.delete(t)},consumerHost:e});let{disposer:o}=this.subscriptions.get(t);t(this.value,o)}clearCallbacks(){this.subscriptions.clear()}};var Or=class extends Event{constructor(t,e){super("context-provider",{bubbles:!0,composed:!0}),this.context=t,this.contextTarget=e}},U=class extends Yt{constructor(t,e,r){super(e.context!==void 0?e.initialValue:r),this.onContextRequest=o=>{if(o.context!==this.context)return;let a=o.contextTarget??o.composedPath()[0];a!==this.host&&(o.stopPropagation(),this.addCallback(o.callback,a,o.subscribe))},this.onProviderRequest=o=>{if(o.context!==this.context||(o.contextTarget??o.composedPath()[0])===this.host)return;let a=new Set;for(let[n,{consumerHost:s}]of this.subscriptions)a.has(n)||(a.add(n),s.dispatchEvent(new Se(this.context,s,n,!0)));o.stopPropagation()},this.host=t,e.context!==void 0?this.context=e.context:this.context=e,this.attachListeners(),this.host.addController?.(this)}attachListeners(){this.host.addEventListener("context-request",this.onContextRequest),this.host.addEventListener("context-provider",this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new Or(this.context,this.host))}};function C({context:i,subscribe:t}){return(e,r)=>{typeof r=="object"?r.addInitializer(function(){new rt(this,{context:i,callback:o=>{e.set.call(this,o)},subscribe:t})}):e.constructor.addInitializer(o=>{new rt(o,{context:i,callback:a=>{o[r]=a},subscribe:t})})}}var Vt="cardNetworksContext";var Pe="clientOptionsContext";var it="computedStylesContext";var K="headlessInstanceContext";var Ut="klarnaCategoriesContext";var G="managerContext";var ot="paymentMethodsContext";var V="sdkStateContext";var at="vaultManagerContext";var Ht="vaultManagerCvvContext";var Y=class Y{static log(t,...e){Y.enabled}static info(t,...e){Y.enabled}static warn(t,...e){Y.enabled}static error(t,...e){Y.enabled}static debug(t,...e){Y.enabled}static table(t,e){Y.enabled}static time(t){Y.enabled}static timeEnd(t){Y.enabled}};Y.enabled=!0,Y.defaultFont="font-family: Consolas, monospace; font-size: 12px;",Y.brandTag="[PRIMER]",Y.brandStyle=`background: #24292e; color: #ffffff; padding: 2px 6px; border-radius: 3px; font-weight: bold; margin-right: 4px; ${Y.defaultFont}`,Y.styles={log:`color: #4CAF50; ${Y.defaultFont}`,info:`color: #2196F3; ${Y.defaultFont}`,warn:`color: #FF9800; ${Y.defaultFont}`,error:`color: #F44336; ${Y.defaultFont}`,debug:`color: #9C27B0; ${Y.defaultFont}`};var E=Y;function Ua(i,t,e,r){let o=i,a=e;return{dispatch:n=>{let s=t(o,n,a);o=s,r(s)},getState:()=>Object.freeze({...o}),setCallbacks:n=>{a={...a,...n}}}}function yt(i){return(t,e,r)=>{let o=i[e.type];if(!o)throw new Error(`No handler for action type: ${e.type}`);return o(t,e,r)}}var $e=class{constructor(t,e,r,o,a=()=>{this.host.requestUpdate()}){this.host=t;this.stateHandler=a;this.host.addController(this),this._dispatcher=Ua(e,r,o,n=>{this.stateHandler(n)})}get currentState(){return this._dispatcher.getState()}dispatch(t){this._dispatcher.dispatch(t)}setCallbacks(t){this._dispatcher.setCallbacks(t)}hostConnected(){}hostDisconnected(){}},Bt=class{constructor(t){this.host=t;this._controllers=[];"addController"in this.host&&this.host.addController(this)}addController(t){this._controllers.push(t)}hostConnected(){this._controllers.forEach(t=>{t.hostConnected&&t.hostConnected()})}hostDisconnected(){this._controllers.forEach(t=>{t.hostDisconnected&&t.hostDisconnected()})}};var Ft={isSuccessful:!1,isProcessing:!1,isLoading:!1,error:null,failure:null},Ha={START_LOADING:i=>({...i,isLoading:!0}),START_PROCESSING:i=>({...i,failure:null,isProcessing:!0}),STOP_PROCESSING:i=>({...i,isProcessing:!1}),COMPLETE_PROCESSING:i=>({...i,isProcessing:!1,isSuccessful:!0}),SET_ERROR:(i,t)=>(E.error(t.payload.message),{...i,isProcessing:!1,error:t.payload}),SET_FAILURE:(i,t)=>({...i,isProcessing:!1,failure:t.payload}),COMPLETE_LOADING:i=>({...i,isLoading:!1}),RESET:()=>Ft,RESET_ERROR:i=>({...i,error:null,failure:null})},Ba=yt(Ha),zt=class extends $e{constructor(t){super(t,Ft,Ba,null,e=>{t.sdkContextController.setSdkState(e),t.primerEventsController.dispatchSdkState(e)})}startLoading(){this.dispatch({type:"START_LOADING"})}startProcessing(){this.dispatch({type:"START_PROCESSING"})}stopProcessing(){this.dispatch({type:"STOP_PROCESSING"})}completeProcessing(){this.dispatch({type:"COMPLETE_PROCESSING"})}completeLoading(){this.dispatch({type:"COMPLETE_LOADING"})}setError(t){this.dispatch({type:"SET_ERROR",payload:t})}setFailure(t,e,r){this.dispatch({type:"SET_FAILURE",payload:{code:t,message:e,details:r}})}reset(){this.dispatch({type:"RESET"})}resetError(){this.dispatch({type:"RESET_ERROR"})}forceCompleteLoading(){this.currentState.isLoading&&(E.warn("Force completing loading state"),this.completeLoading())}};var jt=class{constructor(t){this.sdkStateProvider=null;this.paymentMethodsProvider=null;this.paymentManagerProvider=null;this.cardNetworksContext=null;this.vaultManagerCvvProvider=null;this.clientOptionsContext=null;this.headlessUtilsProvider=null;this.klarnaCategoriesProvider=null;this.computedStylesProvider=null;(this.host=t).addController(this),this.sdkStateProvider=new U(t,{context:V,initialValue:Ft}),this.paymentMethodsProvider=new U(t,{context:ot,initialValue:null}),this.paymentManagerProvider=new U(t,{context:G,initialValue:new Map}),this.cardNetworksContext=new U(t,{context:Vt,initialValue:null}),this.vaultManagerProvider=new U(t,{context:at,initialValue:null}),this.vaultManagerCvvProvider=new U(t,{context:Ht,initialValue:null}),this.clientOptionsContext=new U(t,{context:Pe,initialValue:null}),this.klarnaCategoriesProvider=new U(t,{context:Ut,initialValue:{categories:[],isLoading:!0}}),this.headlessUtilsProvider=new U(t,{context:K,initialValue:null}),this.computedStylesProvider=new U(t,{context:it,initialValue:null})}hostConnected(){}setSdkState(t){this.sdkStateProvider?.setValue(t)}setPaymentMethods(t){this.paymentMethodsProvider?.setValue(t)}setPaymentManagers(t){this.paymentManagerProvider?.setValue(t)}setCardNetworks(t){this.cardNetworksContext?.setValue(t)}setVaultManager(t){this.vaultManagerProvider?.setValue(t)}setKlarnaCategories(t){this.klarnaCategoriesProvider?.setValue(t)}setClientOptions(t){this.clientOptionsContext?.setValue(t)}setHeadlessUtils(t){this.headlessUtilsProvider?.setValue(t)}setComputedStyles(t){this.computedStylesProvider?.setValue(t)}setVaultManagerCvv(t){this.vaultManagerCvvProvider?.setValue(t)}};var Ye=class Ye{constructor(t){(this.host=t).addController(this)}processCustomStyles(t){try{let e=JSON.parse(t);this.applyStyles(e)}catch(e){E.error("Error parsing customStyles property.",e instanceof Error?e:new Error(String(e)))}}isValidCssProperty(t){return/^[a-zA-Z][a-zA-Z0-9]*$/.test(t)}isValidCssValue(t){let r=/^[\w\s#.,%()\-+/!]+$/.test(t);return r||E.warn(`Rejected potentially unsafe CSS value: ${t}`),r}getCssVarName(t){let e=Ye.cssVarCache.get(t);return e||(e=`--${t.replace(/([A-Z])/g,(r,o)=>`-${o.toLowerCase()}`)}`,Ye.cssVarCache.set(t,e)),e}applyStyles(t){let e=[];for(let r of Object.keys(t)){let o=t[r];if(!o)continue;if(!this.isValidCssProperty(r)){E.warn(`Skipping invalid CSS property name: ${r}`);continue}if(!this.isValidCssValue(o))continue;let a=this.getCssVarName(r);e.push([a,o])}if(e.length>0)for(let[r,o]of e)this.host.style.setProperty(r,o)}removeStyle(t){let e=this.getCssVarName(t);this.host.style.removeProperty(e)}clearAllStyles(){for(let t of Ye.cssVarCache.keys()){let e=Ye.cssVarCache.get(t);e&&this.host.style.removeProperty(e)}}hostDisconnected(){}};Ye.cssVarCache=new Map;var Kt=Ye;var Gt=globalThis,Wt=Gt.ShadowRoot&&(Gt.ShadyCSS===void 0||Gt.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,xi=Symbol(),_i=new WeakMap,qt=class{constructor(t,e,r){if(this._$cssResult$=!0,r!==xi)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o,e=this.t;if(Wt&&t===void 0){let r=e!==void 0&&e.length===1;r&&(t=_i.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),r&&_i.set(e,t))}return t}toString(){return this.cssText}},Si=i=>new qt(typeof i=="string"?i:i+"",void 0,xi);var Rr=(i,t)=>{if(Wt)i.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(let e of t){let r=document.createElement("style"),o=Gt.litNonce;o!==void 0&&r.setAttribute("nonce",o),r.textContent=e.cssText,i.appendChild(r)}},Jt=Wt?i=>i:i=>i instanceof CSSStyleSheet?(t=>{let e="";for(let r of t.cssRules)e+=r.cssText;return Si(e)})(i):i;var{is:za,defineProperty:Fa,getOwnPropertyDescriptor:ja,getOwnPropertyNames:Ka,getOwnPropertySymbols:Ga,getPrototypeOf:qa}=Object,we=globalThis,Pi=we.trustedTypes,Wa=Pi?Pi.emptyScript:"",Ja=we.reactiveElementPolyfillSupport,gt=(i,t)=>i,Dr={toAttribute(i,t){switch(t){case Boolean:i=i?Wa:null;break;case Object:case Array:i=i==null?i:JSON.stringify(i)}return i},fromAttribute(i,t){let e=i;switch(t){case Boolean:e=i!==null;break;case Number:e=i===null?null:Number(i);break;case Object:case Array:try{e=JSON.parse(i)}catch{e=null}}return e}},Zt=(i,t)=>!za(i,t),wi={attribute:!0,type:String,converter:Dr,reflect:!1,hasChanged:Zt};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),we.litPropertyMetadata??(we.litPropertyMetadata=new WeakMap);var Ve=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??(this.l=[])).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=wi){if(e.state&&(e.attribute=!1),this._$Ei(),this.elementProperties.set(t,e),!e.noAccessor){let r=Symbol(),o=this.getPropertyDescriptor(t,r,e);o!==void 0&&Fa(this.prototype,t,o)}}static getPropertyDescriptor(t,e,r){let{get:o,set:a}=ja(this.prototype,t)??{get(){return this[e]},set(n){this[e]=n}};return{get(){return o?.call(this)},set(n){let s=o?.call(this);a.call(this,n),this.requestUpdate(t,s,r)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??wi}static _$Ei(){if(this.hasOwnProperty(gt("elementProperties")))return;let t=qa(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(gt("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(gt("properties"))){let e=this.properties,r=[...Ka(e),...Ga(e)];for(let o of r)this.createProperty(o,e[o])}let t=this[Symbol.metadata];if(t!==null){let e=litPropertyMetadata.get(t);if(e!==void 0)for(let[r,o]of e)this.elementProperties.set(r,o)}this._$Eh=new Map;for(let[e,r]of this.elementProperties){let o=this._$Eu(e,r);o!==void 0&&this._$Eh.set(o,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){let e=[];if(Array.isArray(t)){let r=new Set(t.flat(1/0).reverse());for(let o of r)e.unshift(Jt(o))}else t!==void 0&&e.push(Jt(t));return e}static _$Eu(t,e){let r=e.attribute;return r===!1?void 0:typeof r=="string"?r:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??(this._$EO=new Set)).add(t),this.renderRoot!==void 0&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){let t=new Map,e=this.constructor.elementProperties;for(let r of e.keys())this.hasOwnProperty(r)&&(t.set(r,this[r]),delete this[r]);t.size>0&&(this._$Ep=t)}createRenderRoot(){let t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return Rr(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,r){this._$AK(t,r)}_$EC(t,e){let r=this.constructor.elementProperties.get(t),o=this.constructor._$Eu(t,r);if(o!==void 0&&r.reflect===!0){let a=(r.converter?.toAttribute!==void 0?r.converter:Dr).toAttribute(e,r.type);this._$Em=t,a==null?this.removeAttribute(o):this.setAttribute(o,a),this._$Em=null}}_$AK(t,e){let r=this.constructor,o=r._$Eh.get(t);if(o!==void 0&&this._$Em!==o){let a=r.getPropertyOptions(o),n=typeof a.converter=="function"?{fromAttribute:a.converter}:a.converter?.fromAttribute!==void 0?a.converter:Dr;this._$Em=o,this[o]=n.fromAttribute(e,a.type),this._$Em=null}}requestUpdate(t,e,r){if(t!==void 0){if(r??(r=this.constructor.getPropertyOptions(t)),!(r.hasChanged??Zt)(this[t],e))return;this.P(t,e,r)}this.isUpdatePending===!1&&(this._$ES=this._$ET())}P(t,e,r){this._$AL.has(t)||this._$AL.set(t,e),r.reflect===!0&&this._$Em!==t&&(this._$Ej??(this._$Ej=new Set)).add(t)}async _$ET(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}let t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(let[o,a]of this._$Ep)this[o]=a;this._$Ep=void 0}let r=this.constructor.elementProperties;if(r.size>0)for(let[o,a]of r)a.wrapped!==!0||this._$AL.has(o)||this[o]===void 0||this.P(o,this[o],a)}let t=!1,e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(r=>r.hostUpdate?.()),this.update(e)):this._$EU()}catch(r){throw t=!1,this._$EU(),r}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Ej&&(this._$Ej=this._$Ej.forEach(e=>this._$EC(e,this[e]))),this._$EU()}updated(t){}firstUpdated(t){}};Ve.elementStyles=[],Ve.shadowRootOptions={mode:"open"},Ve[gt("elementProperties")]=new Map,Ve[gt("finalized")]=new Map,Ja?.({ReactiveElement:Ve}),(we.reactiveElementVersions??(we.reactiveElementVersions=[])).push("2.0.4");var Te={INITIAL:0,PENDING:1,COMPLETE:2,ERROR:3},T=Symbol(),I=class{get taskComplete(){return this.t||(this.i===1?this.t=new Promise((t,e)=>{this.o=t,this.h=e}):this.i===3?this.t=Promise.reject(this.l):this.t=Promise.resolve(this.u)),this.t}constructor(t,e,r){this.p=0,this.i=0,(this._=t).addController(this);let o=typeof e=="object"?e:{task:e,args:r};this.v=o.task,this.j=o.args,this.m=o.argsEqual??Ti,this.k=o.onComplete,this.A=o.onError,this.autoRun=o.autoRun??!0,"initialValue"in o&&(this.u=o.initialValue,this.i=2,this.O=this.T?.())}hostUpdate(){this.autoRun===!0&&this.S()}hostUpdated(){this.autoRun==="afterUpdate"&&this.S()}T(){if(this.j===void 0)return;let t=this.j();if(!Array.isArray(t))throw Error("The args function must return an array");return t}async S(){let t=this.T(),e=this.O;this.O=t,t===e||t===void 0||e!==void 0&&this.m(e,t)||await this.run(t)}async run(t){let e,r;t??(t=this.T()),this.O=t,this.i===1?this.q?.abort():(this.t=void 0,this.o=void 0,this.h=void 0),this.i=1,this.autoRun==="afterUpdate"?queueMicrotask(()=>this._.requestUpdate()):this._.requestUpdate();let o=++this.p;this.q=new AbortController;let a=!1;try{e=await this.v(t,{signal:this.q.signal})}catch(n){a=!0,r=n}if(this.p===o){if(e===T)this.i=0;else{if(a===!1){try{this.k?.(e)}catch{}this.i=2,this.o?.(e)}else{try{this.A?.(r)}catch{}this.i=3,this.h?.(r)}this.u=e,this.l=r}this._.requestUpdate()}}abort(t){this.i===1&&this.q?.abort(t)}get value(){return this.u}get error(){return this.l}get status(){return this.i}render(t){switch(this.i){case 0:return t.initial?.();case 1:return t.pending?.();case 2:return t.complete?.(this.value);case 3:return t.error?.(this.error);default:throw Error("Unexpected status: "+this.i)}}},Ti=(i,t)=>i===t||i.length===t.length&&i.every((e,r)=>!Zt(e,t[r]));var Za={SET_LOADING:(i,t)=>({...i,isLoading:t.payload}),SET_UPDATING:(i,t)=>({...i,isUpdating:t.payload}),INITIALIZE_VAULT_MANAGER:(i,t,e)=>({...i,enabled:t.vaultEnabled,cvvRecapture:t.cvvRecapture,showEmptyState:t.showEmptyState,deleteVaultedPaymentMethod:e.deleteVaultedPaymentMethod,startVaultedPaymentFlow:e.startVaultedPaymentFlow,createCvvInput:e.createCvvInput}),UPDATE_PAYMENT_METHODS:(i,t)=>({...i,vaultedPaymentMethods:t.payload,isLoading:!1,isUpdating:!1}),SET_ERROR:i=>({...i,isLoading:!1,isUpdating:!1}),DISABLE:i=>({...i,enabled:!1}),RESET:()=>Mi},Xa={INITIALIZE_CVV:(i,t,e)=>({...i,setCvvInput:e.setCvvInput,setSelectedVaultedPaymentMethod:e.setSelectedVaultedPaymentMethod}),SET_FORM_DIRTY:(i,t)=>({...i,formIsDirty:t.payload}),SET_CVV_INPUT:(i,t)=>({...i,cvvInput:t.payload}),SET_SELECTED_VAULTED_PAYMENT_METHOD:(i,t)=>({...i,selectedVaultedPaymentMethod:t.payload}),RESET_CVV:()=>ki},Qa=yt(Za),en=yt(Xa),Mi={enabled:!1,isLoading:!1,isUpdating:!1,cvvRecapture:!1,showEmptyState:!0,vaultedPaymentMethods:[],createCvvInput:null,deleteVaultedPaymentMethod:()=>Promise.resolve(),startVaultedPaymentFlow:()=>Promise.resolve()},ki={cvvInput:null,formIsDirty:!1,setCvvInput:()=>{},selectedVaultedPaymentMethod:null,setSelectedVaultedPaymentMethod:()=>{}},$r=class extends $e{constructor(t,e){super(t,Mi,Qa,e,r=>{t.sdkContextController.setVaultManager(r)})}setLoading(t){this.dispatch({type:"SET_LOADING",payload:t})}setUpdating(t){this.dispatch({type:"SET_UPDATING",payload:t})}initializeVaultManager(t,e,r,o){this.dispatch({type:"INITIALIZE_VAULT_MANAGER",payload:t,vaultEnabled:e,cvvRecapture:r,showEmptyState:o})}updatePaymentMethods(t){this.dispatch({type:"UPDATE_PAYMENT_METHODS",payload:t})}setError(t){this.dispatch({type:"SET_ERROR",payload:t})}disable(){this.dispatch({type:"DISABLE"})}reset(){this.dispatch({type:"RESET"})}},Yr=class extends $e{constructor(t,e){super(t,ki,en,e,r=>{t.sdkContextController.setVaultManagerCvv(r)})}initializeCvv(t){this.dispatch({type:"INITIALIZE_CVV",createCvvInput:t})}setFormDirty(t){this.dispatch({type:"SET_FORM_DIRTY",payload:t})}setCvvInputState(t){this.dispatch({type:"SET_CVV_INPUT",payload:t})}setSelectedPaymentMethod(t){this.dispatch({type:"SET_SELECTED_VAULTED_PAYMENT_METHOD",payload:t})}resetCvv(){this.dispatch({type:"RESET_CVV"})}},vt=class extends Bt{constructor(e){super(e);this._vaultManager=null;this._options=null;this.createCvvInput=e=>{if(!this._vaultManager)throw new Error("Vault manager not initialized");return this._vaultManager.createCvvInput(e)};this.deleteVaultedPaymentMethod=async e=>{if(!this._vaultManager)throw new Error("Vault manager not initialized");try{this.coreController.updatePaymentMethods(this.vaultManagerState.vaultedPaymentMethods),await this._vaultManager.deleteVaultedPaymentMethod(e),await this.fetchVaultedPaymentMethods()}catch(r){throw this.coreController.setError(r instanceof Error?r:new Error("Failed to delete payment method")),r}};this.setCvvInput=e=>{this.itemController.setCvvInputState(e)};this.startVaultedPaymentFlow=async()=>{if(!this._vaultManager)throw new Error("Vault manager not initialized");let e=this.vaultItemState.selectedVaultedPaymentMethod,r=this.vaultManagerState.cvvRecapture,o=this.vaultItemState.cvvInput;if(!e||r&&(!o||o.metadata.error)){this.itemController.setFormDirty(!0);return}this.host.sdkStateController.startProcessing();try{await this._vaultManager.startPaymentFlow(e.id,r?{cvv:o.valueToken}:void 0)}catch(a){E.error("VaultManagerController: Error starting vaulted payment flow",a),this.coreController.setError(a instanceof Error?a:new Error("Failed to start vaulted payment flow")),this.host.sdkStateController.stopProcessing()}};this.setSelectedVaultedPaymentMethod=e=>{this.itemController.setSelectedPaymentMethod(e),this.itemController.setFormDirty(!1)};this.coreController=new $r(e,{deleteVaultedPaymentMethod:this.deleteVaultedPaymentMethod.bind(this),startVaultedPaymentFlow:this.startVaultedPaymentFlow.bind(this),createCvvInput:this.createCvvInput}),this.itemController=new Yr(e,{setCvvInput:this.setCvvInput.bind(this),setSelectedVaultedPaymentMethod:this.setSelectedVaultedPaymentMethod.bind(this)}),this.addController(this.coreController),this.addController(this.itemController),new I(this.host,{task:async([r,o])=>{if(!r||!o?.vaultEnabled)return this.coreController.disable(),T;this.coreController.setLoading(!0);try{this.coreController.initializeVaultManager(r,o.vaultEnabled,!!o.captureVaultedCardCvv,o.showEmptyState??!0),this.itemController.initializeCvv(r.createCvvInput),await this.fetchVaultedPaymentMethods(!0),E.log("VaultManagerController: Vault initialized successfully",{coreState:this.coreController.currentState,cvvState:this.itemController.currentState})}catch(a){E.error("VaultManagerController: Failed to initialize vault",a),this.coreController.setError(a instanceof Error?a:new Error("Unknown error"))}return this._vaultManager},args:()=>[this.vaultManager,this.options]})}initializeVaultManager(e,r){this.vaultManager=e,this.options=r??null}get vaultManager(){return this._vaultManager}set vaultManager(e){this._vaultManager=e,this.host.requestUpdate()}get options(){return this._options}set options(e){this._options=e,this.host.requestUpdate()}get vaultManagerState(){return this.coreController.currentState}get vaultItemState(){return this.itemController.currentState}hostDisconnected(){super.hostDisconnected(),this.vaultManager=null,this.coreController.reset()}async fetchVaultedPaymentMethods(e){if(!this._vaultManager)throw new Error("Vault manager not initialized");try{e||this.coreController.setUpdating(!0);let r=await this._vaultManager.fetchVaultedPaymentMethods();return E.log("VaultManagerController: Fetched payment methods",r),this.coreController.updatePaymentMethods(r),r}catch(r){throw this.coreController.setError(r instanceof Error?r:new Error("Failed to fetch payment methods")),r}}};var bt="lit-localize-status";var Ni=i=>typeof i!="string"&&"strTag"in i,Xt=(i,t,e)=>{let r=i[0];for(let o=1;o<i.length;o++)r+=t[e?e[o-1]:o-1],r+=i[o];return r};var Ct=i=>Ni(i)?Xt(i.strings,i.values):i;var x=Ct,Ii=!1;function Vr(i){if(Ii)throw new Error("lit-localize can only be configured once");x=i,Ii=!0}var Ur=class{constructor(t){this.__litLocalizeEventHandler=e=>{e.detail.status==="ready"&&this.host.requestUpdate()},this.host=t}hostConnected(){window.addEventListener(bt,this.__litLocalizeEventHandler)}hostDisconnected(){window.removeEventListener(bt,this.__litLocalizeEventHandler)}},tn=i=>i.addController(new Ur(i)),Li=tn;var R=()=>(i,t)=>(i.addInitializer(Li),i);var Et=class{constructor(){this.settled=!1,this.promise=new Promise((t,e)=>{this._resolve=t,this._reject=e})}resolve(t){this.settled=!0,this._resolve(t)}reject(t){this.settled=!0,this._reject(t)}};var he=[];for(let i=0;i<256;i++)he[i]=(i>>4&15).toString(16)+(i&15).toString(16);function Oi(i){let t=0,e=8997,r=0,o=33826,a=0,n=40164,s=0,d=52210;for(let c=0;c<i.length;c++)e^=i.charCodeAt(c),t=e*435,r=o*435,a=n*435,s=d*435,a+=e<<8,s+=o<<8,r+=t>>>16,e=t&65535,a+=r>>>16,o=r&65535,d=s+(a>>>16)&65535,n=a&65535;return he[d>>8]+he[d&255]+he[n>>8]+he[n&255]+he[o>>8]+he[o&255]+he[e>>8]+he[e&255]}var rn="",on="h",an="s";function Ri(i,t){return(t?on:an)+Oi(typeof i=="string"?i:i.join(rn))}var Di=new WeakMap,$i=new Map;function Yi(i,t,e){if(i){let r=e?.id??nn(t),o=i[r];if(o){if(typeof o=="string")return o;if("strTag"in o)return Xt(o.strings,t.values,o.values);{let a=Di.get(o);return a===void 0&&(a=o.values,Di.set(o,a)),{...o,values:a.map(n=>t.values[n])}}}}return Ct(t)}function nn(i){let t=typeof i=="string"?i:i.strings,e=$i.get(t);return e===void 0&&(e=Ri(t,typeof i!="string"&&!("strTag"in i)),$i.set(t,e)),e}function Hr(i){window.dispatchEvent(new CustomEvent(bt,{detail:i}))}var er="",Br,Vi,tr,zr,Ui,Ue=new Et;Ue.resolve();var Qt=0,Hi=i=>(Vr((t,e)=>Yi(Ui,t,e)),er=Vi=i.sourceLocale,tr=new Set(i.targetLocales),tr.add(i.sourceLocale),zr=i.loadLocale,{getLocale:sn,setLocale:ln}),sn=()=>er,ln=i=>{if(i===(Br??er))return Ue.promise;if(!tr||!zr)throw new Error("Internal error");if(!tr.has(i))throw new Error("Invalid locale code");Qt++;let t=Qt;return Br=i,Ue.settled&&(Ue=new Et),Hr({status:"loading",loadingLocale:i}),(i===Vi?Promise.resolve({templates:void 0}):zr(i)).then(r=>{Qt===t&&(er=i,Br=void 0,Ui=r.templates,Hr({status:"ready",readyLocale:i}),Ue.resolve())},r=>{Qt===t&&(Hr({status:"error",errorLocale:i,errorMessage:r.toString()}),Ue.reject(r))}),Ue.promise};var Fr="en",jr=["ar","bg","ca","cs","da","de","el","en-GB","es","es-AR","es-MX","et-EE","fi-FI","fr","he","hr","hu","id","it","ja","ko","lt","lt-LT","lv","lv-LV","ms","nb","nl","nl_NL","pl","pt","pt-BR","ro","ru","sk","sl","sr-RS","sv","th","tr","uk-UA","vi","zf","zh-CN","zh-HK","zh-TW"],Bi="You must call `loadLocale` first to set up the localized template.",zi,rr,Fi=i=>{let t=Hi({sourceLocale:Fr,targetLocales:jr,loadLocale:i});zi=t.getLocale,rr=t.setLocale};var Kr=i=>{Fi(i)},Gr=i=>{if(!rr)throw new Error(Bi);return rr(i)};var At=new Set(jr);At.add(Fr);var qr=i=>{if(typeof i!="string")return!1;if(i==="en")return!0;let t=i.replace("_","-");if(At.has(t))return!0;let e=t.split("-")[0];return!!At.has(e)},Wr=i=>{if(i==="en")return"en-GB";let t=i.replace("_","-");if(At.has(t))return t;let e=t.split("-")[0];return At.has(e)?e:"en-GB"};var ir=globalThis,or=ir.ShadowRoot&&(ir.ShadyCSS===void 0||ir.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,Jr=Symbol(),ji=new WeakMap,_t=class{constructor(t,e,r){if(this._$cssResult$=!0,r!==Jr)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o,e=this.t;if(or&&t===void 0){let r=e!==void 0&&e.length===1;r&&(t=ji.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),r&&ji.set(e,t))}return t}toString(){return this.cssText}},ae=i=>new _t(typeof i=="string"?i:i+"",void 0,Jr),g=(i,...t)=>{let e=i.length===1?i[0]:t.reduce((r,o,a)=>r+(n=>{if(n._$cssResult$===!0)return n.cssText;if(typeof n=="number")return n;throw Error("Value passed to 'css' function must be a 'css' function result: "+n+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(o)+i[a+1],i[0]);return new _t(e,i,Jr)},Ki=(i,t)=>{if(or)i.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(let e of t){let r=document.createElement("style"),o=ir.litNonce;o!==void 0&&r.setAttribute("nonce",o),r.textContent=e.cssText,i.appendChild(r)}},Zr=or?i=>i:i=>i instanceof CSSStyleSheet?(t=>{let e="";for(let r of t.cssRules)e+=r.cssText;return ae(e)})(i):i;var{is:dn,defineProperty:cn,getOwnPropertyDescriptor:pn,getOwnPropertyNames:un,getOwnPropertySymbols:mn,getPrototypeOf:hn}=Object,Me=globalThis,Gi=Me.trustedTypes,fn=Gi?Gi.emptyScript:"",yn=Me.reactiveElementPolyfillSupport,xt=(i,t)=>i,St={toAttribute(i,t){switch(t){case Boolean:i=i?fn:null;break;case Object:case Array:i=i==null?i:JSON.stringify(i)}return i},fromAttribute(i,t){let e=i;switch(t){case Boolean:e=i!==null;break;case Number:e=i===null?null:Number(i);break;case Object:case Array:try{e=JSON.parse(i)}catch{e=null}}return e}},ar=(i,t)=>!dn(i,t),qi={attribute:!0,type:String,converter:St,reflect:!1,useDefault:!1,hasChanged:ar};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),Me.litPropertyMetadata??(Me.litPropertyMetadata=new WeakMap);var fe=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??(this.l=[])).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=qi){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){let r=Symbol(),o=this.getPropertyDescriptor(t,r,e);o!==void 0&&cn(this.prototype,t,o)}}static getPropertyDescriptor(t,e,r){let{get:o,set:a}=pn(this.prototype,t)??{get(){return this[e]},set(n){this[e]=n}};return{get:o,set(n){let s=o?.call(this);a?.call(this,n),this.requestUpdate(t,s,r)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??qi}static _$Ei(){if(this.hasOwnProperty(xt("elementProperties")))return;let t=hn(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(xt("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(xt("properties"))){let e=this.properties,r=[...un(e),...mn(e)];for(let o of r)this.createProperty(o,e[o])}let t=this[Symbol.metadata];if(t!==null){let e=litPropertyMetadata.get(t);if(e!==void 0)for(let[r,o]of e)this.elementProperties.set(r,o)}this._$Eh=new Map;for(let[e,r]of this.elementProperties){let o=this._$Eu(e,r);o!==void 0&&this._$Eh.set(o,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){let e=[];if(Array.isArray(t)){let r=new Set(t.flat(1/0).reverse());for(let o of r)e.unshift(Zr(o))}else t!==void 0&&e.push(Zr(t));return e}static _$Eu(t,e){let r=e.attribute;return r===!1?void 0:typeof r=="string"?r:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??(this._$EO=new Set)).add(t),this.renderRoot!==void 0&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){let t=new Map,e=this.constructor.elementProperties;for(let r of e.keys())this.hasOwnProperty(r)&&(t.set(r,this[r]),delete this[r]);t.size>0&&(this._$Ep=t)}createRenderRoot(){let t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return Ki(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,r){this._$AK(t,r)}_$ET(t,e){let r=this.constructor.elementProperties.get(t),o=this.constructor._$Eu(t,r);if(o!==void 0&&r.reflect===!0){let a=(r.converter?.toAttribute!==void 0?r.converter:St).toAttribute(e,r.type);this._$Em=t,a==null?this.removeAttribute(o):this.setAttribute(o,a),this._$Em=null}}_$AK(t,e){let r=this.constructor,o=r._$Eh.get(t);if(o!==void 0&&this._$Em!==o){let a=r.getPropertyOptions(o),n=typeof a.converter=="function"?{fromAttribute:a.converter}:a.converter?.fromAttribute!==void 0?a.converter:St;this._$Em=o,this[o]=n.fromAttribute(e,a.type)??this._$Ej?.get(o)??null,this._$Em=null}}requestUpdate(t,e,r){if(t!==void 0){let o=this.constructor,a=this[t];if(r??(r=o.getPropertyOptions(t)),!((r.hasChanged??ar)(a,e)||r.useDefault&&r.reflect&&a===this._$Ej?.get(t)&&!this.hasAttribute(o._$Eu(t,r))))return;this.C(t,e,r)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,e,{useDefault:r,reflect:o,wrapped:a},n){r&&!(this._$Ej??(this._$Ej=new Map)).has(t)&&(this._$Ej.set(t,n??e??this[t]),a!==!0||n!==void 0)||(this._$AL.has(t)||(this.hasUpdated||r||(e=void 0),this._$AL.set(t,e)),o===!0&&this._$Em!==t&&(this._$Eq??(this._$Eq=new Set)).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}let t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(let[o,a]of this._$Ep)this[o]=a;this._$Ep=void 0}let r=this.constructor.elementProperties;if(r.size>0)for(let[o,a]of r){let{wrapped:n}=a,s=this[o];n!==!0||this._$AL.has(o)||s===void 0||this.C(o,void 0,a,s)}}let t=!1,e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(r=>r.hostUpdate?.()),this.update(e)):this._$EM()}catch(r){throw t=!1,this._$EM(),r}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&(this._$Eq=this._$Eq.forEach(e=>this._$ET(e,this[e]))),this._$EM()}updated(t){}firstUpdated(t){}};fe.elementStyles=[],fe.shadowRootOptions={mode:"open"},fe[xt("elementProperties")]=new Map,fe[xt("finalized")]=new Map,yn?.({ReactiveElement:fe}),(Me.reactiveElementVersions??(Me.reactiveElementVersions=[])).push("2.1.0");var wt=globalThis,nr=wt.trustedTypes,Wi=nr?nr.createPolicy("lit-html",{createHTML:i=>i}):void 0,Qr="$lit$",ye=`lit$${Math.random().toFixed(9).slice(2)}$`,ei="?"+ye,gn=`<${ei}>`,ze=document,Tt=()=>ze.createComment(""),Mt=i=>i===null||typeof i!="object"&&typeof i!="function",ti=Array.isArray,to=i=>ti(i)||typeof i?.[Symbol.iterator]=="function",Xr=`[
2
+ \f\r]`,Pt=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Ji=/-->/g,Zi=/>/g,He=RegExp(`>|${Xr}(?:([^\\s"'>=/]+)(${Xr}*=${Xr}*(?:[^
3
+ \f\r"'\`<>=]|("|')|))|$)`,"g"),Xi=/'/g,Qi=/"/g,ro=/^(?:script|style|textarea|title)$/i,ri=i=>(t,...e)=>({_$litType$:i,strings:t,values:e}),u=ri(1),ne=ri(2),au=ri(3),ge=Symbol.for("lit-noChange"),h=Symbol.for("lit-nothing"),eo=new WeakMap,Be=ze.createTreeWalker(ze,129);function io(i,t){if(!ti(i)||!i.hasOwnProperty("raw"))throw Error("invalid template strings array");return Wi!==void 0?Wi.createHTML(t):t}var oo=(i,t)=>{let e=i.length-1,r=[],o,a=t===2?"<svg>":t===3?"<math>":"",n=Pt;for(let s=0;s<e;s++){let d=i[s],c,m,f=-1,y=0;for(;y<d.length&&(n.lastIndex=y,m=n.exec(d),m!==null);)y=n.lastIndex,n===Pt?m[1]==="!--"?n=Ji:m[1]!==void 0?n=Zi:m[2]!==void 0?(ro.test(m[2])&&(o=RegExp("</"+m[2],"g")),n=He):m[3]!==void 0&&(n=He):n===He?m[0]===">"?(n=o??Pt,f=-1):m[1]===void 0?f=-2:(f=n.lastIndex-m[2].length,c=m[1],n=m[3]===void 0?He:m[3]==='"'?Qi:Xi):n===Qi||n===Xi?n=He:n===Ji||n===Zi?n=Pt:(n=He,o=void 0);let A=n===He&&i[s+1].startsWith("/>")?" ":"";a+=n===Pt?d+gn:f>=0?(r.push(c),d.slice(0,f)+Qr+d.slice(f)+ye+A):d+ye+(f===-2?s:A)}return[io(i,a+(i[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),r]},kt=class i{constructor({strings:t,_$litType$:e},r){let o;this.parts=[];let a=0,n=0,s=t.length-1,d=this.parts,[c,m]=oo(t,e);if(this.el=i.createElement(c,r),Be.currentNode=this.el.content,e===2||e===3){let f=this.el.content.firstChild;f.replaceWith(...f.childNodes)}for(;(o=Be.nextNode())!==null&&d.length<s;){if(o.nodeType===1){if(o.hasAttributes())for(let f of o.getAttributeNames())if(f.endsWith(Qr)){let y=m[n++],A=o.getAttribute(f).split(ye),P=/([.?@])?(.*)/.exec(y);d.push({type:1,index:a,name:P[2],strings:A,ctor:P[1]==="."?lr:P[1]==="?"?dr:P[1]==="@"?cr:je}),o.removeAttribute(f)}else f.startsWith(ye)&&(d.push({type:6,index:a}),o.removeAttribute(f));if(ro.test(o.tagName)){let f=o.textContent.split(ye),y=f.length-1;if(y>0){o.textContent=nr?nr.emptyScript:"";for(let A=0;A<y;A++)o.append(f[A],Tt()),Be.nextNode(),d.push({type:2,index:++a});o.append(f[y],Tt())}}}else if(o.nodeType===8)if(o.data===ei)d.push({type:2,index:a});else{let f=-1;for(;(f=o.data.indexOf(ye,f+1))!==-1;)d.push({type:7,index:a}),f+=ye.length-1}a++}}static createElement(t,e){let r=ze.createElement("template");return r.innerHTML=t,r}};function Fe(i,t,e=i,r){if(t===ge)return t;let o=r!==void 0?e._$Co?.[r]:e._$Cl,a=Mt(t)?void 0:t._$litDirective$;return o?.constructor!==a&&(o?._$AO?.(!1),a===void 0?o=void 0:(o=new a(i),o._$AT(i,e,r)),r!==void 0?(e._$Co??(e._$Co=[]))[r]=o:e._$Cl=o),o!==void 0&&(t=Fe(i,o._$AS(i,t.values),o,r)),t}var sr=class{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){let{el:{content:e},parts:r}=this._$AD,o=(t?.creationScope??ze).importNode(e,!0);Be.currentNode=o;let a=Be.nextNode(),n=0,s=0,d=r[0];for(;d!==void 0;){if(n===d.index){let c;d.type===2?c=new nt(a,a.nextSibling,this,t):d.type===1?c=new d.ctor(a,d.name,d.strings,this,t):d.type===6&&(c=new pr(a,this,t)),this._$AV.push(c),d=r[++s]}n!==d?.index&&(a=Be.nextNode(),n++)}return Be.currentNode=ze,o}p(t){let e=0;for(let r of this._$AV)r!==void 0&&(r.strings!==void 0?(r._$AI(t,r,e),e+=r.strings.length-2):r._$AI(t[e])),e++}},nt=class i{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,r,o){this.type=2,this._$AH=h,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=r,this.options=o,this._$Cv=o?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode,e=this._$AM;return e!==void 0&&t?.nodeType===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=Fe(this,t,e),Mt(t)?t===h||t==null||t===""?(this._$AH!==h&&this._$AR(),this._$AH=h):t!==this._$AH&&t!==ge&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):to(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==h&&Mt(this._$AH)?this._$AA.nextSibling.data=t:this.T(ze.createTextNode(t)),this._$AH=t}$(t){let{values:e,_$litType$:r}=t,o=typeof r=="number"?this._$AC(t):(r.el===void 0&&(r.el=kt.createElement(io(r.h,r.h[0]),this.options)),r);if(this._$AH?._$AD===o)this._$AH.p(e);else{let a=new sr(o,this),n=a.u(this.options);a.p(e),this.T(n),this._$AH=a}}_$AC(t){let e=eo.get(t.strings);return e===void 0&&eo.set(t.strings,e=new kt(t)),e}k(t){ti(this._$AH)||(this._$AH=[],this._$AR());let e=this._$AH,r,o=0;for(let a of t)o===e.length?e.push(r=new i(this.O(Tt()),this.O(Tt()),this,this.options)):r=e[o],r._$AI(a),o++;o<e.length&&(this._$AR(r&&r._$AB.nextSibling,o),e.length=o)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t&&t!==this._$AB;){let r=t.nextSibling;t.remove(),t=r}}setConnected(t){this._$AM===void 0&&(this._$Cv=t,this._$AP?.(t))}},je=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,r,o,a){this.type=1,this._$AH=h,this._$AN=void 0,this.element=t,this.name=e,this._$AM=o,this.options=a,r.length>2||r[0]!==""||r[1]!==""?(this._$AH=Array(r.length-1).fill(new String),this.strings=r):this._$AH=h}_$AI(t,e=this,r,o){let a=this.strings,n=!1;if(a===void 0)t=Fe(this,t,e,0),n=!Mt(t)||t!==this._$AH&&t!==ge,n&&(this._$AH=t);else{let s=t,d,c;for(t=a[0],d=0;d<a.length-1;d++)c=Fe(this,s[r+d],e,d),c===ge&&(c=this._$AH[d]),n||(n=!Mt(c)||c!==this._$AH[d]),c===h?t=h:t!==h&&(t+=(c??"")+a[d+1]),this._$AH[d]=c}n&&!o&&this.j(t)}j(t){t===h?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}},lr=class extends je{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===h?void 0:t}},dr=class extends je{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==h)}},cr=class extends je{constructor(t,e,r,o,a){super(t,e,r,o,a),this.type=5}_$AI(t,e=this){if((t=Fe(this,t,e,0)??h)===ge)return;let r=this._$AH,o=t===h&&r!==h||t.capture!==r.capture||t.once!==r.once||t.passive!==r.passive,a=t!==h&&(r===h||o);o&&this.element.removeEventListener(this.name,this,r),a&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}},pr=class{constructor(t,e,r){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=r}get _$AU(){return this._$AM._$AU}_$AI(t){Fe(this,t)}},ao={M:Qr,P:ye,A:ei,C:1,L:oo,R:sr,D:to,V:Fe,I:nt,H:je,N:dr,U:cr,B:lr,F:pr},vn=wt.litHtmlPolyfillSupport;vn?.(kt,nt),(wt.litHtmlVersions??(wt.litHtmlVersions=[])).push("3.3.0");var no=(i,t,e)=>{let r=e?.renderBefore??t,o=r._$litPart$;if(o===void 0){let a=e?.renderBefore??null;r._$litPart$=o=new nt(t.insertBefore(Tt(),a),a,void 0,e??{})}return o._$AI(i),o};var Nt=globalThis,v=class extends fe{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var e;let t=super.createRenderRoot();return(e=this.renderOptions).renderBefore??(e.renderBefore=t.firstChild),t}update(t){let e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=no(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return ge}};v._$litElement$=!0,v.finalized=!0,Nt.litElementHydrateSupport?.({LitElement:v});var bn=Nt.litElementPolyfillSupport;bn?.({LitElement:v});(Nt.litElementVersions??(Nt.litElementVersions=[])).push("4.2.0");var b=i=>(t,e)=>{e!==void 0?e.addInitializer(()=>{customElements.define(i,t)}):customElements.define(i,t)};var Cn={attribute:!0,type:String,converter:St,reflect:!1,hasChanged:ar},En=(i=Cn,t,e)=>{let{kind:r,metadata:o}=e,a=globalThis.litPropertyMetadata.get(o);if(a===void 0&&globalThis.litPropertyMetadata.set(o,a=new Map),r==="setter"&&((i=Object.create(i)).wrapped=!0),a.set(e.name,i),r==="accessor"){let{name:n}=e;return{set(s){let d=t.get.call(this);t.set.call(this,s),this.requestUpdate(n,d,i)},init(s){return s!==void 0&&this.C(n,void 0,i,s),s}}}if(r==="setter"){let{name:n}=e;return function(s){let d=this[n];t.call(this,s),this.requestUpdate(n,d,i)}}throw Error("Unsupported decorator location: "+r)};function p(i){return(t,e)=>typeof e=="object"?En(i,t,e):((r,o,a)=>{let n=o.hasOwnProperty(a);return o.constructor.createProperty(a,r),n?Object.getOwnPropertyDescriptor(o,a):void 0})(i,t,e)}function S(i){return p({...i,state:!0,attribute:!1})}var Ke=(i,t,e)=>(e.configurable=!0,e.enumerable=!0,Reflect.decorate&&typeof t!="object"&&Object.defineProperty(i,t,e),e);function ke(i,t){return(e,r,o)=>{let a=n=>n.renderRoot?.querySelector(i)??null;if(t){let{get:n,set:s}=typeof r=="object"?e:o??(()=>{let d=Symbol();return{get(){return this[d]},set(c){this[d]=c}}})();return Ke(e,r,{get(){let d=n.call(this);return d===void 0&&(d=a(this),(d!==null||this.hasUpdated)&&s.call(this,d)),d}})}return Ke(e,r,{get(){return a(this)}})}}function L(i,t,e){return i?t(i):e?.(i)}var M=g` * { box-sizing: border-box; } `,so=g` :host { display: block; isolation: isolate; position: relative; width: 100%; //Keep the CSS loader in the same position - check css-loader-inline.ts min-height: 64px; } `;var lo="https://sdk.primer.io/web/v2-latest/Primer.min.js",se="20px";var ur=class{constructor(t){this._methods=t}get(t){return this._methods.get(t)}toArray(){return Array.from(this._methods.values())}size(){return this._methods.size}};var mr=class{constructor(t){this.paymentMethods=null;this.headlessInstance=t}setPaymentMethods(t){this.paymentMethods=t}async refreshSession(){if(!this.headlessInstance){E.error("PrimerJS: Cannot refresh session: Headless instance not available");return}try{await this.headlessInstance.refreshClientSession()}catch(t){throw E.error("PrimerJS: Error refreshing client session:",t),t}}getPaymentMethods(){return this.paymentMethods?this.paymentMethods.toArray():(E.warn("PrimerJS: Payment methods not available"),[])}handlePaymentStart(){this.onPaymentStart&&this.onPaymentStart()}handleBeforePaymentCreate(t,e){if(this.onPaymentPrepare){let r={continuePaymentCreation:()=>{E.info("PrimerJS: Payment creation continuing"),e.continuePaymentCreation()},abortPaymentCreation:()=>{E.info("PrimerJS: Payment creation aborted"),e.abortPaymentCreation()}};this.onPaymentPrepare(t,r)}else E.info("PrimerJS: No payment prepare handler, continuing by default"),e.continuePaymentCreation()}handlePaymentComplete(t){this.onPaymentComplete&&this.onPaymentComplete({payment:t,status:"success"})}handlePaymentFailure(t,e){this.onPaymentComplete&&this.onPaymentComplete({payment:e||null,status:"error",error:t})}};var co=typeof window<"u"&&typeof window.document<"u";function An(i){return document.querySelector(`script[src^="${i}"]`)}function _n(i,t){let e=document.createElement("script");return e.setAttribute("src",i),e.setAttribute("async",""),e.setAttribute("crossorigin","anonymous"),t&&e.setAttribute("type","module"),e}function po(i,t=!1){if(!co)throw new Error("Cannot load script in server environment");let e=An(i)??_n(i,t);return new Promise((r,o)=>{e.onload=()=>{r()},e.onerror=()=>{o(new Error(`Failed to load script: ${i}`))},e.parentNode||document.head.appendChild(e)})}var xn={"../../node_modules/card-validator/dist/card-number.js":function(i,t,e){Object.defineProperty(t,"__esModule",{value:!0}),t.cardNumber=void 0;var r=e("../../node_modules/card-validator/dist/luhn-10.js"),o=e("../../node_modules/credit-card-type/dist/index.js");function a(s,d,c){return{card:s,isPotentiallyValid:d,isValid:c}}function n(s,d){d===void 0&&(d={});var c,m,f;if(typeof s!="string"&&typeof s!="number")return a(null,!1,!1);var y=String(s).replace(/-|\s/g,"");if(!/^\d*$/.test(y))return a(null,!1,!1);var A=o(y);if(A.length===0)return a(null,!1,!1);if(A.length!==1)return a(null,!0,!1);var P=A[0];if(d.maxLength&&y.length>d.maxLength)return a(P,!1,!1);m=d.skipLuhnValidation===!0||P.type===o.types.UNIONPAY&&d.luhnValidateUnionPay!==!0?!0:r(y),f=Math.max.apply(null,P.lengths),d.maxLength&&(f=Math.min(d.maxLength,f));for(var w=0;w<P.lengths.length;w++)if(P.lengths[w]===y.length)return c=y.length<f||m,a(P,c,m);return a(P,y.length<f,!1)}t.cardNumber=n},"../../node_modules/card-validator/dist/cardholder-name.js":function(i,t){Object.defineProperty(t,"__esModule",{value:!0}),t.cardholderName=void 0;var e=/^[\d\s-]*$/,r=255;function o(n,s){return{isValid:n,isPotentiallyValid:s}}function a(n){return typeof n!="string"?o(!1,!1):n.length===0?o(!1,!0):n.length>r?o(!1,!1):e.test(n)?o(!1,!0):o(!0,!0)}t.cardholderName=a},"../../node_modules/card-validator/dist/cvv.js":function(i,t){Object.defineProperty(t,"__esModule",{value:!0}),t.cvv=void 0;var e=3;function r(s,d){for(var c=0;c<s.length;c++)if(d===s[c])return!0;return!1}function o(s){for(var d=e,c=0;c<s.length;c++)d=s[c]>d?s[c]:d;return d}function a(s,d){return{isValid:s,isPotentiallyValid:d}}function n(s,d){return d===void 0&&(d=e),d=d instanceof Array?d:[d],typeof s!="string"||!/^\d*$/.test(s)?a(!1,!1):r(d,s.length)?a(!0,!0):s.length<Math.min.apply(null,d)?a(!1,!0):s.length>o(d)?a(!1,!1):a(!0,!0)}t.cvv=n},"../../node_modules/card-validator/dist/expiration-date.js":function(i,t,e){var r=this&&this.__assign||function(){return r=Object.assign||function(c){for(var m,f=1,y=arguments.length;f<y;f++){m=arguments[f];for(var A in m)Object.prototype.hasOwnProperty.call(m,A)&&(c[A]=m[A])}return c},r.apply(this,arguments)};Object.defineProperty(t,"__esModule",{value:!0}),t.expirationDate=void 0;var o=e("../../node_modules/card-validator/dist/lib/parse-date.js"),a=e("../../node_modules/card-validator/dist/expiration-month.js"),n=e("../../node_modules/card-validator/dist/expiration-year.js");function s(c,m,f,y){return{isValid:c,isPotentiallyValid:m,month:f,year:y}}function d(c,m){var f;if(typeof c=="string")c=c.replace(/^(\d\d) (\d\d(\d\d)?)$/,"$1/$2"),f=(0,o.parseDate)(String(c));else{if(c===null||typeof c!="object")return s(!1,!1,null,null);var y=r({},c);f={month:String(y.month),year:String(y.year)}}var A=(0,a.expirationMonth)(f.month),P=(0,n.expirationYear)(f.year,m);if(A.isValid){if(P.isCurrentYear){var w=A.isValidForThisYear;return s(w,w,f.month,f.year)}if(P.isValid)return s(!0,!0,f.month,f.year)}return A.isPotentiallyValid&&P.isPotentiallyValid?s(!1,!0,null,null):s(!1,!1,null,null)}t.expirationDate=d},"../../node_modules/card-validator/dist/expiration-month.js":function(i,t){Object.defineProperty(t,"__esModule",{value:!0}),t.expirationMonth=void 0;function e(o,a,n){return{isValid:o,isPotentiallyValid:a,isValidForThisYear:n||!1}}function r(o){var a=new Date().getMonth()+1;if(typeof o!="string")return e(!1,!1);if(o.replace(/\s/g,"")===""||o==="0")return e(!1,!0);if(!/^\d*$/.test(o))return e(!1,!1);var n=parseInt(o,10);if(isNaN(Number(o)))return e(!1,!1);var s=n>0&&n<13;return e(s,s,s&&n>=a)}t.expirationMonth=r},"../../node_modules/card-validator/dist/expiration-year.js":function(i,t){Object.defineProperty(t,"__esModule",{value:!0}),t.expirationYear=void 0;var e=19;function r(a,n,s){return{isValid:a,isPotentiallyValid:n,isCurrentYear:s||!1}}function o(a,n){n===void 0&&(n=e);var s;if(typeof a!="string")return r(!1,!1);if(a.replace(/\s/g,"")==="")return r(!1,!0);if(!/^\d*$/.test(a))return r(!1,!1);var d=a.length;if(d<2)return r(!1,!0);var c=new Date().getFullYear();if(d===3){var m=a.slice(0,2),f=String(c).slice(0,2);return r(!1,m===f)}if(d>4)return r(!1,!1);var y=parseInt(a,10),A=Number(String(c).substr(2,2)),P=!1;if(d===2){if(String(c).substr(0,2)===a)return r(!1,!0);s=A===y,P=y>=A&&y<=A+n}else d===4&&(s=c===y,P=y>=c&&y<=c+n);return r(P,P,s)}t.expirationYear=o},"../../node_modules/card-validator/dist/index.js":function(i,t,e){var r=this&&this.__createBinding||(Object.create?function(w,N,_,k){k===void 0&&(k=_);var $=Object.getOwnPropertyDescriptor(N,_);(!$||("get"in $?!N.__esModule:$.writable||$.configurable))&&($={enumerable:!0,get:function(){return N[_]}}),Object.defineProperty(w,k,$)}:function(w,N,_,k){k===void 0&&(k=_),w[k]=N[_]}),o=this&&this.__setModuleDefault||(Object.create?function(w,N){Object.defineProperty(w,"default",{enumerable:!0,value:N})}:function(w,N){w.default=N}),a=this&&this.__importStar||function(w){if(w&&w.__esModule)return w;var N={};if(w!=null)for(var _ in w)_!=="default"&&Object.prototype.hasOwnProperty.call(w,_)&&r(N,w,_);return o(N,w),N},n=a(e("../../node_modules/credit-card-type/dist/index.js")),s=e("../../node_modules/card-validator/dist/cardholder-name.js"),d=e("../../node_modules/card-validator/dist/card-number.js"),c=e("../../node_modules/card-validator/dist/expiration-date.js"),m=e("../../node_modules/card-validator/dist/expiration-month.js"),f=e("../../node_modules/card-validator/dist/expiration-year.js"),y=e("../../node_modules/card-validator/dist/cvv.js"),A=e("../../node_modules/card-validator/dist/postal-code.js"),P={creditCardType:n,cardholderName:s.cardholderName,number:d.cardNumber,expirationDate:c.expirationDate,expirationMonth:m.expirationMonth,expirationYear:f.expirationYear,cvv:y.cvv,postalCode:A.postalCode};i.exports=P},"../../node_modules/card-validator/dist/lib/is-array.js":function(i,t){Object.defineProperty(t,"__esModule",{value:!0}),t.isArray=void 0,t.isArray=Array.isArray||function(e){return Object.prototype.toString.call(e)==="[object Array]"}},"../../node_modules/card-validator/dist/lib/parse-date.js":function(i,t,e){Object.defineProperty(t,"__esModule",{value:!0}),t.parseDate=void 0;var r=e("../../node_modules/card-validator/dist/expiration-year.js"),o=e("../../node_modules/card-validator/dist/lib/is-array.js");function a(s){var d=Number(s[0]),c;return d===0?2:d>1||d===1&&Number(s[1])>2?1:d===1?(c=s.substr(1),(0,r.expirationYear)(c).isPotentiallyValid?1:2):s.length===5?1:s.length>5?2:1}function n(s){var d;if(/^\d{4}-\d{1,2}$/.test(s)?d=s.split("-").reverse():/\//.test(s)?d=s.split(/\s*\/\s*/g):/\s/.test(s)&&(d=s.split(/ +/g)),(0,o.isArray)(d))return{month:d[0]||"",year:d.slice(1).join()};var c=a(s),m=s.substr(0,c);return{month:m,year:s.substr(m.length)}}t.parseDate=n},"../../node_modules/card-validator/dist/luhn-10.js":function(i){function t(e){for(var r=0,o=!1,a=e.length-1,n;a>=0;)n=parseInt(e.charAt(a),10),o&&(n*=2,n>9&&(n=n%10+1)),o=!o,r+=n,a--;return r%10===0}i.exports=t},"../../node_modules/card-validator/dist/postal-code.js":function(i,t){Object.defineProperty(t,"__esModule",{value:!0}),t.postalCode=void 0;var e=3,r=new RegExp(/^[a-z0-9]+$/i);function o(n,s){return{isValid:n,isPotentiallyValid:s}}function a(n,s){s===void 0&&(s={});var d=s.minLength||e;return typeof n!="string"?o(!1,!1):n.length<d||!r.test(n.trim().slice(0,d))?o(!1,!0):o(!0,!0)}t.postalCode=a},"../../node_modules/credit-card-type/dist/index.js":function(i,t,e){var r=this&&this.__assign||function(){return r=Object.assign||function(_){for(var k,$=1,xe=arguments.length;$<xe;$++){k=arguments[$];for(var ft in k)Object.prototype.hasOwnProperty.call(k,ft)&&(_[ft]=k[ft])}return _},r.apply(this,arguments)},o=e("../../node_modules/credit-card-type/dist/lib/card-types.js"),a=e("../../node_modules/credit-card-type/dist/lib/add-matching-cards-to-results.js"),n=e("../../node_modules/credit-card-type/dist/lib/is-valid-input-type.js"),s=e("../../node_modules/credit-card-type/dist/lib/find-best-match.js"),d=e("../../node_modules/credit-card-type/dist/lib/clone.js"),c={},m={VISA:"visa",MASTERCARD:"mastercard",AMERICAN_EXPRESS:"american-express",DINERS_CLUB:"diners-club",DISCOVER:"discover",JCB:"jcb",UNIONPAY:"unionpay",MAESTRO:"maestro",ELO:"elo",MIR:"mir",HIPER:"hiper",HIPERCARD:"hipercard"},f=[m.VISA,m.MASTERCARD,m.AMERICAN_EXPRESS,m.DINERS_CLUB,m.DISCOVER,m.JCB,m.UNIONPAY,m.MAESTRO,m.ELO,m.MIR,m.HIPER,m.HIPERCARD],y=(0,d.clone)(f);function A(_){return c[_]||o[_]}function P(){return y.map(function(_){return(0,d.clone)(A(_))})}function w(_,k){k===void 0&&(k=!1);var $=y.indexOf(_);if(!k&&$===-1)throw new Error('"'+_+'" is not a supported card type.');return $}function N(_){var k=[];if(!(0,n.isValidInputType)(_))return k;if(_.length===0)return P();y.forEach(function(xe){var ft=A(xe);(0,a.addMatchingCardsToResults)(_,ft,k)});var $=(0,s.findBestMatch)(k);return $?[$]:k}N.getTypeInfo=function(_){return(0,d.clone)(A(_))},N.removeCard=function(_){var k=w(_);y.splice(k,1)},N.addCard=function(_){var k=w(_.type,!0);c[_.type]=_,k===-1&&y.push(_.type)},N.updateCard=function(_,k){var $=c[_]||o[_];if(!$)throw new Error('"'.concat(_,"\" is not a recognized type. Use `addCard` instead.'"));if(k.type&&$.type!==k.type)throw new Error("Cannot overwrite type parameter.");var xe=(0,d.clone)($);xe=r(r({},xe),k),c[xe.type]=xe},N.changeOrder=function(_,k){var $=w(_);y.splice($,1),y.splice(k,0,_)},N.resetModifications=function(){y=(0,d.clone)(f),c={}},N.types=m,i.exports=N},"../../node_modules/credit-card-type/dist/lib/add-matching-cards-to-results.js":function(i,t,e){Object.defineProperty(t,"__esModule",{value:!0}),t.addMatchingCardsToResults=void 0;var r=e("../../node_modules/credit-card-type/dist/lib/clone.js"),o=e("../../node_modules/credit-card-type/dist/lib/matches.js");function a(n,s,d){var c,m;for(c=0;c<s.patterns.length;c++){var f=s.patterns[c];if((0,o.matches)(n,f)){var y=(0,r.clone)(s);m=Array.isArray(f)?String(f[0]).length:String(f).length,n.length>=m&&(y.matchStrength=m),d.push(y);break}}}t.addMatchingCardsToResults=a},"../../node_modules/credit-card-type/dist/lib/card-types.js":function(i){var t={visa:{niceType:"Visa",type:"visa",patterns:[4],gaps:[4,8,12],lengths:[16,18,19],code:{name:"CVV",size:3}},mastercard:{niceType:"Mastercard",type:"mastercard",patterns:[[51,55],[2221,2229],[223,229],[23,26],[270,271],2720],gaps:[4,8,12],lengths:[16],code:{name:"CVC",size:3}},"american-express":{niceType:"American Express",type:"american-express",patterns:[34,37],gaps:[4,10],lengths:[15],code:{name:"CID",size:4}},"diners-club":{niceType:"Diners Club",type:"diners-club",patterns:[[300,305],36,38,39],gaps:[4,10],lengths:[14,16,19],code:{name:"CVV",size:3}},discover:{niceType:"Discover",type:"discover",patterns:[6011,[644,649],65],gaps:[4,8,12],lengths:[16,19],code:{name:"CID",size:3}},jcb:{niceType:"JCB",type:"jcb",patterns:[2131,1800,[3528,3589]],gaps:[4,8,12],lengths:[16,17,18,19],code:{name:"CVV",size:3}},unionpay:{niceType:"UnionPay",type:"unionpay",patterns:[620,[62100,62182],[62184,62187],[62185,62197],[62200,62205],[622010,622999],622018,[62207,62209],[623,626],6270,6272,6276,[627700,627779],[627781,627799],[6282,6289],6291,6292,810,[8110,8131],[8132,8151],[8152,8163],[8164,8171]],gaps:[4,8,12],lengths:[14,15,16,17,18,19],code:{name:"CVN",size:3}},maestro:{niceType:"Maestro",type:"maestro",patterns:[493698,[5e5,504174],[504176,506698],[506779,508999],[56,59],63,67,6],gaps:[4,8,12],lengths:[12,13,14,15,16,17,18,19],code:{name:"CVC",size:3}},elo:{niceType:"Elo",type:"elo",patterns:[401178,401179,438935,457631,457632,431274,451416,457393,504175,[506699,506778],[509e3,509999],627780,636297,636368,[650031,650033],[650035,650051],[650405,650439],[650485,650538],[650541,650598],[650700,650718],[650720,650727],[650901,650978],[651652,651679],[655e3,655019],[655021,655058]],gaps:[4,8,12],lengths:[16],code:{name:"CVE",size:3}},mir:{niceType:"Mir",type:"mir",patterns:[[2200,2204]],gaps:[4,8,12],lengths:[16,17,18,19],code:{name:"CVP2",size:3}},hiper:{niceType:"Hiper",type:"hiper",patterns:[637095,63737423,63743358,637568,637599,637609,637612],gaps:[4,8,12],lengths:[16],code:{name:"CVC",size:3}},hipercard:{niceType:"Hipercard",type:"hipercard",patterns:[606282],gaps:[4,8,12],lengths:[16],code:{name:"CVC",size:3}}};i.exports=t},"../../node_modules/credit-card-type/dist/lib/clone.js":function(i,t){Object.defineProperty(t,"__esModule",{value:!0}),t.clone=void 0;function e(r){return r?JSON.parse(JSON.stringify(r)):null}t.clone=e},"../../node_modules/credit-card-type/dist/lib/find-best-match.js":function(i,t){Object.defineProperty(t,"__esModule",{value:!0}),t.findBestMatch=void 0;function e(o){var a=o.filter(function(n){return n.matchStrength}).length;return a>0&&a===o.length}function r(o){return e(o)?o.reduce(function(a,n){return!a||Number(a.matchStrength)<Number(n.matchStrength)?n:a}):null}t.findBestMatch=r},"../../node_modules/credit-card-type/dist/lib/is-valid-input-type.js":function(i,t){Object.defineProperty(t,"__esModule",{value:!0}),t.isValidInputType=void 0;function e(r){return typeof r=="string"||r instanceof String}t.isValidInputType=e},"../../node_modules/credit-card-type/dist/lib/matches.js":function(i,t){Object.defineProperty(t,"__esModule",{value:!0}),t.matches=void 0;function e(a,n,s){var d=String(n).length,c=a.substr(0,d),m=parseInt(c,10);return n=parseInt(String(n).substr(0,c.length),10),s=parseInt(String(s).substr(0,c.length),10),m>=n&&m<=s}function r(a,n){return n=String(n),n.substring(0,a.length)===a.substring(0,n.length)}function o(a,n){return Array.isArray(n)?e(a,n[0],n[1]):r(a,n)}t.matches=o}},uo={};function ve(i){var t=uo[i];if(t!==void 0)return t.exports;var e=uo[i]={exports:{}};return xn[i].call(e.exports,e,e.exports,ve),e.exports}ve.n=i=>{var t=i&&i.__esModule?()=>i.default:()=>i;return ve.d(t,{a:t}),t};ve.d=(i,t)=>{for(var e in t)ve.o(t,e)&&!ve.o(i,e)&&Object.defineProperty(i,e,{enumerable:!0,get:t[e]})};ve.o=(i,t)=>Object.prototype.hasOwnProperty.call(i,t);var st={WORLDPAY_IDEAL:"WORLDPAY_IDEAL",STRIPE_ACH:"STRIPE_ACH",STRIPE_IDEAL:"STRIPE_IDEAL",ADYEN_KLARNA:"ADYEN_KLARNA",ADYEN_BANCONTACT_CARD:"ADYEN_BANCONTACT_CARD",PAY_NL_KAARTDIRECT:"PAY_NL_KAARTDIRECT",ADYEN_EPS:"ADYEN_EPS",ADYEN_BANCONTACT_PAYCONIQ:"ADYEN_BANCONTACT_PAYCONIQ",OMISE_PROMPTPAY:"OMISE_PROMPTPAY",OMISE_TRUEMONEY:"OMISE_TRUEMONEY",ADYEN_MULTIBANCO:"ADYEN_MULTIBANCO",PACYPAY_WECHAT:"PACYPAY_WECHAT",PACYPAY_ALIPAY:"PACYPAY_ALIPAY",ADYEN_MBWAY:"ADYEN_MBWAY",XENDIT_DANA:"XENDIT_DANA",XENDIT_SHOPEEPAY:"XENDIT_SHOPEEPAY",ADYEN_PAYSHOP:"ADYEN_PAYSHOP",ADYEN_PAYTRAIL:"ADYEN_PAYTRAIL",CLEARPAY:"CLEARPAY",RAPYD_FAST:"RAPYD_FAST",RAPYD_PROMPTPAY:"RAPYD_PROMPTPAY",RAPYD_GCASH:"RAPYD_GCASH",RAPYD_POLI:"RAPYD_POLI",RAPYD_GRABPAY:"RAPYD_GRABPAY",PRIMER_PAYPAL:"PRIMER_PAYPAL",TWOC2P:"TWOC2P",NETS:"NETS",STRIPE_GIROPAY:"STRIPE_GIROPAY",MOLLIE_GIROPAY:"MOLLIE_GIROPAY",MOLLIE_EPS:"MOLLIE_EPS",PAY_NL_EPS:"PAY_NL_EPS",PAY_NL_P24:"PAY_NL_P24",MOLLIE_P24:"MOLLIE_P24",MOLLIE_SOFORT:"MOLLIE_SOFORT",COINBASE:"COINBASE",OPENNODE:"OPENNODE",MOLLIE_GIFT_CARD:"MOLLIE_GIFTCARD",XFERS_PAYNOW:"XFERS_PAYNOW",PAYMENT_CARD:"PAYMENT_CARD",APPLE_PAY:"APPLE_PAY",GOOGLE_PAY:"GOOGLE_PAY",PAYPAL:"PAYPAL",GO_CARDLESS:"GOCARDLESS",KLARNA:"KLARNA",PAY_NL_IDEAL:"PAY_NL_IDEAL",PAY_NL_SOFORT_BANKING:"PAY_NL_SOFORT_BANKING",PAY_NL_BANCONTACT:"PAY_NL_BANCONTACT",PAY_NL_PAYPAL:"PAY_NL_PAYPAL",PAY_NL_CREDIT_TRANSFER:"PAY_NL_CREDIT_TRANSFER",PAY_NL_DIRECT_DEBIT:"PAY_NL_DIRECT_DEBIT",PAY_NL_GIROPAY:"PAY_NL_GIROPAY",PAY_NL_PAYCONIQ:"PAY_NL_PAYCONIQ",HOOLAH:"HOOLAH",ADYEN_BLIK:"ADYEN_BLIK",ADYEN_MOBILEPAY:"ADYEN_MOBILEPAY",ADYEN_VIPPS:"ADYEN_VIPPS",ADYEN_GIROPAY:"ADYEN_GIROPAY",ADYEN_SOFORT:"ADYEN_SOFORT",ADYEN_IDEAL:"ADYEN_IDEAL",ADYEN_TRUSTLY:"ADYEN_TRUSTLY",ADYEN_ALIPAY:"ADYEN_ALIPAY",ADYEN_TWINT:"ADYEN_TWINT",ADYEN_BANK_TRANSFER:"ADYEN_BANK_TRANSFER",MOLLIE_BANCONTACT:"MOLLIE_BANCONTACT",MOLLIE_IDEAL:"MOLLIE_IDEAL",BUCKAROO_GIROPAY:"BUCKAROO_GIROPAY",BUCKAROO_EPS:"BUCKAROO_EPS",BUCKAROO_SOFORT:"BUCKAROO_SOFORT",BUCKAROO_BANCONTACT:"BUCKAROO_BANCONTACT",BUCKAROO_IDEAL:"BUCKAROO_IDEAL",ATOME:"ATOME"};function Sn(i,t){return{"Content-Type":"application/json","primer-client-token":i,"primer-sdk-client":"WEB","primer-sdk-version":"0.0.0-local","primer-sdk-checkout-session-id":t,"x-api-version":"2.4"}}var Ot=()=>Ao.randomUUID?.()||Pn(),Pn=()=>"10000000-1000-4000-8000-100000000000".replace(/[018]/g,i=>(i^wn()>>i/4).toString(16)),wn=()=>(Ao.getRandomValues?.(new Uint8Array(1))[0]??16*Math.random())&15,Ao=typeof crypto<"u"?crypto:{};function Tn(i,t){return async(e,r)=>new Promise(o=>{let a=Ot(),n={id:t,type:"http-request",url:e,init:r,requestId:a};i.contentWindow?.postMessage(n,"*");let s=d=>{d.data.type==="http-response"&&d.data.requestId===a&&(window.removeEventListener("message",s),o(d.data))};window.addEventListener("message",s)})}var dt=class{constructor(t,e="",r={}){O(this,"fetch");O(this,"baseUrl");O(this,"defaultHeaders");this.fetch=t,this.baseUrl=e,this.defaultHeaders=Object.freeze({...r})}setDefaultHeader(t,e){this.defaultHeaders={...this.defaultHeaders,[t]:e}}async get(t,e){return this.fetch(t,{...e,method:"GET",headers:{...this.defaultHeaders,...e?.headers}})}async post(t,e,r){return this.fetch(t,{...r,method:"POST",body:JSON.stringify(e),headers:{...this.defaultHeaders,...r?.headers}})}async delete(t,e){return this.fetch(t,{...e,method:"DELETE",headers:{...this.defaultHeaders,...e?.headers}})}},ii=class extends dt{async getConfiguration(){return this.get(this.baseUrl)}},oi=class extends dt{async getPaymentInstruments(){return this.get(`${this.baseUrl}/payment-instruments`)}async postPaymentInstruments(t){return this.post(`${this.baseUrl}/payment-instruments`,t==="pci-card-form-data"?t:{paymentInstrument:t})}async postCreatePayment(t){return this.post(`${this.baseUrl}/payments`,{paymentMethodToken:t})}async postResumePayment(t,e){return this.post(`${this.baseUrl}/payments/${t}/resume`,{resumeToken:e})}async post3dsAuth(t,e){return this.post(`${this.baseUrl}/3ds/${t}/auth`,e)}async post3dsContinue(t){return this.post(`${this.baseUrl}/3ds/${t}/continue`,{platform:"WEB",status:"FAILURE"})}async get3dsResumeStatus(t){return this.get(t)}async deletePaymentInstrument(t){return this.delete(`${this.baseUrl}/payment-instruments/${t}/vault`)}async postClientSessionActions(t){return this.post(`${this.baseUrl}/client-session/actions`,{actions:t})}async getResumeStatus(t){return this.get(t)}},_o="3.7.7",Mn=_o,ct=typeof Buffer=="function",mo=typeof TextDecoder=="function"?new TextDecoder:void 0,ho=typeof TextEncoder=="function"?new TextEncoder:void 0,kn="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",It=Array.prototype.slice.call(kn),hr=(i=>{let t={};return i.forEach((e,r)=>t[e]=r),t})(It),Nn=/^(?:[A-Za-z\d+\/]{4})*?(?:[A-Za-z\d+\/]{2}(?:==)?|[A-Za-z\d+\/]{3}=?)?$/,H=String.fromCharCode.bind(String),fo=typeof Uint8Array.from=="function"?Uint8Array.from.bind(Uint8Array):i=>new Uint8Array(Array.prototype.slice.call(i,0)),xo=i=>i.replace(/=/g,"").replace(/[+\/]/g,t=>t=="+"?"-":"_"),So=i=>i.replace(/[^A-Za-z0-9\+\/]/g,""),Po=i=>{let t,e,r,o,a="",n=i.length%3;for(let s=0;s<i.length;){if((e=i.charCodeAt(s++))>255||(r=i.charCodeAt(s++))>255||(o=i.charCodeAt(s++))>255)throw new TypeError("invalid character found");t=e<<16|r<<8|o,a+=It[t>>18&63]+It[t>>12&63]+It[t>>6&63]+It[63&t]}return n?a.slice(0,n-3)+"===".substring(n):a},mi=typeof btoa=="function"?i=>btoa(i):ct?i=>Buffer.from(i,"binary").toString("base64"):Po,ai=ct?i=>Buffer.from(i).toString("base64"):i=>{let e=[];for(let r=0,o=i.length;r<o;r+=4096)e.push(H.apply(null,i.subarray(r,r+4096)));return mi(e.join(""))},gr=(i,t=!1)=>t?xo(ai(i)):ai(i),In=i=>{if(i.length<2){var t=i.charCodeAt(0);return t<128?i:t<2048?H(192|t>>>6)+H(128|63&t):H(224|t>>>12&15)+H(128|t>>>6&63)+H(128|63&t)}var t=65536+(i.charCodeAt(0)-55296)*1024+(i.charCodeAt(1)-56320);return H(240|t>>>18&7)+H(128|t>>>12&63)+H(128|t>>>6&63)+H(128|63&t)},Ln=/[\uD800-\uDBFF][\uDC00-\uDFFFF]|[^\x00-\x7F]/g,wo=i=>i.replace(Ln,In),yo=ct?i=>Buffer.from(i,"utf8").toString("base64"):ho?i=>ai(ho.encode(i)):i=>mi(wo(i)),lt=(i,t=!1)=>t?xo(yo(i)):yo(i),go=i=>lt(i,!0),On=/[\xC0-\xDF][\x80-\xBF]|[\xE0-\xEF][\x80-\xBF]{2}|[\xF0-\xF7][\x80-\xBF]{3}/g,Rn=i=>{switch(i.length){case 4:var t=(7&i.charCodeAt(0))<<18|(63&i.charCodeAt(1))<<12|(63&i.charCodeAt(2))<<6|63&i.charCodeAt(3),e=t-65536;return H((e>>>10)+55296)+H((1023&e)+56320);case 3:return H((15&i.charCodeAt(0))<<12|(63&i.charCodeAt(1))<<6|63&i.charCodeAt(2));default:return H((31&i.charCodeAt(0))<<6|63&i.charCodeAt(1))}},To=i=>i.replace(On,Rn),Mo=i=>{if(i=i.replace(/\s+/g,""),!Nn.test(i))throw new TypeError("malformed base64.");i+="==".slice(2-(3&i.length));let t,e="",r,o;for(let a=0;a<i.length;)t=hr[i.charAt(a++)]<<18|hr[i.charAt(a++)]<<12|(r=hr[i.charAt(a++)])<<6|(o=hr[i.charAt(a++)]),e+=r===64?H(t>>16&255):o===64?H(t>>16&255,t>>8&255):H(t>>16&255,t>>8&255,255&t);return e},hi=typeof atob=="function"?i=>atob(So(i)):ct?i=>Buffer.from(i,"base64").toString("binary"):Mo,ko=ct?i=>fo(Buffer.from(i,"base64")):i=>fo(hi(i).split("").map(t=>t.charCodeAt(0))),No=i=>ko(Io(i)),Dn=ct?i=>Buffer.from(i,"base64").toString("utf8"):mo?i=>mo.decode(ko(i)):i=>To(hi(i)),Io=i=>So(i.replace(/[-_]/g,t=>t=="-"?"+":"/")),ni=i=>Dn(Io(i)),$n=i=>{if(typeof i!="string")return!1;let t=i.replace(/\s+/g,"").replace(/={0,2}$/,"");return!/[^\s0-9a-zA-Z\+/]/.test(t)||!/[^\s0-9a-zA-Z\-_]/.test(t)},Lo=i=>({value:i,enumerable:!1,writable:!0,configurable:!0}),Oo=function(){let i=(t,e)=>Object.defineProperty(String.prototype,t,Lo(e));i("fromBase64",function(){return ni(this)}),i("toBase64",function(t){return lt(this,t)}),i("toBase64URI",function(){return lt(this,!0)}),i("toBase64URL",function(){return lt(this,!0)}),i("toUint8Array",function(){return No(this)})},Ro=function(){let i=(t,e)=>Object.defineProperty(Uint8Array.prototype,t,Lo(e));i("toBase64",function(t){return gr(this,t)}),i("toBase64URI",function(){return gr(this,!0)}),i("toBase64URL",function(){return gr(this,!0)})},Yn=()=>{Oo(),Ro()},Do={version:_o,VERSION:Mn,atob:hi,atobPolyfill:Mo,btoa:mi,btoaPolyfill:Po,fromBase64:ni,toBase64:lt,encode:lt,encodeURI:go,encodeURL:go,utob:wo,btou:To,decode:ni,isValid:$n,fromUint8Array:gr,toUint8Array:No,extendString:Oo,extendUint8Array:Ro,extendBuiltins:Yn},vr={encode:Vn,decode:Do.decode};function Vn(i,t={}){let{urlSafe:e=!1}=t;return Do.encode(i,e)}function Un(i,t){return!(i.intent!==`${t}_REDIRECTION`||!("statusUrl"in i)||!("redirectUrl"in i)||!i.redirectUrl||!i.statusUrl)}function br(i){let t=zn(i),e=1e3*t.exp;if(Date.now()>e)throw new Error(`${Hn}. Expiration date: ${new Date(e).toISOString()}`);return t}var $o="The provided `clientToken`",Hn=`${$o} has expired`,Bn=`${$o} is malformed`;function zn(i){try{let[t,e]=i.split("."),r=e||t;return JSON.parse(vr.decode(r))}catch{throw new Error(Bn)}}var Yo="https://sdk.primer.io/web/hosted-pages/v0-latest",Fn=`${Yo}/api-controller.html`,jn=`${Yo}/hosted-input.html`;function Vo(i,t){return btoa(JSON.stringify({checkoutSessionId:i,name:t}))}async function Kn(i){return new Promise((t,e)=>{let r=Vo(i,"api"),o=`${Fn}#${r}`,a=document.querySelector(`iframe[src="${o}"]`)??document.createElement("iframe");a.parentElement?t(a):(a.style.display="none",a.onload=()=>t(a),a.onerror=n=>{e(new Error(`Failed to initialize Primer SDK: ${n}`))},a.src=o,document.body.appendChild(a))})}var si=class extends dt{async postClientSessionActions(t){return t.length===0?Promise.resolve({data:void 0,headers:{},status:200,id:"",requestId:"",type:"http-response"}):this.post(`${this.baseUrl}/client-session/actions`,{actions:t})}async selectPaymentMethod(t,e={}){return this.postClientSessionActions([{type:"SELECT_PAYMENT_METHOD",params:{...e,paymentMethodType:t}}])}async unselectPaymentMethod(){return this.postClientSessionActions([{type:"UNSELECT_PAYMENT_METHOD"}])}async selectCardNetwork(t){return this.selectPaymentMethod(st.PAYMENT_CARD,{binData:this.buildCardBinData(t)})}async setBillingAddress(t){let e=this.removeEmptyStringFromObject(t);return this.postClientSessionActions([{type:"SET_BILLING_ADDRESS",params:{billingAddress:e}}])}async setShippingAddress(t,e,r){let o=[];return t&&Object.keys(t).some(n=>!!t[n])&&o.push({type:"SET_SHIPPING_ADDRESS",params:{shippingAddress:t}}),e&&o.push({type:"SET_MOBILE_NUMBER",params:{mobileNumber:e}}),r&&o.push({type:"SET_EMAIL_ADDRESS",params:{emailAddress:r}}),this.postClientSessionActions(o)}async selectShippingMethod(t){return this.postClientSessionActions([{type:"SELECT_SHIPPING_METHOD",params:{shippingMethodId:t}}])}async setCustomerDetails({emailAddress:t,firstName:e,lastName:r}){let o=[];return t&&o.push({type:"SET_EMAIL_ADDRESS",params:{emailAddress:t}}),e&&o.push({type:"SET_CUSTOMER_FIRST_NAME",params:{firstName:e}}),r&&o.push({type:"SET_CUSTOMER_LAST_NAME",params:{lastName:r}}),this.postClientSessionActions(o)}buildCardBinData(t){let e=this.getCardNetworkName(t);return{network:e,issuer_name:null,product_code:e,product_name:e,product_usage_type:"UNKNOWN",account_number_type:"UNKNOWN",issuer_country_code:null,account_funding_type:"UNKNOWN",issuer_currency_code:null,regional_restriction:"UNKNOWN",prepaid_reloadable_indicator:"NOT_APPLICABLE"}}getCardNetworkName(t){return{visa:"VISA",mastercard:"MASTERCARD",amex:"AMERICAN_EXPRESS",discover:"DISCOVER"}[t.toLowerCase()]||t}removeEmptyStringFromObject(t){let e={...t};for(let r in e)e[r]===""?delete e[r]:typeof e[r]=="object"&&e[r]!==null&&!Array.isArray(e[r])&&(e[r]=this.removeEmptyStringFromObject(e[r]));return e}},li=class extends dt{async createPaypalOrder(t){return this.post(`${this.baseUrl}/paypal/orders/create`,t)}async createApplePaySession(t){return this.post(`${this.baseUrl}/apple-pay/sessions`,t)}};async function Gn(i){let t=Ot(),e=br(i),r=await Kn(t),o=Tn(r,t),a=Sn(e.accessToken,t),n=new ii(o,e.configurationUrl,a),{data:s,error:d}=await n.getConfiguration();if(d||!s)throw new Error(`Failed to fetch configuration: ${d}`);let c=new oi(o,s.pciUrl,a),m=new li(o,s.coreUrl,a),f=new si(o,s.pciUrl,a);return{apiControllerIframe:r,configuration:s,checkoutSessionId:t,configurationApi:n,pciApi:c,coreApi:m,clientSessionApi:f,updateClientToken:y=>{try{let A=br(y);n.setDefaultHeader("primer-client-token",A.accessToken),c.setDefaultHeader("primer-client-token",A.accessToken),m.setDefaultHeader("primer-client-token",A.accessToken),f.setDefaultHeader("primer-client-token",A.accessToken)}catch{}}}}var di=class{constructor(t){O(this,"context");this.context=t}};function Uo(){return{javaEnabled:typeof window.navigator.javaEnabled=="function"?window.navigator.javaEnabled():!1,language:window.navigator.language,colorDepth:window.screen.colorDepth,screenHeight:window.screen.height,screenWidth:window.screen.width,timezoneOffset:new Date().getTimezoneOffset(),userAgent:window.navigator.userAgent}}function Ho(i){return i?new Promise(t=>{setTimeout(t,i)}):Promise.resolve()}var ci=class extends di{async handleRequiredAction(t){let e=t.requiredAction?.clientToken;if(!e)throw new Error("No client token provided");let r=br(e);if(!("intent"in r)||r.intent!=="3DS_AUTHENTICATION")throw new Error("Invalid client token");let{error:o,data:a}=await this.context.pciApi.post3dsAuth(r.tokenId,{device:Uo()});if(o||!a||!a.authentication)throw o??new Error("Unable to authenticate");let n=a;a.authentication.responseCode==="METHOD"?n=await this.handleMethod(r.tokenId,a.authentication):a.authentication.responseCode==="CHALLENGE"&&(n=await this.handleChallenge(r.tokenId,a.authentication));let s=await this.context.pciApi.postResumePayment(t.id,n.resumeToken);if(s.error||!s.data)throw s.error??new Error("Unable to resume payment");return s.data}async handleMethod(t,e){let r="primer-3ds-method-box",o="primer-3ds-method-iframe",a="primer-3ds-method-form",n="threeDSMethodData",s=document.createElement("div");s.id=r,s.style.position="absolute",s.style.width="2px",s.style.height="2px",s.style.left="-10000px";let d=document.createElement("iframe");d.style.display="none",d.id=o,d.name=o,s.appendChild(d);let c=document.createElement("form"),m=document.createElement("input");m.type="hidden",m.id=n,m.name=n,m.value=vr.encode(JSON.stringify({threeDSServerTransID:e.transactionId,threeDSMethodNotificationURL:e.notificationUrl}),{urlSafe:!0}).replace(/=+$/g,""),c.appendChild(m),c.id=a,c.name=a,c.action=e.acsMethodUrl,c.target=o,c.method="post",s.appendChild(c),document.body.appendChild(s),c.submit();let{data:f,error:y}=await this.pollStatus(e.statusUrl,"METHOD",1e3).promise;return s.remove(),y||!f?this.continueAuth(t):f}pollStatus(t,e="METHOD",r=1e3,o=66e4){let a=!0;return{promise:new Promise(async n=>{let s=setTimeout(()=>{a=!1,n({error:new Error("Operation timed out"),data:null})},o);try{for(;a;){let d=await this.context.pciApi.get3dsResumeStatus(t);if(d.error){clearTimeout(s),n(d);return}if(await Ho(r),d.data&&d.data.authentication.responseCode!==e){clearTimeout(s),n(d);return}}}catch(d){clearTimeout(s),n({error:d,data:null})}}),abort:()=>{a=!1}}}async continueAuth(t){let{data:e,error:r}=await this.context.pciApi.post3dsContinue(t);return r||!e?{resumeToken:Ot(),authentication:{responseCode:"SKIPPED",skippedReasonCode:"NEGOTIATION_ERROR",skippedReasonText:"Failed to negotiate with 3DS server"}}:e}async handleChallenge(t,e){let r=`3ds-challenge-iframe-${Ot()}`,o=document.createElement("div");o.style.position="fixed",o.style.top="0",o.style.left="0",o.style.width="100%",o.style.height="100%",o.style.backgroundColor="rgba(0, 0, 0, 0.5)";let a=document.createElement("div");a.style.height="min(calc(100vh - 16px), 600px)",a.style.width="min(calc(100vw - 16px), 500px)",a.style.display="grid",a.style.placeContent="center",a.style.backgroundColor="#ffffff",a.style.borderRadius="3px",a.style.position="relative",a.style.boxShadow="1px 1px 5px 3px rgba(0, 0, 0, 0.05)",a.style.overflow="hidden",o.appendChild(a);let n=document.createElement("iframe");n.id=r,n.name=r,n.width="100%",n.height="100%",n.setAttribute("width","100%"),n.setAttribute("height","100%"),n.setAttribute("frameBorder","0"),n.setAttribute("border","0"),n.style.position="absolute",n.style.top="0",n.style.left="0";let s=document.createElement("form");if(s.style.width="1px",s.style.height="1px",s.style.position="absolute",s.style.left="-10000px",s.action=e.acsChallengeUrl,s.target=r,s.method="post",/^1/.test(e.protocolVersion)){let f=document.createElement("input"),y=document.createElement("input");f.type="hidden",f.name="PaReq",f.id="PaReq",f.value=e.acsChallengeData??"",y.type="hidden",y.name="TermUrl",y.id="TermUrl",y.value=e.notificationUrl??"",s.appendChild(f),s.appendChild(y)}else{let f=document.createElement("input"),y=document.createElement("input");f.type="hidden",f.name="creq",f.id="creq",f.value=vr.encode(JSON.stringify({threeDSServerTransID:e.transactionId,acsTransID:e.acsTransactionId,messageVersion:e.protocolVersion,messageType:"CReq",challengeWindowSize:"05"}),{urlSafe:!0}),y.type="hidden",y.name="threeDSSessionData",y.id="threeDSSessionData",s.appendChild(f),s.appendChild(y)}a.appendChild(s),a.appendChild(n),document.body.appendChild(o),s.submit();let m=await this.pollStatus(e.statusUrl,"CHALLENGE",2500,66e4).promise;return o.remove(),m.error||!m.data?this.continueAuth(t):m.data}},Ge=class{constructor(t,e){O(this,"config");O(this,"context");this.config=Object.freeze(t),this.context=e}async setup(){return!0}async start(){}async render(t){}async handleRequiredAction(t){return t.requiredAction?.name==="3DS_AUTHENTICATION"?new ci(this.context).handleRequiredAction(t):t}async createPayment(t){let{error:e,data:r}=await this.context.pciApi.postCreatePayment(t);if(e||!r)throw e??new Error("Unable to create payment");return r.requiredAction?.clientToken&&this.context.updateClientToken(r.requiredAction.clientToken),r}async resumePayment(t,e){let{error:r,data:o}=await this.context.pciApi.postResumePayment(t,e);if(r||!o)throw r??new Error("Unable to resume payment");return o}},qn=ve("../../node_modules/card-validator/dist/index.js"),Wn=ve.n(qn);function Jn(i){let t=Wn().number(i);return{isValid:t.isValid||!1,card:{type:t.card?.type||null,code:t.card?.code||{name:"CVV",size:4},lengths:t.card?.lengths||[16],gaps:t.card?.gaps||[4,8,12]}}}var pi=class{constructor(t){O(this,"listeners",new Set);O(this,"state");O(this,"initialState");this.initialState=t,this.state=Object.freeze(structuredClone(t))}reset(){this.setState(structuredClone(this.initialState))}getState(){return this.state}setState(t){this.state=Object.freeze({...this.state,...t}),this.notify()}subscribe(t){return this.listeners.add(t),()=>this.listeners.delete(t)}notify(){this.listeners.forEach(t=>t(this.state))}},Lt=class extends pi{constructor(e,r){super(e);O(this,"options");O(this,"channel");O(this,"key");this.key=r.id+r.name,this.options=r,this.channel=new BroadcastChannel(this.key),this.channel.addEventListener("message",this.onMessage.bind(this)),this.options.crossOriginTarget&&window.addEventListener("message",this.onMessage.bind(this))}setState(e){this.internalSetState(e)}onMessage(e){e.data.key===this.key&&this.internalSetState(e.data.state,e.data.type)}internalSetState(e,r){this.options.main?this.setMainState(e):this.setNonMainState(e,r)}setMainState(e){super.setState(e),this.postMessage({type:"post-state",key:this.key,state:super.getState()})}setNonMainState(e,r){if(r!=="patch-state"){if(r==="post-state")return void super.setState(e);this.postMessage({type:"patch-state",key:this.key,state:e})}}postMessage(e){this.channel.postMessage(e),this.options.crossOriginTarget?.postMessage(e,"*")}},fr={placeholder:"",ariaLabel:"",style:{}};function Zn(i,t,e=!1){return{pciStore:new Lt({cardNumber:"",cardSecurityCode:"",cardExpiryDate:"",cardHolderName:""},{main:e,id:i,name:"card-form-pci"}),publicStore:new Lt({cardNumber:{valid:!1,dirty:!1,touched:!1,focused:!1,error:""},cardSecurityCode:{valid:!1,dirty:!1,touched:!1,focused:!1,error:""},cardExpiryDate:{valid:!1,dirty:!1,touched:!1,focused:!1,error:""},cardHolderName:{valid:!1,dirty:!1,touched:!1,focused:!1,error:""},type:Jn("")},{main:e,id:i,name:"card-form-public",crossOriginTarget:t}),optionsStore:new Lt({cardNumber:structuredClone(fr),cardSecurityCode:structuredClone(fr),cardExpiryDate:structuredClone(fr),cardHolderName:structuredClone(fr)},{main:e,id:i,name:"card-form-options",crossOriginTarget:t})}}function Xn(i){return{cardNumber:yr(i,"cardNumber"),cardSecurityCode:yr(i,"cardSecurityCode"),cardExpiryDate:yr(i,"cardExpiryDate"),cardHolderName:yr(i,"cardHolderName")}}function yr(i,t){let e=document.createElement("iframe"),r=Vo(i,t);return e.src=`${jn}#${r}`,e.setAttribute("tabindex","0"),e.setAttribute("frameBorder","0"),e.style.border="none",e.style.boxSizing="border-box",e.style.height="20px",e.style.width="100%",e.style.colorScheme="auto",e}var Cr=class extends Ge{constructor(e,r){super(e,r);O(this,"iframes");O(this,"store");this.store=Zn(r.checkoutSessionId,r.apiControllerIframe.contentWindow),this.iframes=Xn(r.checkoutSessionId)}async tokenize(){let{error:e,data:r}=await this.context.pciApi.postPaymentInstruments("pci-card-form-data");if(e||!r)throw e??new Error("Unable to tokenize payment method");return r}},Qn=100;function es({height:i,name:t,url:e="",width:r}){let o=new Set,a=window.open(e,t,rs({height:i,width:r}));if(!a)return;function n(){a?.close(),s()}function s(){o.forEach(d=>d()),o.clear(),window.removeEventListener("beforeunload",n)}return window.addEventListener("beforeunload",n),ts(a).then(s),{close:n,focus(){a.focus()},get isOpen(){return a?.closed===!1},onClose(d){return o.add(d),()=>{o.delete(d)}},setContent(d){a.document.write(d)},setUrl(d){a.location.replace(d)}}}var ts=i=>new Promise(t=>{let e=setInterval(()=>{i.closed&&(clearInterval(e),t())},Qn)});function rs(i){let t=is({parent:{left:window.screenLeft,top:window.screenTop,height:window.outerHeight,width:window.outerWidth},popup:i});return os(t)}var is=({parent:i,popup:t})=>({left:i.left+(i.width-t.width)/2,top:i.top+(i.height-t.height)/2,height:t.height,width:t.width}),os=i=>Object.entries(i).map(t=>t.join("=")).join(","),ui=class extends Ge{constructor(){super(...arguments);O(this,"popup")}async start(){this.openPopup()}async tokenize(){let{error:e,data:r}=await this.context.pciApi.postPaymentInstruments({type:"OFF_SESSION_PAYMENT",paymentMethodType:this.config.type,paymentMethodConfigId:this.config.id,sessionInfo:{locale:"en",platform:"WEB",browserInfo:Uo()}});if(e||!r)throw e??new Error("Unable to tokenize payment method");return r}async handleRequiredAction(e){let r=e.requiredAction?.clientToken;if(!r)throw new Error("No client token provided");let o=br(r);if(!Un(o,this.config.type))throw new Error("Invalid client token");this.popup?.setUrl(o.redirectUrl);let a=new Promise(m=>{this.popup?.onClose(()=>m({id:""}))}),{promise:n,abort:s}=this.pollStatus(o.statusUrl),d=await Promise.race([a,n]);if(s(),this.popup?.close(),"error"in d)throw d.error;let c=d.id;if(!c){let m=await this.context.pciApi.getResumeStatus(o.statusUrl);if(m.error||!m.data?.id)throw m.error??new Error("Unable to get resume token");c=m.data.id}return await this.resumePayment(e.id,c)}pollStatus(e){let r=!0;return{promise:new Promise(async o=>{for(;r;){let{data:a,error:n}=await this.context.pciApi.getResumeStatus(e);if(n)return void o({error:n});if(await Ho(1e3),a?.status==="COMPLETE")return void o({id:a.id})}}),abort:()=>{r=!1}}}openPopup(){let{name:e,displayMetadata:{button:r,overlay:o,popup:a}}=this.config;this.popup=es({name:e,height:a?.height??500,width:a?.width??1e3});let n=o?.logo.colored||r?.iconUrl.colored||o?.logo.light||r?.iconUrl.light||o?.logo.dark||r?.iconUrl.dark;this.popup?.setContent(as({name:e,logoSrc:n,logoAlt:e,message:`Loading ${e}...`}))}},as=({name:i,logoSrc:t,logoAlt:e,message:r})=>`<html>
4
+ <head>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <style>
7
+ @keyframes rotate {
8
+ 100% {
9
+ transform: rotate(360deg);
10
+ }
11
+ }
435
12
 
436
- :host(:not([active])) {
437
- display: none;
438
- }
13
+ @keyframes dash {
14
+ 0% {
15
+ stroke-dasharray: 1, 150;
16
+ stroke-dashoffset: 0;
17
+ }
18
+ 100% {
19
+ stroke-dasharray: 90, 150;
20
+ stroke-dashoffset: -35;
21
+ }
22
+ 100% {
23
+ stroke-dasharray: 90, 150;
24
+ stroke-dashoffset: -124;
25
+ }
26
+ }
439
27
 
440
- .error {
441
- color: var(--primer-color-text-negative);
442
- font-size: var(--primer-typography-body-small-size);
443
- line-height: var(--primer-typography-body-small-line-height);
444
- display: block;
445
- font-family: var(--primer-typography-body-small-font);
446
- }
447
- `;var dt=class extends u{constructor(){super(...arguments);this.for="";this.active=!0}render(){return d`
448
- <span
449
- class="error"
450
- role="alert"
451
- aria-live="polite"
452
- id="${this.for||""}"
453
- >
454
- <slot></slot>
455
- </span>
456
- `}};dt.styles=[ji],s([l({type:String,reflect:!0})],dt.prototype,"for",2),s([l({type:Boolean,reflect:!0})],dt.prototype,"active",2),dt=s([f("primer-input-error")],dt);var ja=Fa({tagName:"primer-input-error",elementClass:dt,react:Ka});import{createComponent as Ga}from"@lit/react";import qa from"react";var Gi=h`
457
- :host {
458
- display: inline-block;
459
- font-weight: var(--primer-typography-body-small-weight);
460
- font-size: var(--primer-typography-body-small-size);
461
- letter-spacing: var(--primer-typography-body-small-letter-spacing);
462
- line-height: var(--primer-typography-body-small-line-height);
463
- color: var(--primer-color-text-primary);
464
- font-family: var(--primer-typography-body-small-font);
465
- }
28
+ body {
29
+ display: grid;
30
+ place-content: center;
466
31
 
467
- :host([disabled]) {
468
- color: var(--primer-color-text-disabled);
469
- }
470
- `;var pt=class extends u{constructor(){super(...arguments);this.for="";this.disabled=!1}render(){return d`<label for=${this.for}><slot></slot></label>`}};pt.styles=[Gi],s([l({type:String,reflect:!0})],pt.prototype,"for",2),s([l({type:Boolean,reflect:!0})],pt.prototype,"disabled",2),pt=s([f("primer-input-label")],pt);var Wa=Ga({tagName:"primer-input-label",elementClass:pt,react:qa});import{createComponent as Za}from"@lit/react";import Xa from"react";var qi=h`
471
- * {
472
- box-sizing: border-box;
473
- }
474
- :host {
475
- display: block;
476
- width: 100%;
477
- }
32
+ margin: 0;
33
+ padding: 0;
34
+ overflow: hidden;
35
+ width: 100vw;
36
+ height: 100vh;
37
+ }
478
38
 
479
- .input-slot.focus-within,
480
- .input-slot:focus-within {
481
- outline: 2px solid var(--primer-color-border-outlined-focus);
482
- outline-offset: -2px;
483
- }
39
+ .spinner-container {
40
+ display: grid;
41
+ place-content: center;
42
+ }
484
43
 
485
- :host([has-error]) .input-slot.focus-within,
486
- :host([has-error]) .input-slot:focus-within {
487
- outline: 2px solid var(--primer-color-border-outlined-error);
488
- background-color: var(--primer-color-background-outlined-error);
489
- }
44
+ .spinner-container .spinner {
45
+ animation: rotate 1.2s linear infinite;
46
+ z-index: 2;
490
47
 
491
- :host([has-error]) .input-slot {
492
- border-color: var(--primer-color-border-outlined-error);
493
- background-color: var(--primer-color-background-outlined-error);
494
- }
48
+ width: 32px;
49
+ }
495
50
 
496
- .input-wrapper {
497
- display: flex;
498
- flex-direction: column;
499
- gap: var(--primer-space-xsmall);
500
- }
51
+ .spinner-container .path {
52
+ stroke: #dbdbdb;
53
+ stroke-linecap: round;
54
+ animation: dash 1.5s ease-in-out infinite;
55
+ }
501
56
 
502
- .input-slot {
503
- padding: var(--primer-space-medium) var(--primer-space-medium);
504
- border: 1px solid var(--primer-color-border-outlined-default);
505
- border-radius: var(--primer-radius-small);
506
- background-color: var(--primer-color-background-outlined-default);
507
- height: calc(
508
- var(--primer-typography-body-large-line-height) +
509
- var(--primer-space-medium) + var(--primer-space-medium) + 2px
510
- );
511
- display: flex;
512
- cursor: text; /* Indicate text input interactivity */
513
- /* 2px is the border width */
514
- }
57
+ .content {
58
+ display: flex;
59
+ flex-direction: column;
60
+ align-items: center;
61
+ }
515
62
 
516
- .input-slot ::slotted(*) {
517
- width: 100%;
518
- }
63
+ .logo {
64
+ max-width: 80px;
65
+ max-height: 50px;
66
+ }
519
67
 
520
- .input-slot:hover {
521
- border-color: var(--primer-color-border-outlined-hover);
522
- background-color: var(--primer-color-background-outlined-hover);
523
- }
68
+ .logo-container {
69
+ height: 50px;
70
+ min-width: 50px;
71
+ margin-bottom: 32px;
72
+ border-radius: 8px;
73
+ display: flex;
74
+ align-items: center;
75
+ justify-content: center;
76
+ padding-left: 10px;
77
+ padding-right: 10px;
78
+ border: 1px solid #9f9f9f45;
79
+ }
524
80
 
525
- .input-slot:active {
526
- border-color: var(--primer-color-border-outlined-active);
527
- background-color: var(--primer-color-background-outlined-active);
528
- }
81
+ .message {
82
+ margin-bottom: 32px;
529
83
 
530
- .input-slot:disabled {
531
- background-color: var(--primer-color-background-outlined-disabled);
532
- border-color: var(--primer-color-border-outlined-disabled);
533
- cursor: not-allowed;
534
- }
535
- `;var J=class extends u{constructor(){super(...arguments);this.focusWithin=!1;this.hasError=!1}handleWrapperClick(e){if(e.target!==e.currentTarget)return;let r=this.findSlottedPrimerInput();r?r.focus():this.dispatchEvent(new CustomEvent("wrapper-click",{bubbles:!0,composed:!0}))}findSlottedPrimerInput(){if(!this.inputSlot)return null;let e=this.inputSlot.assignedElements({flatten:!0}),r=e.find(o=>o.tagName.toLowerCase()==="primer-input");if(r)return r;for(let o of e){let a=o.querySelector("primer-input");if(a)return a}return null}render(){let e={"input-slot":!0,"focus-within":this.focusWithin};return d`
536
- <div class="input-wrapper">
537
- <slot name="label"></slot>
538
- <div class="${R(e)}" @click="${this.handleWrapperClick}">
539
- <slot name="input"></slot>
540
- </div>
541
- <slot name="error"></slot>
84
+ font-family: sans-serif;
85
+ text-align: center;
86
+ color: #8c8c8c;
87
+ }
88
+ </style>
89
+ <title>${i}</title>
90
+ </head>
91
+ <body>
92
+ <div class="content">
93
+ <div class="logo-container" style="background: {background}">
94
+ <img class="logo" src="${t}" alt="${e}" />
542
95
  </div>
543
- `}};J.styles=[qi],s([l({type:Boolean})],J.prototype,"focusWithin",2),s([l({type:Boolean,reflect:!0,attribute:"has-error"})],J.prototype,"hasError",2),s([vt('slot[name="input"]')],J.prototype,"inputSlot",2),J=s([f("primer-input-wrapper")],J);var Qa=Za({tagName:"primer-input-wrapper",elementClass:J,react:Xa});import{createComponent as Ja}from"@lit/react";import ts from"react";var Wi=h`
544
- :host {
545
- display: none;
546
- }
547
- `;var bt=class extends u{constructor(){super(...arguments);this.id="d"+Math.random().toString(36).substring(7)}getContainer(){let e=document.querySelector(`#${this.id}`);return e||(e=document.createElement("div"),e.id=this.id,document.body.appendChild(e),this._setupEventListeners(e)),e}_setupEventListeners(e){["primer-ach-error","primer-ach-bank-details-collected","primer-ach-mandate-confirmed","primer-ach-mandate-declined"].forEach(r=>{e.addEventListener(r,o=>{o.stopPropagation(),this.dispatchEvent(new CustomEvent(r,{bubbles:!0,composed:!0,detail:o.detail}))})})}disconnectedCallback(){super.disconnectedCallback(),this.getContainer().remove()}_handleSlotChange(e){let o=e.target.assignedNodes();if(!o.length)return;let a=this.getContainer();o.forEach(n=>a.appendChild(n))}render(){return d`<slot @slotchange=${this._handleSlotChange}></slot>`}};bt.styles=[Wi],s([_()],bt.prototype,"id",2),bt=s([f("primer-portal")],bt);var es=Ja({tagName:"primer-portal",elementClass:bt,react:ts});import{createComponent as rs}from"@lit/react";import is from"react";var Zi=h`
548
- :host {
549
- display: inline-flex;
550
- align-items: center;
551
- justify-content: center;
552
- }
553
-
554
- .spinner-container {
555
- display: flex;
556
- align-items: center;
557
- justify-content: center;
558
- width: var(--spinner-size, var(--primer-size-medium));
559
- height: var(--spinner-size, var(--primer-size-medium));
560
- }
561
-
562
- .spinner-container:not(.compact) {
563
- margin: var(--primer-space-small) 0;
564
- }
565
-
566
- .spinner-container.compact {
567
- margin: 0;
568
- }
569
-
570
- .spinner {
571
- animation: spinner-rotate 1.2s linear infinite;
572
- width: 100%;
573
- height: 100%;
574
- color: var(--spinner-color, var(--primer-color-loader));
575
- }
576
-
577
- .path {
578
- fill: currentColor;
579
- transform-origin: center;
580
- transition: fill var(--primer-animation-duration, 200ms)
581
- var(--primer-animation-easing, ease);
582
- }
583
-
584
- @keyframes spinner-rotate {
585
- 0% {
586
- transform: rotate(0deg);
587
- }
588
- 100% {
589
- transform: rotate(360deg);
590
- }
591
- }
592
- `;var zr={small:16,medium:24,large:32},tt=class extends u{constructor(){super(...arguments);this.color="var(--primer-color-loader)";this.size="medium";this.compact=!1}getSize(){if(this.size in zr)return zr[this.size];let e=parseInt(this.size,10);return isNaN(e)?zr.medium:e}render(){let e=this.getSize(),r=20,o=`0 0 ${r} ${r}`;return this.style.setProperty("--spinner-color",this.color),this.style.setProperty("--spinner-size",`${e}px`),d`
593
- <div class="spinner-container ${this.compact?"compact":""}">
594
- <svg
595
- class="spinner"
596
- width="${e}"
597
- height="${e}"
598
- viewBox="${o}"
599
- fill="none"
600
- xmlns="http://www.w3.org/2000/svg"
601
- role="status"
602
- aria-label="Loading"
603
- >
604
- <path
605
- d="M4.27827 10.002C4.27827 6.84166 6.84019 4.27973 10.0005 4.27973C10.7676 4.27973 11.3894 3.6579 11.3894 2.89084C11.3894 2.12378 10.7676 1.50195 10.0005 1.50195C5.30607 1.50195 1.50049 5.30753 1.50049 10.002C1.50049 14.6964 5.30607 18.502 10.0005 18.502C14.6949 18.502 18.5005 14.6964 18.5005 10.002C18.5005 9.23489 17.8787 8.61306 17.1116 8.61306C16.3445 8.61306 15.7227 9.23489 15.7227 10.002C15.7227 13.1622 13.1608 15.7242 10.0005 15.7242C6.84019 15.7242 4.27827 13.1622 4.27827 10.002Z"
606
- fill="currentColor"
96
+ <div class="message">${r}</div>
97
+ <div class="spinner-container" aria-label="Loading">
98
+ <svg class="spinner" viewBox="0 0 50 50">
99
+ <circle
607
100
  class="path"
608
- />
101
+ cx="25"
102
+ cy="25"
103
+ r="20"
104
+ fill="none"
105
+ stroke-width="5"
106
+ ></circle>
609
107
  </svg>
610
108
  </div>
611
- `}};tt.styles=[Zi],s([l({type:String})],tt.prototype,"color",2),s([l({type:String})],tt.prototype,"size",2),s([l({type:Boolean})],tt.prototype,"compact",2),tt=s([f("primer-spinner")],tt);var os=rs({tagName:"primer-spinner",elementClass:tt,react:is});import{createComponent as as}from"@lit/react";import ss from"react";var Xi=h`
612
- :host {
613
- display: contents;
614
- }
615
-
616
- button {
617
- align-items: center;
618
- border-radius: var(--primer-radius-medium);
619
- border: none;
620
- cursor: pointer;
621
- display: flex;
622
- font-family: var(--primer-typography-title-large-font);
623
- font-size: var(--primer-typography-title-large-size);
624
- font-weight: var(--primer-typography-title-large-weight);
625
- gap: var(--primer-space-small);
626
- justify-content: center;
627
- letter-spacing: var(--primer-typography-title-large-letter-spacing);
628
- line-height: var(--primer-typography-title-large-line-height);
629
- outline: none;
630
- padding: var(--primer-space-medium) var(--primer-space-medium);
631
- position: relative;
632
- transition: all 0.2s ease-in-out;
633
- }
634
-
635
- .button-content {
636
- display: flex;
637
- height: 100%;
638
- align-items: center;
639
- gap: var(--primer-space-small);
640
- justify-content: center;
641
- transition: opacity var(--primer-animation-duration)
642
- var(--primer-animation-easing);
643
- }
644
-
645
- /* Reduce opacity of text during loading for better focus on the spinner */
646
- .button-content.loading {
647
- opacity: 0.65;
648
- }
649
-
650
- :host([selectable]) button {
651
- justify-content: space-between;
652
- }
653
-
654
- /* Primary variant */
655
- :host([variant='primary']) button {
656
- background-color: var(--primer-color-brand);
657
- /* This is correct (color-background for color) because Button is kind of a special component */
658
- color: var(--primer-color-background-outlined-default);
659
- }
660
- :host([variant='primary']:not([disabled]):not([loading])) button:hover {
661
- filter: brightness(105%);
662
- }
663
- :host([variant='primary']:not([disabled]):not([loading])) button:active {
664
- filter: brightness(98%);
665
- }
666
- :host([variant='primary']) button:focus-visible {
667
- outline: 2px solid var(--primer-color-brand);
668
- outline-offset: 2px;
669
- }
670
-
671
- /* Disabled state for primary button */
672
- :host([variant='primary'][disabled]:not([loading])) button,
673
- :host([variant='primary']:not([loading])) button:disabled {
674
- color: var(--primer-color-text-disabled);
675
- background-color: var(--primer-color-background-outlined-disabled);
676
- cursor: not-allowed;
677
- }
678
-
679
- /* Loading state for primary button - OVERRIDES disabled styles with higher specificity */
680
- :host([variant='primary'][loading]) button {
681
- background-color: var(--primer-color-brand);
682
- opacity: 0.8;
683
- color: var(--primer-color-background-outlined-default);
684
- cursor: wait;
685
- }
686
-
687
- /* Secondary variant */
688
- :host([variant='secondary']) button {
689
- background-color: var(--primer-color-background-outlined-default);
690
- color: var(--primer-color-text-primary);
691
- border: 1px solid var(--primer-color-border-outlined-default);
692
- }
693
- :host([variant='secondary']:not([disabled]):not([loading])) button:hover {
694
- background-color: var(--primer-color-background-outlined-hover);
695
- }
696
- :host([variant='secondary']:not([disabled]):not([loading])) button:active {
697
- background-color: var(--primer-color-background-outlined-active);
698
- }
699
- :host([variant='secondary']) button:focus-visible {
700
- outline: 2px solid var(--primer-color-border-outlined-focus);
701
- outline-offset: 2px;
702
- }
703
-
704
- /* Disabled state for secondary button */
705
- :host([variant='secondary'][disabled]:not([loading])) button,
706
- :host([variant='secondary']:not([loading])) button:disabled {
707
- background-color: var(--primer-color-background-outlined-disabled);
708
- border-color: var(--primer-color-border-outlined-disabled);
709
- color: var(--primer-color-text-disabled);
710
- cursor: not-allowed;
711
- }
712
-
713
- /* Loading state for secondary button - OVERRIDES disabled styles */
714
- :host([variant='secondary'][loading]) button {
715
- background-color: var(--primer-color-gray-100);
716
- border-color: var(--primer-color-gray-300);
717
- color: var(--primer-color-gray-600);
718
- cursor: wait;
719
- }
720
-
721
- /* Tertiary variant */
722
- :host([variant='tertiary']) button {
723
- background-color: var(--primer-color-background-transparent-default);
724
- border: 1px solid var(--primer-color-border-transparent-default);
725
- color: var(--primer-color-text-primary);
726
- border-radius: var(--primer-radius-small);
727
- padding: var(--primer-space-xxsmall) var(--primer-space-xxsmall);
728
- }
729
- :host([variant='tertiary']:not([disabled]):not([loading])) button:hover {
730
- border-radius: var(--primer-radius-small);
731
- background-color: var(--primer-color-background-transparent-hover);
732
- border: 1px solid var(--primer-color-border-transparent-hover);
733
- color: var(--primer-color-text-primary);
734
- }
735
- :host([variant='tertiary']:not([disabled]):not([loading])) button:active {
736
- background-color: var(--primer-color-background-transparent-active);
737
- border-color: var(--primer-color-border-transparent-active);
738
- border-radius: var(--primer-radius-small);
739
- color: var(--primer-color-text-primary);
740
- }
741
- :host([variant='tertiary']) button:focus-visible {
742
- border-radius: var(--primer-radius-small);
743
- background-color: var(--primer-color-background-transparent-focus);
744
- outline: 2px solid var(--primer-color-border-transparent-focus);
745
- outline-offset: 2px;
746
- }
747
-
748
- /* Disabled state for tertiary button */
749
- :host([variant='tertiary'][disabled]:not([loading])) button,
750
- :host([variant='tertiary']:not([loading])) button:disabled {
751
- background-color: var(--primer-color-border-transparent-disabled);
752
- color: var(--primer-color-text-disabled);
753
- cursor: not-allowed;
754
- }
755
-
756
- /* Loading state for tertiary button - OVERRIDES disabled styles */
757
- :host([variant='tertiary'][loading]) button {
758
- background-color: var(--primer-color-gray-100);
759
- color: var(--primer-color-gray-600);
760
- cursor: wait;
761
- }
762
-
763
- /* Checked state styling */
764
- :host([selectionState='checked']) button {
765
- border: 1px solid var(--primer-color-brand);
766
- background-color: var(--primer-color-gray-100);
767
- }
768
-
769
- /* Loading state - center spinner with content */
770
- :host([loading]) primer-spinner {
771
- margin-right: var(--primer-space-xsmall);
772
- }
773
-
774
- /* Special case for tertiary variant loading state spinner size */
775
- :host([variant='tertiary'][loading]) primer-spinner {
776
- transform: scale(0.85);
777
- }
778
- `;var U=class extends u{constructor(){super(...arguments);this.variant="primary";this.disabled=!1;this.loading=!1;this.buttonType="button";this.selectionState="default";this.selectable=!1}handleClick(){!this.selectable||this.disabled||this.loading||(this.selectionState=this.selectionState==="default"?"checked":"default",this.dispatchEvent(new CustomEvent("selection-change",{bubbles:!0,composed:!0,detail:{state:this.selectionState}})))}renderCheckmark(){return!this.selectable||this.selectionState!=="checked"||this.loading?c:d`
779
- <primer-icon
780
- name="checkmark"
781
- size="sm"
782
- color="var(--primer-color-icon-primary)"
783
- ></primer-icon>
784
- `}renderSpinner(){if(!this.loading)return c;let e;return this.variant==="primary"?e="var(--primer-color-background-outlined-default)":(this.variant==="secondary"||this.variant==="tertiary")&&(e="var(--primer-color-gray-900)"),d`
785
- <primer-spinner
786
- size="small"
787
- color="${e}"
788
- compact
789
- ></primer-spinner>
790
- `}render(){return d`
791
- <button
792
- type=${this.buttonType}
793
- ?disabled=${this.disabled||this.loading}
794
- @click=${this.handleClick}
795
- part="button"
796
- aria-checked=${this.selectionState==="checked"}
797
- aria-busy=${this.loading}
798
- >
799
- ${this.renderSpinner()}
800
- <span class="button-content ${this.loading?"loading":""}">
801
- <slot></slot>
802
- </span>
803
- ${this.renderCheckmark()}
804
- </button>
805
- `}};U.styles=[S,Xi],s([l({type:String,reflect:!0})],U.prototype,"variant",2),s([l({type:Boolean,reflect:!0})],U.prototype,"disabled",2),s([l({type:Boolean,reflect:!0})],U.prototype,"loading",2),s([l({type:String,attribute:"type"})],U.prototype,"buttonType",2),s([l({type:String,reflect:!0})],U.prototype,"selectionState",2),s([l({type:Boolean,reflect:!0})],U.prototype,"selectable",2),U=s([f("primer-button")],U);var ns=as({tagName:"primer-button",elementClass:U,react:ss});import{createComponent as ls}from"@lit/react";import ds from"react";var Qi=h`
806
- :host {
807
- display: flex;
808
- flex-direction: column;
809
- gap: var(--primer-space-medium);
810
- width: 100%;
811
- }
812
-
813
- h2 {
814
- margin: 0;
815
- padding: 0;
816
- border-radius: var(--primer-radius-medium);
817
- font-weight: var(--primer-typography-title-xlarge-weight);
818
- font-size: var(--primer-typography-title-xlarge-size);
819
- letter-spacing: var(--primer-typography-title-xlarge-letter-spacing);
820
- line-height: var(--primer-typography-title-xlarge-line-height);
821
- font-family: var(--primer-typography-title-xlarge-font);
822
- }
823
-
824
- p {
825
- margin: 0;
826
- padding: 0;
827
- border-radius: var(--primer-radius-medium);
828
- font-weight: var(--primer-typography-body-medium-weight);
829
- font-size: var(--primer-typography-body-medium-size);
830
- letter-spacing: var(--primer-typography-body-medium-letter-spacing);
831
- line-height: var(--primer-typography-body-medium-line-height);
832
- font-family: var(--primer-typography-body-medium-font);
833
- }
834
-
835
- form {
836
- display: flex;
837
- flex-direction: column;
838
- gap: var(--primer-space-medium);
839
- width: 100%;
840
- }
841
-
842
- .form-row {
843
- display: flex;
844
- gap: var(--primer-space-small);
845
- width: 100%;
846
- }
847
-
848
- .form-row primer-input-wrapper {
849
- flex: 1;
850
- }
851
-
852
- .error-message {
853
- color: var(--primer-color-text-negative);
854
- background-color: var(--primer-color-red-100);
855
- padding: var(--primer-space-small);
856
- border-radius: var(--primer-radius-small);
857
- font-weight: var(--primer-typography-body-medium-weight);
858
- font-size: var(--primer-typography-body-medium-size);
859
- letter-spacing: var(--primer-typography-body-medium-letter-spacing);
860
- line-height: var(--primer-typography-body-medium-line-height);
861
- font-family: var(--primer-typography-body-medium-font);
862
- }
863
-
864
- .loading-container {
865
- display: flex;
866
- flex-direction: column;
867
- align-items: center;
868
- justify-content: center;
869
- gap: var(--primer-space-medium);
870
- padding: var(--primer-space-large);
871
- }
872
-
873
- .button-group {
874
- display: flex;
875
- gap: var(--primer-space-small);
876
- margin-top: var(--primer-space-medium);
877
- }
878
-
879
- /* Apply responsive styles for small screens */
880
- @media (max-width: 600px) {
881
- .form-row {
882
- flex-direction: column;
883
- gap: var(--primer-space-medium);
884
- }
885
-
886
- .button-group {
887
- flex-direction: column;
888
- }
889
- }
890
- `;function Ji(){return{firstName:{value:"",error:"",pristine:!0,touched:!1,dirty:!1,valid:!1},lastName:{value:"",error:"",pristine:!0,touched:!1,dirty:!1,valid:!1},emailAddress:{value:"",error:"",pristine:!0,touched:!1,dirty:!1,valid:!1}}}var rr=class{constructor(t,e){this.formState=Ji();this.host=t,this.validate=e,t.addController(this)}get hasError(){return{firstName:this.formState.firstName.dirty&&this.formState.firstName.touched&&!!this.formState.firstName.error,lastName:this.formState.lastName.dirty&&this.formState.lastName.touched&&!!this.formState.lastName.error,emailAddress:this.formState.emailAddress.dirty&&this.formState.emailAddress.touched&&!!this.formState.emailAddress.error}}get formData(){return{firstName:this.formState.firstName.value,lastName:this.formState.lastName.value,emailAddress:this.formState.emailAddress.value}}async setFieldValue(t,e){let r=this.formState[t];r.value=e,r.dirty=!0,r.error="",r.valid=!0;let o=await this.validate(this.formData);this.setValidation(o)}setValidation(t,e=!1){e&&(this.formState.firstName.touched=!0,this.formState.lastName.touched=!0,this.formState.emailAddress.touched=!0,this.formState.firstName.dirty=!0,this.formState.lastName.dirty=!0,this.formState.emailAddress.dirty=!0),t.validationErrors.forEach(r=>{this.isValidFieldName(r.field)&&(this.formState[r.field].error=r.message,this.formState[r.field].valid=r.message==="")}),this.host.dispatchEvent(new CustomEvent("primer-ach-validation",{bubbles:!0,composed:!0,detail:{validation:t}})),this.host.requestUpdate()}setFieldTouched(t){this.formState[t].touched||(this.formState[t].touched=!0,this.host.requestUpdate())}resetForm(){this.formState=Ji(),this.host.requestUpdate()}isValidFieldName(t){return!!t&&["firstName","lastName","emailAddress"].includes(t)}hostConnected(){}hostDisconnected(){}};var z=class extends u{constructor(){super(...arguments);this.formController=new rr(this,e=>this._paymentMethodManagerTask.value.setAndValidate(e));this.paymentManagers=new Map;this.sdkState=void 0;this.clientOptions=void 0;this.screen="form";this.isSubmitting=!1;this._paymentMethodManagerTask=new P(this,{task:async([e])=>e!=="STRIPE_ACH"?E:this.paymentManagers.get(e)?.manager,args:()=>[this.paymentMethod?.type]})}_handleInput(e,r){let o=e.target;this.formController.setFieldValue(r,o.value)}_handleBlur(e){this.formController.setFieldTouched(e)}_handleError(e){this.dispatchEvent(new CustomEvent("primer-ach-error",{bubbles:!0,composed:!0,detail:{error:e instanceof Error?e:new Error(typeof e=="string"?e:"Unknown error occurred")}}))}async _handleSubmitButtonClick(e){if(!this.isSubmitting){this.isSubmitting=!0;try{let r=await e.start(this.formController.formData);if(!r||r.valid)return await this._handleCollectBankAccountDetails(e);r&&this.formController.setValidation(r,!0)}catch(r){this._handleError(r)}finally{this.isSubmitting=!1}}}async _handleCollectBankAccountDetails(e){try{await e.collectBankAccountDetails(),this.screen="mandate",this.dispatchEvent(new CustomEvent("primer-ach-bank-details-collected",{bubbles:!0,composed:!0}))}catch(r){this._handleError(r)}}async _handleConfirmMandate(){if(this._paymentMethodManagerTask.value){this.isSubmitting=!0;try{await this._paymentMethodManagerTask.value.confirmMandate(),this.dispatchEvent(new CustomEvent("primer-ach-mandate-confirmed",{bubbles:!0,composed:!0}))}catch(e){this._handleError(e)}finally{this.isSubmitting=!1}}}async _handleDeclineMandate(){if(this._paymentMethodManagerTask.value){this.isSubmitting=!0;try{await this._paymentMethodManagerTask.value.declineMandate(),this.dispatchEvent(new CustomEvent("primer-ach-mandate-declined",{bubbles:!0,composed:!0}))}catch(e){this._handleError(e)}finally{this.isSubmitting=!1}}}renderForm(e){return d`
891
- <h2>
892
- ${C("payWithAch",{id:"payWithAch"})}
893
- </h2>
894
- <p>
895
- ${C("stripe_ach_user_details_collection_subtitle_label",{id:"stripe_ach_user_details_collection_subtitle_label"})}
896
- </p>
897
-
898
- <form @submit=${r=>r.preventDefault()}>
899
- <div class="form-row">
900
- <primer-input-wrapper
901
- .hasError=${this.formController.hasError.firstName}
902
- >
903
- <primer-input-label slot="label">
904
- ${C("stripe_ach_user_details_collection_first_name_label",{id:"stripe_ach_user_details_collection_first_name_label"})}
905
- </primer-input-label>
906
- <primer-input
907
- slot="input"
908
- .value=${this.formController.formState.firstName.value}
909
- @input=${r=>this._handleInput(r,"firstName")}
910
- @blur=${()=>this._handleBlur("firstName")}
911
- ?disabled=${this.isSubmitting}
912
- ></primer-input>
913
- <primer-input-error slot="error">
914
- ${this.formController.hasError.firstName?this.formController.formState.firstName.error:c}
915
- </primer-input-error>
916
- </primer-input-wrapper>
917
- <primer-input-wrapper
918
- .hasError=${this.formController.hasError.lastName}
919
- >
920
- <primer-input-label slot="label">
921
- ${C("stripe_ach_user_details_collection_last_name_label",{id:"stripe_ach_user_details_collection_last_name_label"})}
922
- </primer-input-label>
923
- <primer-input
924
- slot="input"
925
- .value=${this.formController.formState.lastName.value}
926
- @input=${r=>this._handleInput(r,"lastName")}
927
- @blur=${()=>this._handleBlur("lastName")}
928
- ?disabled=${this.isSubmitting}
929
- >
930
- </primer-input>
931
- <primer-input-error slot="error">
932
- ${this.formController.hasError.lastName?this.formController.formState.lastName.error:c}
933
- </primer-input-error>
934
- </primer-input-wrapper>
935
- </div>
936
- <primer-input-wrapper
937
- .hasError=${this.formController.hasError.emailAddress}
938
- >
939
- <primer-input-label slot="label">
940
- ${C("stripe_ach_user_details_collection_email_address_label",{id:"stripe_ach_user_details_collection_email_address_label"})}
941
- </primer-input-label>
942
- <primer-input
943
- slot="input"
944
- type="email"
945
- .value=${this.formController.formState.emailAddress.value}
946
- @input=${r=>this._handleInput(r,"emailAddress")}
947
- @blur=${()=>this._handleBlur("emailAddress")}
948
- ?disabled=${this.isSubmitting}
949
- ></primer-input>
950
- <primer-input-error slot="error">
951
- ${this.formController.hasError.emailAddress?this.formController.formState.emailAddress.error:c}
952
- </primer-input-error>
953
- </primer-input-wrapper>
954
- <p>
955
- ${C("stripe_ach_user_details_collection_data_usage_label",{id:"stripe_ach_user_details_collection_data_usage_label"})}
956
- </p>
957
- <primer-button
958
- buttonType="submit"
959
- variant="primary"
960
- @click=${()=>this._handleSubmitButtonClick(e)}
961
- ?disabled=${this.isSubmitting}
962
- ?loading=${this.isSubmitting}
963
- >
964
- ${C("stripe_ach_user_details_collection_continue_button",{id:"stripe_ach_user_details_collection_continue_button"})}
965
- </primer-button>
966
- </form>
967
- `}renderMandate(){return d`
968
- <h2>
969
- ${C("payWithAch",{id:"payWithAch"})}
970
- </h2>
971
-
972
- <p>
973
- ${this.clientOptions?.stripe?.mandateData.fullMandateText??C("stripe_ach_mandate_template_web",{id:"stripe_ach_mandate_template_web"}).replace(/\{merchantName\}/g,this.clientOptions?.stripe?.mandateData.merchantName??"Merchant")}
974
- </p>
975
-
976
- <div class="button-group">
977
- <primer-button
978
- variant="primary"
979
- @click=${this._handleConfirmMandate.bind(this)}
980
- ?disabled=${this.isSubmitting}
981
- ?loading=${this.isSubmitting}
982
- >
983
- ${C("stripe_ach_mandate_accept_button",{id:"stripe_ach_mandate_accept_button"})}
984
- </primer-button>
985
-
986
- <primer-button
987
- variant="tertiary"
988
- @click=${this._handleDeclineMandate.bind(this)}
989
- ?disabled=${this.isSubmitting}
990
- >
991
- ${C("stripe_ach_mandate_cancel_payment_button",{id:"stripe_ach_mandate_cancel_payment_button"})}
992
- </primer-button>
993
- </div>
994
- `}render(){return this._paymentMethodManagerTask.render({complete:e=>e?this.screen==="form"?this.renderForm(e):this.renderMandate():c})}};z.styles=[S,Qi],s([l({type:Object})],z.prototype,"paymentMethod",2),s([v({context:V,subscribe:!0}),l({attribute:!1})],z.prototype,"paymentManagers",2),s([v({context:L,subscribe:!0}),l({attribute:!1})],z.prototype,"sdkState",2),s([v({context:Kt,subscribe:!0}),l({attribute:!1})],z.prototype,"clientOptions",2),s([_()],z.prototype,"screen",2),s([_()],z.prototype,"isSubmitting",2),z=s([f("primer-ach-payment"),T()],z);var ps=ls({tagName:"primer-ach-payment",elementClass:z,react:ds});import{createComponent as cs}from"@lit/react";import ms from"react";var ir="card-form-context";var to=h`
995
- :host {
996
- display: contents;
997
- }
998
-
999
- form {
1000
- display: flex;
1001
- flex-direction: column;
1002
- gap: var(--primer-space-medium);
1003
- width: 100%;
1004
- }
1005
-
1006
- .card-form {
1007
- display: flex;
1008
- flex-direction: column;
1009
- gap: var(--primer-space-medium);
1010
- margin-bottom: var(--primer-space-medium);
1011
- }
1012
-
1013
- .card-form-row {
1014
- display: flex;
1015
- gap: var(--primer-space-small);
1016
- }
1017
- `;var Z=class extends u{constructor(){super(...arguments);this.hideLabels=!1;this.hasAssignedContent=!1;this.selectedCardNetwork=null;this.paymentManagers=new Map;this.cardFormProvider=new I(this,{context:ir,initialValue:null});this.eventsController=new Bt(this);this.setupCardFormTask=new P(this,{task:async([e])=>{if(!e?.manager)return E;let{manager:r}=e,{cardNumberInput:o,expiryInput:a,cvvInput:n}=r.createHostedInputs();return this.cardFormProvider.setValue({cardNumberInput:o,expiryInput:a,cvvInput:n,setCardholderName:m=>r.setCardholderName(m),setCardNetwork:m=>{this.selectedCardNetwork=m},validate:()=>r.validate(),submit:m=>r.submit(m),hideLabels:this.hideLabels}),!0},args:()=>[this.paymentManagers.get("PAYMENT_CARD")]});this.handleSlotButtonClick=e=>{let o=e.target.closest("button, primer-button");if(!o)return;this.isSubmitButton(o)&&(e.preventDefault(),this.submitCardPayment())};this.handleDirectSubmit=e=>{e.stopPropagation(),this.submitCardPayment()};this.onSlotChange=e=>{let o=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=o.length>0};this.handleFormSubmit=e=>{e.preventDefault(),e.stopPropagation(),this.submitCardPayment()}}updated(e){super.updated(e),e.has("hideLabels")&&this.cardFormProvider.value&&this.cardFormProvider.setValue({...this.cardFormProvider.value,hideLabels:this.hideLabels})}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleSlotButtonClick),this.addEventListener("primer-form-submit",this.handleDirectSubmit)}disconnectedCallback(){this.removeEventListener("click",this.handleSlotButtonClick),this.removeEventListener("primer-form-submit",this.handleDirectSubmit),super.disconnectedCallback()}isSubmitButton(e){let r=e.tagName.toLowerCase(),o=r==="button",a=r==="primer-button";return o&&(e.getAttribute("type")==="submit"||e.hasAttribute("data-submit"))||a&&(e.getAttribute("type")==="submit"||e.hasAttribute("data-submit"))}async submitCardPayment(){let e=this.cardFormProvider.value;if(!e)return;let r=await e.validate?.();if(r?.valid){let o=await e.submit?.(this.selectedCardNetwork?{cardNetwork:this.selectedCardNetwork}:void 0);this.eventsController.dispatchFormSubmitSuccess(o)}else{let o=r?.validationErrors;this.cardFormProvider.setValue({...e,errors:o}),this.eventsController.dispatchFormSubmitErrors(o)}}render(){return this.setupCardFormTask.status===yt.ERROR||this.setupCardFormTask.status===yt.INITIAL?c:d`
1018
- <form @submit=${this.handleFormSubmit}>
1019
- <slot name="card-form-content" @slotchange=${this.onSlotChange}></slot>
1020
- ${this.setupCardFormTask.render({complete:()=>w(this.hasAssignedContent,()=>c,()=>d`
1021
- <div class="card-form">
1022
- <primer-input-card-number></primer-input-card-number>
1023
- <div class="card-form-row">
1024
- <primer-input-card-expiry></primer-input-card-expiry>
1025
- <primer-input-cvv></primer-input-cvv>
1026
- </div>
1027
- <primer-input-card-holder-name></primer-input-card-holder-name>
1028
- </div>
1029
- <primer-card-form-submit></primer-card-form-submit>
1030
- `)})}
1031
- </form>
1032
- `}};Z.styles=[S,to],s([l({type:Boolean,attribute:"hide-labels",reflect:!0})],Z.prototype,"hideLabels",2),s([_()],Z.prototype,"hasAssignedContent",2),s([_()],Z.prototype,"selectedCardNetwork",2),s([v({context:V,subscribe:!0}),l({type:Object})],Z.prototype,"paymentManagers",2),Z=s([f("primer-card-form"),T()],Z);var hs=cs({tagName:"primer-card-form",elementClass:Z,react:ms});import{createComponent as us}from"@lit/react";import fs from"react";var eo=h`
1033
- :host {
1034
- display: contents;
1035
- }
1036
- `;var B=class extends u{constructor(){super(...arguments);this._userAssignedProps=new Set;this._internalButtonText="";this.headlessInstance=null;this.clientOptions=null;this.sdkState=null;this.variant="primary";this.disabled=!1;this.handleClick=e=>{if(e.preventDefault(),this.disabled)return;let r=new CustomEvent("primer-form-submit",{bubbles:!0,composed:!0,detail:{source:"primer-card-form-submit"}});this.dispatchEvent(r)}}get buttonText(){return this._userAssignedProps.has("buttonText")?this._internalButtonText:C("pay",{id:"pay"})}set buttonText(e){let r=this.buttonText;e!==""?(this._userAssignedProps.add("buttonText"),this._internalButtonText=e):(this._userAssignedProps.delete("buttonText"),this._internalButtonText=""),this.requestUpdate("buttonText",r)}render(){let e=this.clientOptions?.submitButton?.amountVisible?this.headlessInstance?.getUIOrderAmount():null,r=e?` ${e}`:c;return d`
1037
- <primer-button
1038
- type="submit"
1039
- variant=${this.variant}
1040
- ?disabled=${this.disabled}
1041
- @click=${this.handleClick}
1042
- .loading=${!!this.sdkState?.isProcessing}
1043
- data-submit
1044
- >
1045
- ${this.buttonText}${r}
1046
- </primer-button>
1047
- `}};B.styles=[S,eo],s([l({type:String})],B.prototype,"buttonText",1),s([v({context:j,subscribe:!0}),l({type:Object})],B.prototype,"headlessInstance",2),s([v({context:Kt,subscribe:!0}),l({type:Object})],B.prototype,"clientOptions",2),s([v({context:L,subscribe:!0}),l()],B.prototype,"sdkState",2),s([l({type:String})],B.prototype,"variant",2),s([l({type:Boolean})],B.prototype,"disabled",2),B=s([f("primer-card-form-submit"),T()],B);var gs=us({tagName:"primer-card-form-submit",elementClass:B,react:fs});import{createComponent as Cs}from"@lit/react";import xs from"react";var{I:If}=Ni;var ro=i=>i.strings===void 0;var ye=(i,t)=>{let e=i._$AN;if(e===void 0)return!1;for(let r of e)r._$AO?.(t,!1),ye(r,t);return!0},or=i=>{let t,e;do{if((t=i._$AM)===void 0)break;e=t._$AN,e.delete(i),i=t}while(e?.size===0)},io=i=>{for(let t;t=i._$AM;i=t){let e=t._$AN;if(e===void 0)t._$AN=e=new Set;else if(e.has(i))break;e.add(i),bs(t)}};function ys(i){this._$AN!==void 0?(or(this),this._$AM=i,io(this)):this._$AM=i}function vs(i,t=!1,e=0){let r=this._$AH,o=this._$AN;if(o!==void 0&&o.size!==0)if(t)if(Array.isArray(r))for(let a=e;a<r.length;a++)ye(r[a],!1),or(r[a]);else r!=null&&(ye(r,!1),or(r));else ye(this,i)}var bs=i=>{i.type==er.CHILD&&(i._$AP??(i._$AP=vs),i._$AQ??(i._$AQ=ys))},ar=class extends Xt{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,e,r){super._$AT(t,e,r),io(this),this.isConnected=t._$AU}_$AO(t,e=!0){t!==this.isConnected&&(this.isConnected=t,t?this.reconnected?.():this.disconnected?.()),e&&(ye(this,t),or(this))}setValue(t){if(ro(this._$Ct))this._$Ct._$AI(t,this);else{let e=[...this._$Ct._$AH];e[this._$Ci]=t,this._$Ct._$AI(e,this,0)}}disconnected(){}reconnected(){}};var Kr=()=>new Fr,Fr=class{},Br=new WeakMap,sr=ge(class extends ar{render(i){return c}update(i,[t]){let e=t!==this.Y;return e&&this.Y!==void 0&&this.rt(void 0),(e||this.lt!==this.ct)&&(this.Y=t,this.ht=i.options?.host,this.rt(this.ct=i.element)),c}rt(i){if(this.isConnected||(i=void 0),typeof this.Y=="function"){let t=this.ht??globalThis,e=Br.get(t);e===void 0&&(e=new WeakMap,Br.set(t,e)),e.get(this.Y)!==void 0&&this.Y.call(this.ht,void 0),e.set(this.Y,i),i!==void 0&&this.Y.call(this.ht,i)}else this.Y.value=i}get lt(){return typeof this.Y=="function"?Br.get(this.ht??globalThis)?.get(this.Y):this.Y?.value}disconnected(){this.lt===this.ct&&this.rt(void 0)}reconnected(){this.rt(this.ct)}});var oo=h`
1048
- :host {
1049
- display: flex;
1050
- align-items: center;
1051
- position: relative;
1052
- }
1053
-
1054
- .network-selector {
1055
- display: flex;
1056
- align-items: center;
1057
- cursor: pointer;
1058
- background: none;
1059
- padding: unset;
1060
- border: none;
1061
- transition: opacity var(--primer-animation-duration)
1062
- var(--primer-animation-easing);
1063
- outline: none;
1064
- gap: var(--primer-space-xsmall);
1065
- }
1066
-
1067
- .network-selector:hover {
1068
- opacity: 0.8;
1069
- }
1070
-
1071
- .network-selector:focus-visible {
1072
- outline: 2px solid var(--primer-color-focus);
1073
- border-radius: var(--primer-radius-xsmall);
1074
- }
1075
-
1076
- .network-icon {
1077
- width: var(--primer-size-large);
1078
- height: var(
1079
- --primer-size-medium
1080
- ); /* Added explicit height to maintain aspect ratio */
1081
- object-fit: contain;
1082
- }
1083
-
1084
- .caret {
1085
- margin-left: var(--primer-space-xsmall);
1086
- transition: transform var(--primer-animation-duration)
1087
- var(--primer-animation-easing);
1088
- color: var(--primer-color-icon-primary);
1089
- }
1090
-
1091
- .caret.open {
1092
- transform: rotate(180deg);
1093
- }
1094
-
1095
- .dropdown {
1096
- position: absolute;
1097
- top: 100%;
1098
- right: 0;
1099
- width: max-content;
1100
- min-width: calc(var(--primer-size-xxxlarge) * 3);
1101
- background: var(--primer-color-gray-000);
1102
- border-radius: var(--primer-radius-small);
1103
- box-shadow: 0 var(--primer-space-xxsmall) var(--primer-space-large)
1104
- rgba(0, 0, 0, 0.15);
1105
- z-index: 10;
1106
- overflow: hidden;
1107
- border: 1px solid var(--primer-color-border-outlined-default);
1108
- }
1109
-
1110
- .dropdown:not(.open) {
1111
- display: none;
1112
- }
1113
-
1114
- .dropdown.open {
1115
- display: block;
1116
- max-height: calc(var(--primer-size-xxxlarge) * 4);
1117
- overflow-y: auto;
1118
- }
1119
-
1120
- .network-option {
1121
- display: flex;
1122
- align-items: center;
1123
- padding: var(--primer-space-small) var(--primer-space-medium);
1124
- cursor: pointer;
1125
- transition: background-color var(--primer-animation-duration)
1126
- var(--primer-animation-easing);
1127
- position: relative;
1128
- outline: none;
1129
- background-color: transparent;
1130
- }
1131
-
1132
- /* Only apply hover effect when not in keyboard navigation mode */
1133
- .network-option:hover {
1134
- background-color: var(--primer-color-gray-100);
1135
- }
1136
-
1137
- /* Apply focused style only when the focused class is present (keyboard navigation) */
1138
- .network-option.focused {
1139
- background-color: var(--primer-color-gray-100);
1140
- }
1141
-
1142
- .network-option:focus-visible {
1143
- outline: 2px solid var(--primer-color-focus);
1144
- outline-offset: -2px;
1145
- }
1146
-
1147
- .network-option-icon {
1148
- width: var(--primer-size-medium);
1149
- height: var(--primer-size-small);
1150
- margin-right: var(--primer-space-small);
1151
- object-fit: contain;
1152
- }
1153
-
1154
- .network-name {
1155
- font-size: var(--primer-typography-body-medium-size);
1156
- font-family: var(--primer-typography-body-medium-font);
1157
- line-height: var(--primer-typography-body-medium-line-height);
1158
- letter-spacing: var(--primer-typography-body-medium-letter-spacing);
1159
- white-space: nowrap;
1160
- color: var(--primer-color-text-primary);
1161
- flex: 1;
1162
- }
1163
-
1164
- .checkmark {
1165
- margin-left: var(--primer-space-small);
1166
- color: var(--primer-color-brand);
1167
- width: var(--primer-size-small);
1168
- height: var(--primer-size-small);
1169
- }
1170
- `;var F=class extends u{constructor(){super(...arguments);this.cardNetworks=null;this.headlessUtils=null;this.selectedCardNetwork=null;this.isDropdownOpen=!1;this.focusedNetworkIndex=0;this.isKeyboardNavigation=!1;this.buttonRef=Kr();this.dropdownRef=Kr();this.networkOptionRefs=[];this.handleClickOutside=e=>{this.isDropdownOpen&&(this.contains(e.target)||(this.isDropdownOpen=!1,this.isKeyboardNavigation=!1))};this.handleMouseMove=()=>{this.isKeyboardNavigation&&(this.isKeyboardNavigation=!1)};this.handleKeyDown=e=>{if(!(!(this.getSelectableNetworks().length>1)||!(this.contains(e.target)||this===e.target||this.isDropdownOpen&&e.target===document.body)))switch(this.isKeyboardNavigation=!0,e.key){case"ArrowDown":e.preventDefault(),this.isDropdownOpen?(this.focusedNetworkIndex=(this.focusedNetworkIndex+1)%this.getSelectableNetworks().length,this.focusNetworkOption()):(this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case"ArrowUp":e.preventDefault(),this.isDropdownOpen?(this.focusedNetworkIndex=(this.focusedNetworkIndex-1+this.getSelectableNetworks().length)%this.getSelectableNetworks().length,this.focusNetworkOption()):(this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case"Enter":case" ":this.isDropdownOpen&&this.focusedNetworkIndex>=0?(e.preventDefault(),this.selectNetwork(e,this.getSelectableNetworks()[this.focusedNetworkIndex])):!this.isDropdownOpen&&this.buttonRef.value===document.activeElement&&(e.preventDefault(),this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case"Escape":this.isDropdownOpen&&(e.preventDefault(),this.isDropdownOpen=!1,this.buttonRef.value?.focus());break;case"Tab":this.isDropdownOpen&&(this.isDropdownOpen=!1);break}};this.handleDocumentKeyDown=e=>{this.isDropdownOpen&&this.handleKeyDown(e)}}toggleDropdown(e){this.isKeyboardNavigation=!1,e.stopPropagation(),this.getSelectableNetworks().length>1&&(this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen&&(this.focusedNetworkIndex=this.getSelectedNetworkIndex()))}getNetworkIconUrl(e){return this.headlessUtils?.getCardNetworkAsset(e.network)?.cardUrl}getSelectableNetworks(){return this.cardNetworks?.selectableCardNetworks||[]}getDetectedNetwork(){return this.selectedCardNetwork??(this.cardNetworks?.detectedCardNetwork||null)}getSelectedNetworkIndex(){let e=this.getDetectedNetwork();if(!e)return 0;let r=this.getSelectableNetworks().findIndex(o=>o.network===e.network);return r>=0?r:0}selectNetwork(e,r){e.stopPropagation(),this.selectedCardNetwork=r,this.isDropdownOpen=!1,this.buttonRef.value?.focus(),this.cardNetworks&&this.dispatchEvent(new CustomEvent("network-selected",{detail:{network:r.network},bubbles:!0,composed:!0}))}focusNetworkOption(){requestAnimationFrame(()=>{this.networkOptionRefs[this.focusedNetworkIndex]&&this.networkOptionRefs[this.focusedNetworkIndex].focus()})}setNetworkOptionRef(e,r){this.networkOptionRefs[r]=e}connectedCallback(){super.connectedCallback(),setTimeout(()=>{document.addEventListener("click",this.handleClickOutside),document.addEventListener("mousemove",this.handleMouseMove),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keydown",this.handleDocumentKeyDown)},0)}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousemove",this.handleMouseMove),this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}render(){if(this.cardNetworks?.isLoading)return d`<primer-spinner size="small" compact></primer-spinner>`;let e=this.getSelectableNetworks();if(!this.getDetectedNetwork()&&e.length===0)return d`<primer-icon name="payment-card" size="sm"></primer-icon>`;let r=this.getDetectedNetwork()||(e.length>0?e[0]:null);if(!r)return d`<primer-icon name="payment-card" size="sm"></primer-icon>`;let o=e.length>1;return d`
1171
- <button
1172
- ${sr(this.buttonRef)}
1173
- class="network-selector"
1174
- @click=${this.toggleDropdown}
1175
- @keydown=${a=>{(a.key===" "||a.key==="Enter")&&o&&(a.preventDefault(),this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen&&(this.focusedNetworkIndex=this.getSelectedNetworkIndex()))}}
1176
- aria-label=${o?`Selected card network: ${r.displayName}. Click to change.`:`Card network: ${r.displayName}`}
1177
- aria-expanded=${o?this.isDropdownOpen:c}
1178
- aria-haspopup=${o?"true":c}
1179
- aria-controls=${o?"network-dropdown":c}
1180
- >
1181
- <img
1182
- class="network-icon"
1183
- src=${this.getNetworkIconUrl(r)}
1184
- alt=${r.displayName}
1185
- />
1186
- ${w(o,()=>d`
1187
- <primer-icon
1188
- class="caret ${this.isDropdownOpen?"open":""}"
1189
- size="sm"
1190
- name="chevron-down"
1191
- ></primer-icon>
1192
- `,()=>c)}
1193
- </button>
1194
-
1195
- ${w(this.isDropdownOpen,()=>d`
1196
- <div
1197
- ${sr(this.dropdownRef)}
1198
- id="network-dropdown"
1199
- class="dropdown open"
1200
- role="listbox"
1201
- aria-label="Select card network"
1202
- >
1203
- ${e.map((a,n)=>d`
1204
- <div
1205
- ${sr(m=>this.setNetworkOptionRef(m,n))}
1206
- class="network-option ${this.isKeyboardNavigation&&n===this.focusedNetworkIndex?"focused":""}"
1207
- @click=${m=>this.selectNetwork(m,a)}
1208
- @keydown=${m=>{(m.key==="Enter"||m.key===" ")&&this.selectNetwork(m,a)}}
1209
- role="option"
1210
- aria-selected=${a.network===r.network}
1211
- tabindex="${n===this.focusedNetworkIndex?"0":"-1"}"
1212
- >
1213
- <img
1214
- class="network-option-icon"
1215
- src=${this.getNetworkIconUrl(a)}
1216
- alt=${a.displayName}
1217
- />
1218
- <span class="network-name">${a.displayName}</span>
1219
- ${w(a.network===r.network,()=>d`
1220
- <primer-icon
1221
- class="checkmark"
1222
- name="checkmark"
1223
- size="sm"
1224
- ></primer-icon>
1225
- `,()=>c)}
1226
- </div>
1227
- `)}
1228
- </div>
1229
- `,()=>c)}
1230
- `}};F.styles=[S,oo],s([v({context:Te,subscribe:!0})],F.prototype,"cardNetworks",2),s([v({context:j,subscribe:!0})],F.prototype,"headlessUtils",2),s([_()],F.prototype,"selectedCardNetwork",2),s([_()],F.prototype,"isDropdownOpen",2),s([_()],F.prototype,"focusedNetworkIndex",2),s([_()],F.prototype,"isKeyboardNavigation",2),F=s([f("primer-card-network-selector")],F);var As=Cs({tagName:"primer-card-network-selector",elementClass:F,react:xs});import{createComponent as _s}from"@lit/react";import Es from"react";function ao(i,t){if(i.style.cssText="width: 100%; flex:1; padding: 0; border: none; height: var(--primer-typography-body-large-line-height); font-size: var(--primer-typography-body-large-size); font-family: var(--primer-typography-body-large-font); color: var(--primer-color-text-primary); background-color: transparent; outline: none;",i.setAttribute("data-custom-input",""),!t.shadowRoot?.querySelector("style[data-custom-input-style]")){let e=document.createElement("style");e.setAttribute("data-custom-input-style",""),e.textContent=`
109
+ </div>
110
+ </body>
111
+ </html>
112
+ `;function ns(i,t){var e={};for(var r in i)Object.prototype.hasOwnProperty.call(i,r)&&t.indexOf(r)<0&&(e[r]=i[r]);if(i!=null&&typeof Object.getOwnPropertySymbols=="function")for(var o=0,r=Object.getOwnPropertySymbols(i);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(i,r[o])&&(e[r[o]]=i[r[o]]);return e}function ss(i,t){var e=document.querySelector('script[src="'.concat(i,'"]'));if(e===null)return null;var r=Bo(i,t),o=e.cloneNode();if(delete o.dataset.uidAuto,Object.keys(o.dataset).length!==Object.keys(r.dataset).length)return null;var a=!0;return Object.keys(o.dataset).forEach(function(n){o.dataset[n]!==r.dataset[n]&&(a=!1)}),a?e:null}function ls(i){var t=i.url,e=i.attributes,r=i.onSuccess,o=i.onError,a=Bo(t,e);a.onerror=o,a.onload=r,document.head.insertBefore(a,document.head.firstElementChild)}function ds(i){var t=i.sdkBaseUrl,e=i.environment,r=ns(i,["sdkBaseUrl","environment"]),o=t||us(e),a=r,n=Object.keys(a).filter(function(c){return a[c]!==void 0&&a[c]!==null&&a[c]!==""}).reduce(function(c,m){var f=a[m].toString();return m=cs(m),m.substring(0,4)==="data"||m==="crossorigin"?c.attributes[m]=f:c.queryParams[m]=f,c},{queryParams:{},attributes:{}}),s=n.queryParams,d=n.attributes;return s["merchant-id"]&&s["merchant-id"].indexOf(",")!==-1&&(d["data-merchant-id"]=s["merchant-id"],s["merchant-id"]="*"),{url:"".concat(o,"?").concat(ps(s)),attributes:d}}function cs(i){var t=function(e,r){return(r?"-":"")+e.toLowerCase()};return i.replace(/[A-Z]+(?![a-z])|[A-Z]/g,t)}function ps(i){var t="";return Object.keys(i).forEach(function(e){t.length!==0&&(t+="&"),t+=e+"="+i[e]}),t}function us(i){return i==="sandbox"?"https://www.sandbox.paypal.com/sdk/js":"https://www.paypal.com/sdk/js"}function Bo(i,t){t===void 0&&(t={});var e=document.createElement("script");return e.src=i,Object.keys(t).forEach(function(r){e.setAttribute(r,t[r]),r==="data-csp-nonce"&&e.setAttribute("nonce",t["data-csp-nonce"])}),e}function ms(i,t){if(t===void 0&&(t=Promise),zo(i,t),typeof document>"u")return t.resolve(null);var e=ds(i),r=e.url,o=e.attributes,a=o["data-namespace"]||"paypal",n=vo(a);return o["data-js-sdk-library"]||(o["data-js-sdk-library"]="paypal-js"),ss(r,o)&&n?t.resolve(n):hs({url:r,attributes:o},t).then(function(){var s=vo(a);if(s)return s;throw new Error("The window.".concat(a," global variable is not available."))})}function hs(i,t){t===void 0&&(t=Promise),zo(i,t);var e=i.url,r=i.attributes;if(typeof e!="string"||e.length===0)throw new Error("Invalid url.");if(r!==void 0&&typeof r!="object")throw new Error("Expected attributes to be an object.");return new t(function(o,a){if(typeof document>"u")return o();ls({url:e,attributes:r,onSuccess:function(){return o()},onError:function(){var n=new Error('The script "'.concat(e,'" failed to load. Check the HTTP status code and response body in DevTools to learn more.'));return a(n)}})})}function vo(i){return window[i]}function zo(i,t){if(typeof i!="object"||i===null)throw new Error("Expected an options object.");var e=i.environment;if(e&&e!=="production"&&e!=="sandbox")throw new Error('The `environment` option must be either "production" or "sandbox".');if(t!==void 0&&typeof t!="function")throw new Error("Expected PromisePonyfill to be a function.")}var Er=class extends Ge{constructor(){super(...arguments);O(this,"paypalInstance");O(this,"dataNamespace",Ot());O(this,"callbacks",{onStart:()=>{},onError:()=>{},onSuccess:()=>{}})}setCallbacks(e){this.callbacks=e}async tokenize(){throw new Error("PayPal does not support direct tokenization")}async setup(){let{clientId:e,intent:r}=this.config.options;if(!e||!r)return!1;try{let o=await ms({dataNamespace:this.dataNamespace,clientId:e,currency:this.context.configuration.clientSession.order.currencyCode,components:["buttons","funding-eligibility"],disableFunding:["bancontact","card","credit"],intent:r??"authorize"});return o?(this.paypalInstance=o,!0):!1}catch{return!1}}async render(e){if(!this.paypalInstance.Buttons)return;let r=this.paypalInstance.Buttons({style:{color:"gold",shape:"rect",label:"paypal",tagline:!1},createOrder:this.handleCreateOrder.bind(this),onInit:this.handleInit.bind(this),onClick:this.handleClick.bind(this),onApprove:this.handleApprove.bind(this),onCancel:this.handleCancel.bind(this),onError:this.handleError.bind(this)});if(!r.isEligible())throw new Error("PayPal Buttons are not eligible for rendering");await r.render(e)}handleInit(e,r){}handleClick(e,r){return r.resolve()}async handleCreateOrder(){this.callbacks.onStart(),await this.context.clientSessionApi.selectPaymentMethod(this.config.type);let{data:e,error:r}=await this.context.coreApi.createPaypalOrder(this.buildCreateOrderRequestBody());if(r||!e)throw r??new Error("Unable to create PayPal order");return e.orderId}async handleApprove(e,r){let o=null;try{o=await r?.order?.get()??null}catch{}let{error:a,data:n}=await this.context.pciApi.postPaymentInstruments({external_payer_info:{email:o?.payment_source?.paypal?.email_address,external_payer_id:e.payerID??void 0},paypal_order_id:e.orderID,paypal_status:o?.status});if(a||!n)throw a??new Error("Unable to create payment instrument");let s=await this.createPayment(n.token);this.callbacks.onSuccess(s)}handleCancel(){this.context.clientSessionApi.unselectPaymentMethod()}handleError(e){}buildCreateOrderRequestBody(){let{order:{currencyCode:e,merchantAmount:r,totalOrderAmount:o,shipping:a,lineItems:n=[],fees:s=[]}}=this.context.configuration.clientSession;if(!e)throw new Error("Currency code is not provided");let d={amount:r??o,currencyCode:e,paymentMethodConfigId:this.config.id,amountBreakdown:{}},c=!n.some(({description:m})=>!m);if(c&&(d.items=n.map(({description:m,taxAmount:f,amount:y,quantity:A})=>{let P=f?Math.floor(f/A):0;return{name:m,unit_amount:{value:y,currency_code:e},quantity:A.toString(),tax:{value:P,currency_code:e}}})),c&&n.length){let m=n.reduce((P,{amount:w,quantity:N})=>P+w*N,0),f=s?.reduce?.((P,{amount:w})=>P+(w??0),0),y=n?.reduce((P,{discountAmount:w})=>P+(w??0),0),A=n?.reduce((P,{taxAmount:w,quantity:N})=>P+(w??0*N),0);d.amountBreakdown={item_total:{value:m,currency_code:e},tax_total:{value:A,currency_code:e},handling:{value:f??0,currency_code:e},shipping:{value:a?.amount??0,currency_code:e},discount:{value:y,currency_code:e}}}return d}},bo=5,Ar=class extends Ge{constructor(){super(...arguments);O(this,"applePaySession",null);O(this,"callbacks",{onStart:()=>{},onError:()=>{},onSuccess:()=>{}})}setCallbacks(e){this.callbacks=e}async tokenize(){throw new Error("ApplePay does not support direct tokenization")}async setup(){try{if(!ApplePaySession||!ApplePaySession.supportsVersion(bo)||!ApplePaySession.canMakePayments())return!1;let e=window.location.hostname;if(!(this.config.options.merchantDomains||[]).includes(e))return!1}catch{return!1}return!0}async render(e){let r=document.createElement("button");r.setAttribute("style","display: inline-block;width: 100%;cursor: pointer;height: 40px;-webkit-appearance: -apple-pay-button;-apple-pay-button-type: plain;-apple-pay-button-style: black"),r.setAttribute("type","button"),r.classList.add("primer-apple-pay-button"),r.addEventListener("click",this.handleButtonClick.bind(this)),e.appendChild(r)}async handleButtonClick(){try{this.callbacks.onStart(),this.applePaySession=new ApplePaySession(bo,this.createPaymentRequest()),this.applePaySession.onvalidatemerchant=this.handleValidateMerchant.bind(this),this.applePaySession.onpaymentauthorized=this.handlePaymentAuthorized.bind(this),this.applePaySession.onpaymentmethodselected=this.handlePaymentMethodSelected.bind(this),this.applePaySession.oncancel=this.handleCancel.bind(this),this.applePaySession.begin()}catch{}}async handleValidateMerchant({validationURL:e}){if(this.applePaySession)try{let{data:r,error:o}=await this.context.coreApi.createApplePaySession({validationUrl:e,paymentMethodConfigId:this.config.id,merchantDomain:window.location.hostname});if(o||!r||!this.applePaySession)throw o??new Error("Failed to validate merchant");this.applePaySession.completeMerchantValidation(r)}catch{this.abort()}}async handlePaymentMethodSelected(){if(this.applePaySession)try{let{merchantAmount:e,totalOrderAmount:r}=this.context.configuration.clientSession.order;this.applePaySession.completePaymentMethodSelection({newTotal:{label:this.config.options.merchantName,amount:this.formatAmount(e??r),type:"final"}})}catch{this.abort()}}async handlePaymentAuthorized({payment:e}){if(this.applePaySession)try{let r={paymentMethodConfigId:this.config.id,token:e.token},o=await this.context.pciApi.postPaymentInstruments(r),a=await this.createPayment(o.data.token),n=await this.handleRequiredAction(a);n.status==="SUCCESS"?(this.applePaySession.completePayment(ApplePaySession.STATUS_SUCCESS),this.callbacks.onSuccess(n)):(this.applePaySession.completePayment(ApplePaySession.STATUS_FAILURE),this.callbacks.onError()),this.applePaySession=null}catch{this.applePaySession&&(this.applePaySession.completePayment(ApplePaySession.STATUS_FAILURE),this.applePaySession=null),this.callbacks.onError()}}handleCancel(){this.applePaySession=null,this.callbacks.onError()}abort(){this.applePaySession?.abort(),this.applePaySession=null,this.callbacks.onError()}createPaymentRequest(){let{countryCode:e,currencyCode:r,merchantAmount:o,totalOrderAmount:a}=this.context.configuration.clientSession.order;if(!e||!r)throw new Error("Country code and currency code are required");let n=["visa","masterCard","amex"],s=this.formatAmount(o??a);return{countryCode:e,currencyCode:r,merchantCapabilities:["supports3DS"],supportedNetworks:n,total:{amount:s,label:this.config.options.merchantName,type:"pending"}}}formatAmount(e){return(e/100).toFixed(2)}};function fs(i,t={}){return new Promise((e,r)=>{if(document.querySelector(`script[src="${i}"]`))return void e();let o=document.createElement("script");o.src=i,Object.entries(t).forEach(([a,n])=>{o.setAttribute(a,n)}),o.onload=()=>{e()},o.onerror=()=>{r(new Error(`Failed to load script: ${i}`))},document.head.appendChild(o)})}var Co=2,Eo=0,_r=class extends Ge{constructor(){super(...arguments);O(this,"client");O(this,"callbacks",{onStart:()=>{},onError:()=>{},onSuccess:()=>{}});O(this,"allowedPaymentMethod",{type:"CARD",parameters:{allowedAuthMethods:["PAN_ONLY"],allowedCardNetworks:["AMEX","DISCOVER","INTERAC","JCB","MASTERCARD","VISA"]}})}setCallbacks(e){this.callbacks=e}async tokenize(){throw new Error("Google Pay does not support direct tokenization")}async setup(){try{await fs("https://pay.google.com/gp/p/js/pay.js")}catch{return!1}if(!window.google||!window.google.payments||(this.client=new google.payments.api.PaymentsClient({environment:"TEST"}),!this.client.isReadyToPay(this.buildIsReadyToPayRequest())))return!1;let{countryCode:e,currencyCode:r}=this.context.configuration.clientSession.order;return!(!e||!r)}async render(e){let r=this.client.createButton({buttonType:"buy",buttonColor:"black",buttonSizeMode:"fill",buttonRootNode:e instanceof ShadowRoot?e:void 0,onClick:this.handleButtonClick.bind(this)});e.appendChild(r)}async handleButtonClick(){this.callbacks.onStart();try{let e=this.buildPaymentDataRequest(),r=await this.client.loadPaymentData(e),{data:o,error:a}=await this.context.pciApi.postPaymentInstruments({flow:"GATEWAY",network:r.paymentMethodData.info?.cardNetwork??"OTHER",merchant_id:this.config.options.merchantId,encrypted_payload:vr.encode(r.paymentMethodData.tokenizationData.token)});if(a||!o)throw a??new Error("Failed to tokenize payment data");let n=await this.createPayment(o.token);n.status==="SUCCESS"?this.callbacks.onSuccess(n):this.callbacks.onError()}catch(e){throw this.callbacks.onError(),e}}async handlePaymentDataChanged(e){return{}}buildIsReadyToPayRequest(){return{apiVersion:Co,apiVersionMinor:Eo,allowedPaymentMethods:[this.allowedPaymentMethod]}}buildPaymentDataRequest(){let{countryCode:e,currencyCode:r,merchantAmount:o,totalOrderAmount:a}=this.context.configuration.clientSession.order;return{apiVersion:Co,apiVersionMinor:Eo,transactionInfo:{countryCode:e,currencyCode:r,displayItems:[],totalPriceStatus:"FINAL",totalPrice:this.formatAmount(o??a),totalPriceLabel:"Total"},merchantInfo:{merchantId:this.config.options.merchantId,merchantName:this.config.options.merchantName},allowedPaymentMethods:[{...this.allowedPaymentMethod,tokenizationSpecification:{type:"PAYMENT_GATEWAY",parameters:{gateway:"primer",gatewayMerchantId:this.config.options.merchantId}}}]}}formatAmount(e){return(e/100).toFixed(2)}};async function ys(i){let t=i.configuration.paymentMethods.map(r=>{if(r.implementationType==="WEB_REDIRECT")return new ui(r,i);if(r.type===st.PAYMENT_CARD)return new Cr(r,i);if(r.type===st.PAYPAL)return new Er(r,i);if(r.type===st.APPLE_PAY)return new Ar(r,i);if(r.type===st.GOOGLE_PAY)return new _r(r,i)}).map(r=>r?.setup().then(o=>o?r:null));return(await Promise.all(t)).filter(r=>!!r)}async function gs(i){let t=await Gn(i),e=await ys(t);return{context:t,paymentMethods:e}}async function vs(i){try{await i.start();let t=await i.tokenize(),e=await i.createPayment(t.token);return await i.handleRequiredAction(e)}catch(t){throw t}}async function Fo(i,t){let{paymentMethods:e,context:r}=await gs(i);return t.onAvailablePaymentMethodsLoad?.(e.map(o=>({type:o.config.type,managerType:o.config.type===st.PAYMENT_CARD?"CARD":o.config.implementationType==="NATIVE_SDK"?"NATIVE":"REDIRECT"}))),{start:()=>Promise.resolve(),createPaymentMethodManager:async o=>{let a=e.find(({config:n})=>n.type===o);return a?a instanceof Cr?Es(t,r,a):a instanceof Er||a instanceof Ar||a instanceof _r?bs(t,r,a):Cs(t,r,a):null},getSDKUtilities:()=>({getCardNetworkAsset:o=>{},getUIOrderAmount:()=>{},getCDNAssets:o=>{},getPaymentMethodConfiguration:o=>e.find(({config:a})=>a.type===o)?.config}),createVaultManager:()=>{}}}function bs(i,t,e){return{createButton:()=>({render:async r=>{e.setCallbacks({onStart:()=>{i.onBeforePaymentCreate?.(),i.onPaymentCreationStart?.()},onSuccess(o){i.onCheckoutComplete?.({payment:o})},onError(){i.onCheckoutFail?.(new Error("Payment creation failed"),{})}}),await e.render(r)}})}}function Cs(i,t,e){return{start:()=>jo(i,e)}}function Es(i,t,e){return{createHostedInputs:()=>{let r=o=>{let a=new Map,n=e.store.publicStore.getState()[o];return e.store.publicStore.subscribe(s=>{let d=s[o];d.error===n.error&&d.dirty===n.dirty&&d.valid===n.valid&&d.touched===n.touched&&d.focused===n.focused||(d.focused!==n.focused&&(d.focused?a.get("focus")?.():a.get("blur")?.()),a.get("change")?.(d),n=d)}),{getOptions:()=>({}),setOptions:s=>{},render:(s,d)=>{let c=e.iframes[o];if(!c)return Promise.resolve();let m;return m=typeof s=="string"?document.querySelector(s):s,m&&(m.appendChild(c),c.onload=()=>{e.store.optionsStore.setState({[o]:d})}),Promise.resolve()},addEventListener:(s,d)=>{a.set(s,d)},focus:()=>{},blur:()=>{},setDisabled:s=>{}}};return{cardNumberInput:r("cardNumber"),cardHolderNameInput:r("cardHolderName"),expiryInput:r("cardExpiryDate"),cvvInput:r("cardSecurityCode")}},removeHostedInputs:()=>{e.iframes.cardNumber.remove(),e.iframes.cardSecurityCode.remove(),e.iframes.cardExpiryDate.remove(),e.iframes.cardHolderName.remove()},submit:()=>jo(i,e),validate:()=>Promise.resolve({valid:!0,validationErrors:[]}),reset:()=>{}}}var jo=async(i,t)=>{i.onBeforePaymentCreate?.(),i.onPaymentCreationStart?.();let e=null,r=null;try{r=await vs(t)}catch(o){e=o}finally{if(e||!r){i.onCheckoutFail?.(new Error("Payment creation failed"),{});return}if(r.status==="FAILED")return void i.onCheckoutFail?.(new Error("Payment failed"),{payment:r??{}});i.onCheckoutComplete?.({payment:r})}};var xr=class{constructor(t){this.createPaymentMethodManager=null;this._paymentsList=[];this.currentSdkInstance=null;this.primerJS=null;this.loadingTimeout=null;this.isDisconnected=!1;(this.host=t).addController(this),this.isDisconnected=!1,this.sdkInstanceTask=new I(t,{args:()=>[this.host.clientToken,this.host.options],task:this.initializeHeadless()}),new I(t,{args:()=>[this.sdkInstanceTask.value,this.paymentsList],task:this.initializeLitContext()})}set paymentsList(t){this._paymentsList=t,this.host.requestUpdate()}get paymentsList(){return this._paymentsList}hostConnected(){this.isDisconnected=!1,this.host.sdkStateController.startLoading(),this.setupLoadingTimeout()}hostDisconnected(){this.isDisconnected=!0,this.cleanupResources()}setupLoadingTimeout(){this.clearLoadingTimeout(),this.loadingTimeout=setTimeout(()=>{this.host.sdkStateController.currentState.isLoading&&(E.warn("Loading timeout reached, resetting SDK state"),this.cleanupResources(),this.host.sdkStateController.completeLoading())},1e4)}clearLoadingTimeout(){this.loadingTimeout!==null&&(clearTimeout(this.loadingTimeout),this.loadingTimeout=null)}cleanupResources(){if(this.clearLoadingTimeout(),this.currentSdkInstance)try{this.paymentsList=[],this.createPaymentMethodManager=null,this.host.sdkStateController.reset(),E.info("SDK instance cleaned up")}catch(t){E.error("Error cleaning up SDK instance:",t)}this.currentSdkInstance=null,this.primerJS=null}async _loadV2Sdk(t=lo){let e=window;if(e.Primer&&typeof e.Primer.preloadPrimer=="function"){E.info("SDK already loaded, skipping load script"),await e.Primer.preloadPrimer();return}await po(t),await e.Primer.preloadPrimer()}initializeHeadless(){return async([t,e])=>{if(this.isDisconnected)return E.warn("Component disconnected, aborting SDK initialization"),T;if(!t||!e)return T;this.cleanupResources();try{let r;e.sdkCore?r={createHeadless:Fo}:(await this._loadV2Sdk(),r=window.Primer),this.primerJS=new mr(null);let o=await r.createHeadless(t,{...e,onAvailablePaymentMethodsLoad:n=>{this.isDisconnected||(E.info("Configuration payment methods:",n),this.paymentsList=n)},onCheckoutComplete:({payment:n})=>{this.isDisconnected||(E.info("Payment completed:",n),this.host.sdkStateController.completeProcessing(),this.primerJS&&this.primerJS.handlePaymentComplete(n))},onCheckoutFail:(n,s)=>{this.isDisconnected||(E.error("Payment failed:",n),this.host.sdkStateController.setFailure(n.code||"UNKNOWN_ERROR",n.message||"Unknown error occurred"),this.primerJS&&this.primerJS.handlePaymentFailure(n,s.payment))},onBeforePaymentCreate:(n,s)=>{this.isDisconnected||(this.host.sdkStateController.startProcessing(),this.primerJS?this.primerJS.handleBeforePaymentCreate(n,s):s?.continuePaymentCreation())},onPaymentMethodAction:(n,s)=>{this.isDisconnected||n==="PAYMENT_METHOD_UNSELECTED"&&this.host.sdkStateController.stopProcessing()},onPaymentCreationStart:()=>{this.isDisconnected||(this.host.sdkStateController.resetError(),this.primerJS&&this.primerJS.handlePaymentStart())}});if(this.createPaymentMethodManager=o.createPaymentMethodManager.bind(o),this.currentSdkInstance=o,this.primerJS&&Object.defineProperty(this.primerJS,"headlessInstance",{value:o,writable:!1}),await o.start(),this.isDisconnected)return this.cleanupResources(),T;this.host.sdkContextController.setClientOptions(e),this.primerJS&&this.host.primerEventsController.dispatchCheckoutInitialized(this.primerJS);let a=o.getSDKUtilities();return this.host.sdkContextController.setHeadlessUtils(a),this.host.vaultManagerController.initializeVaultManager(o.createVaultManager(),{vaultEnabled:e.vault?.enabled,captureVaultedCardCvv:!!a.getPaymentMethodConfiguration("PAYMENT_CARD")?.options?.captureVaultedCardCvv,showEmptyState:e.vault?.showEmptyState}),o}catch(r){throw r instanceof Error&&(E.error("SDK initialization error:",r),this.host.sdkStateController.setError(r)),this.cleanupResources(),r}}}initializeLitContext(){return async([t,e])=>{if(this.isDisconnected)return T;if(!t||!e.length)return T;let r=new Map,o=new Map;try{for(let n of e){if(this.isDisconnected)break;let s=await this.initializePaymentMethodManager(n)();n&&s&&(r.set(n.type,n),o.set(n.type,s))}if(this.isDisconnected)return T;let a=new ur(r);return this.host.sdkContextController.setPaymentManagers(o),this.host.sdkContextController.setPaymentMethods(a),this.primerJS&&this.primerJS.setPaymentMethods(a),this.host.primerEventsController.dispatchPaymentMethods(a),E.info("Initialized payment methods:",a.toArray()),r}catch(a){if(a instanceof Error)throw this.host.sdkStateController.setError(a),a;return null}finally{this.clearLoadingTimeout(),this.isDisconnected||this.host.sdkStateController.completeLoading()}}}initializePaymentMethodManager(t){let{type:e,managerType:r}=t;return async()=>{if(this.isDisconnected||!this.createPaymentMethodManager)return null;if(r==="KLARNA"){let o=await this.createPaymentMethodManager("KLARNA",{onPaymentMethodCategoriesChange:a=>{this.isDisconnected||this.host.sdkContextController.setKlarnaCategories({categories:a,isLoading:!1})}});return o?{type:e,manager:o}:null}try{if(r==="CARD"){let a=await this.createPaymentMethodManager(e,{onCardNetworksChange:n=>{this.isDisconnected||this.host.cardNetworkController.processCardNetworkChangeEvent(n)},onCardNetworksLoading:()=>{this.isDisconnected||this.host.cardNetworkController.setCardNetworksLoading()}});return a?{type:e,manager:a}:null}let o=await this.createPaymentMethodManager(e);return o?{type:e,manager:o}:null}catch(o){return E.error(`Failed to initialize manager for ${e}:`,o),null}}}};var Sr=class{constructor(t){this.host=t,t.addController(this)}_error(t){let{error:e}=t.detail;this.host.sdkStateController.setFailure("UNKNOWN_ERROR",e.message)}_mandateConfirmed(){this.host.sdkStateController.completeProcessing()}_mandateDeclined(){this.host.sdkStateController.setFailure("UNKNOWN_ERROR","Mandate declined")}hostConnected(){this.host.addEventListener("primer-ach-error",this._error.bind(this)),this.host.addEventListener("primer-ach-mandate-confirmed",this._mandateConfirmed.bind(this)),this.host.addEventListener("primer-ach-mandate-declined",this._mandateDeclined.bind(this))}hostDisconnected(){this.host.removeEventListener("primer-ach-error",this._error.bind(this)),this.host.removeEventListener("primer-ach-mandate-confirmed",this._mandateConfirmed.bind(this)),this.host.removeEventListener("primer-ach-mandate-declined",this._mandateDeclined.bind(this))}};var As=Ai({"../../localization/lit-localize/locales/ar.ts":()=>import("./chunks/ar.KRXB3WQO.js"),"../../localization/lit-localize/locales/bg.ts":()=>import("./chunks/bg.6SKJRXIR.js"),"../../localization/lit-localize/locales/ca.ts":()=>import("./chunks/ca.SANDLFEK.js"),"../../localization/lit-localize/locales/cs.ts":()=>import("./chunks/cs.FC4I5M3C.js"),"../../localization/lit-localize/locales/da.ts":()=>import("./chunks/da.YI32NZ7B.js"),"../../localization/lit-localize/locales/de.ts":()=>import("./chunks/de.7M7UFQB7.js"),"../../localization/lit-localize/locales/el.ts":()=>import("./chunks/el.XSGTYDZR.js"),"../../localization/lit-localize/locales/en-GB.ts":()=>import("./chunks/en-GB.VO4GDE3X.js"),"../../localization/lit-localize/locales/en.ts":()=>import("./chunks/en.MNFLVOE3.js"),"../../localization/lit-localize/locales/es-AR.ts":()=>import("./chunks/es-AR.TBWVUZEF.js"),"../../localization/lit-localize/locales/es-MX.ts":()=>import("./chunks/es-MX.6EMWUABR.js"),"../../localization/lit-localize/locales/es.ts":()=>import("./chunks/es.XZLDFHYI.js"),"../../localization/lit-localize/locales/et-EE.ts":()=>import("./chunks/et-EE.JBSFMKZ2.js"),"../../localization/lit-localize/locales/fi-FI.ts":()=>import("./chunks/fi-FI.I75VK2ID.js"),"../../localization/lit-localize/locales/fr.ts":()=>import("./chunks/fr.JBNP6RXT.js"),"../../localization/lit-localize/locales/he.ts":()=>import("./chunks/he.PW253QAL.js"),"../../localization/lit-localize/locales/hr.ts":()=>import("./chunks/hr.LM4RITYJ.js"),"../../localization/lit-localize/locales/hu.ts":()=>import("./chunks/hu.JGCKQA6J.js"),"../../localization/lit-localize/locales/id.ts":()=>import("./chunks/id.VBXULDDY.js"),"../../localization/lit-localize/locales/it.ts":()=>import("./chunks/it.7Q6BFLDK.js"),"../../localization/lit-localize/locales/ja.ts":()=>import("./chunks/ja.QOC76SSC.js"),"../../localization/lit-localize/locales/ko.ts":()=>import("./chunks/ko.BANZIFNH.js"),"../../localization/lit-localize/locales/lt-LT.ts":()=>import("./chunks/lt-LT.Q2SRJOKH.js"),"../../localization/lit-localize/locales/lt.ts":()=>import("./chunks/lt.XMNFEN5T.js"),"../../localization/lit-localize/locales/lv-LV.ts":()=>import("./chunks/lv-LV.3AJDTMU5.js"),"../../localization/lit-localize/locales/lv.ts":()=>import("./chunks/lv.TFPDXNEV.js"),"../../localization/lit-localize/locales/ms.ts":()=>import("./chunks/ms.FPTX4NM4.js"),"../../localization/lit-localize/locales/nb.ts":()=>import("./chunks/nb.CAFSKRQ2.js"),"../../localization/lit-localize/locales/nl.ts":()=>import("./chunks/nl.7BPSDYTC.js"),"../../localization/lit-localize/locales/nl_NL.ts":()=>import("./chunks/nl_NL.6ZVCFPVW.js"),"../../localization/lit-localize/locales/pl.ts":()=>import("./chunks/pl.RF34QM23.js"),"../../localization/lit-localize/locales/pt-BR.ts":()=>import("./chunks/pt-BR.AKDHLRUA.js"),"../../localization/lit-localize/locales/pt.ts":()=>import("./chunks/pt.VBALOWHZ.js"),"../../localization/lit-localize/locales/ro.ts":()=>import("./chunks/ro.WN7VCF27.js"),"../../localization/lit-localize/locales/ru.ts":()=>import("./chunks/ru.ICXGVGRR.js"),"../../localization/lit-localize/locales/sk.ts":()=>import("./chunks/sk.SIP5JIOX.js"),"../../localization/lit-localize/locales/sl.ts":()=>import("./chunks/sl.R77UEKCA.js"),"../../localization/lit-localize/locales/sr-RS.ts":()=>import("./chunks/sr-RS.6M2YSTDX.js"),"../../localization/lit-localize/locales/sv.ts":()=>import("./chunks/sv.33ZY4CDS.js"),"../../localization/lit-localize/locales/th.ts":()=>import("./chunks/th.M27YUIZC.js"),"../../localization/lit-localize/locales/tr.ts":()=>import("./chunks/tr.Q2SIY6NA.js"),"../../localization/lit-localize/locales/uk-UA.ts":()=>import("./chunks/uk-UA.EJZOGSJR.js"),"../../localization/lit-localize/locales/vi.ts":()=>import("./chunks/vi.3RROGLXM.js"),"../../localization/lit-localize/locales/zf.ts":()=>import("./chunks/zf.GGWFQ3Y7.js"),"../../localization/lit-localize/locales/zh-CN.ts":()=>import("./chunks/zh-CN.MQHNRMN4.js"),"../../localization/lit-localize/locales/zh-HK.ts":()=>import("./chunks/zh-HK.WNR7XUSX.js"),"../../localization/lit-localize/locales/zh-TW.ts":()=>import("./chunks/zh-TW.GNCY2PNY.js")});Kr(i=>As(`../../localization/lit-localize/locales/${i}.ts`));var _s={LOADER_DISABLED:"loader-disabled",CUSTOM_STYLES:"custom-styles",CLIENT_TOKEN:"client-token",JS_INIT:"js-initialized"},q=class extends v{constructor(){super();this.customStyles="";this.clientToken="";this.options={};this.disableLoader=!1;this._jsInitialized=!1;this.previousLoadingState=!0;this.hasAssignedContent=!1;this._loadingTimeoutId=null;this.locale="en-GB";this.onSlotChange=e=>{let o=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=o.length>0,this.requestUpdate()};this.sdkContextController=new jt(this),this.sdkStateController=new zt(this),this.primerEventsController=new tt(this),this.styleProcessingController=new Kt(this),this.vaultManagerController=new vt(this),this.cardNetworkController=new $t(this),this.achPaymentEventsController=new Sr(this),new xr(this)}set jsInitialized(e){this.requestUpdate(),this._jsInitialized=e}get jsInitialized(){return this._jsInitialized}attributeChangedCallback(e,r,o){e===_s.CUSTOM_STYLES?this.styleProcessingController.processCustomStyles(o):super.attributeChangedCallback(e,r,o)}disconnectedCallback(){this._loadingTimeoutId&&(window.clearTimeout(this._loadingTimeoutId),this._loadingTimeoutId=null),this.sdkStateController?.currentState.isLoading&&this.sdkStateController.forceCompleteLoading(),super.disconnectedCallback()}willUpdate(e){e.has("options")&&(this.options?.locale&&(qr(this.options?.locale)?this.locale=Wr(this.options?.locale):E.warn("\u{1F30E}\u2757 Unsupported locale provided:",this.options?.locale,"- Falling back to default locale `en-GB`")),Gr(this.locale||"en-GB"))}updated(){let e=getComputedStyle(this);this.sdkContextController.setComputedStyles(e),this.checkLoadingStateChange()}checkLoadingStateChange(){let e=this.sdkStateController?.currentState.isLoading||!1;this.previousLoadingState&&!e&&(this.jsInitialized=!0),this.previousLoadingState=e,e&&!this._loadingTimeoutId?this._loadingTimeoutId=window.setTimeout(()=>{this.sdkStateController?.currentState.isLoading&&(E.warn("Loading timeout in component, forcing completion"),this.sdkStateController.forceCompleteLoading(),this.jsInitialized=!0),this._loadingTimeoutId=null},1e4):!e&&this._loadingTimeoutId&&(window.clearTimeout(this._loadingTimeoutId),this._loadingTimeoutId=null)}render(){let e=this.sdkStateController.currentState,r=e.isLoading,o=e.error,a=!r&&!o;return u` ${L(r,()=>h)} ${L(o,()=>u`<primer-checkout-error></primer-checkout-error>`)} ${L(a,()=>u`<slot name="main" @slotchange=${this.onSlotChange}></slot>${L(this.hasAssignedContent,()=>h,()=>u`<primer-main></primer-main>`)} `,()=>h)} `}addEventListener(e,r,o){super.addEventListener(e,r,o)}removeEventListener(e,r,o){super.removeEventListener(e,r,o)}};q.styles=[M,so],l([p({type:String,attribute:"custom-styles"})],q.prototype,"customStyles",2),l([p({type:String,attribute:"client-token"})],q.prototype,"clientToken",2),l([p({type:Object})],q.prototype,"options",2),l([p({type:Boolean,attribute:"loader-disabled"})],q.prototype,"disableLoader",2),l([p({type:Boolean,reflect:!0,attribute:"js-initialized"})],q.prototype,"_jsInitialized",2),l([ke("slot")],q.prototype,"defaultSlot",2),l([S()],q.prototype,"previousLoadingState",2),q=l([R(),b("primer-checkout")],q);var Ps=xs({tagName:"primer-checkout",elementClass:q,react:Ss});import{createComponent as ws}from"@lit/react";import Ts from"react";var Ko=g` :host { display: flex; flex-direction: column; align-items: center; gap: var(--primer-space-xsmall); } p { margin: 0; color: var(--primer-color-text-primary); text-align: center; font-size: var(--primer-typography-body-large-size); font-family: var(--primer-typography-body-large-font); font-weight: var(--primer-typography-body-large-weight); line-height: var(--primer-typography-body-large-line-height); letter-spacing: var(--primer-typography-body-large-letter-spacing); } p.secondary { color: var(--primer-color-text-secondary); text-align: center; font-family: var(--primer-typography-body-medium-font, Inter); font-size: var(--primer-typography-body-medium-size); font-weight: var(--primer-typography-body-medium-weight); line-height: var(--primer-typography-body-medium-line-height); letter-spacing: var(--primer-typography-body-medium-letter-spacing); } `;var be=class extends v{constructor(){super(...arguments);this.type="complete"}render(){return this.type==="complete"?u`<primer-icon size="lg" name="successful-check" color="var(--primer-color-icon-positive)" ></primer-icon><p>Checkout complete!</p><p class="secondary"> You'll be redirected to the order confirmation page soon. </p>`:u`<primer-icon size="lg" name="failure-icon" color="var(--primer-color-icon-negative)" ></primer-icon><p>Payment failed</p>${this.description?u`<p class="secondary">${this.description}</p>`:u`<p class="secondary">Something went wrong.</p>`} `}};be.styles=[Ko],l([p({type:String,reflect:!0})],be.prototype,"type",2),l([p({type:String,reflect:!0})],be.prototype,"description",2),be=l([b("primer-checkout-state")],be);var Ms=ws({tagName:"primer-checkout-state",elementClass:be,react:Ts});import{createComponent as ks}from"@lit/react";import Ns from"react";var Go=g` :host { display: block; } .collapsable { width: 100%; } /* Make the button display with full width */ primer-button::part(button) { width: 100%; } .collapsable-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--primer-animation-duration) var(--primer-animation-easing); overflow: hidden; border-top: none; margin-top: -1px; } .collapsable-wrapper.expanded { grid-template-rows: 1fr; } .collapsable-content { min-height: 0; overflow: hidden; padding: var(--primer-space-medium, 12px) 0; } .icon-container { display: flex; align-items: center; justify-content: center; transition: transform var(--primer-animation-duration) var(--primer-animation-easing); font-size: 0.75em; } .icon-container.expanded { transform: rotate(180deg); } /* Disable animation for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .collapsable-wrapper, .icon-container { transition: none; } } `;var W=class extends v{constructor(){super(...arguments);this.header="";this.expanded=!1;this.expandText="Expand";this.collapseText="Collapse";this.ariaLabel="";this.buttonVariant="primary";this.isExpanded=!1;this.toggleExpanded=()=>{this.isExpanded=!this.isExpanded,this.dispatchExpandedChangedEvent(this.isExpanded)}}connectedCallback(){super.connectedCallback(),this.isExpanded=this.expanded}dispatchExpandedChangedEvent(e){this.dispatchEvent(new CustomEvent("expanded-changed",{bubbles:!0,composed:!0,detail:{expanded:e}}))}expand(){this.isExpanded||(this.isExpanded=!0,this.dispatchExpandedChangedEvent(!0))}collapse(){this.isExpanded&&(this.isExpanded=!1,this.dispatchExpandedChangedEvent(!1))}render(){let e=this.isExpanded?this.collapseText:this.expandText,r=this.ariaLabel||this.header||e,o=this.header||e;return u`<div class="collapsable"><primer-button variant=${this.buttonVariant} buttonType="button" @click=${this.toggleExpanded} aria-expanded=${this.isExpanded} aria-controls="collapsable-content" aria-label=${r} ><span>${o}</span></primer-button><div class="collapsable-wrapper ${this.isExpanded?"expanded":""}" id="collapsable-content" role="region" aria-labelledby="collapsable-header" ><div class="collapsable-content"><slot></slot></div></div></div>`}};W.styles=[Go],l([p({type:String})],W.prototype,"header",2),l([p({type:Boolean})],W.prototype,"expanded",2),l([p({type:String})],W.prototype,"expandText",2),l([p({type:String})],W.prototype,"collapseText",2),l([p({type:String})],W.prototype,"ariaLabel",2),l([p({type:String})],W.prototype,"buttonVariant",2),l([S()],W.prototype,"isExpanded",2),W=l([b("primer-collapsable")],W);var Is=ks({tagName:"primer-collapsable",elementClass:W,react:Ns});import{createComponent as Ls}from"@lit/react";import Os from"react";var qo=g` :host { display: contents; } .backdrop { position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; } .dialog { background-color: white; padding: var(--primer-space-medium); border-radius: var(--primer-radius-medium); max-width: 600px; } .header { display: flex; justify-content: flex-end; } `;var Ne={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},Ce=i=>(...t)=>({_$litDirective$:i,values:t}),pt=class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,r){this._$Ct=t,this._$AM=e,this._$Ci=r}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};var F=Ce(class extends pt{constructor(i){if(super(i),i.type!==Ne.ATTRIBUTE||i.name!=="class"||i.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(i){return" "+Object.keys(i).filter(t=>i[t]).join(" ")+" "}update(i,[t]){if(this.st===void 0){this.st=new Set,i.strings!==void 0&&(this.nt=new Set(i.strings.join(" ").split(/\s/).filter(r=>r!=="")));for(let r in t)t[r]&&!this.nt?.has(r)&&this.st.add(r);return this.render(t)}let e=i.element.classList;for(let r of this.st)r in t||(e.remove(r),this.st.delete(r));for(let r in t){let o=!!t[r];o===this.st.has(r)||this.nt?.has(r)||(o?(e.add(r),this.st.add(r)):(e.remove(r),this.st.delete(r)))}return ge}});var qe=class extends v{constructor(){super(...arguments);this._handleCloseClick=()=>{this.dispatchEvent(new CustomEvent("primer-dialog-close",{bubbles:!0,composed:!0}))}}render(){return u`<div class=${F({backdrop:!0})} @click=${e=>{e.preventDefault()}} ><div class="dialog"><div class="header"><primer-button variant="tertiary" @click=${this._handleCloseClick}><primer-icon name="close"></primer-icon></primer-button></div><div class="content"><slot></slot></div></div></div>`}};qe.styles=[qo],qe=l([b("primer-dialog")],qe);var Rs=Ls({tagName:"primer-dialog",elementClass:qe,react:Os});import{createComponent as Ds}from"@lit/react";import $s from"react";var Wo=g` :host { display: block; width: 100%; box-sizing: border-box; } .error-message { display: flex; align-items: flex-start; padding: var(--primer-space-medium); background-color: var(--primer-color-red-100); border-radius: var(--primer-radius-medium); border: 1px solid var(--primer-color-border-outlined-error); margin-top: var(--primer-space-small); box-sizing: border-box; width: 100%; /* Add animation properties */ opacity: 1; transform: translateY(0); transition: opacity var(--primer-animation-duration) var(--primer-animation-easing), transform var(--primer-animation-duration) var(--primer-animation-easing); } .error-message.hidden { opacity: 0; transform: translateY(-var(--primer-space-medium)); pointer-events: none; } .error-icon { flex-shrink: 0; margin-right: var(--primer-space-medium); color: var(--primer-color-icon-negative); } .error-content { flex: 1; font-family: var(--primer-typography-body-medium-font); font-size: var(--primer-typography-body-medium-size); font-weight: var(--primer-typography-body-medium-weight); line-height: var(--primer-typography-body-medium-line-height); letter-spacing: var(--primer-typography-body-medium-letter-spacing); color: var(--primer-color-text-negative); } /* Respect user's preference for reduced motion */ @media (prefers-reduced-motion: reduce) { .error-message { transition: opacity var(--primer-animation-duration) var(--primer-animation-easing); transform: none; } .error-message.hidden { transform: none; } } `;var le=class extends v{constructor(){super();this.message="";this.visible=!1;this._role="alert";this.showMessage=!1;this.role="alert"}get role(){return this._role}set role(e){this._role=e,this.setAttribute("role",e)}updated(e){e.has("visible")&&this.handleVisibilityChange()}handleVisibilityChange(){this.visible?(this.showMessage=!0,this.setAttribute("aria-hidden","false")):setTimeout(()=>{this.showMessage=!1,this.setAttribute("aria-hidden","true")},200)}render(){if(!this.showMessage&&!this.visible)return h;let e={"error-message":!0,hidden:!this.visible};return u`<div part="error-message" class=${F(e)} aria-live="assertive" aria-atomic="true" ><div part="error-icon" class="error-icon"><primer-icon name="failure-icon" size="sm" color="var(--primer-color-icon-negative)" ></primer-icon></div><div part="error-content" class="error-content">${this.message}</div></div>`}};le.styles=[Wo],l([p({type:String})],le.prototype,"message",2),l([p({type:Boolean,reflect:!0})],le.prototype,"visible",2),l([S()],le.prototype,"showMessage",2),le=l([b("primer-error-message")],le);var Ys=Ds({tagName:"primer-error-message",elementClass:le,react:$s});import{createComponent as Vs}from"@lit/react";import Us from"react";var Jo={trash:ne`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.8333 2.99992H11.5V2.49992C11.5 2.05789 11.3244 1.63397 11.0118 1.32141C10.6993 1.00885 10.2754 0.833252 9.83333 0.833252H6.16667C5.72464 0.833252 5.30072 1.00885 4.98816 1.32141C4.67559 1.63397 4.5 2.05789 4.5 2.49992V2.99992H2.16667C1.98986 2.99992 1.82029 3.07015 1.69526 3.19518C1.57024 3.32021 1.5 3.48978 1.5 3.66659C1.5 3.8434 1.57024 4.01297 1.69526 4.138C1.82029 4.26302 1.98986 4.33326 2.16667 4.33326H2.83333V12.4999C2.83333 12.942 3.00893 13.3659 3.32149 13.6784C3.63405 13.991 4.05797 14.1666 4.5 14.1666H11.5C11.942 14.1666 12.3659 13.991 12.6785 13.6784C12.9911 13.3659 13.1667 12.942 13.1667 12.4999V4.33326H13.8333C14.0101 4.33326 14.1797 4.26302 14.3047 4.138C14.4298 4.01297 14.5 3.8434 14.5 3.66659C14.5 3.48978 14.4298 3.32021 14.3047 3.19518C14.1797 3.07015 14.0101 2.99992 13.8333 2.99992ZM5.83333 2.49992C5.83333 2.32311 5.90357 2.15354 6.0286 2.02851C6.15362 1.90349 6.32319 1.83325 6.5 1.83325H9.5C9.67681 1.83325 9.84638 1.90349 9.9714 2.02851C10.0964 2.15354 10.1667 2.32311 10.1667 2.49992V2.99992H5.83333V2.49992ZM11.8333 12.4999C11.8333 12.6767 11.7631 12.8463 11.6381 12.9713C11.513 13.0964 11.3435 13.1666 11.1667 13.1666H4.83333C4.65652 13.1666 4.48695 13.0964 4.36193 12.9713C4.2369 12.8463 4.16667 12.6767 4.16667 12.4999V4.33326H11.8333V12.4999Z" fill="currentColor"/><path d="M6.5 10.9999C6.67681 10.9999 6.84638 10.9297 6.9714 10.8047C7.09643 10.6796 7.16667 10.5101 7.16667 10.3333V7.33325C7.16667 7.15644 7.09643 6.98687 6.9714 6.86184C6.84638 6.73682 6.67681 6.66658 6.5 6.66658C6.32319 6.66658 6.15362 6.73682 6.0286 6.86184C5.90357 6.98687 5.83333 7.15644 5.83333 7.33325V10.3333C5.83333 10.5101 5.90357 10.6796 6.0286 10.8047C6.15362 10.9297 6.32319 10.9999 6.5 10.9999Z" fill="currentColor"/><path d="M9.5 10.9999C9.67681 10.9999 9.84638 10.9297 9.9714 10.8047C10.0964 10.6796 10.1667 10.5101 10.1667 10.3333V7.33325C10.1667 7.15644 10.0964 6.98687 9.9714 6.86184C9.84638 6.73682 9.67681 6.66658 9.5 6.66658C9.32319 6.66658 9.15362 6.73682 9.0286 6.86184C8.90357 6.98687 8.83333 7.15644 8.83333 7.33325V10.3333C8.83333 10.5101 8.90357 10.6796 9.0286 10.8047C9.15362 10.9297 9.32319 10.9999 9.5 10.9999Z" fill="currentColor"/></svg>`,"successful-check":ne`<svg viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg" ><g id="icon/check-circle-large"><path id="vector" fill-rule="evenodd" clip-rule="evenodd" d="M20.1762 29.5746L24.8429 34.2413C25.295 34.7007 26.0387 34.7007 26.4908 34.2413L35.8241 24.9079C36.2835 24.4559 36.2835 23.7121 35.8241 23.26C35.372 22.8007 34.6283 22.8007 34.1762 23.26L25.6668 31.7694L21.8241 27.9267C21.372 27.4673 20.6283 27.4673 20.1762 27.9267C19.7168 28.3788 19.7168 29.1225 20.1762 29.5746ZM28.0002 47.4173C38.3106 47.4173 46.6668 39.0611 46.6668 28.7507C46.6668 18.4402 38.3106 10.084 28.0002 10.084C17.6897 10.084 9.3335 18.4402 9.3335 28.7507C9.3335 39.0611 17.6897 47.4173 28.0002 47.4173Z" /></g></svg>`,"failure-icon":ne`<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" ><path fill-rule="evenodd" clip-rule="evenodd" d="M20.0008 23.3333C20.4614 23.3333 20.7873 22.9606 20.7873 22.5V15C20.7873 14.5394 20.4146 14.1666 20.0008 14.1666C19.587 14.1666 19.1675 14.5416 19.1675 15V22.5C19.1675 22.9583 19.5425 23.3333 20.0008 23.3333ZM32.9331 27.3594L22.5269 9.75935C22.0008 8.86821 21.0529 8.33488 20.0008 8.33331C18.9487 8.33331 18.006 8.8656 17.4748 9.75831L7.06331 27.3625C6.53987 28.2463 6.53206 29.3073 7.04134 30.201C7.568 31.1198 8.51904 31.6666 9.58935 31.6666H30.4175C31.4857 31.6666 32.4357 31.1182 32.9597 30.1995C33.4696 29.3073 33.4591 28.2448 32.9331 27.3594ZM18.7977 26.6666C18.7977 25.976 19.3107 25.4166 20.0008 25.4166C20.6935 25.4166 21.2508 25.9739 21.2039 26.6666C21.2039 27.3568 20.6909 27.9166 20.0008 27.9166C19.3576 27.9166 18.7977 27.3568 18.7977 26.6666Z" /></svg>`,"payment-card":ne`<svg width="28" height="21" viewBox="0 0 28 21" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="0.748047" width="28" height="20" rx="2" fill="#E0E0E0"/><rect y="6.74805" width="28" height="4" fill="#212121"/><rect x="19" y="13.748" width="6" height="4" rx="0.933333" fill="white"/></svg>`,"chevron-down":ne`<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.41978 4.90118C4.32079 5.02361 4.16188 5.08353 4.00037 5.08353C3.83887 5.08353 3.67996 5.02361 3.55753 4.90118L0.63995 1.9836C0.395733 1.73939 0.395733 1.34382 0.63995 1.09947C0.884167 0.855124 1.27973 0.855254 1.52408 1.09947L4.00037 3.57524L6.47589 1.09973C6.72011 0.855515 7.11567 0.855515 7.36002 1.09973C7.60437 1.34395 7.60424 1.73952 7.36002 1.98386L4.41978 4.90118Z" fill="#212121"/></svg>`,checkmark:ne`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.6326 6.12193C15.8983 6.3668 15.8983 6.76276 15.6326 6.98418L8.75546 13.8613C8.53404 14.127 8.13808 14.127 7.89321 13.8613L4.35119 10.3186C4.10706 10.0971 4.10706 9.70118 4.35119 9.45631C4.59531 9.21404 4.99126 9.21404 5.23535 9.45631L8.33606 12.5588L14.7704 6.12193C15.0152 5.87863 15.4112 5.87863 15.6326 6.12193Z" /></svg>`,close:ne`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M14.7551 13.734C15.0479 14.0269 15.0479 14.502 14.7551 14.7949C14.4622 15.0879 13.987 15.0878 13.6941 14.7949L10.0005 11.0738L6.28054 14.7937C5.98767 15.0866 5.51249 15.0866 5.21959 14.7937C4.92668 14.5008 4.92671 14.0256 5.21959 13.7327L8.94075 10.0141L5.21856 6.26604C4.92568 5.97316 4.92568 5.49798 5.21856 5.20508C5.51143 4.91217 5.98661 4.91221 6.27951 5.20508L10.0005 8.95438L13.7204 5.23446C14.0132 4.94159 14.4884 4.94159 14.7813 5.23446C15.0742 5.52734 15.0742 6.00252 14.7813 6.29542L11.0602 10.0141L14.7551 13.734Z" fill="#212121" /></svg>`,edit:ne`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.9355 3.19972C11.7814 2.35335 13.1541 2.35335 13.9999 3.19972L14.3642 3.56456C15.21 4.41103 15.21 5.78338 14.3642 6.62925L8.42804 12.5684C8.16615 12.8272 7.84406 13.0169 7.48886 13.1192L4.47866 13.9802C4.2258 14.0524 3.95489 13.9802 3.76825 13.7694C3.58463 13.6099 3.51239 13.339 3.58463 13.0861L4.44555 10.0759C4.5479 9.72072 4.73754 9.39863 4.99642 9.13674L10.9355 3.19972ZM12.9524 4.22139C12.6965 3.93933 12.239 3.93933 11.956 4.22139L11.08 5.09705L12.4677 6.48476L13.3437 5.5817C13.6267 5.32583 13.6267 4.86828 13.3437 4.58622L12.9524 4.22139ZM5.83626 10.4733L5.33055 12.2342L7.09151 11.7285C7.21192 11.6954 7.31728 11.6322 7.40458 11.5449L11.4473 7.50521L10.0596 6.11751L6.01988 10.1602C5.93259 10.2475 5.86937 10.3529 5.83626 10.4733Z" fill="#212121"/><path d="M3.5 16.7126C3.5 16.3138 3.82335 15.9904 4.22222 15.9904H15.7778C16.1767 15.9904 16.5 16.3138 16.5 16.7126C16.5 17.1115 16.1767 17.4349 15.7778 17.4349H4.22222C3.82335 17.4349 3.5 17.1115 3.5 16.7126Z" fill="#212121"/></svg>`,lock:ne`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.91621 7.08223V8.33262H12.0842V7.08223C12.0842 5.93082 11.1516 4.99824 10.0002 4.99824C8.84879 4.99824 7.91621 5.93082 7.91621 7.08223ZM6.24902 8.33262V7.08223C6.24902 5.01127 7.92924 3.33105 10.0002 3.33105C12.0712 3.33105 13.7514 5.01127 13.7514 7.08223V8.33262H14.1682C15.0877 8.33262 15.8354 9.08025 15.8354 9.9998V15.0014C15.8354 15.9209 15.0877 16.6686 14.1682 16.6686H5.83223C4.91267 16.6686 4.16504 15.9209 4.16504 15.0014V9.9998C4.16504 9.08025 4.91267 8.33262 5.83223 8.33262H6.24902Z" fill="#212121" fill-opacity="0.62"/></svg>`};var Zo=g` :host { display: inline-block; line-height: 0; /* so you don’t get extra space around the icon */ } /* Styling svgs rendered by passing *name* attribute - from our library file */ :host([size='sm']) svg { width: 20px; height: 20px; } :host([size='md']) svg { width: 42px; height: 42px; } :host([size='lg']) svg { width: 56px; height: 56px; } svg { /* --internal used for abstracting away the icon component */ fill: var(--internal-icon-color, currentColor); } /* For slotted icons */ :host([size='sm']) ::slotted(svg) { width: 20px; height: 20px; } :host([size='lg']) ::slotted(svg) { width: 56px; height: 56px; } ::slotted(svg) { /* --internal used for abstracting away the icon component */ fill: var(--internal-icon-color, currentColor); } `;var de=class extends v{constructor(){super(...arguments);this.color="var(--primer-color-icon-primary)";this.size="lg"}render(){let e=this.name?Jo[this.name]:null;return u`<div style="--internal-icon-color: ${this.color}">${e||u`<slot></slot>`}</div>`}};de.styles=[Zo],l([p({type:String,reflect:!0})],de.prototype,"color",2),l([p({type:String,reflect:!0})],de.prototype,"size",2),l([p({reflect:!0})],de.prototype,"name",2),de=l([b("primer-icon")],de);var Hs=Vs({tagName:"primer-icon",elementClass:de,react:Us});import{createComponent as Fs}from"@lit/react";import js from"react";var Xo=g` :host { display: contents; } input { width: 100%; padding: 0; border: none; height: var(--primer-typography-body-large-line-height); font-size: var(--primer-typography-body-large-size); font-family: var(--primer-typography-body-large-font); color: var(--primer-color-text-primary); background-color: transparent; outline: none; } input::placeholder { color: var(--primer-color-text-placeholder); font-size: var(--primer-typography-body-large-size); font-family: var(--primer-typography-body-large-font); } :host([disabled]) input { color: var(--primer-color-text-disabled); cursor: not-allowed; } :host([disabled]) input::placeholder { color: var(--primer-color-text-disabled); } `;var Bs=["text","password","email","number","tel","url","search","date","time","datetime-local","month","week","color"];function zs(i){return Bs.includes(i)}var D=class extends v{constructor(){super(...arguments);this.value="";this.placeholder="";this.disabled=!1;this.name="";this.type="text";this.required=!1;this.readonly=!1;this.pattern="";this.min="";this.max="";this.step="";this.autocomplete="";this._id="";this.hasFocus=!1;this.hasError=!1;this.handleInput=e=>{e.stopPropagation();let r=e.target;this.value=r.value;let o=new CustomEvent("input",{detail:this.value,bubbles:!0,composed:!0});this.dispatchEvent(o)};this.handleChange=e=>{e.stopPropagation();let r=e.target;this.value=r.value;let o=new CustomEvent("change",{detail:this.value,bubbles:!0,composed:!0});this.dispatchEvent(o)};this.handleFocus=()=>{this.hasFocus=!0,this.dispatchEvent(new FocusEvent("focus",{bubbles:!0,composed:!0}))};this.handleBlur=()=>{this.hasFocus=!1,this.dispatchEvent(new FocusEvent("blur",{bubbles:!0,composed:!0}))};this.handleInvalid=e=>{e.stopPropagation(),this.hasError=!0,this.dispatchEvent(new Event("invalid",{bubbles:!0,composed:!0}))}}get id(){return this._id}set id(e){this._id=e,this.setAttribute("id",e)}focus(e){this.inputElement?.focus(e)}blur(){this.inputElement?.blur()}select(){this.inputElement?.select()}setSelectionRange(e,r,o){this.inputElement?.setSelectionRange(e,r,o)}get validity(){return this.inputElement?.validity||{}}get validationMessage(){return this.inputElement?.validationMessage||""}checkValidity(){return this.inputElement?.checkValidity()||!1}reportValidity(){return this.inputElement?.reportValidity()||!1}render(){let e={input:!0,"input--focused":this.hasFocus,"input--disabled":this.disabled,"input--error":this.hasError,"input--readonly":this.readonly},r=Object.entries(e).filter(([,o])=>o).map(([o])=>o).join(" ");return u`<input part="input" class=${r} .value=${this.value} .type=${this.type} ?disabled=${this.disabled} ?required=${this.required} ?readonly=${this.readonly} placeholder=${this.placeholder} pattern=${this.pattern} minlength=${this.minlength??""} maxlength=${this.maxlength??""} min=${this.min} max=${this.max} step=${this.step} autocomplete=${this.autocomplete} name=${this.name} id=${this.id} @input=${this.handleInput} @change=${this.handleChange} @focus=${this.handleFocus} @blur=${this.handleBlur} @invalid=${this.handleInvalid} />`}addEventListener(e,r,o){super.addEventListener(e,r,o)}removeEventListener(e,r,o){super.removeEventListener(e,r,o)}};D.styles=[Xo],l([ke("input")],D.prototype,"inputElement",2),l([p({type:String,reflect:!0})],D.prototype,"value",2),l([p({type:String,reflect:!0})],D.prototype,"placeholder",2),l([p({type:Boolean,reflect:!0})],D.prototype,"disabled",2),l([p({type:String,reflect:!0})],D.prototype,"name",2),l([p({type:String,reflect:!0,converter:{fromAttribute:e=>!e||!zs(e)?(e&&e!=="text"&&E.warn(`Invalid input type: ${e}. Defaulting to 'text'.`),"text"):e}})],D.prototype,"type",2),l([p({type:Boolean,reflect:!0})],D.prototype,"required",2),l([p({type:Boolean,reflect:!0})],D.prototype,"readonly",2),l([p({type:String,reflect:!0})],D.prototype,"pattern",2),l([p({type:Number,reflect:!0})],D.prototype,"minlength",2),l([p({type:Number,reflect:!0})],D.prototype,"maxlength",2),l([p({type:String,reflect:!0})],D.prototype,"min",2),l([p({type:String,reflect:!0})],D.prototype,"max",2),l([p({type:String,reflect:!0})],D.prototype,"step",2),l([p({type:String,reflect:!0})],D.prototype,"autocomplete",2),l([S()],D.prototype,"hasFocus",2),l([S()],D.prototype,"hasError",2),D=l([b("primer-input")],D);var Ks=Fs({tagName:"primer-input",elementClass:D,react:js});import{createComponent as Gs}from"@lit/react";import qs from"react";var Qo=g` :host { display: contents; } :host(:not([active])) { display: none; } .error { color: var(--primer-color-text-negative); font-size: var(--primer-typography-body-small-size); line-height: var(--primer-typography-body-small-line-height); display: block; font-family: var(--primer-typography-body-small-font); } `;var Ee=class extends v{constructor(){super(...arguments);this.for="";this.active=!0}render(){return u`<span class="error" role="alert" aria-live="polite" id="${this.for||""}" ><slot></slot></span>`}};Ee.styles=[Qo],l([p({type:String,reflect:!0})],Ee.prototype,"for",2),l([p({type:Boolean,reflect:!0})],Ee.prototype,"active",2),Ee=l([b("primer-input-error")],Ee);var Ws=Gs({tagName:"primer-input-error",elementClass:Ee,react:qs});import{createComponent as Js}from"@lit/react";import Zs from"react";var ea=g` :host { display: inline-block; font-weight: var(--primer-typography-body-small-weight); font-size: var(--primer-typography-body-small-size); letter-spacing: var(--primer-typography-body-small-letter-spacing); line-height: var(--primer-typography-body-small-line-height); color: var(--primer-color-text-primary); font-family: var(--primer-typography-body-small-font); } :host([disabled]) { color: var(--primer-color-text-disabled); } `;var Ae=class extends v{constructor(){super(...arguments);this.for="";this.disabled=!1}render(){return u`<label for=${this.for}><slot></slot></label>`}};Ae.styles=[ea],l([p({type:String,reflect:!0})],Ae.prototype,"for",2),l([p({type:Boolean,reflect:!0})],Ae.prototype,"disabled",2),Ae=l([b("primer-input-label")],Ae);var Xs=Js({tagName:"primer-input-label",elementClass:Ae,react:Zs});import{createComponent as Qs}from"@lit/react";import el from"react";var ta=g` * { box-sizing: border-box; } :host { display: block; width: 100%; } .input-slot.focus-within, .input-slot:focus-within { outline: 2px solid var(--primer-color-border-outlined-focus); outline-offset: -2px; } :host([has-error]) .input-slot.focus-within, :host([has-error]) .input-slot:focus-within { outline: 2px solid var(--primer-color-border-outlined-error); background-color: var(--primer-color-background-outlined-error); } :host([has-error]) .input-slot { border-color: var(--primer-color-border-outlined-error); background-color: var(--primer-color-background-outlined-error); } .input-wrapper { display: flex; flex-direction: column; gap: var(--primer-space-xsmall); } .input-slot { padding: var(--primer-space-medium) var(--primer-space-medium); border: 1px solid var(--primer-color-border-outlined-default); border-radius: var(--primer-radius-small); background-color: var(--primer-color-background-outlined-default); height: calc( var(--primer-typography-body-large-line-height) + var(--primer-space-medium) + var(--primer-space-medium) + 2px ); display: flex; cursor: text; /* Indicate text input interactivity */ /* 2px is the border width */ } .input-slot ::slotted(*) { width: 100%; } .input-slot:hover { border-color: var(--primer-color-border-outlined-hover); background-color: var(--primer-color-background-outlined-hover); } .input-slot:active { border-color: var(--primer-color-border-outlined-active); background-color: var(--primer-color-background-outlined-active); } .input-slot:disabled { background-color: var(--primer-color-background-outlined-disabled); border-color: var(--primer-color-border-outlined-disabled); cursor: not-allowed; } `;var ce=class extends v{constructor(){super(...arguments);this.focusWithin=!1;this.hasError=!1;this.handleWrapperClick=e=>{if(e.target!==e.currentTarget)return;let r=this.findSlottedPrimerInput();r?r.focus():this.dispatchEvent(new CustomEvent("wrapper-click",{bubbles:!0,composed:!0}))}}findSlottedPrimerInput(){if(!this.inputSlot)return null;let e=this.inputSlot.assignedElements({flatten:!0}),r=e.find(o=>o.tagName.toLowerCase()==="primer-input");if(r)return r;for(let o of e){let a=o.querySelector("primer-input");if(a)return a}return null}render(){let e={"input-slot":!0,"focus-within":this.focusWithin};return u`<div class="input-wrapper"><slot name="label"></slot><div class="${F(e)}" @click="${this.handleWrapperClick}"><slot name="input"></slot></div><slot name="error"></slot></div>`}};ce.styles=[ta],l([p({type:Boolean})],ce.prototype,"focusWithin",2),l([p({type:Boolean,reflect:!0,attribute:"has-error"})],ce.prototype,"hasError",2),l([ke('slot[name="input"]')],ce.prototype,"inputSlot",2),ce=l([b("primer-input-wrapper")],ce);var tl=Qs({tagName:"primer-input-wrapper",elementClass:ce,react:el});import{createComponent as rl}from"@lit/react";import il from"react";var ra=g` :host { display: none; } `;var Ie=class extends v{constructor(){super(...arguments);this._id=`d${Math.random().toString(36).substring(7)}`;this._handleSlotChange=e=>{let o=e.target.assignedNodes();if(!o.length)return;let a=this.getContainer();o.forEach(n=>a.appendChild(n))}}get id(){return this._id}getContainer(){let e=document.querySelector(`#${this._id}`);return e||(e=document.createElement("div"),e.id=this._id,document.body.appendChild(e),this._setupEventListeners(e)),e}_setupEventListeners(e){["primer-ach-error","primer-ach-bank-details-collected","primer-ach-mandate-confirmed","primer-ach-mandate-declined"].forEach(r=>{e.addEventListener(r,o=>{o.stopPropagation(),this.dispatchEvent(new CustomEvent(r,{bubbles:!0,composed:!0,detail:o.detail}))})})}disconnectedCallback(){super.disconnectedCallback(),this.getContainer().remove()}render(){return u`<slot @slotchange=${this._handleSlotChange}></slot>`}};Ie.styles=[ra],l([S()],Ie.prototype,"_id",2),Ie=l([b("primer-portal")],Ie);var ol=rl({tagName:"primer-portal",elementClass:Ie,react:il});import{createComponent as al}from"@lit/react";import nl from"react";var ia=g` :host { display: inline-flex; align-items: center; justify-content: center; } .spinner-container { display: flex; align-items: center; justify-content: center; width: var(--spinner-size, var(--primer-size-medium)); height: var(--spinner-size, var(--primer-size-medium)); } .spinner-container:not(.compact) { margin: var(--primer-space-small) 0; } .spinner-container.compact { margin: 0; } .spinner { animation: spinner-rotate 1.2s linear infinite; width: 100%; height: 100%; color: var(--spinner-color, var(--primer-color-loader)); } .path { fill: currentColor; transform-origin: center; transition: fill var(--primer-animation-duration, 200ms) var(--primer-animation-easing, ease); } @keyframes spinner-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `;var fi={small:16,medium:24,large:32},pe=class extends v{constructor(){super(...arguments);this.color="var(--primer-color-loader)";this.size="medium";this.compact=!1}getSize(){if(this.size in fi)return fi[this.size];let e=parseInt(this.size,10);return isNaN(e)?fi.medium:e}render(){let e=this.getSize(),r=20,o=`0 0 ${r} ${r}`;return this.style.setProperty("--spinner-color",this.color),this.style.setProperty("--spinner-size",`${e}px`),u`<div class="spinner-container ${this.compact?"compact":""}"><svg class="spinner" width="${e}" height="${e}" viewBox="${o}" fill="none" xmlns="http://www.w3.org/2000/svg" role="status" aria-label="Loading" ><path d="M4.27827 10.002C4.27827 6.84166 6.84019 4.27973 10.0005 4.27973C10.7676 4.27973 11.3894 3.6579 11.3894 2.89084C11.3894 2.12378 10.7676 1.50195 10.0005 1.50195C5.30607 1.50195 1.50049 5.30753 1.50049 10.002C1.50049 14.6964 5.30607 18.502 10.0005 18.502C14.6949 18.502 18.5005 14.6964 18.5005 10.002C18.5005 9.23489 17.8787 8.61306 17.1116 8.61306C16.3445 8.61306 15.7227 9.23489 15.7227 10.002C15.7227 13.1622 13.1608 15.7242 10.0005 15.7242C6.84019 15.7242 4.27827 13.1622 4.27827 10.002Z" fill="currentColor" class="path" /></svg></div>`}};pe.styles=[ia],l([p({type:String})],pe.prototype,"color",2),l([p({type:String})],pe.prototype,"size",2),l([p({type:Boolean})],pe.prototype,"compact",2),pe=l([b("primer-spinner")],pe);var sl=al({tagName:"primer-spinner",elementClass:pe,react:nl});import{createComponent as ll}from"@lit/react";import dl from"react";var oa=g` :host { display: contents; } button { align-items: center; border-radius: var(--primer-radius-medium); border: none; cursor: pointer; display: flex; font-family: var(--primer-typography-title-large-font); font-size: var(--primer-typography-title-large-size); font-weight: var(--primer-typography-title-large-weight); gap: var(--primer-space-small); justify-content: center; letter-spacing: var(--primer-typography-title-large-letter-spacing); line-height: var(--primer-typography-title-large-line-height); outline: none; padding: var(--primer-space-medium) var(--primer-space-medium); position: relative; } .button-content { display: flex; height: 100%; width: 100%; align-items: center; gap: var(--primer-space-small); justify-content: center; transition: opacity var(--primer-animation-duration) var(--primer-animation-easing); } .button-content-base { width: 100%; height: 100%; gap: var(--primer-space-small); transition: opacity var(--primer-animation-duration) var(--primer-animation-easing); } /* Reduce opacity of text during loading for better focus on the spinner */ .button-content.loading { opacity: 0.65; } :host([selectable]) button { justify-content: space-between; } /* Primary variant */ :host([variant='primary']) button { background-color: var(--primer-color-brand); /* This is correct (color-background for color) because Button is kind of a special component */ color: var(--primer-color-background-outlined-default); } :host([variant='primary']:not([disabled]):not([loading])) button:hover { filter: brightness(105%); } :host([variant='primary']:not([disabled]):not([loading])) button:active { filter: brightness(98%); } :host([variant='primary']) button:focus-visible { outline: 2px solid var(--primer-color-brand); outline-offset: 2px; } /* Disabled state for primary button */ :host([variant='primary'][disabled]:not([loading])) button, :host([variant='primary']:not([loading])) button:disabled { color: var(--primer-color-text-disabled); background-color: var(--primer-color-background-outlined-disabled); cursor: not-allowed; } /* Loading state for primary button - OVERRIDES disabled styles with higher specificity */ :host([variant='primary'][loading]) button { background-color: var(--primer-color-brand); opacity: 0.8; color: var(--primer-color-background-outlined-default); cursor: wait; } /* Secondary variant */ :host([variant='secondary']) button { background-color: var(--primer-color-background-outlined-default); color: var(--primer-color-text-primary); border: 1px solid var(--primer-color-border-outlined-default); } :host([variant='secondary']:not([disabled]):not([loading])) button:hover { background-color: var(--primer-color-background-outlined-hover); } :host([variant='secondary']:not([disabled]):not([loading])) button:active { background-color: var(--primer-color-background-outlined-active); } :host([variant='secondary']) button:focus-visible { outline: 2px solid var(--primer-color-border-outlined-focus); outline-offset: 2px; } /* Disabled state for secondary button */ :host([variant='secondary'][disabled]:not([loading])) button, :host([variant='secondary']:not([loading])) button:disabled { background-color: var(--primer-color-background-outlined-disabled); border-color: var(--primer-color-border-outlined-disabled); color: var(--primer-color-text-disabled); cursor: not-allowed; } /* Loading state for secondary button - OVERRIDES disabled styles */ :host([variant='secondary'][loading]) button { background-color: var(--primer-color-gray-100); border-color: var(--primer-color-gray-300); color: var(--primer-color-gray-600); cursor: wait; } /* Tertiary variant */ :host([variant='tertiary']) button { background-color: var(--primer-color-background-transparent-default); border: 1px solid var(--primer-color-border-transparent-default); color: var(--primer-color-text-primary); border-radius: var(--primer-radius-small); padding: var(--primer-space-xxsmall) var(--primer-space-xxsmall); } :host([variant='tertiary']:not([disabled]):not([loading])) button:hover { border-radius: var(--primer-radius-small); background-color: var(--primer-color-background-transparent-hover); border: 1px solid var(--primer-color-border-transparent-hover); color: var(--primer-color-text-primary); } :host([variant='tertiary']:not([disabled]):not([loading])) button:active { background-color: var(--primer-color-background-transparent-active); border-color: var(--primer-color-border-transparent-active); border-radius: var(--primer-radius-small); color: var(--primer-color-text-primary); } :host([variant='tertiary']) button:focus-visible { border-radius: var(--primer-radius-small); background-color: var(--primer-color-background-transparent-focus); outline: 2px solid var(--primer-color-border-transparent-focus); outline-offset: 2px; } /* Disabled state for tertiary button */ :host([variant='tertiary'][disabled]:not([loading])) button, :host([variant='tertiary']:not([loading])) button:disabled { background-color: var(--primer-color-border-transparent-disabled); color: var(--primer-color-text-disabled); cursor: not-allowed; } /* Loading state for tertiary button - OVERRIDES disabled styles */ :host([variant='tertiary'][loading]) button { background-color: var(--primer-color-gray-100); color: var(--primer-color-gray-600); cursor: wait; } /* Checked state styling */ :host([selectionState='checked']) button { border: 2px solid var(--primer-color-brand); background-color: var(--primer-color-gray-100); } /* Loading state - center spinner with content */ :host([loading]) primer-spinner { margin-right: var(--primer-space-xsmall); } /* Special case for tertiary variant loading state spinner size */ :host([variant='tertiary'][loading]) primer-spinner { transform: scale(0.85); } `;var J=class extends v{constructor(){super(...arguments);this.variant="primary";this.disabled=!1;this.loading=!1;this.buttonType="button";this.selectionState="default";this.selectable=!1;this.flex=!0;this.handleClick=()=>{!this.selectable||this.disabled||this.loading||(this.selectionState=this.selectionState==="default"?"checked":"default",this.dispatchEvent(new CustomEvent("selection-change",{bubbles:!0,composed:!0,detail:{state:this.selectionState}})))}}renderCheckmark(){return!this.selectable||this.selectionState!=="checked"||this.loading?h:u`<primer-icon name="checkmark" size="sm" color="var(--primer-color-brand)" ></primer-icon>`}renderSpinner(){if(!this.loading)return h;let e;return this.variant==="primary"?e="var(--primer-color-background-outlined-default)":(this.variant==="secondary"||this.variant==="tertiary")&&(e="var(--primer-color-gray-900)"),u`<primer-spinner size="small" color="${e}" compact ></primer-spinner>`}render(){return u`<button type=${this.buttonType} ?disabled=${this.disabled||this.loading} @click=${this.handleClick} part="button" aria-checked=${this.selectionState==="checked"} aria-busy=${this.loading} >${this.renderSpinner()} ${this.flex?u`<span class="button-content ${this.loading?"loading":""}"><slot></slot></span>`:u`<span class="button-content-base ${this.loading?"loading":""}" ><slot></slot></span>`} ${this.renderCheckmark()}</button>`}};J.styles=[M,oa],l([p({type:String,reflect:!0})],J.prototype,"variant",2),l([p({type:Boolean,reflect:!0})],J.prototype,"disabled",2),l([p({type:Boolean,reflect:!0})],J.prototype,"loading",2),l([p({type:String,attribute:"type"})],J.prototype,"buttonType",2),l([p({type:String,reflect:!0})],J.prototype,"selectionState",2),l([p({type:Boolean,reflect:!0})],J.prototype,"selectable",2),l([p({type:Boolean,reflect:!0})],J.prototype,"flex",2),J=l([b("primer-button")],J);var cl=ll({tagName:"primer-button",elementClass:J,react:dl});import{createComponent as pl}from"@lit/react";import ul from"react";var aa=g` :host { display: flex; flex-direction: column; gap: var(--primer-space-medium); width: 100%; } h2 { margin: 0; padding: 0; border-radius: var(--primer-radius-medium); font-weight: var(--primer-typography-title-xlarge-weight); font-size: var(--primer-typography-title-xlarge-size); letter-spacing: var(--primer-typography-title-xlarge-letter-spacing); line-height: var(--primer-typography-title-xlarge-line-height); font-family: var(--primer-typography-title-xlarge-font); } p { margin: 0; padding: 0; border-radius: var(--primer-radius-medium); font-weight: var(--primer-typography-body-medium-weight); font-size: var(--primer-typography-body-medium-size); letter-spacing: var(--primer-typography-body-medium-letter-spacing); line-height: var(--primer-typography-body-medium-line-height); font-family: var(--primer-typography-body-medium-font); } form { display: flex; flex-direction: column; gap: var(--primer-space-medium); width: 100%; } .form-row { display: flex; gap: var(--primer-space-small); width: 100%; } .form-row primer-input-wrapper { flex: 1; } .error-message { color: var(--primer-color-text-negative); background-color: var(--primer-color-red-100); padding: var(--primer-space-small); border-radius: var(--primer-radius-small); font-weight: var(--primer-typography-body-medium-weight); font-size: var(--primer-typography-body-medium-size); letter-spacing: var(--primer-typography-body-medium-letter-spacing); line-height: var(--primer-typography-body-medium-line-height); font-family: var(--primer-typography-body-medium-font); } .loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--primer-space-medium); padding: var(--primer-space-large); } .button-group { display: flex; gap: var(--primer-space-small); margin-top: var(--primer-space-medium); } /* Apply responsive styles for small screens */ @media (max-width: 600px) { .form-row { flex-direction: column; gap: var(--primer-space-medium); } .button-group { flex-direction: column; } } `;function na(){return{firstName:{value:"",error:"",pristine:!0,touched:!1,dirty:!1,valid:!1},lastName:{value:"",error:"",pristine:!0,touched:!1,dirty:!1,valid:!1},emailAddress:{value:"",error:"",pristine:!0,touched:!1,dirty:!1,valid:!1}}}var Pr=class{constructor(t,e){this.formState=na();this.host=t,this.validate=e,t.addController(this)}get hasError(){return{firstName:this.formState.firstName.dirty&&this.formState.firstName.touched&&!!this.formState.firstName.error,lastName:this.formState.lastName.dirty&&this.formState.lastName.touched&&!!this.formState.lastName.error,emailAddress:this.formState.emailAddress.dirty&&this.formState.emailAddress.touched&&!!this.formState.emailAddress.error}}get formData(){return{firstName:this.formState.firstName.value,lastName:this.formState.lastName.value,emailAddress:this.formState.emailAddress.value}}async setFieldValue(t,e){let r=this.formState[t];r.value=e,r.dirty=!0,r.error="",r.valid=!0;let o=await this.validate(this.formData);this.setValidation(o)}setValidation(t,e=!1){e&&(this.formState.firstName.touched=!0,this.formState.lastName.touched=!0,this.formState.emailAddress.touched=!0,this.formState.firstName.dirty=!0,this.formState.lastName.dirty=!0,this.formState.emailAddress.dirty=!0),t.validationErrors.forEach(r=>{this.isValidFieldName(r.field)&&(this.formState[r.field].error=r.message,this.formState[r.field].valid=r.message==="")}),this.host.dispatchEvent(new CustomEvent("primer-ach-validation",{bubbles:!0,composed:!0,detail:{validation:t}})),this.host.requestUpdate()}setFieldTouched(t){this.formState[t].touched||(this.formState[t].touched=!0,this.host.requestUpdate())}resetForm(){this.formState=na(),this.host.requestUpdate()}isValidFieldName(t){return!!t&&["firstName","lastName","emailAddress"].includes(t)}hostConnected(){}hostDisconnected(){}};var X=class extends v{constructor(){super(...arguments);this.formController=new Pr(this,e=>this._paymentMethodManagerTask.value.setAndValidate(e));this.paymentManagers=new Map;this.sdkState=void 0;this.clientOptions=void 0;this.screen="form";this.isSubmitting=!1;this._paymentMethodManagerTask=new I(this,{task:([e])=>e!=="STRIPE_ACH"?T:this.paymentManagers.get(e)?.manager,args:()=>[this.paymentMethod?.type]})}_handleInput(e,r){let o=e.target;this.formController.setFieldValue(r,o.value)}_handleBlur(e){this.formController.setFieldTouched(e)}_handleError(e){this.dispatchEvent(new CustomEvent("primer-ach-error",{bubbles:!0,composed:!0,detail:{error:e instanceof Error?e:new Error(typeof e=="string"?e:"Unknown error occurred")}}))}async _handleSubmitButtonClick(e){if(!this.isSubmitting){this.isSubmitting=!0;try{let r=await e.start(this.formController.formData);if(!r||r.valid)return await this._handleCollectBankAccountDetails(e);r&&this.formController.setValidation(r,!0)}catch(r){this._handleError(r)}finally{this.isSubmitting=!1}}}async _handleCollectBankAccountDetails(e){try{await e.collectBankAccountDetails(),this.screen="mandate",this.dispatchEvent(new CustomEvent("primer-ach-bank-details-collected",{bubbles:!0,composed:!0}))}catch(r){this._handleError(r)}}async _handleConfirmMandate(){if(this._paymentMethodManagerTask.value){this.isSubmitting=!0;try{await this._paymentMethodManagerTask.value.confirmMandate(),this.dispatchEvent(new CustomEvent("primer-ach-mandate-confirmed",{bubbles:!0,composed:!0}))}catch(e){this._handleError(e)}finally{this.isSubmitting=!1}}}async _handleDeclineMandate(){if(this._paymentMethodManagerTask.value){this.isSubmitting=!0;try{await this._paymentMethodManagerTask.value.declineMandate(),this.dispatchEvent(new CustomEvent("primer-ach-mandate-declined",{bubbles:!0,composed:!0}))}catch(e){this._handleError(e)}finally{this.isSubmitting=!1}}}renderForm(e){return u`<h2>${x("payWithAch",{id:"payWithAch"})}</h2><p>${x("stripe_ach_user_details_collection_subtitle_label",{id:"stripe_ach_user_details_collection_subtitle_label"})}</p><form @submit=${r=>r.preventDefault()}><div class="form-row"><primer-input-wrapper .hasError=${this.formController.hasError.firstName} ><primer-input-label slot="label">${x("stripe_ach_user_details_collection_first_name_label",{id:"stripe_ach_user_details_collection_first_name_label"})}</primer-input-label><primer-input slot="input" .value=${this.formController.formState.firstName.value} @input=${r=>this._handleInput(r,"firstName")} @blur=${()=>this._handleBlur("firstName")} ?disabled=${this.isSubmitting} ></primer-input><primer-input-error slot="error">${this.formController.hasError.firstName?this.formController.formState.firstName.error:h}</primer-input-error></primer-input-wrapper><primer-input-wrapper .hasError=${this.formController.hasError.lastName} ><primer-input-label slot="label">${x("stripe_ach_user_details_collection_last_name_label",{id:"stripe_ach_user_details_collection_last_name_label"})}</primer-input-label><primer-input slot="input" .value=${this.formController.formState.lastName.value} @input=${r=>this._handleInput(r,"lastName")} @blur=${()=>this._handleBlur("lastName")} ?disabled=${this.isSubmitting} ></primer-input><primer-input-error slot="error">${this.formController.hasError.lastName?this.formController.formState.lastName.error:h}</primer-input-error></primer-input-wrapper></div><primer-input-wrapper .hasError=${this.formController.hasError.emailAddress} ><primer-input-label slot="label">${x("stripe_ach_user_details_collection_email_address_label",{id:"stripe_ach_user_details_collection_email_address_label"})}</primer-input-label><primer-input slot="input" type="email" .value=${this.formController.formState.emailAddress.value} @input=${r=>this._handleInput(r,"emailAddress")} @blur=${()=>this._handleBlur("emailAddress")} ?disabled=${this.isSubmitting} ></primer-input><primer-input-error slot="error">${this.formController.hasError.emailAddress?this.formController.formState.emailAddress.error:h}</primer-input-error></primer-input-wrapper><p>${x("stripe_ach_user_details_collection_data_usage_label",{id:"stripe_ach_user_details_collection_data_usage_label"})}</p><primer-button buttonType="submit" variant="primary" @click=${()=>this._handleSubmitButtonClick(e)} ?disabled=${this.isSubmitting} ?loading=${this.isSubmitting} >${x("stripe_ach_user_details_collection_continue_button",{id:"stripe_ach_user_details_collection_continue_button"})}</primer-button></form>`}renderMandate(){return u`<h2>${x("payWithAch",{id:"payWithAch"})}</h2><p>${this.clientOptions?.stripe?.mandateData.fullMandateText??x("stripe_ach_mandate_template_web",{id:"stripe_ach_mandate_template_web"}).replace(/\{merchantName\}/g,this.clientOptions?.stripe?.mandateData.merchantName??"Merchant")}</p><div class="button-group"><primer-button variant="primary" @click=${this._handleConfirmMandate.bind(this)} ?disabled=${this.isSubmitting} ?loading=${this.isSubmitting} >${x("stripe_ach_mandate_accept_button",{id:"stripe_ach_mandate_accept_button"})}</primer-button><primer-button variant="tertiary" @click=${this._handleDeclineMandate.bind(this)} ?disabled=${this.isSubmitting} >${x("stripe_ach_mandate_cancel_payment_button",{id:"stripe_ach_mandate_cancel_payment_button"})}</primer-button></div>`}render(){return this._paymentMethodManagerTask.render({complete:e=>e?this.screen==="form"?this.renderForm(e):this.renderMandate():h})}};X.styles=[M,aa],l([p({type:Object})],X.prototype,"paymentMethod",2),l([C({context:G,subscribe:!0}),p({attribute:!1})],X.prototype,"paymentManagers",2),l([C({context:V,subscribe:!0}),p({attribute:!1})],X.prototype,"sdkState",2),l([C({context:Pe,subscribe:!0}),p({attribute:!1})],X.prototype,"clientOptions",2),l([S()],X.prototype,"screen",2),l([S()],X.prototype,"isSubmitting",2),X=l([b("primer-ach-payment"),R()],X);var ml=pl({tagName:"primer-ach-payment",elementClass:X,react:ul});import{createComponent as hl}from"@lit/react";import fl from"react";var ut="card-form-context";var sa=g` :host { display: contents; } form { display: flex; flex-direction: column; gap: var(--primer-space-medium); width: 100%; } .card-form { display: flex; flex-direction: column; gap: var(--primer-space-medium); margin-bottom: var(--primer-space-medium); } .card-form-row { display: flex; gap: var(--primer-space-small); } `;var ee=class extends v{constructor(){super(...arguments);this.hideLabels=!1;this.disabled=!1;this.hasAssignedContent=!1;this.selectedCardNetwork=null;this.paymentManagers=new Map;this.cardFormProvider=new U(this,{context:ut,initialValue:null});this.eventsController=new tt(this);this.setupCardFormTask=new I(this,{task:([e])=>{if(!e?.manager)return T;let{manager:r}=e,o=r.createHostedInputs(),{cardNumberInput:a,expiryInput:n,cvvInput:s}=o;return this.cardFormProvider.setValue({cardHolderNameInput:o.cardHolderNameInput,cardNumberInput:a,expiryInput:n,cvvInput:s,setCardholderName:d=>r.setCardholderName(d),setCardNetwork:d=>{this.selectedCardNetwork=d},validate:()=>r.validate(),submit:d=>r.submit(d),hideLabels:this.hideLabels,disabled:this.disabled}),!0},args:()=>[this.paymentManagers.get("PAYMENT_CARD")]});this.handleSlotButtonClick=e=>{let o=e.target.closest("button, primer-button");if(!o)return;let a=o;this.isSubmitButton(a)&&(e.preventDefault(),this.submitCardPayment())};this.handleDirectSubmit=e=>{e.stopPropagation(),this.submitCardPayment()};this.onSlotChange=e=>{let o=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=o.length>0};this.handleFormSubmit=e=>{e.preventDefault(),e.stopPropagation(),this.submitCardPayment()}}updated(e){super.updated(e),(e.has("hideLabels")||e.has("disabled"))&&this.cardFormProvider.value&&this.cardFormProvider.setValue({...this.cardFormProvider.value,hideLabels:this.hideLabels,disabled:this.disabled})}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleSlotButtonClick),this.addEventListener("primer:card-submit",this.handleDirectSubmit)}disconnectedCallback(){this.removeEventListener("click",this.handleSlotButtonClick),this.removeEventListener("primer:card-submit",this.handleDirectSubmit),super.disconnectedCallback()}isSubmitButton(e){let r=e.tagName.toLowerCase(),o=r==="button",a=r==="primer-button";return o&&(e.getAttribute("type")==="submit"||e.hasAttribute("data-submit"))||a&&(e.getAttribute("type")==="submit"||e.hasAttribute("data-submit"))}async submitCardPayment(){let e=this.cardFormProvider.value;if(!e||this.disabled)return;let r=await e.validate?.();if(r?.valid){let o=await e.submit?.(this.selectedCardNetwork?{cardNetwork:this.selectedCardNetwork}:void 0);this.eventsController.dispatchFormSubmitSuccess(o)}else{let o=r?.validationErrors;this.cardFormProvider.setValue({...e,errors:o}),this.eventsController.dispatchFormSubmitErrors(o)}}render(){return this.setupCardFormTask.status===Te.ERROR||this.setupCardFormTask.status===Te.INITIAL?h:u`<form @submit=${this.handleFormSubmit}><slot name="card-form-content" @slotchange=${this.onSlotChange}></slot>${this.setupCardFormTask.render({complete:()=>L(this.hasAssignedContent,()=>h,()=>u`<div class="card-form"><primer-input-card-number></primer-input-card-number><div class="card-form-row"><primer-input-card-expiry></primer-input-card-expiry><primer-input-cvv></primer-input-cvv></div><primer-input-card-holder-name></primer-input-card-holder-name></div><primer-card-form-submit></primer-card-form-submit>`)})}</form>`}};ee.styles=[M,sa],l([p({type:Boolean,attribute:"hide-labels",reflect:!0})],ee.prototype,"hideLabels",2),l([p({type:Boolean,attribute:"disabled"})],ee.prototype,"disabled",2),l([S()],ee.prototype,"hasAssignedContent",2),l([S()],ee.prototype,"selectedCardNetwork",2),l([C({context:G,subscribe:!0}),p({type:Object})],ee.prototype,"paymentManagers",2),ee=l([b("primer-card-form"),R()],ee);var yl=hl({tagName:"primer-card-form",elementClass:ee,react:fl});import{createComponent as gl}from"@lit/react";import vl from"react";var la=g` :host { display: contents; } `;var Z=class extends v{constructor(){super(...arguments);this._userAssignedProps=new Set;this._internalButtonText="";this.headlessInstance=null;this.clientOptions=null;this.sdkState=null;this.cardFormContext=null;this.variant="primary";this.disabled=!1;this.handleClick=e=>{if(e.preventDefault(),this.disabled)return;let r=new CustomEvent("primer:card-submit",{bubbles:!0,composed:!0,detail:{source:"primer-card-form-submit"}});this.dispatchEvent(r)}}get buttonText(){return this._userAssignedProps.has("buttonText")?this._internalButtonText:x("pay",{id:"pay"})}set buttonText(e){let r=this.buttonText;e!==""?(this._userAssignedProps.add("buttonText"),this._internalButtonText=e):(this._userAssignedProps.delete("buttonText"),this._internalButtonText=""),this.requestUpdate("buttonText",r)}render(){let e=this.clientOptions?.submitButton?.amountVisible?this.headlessInstance?.getUIOrderAmount():null,r=e?` ${e}`:h,o=this.disabled||this.cardFormContext?.disabled||!1;return u`<primer-button type="submit" variant=${this.variant} ?disabled=${o} @click=${this.handleClick} .loading=${!!this.sdkState?.isProcessing} data-submit >${this.buttonText}${r}</primer-button>`}};Z.styles=[M,la],l([p({type:String})],Z.prototype,"buttonText",1),l([C({context:K,subscribe:!0}),p({type:Object})],Z.prototype,"headlessInstance",2),l([C({context:Pe,subscribe:!0}),p({type:Object})],Z.prototype,"clientOptions",2),l([C({context:V,subscribe:!0}),p()],Z.prototype,"sdkState",2),l([C({context:ut,subscribe:!0}),p()],Z.prototype,"cardFormContext",2),l([p({type:String})],Z.prototype,"variant",2),l([p({type:Boolean})],Z.prototype,"disabled",2),Z=l([b("primer-card-form-submit"),R()],Z);var bl=gl({tagName:"primer-card-form-submit",elementClass:Z,react:vl});import{createComponent as _l}from"@lit/react";import xl from"react";var{I:jg}=ao;var da=i=>i.strings===void 0;var Rt=(i,t)=>{let e=i._$AN;if(e===void 0)return!1;for(let r of e)r._$AO?.(t,!1),Rt(r,t);return!0},wr=i=>{let t,e;do{if((t=i._$AM)===void 0)break;e=t._$AN,e.delete(i),i=t}while(e?.size===0)},ca=i=>{for(let t;t=i._$AM;i=t){let e=t._$AN;if(e===void 0)t._$AN=e=new Set;else if(e.has(i))break;e.add(i),Al(t)}};function Cl(i){this._$AN!==void 0?(wr(this),this._$AM=i,ca(this)):this._$AM=i}function El(i,t=!1,e=0){let r=this._$AH,o=this._$AN;if(o!==void 0&&o.size!==0)if(t)if(Array.isArray(r))for(let a=e;a<r.length;a++)Rt(r[a],!1),wr(r[a]);else r!=null&&(Rt(r,!1),wr(r));else Rt(this,i)}var Al=i=>{i.type==Ne.CHILD&&(i._$AP??(i._$AP=El),i._$AQ??(i._$AQ=Cl))},Le=class extends pt{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,e,r){super._$AT(t,e,r),ca(this),this.isConnected=t._$AU}_$AO(t,e=!0){t!==this.isConnected&&(this.isConnected=t,t?this.reconnected?.():this.disconnected?.()),e&&(Rt(this,t),wr(this))}setValue(t){if(da(this._$Ct))this._$Ct._$AI(t,this);else{let e=[...this._$Ct._$AH];e[this._$Ci]=t,this._$Ct._$AI(e,this,0)}}disconnected(){}reconnected(){}};var vi=()=>new gi,gi=class{},yi=new WeakMap,Tr=Ce(class extends Le{render(i){return h}update(i,[t]){let e=t!==this.G;return e&&this.G!==void 0&&this.rt(void 0),(e||this.lt!==this.ct)&&(this.G=t,this.ht=i.options?.host,this.rt(this.ct=i.element)),h}rt(i){if(this.isConnected||(i=void 0),typeof this.G=="function"){let t=this.ht??globalThis,e=yi.get(t);e===void 0&&(e=new WeakMap,yi.set(t,e)),e.get(this.G)!==void 0&&this.G.call(this.ht,void 0),e.set(this.G,i),i!==void 0&&this.G.call(this.ht,i)}else this.G.value=i}get lt(){return typeof this.G=="function"?yi.get(this.ht??globalThis)?.get(this.G):this.G?.value}disconnected(){this.lt===this.ct&&this.rt(void 0)}reconnected(){this.rt(this.ct)}});var pa=g` :host { display: flex; align-items: center; position: relative; } .network-selector { display: flex; align-items: center; cursor: pointer; background: none; padding: unset; border: none; transition: opacity var(--primer-animation-duration) var(--primer-animation-easing); outline: none; gap: var(--primer-space-xsmall); } .network-selector:hover { opacity: 0.8; } .network-selector:focus-visible { outline: 2px solid var(--primer-color-focus); border-radius: var(--primer-radius-xsmall); } .network-icon { width: var(--primer-size-large); height: var( --primer-size-medium ); /* Added explicit height to maintain aspect ratio */ object-fit: contain; } .caret { margin-left: var(--primer-space-xsmall); transition: transform var(--primer-animation-duration) var(--primer-animation-easing); color: var(--primer-color-icon-primary); } .caret.open { transform: rotate(180deg); } .dropdown { position: absolute; top: 100%; right: 0; width: max-content; min-width: calc(var(--primer-size-xxxlarge) * 3); background: var(--primer-color-gray-000); border-radius: var(--primer-radius-small); box-shadow: 0 var(--primer-space-xxsmall) var(--primer-space-large) rgba(0, 0, 0, 0.15); z-index: 10; overflow: hidden; border: 1px solid var(--primer-color-border-outlined-default); } .dropdown:not(.open) { display: none; } .dropdown.open { display: block; max-height: calc(var(--primer-size-xxxlarge) * 4); overflow-y: auto; } .network-option { display: flex; align-items: center; padding: var(--primer-space-small) var(--primer-space-medium); cursor: pointer; transition: background-color var(--primer-animation-duration) var(--primer-animation-easing); position: relative; outline: none; background-color: transparent; } /* Only apply hover effect when not in keyboard navigation mode */ .network-option:hover { background-color: var(--primer-color-gray-100); } /* Apply focused style only when the focused class is present (keyboard navigation) */ .network-option.focused { background-color: var(--primer-color-gray-100); } .network-option:focus-visible { outline: 2px solid var(--primer-color-focus); outline-offset: -2px; } .network-option-icon { width: var(--primer-size-medium); height: var(--primer-size-small); margin-right: var(--primer-space-small); object-fit: contain; } .network-name { font-size: var(--primer-typography-body-medium-size); font-family: var(--primer-typography-body-medium-font); line-height: var(--primer-typography-body-medium-line-height); letter-spacing: var(--primer-typography-body-medium-letter-spacing); white-space: nowrap; color: var(--primer-color-text-primary); flex: 1; } .checkmark { margin-left: var(--primer-space-small); color: var(--primer-color-brand); width: var(--primer-size-small); height: var(--primer-size-small); } `;var Q=class extends v{constructor(){super(...arguments);this.cardNetworks=null;this.headlessUtils=null;this.selectedCardNetwork=null;this.isDropdownOpen=!1;this.focusedNetworkIndex=0;this.isKeyboardNavigation=!1;this.buttonRef=vi();this.dropdownRef=vi();this.networkOptionRefs=[];this.toggleDropdown=e=>{this.isKeyboardNavigation=!1,e.stopPropagation(),this.getSelectableNetworks().length>1&&(this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen&&(this.focusedNetworkIndex=this.getSelectedNetworkIndex()))};this.handleClickOutside=e=>{this.isDropdownOpen&&(this.contains(e.target)||(this.isDropdownOpen=!1,this.isKeyboardNavigation=!1))};this.handleMouseMove=()=>{this.isKeyboardNavigation&&(this.isKeyboardNavigation=!1)};this.handleKeyDown=e=>{if(!(!(this.getSelectableNetworks().length>1)||!(this.contains(e.target)||this===e.target||this.isDropdownOpen&&e.target===document.body)))switch(this.isKeyboardNavigation=!0,e.key){case"ArrowDown":e.preventDefault(),this.isDropdownOpen?(this.focusedNetworkIndex=(this.focusedNetworkIndex+1)%this.getSelectableNetworks().length,this.focusNetworkOption()):(this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case"ArrowUp":e.preventDefault(),this.isDropdownOpen?(this.focusedNetworkIndex=(this.focusedNetworkIndex-1+this.getSelectableNetworks().length)%this.getSelectableNetworks().length,this.focusNetworkOption()):(this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case"Enter":case" ":this.isDropdownOpen&&this.focusedNetworkIndex>=0?(e.preventDefault(),this.selectNetwork(e,this.getSelectableNetworks()[this.focusedNetworkIndex])):!this.isDropdownOpen&&this.buttonRef.value===document.activeElement&&(e.preventDefault(),this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case"Escape":this.isDropdownOpen&&(e.preventDefault(),this.isDropdownOpen=!1,this.buttonRef.value?.focus());break;case"Tab":this.isDropdownOpen&&(this.isDropdownOpen=!1);break}};this.handleDocumentKeyDown=e=>{this.isDropdownOpen&&this.handleKeyDown(e)}}getNetworkIconUrl(e){return this.headlessUtils?.getCardNetworkAsset(e.network)?.cardUrl}getSelectableNetworks(){return this.cardNetworks?.selectableCardNetworks||[]}getDetectedNetwork(){return this.selectedCardNetwork??(this.cardNetworks?.detectedCardNetwork||null)}getSelectedNetworkIndex(){let e=this.getDetectedNetwork();if(!e)return 0;let r=this.getSelectableNetworks().findIndex(o=>o.network===e.network);return r>=0?r:0}selectNetwork(e,r){e.stopPropagation(),this.selectedCardNetwork=r,this.isDropdownOpen=!1,this.buttonRef.value?.focus(),this.cardNetworks&&this.dispatchEvent(new CustomEvent("network-selected",{detail:{network:r.network},bubbles:!0,composed:!0}))}focusNetworkOption(){requestAnimationFrame(()=>{this.networkOptionRefs[this.focusedNetworkIndex]&&this.networkOptionRefs[this.focusedNetworkIndex].focus()})}setNetworkOptionRef(e,r){this.networkOptionRefs[r]=e}connectedCallback(){super.connectedCallback(),setTimeout(()=>{document.addEventListener("click",this.handleClickOutside),document.addEventListener("mousemove",this.handleMouseMove),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keydown",this.handleDocumentKeyDown)},0)}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousemove",this.handleMouseMove),this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}render(){if(this.cardNetworks?.isLoading)return u`<primer-spinner size="small" compact></primer-spinner>`;let e=this.getSelectableNetworks();if(!this.getDetectedNetwork()&&e.length===0)return u`<primer-icon name="payment-card" size="sm"></primer-icon>`;let r=this.getDetectedNetwork()||(e.length>0?e[0]:null);if(!r)return u`<primer-icon name="payment-card" size="sm"></primer-icon>`;let o=e.length>1;return u`<button ${Tr(this.buttonRef)} class="network-selector" @click=${this.toggleDropdown} @keydown=${a=>{(a.key===" "||a.key==="Enter")&&o&&(a.preventDefault(),this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen&&(this.focusedNetworkIndex=this.getSelectedNetworkIndex()))}} aria-label=${o?`Selected card network: ${r.displayName}. Click to change.`:`Card network: ${r.displayName}`} aria-expanded=${o?this.isDropdownOpen:h} aria-haspopup=${o?"true":h} aria-controls=${o?"network-dropdown":h} ><img class="network-icon" src=${this.getNetworkIconUrl(r)} alt=${r.displayName} />${L(o,()=>u`<primer-icon class="caret ${this.isDropdownOpen?"open":""}" size="sm" name="chevron-down" ></primer-icon>`,()=>h)}</button>${L(this.isDropdownOpen,()=>u`<div ${Tr(this.dropdownRef)} id="network-dropdown" class="dropdown open" role="listbox" aria-label="Select card network" >${e.map((a,n)=>u`<div ${Tr(s=>this.setNetworkOptionRef(s,n))} class="network-option ${this.isKeyboardNavigation&&n===this.focusedNetworkIndex?"focused":""}" @click=${s=>this.selectNetwork(s,a)} @keydown=${s=>{(s.key==="Enter"||s.key===" ")&&this.selectNetwork(s,a)}} role="option" aria-selected=${a.network===r.network} tabindex="${n===this.focusedNetworkIndex?"0":"-1"}" ><img class="network-option-icon" src=${this.getNetworkIconUrl(a)} alt=${a.displayName} /><span class="network-name">${a.displayName}</span>${L(a.network===r.network,()=>u`<primer-icon class="checkmark" name="checkmark" size="sm" ></primer-icon>`,()=>h)}</div>`)}</div>`,()=>h)} `}};Q.styles=[M,pa],l([C({context:Vt,subscribe:!0})],Q.prototype,"cardNetworks",2),l([C({context:K,subscribe:!0})],Q.prototype,"headlessUtils",2),l([S()],Q.prototype,"selectedCardNetwork",2),l([S()],Q.prototype,"isDropdownOpen",2),l([S()],Q.prototype,"focusedNetworkIndex",2),l([S()],Q.prototype,"isKeyboardNavigation",2),Q=l([b("primer-card-network-selector")],Q);var Sl=_l({tagName:"primer-card-network-selector",elementClass:Q,react:xl});import{createComponent as Pl}from"@lit/react";import wl from"react";function ua(i,t){if(i.style.cssText="width: 100%; flex:1; padding: 0; border: none; height: var(--primer-typography-body-large-line-height); font-size: var(--primer-typography-body-large-size); font-family: var(--primer-typography-body-large-font); color: var(--primer-color-text-primary); background-color: transparent; outline: none;",i.setAttribute("data-custom-input",""),!t.shadowRoot?.querySelector("style[data-custom-input-style]")){let e=document.createElement("style");e.setAttribute("data-custom-input-style",""),e.textContent=`
1231
113
  input[data-custom-input]::placeholder {
1232
114
  color: var(--primer-color-text-placeholder);
1233
115
  font-size: var(--primer-typography-body-large-size);
@@ -1236,1139 +118,28 @@ import{a as ti,b as s}from"./chunks/chunk.I6YWTZRK.js";import{createComponent as
1236
118
  input[data-custom-input]:focus {
1237
119
  outline: none;
1238
120
  }
1239
- `,t.shadowRoot?t.shadowRoot.appendChild(e):t.appendChild(e)}}function so(i){return i?{paddingHorizontal:0,placeholder:{color:i.getPropertyValue("--primer-color-text-placeholder").trim(),fontSize:i.getPropertyValue("--primer-typography-body-large-size").trim(),fontFamily:i.getPropertyValue("--primer-typography-body-large-font").trim()},height:i.getPropertyValue("--primer-typography-body-large-line-height").trim(),fontSize:i.getPropertyValue("--primer-typography-body-large-size").trim(),fontFamily:i.getPropertyValue("--primer-typography-body-large-font").trim(),color:i.getPropertyValue("--primer-color-text-primary").trim()}:null}function no(i,t){return i.active===t.active&&i.dirty===t.dirty&&i.error===t.error&&i.errorCode===t.errorCode&&i.submitted===t.submitted&&i.touched===t.touched&&i.valid===t.valid}var nr=class{constructor(t,e){this._isFocused=!1;this._meta={active:!1,dirty:!1,error:null,errorCode:null,submitted:!1,touched:!1,valid:!1};this._hostedInput=null;this._standardInput=null;this.host=t,this.config=e,this.host.addController(this),this.setupTask=new P(this.host,{args:()=>[this.getHostedInput()],task:this.setupHostedInput.bind(this)}),this.host.addEventListener("wrapper-click",()=>{this.focusInput()})}focusInput(){this._hostedInput?this._hostedInput.focus():this._standardInput&&this._standardInput.focus()}getHostedInput(){let{type:t}=this.config,e=this.host.cardFormContext;return e?{cardNumber:e.cardNumberInput,cvv:e.cvvInput,expire:e.expiryInput,cardholderName:"cardholderName"}[t]:void 0}async setupHostedInput([t]){if(!t)return E;await this.host.updateComplete;let e=this.getTargetContainer();return e?t==="cardholderName"?this.setupStandardInput(e):this.setupHostedIframeInput(t,e):E}getTargetContainer(){return this.host.renderRoot.querySelector(this.config.containerSelector)}setupStandardInput(t){let e=document.createElement("input");return e.type="text",e.placeholder=this.host.placeholder,ao(e,this.host),(this.host.ariaLabel||this.host.label)&&e.setAttribute("aria-label",this.host.ariaLabel??this.host.label),this.setupInputEventListeners(e),t.innerHTML="",t.appendChild(e),this._standardInput=e,!0}setupInputEventListeners(t){t.addEventListener("input",e=>{let r=e.target;this.config.onInput?.(r.value)}),t.addEventListener("focus",()=>{this._isFocused=!0,this.host.requestUpdate()}),t.addEventListener("blur",()=>{this._isFocused=!1,this.host.requestUpdate()})}async setupHostedIframeInput(t,e){await new Promise(a=>requestAnimationFrame(()=>a())),this._hostedInput=t;let r=so(this.host.computedStyles),o=r?{style:{input:{base:r}}}:void 0;return t.addEventListener("focus",()=>{this._isFocused=!0,this.host.requestUpdate()}),t.addEventListener("blur",()=>{this._isFocused=!1,this.host.requestUpdate()}),t.addEventListener("change",a=>{this._meta=a,no(this._meta,a)&&this.host.requestUpdate()}),await t.render(e,{placeholder:this.host.placeholder,ariaLabel:this.host.ariaLabel,...o}),!0}get isFocused(){return this._isFocused}get meta(){return this._meta}hostConnected(){}hostDisconnected(){this._hostedInput=null,this._standardInput=null}};var O=class extends u{constructor(){super();this.cardFormContext=null;this.computedStyles=null;this._userAssignedProps=new Set;this._internalLabel="";this._internalPlaceholder="";this._internalAriaLabel="";this.hostedInputController={}}getTranslatedValue(e){return e?typeof e=="string"?e:C(e.id,{id:e.id}):""}get label(){return this._userAssignedProps.has("label")?this._internalLabel:this.getTranslatedValue(this.config.translations.label)}set label(e){let r=this.label;e!==""?(this._userAssignedProps.add("label"),this._internalLabel=e):(this._userAssignedProps.delete("label"),this._internalLabel=""),this.requestUpdate("label",r)}get placeholder(){return this._userAssignedProps.has("placeholder")?this._internalPlaceholder:this.getTranslatedValue(this.config.translations.placeholder)}set placeholder(e){let r=this.placeholder;this._userAssignedProps.add("placeholder"),this._internalPlaceholder=e,this.requestUpdate("placeholder",r)}get ariaLabel(){return this._userAssignedProps.has("ariaLabel")?this._internalAriaLabel:this.getTranslatedValue(this.config.translations.ariaLabel)||this.getTranslatedValue(this.config.translations.label)}set ariaLabel(e){let r=this.ariaLabel;e!==""?(this._userAssignedProps.add("ariaLabel"),this._internalAriaLabel=e):(this._userAssignedProps.delete("ariaLabel"),this._internalAriaLabel=""),this.requestUpdate("ariaLabel",r)}childUpdated(){Object.defineProperty(this,"hostedInputController",{value:new nr(this,{type:this.config.inputType,containerSelector:this.config.containerSelector,onInput:this.config.onInput}),writable:!1,configurable:!1})}handleWrapperClick(){this.hostedInputController.focusInput()}getError(){let e=this.hostedInputController.meta;return e.submitted||e.dirty&&e.touched?e.errorCode:null}renderInput(){if(this.hostedInputController.setupTask.status===yt.ERROR)return c;let e=this.getError();return d`
1240
- <primer-input-wrapper
1241
- .focusWithin="${this.hostedInputController.isFocused}"
1242
- .hasError=${!!e}
1243
- @wrapper-click="${this.handleWrapperClick}"
1244
- >
1245
- ${w(!this.cardFormContext?.hideLabels,()=>d`<primer-input-label slot="label"
1246
- >${this.label}</primer-input-label
1247
- >`,()=>c)}
1248
- <div
1249
- slot="input"
1250
- class="card-input-slot"
1251
- id="${this.config.containerSelector.substring(1)}"
1252
- aria-label="${this.ariaLabel}"
1253
- ></div>
1254
- ${w(e,()=>d`
1255
- <primer-input-error slot="error">
1256
- ${C(e,{id:e})}
1257
- </primer-input-error>
1258
- `,()=>c)}
1259
- </primer-input-wrapper>
1260
- `}};s([v({context:ir,subscribe:!0})],O.prototype,"cardFormContext",2),s([v({context:jt,subscribe:!0}),l()],O.prototype,"computedStyles",2),s([l({type:String})],O.prototype,"label",1),s([l({type:String})],O.prototype,"placeholder",1),s([l({type:String,attribute:"aria-label"})],O.prototype,"ariaLabel",1);var lo=h`
1261
- :host {
1262
- display: contents;
1263
- }
1264
- `;var Ct=h`
1265
- .card-input-slot {
1266
- display: flex;
1267
- }
1268
- `;var Nt=class extends O{constructor(){super();this.config={inputType:"cardholderName",containerSelector:"#cardFormName",errorName:"cardholderName",translations:{label:{id:"cardholderNameLabel",defaultMessage:"Cardholder Name"},placeholder:{id:"cardholderNamePlaceholder",defaultMessage:"Name on card"},ariaLabel:{id:"cardholderNameLabel",defaultMessage:"Cardholder Name"}},onInput:e=>this.handleInput(e)};this.childUpdated()}handleInput(e){this.cardFormContext?.setCardholderName?.(e)}render(){return this.renderInput()}};Nt.styles=[S,Ct,lo],Nt=s([f("primer-input-card-holder-name"),T()],Nt);var Ss=_s({tagName:"primer-input-card-holder-name",elementClass:Nt,react:Es});import{createComponent as Ps}from"@lit/react";import ws from"react";var po=h`
1269
- :host {
1270
- display: contents;
1271
- }
1272
- `;var It=class extends O{constructor(){super();this.config={inputType:"expire",containerSelector:"#expiry",errorName:"expiryDate-card",translations:{label:{id:"cardExpiry",defaultMessage:"Expiry Date"},placeholder:{id:"cardExpiryPlaceholder",defaultMessage:"MM/YY"},ariaLabel:{id:"cardExpiry",defaultMessage:"Expiry Date"}}};this.childUpdated()}render(){return this.renderInput()}};It.styles=[S,Ct,po],It=s([f("primer-input-card-expiry"),T()],It);var Ms=Ps({tagName:"primer-input-card-expiry",elementClass:It,react:ws});import{createComponent as ks}from"@lit/react";import Ts from"react";var co=h`
1273
- :host {
1274
- display: contents;
1275
- }
1276
- `;var Rt=class extends O{constructor(){super();this.config={inputType:"cvv",containerSelector:"#cvv",errorName:"cvv-card",translations:{label:"CVV",placeholder:"123"}};this.childUpdated()}render(){return this.renderInput()}};Rt.styles=[S,Ct,co],Rt=s([f("primer-input-cvv"),T()],Rt);var $s=ks({tagName:"primer-input-cvv",elementClass:Rt,react:Ts});import{createComponent as Ls}from"@lit/react";import Ns from"react";var mo=h`
1277
- :host {
1278
- display: contents;
1279
- }
1280
-
1281
- .card-number-container {
1282
- display: flex;
1283
- align-items: center;
1284
- width: 100%;
1285
- position: relative;
1286
- gap: var(--primer-space-small);
1287
- }
1288
-
1289
- #cardNumber {
1290
- flex: 1;
1291
- display: flex;
1292
- width: 100%;
1293
- }
1294
-
1295
- .network-selector-container {
1296
- display: flex;
1297
- align-items: center;
1298
- z-index: 2;
1299
- }
1300
- `;var Ot=class extends O{constructor(){super();this.config={inputType:"cardNumber",containerSelector:"#cardNumber",errorName:"cardNumber-card",translations:{label:{id:"cardNumber",defaultMessage:"Card Number"},placeholder:"4111 1111 1111 1111",ariaLabel:{id:"cardNumber",defaultMessage:"Card Number"}}};this.childUpdated()}handleNetworkSelected(e){let{network:r}=e.detail;this.cardFormContext&&this.cardFormContext.setCardNetwork(r)}renderInput(){if(this.hostedInputController.setupTask.status===yt.ERROR)return c;let e=this.getError();return d`
1301
- <primer-input-wrapper
1302
- .focusWithin="${this.hostedInputController.isFocused}"
1303
- .hasError=${!!e}
1304
- >
1305
- ${w(!this.cardFormContext?.hideLabels,()=>d`<primer-input-label slot="label"
1306
- >${this.label}</primer-input-label
1307
- >`,()=>c)}
1308
- <div
1309
- slot="input"
1310
- class="card-number-container"
1311
- aria-label="${this.ariaLabel}"
1312
- >
1313
- <div id="${this.config.containerSelector.substring(1)}"></div>
1314
- <div class="network-selector-container">
1315
- <primer-card-network-selector
1316
- @network-selected=${this.handleNetworkSelected}
1317
- ></primer-card-network-selector>
1318
- </div>
1319
- </div>
1320
- ${w(e,r=>d`
1321
- <primer-input-error slot="error">
1322
- ${C(r,{id:r})}
1323
- </primer-input-error>
1324
- `,()=>c)}
1325
- </primer-input-wrapper>
1326
- `}render(){return this.renderInput()}};Ot.styles=[S,Ct,mo],Ot=s([f("primer-input-card-number"),T()],Ot);var Is=Ls({tagName:"primer-input-number",elementClass:Ot,react:Ns});import{createComponent as Rs}from"@lit/react";import Os from"react";var ho=h`
1327
- :host {
1328
- height: calc(
1329
- var(--primer-typography-title-large-line-height) +
1330
- calc(2 * var(--primer-space-medium))
1331
- );
1332
- display: flex;
1333
-
1334
- /* Default value for the background color CSS variable */
1335
- --dynamic-payment-button-bg-color: var(
1336
- --primer-color-background-outlined-default
1337
- );
1338
- }
1339
-
1340
- primer-button {
1341
- width: 100%;
1342
- height: 100%;
1343
- }
1344
-
1345
- primer-button::part(button) {
1346
- background-color: var(--dynamic-payment-button-bg-color);
1347
- border: 1px solid var(--primer-color-border-outlined-default);
1348
- color: var(--primer-color-text-primary);
1349
- flex: 1;
1350
- padding: 1px;
1351
- }
1352
-
1353
- .image-container {
1354
- display: flex;
1355
- justify-content: center;
1356
- height: 100%;
1357
- }
1358
- /* Target the img specifically inside our component */
1359
- img {
1360
- height: 100%;
1361
- }
1362
- `;function ve(i){return i.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g,(t,e)=>e.toUpperCase())}var G=class extends u{constructor(){super(...arguments);this.paymentManagers=new Map;this.sdkState=null;this.headlessUtils=null;this.open=!1;this._paymentMethodManagerTask=new P(this,{task:async([e,r])=>!e||!r?E:r.get(e)?.manager,args:()=>[this.paymentMethod?.type,this.paymentManagers]});this._getAssetsTask=new P(this,{task:async([e,r])=>{if(!e||!r)return E;let o=r.getPaymentMethodConfiguration(e);return o?{backgroundColor:o.displayMetadata.button.backgroundColor.colored,name:o.name,displayName:this._legacyGetButtonLabel(o.displayMetadata.button.text),iconUrl:o.displayMetadata.button.iconUrl.colored||o.displayMetadata.button.iconUrl.light||o.displayMetadata.button.iconUrl.dark}:E},args:()=>[this.paymentMethod?.type,this.headlessUtils]});this._setupTasks=new P(this,{task:async([e,r])=>!e||!r?E:{paymentMethodManager:e,assetsConfig:r},args:()=>[this._paymentMethodManagerTask.value,this._getAssetsTask.value]})}_legacyGetButtonLabel(e){if(!e)return;let r=e?ve(e):"";return r==="payWith"&&(r="pay_with"),C(r,{id:r})}start(){this._paymentMethodManagerTask.value&&(this.open=!0)}renderDialog(){return this.open?d`
1363
- <primer-portal>
1364
- <primer-dialog @primer-dialog-close="${()=>this.open=!1}">
1365
- <primer-ach-payment
1366
- .paymentMethod=${this.paymentMethod}
1367
- @primer-ach-error=${()=>this.open=!1}
1368
- @primer-ach-mandate-confirmed=${()=>this.open=!1}
1369
- @primer-ach-mandate-declined=${()=>this.open=!1}
1370
- ></primer-ach-payment>
1371
- </primer-dialog>
1372
- </primer-portal>
1373
- `:c}render(){return this._setupTasks.render({error:()=>c,complete:({assetsConfig:e})=>(this.style.setProperty("--dynamic-payment-button-bg-color",e.backgroundColor),d`
1374
- <primer-button
1375
- @click="${()=>this.start()}"
1376
- class=${R({loading:!!this.sdkState?.isProcessing,reverse:!0})}
1377
- title="${C("pay_with",{id:"pay_with"})} ${e.name}"
1378
- >
1379
- <span class="image-container">
1380
- <img src="${e.iconUrl}" alt="${e.name}" />
1381
- </span>
1382
- ${e.displayName}
1383
- </primer-button>
1384
- ${this.renderDialog()}
1385
- `)})}};G.styles=[S,ho],s([l({type:Object})],G.prototype,"paymentMethod",2),s([v({context:V,subscribe:!0})],G.prototype,"paymentManagers",2),s([v({context:L,subscribe:!0})],G.prototype,"sdkState",2),s([v({context:j,subscribe:!0})],G.prototype,"headlessUtils",2),s([_()],G.prototype,"open",2),G=s([f("primer-dynamic-payment"),T()],G);var Ds=Rs({tagName:"primer-dynamic-payment",elementClass:G,react:Os});import{createComponent as Vs}from"@lit/react";import Ys from"react";var uo=h`
1386
- :host {
1387
- display: block;
1388
- width: 100%;
1389
- }
1390
- `;var ct=class extends u{constructor(){super(...arguments);this.showProcessingErrors=!0}get shouldShowError(){return!this.sdkState||this.sdkState.isProcessing?!1:!!(this.sdkState.failure&&this.showProcessingErrors)}render(){return this.sdkState?d`
1391
- <primer-error-message
1392
- message="${C(this.sdkState.failure?.message??"",{id:"tokenizationError"})}"
1393
- ?visible="${this.shouldShowError}"
1394
- ></primer-error-message>
1395
- `:c}};ct.styles=[uo],s([v({context:L,subscribe:!0}),_()],ct.prototype,"sdkState",2),s([l({type:Boolean,attribute:"show-processing-errors"})],ct.prototype,"showProcessingErrors",2),ct=s([f("primer-error-message-container")],ct);var Hs=Vs({tagName:"primer-error-message-container",elementClass:ct,react:Ys});import{createComponent as Us}from"@lit/react";import zs from"react";var fo=h`
1396
- :host {
1397
- display: contents;
1398
- }
1399
-
1400
- .klarna-container {
1401
- display: flex;
1402
- flex-direction: column;
1403
- width: 100%;
1404
- transition: all var(--primer-animation-duration)
1405
- var(--primer-animation-easing);
1406
- }
1407
-
1408
- .klarna-container.expanded {
1409
- border-radius: var(--primer-radius-medium);
1410
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
1411
- background-color: var(--primer-color-background-outlined-default);
1412
- border: 1px solid var(--primer-color-border-outlined-default);
1413
- padding: var(--primer-space-large);
1414
- }
1415
-
1416
- .klarna-button-header {
1417
- padding: 0;
1418
- display: flex;
1419
- align-items: center;
1420
- justify-content: space-between;
1421
- width: 100%;
1422
- gap: var(--primer-space-small);
1423
- }
1424
-
1425
- .klarna-accordion-icon {
1426
- position: absolute;
1427
- right: var(--primer-space-medium);
1428
- font-size: var(--primer-typography-body-small-size);
1429
- font-weight: var(--primer-typography-title-large-weight);
1430
- color: var(--primer-color-text-secondary);
1431
- transition: all var(--primer-animation-duration)
1432
- var(--primer-animation-easing);
1433
- display: inline-flex;
1434
- align-items: center;
1435
- justify-content: center;
1436
- width: 24px;
1437
- height: 24px;
1438
- margin-left: var(--primer-space-small);
1439
- }
1440
-
1441
- .klarna-accordion-icon.expanded {
1442
- transform: rotate(180deg);
1443
- }
1444
-
1445
- .klarna-expanded-content {
1446
- width: 100%;
1447
- display: grid;
1448
- grid-template-rows: 0fr;
1449
- transition: grid-template-rows var(--primer-animation-duration)
1450
- var(--primer-animation-easing);
1451
- }
1452
-
1453
- .klarna-expanded-content.visible {
1454
- margin-top: var(--primer-space-large);
1455
- border-top: 1px solid var(--primer-color-border-outlined-default);
1456
- grid-template-rows: 1fr;
1457
- }
1458
-
1459
- .klarna-accordion-content {
1460
- overflow: hidden;
1461
- }
1462
-
1463
- @keyframes fadeIn {
1464
- from {
1465
- opacity: 0;
1466
- transform: translateY(-10px);
1467
- }
1468
- to {
1469
- opacity: 1;
1470
- transform: translateY(0);
1471
- }
1472
- }
1473
-
1474
- .category-selection {
1475
- display: flex;
1476
- flex-wrap: wrap;
1477
- gap: var(--primer-space-small);
1478
- margin: var(--primer-space-large) 0;
1479
- }
1480
-
1481
- .category-button {
1482
- padding: var(--primer-space-medium) var(--primer-space-large);
1483
- border-radius: var(--primer-radius-base);
1484
- background-color: var(--primer-color-background-outlined-loading);
1485
- border: 1px solid var(--primer-color-border-outlined-default);
1486
- font-size: var(--primer-typography-body-medium-size);
1487
- cursor: pointer;
1488
- transition: all var(--primer-animation-duration)
1489
- var(--primer-animation-easing);
1490
- flex: 1;
1491
- min-width: 100px;
1492
- text-align: center;
1493
- }
1494
-
1495
- .category-button.selected {
1496
- background-color: var(--primer-color-background-outlined-default);
1497
- border-color: var(--primer-color-brand);
1498
- color: var(--primer-color-brand);
1499
- font-weight: var(--primer-typography-title-large-weight);
1500
- }
1501
-
1502
- .category-button:hover:not(.selected) {
1503
- background-color: var(--primer-color-background-outlined-hover);
1504
- }
1505
-
1506
- .klarna-category-container {
1507
- min-height: 74px;
1508
- width: 100%;
1509
- border-radius: var(--primer-radius-small);
1510
- border: 1px solid var(--primer-color-border-outlined-default);
1511
- background-color: var(--primer-color-background-outlined-default);
1512
- padding: var(--primer-space-medium);
1513
- margin-bottom: var(--primer-space-large);
1514
- transition: height var(--primer-animation-duration)
1515
- var(--primer-animation-easing);
1516
- overflow: hidden;
1517
- }
1518
-
1519
- .klarna-button::part(button) {
1520
- display: flex;
1521
- flex: 1;
1522
- gap: var(--primer-space-small);
1523
- height: calc(
1524
- var(--primer-typography-title-large-line-height) +
1525
- calc(2 * var(--primer-space-medium))
1526
- );
1527
- width: 100%;
1528
- }
1529
-
1530
- .klarna-button primer-icon {
1531
- margin-right: var(--primer-space-medium);
1532
- }
1533
-
1534
- .klarna-button:hover {
1535
- background-color: var(--primer-color-background-outlined-hover);
1536
- border-color: var(--primer-color-border-outlined-hover);
1537
- }
1538
-
1539
- .klarna-pay-button {
1540
- padding: var(--primer-space-medium) var(--primer-space-large);
1541
- display: flex;
1542
- align-items: center;
1543
- justify-content: center;
1544
- border-radius: var(--primer-radius-small);
1545
- background-color: var(--primer-color-brand);
1546
- color: var(--primer-color-background-outlined-default);
1547
- border: none;
1548
- font-size: var(--primer-typography-body-medium-size);
1549
- font-weight: var(--primer-typography-body-medium-weight);
1550
- width: 100%;
1551
- cursor: pointer;
1552
- transition: all var(--primer-animation-duration)
1553
- var(--primer-animation-easing);
1554
- }
1555
-
1556
- .klarna-pay-button:hover:not(.disabled) {
1557
- filter: brightness(105%);
1558
- }
1559
-
1560
- .klarna-pay-button.loading {
1561
- opacity: 0.7;
1562
- pointer-events: none;
1563
- }
1564
-
1565
- .klarna-pay-button.disabled {
1566
- opacity: 0.5;
1567
- cursor: not-allowed;
1568
- filter: brightness(85%);
1569
- }
1570
-
1571
- .loading {
1572
- text-align: center;
1573
- font-size: var(--primer-typography-body-medium-size);
1574
- color: var(--primer-color-text-secondary);
1575
- padding: var(--primer-space-medium);
1576
- }
1577
-
1578
- .error {
1579
- color: var(--primer-color-text-negative);
1580
- font-size: var(--primer-typography-body-medium-size);
1581
- padding: var(--primer-space-medium);
1582
- text-align: center;
1583
- border: 1px solid var(--primer-color-border-outlined-error);
1584
- background-color: var(--primer-color-background-outlined-default);
1585
- border-radius: var(--primer-radius-small);
1586
- }
1587
- `;var D=class extends u{constructor(){super(...arguments);this.paymentManagers=new Map;this.sdkState=null;this.headlessUtils=null;this.klarnaCategories=null;this.selectedCategory=null;this.isExpanded=!1;this.headerAriaLabel=C("pay_with",{id:"pay_with"});this._paymentMethodManagerTask=new P(this,{task:async([e,r])=>{if(!e||!r)return E;let o=await r.getCDNAssets("KLARNA");return{manager:e.manager,klarnaIcon:o?.assets?.icon?`${o.goatCdnUrl}/${o.assets.icon}`:""}},args:()=>[this.paymentManagers.get("KLARNA"),this.headlessUtils]})}toggleExpand(){this.isExpanded=!this.isExpanded,this.isExpanded||(this.selectedCategory=null)}async startKlarnaPayment(){if(!(!this._paymentMethodManagerTask.value||!this.selectedCategory))try{await this._paymentMethodManagerTask.value.manager.start({paymentMethodCategoryId:this.selectedCategory})}catch(e){A.error("Failed to start Klarna payment",e)}}async renderSelectedCategory(){if(!(!this._paymentMethodManagerTask.value||!this.selectedCategory||!this.klarnaContainer))try{this.klarnaContainer.innerHTML="",await this._paymentMethodManagerTask.value.manager.renderCategory({containerId:this.klarnaContainer,paymentMethodCategoryId:this.selectedCategory,onHeightChange:e=>{e>0&&(this.klarnaContainer.style.height=`${e}px`)}})}catch(e){A.error("Failed to render Klarna category",e)}}selectCategory(e){this.selectedCategory=e,this.renderSelectedCategory()}updated(e){e.has("selectedCategory")&&this.selectedCategory&&this.renderSelectedCategory()}renderCategorySelection(){let e=this.klarnaCategories?.categories||[];return this.klarnaCategories?.isLoading||!1?d`<div class="loading">
1588
- <primer-spinner size="small"></primer-spinner>
1589
- </div>`:d`
1590
- <div class="category-selection">
1591
- ${e.map(o=>d`
1592
- <button
1593
- class=${R({"category-button":!0,selected:o.id===this.selectedCategory})}
1594
- @click=${()=>{this.selectCategory(o.id)}}
1595
- >
1596
- ${o.name}
1597
- </button>
1598
- `)}
1599
- </div>
1600
- `}renderExpandedContent(){return d`
1601
- ${this.renderCategorySelection()}
1602
- ${this.selectedCategory?d`
1603
- <div
1604
- id="klarna-category-container"
1605
- class="klarna-category-container"
1606
- ></div>
1607
- `:c}
1608
-
1609
- <button
1610
- class=${R({"klarna-pay-button":!0,loading:!!this.sdkState?.isProcessing,disabled:!this.selectedCategory})}
1611
- ?disabled=${!this.selectedCategory||this.sdkState?.isProcessing}
1612
- @click=${()=>this.startKlarnaPayment()}
1613
- >
1614
- ${C("confirm",{id:"confirm"})}
1615
- </button>
1616
- `}render(){return this._paymentMethodManagerTask.render({error:e=>{let r=e instanceof Error?e.message:"Unknown error in Klarna";return d`<div class="error">
1617
- Error loading Klarna: ${r}
1618
- </div>`},complete:({manager:e,klarnaIcon:r})=>e?d`
1619
- <div class="klarna-container ${this.isExpanded?"expanded":""}">
1620
- <div class="klarna-button-header">
1621
- <primer-button
1622
- buttonType="button"
1623
- variant="secondary"
1624
- class="klarna-button"
1625
- @click=${this.toggleExpand}
1626
- aria-expanded=${this.isExpanded}
1627
- aria-controls="collapsable-content"
1628
- aria-label=${this.headerAriaLabel}
1629
- >
1630
- <img src=${r} alt="Klarna logo" />
1631
- <span>${C("pay_with",{id:"pay_with"})} Klarna</span>
1632
- <span
1633
- class="klarna-accordion-icon ${this.isExpanded?"expanded":""}"
1634
- >
1635
-
1636
- </span>
1637
- </primer-button>
1638
- </div>
1639
-
1640
- <div
1641
- class="klarna-expanded-content ${this.isExpanded?"visible":""}"
1642
- >
1643
- <div class="klarna-accordion-content">
1644
- ${this.renderExpandedContent()}
1645
- </div>
1646
- </div>
1647
- </div>
1648
- `:c})}};D.styles=[S,fo],s([v({context:V,subscribe:!0}),l()],D.prototype,"paymentManagers",2),s([v({context:L,subscribe:!0}),l()],D.prototype,"sdkState",2),s([v({context:j,subscribe:!0}),l({type:Object})],D.prototype,"headlessUtils",2),s([v({context:$e,subscribe:!0}),l()],D.prototype,"klarnaCategories",2),s([_()],D.prototype,"selectedCategory",2),s([_()],D.prototype,"isExpanded",2),s([_()],D.prototype,"headerAriaLabel",2),s([vt("#klarna-category-container")],D.prototype,"klarnaContainer",2),D=s([f("primer-klarna"),T()],D);var Bs=Us({tagName:"primer-klarna",elementClass:D,react:zs});import{createComponent as Fs}from"@lit/react";import Ks from"react";var go=h`
1649
- :host {
1650
- height: calc(
1651
- var(--primer-typography-title-large-line-height) +
1652
- calc(2 * var(--primer-space-medium))
1653
- );
1654
- display: flex;
1655
- }
1656
-
1657
- .native-button-container {
1658
- width: 100%;
1659
- height: 100%;
1660
- flex: 1;
1661
- }
1662
- `;var et=class extends u{constructor(){super();this.paymentManagers=new Map;this.computedStyles=null;this._buttonId="button-container";this.loadManagerTask=new P(this,{args:()=>[this.paymentMethod?.type],task:async([e])=>{if(!e)return E;let r=this.paymentManagers.get(e)?.manager;if(!r)throw new Error(`No manager found for payment method type ${e}`);return r}}),new P(this,{args:()=>[this.loadManagerTask.value],task:async([e])=>{if(!e)return E;await this.updateComplete;let r=this.shadowRoot?.getElementById(this._buttonId);if(!r)return;let o=this.calculateButtonHeight(),a=e.createButton(),n=this.createRenderOptions(o);return await a.render(this.paymentMethod?.type==="GOOGLE_PAY"?this.shadowRoot?.getRootNode():r,n),e}})}calculateButtonHeight(){if(typeof window>"u"||!this.isConnected||!this.computedStyles)return 0;let e=parseFloat(this.computedStyles.getPropertyValue("--primer-typography-title-large-line-height")),r=parseFloat(this.computedStyles.getPropertyValue("--primer-space-medium"));return e+2*r}createRenderOptions(e){let r=this.paymentMethod?.type;return r==="GOOGLE_PAY"?{style:{shadowRoot:!0}}:r==="APPLE_PAY"?{style:{buttonHeight:e}}:r==="PAYPAL"?{style:{buttonHeight:e}}:{style:{buttonHeight:e}}}updated(e){e.has("paymentMethod")&&this.paymentMethod&&(this._buttonId=`button-container-${this.paymentMethod.type}`)}render(){return this.loadManagerTask.render({error:()=>c,complete:()=>d`
1663
- <!-- The native button container is rendered first -->
1664
- <div class="native-button-container" id="${this._buttonId}"></div>
1665
- `,pending:()=>c})}};et.styles=[S,go],s([l({type:Object})],et.prototype,"paymentMethod",2),s([v({context:V,subscribe:!0}),l()],et.prototype,"paymentManagers",2),s([v({context:jt,subscribe:!0}),l()],et.prototype,"computedStyles",2),et=s([f("primer-native-payment")],et);var js=Fs({tagName:"primer-native-payment",elementClass:et,react:Ks});import{createComponent as Gs}from"@lit/react";import qs from"react";var yo=h`
1666
- :host {
1667
- display: contents;
1668
- }
1669
- `;var mt=class extends u{constructor(){super(...arguments);this.type=void 0;this.paymentMethods=null}render(){if(!this.type)return c;let e=this.paymentMethods?.get(this.type);if(!e)return c;switch(e?.managerType){case"CARD":return d`<primer-card-form></primer-card-form>`;case"NATIVE":return d`<primer-native-payment
1670
- .paymentMethod=${e}
1671
- ></primer-native-payment>`;case"REDIRECT":return d`<primer-redirect-payment
1672
- .paymentMethod=${e}
1673
- ></primer-redirect-payment>`;case"KLARNA":return d`<primer-klarna></primer-klarna>`;case"ACH":return d`
1674
- <primer-dynamic-payment
1675
- .paymentMethod=${e}
1676
- ></primer-dynamic-payment>
1677
- `;default:return c}}};mt.styles=[yo],s([l({type:String})],mt.prototype,"type",2),s([v({context:Gt,subscribe:!0}),l()],mt.prototype,"paymentMethods",2),mt=s([f("primer-payment-method")],mt);var Ws=Gs({tagName:"primer-payment-method",elementClass:mt,react:qs});import{createComponent as Zs}from"@lit/react";import Xs from"react";var Qt=class extends u{render(){return d`
1678
- <primer-checkout-state type="complete"></primer-checkout-state>
1679
- `}};Qt=s([f("primer-checkout-complete")],Qt);var Qs=Zs({tagName:"primer-checkout-complete",elementClass:Qt,react:Xs});import{createComponent as Js}from"@lit/react";import tn from"react";var Dt=class extends u{constructor(){super(...arguments);this.sdkState=null}render(){return d`
1680
- <primer-checkout-state
1681
- type="failure"
1682
- description=${this.sdkState?.error?.message||""}
1683
- ></primer-checkout-state>
1684
- `}};s([v({context:L,subscribe:!0}),l()],Dt.prototype,"sdkState",2),Dt=s([f("primer-checkout-error")],Dt);var en=Js({tagName:"primer-checkout-error",elementClass:Dt,react:tn});import{createComponent as rn}from"@lit/react";import on from"react";var vo=h`
1685
- :host {
1686
- display: contents;
1687
- }
1688
-
1689
- .primer-main-list {
1690
- display: flex;
1691
- flex-direction: column;
1692
- gap: var(--primer-space-small);
1693
- }
1694
-
1695
- .primer-is-processing {
1696
- opacity: 0.5;
1697
- pointer-events: none;
1698
- }
1699
-
1700
- primer-vault-manager {
1701
- margin-bottom: var(--primer-space-xlarge);
1702
- }
1703
- `;var ht=class extends u{constructor(){super(...arguments);this.hasAssignedContent=!1;this.onSlotChange=e=>{let o=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=o.length>0,this.requestUpdate()};this.paymentMethods=null;this.sdkState=null}render(){return this.sdkState?.isSuccessful?d`
1704
- <slot name="checkout-complete">
1705
- <primer-checkout-complete></primer-checkout-complete>
1706
- </slot>
1707
- `:d`
1708
- <slot name="payments" @slotchange=${this.onSlotChange}></slot>
1709
- ${w(this.hasAssignedContent,()=>c,()=>d`
1710
- <div
1711
- class=${R({"primer-is-processing":!!this.sdkState?.isProcessing})}
1712
- >
1713
- <primer-vault-manager></primer-vault-manager>
1714
- <primer-show-other-payments>
1715
- <div slot="other-payments" class="primer-main-list">
1716
- ${this.paymentMethods?.toArray().map(e=>d`
1717
- <primer-payment-method
1718
- type=${e.type}
1719
- ></primer-payment-method>
1720
- `)}
1721
- </div>
1722
- </primer-show-other-payments>
1723
- <primer-error-message-container></primer-error-message-container>
1724
- </div>
1725
- `)}
1726
- `}};ht.styles=[S,vo],s([v({context:Gt,subscribe:!0}),l()],ht.prototype,"paymentMethods",2),s([v({context:L,subscribe:!0}),l()],ht.prototype,"sdkState",2),ht=s([f("primer-main")],ht);var an=rn({tagName:"primer-main",elementClass:ht,react:on});import{createComponent as sn}from"@lit/react";import nn from"react";var bo=h`
1727
- :host {
1728
- height: calc(
1729
- var(--primer-typography-title-large-line-height) +
1730
- calc(2 * var(--primer-space-medium))
1731
- );
1732
- display: flex;
1733
-
1734
- /* Default value for the background color CSS variable */
1735
- --redirect-payment-button-bg-color: var(
1736
- --primer-color-background-outlined-default
1737
- );
1738
- }
1739
-
1740
- primer-button {
1741
- width: 100%;
1742
- height: 100%;
1743
- }
1744
-
1745
- primer-button::part(button) {
1746
- background-color: var(--redirect-payment-button-bg-color);
1747
- border: 1px solid var(--primer-color-border-outlined-default);
1748
- color: var(--primer-color-text-primary);
1749
- flex: 1;
1750
- padding: var(--primer-space-small);
1751
- display: flex;
1752
- align-items: center;
1753
- justify-content: center;
1754
- gap: var(--primer-space-small);
1755
- }
1756
-
1757
- /* Default layout: icon on the left (START) */
1758
- primer-button {
1759
- display: flex;
1760
- flex-direction: row;
1761
- }
1762
-
1763
- /* When icon position is END */
1764
- primer-button.icon-end {
1765
- flex-direction: row-reverse;
1766
- }
1767
-
1768
- .image-container {
1769
- display: flex;
1770
- justify-content: center;
1771
- align-items: center;
1772
- min-width: 100px;
1773
- height: 100%;
1774
- }
1775
-
1776
- .button-text {
1777
- font-family: var(--primer-typography-font-family);
1778
- font-size: var(--primer-typography-title-small-font-size);
1779
- font-weight: var(--primer-typography-title-small-font-weight);
1780
- line-height: var(--primer-typography-title-small-line-height);
1781
- letter-spacing: var(--primer-typography-title-small-letter-spacing);
1782
- white-space: nowrap;
1783
- overflow: hidden;
1784
- text-overflow: ellipsis;
1785
- }
1786
-
1787
- /* Target the img specifically inside our component */
1788
- img {
1789
- max-width: 100px;
1790
- width: 100%;
1791
- height: auto;
1792
- object-fit: cover;
1793
- max-height: 100%;
1794
- }
1795
-
1796
- /* For image container sizing */
1797
- .image-container {
1798
- flex-shrink: 0;
1799
- flex-grow: 1;
1800
- }
1801
- `;var X=class extends u{constructor(){super(...arguments);this.paymentManagers=new Map;this.sdkState=null;this.headlessUtils=null;this._paymentMethodManagerTask=new P(this,{task:async([e,r])=>!e||!r?E:r.get(e)?.manager,args:()=>[this.paymentMethod?.type,this.paymentManagers]});this._getAssetsTask=new P(this,{task:async([e,r])=>{if(!e||!r)return E;let o=r.getPaymentMethodConfiguration(e);if(!o)return E;let a=o.displayMetadata.button.backgroundColor.colored??o.displayMetadata.button.backgroundColor.light,n=o.displayMetadata.button.iconPositionRelativeToText||"START";return{backgroundColor:a,name:o.name,displayName:this._legacyGetButtonLabel(o.displayMetadata.button.text),iconUrl:o.displayMetadata.button.iconUrl.colored??o.displayMetadata.button.iconUrl.light,iconPosition:n}},args:()=>[this.paymentMethod?.type,this.headlessUtils]});this._setupTasks=new P(this,{task:async([e,r])=>!e||!r?E:{paymentMethodManager:e,assetsConfig:r},args:()=>[this._paymentMethodManagerTask.value,this._getAssetsTask.value]})}_legacyGetButtonLabel(e){if(!e)return;let r=e?ve(e):"";return r==="payWith"&&(r="pay_with"),C(r,{id:r})}startRedirectPayment(){this._paymentMethodManagerTask.value&&this._paymentMethodManagerTask.value.start()}render(){return this._setupTasks.render({error:()=>c,complete:({assetsConfig:e})=>{this.style.setProperty("--redirect-payment-button-bg-color",e.backgroundColor);let r={loading:!!this.sdkState?.isProcessing,"icon-end":e.iconPosition==="END","image-only":!e.displayName},o=e.displayName?d`
1802
- <span class="image-container">
1803
- <img src="${e.iconUrl}" alt="${e.name}" />
1804
- </span>
1805
- <span class="button-text">${e.displayName}</span>
1806
- `:d`
1807
- <span class="image-container">
1808
- <img src="${e.iconUrl}" alt="${e.name}" />
1809
- </span>
1810
- `;return d`
1811
- <primer-button
1812
- @click="${()=>this.startRedirectPayment()}"
1813
- class=${R(r)}
1814
- title="${C("pay_with",{id:"pay_with"})} ${e.name}"
1815
- >
1816
- ${o}
1817
- </primer-button>
1818
- `}})}};X.styles=[S,bo],s([l({type:Object})],X.prototype,"paymentMethod",2),s([v({context:V,subscribe:!0})],X.prototype,"paymentManagers",2),s([v({context:L,subscribe:!0})],X.prototype,"sdkState",2),s([v({context:j,subscribe:!0})],X.prototype,"headlessUtils",2),X=s([f("primer-redirect-payment"),T()],X);var ln=sn({tagName:"primer-redirect-payment",elementClass:X,react:nn});import{createComponent as dn}from"@lit/react";import pn from"react";var Co=h`
1819
- :host {
1820
- display: block;
1821
- margin-top: var(--primer-space-medium);
1822
- margin-bottom: var(--primer-space-medium);
1823
- }
1824
-
1825
- .other-payment-methods-container {
1826
- width: 100%;
1827
- }
1828
-
1829
- .other-payment-methods-content {
1830
- padding: var(--primer-space-medium) 0;
1831
- }
1832
-
1833
- .primer-loader {
1834
- display: flex;
1835
- justify-content: center;
1836
- align-items: center;
1837
- }
1838
- `;var xt=class extends u{constructor(){super(...arguments);this.vaultManager=null}render(){return this.vaultManager?.isLoading?c:!this.vaultManager||!this.vaultManager.enabled?d`<slot name="other-payments"></slot>`:d`
1839
- <div class="other-payment-methods-container">
1840
- <primer-collapsable
1841
- buttonVariant="secondary"
1842
- .expanded="${this.vaultManager?.vaultedPaymentMethods.length===0}"
1843
- .header="${C("navigateToPaymentMethods",{id:"navigateToPaymentMethods"})}"
1844
- >
1845
- <div class="other-payment-methods-content">
1846
- <slot name="other-payments"></slot>
1847
- </div>
1848
- </primer-collapsable>
1849
- </div>
1850
- `}};xt.styles=[Co],s([v({context:qt,subscribe:!0}),l({type:Object,attribute:!1})],xt.prototype,"vaultManager",2),xt=s([f("primer-show-other-payments")],xt);var cn=dn({tagName:"primer-show-other-payments",elementClass:xt,react:pn});import{createComponent as wn}from"@lit/react";import Mn from"react";var be={WORLDPAY_IDEAL:"WORLDPAY_IDEAL",AUTOMATED_CLEARING_HOUSE:"AUTOMATED_CLEARING_HOUSE",ADYEN_KLARNA:"ADYEN_KLARNA",ADYEN_BANCONTACT_CARD:"ADYEN_BANCONTACT_CARD",PAY_NL_KAARTDIRECT:"PAY_NL_KAARTDIRECT",ADYEN_EPS:"ADYEN_EPS",ADYEN_BANCONTACT_PAYCONIQ:"ADYEN_BANCONTACT_PAYCONIQ",OMISE_PROMPTPAY:"OMISE_PROMPTPAY",OMISE_TRUEMONEY:"OMISE_TRUEMONEY",ADYEN_MULTIBANCO:"ADYEN_MULTIBANCO",PACYPAY_WECHAT:"PACYPAY_WECHAT",PACYPAY_ALIPAY:"PACYPAY_ALIPAY",ADYEN_MBWAY:"ADYEN_MBWAY",XENDIT_DANA:"XENDIT_DANA",XENDIT_SHOPEEPAY:"XENDIT_SHOPEEPAY",ADYEN_PAYSHOP:"ADYEN_PAYSHOP",ADYEN_PAYTRAIL:"ADYEN_PAYTRAIL",CLEARPAY:"CLEARPAY",RAPYD_FAST:"RAPYD_FAST",RAPYD_PROMPTPAY:"RAPYD_PROMPTPAY",RAPYD_GCASH:"RAPYD_GCASH",RAPYD_POLI:"RAPYD_POLI",RAPYD_GRABPAY:"RAPYD_GRABPAY",PRIMER_PAYPAL:"PRIMER_PAYPAL",TWOC2P:"TWOC2P",NETS:"NETS",STRIPE_ACH:"STRIPE_ACH",STRIPE_GIROPAY:"STRIPE_GIROPAY",MOLLIE_GIROPAY:"MOLLIE_GIROPAY",MOLLIE_EPS:"MOLLIE_EPS",PAY_NL_EPS:"PAY_NL_EPS",PAY_NL_P24:"PAY_NL_P24",MOLLIE_P24:"MOLLIE_P24",MOLLIE_SOFORT:"MOLLIE_SOFORT",COINBASE:"COINBASE",OPENNODE:"OPENNODE",MOLLIE_GIFT_CARD:"MOLLIE_GIFTCARD",XFERS_PAYNOW:"XFERS_PAYNOW",CARD:"PAYMENT_CARD",APPLE_PAY:"APPLE_PAY",GOOGLE_PAY:"GOOGLE_PAY",PAYPAL:"PAYPAL_ORDER",PAYPAL_VAULTED:"PAYPAL_BILLING_AGREEMENT",GO_CARDLESS:"GOCARDLESS",PAY_NL_IDEAL:"PAY_NL_IDEAL",PAY_NL_SOFORT_BANKING:"PAY_NL_SOFORT_BANKING",PAY_NL_BANCONTACT:"PAY_NL_BANCONTACT",PAY_NL_PAYPAL:"PAY_NL_PAYPAL",PAY_NL_CREDIT_TRANSFER:"PAY_NL_CREDIT_TRANSFER",PAY_NL_DIRECT_DEBIT:"PAY_NL_DIRECT_DEBIT",PAY_NL_GIROPAY:"PAY_NL_GIROPAY",PAY_NL_PAYCONIQ:"PAY_NL_PAYCONIQ",HOOLAH:"HOOLAH",ADYEN_BLIK:"ADYEN_BLIK",ADYEN_VIPPS:"ADYEN_VIPPS",ADYEN_GIROPAY:"ADYEN_GIROPAY",ADYEN_SOFORT:"ADYEN_SOFORT",ADYEN_IDEAL:"ADYEN_IDEAL",ADYEN_TRUSTLY:"ADYEN_TRUSTLY",ADYEN_ALIPAY:"ADYEN_ALIPAY",ADYEN_TWINT:"ADYEN_TWINT",ADYEN_MOBILEPAY:"ADYEN_MOBILEPAY",MOLLIE_BANCONTACT:"MOLLIE_BANCONTACT",MOLLIE_IDEAL:"MOLLIE_IDEAL",BUCKAROO_GIROPAY:"BUCKAROO_GIROPAY",BUCKAROO_EPS:"BUCKAROO_EPS",BUCKAROO_SOFORT:"BUCKAROO_SOFORT",BUCKAROO_BANCONTACT:"BUCKAROO_BANCONTACT",BUCKAROO_IDEAL:"BUCKAROO_IDEAL",ATOME:"ATOME",KLARNA_CUSTOMER_TOKEN:"KLARNA_CUSTOMER_TOKEN"};function jr(i){return i.charAt(0).toUpperCase()+i.slice(1).toLowerCase()}function mn(i){return i?i===i.toUpperCase()?jr(i):i:""}function xo(i,t){return[i,t].filter(Boolean).join(" ")}function hn(i,t){return!i||!t?"":`Expires ${i}/${t.slice(-2)}`}function Ao(i){return i?`\u2022\u2022\u2022\u2022 ${i}`:""}function un(i){let t=i.paymentInstrumentData,e=mn(t.network),r=t.last4Digits,o=`${i.paymentInstrumentData.cardholderName?i.paymentInstrumentData.cardholderName:""}${(r?` ${e} ${Ao(r)}`:e)||" Card"}`,a=hn(t.expirationMonth,t.expirationYear);return{description:o,secondaryDescription:a}}function fn(i){let t=i.paymentInstrumentData,e=t.externalPayerInfo?.email||"",r=t.externalPayerInfo?.firstName||"",o=t.externalPayerInfo?.lastName||"",a=i.userDescription||e||"PayPal Account",n=xo(r,o);return{description:a,secondaryDescription:n}}function gn(i){let t=i.paymentInstrumentData,e=t.sessionData?.billingAddress?.email||"",r=t.sessionData?.billingAddress?.firstName||"",o=t.sessionData?.billingAddress?.lastName||"",a=i.userDescription||(e?`Klarna - ${e}`:"Klarna Account"),n=xo(r,o);return{description:a,secondaryDescription:n}}function yn(i){let t=i.paymentInstrumentData,e=t.accountNumberLastFourDigits||"",r=t.bankName||"",o=t.accountType||"",a=i.userDescription;a||(r&&e?a=`${r} ${Ao(e)}`:r?a=r:a="Bank Account");let n=o?`${jr(o)} Account`:"";return{description:a,secondaryDescription:n}}function vn(i){let t=i.paymentInstrumentType,e=jr(t.replace(/_/g," "));return{description:i.userDescription||e}}var bn={[be.CARD]:un,[be.PAYPAL_VAULTED]:fn,[be.KLARNA_CUSTOMER_TOKEN]:gn,[be.AUTOMATED_CLEARING_HOUSE]:yn};function _o(i){try{let t=bn[i.paymentInstrumentType];return t?t(i):vn(i)}catch(t){return A.error("FormatUtils",`Error formatting payment method ${i.id}:`,t),{description:i.userDescription||i.id||"Payment Method"}}}var Eo=h`
1851
- :host {
1852
- display: block;
1853
- width: 100%;
1854
- position: relative;
1855
- }
1856
-
1857
- .vault-manager {
1858
- display: flex;
1859
- flex-direction: column;
1860
- position: relative;
1861
- }
1862
-
1863
- .vault-manager-content {
1864
- display: flex;
1865
- flex-direction: column;
1866
- width: 100%;
1867
- position: relative;
1868
- }
1869
-
1870
- /* Content container using CSS Grid for height animation */
1871
- .content-container {
1872
- display: grid;
1873
- grid-template-rows: 1fr;
1874
- transition: grid-template-rows var(--primer-animation-duration)
1875
- var(--primer-animation-easing);
1876
- width: 100%;
1877
- position: relative;
1878
- }
1879
-
1880
- /* Required to make grid animation work - ensures content can expand/collapse properly */
1881
- .content-container > * {
1882
- min-height: 0;
1883
- overflow: hidden;
1884
- }
1885
-
1886
- /* Submit button container */
1887
- .submit-button-container {
1888
- display: grid;
1889
- grid-template-rows: 1fr;
1890
- transition: grid-template-rows var(--primer-animation-duration)
1891
- var(--primer-animation-easing);
1892
- overflow: hidden;
1893
- margin-top: var(--primer-space-small);
1894
- width: 100%;
1895
- }
1896
-
1897
- /* Ensure the submit button has full width */
1898
- .submit-button {
1899
- width: 100%;
1900
- }
1901
-
1902
- /* Make sure pay button inside the submit component is full width */
1903
- primer-vault-payment-submit::part(button),
1904
- ::slotted(primer-button) {
1905
- width: 100%;
1906
- }
1907
-
1908
- /* Payment methods list */
1909
- .payment-methods-list {
1910
- display: flex;
1911
- flex-direction: column;
1912
- gap: var(--primer-space-small);
1913
- width: 100%;
1914
- position: relative;
1915
- }
1916
-
1917
- /* Delete confirmation container */
1918
- .delete-confirmation-container {
1919
- width: 100%;
1920
- position: relative;
1921
- }
1922
-
1923
- /* Loading overlay styles */
1924
- .loading-overlay {
1925
- position: absolute;
1926
- top: 0;
1927
- left: 0;
1928
- width: 100%;
1929
- height: 100%;
1930
- display: flex;
1931
- align-items: center;
1932
- justify-content: center;
1933
- background-color: rgba(255, 255, 255, 0.7);
1934
- z-index: 10;
1935
- border-radius: var(--primer-radius-medium);
1936
- backdrop-filter: blur(2px);
1937
- opacity: 0; /* Start invisible */
1938
- }
1939
-
1940
- /* Add styles for when updating is active */
1941
- .is-updating {
1942
- pointer-events: none; /* Prevent interaction when updating */
1943
- }
1944
-
1945
- /*
1946
- * Component-specific styles to ensure smooth animations
1947
- * These components need display:block to work with the grid layout
1948
- */
1949
- primer-vault-payment-method-item,
1950
- primer-vault-empty-state,
1951
- primer-vault-delete-confirmation {
1952
- display: block;
1953
- width: 100%;
1954
- }
1955
-
1956
- /* Disable animations for reduced motion preference */
1957
- @media (prefers-reduced-motion: reduce) {
1958
- .content-container,
1959
- .submit-button-container,
1960
- primer-vault-payment-method-item,
1961
- primer-vault-payment-submit,
1962
- primer-vault-empty-state,
1963
- primer-vault-delete-confirmation {
1964
- transition: none;
1965
- }
1966
- }
1967
- `;var xe=globalThis,lr=xe.trustedTypes,So=lr?lr.createPolicy("lit-html",{createHTML:i=>i}):void 0,qr="$lit$",ut=`lit$${Math.random().toFixed(9).slice(2)}$`,Wr="?"+ut,Cn=`<${Wr}>`,Ht=document,dr=()=>Ht.createComment(""),Ae=i=>i===null||typeof i!="object"&&typeof i!="function",Zr=Array.isArray,$o=i=>Zr(i)||typeof i?.[Symbol.iterator]=="function",Gr=`[
1968
- \f\r]`,Ce=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Po=/-->/g,wo=/>/g,Vt=RegExp(`>|${Gr}(?:([^\\s"'>=/]+)(${Gr}*=${Gr}*(?:[^
1969
- \f\r"'\`<>=]|("|')|))|$)`,"g"),Mo=/'/g,ko=/"/g,Lo=/^(?:script|style|textarea|title)$/i,Xr=i=>(t,...e)=>({_$litType$:i,strings:t,values:e}),ix=Xr(1),ox=Xr(2),ax=Xr(3),_e=Symbol.for("lit-noChange"),$=Symbol.for("lit-nothing"),To=new WeakMap,Yt=Ht.createTreeWalker(Ht,129);function No(i,t){if(!Zr(i)||!i.hasOwnProperty("raw"))throw Error("invalid template strings array");return So!==void 0?So.createHTML(t):t}var Io=(i,t)=>{let e=i.length-1,r=[],o,a=t===2?"<svg>":t===3?"<math>":"",n=Ce;for(let m=0;m<e;m++){let p=i[m],y,b,g=-1,M=0;for(;M<p.length&&(n.lastIndex=M,b=n.exec(p),b!==null);)M=n.lastIndex,n===Ce?b[1]==="!--"?n=Po:b[1]!==void 0?n=wo:b[2]!==void 0?(Lo.test(b[2])&&(o=RegExp("</"+b[2],"g")),n=Vt):b[3]!==void 0&&(n=Vt):n===Vt?b[0]===">"?(n=o??Ce,g=-1):b[1]===void 0?g=-2:(g=n.lastIndex-b[2].length,y=b[1],n=b[3]===void 0?Vt:b[3]==='"'?ko:Mo):n===ko||n===Mo?n=Vt:n===Po||n===wo?n=Ce:(n=Vt,o=void 0);let N=n===Vt&&i[m+1].startsWith("/>")?" ":"";a+=n===Ce?p+Cn:g>=0?(r.push(y),p.slice(0,g)+qr+p.slice(g)+ut+N):p+ut+(g===-2?m:N)}return[No(i,a+(i[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),r]},Ee=class i{constructor({strings:t,_$litType$:e},r){let o;this.parts=[];let a=0,n=0,m=t.length-1,p=this.parts,[y,b]=Io(t,e);if(this.el=i.createElement(y,r),Yt.currentNode=this.el.content,e===2||e===3){let g=this.el.content.firstChild;g.replaceWith(...g.childNodes)}for(;(o=Yt.nextNode())!==null&&p.length<m;){if(o.nodeType===1){if(o.hasAttributes())for(let g of o.getAttributeNames())if(g.endsWith(qr)){let M=b[n++],N=o.getAttribute(g).split(ut),rt=/([.?@])?(.*)/.exec(M);p.push({type:1,index:a,name:rt[2],strings:N,ctor:rt[1]==="."?cr:rt[1]==="?"?mr:rt[1]==="@"?hr:zt}),o.removeAttribute(g)}else g.startsWith(ut)&&(p.push({type:6,index:a}),o.removeAttribute(g));if(Lo.test(o.tagName)){let g=o.textContent.split(ut),M=g.length-1;if(M>0){o.textContent=lr?lr.emptyScript:"";for(let N=0;N<M;N++)o.append(g[N],dr()),Yt.nextNode(),p.push({type:2,index:++a});o.append(g[M],dr())}}}else if(o.nodeType===8)if(o.data===Wr)p.push({type:2,index:a});else{let g=-1;for(;(g=o.data.indexOf(ut,g+1))!==-1;)p.push({type:7,index:a}),g+=ut.length-1}a++}}static createElement(t,e){let r=Ht.createElement("template");return r.innerHTML=t,r}};function Ut(i,t,e=i,r){if(t===_e)return t;let o=r!==void 0?e._$Co?.[r]:e._$Cl,a=Ae(t)?void 0:t._$litDirective$;return o?.constructor!==a&&(o?._$AO?.(!1),a===void 0?o=void 0:(o=new a(i),o._$AT(i,e,r)),r!==void 0?(e._$Co??(e._$Co=[]))[r]=o:e._$Cl=o),o!==void 0&&(t=Ut(i,o._$AS(i,t.values),o,r)),t}var pr=class{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){let{el:{content:e},parts:r}=this._$AD,o=(t?.creationScope??Ht).importNode(e,!0);Yt.currentNode=o;let a=Yt.nextNode(),n=0,m=0,p=r[0];for(;p!==void 0;){if(n===p.index){let y;p.type===2?y=new Se(a,a.nextSibling,this,t):p.type===1?y=new p.ctor(a,p.name,p.strings,this,t):p.type===6&&(y=new ur(a,this,t)),this._$AV.push(y),p=r[++m]}n!==p?.index&&(a=Yt.nextNode(),n++)}return Yt.currentNode=Ht,o}p(t){let e=0;for(let r of this._$AV)r!==void 0&&(r.strings!==void 0?(r._$AI(t,r,e),e+=r.strings.length-2):r._$AI(t[e])),e++}},Se=class i{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,r,o){this.type=2,this._$AH=$,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=r,this.options=o,this._$Cv=o?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode,e=this._$AM;return e!==void 0&&t?.nodeType===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=Ut(this,t,e),Ae(t)?t===$||t==null||t===""?(this._$AH!==$&&this._$AR(),this._$AH=$):t!==this._$AH&&t!==_e&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):$o(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==$&&Ae(this._$AH)?this._$AA.nextSibling.data=t:this.T(Ht.createTextNode(t)),this._$AH=t}$(t){let{values:e,_$litType$:r}=t,o=typeof r=="number"?this._$AC(t):(r.el===void 0&&(r.el=Ee.createElement(No(r.h,r.h[0]),this.options)),r);if(this._$AH?._$AD===o)this._$AH.p(e);else{let a=new pr(o,this),n=a.u(this.options);a.p(e),this.T(n),this._$AH=a}}_$AC(t){let e=To.get(t.strings);return e===void 0&&To.set(t.strings,e=new Ee(t)),e}k(t){Zr(this._$AH)||(this._$AH=[],this._$AR());let e=this._$AH,r,o=0;for(let a of t)o===e.length?e.push(r=new i(this.O(dr()),this.O(dr()),this,this.options)):r=e[o],r._$AI(a),o++;o<e.length&&(this._$AR(r&&r._$AB.nextSibling,o),e.length=o)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t&&t!==this._$AB;){let r=t.nextSibling;t.remove(),t=r}}setConnected(t){this._$AM===void 0&&(this._$Cv=t,this._$AP?.(t))}},zt=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,r,o,a){this.type=1,this._$AH=$,this._$AN=void 0,this.element=t,this.name=e,this._$AM=o,this.options=a,r.length>2||r[0]!==""||r[1]!==""?(this._$AH=Array(r.length-1).fill(new String),this.strings=r):this._$AH=$}_$AI(t,e=this,r,o){let a=this.strings,n=!1;if(a===void 0)t=Ut(this,t,e,0),n=!Ae(t)||t!==this._$AH&&t!==_e,n&&(this._$AH=t);else{let m=t,p,y;for(t=a[0],p=0;p<a.length-1;p++)y=Ut(this,m[r+p],e,p),y===_e&&(y=this._$AH[p]),n||(n=!Ae(y)||y!==this._$AH[p]),y===$?t=$:t!==$&&(t+=(y??"")+a[p+1]),this._$AH[p]=y}n&&!o&&this.j(t)}j(t){t===$?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}},cr=class extends zt{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===$?void 0:t}},mr=class extends zt{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==$)}},hr=class extends zt{constructor(t,e,r,o,a){super(t,e,r,o,a),this.type=5}_$AI(t,e=this){if((t=Ut(this,t,e,0)??$)===_e)return;let r=this._$AH,o=t===$&&r!==$||t.capture!==r.capture||t.once!==r.once||t.passive!==r.passive,a=t!==$&&(r===$||o);o&&this.element.removeEventListener(this.name,this,r),a&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}},ur=class{constructor(t,e,r){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=r}get _$AU(){return this._$AM._$AU}_$AI(t){Ut(this,t)}},Ro={M:qr,P:ut,A:Wr,C:1,L:Io,R:pr,D:$o,V:Ut,I:Se,H:zt,N:mr,U:hr,B:cr,F:ur},xn=xe.litHtmlPolyfillSupport;xn?.(Ee,Se),(xe.litHtmlVersions??(xe.litHtmlVersions=[])).push("3.3.0");var Jt={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},Pe=i=>(...t)=>({_$litDirective$:i,values:t}),fr=class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,r){this._$Ct=t,this._$AM=e,this._$Ci=r}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};var{I:hx}=Ro;var Oo=i=>i.strings===void 0;var we=(i,t)=>{let e=i._$AN;if(e===void 0)return!1;for(let r of e)r._$AO?.(t,!1),we(r,t);return!0},gr=i=>{let t,e;do{if((t=i._$AM)===void 0)break;e=t._$AN,e.delete(i),i=t}while(e?.size===0)},Do=i=>{for(let t;t=i._$AM;i=t){let e=t._$AN;if(e===void 0)t._$AN=e=new Set;else if(e.has(i))break;e.add(i),En(t)}};function An(i){this._$AN!==void 0?(gr(this),this._$AM=i,Do(this)):this._$AM=i}function _n(i,t=!1,e=0){let r=this._$AH,o=this._$AN;if(o!==void 0&&o.size!==0)if(t)if(Array.isArray(r))for(let a=e;a<r.length;a++)we(r[a],!1),gr(r[a]);else r!=null&&(we(r,!1),gr(r));else we(this,i)}var En=i=>{i.type==Jt.CHILD&&(i._$AP??(i._$AP=_n),i._$AQ??(i._$AQ=An))},te=class extends fr{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,e,r){super._$AT(t,e,r),Do(this),this.isConnected=t._$AU}_$AO(t,e=!0){t!==this.isConnected&&(this.isConnected=t,t?this.reconnected?.():this.disconnected?.()),e&&(we(this,t),gr(this))}setValue(t){if(Oo(this._$Ct))this._$Ct._$AI(t,this);else{let e=[...this._$Ct._$AH];e[this._$Ci]=t,this._$Ct._$AI(e,this,0)}}disconnected(){}reconnected(){}};var yr=new WeakMap,ee=class{constructor(t,e){this.startPaused=!1,this.disabled=!1,this.clients=new Set,this.pendingComplete=!1,this.host=t,this.defaultOptions=e.defaultOptions||{},this.startPaused=!!e.startPaused,this.disabled=!!e.disabled,this.onComplete=e.onComplete,yr.set(this.host,this)}async add(t){this.clients.add(t),this.startPaused&&t.webAnimation?.pause(),this.pendingComplete=!0,await t.finished,this.pendingComplete&&!this.isAnimating&&(this.pendingComplete=!1,this.onComplete?.())}remove(t){this.clients.delete(t)}pause(){this.clients.forEach(t=>t.webAnimation?.pause())}play(){this.clients.forEach(t=>t.webAnimation?.play())}cancel(){this.clients.forEach(t=>t.webAnimation?.cancel()),this.clients.clear()}finish(){this.clients.forEach(t=>t.webAnimation?.finish()),this.clients.clear()}togglePlay(){this.isPlaying?this.pause():this.play()}get isAnimating(){return this.clients.size>0}get isPlaying(){return Array.from(this.clients).some(t=>t.webAnimation?.playState==="running")}async finished(){await Promise.all(Array.from(this.clients).map(t=>t.finished))}};var Vo=0,Qr=new Map,Yo=new WeakSet,Jr=()=>new Promise(i=>requestAnimationFrame(i));var Ho=(i,t)=>{let e=i-t;return e===0?void 0:e},Uo=(i,t)=>{let e=i/t;return e===1?void 0:e},vr={left:(i,t)=>{let e=Ho(i,t);return{value:e,transform:e==null||isNaN(e)?void 0:`translateX(${e}px)`}},top:(i,t)=>{let e=Ho(i,t);return{value:e,transform:e==null||isNaN(e)?void 0:`translateY(${e}px)`}},width:(i,t)=>{let e;t===0&&(t=1,e={width:"1px"});let r=Uo(i,t);return{value:r,overrideFrom:e,transform:r==null||isNaN(r)?void 0:`scaleX(${r})`}},height:(i,t)=>{let e;t===0&&(t=1,e={height:"1px"});let r=Uo(i,t);return{value:r,overrideFrom:e,transform:r==null||isNaN(r)?void 0:`scaleY(${r})`}}},Bo={duration:333,easing:"ease-in-out"},Fo=["left","top","width","height","opacity","color","background"],zo=new WeakMap,br=class extends te{constructor(t){if(super(t),this.t=!1,this.i=null,this.o=null,this.h=!0,this.shouldLog=!1,t.type===Jt.CHILD)throw Error("The `animate` directive must be used in attribute position.");this.createFinished()}createFinished(){this.resolveFinished?.(),this.finished=new Promise(t=>{this.l=t})}async resolveFinished(){this.l?.(),this.l=void 0}render(t){return $}getController(){return yr.get(this.u)}isDisabled(){return this.options.disabled||this.getController()?.disabled}update(t,[e]){let r=this.u===void 0;return r&&(this.u=t.options?.host,this.u.addController(this),this.u.updateComplete.then(o=>this.t=!0),this.element=t.element,zo.set(this.element,this)),this.optionsOrCallback=e,(r||typeof e!="function")&&this.p(e),this.render(e)}p(t){t=t??{};let e=this.getController();e!==void 0&&((t={...e.defaultOptions,...t}).keyframeOptions={...e.defaultOptions.keyframeOptions,...t.keyframeOptions}),t.properties??(t.properties=Fo),this.options=t}m(){let t={},e=this.element.getBoundingClientRect(),r=getComputedStyle(this.element);return this.options.properties.forEach(o=>{let a=e[o]??(vr[o]?void 0:r[o]),n=Number(a);t[o]=isNaN(n)?a+"":n}),t}v(){let t,e=!0;return this.options.guard&&(t=this.options.guard(),e=((r,o)=>{if(Array.isArray(r)){if(Array.isArray(o)&&o.length===r.length&&r.every((a,n)=>a===o[n]))return!1}else if(o===r)return!1;return!0})(t,this._)),this.h=this.t&&!this.isDisabled()&&!this.isAnimating()&&e&&this.element.isConnected,this.h&&(this._=Array.isArray(t)?Array.from(t):t),this.h}hostUpdate(){typeof this.optionsOrCallback=="function"&&this.p(this.optionsOrCallback()),this.v()&&(this.A=this.m(),this.i=this.i??this.element.parentNode,this.o=this.element.nextSibling)}async hostUpdated(){if(!this.h||!this.element.isConnected||this.options.skipInitial&&!this.isHostRendered)return;let t;this.prepare(),await Jr;let e=this.O(),r=this.j(this.options.keyframeOptions,e),o=this.m();if(this.A!==void 0){let{from:a,to:n}=this.N(this.A,o,e);this.log("measured",[this.A,o,a,n]),t=this.calculateKeyframes(a,n)}else{let a=Qr.get(this.options.inId);if(a){Qr.delete(this.options.inId);let{from:n,to:m}=this.N(a,o,e);t=this.calculateKeyframes(n,m),t=this.options.in?[{...this.options.in[0],...t[0]},...this.options.in.slice(1),t[1]]:t,Vo++,t.forEach(p=>p.zIndex=Vo)}else this.options.in&&(t=[...this.options.in,{}])}this.animate(t,r)}resetStyles(){this.P!==void 0&&(this.element.setAttribute("style",this.P??""),this.P=void 0)}commitStyles(){this.P=this.element.getAttribute("style"),this.webAnimation?.commitStyles(),this.webAnimation?.cancel()}reconnected(){}async disconnected(){if(!this.h||(this.options.id!==void 0&&Qr.set(this.options.id,this.A),this.options.out===void 0))return;if(this.prepare(),await Jr(),this.i?.isConnected){let e=this.o&&this.o.parentNode===this.i?this.o:null;if(this.i.insertBefore(this.element,e),this.options.stabilizeOut){let r=this.m();this.log("stabilizing out");let o=this.A.left-r.left,a=this.A.top-r.top;getComputedStyle(this.element).position!=="static"||o===0&&a===0||(this.element.style.position="relative"),o!==0&&(this.element.style.left=o+"px"),a!==0&&(this.element.style.top=a+"px")}}let t=this.j(this.options.keyframeOptions);await this.animate(this.options.out,t),this.element.remove()}prepare(){this.createFinished()}start(){this.options.onStart?.(this)}didFinish(t){t&&this.options.onComplete?.(this),this.A=void 0,this.animatingProperties=void 0,this.frames=void 0,this.resolveFinished()}O(){let t=[];for(let e=this.element.parentNode;e;e=e?.parentNode){let r=zo.get(e);r&&!r.isDisabled()&&r&&t.push(r)}return t}get isHostRendered(){let t=Yo.has(this.u);return t||this.u.updateComplete.then(()=>{Yo.add(this.u)}),t}j(t,e=this.O()){let r={...Bo};return e.forEach(o=>Object.assign(r,o.options.keyframeOptions)),Object.assign(r,t),r}N(t,e,r){t={...t},e={...e};let o=r.map(m=>m.animatingProperties).filter(m=>m!==void 0),a=1,n=1;return o.length>0&&(o.forEach(m=>{m.width&&(a/=m.width),m.height&&(n/=m.height)}),t.left!==void 0&&e.left!==void 0&&(t.left=a*t.left,e.left=a*e.left),t.top!==void 0&&e.top!==void 0&&(t.top=n*t.top,e.top=n*e.top)),{from:t,to:e}}calculateKeyframes(t,e,r=!1){let o={},a={},n=!1,m={};for(let p in e){let y=t[p],b=e[p];if(p in vr){let g=vr[p];if(y===void 0||b===void 0)continue;let M=g(y,b);M.transform!==void 0&&(m[p]=M.value,n=!0,o.transform=`${o.transform??""} ${M.transform}`,M.overrideFrom!==void 0&&Object.assign(o,M.overrideFrom))}else y!==b&&y!==void 0&&b!==void 0&&(n=!0,o[p]=y,a[p]=b)}return o.transformOrigin=a.transformOrigin=r?"center center":"top left",this.animatingProperties=m,n?[o,a]:void 0}async animate(t,e=this.options.keyframeOptions){this.start(),this.frames=t;let r=!1;if(!this.isAnimating()&&!this.isDisabled()&&(this.options.onFrames&&(this.frames=t=this.options.onFrames(this),this.log("modified frames",t)),t!==void 0)){this.log("animate",[t,e]),r=!0,this.webAnimation=this.element.animate(t,e);let o=this.getController();o?.add(this);try{await this.webAnimation.finished}catch{}o?.remove(this)}return this.didFinish(r),r}isAnimating(){return this.webAnimation?.playState==="running"||this.webAnimation?.pending}log(t,e){this.shouldLog&&!this.isDisabled()&&console.log(t,this.options.id,e)}},At=Pe(br);var Sn=["top","right","bottom","left"],Cr=class extends te{constructor(t){if(super(t),t.type!==Jt.ELEMENT)throw Error("The `position` directive must be used in attribute position.")}render(t,e){return $}update(t,[e,r]){return this.u===void 0&&(this.u=t.options?.host,this.u.addController(this)),this.S=t.element,this.C=e,this.F=r??["left","top","width","height"],this.render(e,r)}hostUpdated(){this.$()}$(){let t=typeof this.C=="function"?this.C():this.C?.value,e=t.offsetParent;if(t===void 0||!e)return;let r=t.getBoundingClientRect(),o=e.getBoundingClientRect();this.F?.forEach(a=>{let n=Sn.includes(a)?r[a]-o[a]:r[a];this.S.style[a]=n+"px"})}},Pn=Pe(Cr);var K=class extends u{constructor(){super();this.vaultManagerContext=null;this.isEditMode=!1;this.deletePaymentMethodId=null;this.isDeleting=!1;this.errorMessage="";this.animationDuration=300;new ee(this,{defaultOptions:{keyframeOptions:{duration:Number(getComputedStyle(document.documentElement).getPropertyValue("--primer-animation-duration").trim().replace("ms","")),easing:getComputedStyle(document.documentElement).getPropertyValue("--primer-animation-easing").trim()}}})}getAnimationConfig(){return{keyframeOptions:{duration:this.animationDuration,easing:getComputedStyle(document.documentElement).getPropertyValue("--primer-animation-easing").trim(),fill:"both"}}}handleToggleEditMode(e){this.isEditMode=e.detail,this.deletePaymentMethodId=null}handleDeletePaymentMethod(e){this.deletePaymentMethodId=e.detail}handleCancelDelete(){this.deletePaymentMethodId=null}async handleConfirmDelete(){if(!this.vaultManagerContext?.deleteVaultedPaymentMethod||!this.deletePaymentMethodId){this.errorMessage=C("something_went_wrong_error",{id:"something_went_wrong_error"});return}try{this.isDeleting=!0,await this.vaultManagerContext.deleteVaultedPaymentMethod(this.deletePaymentMethodId),this.deletePaymentMethodId=null}catch(e){this.errorMessage=e instanceof Error?e.message:C("something_went_wrong_error",{id:"something_went_wrong_error"})}finally{this.isDeleting=!1}}handlePaymentError(e){let r=e.detail?.error;this.errorMessage=r instanceof Error?r.message:C("payment_processing_error",{id:"payment_processing_error"})}handleCloseError(){this.errorMessage=""}getPaymentMethodName(e){if(!this.vaultManagerContext)return"";let r=this.vaultManagerContext.vaultedPaymentMethods.find(o=>o.id===e);if(!r)return"";try{return _o(r).description||""}catch{return""}}renderLoadingOverlay(){return d`
1970
- <div
1971
- class="loading-overlay"
1972
- ${At({...this.getAnimationConfig(),properties:["opacity"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})}
1973
- >
1974
- <primer-spinner
1975
- size="medium"
1976
- color="var(--primer-color-loader)"
1977
- ></primer-spinner>
1978
- </div>
1979
- `}renderDeleteConfirmation(){if(!this.deletePaymentMethodId)return c;let e=this.getPaymentMethodName(this.deletePaymentMethodId);return d`
1980
- <div class="delete-confirmation-container">
1981
- <primer-vault-delete-confirmation
1982
- .isDeleting=${this.isDeleting}
1983
- .paymentMethodId=${this.deletePaymentMethodId}
1984
- .paymentMethodName=${e}
1985
- @confirm-delete=${this.handleConfirmDelete}
1986
- @cancel-delete=${this.handleCancelDelete}
1987
- ${At({...this.getAnimationConfig(),properties:["opacity"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})}
1988
- ></primer-vault-delete-confirmation>
1989
- </div>
1990
- `}renderPaymentMethodItem(e){return this.deletePaymentMethodId===e.id?c:d`
1991
- <primer-vault-payment-method-item
1992
- .paymentMethod=${e}
1993
- .isEditMode=${this.isEditMode}
1994
- @delete-payment-method=${this.handleDeletePaymentMethod}
1995
- ${At({...this.getAnimationConfig(),properties:["opacity"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})}
1996
- ></primer-vault-payment-method-item>
1997
- `}renderPaymentMethodList(){let e=this.vaultManagerContext?.vaultedPaymentMethods||[],r=!this.isEditMode&&e.length>0&&!this.deletePaymentMethodId;return d`
1998
- <div class="payment-methods-list">
1999
- ${e.map(o=>this.renderPaymentMethodItem(o))}
2000
- ${w(r,()=>d`
2001
- <div class="submit-button-container">
2002
- <primer-vault-payment-submit
2003
- class="submit-button"
2004
- @primer-vault-payment-error=${this.handlePaymentError}
2005
- ${At({...this.getAnimationConfig(),properties:["opacity"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})}
2006
- ></primer-vault-payment-submit>
2007
- </div>
2008
- `,()=>c)}
2009
- </div>
2010
- `}render(){if(!this.vaultManagerContext?.enabled)return c;let e=this.vaultManagerContext.vaultedPaymentMethods.length>0,r=this.vaultManagerContext.isLoading,o=this.vaultManagerContext.isUpdating;return d`
2011
- <div class="vault-manager ${o?"is-updating":""}">
2012
- <primer-vault-manager-header
2013
- .isEditMode=${this.isEditMode}
2014
- .hasPaymentMethods=${e}
2015
- @toggle-edit-mode=${this.handleToggleEditMode}
2016
- ></primer-vault-manager-header>
2017
-
2018
- ${w(this.errorMessage,()=>d`
2019
- <primer-vault-error-message
2020
- .errorMessage=${this.errorMessage}
2021
- @close-error=${this.handleCloseError}
2022
- ${At({...this.getAnimationConfig(),properties:["opacity"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})}
2023
- ></primer-vault-error-message>
2024
- `,()=>c)}
2025
-
2026
- <div class="vault-manager-content">
2027
- ${w(!r&&!e,()=>d`
2028
- <div class="content-container">
2029
- <primer-vault-empty-state
2030
- ${At({...this.getAnimationConfig(),properties:["opacity"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})}
2031
- ></primer-vault-empty-state>
2032
- </div>
2033
- `,()=>c)}
2034
- ${w(!r&&e,()=>d`
2035
- <div class="content-container">
2036
- ${w(this.deletePaymentMethodId,()=>this.renderDeleteConfirmation(),()=>this.renderPaymentMethodList())}
2037
- </div>
2038
- `,()=>c)}
2039
- </div>
2040
-
2041
- ${w(o,()=>this.renderLoadingOverlay(),()=>c)}
2042
- </div>
2043
- `}};K.styles=[S,Eo],s([v({context:qt,subscribe:!0}),l({type:Object,attribute:!1})],K.prototype,"vaultManagerContext",2),s([_()],K.prototype,"isEditMode",2),s([_()],K.prototype,"deletePaymentMethodId",2),s([_()],K.prototype,"isDeleting",2),s([_()],K.prototype,"errorMessage",2),s([l({type:Number})],K.prototype,"animationDuration",2),K=s([f("primer-vault-manager"),T()],K);var kn=wn({tagName:"primer-vault-manager",elementClass:K,react:Mn});export{ps as AchPayment,ns as Button,hs as CardForm,gs as CardFormSubmit,As as CardNetworkSelector,Pa as CheckoutState,ka as Collapsable,La as Dialog,Ds as DynamicPayment,Ra as ErrorMessage,Hs as ErrorMessageContainer,Va as Icon,Ba as Input,Ms as InputCardExpiry,Ss as InputCardHolderName,Is as InputCardNumber,$s as InputCvv,ja as InputError,Wa as InputLabel,Qa as InputWrapper,Bs as Klarna,js as NativePayment,Ws as PaymentMethod,es as Portal,_a as PrimerCheckout,Qs as PrimerCheckoutComplete,en as PrimerCheckoutError,an as PrimerMain,ln as RedirectPayment,cn as ShowOtherPayments,os as Spinner,kn as VaultManager};
2044
- /*! Bundled license information:
2045
-
2046
- @lit/context/lib/context-request-event.js:
2047
- (**
2048
- * @license
2049
- * Copyright 2021 Google LLC
2050
- * SPDX-License-Identifier: BSD-3-Clause
2051
- *)
2052
-
2053
- @lit/context/lib/create-context.js:
2054
- (**
2055
- * @license
2056
- * Copyright 2021 Google LLC
2057
- * SPDX-License-Identifier: BSD-3-Clause
2058
- *)
2059
-
2060
- @lit/context/lib/controllers/context-consumer.js:
2061
- (**
2062
- * @license
2063
- * Copyright 2021 Google LLC
2064
- * SPDX-License-Identifier: BSD-3-Clause
2065
- *)
2066
-
2067
- @lit/context/lib/value-notifier.js:
2068
- (**
2069
- * @license
2070
- * Copyright 2021 Google LLC
2071
- * SPDX-License-Identifier: BSD-3-Clause
2072
- *)
2073
-
2074
- @lit/context/lib/controllers/context-provider.js:
2075
- (**
2076
- * @license
2077
- * Copyright 2021 Google LLC
2078
- * SPDX-License-Identifier: BSD-3-Clause
2079
- *)
2080
-
2081
- @lit/context/lib/context-root.js:
2082
- (**
2083
- * @license
2084
- * Copyright 2021 Google LLC
2085
- * SPDX-License-Identifier: BSD-3-Clause
2086
- *)
2087
-
2088
- @lit/context/lib/decorators/provide.js:
2089
- (**
2090
- * @license
2091
- * Copyright 2017 Google LLC
2092
- * SPDX-License-Identifier: BSD-3-Clause
2093
- *)
2094
-
2095
- @lit/context/lib/decorators/consume.js:
2096
- (**
2097
- * @license
2098
- * Copyright 2022 Google LLC
2099
- * SPDX-License-Identifier: BSD-3-Clause
2100
- *)
2101
-
2102
- @lit/reactive-element/css-tag.js:
2103
- (**
2104
- * @license
2105
- * Copyright 2019 Google LLC
2106
- * SPDX-License-Identifier: BSD-3-Clause
2107
- *)
2108
-
2109
- @lit/reactive-element/reactive-element.js:
2110
- (**
2111
- * @license
2112
- * Copyright 2017 Google LLC
2113
- * SPDX-License-Identifier: BSD-3-Clause
2114
- *)
2115
-
2116
- @lit/task/task.js:
2117
- (**
2118
- * @license
2119
- * Copyright 2017 Google LLC
2120
- * SPDX-License-Identifier: BSD-3-Clause
2121
- *)
2122
-
2123
- @lit/localize/internal/locale-status-event.js:
2124
- (**
2125
- * @license
2126
- * Copyright 2021 Google LLC
2127
- * SPDX-License-Identifier: BSD-3-Clause
2128
- *)
2129
-
2130
- @lit/localize/internal/str-tag.js:
2131
- (**
2132
- * @license
2133
- * Copyright 2021 Google LLC
2134
- * SPDX-License-Identifier: BSD-3-Clause
2135
- *)
2136
-
2137
- @lit/localize/internal/types.js:
2138
- (**
2139
- * @license
2140
- * Copyright 2021 Google LLC
2141
- * SPDX-License-Identifier: BSD-3-Clause
2142
- *)
2143
-
2144
- @lit/localize/internal/default-msg.js:
2145
- (**
2146
- * @license
2147
- * Copyright 2021 Google LLC
2148
- * SPDX-License-Identifier: BSD-3-Clause
2149
- *)
2150
-
2151
- @lit/localize/internal/localized-controller.js:
2152
- (**
2153
- * @license
2154
- * Copyright 2021 Google LLC
2155
- * SPDX-License-Identifier: BSD-3-Clause
2156
- *)
2157
-
2158
- @lit/localize/internal/localized-decorator.js:
2159
- (**
2160
- * @license
2161
- * Copyright 2021 Google LLC
2162
- * SPDX-License-Identifier: BSD-3-Clause
2163
- *)
2164
-
2165
- @lit/localize/internal/deferred.js:
2166
- (**
2167
- * @license
2168
- * Copyright 2020 Google LLC
2169
- * SPDX-License-Identifier: BSD-3-Clause
2170
- *)
2171
-
2172
- @lit/localize/internal/fnv1a64.js:
2173
- (**
2174
- * @license
2175
- * Copyright 2014 Travis Webb
2176
- * SPDX-License-Identifier: MIT
2177
- *)
2178
-
2179
- @lit/localize/internal/id-generation.js:
2180
- (**
2181
- * @license
2182
- * Copyright 2020 Google LLC
2183
- * SPDX-License-Identifier: BSD-3-Clause
2184
- *)
2185
-
2186
- @lit/localize/internal/runtime-msg.js:
2187
- (**
2188
- * @license
2189
- * Copyright 2021 Google LLC
2190
- * SPDX-License-Identifier: BSD-3-Clause
2191
- *)
2192
-
2193
- @lit/localize/init/runtime.js:
2194
- (**
2195
- * @license
2196
- * Copyright 2021 Google LLC
2197
- * SPDX-License-Identifier: BSD-3-Clause
2198
- *)
2199
-
2200
- @lit/localize/init/transform.js:
2201
- (**
2202
- * @license
2203
- * Copyright 2021 Google LLC
2204
- * SPDX-License-Identifier: BSD-3-Clause
2205
- *)
2206
-
2207
- @lit/localize/lit-localize.js:
2208
- (**
2209
- * @license
2210
- * Copyright 2020 Google LLC
2211
- * SPDX-License-Identifier: BSD-3-Clause
2212
- *)
2213
-
2214
- lit-html/lit-html.js:
2215
- (**
2216
- * @license
2217
- * Copyright 2017 Google LLC
2218
- * SPDX-License-Identifier: BSD-3-Clause
2219
- *)
2220
-
2221
- lit-element/lit-element.js:
2222
- (**
2223
- * @license
2224
- * Copyright 2017 Google LLC
2225
- * SPDX-License-Identifier: BSD-3-Clause
2226
- *)
2227
-
2228
- lit-html/is-server.js:
2229
- (**
2230
- * @license
2231
- * Copyright 2022 Google LLC
2232
- * SPDX-License-Identifier: BSD-3-Clause
2233
- *)
2234
-
2235
- @lit/reactive-element/decorators/custom-element.js:
2236
- (**
2237
- * @license
2238
- * Copyright 2017 Google LLC
2239
- * SPDX-License-Identifier: BSD-3-Clause
2240
- *)
2241
-
2242
- @lit/reactive-element/decorators/property.js:
2243
- (**
2244
- * @license
2245
- * Copyright 2017 Google LLC
2246
- * SPDX-License-Identifier: BSD-3-Clause
2247
- *)
2248
-
2249
- @lit/reactive-element/decorators/state.js:
2250
- (**
2251
- * @license
2252
- * Copyright 2017 Google LLC
2253
- * SPDX-License-Identifier: BSD-3-Clause
2254
- *)
2255
-
2256
- @lit/reactive-element/decorators/event-options.js:
2257
- (**
2258
- * @license
2259
- * Copyright 2017 Google LLC
2260
- * SPDX-License-Identifier: BSD-3-Clause
2261
- *)
2262
-
2263
- @lit/reactive-element/decorators/base.js:
2264
- (**
2265
- * @license
2266
- * Copyright 2017 Google LLC
2267
- * SPDX-License-Identifier: BSD-3-Clause
2268
- *)
2269
-
2270
- @lit/reactive-element/decorators/query.js:
2271
- (**
2272
- * @license
2273
- * Copyright 2017 Google LLC
2274
- * SPDX-License-Identifier: BSD-3-Clause
2275
- *)
2276
-
2277
- @lit/reactive-element/decorators/query-all.js:
2278
- (**
2279
- * @license
2280
- * Copyright 2017 Google LLC
2281
- * SPDX-License-Identifier: BSD-3-Clause
2282
- *)
2283
-
2284
- @lit/reactive-element/decorators/query-async.js:
2285
- (**
2286
- * @license
2287
- * Copyright 2017 Google LLC
2288
- * SPDX-License-Identifier: BSD-3-Clause
2289
- *)
2290
-
2291
- @lit/reactive-element/decorators/query-assigned-elements.js:
2292
- (**
2293
- * @license
2294
- * Copyright 2021 Google LLC
2295
- * SPDX-License-Identifier: BSD-3-Clause
2296
- *)
2297
-
2298
- @lit/reactive-element/decorators/query-assigned-nodes.js:
2299
- (**
2300
- * @license
2301
- * Copyright 2017 Google LLC
2302
- * SPDX-License-Identifier: BSD-3-Clause
2303
- *)
2304
-
2305
- lit-html/directives/when.js:
2306
- (**
2307
- * @license
2308
- * Copyright 2021 Google LLC
2309
- * SPDX-License-Identifier: BSD-3-Clause
2310
- *)
2311
-
2312
- lit-html/directive.js:
2313
- (**
2314
- * @license
2315
- * Copyright 2017 Google LLC
2316
- * SPDX-License-Identifier: BSD-3-Clause
2317
- *)
2318
-
2319
- lit-html/directives/class-map.js:
2320
- (**
2321
- * @license
2322
- * Copyright 2018 Google LLC
2323
- * SPDX-License-Identifier: BSD-3-Clause
2324
- *)
2325
-
2326
- lit-html/directive-helpers.js:
2327
- (**
2328
- * @license
2329
- * Copyright 2020 Google LLC
2330
- * SPDX-License-Identifier: BSD-3-Clause
2331
- *)
2332
-
2333
- lit-html/async-directive.js:
2334
- (**
2335
- * @license
2336
- * Copyright 2017 Google LLC
2337
- * SPDX-License-Identifier: BSD-3-Clause
2338
- *)
2339
-
2340
- lit-html/directives/ref.js:
2341
- (**
2342
- * @license
2343
- * Copyright 2020 Google LLC
2344
- * SPDX-License-Identifier: BSD-3-Clause
2345
- *)
2346
-
2347
- lit-html/lit-html.js:
2348
- (**
2349
- * @license
2350
- * Copyright 2017 Google LLC
2351
- * SPDX-License-Identifier: BSD-3-Clause
2352
- *)
2353
-
2354
- lit-html/directive.js:
2355
- (**
2356
- * @license
2357
- * Copyright 2017 Google LLC
2358
- * SPDX-License-Identifier: BSD-3-Clause
2359
- *)
2360
-
2361
- lit-html/directive-helpers.js:
2362
- (**
2363
- * @license
2364
- * Copyright 2020 Google LLC
2365
- * SPDX-License-Identifier: BSD-3-Clause
2366
- *)
2367
-
2368
- lit-html/async-directive.js:
2369
- (**
2370
- * @license
2371
- * Copyright 2017 Google LLC
2372
- * SPDX-License-Identifier: BSD-3-Clause
2373
- *)
2374
- */
121
+ `,t.shadowRoot?t.shadowRoot.appendChild(e):t.appendChild(e)}}function ma(i){return i?{paddingHorizontal:0,placeholder:{color:i.getPropertyValue("--primer-color-text-placeholder").trim(),fontSize:i.getPropertyValue("--primer-typography-body-large-size").trim(),fontFamily:i.getPropertyValue("--primer-typography-body-large-font").trim()},height:i.getPropertyValue("--primer-typography-body-large-line-height").trim(),fontSize:i.getPropertyValue("--primer-typography-body-large-size").trim(),fontFamily:i.getPropertyValue("--primer-typography-body-large-font").trim(),color:i.getPropertyValue("--primer-color-text-primary").trim()}:null}function ha(i,t){return i.active===t.active&&i.dirty===t.dirty&&i.error===t.error&&i.errorCode===t.errorCode&&i.submitted===t.submitted&&i.touched===t.touched&&i.valid===t.valid}var Mr=class{constructor(t,e){this._isFocused=!1;this._meta={active:!1,dirty:!1,error:null,errorCode:null,submitted:!1,touched:!1,valid:!1};this._hostedInput=null;this._standardInput=null;this.host=t,this.config=e,this.host.addController(this),this.setupTask=new I(this.host,{args:()=>[this.getHostedInput()],task:this.setupHostedInput.bind(this)}),this.host.addEventListener("wrapper-click",()=>{this.focusInput()})}focusInput(){this._hostedInput?this._hostedInput.focus():this._standardInput&&this._standardInput.focus()}getHostedInput(){let{type:t}=this.config,e=this.host.cardFormContext;return e?{cardNumber:e.cardNumberInput,cvv:e.cvvInput,expire:e.expiryInput,cardholderName:e.cardHolderNameInput??"cardholderName"}[t]:void 0}async setupHostedInput([t]){if(!t)return T;await this.host.updateComplete;let e=this.getTargetContainer();return e?t==="cardholderName"?this.setupStandardInput(e):this.setupHostedIframeInput(t,e):T}getTargetContainer(){return this.host.renderRoot.querySelector(this.config.containerSelector)}setupStandardInput(t){let e=document.createElement("input");return e.type="text",e.placeholder=this.host.placeholder,ua(e,this.host),(this.host.ariaLabel||this.host.label)&&e.setAttribute("aria-label",this.host.ariaLabel??this.host.label),this.setupInputEventListeners(e),t.innerHTML="",t.appendChild(e),this._standardInput=e,!0}setupInputEventListeners(t){t.addEventListener("input",e=>{let r=e.target;this.config.onInput?.(r.value)}),t.addEventListener("focus",()=>{this._isFocused=!0,this.host.requestUpdate()}),t.addEventListener("blur",()=>{this._isFocused=!1,this.host.requestUpdate()})}async setupHostedIframeInput(t,e){await new Promise(a=>requestAnimationFrame(()=>a())),this._hostedInput=t;let r=ma(this.host.computedStyles),o=r?{style:{input:{base:r}}}:void 0;return t.addEventListener("focus",()=>{this._isFocused=!0,this.host.requestUpdate()}),t.addEventListener("blur",()=>{this._isFocused=!1,this.host.requestUpdate()}),t.addEventListener("change",a=>{this._meta=a,ha(this._meta,a)&&this.host.requestUpdate()}),await t.render(e,{placeholder:this.host.placeholder,ariaLabel:this.host.ariaLabel,...o}),!0}get isFocused(){return this._isFocused}get meta(){return this._meta}hostConnected(){}hostDisconnected(){this._hostedInput=null,this._standardInput=null}};var j=class extends v{constructor(){super();this.cardFormContext=null;this.computedStyles=null;this._userAssignedProps=new Set;this._internalLabel="";this._internalPlaceholder="";this._internalAriaLabel="";this.handleWrapperClick=()=>{this.hostedInputController.focusInput()};this.hostedInputController={}}getTranslatedValue(e){return e?typeof e=="string"?e:x(e.id,{id:e.id}):""}get label(){return this._userAssignedProps.has("label")?this._internalLabel:this.getTranslatedValue(this.config.translations.label)}set label(e){let r=this.label;e!==""?(this._userAssignedProps.add("label"),this._internalLabel=e):(this._userAssignedProps.delete("label"),this._internalLabel=""),this.requestUpdate("label",r)}get placeholder(){return this._userAssignedProps.has("placeholder")?this._internalPlaceholder:this.getTranslatedValue(this.config.translations.placeholder)}set placeholder(e){let r=this.placeholder;this._userAssignedProps.add("placeholder"),this._internalPlaceholder=e,this.requestUpdate("placeholder",r)}get ariaLabel(){return this._userAssignedProps.has("ariaLabel")?this._internalAriaLabel:this.getTranslatedValue(this.config.translations.ariaLabel)||this.getTranslatedValue(this.config.translations.label)}set ariaLabel(e){let r=this.ariaLabel;e!==""?(this._userAssignedProps.add("ariaLabel"),this._internalAriaLabel=e):(this._userAssignedProps.delete("ariaLabel"),this._internalAriaLabel=""),this.requestUpdate("ariaLabel",r)}childUpdated(){Object.defineProperty(this,"hostedInputController",{value:new Mr(this,{type:this.config.inputType,containerSelector:this.config.containerSelector,onInput:this.config.onInput}),writable:!1,configurable:!1})}getError(){let e=this.hostedInputController.meta;return e.submitted||e.dirty&&e.touched?e.errorCode:null}renderInput(){if(this.hostedInputController.setupTask.status===Te.ERROR)return h;let e=this.getError();return u`<primer-input-wrapper .focusWithin="${this.hostedInputController.isFocused}" .hasError=${!!e} @wrapper-click="${this.handleWrapperClick}" >${L(!this.cardFormContext?.hideLabels,()=>u`<primer-input-label slot="label" >${this.label}</primer-input-label >`,()=>h)}<div slot="input" class="card-input-slot" id="${this.config.containerSelector.substring(1)}" aria-label="${this.ariaLabel}" ></div>${L(e,()=>u`<primer-input-error slot="error">${x(e,{id:e})}</primer-input-error>`,()=>h)}</primer-input-wrapper>`}};l([C({context:ut,subscribe:!0})],j.prototype,"cardFormContext",2),l([C({context:it,subscribe:!0}),p()],j.prototype,"computedStyles",2),l([p({type:String})],j.prototype,"label",1),l([p({type:String})],j.prototype,"placeholder",1),l([p({type:String,attribute:"aria-label"})],j.prototype,"ariaLabel",1);var fa=g` :host { display: contents; } `;var Oe=g` .card-input-slot { display: flex; } `;var We=class extends j{constructor(){super();this.config={inputType:"cardholderName",containerSelector:"#cardFormName",errorName:"cardholderName",translations:{label:{id:"cardholderNameLabel",defaultMessage:"Cardholder Name"},placeholder:{id:"cardholderNamePlaceholder",defaultMessage:"Name on card"},ariaLabel:{id:"cardholderNameLabel",defaultMessage:"Cardholder Name"}},onInput:e=>this.handleInput(e)};this.childUpdated()}handleInput(e){this.cardFormContext?.setCardholderName?.(e)}render(){return this.renderInput()}};We.styles=[M,Oe,fa],We=l([b("primer-input-card-holder-name"),R()],We);var Tl=Pl({tagName:"primer-input-card-holder-name",elementClass:We,react:wl});import{createComponent as Ml}from"@lit/react";import kl from"react";var ya=g` :host { display: contents; } `;var Je=class extends j{constructor(){super();this.config={inputType:"expire",containerSelector:"#expiry",errorName:"expiryDate-card",translations:{label:{id:"cardExpiry",defaultMessage:"Expiry Date"},placeholder:{id:"cardExpiryPlaceholder",defaultMessage:"MM/YY"},ariaLabel:{id:"cardExpiry",defaultMessage:"Expiry Date"}}};this.childUpdated()}render(){return this.renderInput()}};Je.styles=[M,Oe,ya],Je=l([b("primer-input-card-expiry"),R()],Je);var Nl=Ml({tagName:"primer-input-card-expiry",elementClass:Je,react:kl});import{createComponent as Il}from"@lit/react";import Ll from"react";var ga=g` :host { display: contents; } `;var Ze=class extends j{constructor(){super();this.config={inputType:"cvv",containerSelector:"#cvv",errorName:"cvv-card",translations:{label:"CVV",placeholder:"123"}};this.childUpdated()}render(){return this.renderInput()}};Ze.styles=[M,Oe,ga],Ze=l([b("primer-input-cvv"),R()],Ze);var Ol=Il({tagName:"primer-input-cvv",elementClass:Ze,react:Ll});import{createComponent as Rl}from"@lit/react";import Dl from"react";var va=g` :host { display: contents; } .card-number-container { display: flex; align-items: center; width: 100%; position: relative; gap: var(--primer-space-small); } #cardNumber { flex: 1; display: flex; width: 100%; } .network-selector-container { display: flex; align-items: center; z-index: 2; } `;var Xe=class extends j{constructor(){super();this.config={inputType:"cardNumber",containerSelector:"#cardNumber",errorName:"cardNumber-card",translations:{label:{id:"cardNumber",defaultMessage:"Card Number"},placeholder:"4111 1111 1111 1111",ariaLabel:{id:"cardNumber",defaultMessage:"Card Number"}}};this.handleNetworkSelected=e=>{let{network:r}=e.detail;this.cardFormContext&&this.cardFormContext.setCardNetwork(r)};this.childUpdated()}renderInput(){if(this.hostedInputController.setupTask.status===Te.ERROR)return h;let e=this.getError();return u`<primer-input-wrapper .focusWithin="${this.hostedInputController.isFocused}" .hasError=${!!e} >${L(!this.cardFormContext?.hideLabels,()=>u`<primer-input-label slot="label" >${this.label}</primer-input-label >`,()=>h)}<div slot="input" class="card-number-container" aria-label="${this.ariaLabel}" ><div id="${this.config.containerSelector.substring(1)}"></div><div class="network-selector-container"><primer-card-network-selector @network-selected=${this.handleNetworkSelected} ></primer-card-network-selector></div></div>${L(e,r=>u`<primer-input-error slot="error">${x(r,{id:r})}</primer-input-error>`,()=>h)}</primer-input-wrapper>`}render(){return this.renderInput()}};Xe.styles=[M,Oe,va],Xe=l([b("primer-input-card-number"),R()],Xe);var $l=Rl({tagName:"primer-input-number",elementClass:Xe,react:Dl});import{createComponent as Yl}from"@lit/react";import Vl from"react";var ba=g` :host { height: calc( ${ae(se)} + calc(2 * var(--primer-space-medium)) ); display: flex; /* Default value for the background color CSS variable */ --dynamic-payment-button-bg-color: var( --primer-color-background-outlined-default ); } primer-button { width: 100%; height: 100%; } primer-button::part(button) { background-color: var(--dynamic-payment-button-bg-color); border: 1px solid var(--primer-color-border-outlined-default); color: var(--primer-color-text-primary); flex: 1; padding: 1px; } .image-container { display: flex; justify-content: center; height: 100%; } /* Target the img specifically inside our component */ img { height: 100%; } `;function Dt(i){return i.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g,(t,e)=>e.toUpperCase())}var te=class extends v{constructor(){super(...arguments);this.paymentManagers=new Map;this.sdkState=null;this.headlessUtils=null;this.open=!1;this._paymentMethodManagerTask=new I(this,{task:([e,r])=>!e||!r?T:r.get(e)?.manager,args:()=>[this.paymentMethod?.type,this.paymentManagers]});this._getAssetsTask=new I(this,{task:([e,r])=>{if(!e||!r)return T;let o=r.getPaymentMethodConfiguration(e);return o?{backgroundColor:o.displayMetadata.button.backgroundColor.colored,name:o.name,displayName:this._legacyGetButtonLabel(o.displayMetadata.button.text),iconUrl:o.displayMetadata.button.iconUrl.colored||o.displayMetadata.button.iconUrl.light||o.displayMetadata.button.iconUrl.dark}:T},args:()=>[this.paymentMethod?.type,this.headlessUtils]});this._setupTasks=new I(this,{task:([e,r])=>!e||!r?T:{paymentMethodManager:e,assetsConfig:r},args:()=>[this._paymentMethodManagerTask.value,this._getAssetsTask.value]})}_legacyGetButtonLabel(e){if(!e)return;let r=e?Dt(e):"";return r==="payWith"&&(r="pay_with"),x(r,{id:r})}start(){this._paymentMethodManagerTask.value&&(this.open=!0)}renderDialog(){return this.open?u`<primer-portal><primer-dialog @primer-dialog-close="${()=>this.open=!1}"><primer-ach-payment .paymentMethod=${this.paymentMethod} @primer-ach-error=${()=>this.open=!1} @primer-ach-mandate-confirmed=${()=>this.open=!1} @primer-ach-mandate-declined=${()=>this.open=!1} ></primer-ach-payment></primer-dialog></primer-portal>`:h}render(){return this._setupTasks.render({error:()=>h,complete:({assetsConfig:e})=>(this.style.setProperty("--dynamic-payment-button-bg-color",e.backgroundColor),u`<primer-button @click="${()=>this.start()}" class=${F({loading:!!this.sdkState?.isProcessing,reverse:!0})} title="${x("pay_with",{id:"pay_with"})} ${e.name}" ><span class="image-container"><img src="${e.iconUrl}" alt="${e.name}" /></span>${e.displayName}</primer-button>${this.renderDialog()} `)})}};te.styles=[M,ba],l([p({type:Object})],te.prototype,"paymentMethod",2),l([C({context:G,subscribe:!0})],te.prototype,"paymentManagers",2),l([C({context:V,subscribe:!0})],te.prototype,"sdkState",2),l([C({context:K,subscribe:!0})],te.prototype,"headlessUtils",2),l([S()],te.prototype,"open",2),te=l([b("primer-dynamic-payment"),R()],te);var Ul=Yl({tagName:"primer-dynamic-payment",elementClass:te,react:Vl});import{createComponent as Hl}from"@lit/react";import Bl from"react";var Ca=g` :host { display: block; width: 100%; } `;var _e=class extends v{constructor(){super(...arguments);this.showProcessingErrors=!0}get shouldShowError(){return!this.sdkState||this.sdkState.isProcessing?!1:!!(this.sdkState.failure&&this.showProcessingErrors)}render(){return this.sdkState?u`<primer-error-message message="${x(this.sdkState.failure?.message??"",{id:"tokenizationError"})}" ?visible="${this.shouldShowError}" ></primer-error-message>`:h}};_e.styles=[Ca],l([C({context:V,subscribe:!0}),S()],_e.prototype,"sdkState",2),l([p({type:Boolean,attribute:"show-processing-errors"})],_e.prototype,"showProcessingErrors",2),_e=l([b("primer-error-message-container")],_e);var zl=Hl({tagName:"primer-error-message-container",elementClass:_e,react:Bl});import{createComponent as Fl}from"@lit/react";import jl from"react";var Ea=g` :host { display: contents; } .klarna-container { display: flex; flex-direction: column; width: 100%; transition: all var(--primer-animation-duration) var(--primer-animation-easing); } .klarna-container.expanded { border-radius: var(--primer-radius-medium); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); background-color: var(--primer-color-background-outlined-default); border: 1px solid var(--primer-color-border-outlined-default); padding: var(--primer-space-large); } .klarna-button-header { padding: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--primer-space-small); } .klarna-accordion-icon { position: absolute; right: var(--primer-space-medium); font-size: var(--primer-typography-body-small-size); font-weight: var(--primer-typography-title-large-weight); color: var(--primer-color-text-secondary); transition: all var(--primer-animation-duration) var(--primer-animation-easing); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: var(--primer-space-small); } .klarna-accordion-icon.expanded { transform: rotate(180deg); } .klarna-expanded-content { width: 100%; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--primer-animation-duration) var(--primer-animation-easing); } .klarna-expanded-content.visible { margin-top: var(--primer-space-large); border-top: 1px solid var(--primer-color-border-outlined-default); grid-template-rows: 1fr; } .klarna-accordion-content { overflow: hidden; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .category-selection { display: flex; flex-wrap: wrap; gap: var(--primer-space-small); margin: var(--primer-space-large) 0; } .category-button { padding: var(--primer-space-medium) var(--primer-space-large); border-radius: var(--primer-radius-base); background-color: var(--primer-color-background-outlined-loading); border: 1px solid var(--primer-color-border-outlined-default); font-size: var(--primer-typography-body-medium-size); cursor: pointer; transition: all var(--primer-animation-duration) var(--primer-animation-easing); flex: 1; min-width: 100px; text-align: center; } .category-button.selected { background-color: var(--primer-color-background-outlined-default); border-color: var(--primer-color-brand); color: var(--primer-color-brand); font-weight: var(--primer-typography-title-large-weight); } .category-button:hover:not(.selected):not(:disabled) { background-color: var(--primer-color-background-outlined-hover); } .category-button:disabled { background-color: var(--primer-color-background-outlined-disabled); border-color: var(--primer-color-border-outlined-disabled); color: var(--primer-color-text-disabled); cursor: not-allowed; } .klarna-category-container { min-height: 74px; width: 100%; border-radius: var(--primer-radius-small); border: 1px solid var(--primer-color-border-outlined-default); background-color: var(--primer-color-background-outlined-default); padding: var(--primer-space-medium); margin-bottom: var(--primer-space-large); transition: height var(--primer-animation-duration) var(--primer-animation-easing); overflow: hidden; } .klarna-button::part(button) { display: flex; flex: 1; gap: var(--primer-space-small); height: calc( ${ae(se)} + calc(2 * var(--primer-space-medium)) ); width: 100%; } .klarna-button primer-icon { margin-right: var(--primer-space-medium); } .klarna-button:hover { background-color: var(--primer-color-background-outlined-hover); border-color: var(--primer-color-border-outlined-hover); } .klarna-pay-button { padding: var(--primer-space-medium) var(--primer-space-large); display: flex; align-items: center; justify-content: center; border-radius: var(--primer-radius-small); background-color: var(--primer-color-brand); color: var(--primer-color-background-outlined-default); border: none; font-size: var(--primer-typography-body-medium-size); font-weight: var(--primer-typography-body-medium-weight); width: 100%; cursor: pointer; transition: all var(--primer-animation-duration) var(--primer-animation-easing); } .klarna-pay-button:hover:not(.disabled) { filter: brightness(105%); } .klarna-pay-button.loading { opacity: 0.7; pointer-events: none; } .klarna-pay-button.disabled { background-color: var(--primer-color-background-outlined-disabled); border-color: var(--primer-color-border-outlined-disabled); color: var(--primer-color-text-disabled); cursor: not-allowed; } .loading { text-align: center; font-size: var(--primer-typography-body-medium-size); color: var(--primer-color-text-secondary); padding: var(--primer-space-medium); } .error { color: var(--primer-color-text-negative); font-size: var(--primer-typography-body-medium-size); padding: var(--primer-space-medium); text-align: center; border: 1px solid var(--primer-color-border-outlined-error); background-color: var(--primer-color-background-outlined-default); border-radius: var(--primer-radius-small); } /* Overall disabled state for entire Klarna component */ :host([disabled]) { cursor: not-allowed; } :host([disabled]) .klarna-button { pointer-events: none; cursor: not-allowed; } :host([disabled]) .category-button { pointer-events: none; cursor: not-allowed; } :host([disabled]) .klarna-pay-button { pointer-events: none; cursor: not-allowed; } /* Ensure disabled state is visible on container when expanded */ :host([disabled]) .klarna-container.expanded { background-color: var(--primer-color-background-outlined-disabled); border-color: var(--primer-color-border-outlined-disabled); opacity: 0.7; } `;var B=class extends v{constructor(){super(...arguments);this.paymentManagers=new Map;this.sdkState=null;this.headlessUtils=null;this.klarnaCategories=null;this.disabled=!1;this.selectedCategory=null;this.isExpanded=!1;this.headerAriaLabel=x("pay_with",{id:"pay_with"});this._paymentMethodManagerTask=new I(this,{task:async([e,r])=>{if(!e||!r)return T;let o=await r.getCDNAssets("KLARNA");return{manager:e.manager,klarnaIcon:o?.assets?.icon?`${o.goatCdnUrl}/${o.assets.icon}`:""}},args:()=>[this.paymentManagers.get("KLARNA"),this.headlessUtils]});this.toggleExpand=()=>{this.disabled||(this.isExpanded=!this.isExpanded,this.isExpanded||(this.selectedCategory=null))}}async startKlarnaPayment(){if(!(!this._paymentMethodManagerTask.value||!this.selectedCategory))try{await this._paymentMethodManagerTask.value.manager.start({paymentMethodCategoryId:this.selectedCategory})}catch(e){E.error("Failed to start Klarna payment",e)}}async renderSelectedCategory(){if(!(!this._paymentMethodManagerTask.value||!this.selectedCategory||!this.klarnaContainer))try{this.klarnaContainer.innerHTML="",await this._paymentMethodManagerTask.value.manager.renderCategory({containerId:this.klarnaContainer,paymentMethodCategoryId:this.selectedCategory,onHeightChange:e=>{e>0&&(this.klarnaContainer.style.height=`${e}px`)}})}catch(e){E.error("Failed to render Klarna category",e)}}selectCategory(e){this.disabled||(this.selectedCategory=e,this.renderSelectedCategory())}updated(e){e.has("selectedCategory")&&this.selectedCategory&&this.renderSelectedCategory()}renderCategorySelection(){let e=this.klarnaCategories?.categories||[];return this.klarnaCategories?.isLoading||!1?u`<div class="loading"><primer-spinner size="small"></primer-spinner></div>`:u`<div class="category-selection">${e.map(o=>u`<button class=${F({"category-button":!0,selected:o.id===this.selectedCategory})} @click=${()=>{this.selectCategory(o.id)}} ?disabled=${this.disabled} >${o.name}</button>`)}</div>`}renderExpandedContent(){return u` ${this.renderCategorySelection()} ${this.selectedCategory?u`<div id="klarna-category-container" class="klarna-category-container" ></div>`:h}<button class=${F({"klarna-pay-button":!0,loading:!!this.sdkState?.isProcessing,disabled:!this.selectedCategory||this.disabled})} ?disabled=${!this.selectedCategory||this.sdkState?.isProcessing||this.disabled} @click=${()=>this.startKlarnaPayment()} >${x("confirm",{id:"confirm"})}</button>`}render(){return this._paymentMethodManagerTask.render({error:e=>{let r=e instanceof Error?e.message:"Unknown error in Klarna";return u`<div class="error"> Error loading Klarna: ${r}</div>`},complete:({manager:e,klarnaIcon:r})=>e?u`<div class="klarna-container ${this.isExpanded?"expanded":""}"><div class="klarna-button-header"><primer-button buttonType="button" variant="secondary" class="klarna-button" @click=${this.toggleExpand} aria-expanded=${this.isExpanded} aria-controls="collapsable-content" aria-label=${this.headerAriaLabel} ?disabled=${this.disabled} ><img src=${r} alt="Klarna logo" /><span>${x("pay_with",{id:"pay_with"})} Klarna</span><span class="klarna-accordion-icon ${this.isExpanded?"expanded":""}" > ▼ </span></primer-button></div><div class="klarna-expanded-content ${this.isExpanded?"visible":""}" ><div class="klarna-accordion-content">${this.renderExpandedContent()}</div></div></div>`:h})}};B.styles=[M,Ea],l([C({context:G,subscribe:!0}),p()],B.prototype,"paymentManagers",2),l([C({context:V,subscribe:!0}),p()],B.prototype,"sdkState",2),l([C({context:K,subscribe:!0}),p({type:Object})],B.prototype,"headlessUtils",2),l([C({context:Ut,subscribe:!0}),p()],B.prototype,"klarnaCategories",2),l([p({type:Boolean,attribute:"disabled"})],B.prototype,"disabled",2),l([S()],B.prototype,"selectedCategory",2),l([S()],B.prototype,"isExpanded",2),l([S()],B.prototype,"headerAriaLabel",2),l([ke("#klarna-category-container")],B.prototype,"klarnaContainer",2),B=l([b("primer-klarna"),R()],B);var Kl=Fl({tagName:"primer-klarna",elementClass:B,react:jl});import{createComponent as Gl}from"@lit/react";import ql from"react";var Aa=g` :host { height: calc( ${ae(se)} + calc(2 * var(--primer-space-medium)) ); display: flex; } .native-button-container { width: 100%; height: 100%; flex: 1; position: relative; } /* Disabled state styling - handled via JavaScript overlay for iframe compatibility */ :host([disabled]) { cursor: not-allowed; } `;var oe=class extends v{constructor(){super();this.paymentManagers=new Map;this.computedStyles=null;this.disabled=!1;this._buttonId="button-container";this.loadManagerTask=new I(this,{args:()=>[this.paymentMethod?.type],task:([e])=>{if(!e)return T;let r=this.paymentManagers.get(e)?.manager;if(!r)throw new Error(`No manager found for payment method type ${e}`);return r}}),this.nativeButtonTask=new I(this,{args:()=>[this.loadManagerTask.value],task:async([e])=>{if(!e)return T;await this.updateComplete;let r=this.shadowRoot?.getElementById(this._buttonId);if(!r)return;let o=this.calculateButtonHeight(),a=e.createButton(),n=this.createRenderOptions(o);return await a.render(this.paymentMethod?.type==="GOOGLE_PAY"?this.shadowRoot?.getRootNode():r,n),this.disabled&&await a.setDisabled(this.disabled),this.disabled&&(await this.updateComplete,this.updateDisabledOverlay()),a}})}attributeChangedCallback(e,r,o){if(super.attributeChangedCallback(e,r,o),e==="disabled"&&r!==o){let a=o!==null,n=this.nativeButtonTask.value;n&&n.setDisabled(a)}}calculateButtonHeight(){if(typeof window>"u"||!this.isConnected||!this.computedStyles)return 0;let e=parseFloat(se),r=parseFloat(this.computedStyles.getPropertyValue("--primer-space-medium"));return e+2*r}createRenderOptions(e){let r=this.paymentMethod?.type;return r==="GOOGLE_PAY"?{style:{shadowRoot:!0}}:r==="APPLE_PAY"?{style:{buttonHeight:e}}:r==="PAYPAL"?{style:{buttonHeight:e}}:{style:{buttonHeight:e}}}updated(e){e.has("paymentMethod")&&this.paymentMethod&&(this._buttonId=`button-container-${this.paymentMethod.type}`),e.has("disabled")&&this.updateDisabledOverlay()}updateDisabledOverlay(){this.paymentMethod?.type==="GOOGLE_PAY"?this.updateGooglePayOverlay():this.updateRegularOverlay()}updateGooglePayOverlay(){let e=null;if(e=this.shadowRoot?.getRootNode()?.querySelector(".gpay-card-info-container-fill"),e||(e=document.querySelector(".gpay-card-info-container-fill")),e||(e=this.shadowRoot?.querySelector(".gpay-card-info-container-fill")),!e){setTimeout(()=>this.updateGooglePayOverlay(),100);return}let o=e.querySelector(".disabled-overlay");if(o&&o.remove(),this.disabled){let a=document.createElement("div");a.className="disabled-overlay",a.style.cssText=`
122
+ position: absolute;
123
+ top: 0;
124
+ left: 0;
125
+ right: 0;
126
+ bottom: 0;
127
+ background-color: rgba(255, 255, 255, 0.4);
128
+ border-radius: var(--primer-radius-medium);
129
+ cursor: not-allowed;
130
+ z-index: 1000;
131
+ pointer-events: all;
132
+ backdrop-filter: grayscale(100%);
133
+ `,e.style.position="relative",e.appendChild(a)}}updateRegularOverlay(){let e=this.shadowRoot?.querySelector(".native-button-container");if(!e)return;let r=e.querySelector(".disabled-overlay");if(r&&r.remove(),this.disabled){let o=document.createElement("div");o.className="disabled-overlay",o.style.cssText=`
134
+ position: absolute;
135
+ top: 0;
136
+ left: 0;
137
+ right: 0;
138
+ bottom: 0;
139
+ background-color: rgba(255, 255, 255, 0.4);
140
+ border-radius: var(--primer-radius-medium);
141
+ cursor: not-allowed;
142
+ z-index: 1000;
143
+ pointer-events: all;
144
+ backdrop-filter: grayscale(100%);
145
+ `,e.appendChild(o)}}render(){return this.loadManagerTask.render({error:()=>h,complete:()=>u`<div class="native-button-container" id="${this._buttonId}"></div>`,pending:()=>h})}};oe.styles=[M,Aa],l([p({type:Object})],oe.prototype,"paymentMethod",2),l([C({context:G,subscribe:!0}),p()],oe.prototype,"paymentManagers",2),l([C({context:it,subscribe:!0}),p()],oe.prototype,"computedStyles",2),l([p({type:Boolean,attribute:"disabled"})],oe.prototype,"disabled",2),oe=l([b("primer-native-payment")],oe);var Wl=Gl({tagName:"primer-native-payment",elementClass:oe,react:ql});import{createComponent as Jl}from"@lit/react";import Zl from"react";var _a=g` :host { display: contents; } `;var ue=class extends v{constructor(){super(...arguments);this.type=void 0;this.disabled=!1;this.paymentMethods=null}render(){if(!this.type)return h;let e=this.paymentMethods?.get(this.type);if(!e)return h;switch(e?.managerType){case"CARD":return u`<primer-card-form ?disabled=${this.disabled} ></primer-card-form>`;case"NATIVE":return u`<primer-native-payment .paymentMethod=${e} ?disabled=${this.disabled} ></primer-native-payment>`;case"REDIRECT":return u`<primer-redirect-payment .paymentMethod=${e} ?disabled=${this.disabled} ></primer-redirect-payment>`;case"KLARNA":return u`<primer-klarna ?disabled=${this.disabled}></primer-klarna>`;case"ACH":return u`<primer-dynamic-payment .paymentMethod=${e} ></primer-dynamic-payment>`;default:return h}}};ue.styles=[_a],l([p({type:String})],ue.prototype,"type",2),l([p({type:Boolean,attribute:"disabled"})],ue.prototype,"disabled",2),l([C({context:ot,subscribe:!0}),p()],ue.prototype,"paymentMethods",2),ue=l([b("primer-payment-method")],ue);var Xl=Jl({tagName:"primer-payment-method",elementClass:ue,react:Zl});import{createComponent as Ql}from"@lit/react";import ed from"react";var mt=class extends v{render(){return u`<primer-checkout-state type="complete"></primer-checkout-state>`}};mt=l([b("primer-checkout-complete")],mt);var td=Ql({tagName:"primer-checkout-complete",elementClass:mt,react:ed});import{createComponent as rd}from"@lit/react";import id from"react";var Qe=class extends v{constructor(){super(...arguments);this.sdkState=null}render(){return u`<primer-checkout-state type="failure" description=${this.sdkState?.error?.message||""} ></primer-checkout-state>`}};l([C({context:V,subscribe:!0}),p()],Qe.prototype,"sdkState",2),Qe=l([b("primer-checkout-error")],Qe);var od=rd({tagName:"primer-checkout-error",elementClass:Qe,react:id});import{createComponent as ad}from"@lit/react";import nd from"react";var xa=g` :host { display: contents; } .primer-main-list { display: flex; flex-direction: column; gap: var(--primer-space-small); } .primer-is-processing { opacity: 0.5; pointer-events: none; } primer-vault-manager { margin-bottom: var(--primer-space-xlarge); } `;var me=class extends v{constructor(){super(...arguments);this.hasAssignedContent=!1;this.onSlotChange=e=>{let o=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=o.length>0,this.requestUpdate()};this.paymentMethods=null;this.sdkState=null;this.clientOptions=null}render(){return this.sdkState?.isSuccessful?u`<slot name="checkout-complete"><primer-checkout-complete></primer-checkout-complete></slot>`:u`<slot name="payments" @slotchange=${this.onSlotChange}></slot>${L(this.hasAssignedContent,()=>h,()=>u`<div class=${F({"primer-is-processing":!!this.sdkState?.isProcessing})} ><primer-vault-manager></primer-vault-manager><primer-show-other-payments><div slot="other-payments" class="primer-main-list">${this.paymentMethods?.toArray().map(e=>u`<primer-payment-method type=${e.type} ?disabled=${this.clientOptions?.disabledPayments===!0} ></primer-payment-method>`)}</div></primer-show-other-payments><primer-error-message-container></primer-error-message-container></div>`)} `}};me.styles=[M,xa],l([C({context:ot,subscribe:!0}),p()],me.prototype,"paymentMethods",2),l([C({context:V,subscribe:!0}),p()],me.prototype,"sdkState",2),l([C({context:Pe,subscribe:!0}),p()],me.prototype,"clientOptions",2),me=l([b("primer-main")],me);var sd=ad({tagName:"primer-main",elementClass:me,react:nd});import{createComponent as ld}from"@lit/react";import dd from"react";var Sa=g` :host { height: calc( ${ae(se)} + calc(2 * var(--primer-space-medium)) ); display: flex; /* Default value for the background color CSS variable */ --redirect-payment-button-bg-color: var( --primer-color-background-outlined-default ); } primer-button { width: 100%; height: 100%; } primer-button::part(button) { background-color: var(--redirect-payment-button-bg-color); border: 1px solid var(--primer-color-border-outlined-default); color: var(--primer-color-text-primary); flex: 1; padding: var(--primer-space-small); display: flex; align-items: center; justify-content: center; gap: var(--primer-space-small); } /* Default layout: icon on the left (START) */ primer-button { display: flex; flex-direction: row; } /* When icon position is END */ primer-button.icon-end { flex-direction: row-reverse; } .image-container { display: flex; justify-content: center; align-items: center; min-width: 100px; height: 100%; } .button-text { font-family: var(--primer-typography-font-family); font-size: var(--primer-typography-title-small-font-size); font-weight: var(--primer-typography-title-small-font-weight); line-height: var(--primer-typography-title-small-line-height); letter-spacing: var(--primer-typography-title-small-letter-spacing); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Target the img specifically inside our component */ img { max-width: 100px; width: 100%; height: auto; object-fit: cover; max-height: 100%; } /* For image container sizing */ .image-container { flex-shrink: 0; flex-grow: 1; } /* Disabled state styling - subtle visual feedback */ :host([disabled]) { opacity: 0.6; cursor: not-allowed; } :host([disabled]) primer-button::part(button) { pointer-events: none; cursor: not-allowed; } :host([disabled]) img { filter: grayscale(100%); } `;var re=class extends v{constructor(){super(...arguments);this.disabled=!1;this.paymentManagers=new Map;this.sdkState=null;this.headlessUtils=null;this._paymentMethodManagerTask=new I(this,{task:([e,r])=>!e||!r?T:r.get(e)?.manager,args:()=>[this.paymentMethod?.type,this.paymentManagers]});this._getAssetsTask=new I(this,{task:([e,r])=>{if(!e||!r)return T;let o=r.getPaymentMethodConfiguration(e);if(!o)return T;let a=o.displayMetadata.button.backgroundColor.colored??o.displayMetadata.button.backgroundColor.light,n=o.displayMetadata.button.iconPositionRelativeToText||"START";return{backgroundColor:a,name:o.name,displayName:this._legacyGetButtonLabel(o.displayMetadata.button.text),iconUrl:o.displayMetadata.button.iconUrl.colored??o.displayMetadata.button.iconUrl.light,iconPosition:n}},args:()=>[this.paymentMethod?.type,this.headlessUtils]});this._setupTasks=new I(this,{task:([e,r])=>!e||!r?T:{paymentMethodManager:e,assetsConfig:r},args:()=>[this._paymentMethodManagerTask.value,this._getAssetsTask.value]})}_legacyGetButtonLabel(e){if(!e)return;let r=e?Dt(e):"";return r==="payWith"&&(r="pay_with"),x(r,{id:r})}startRedirectPayment(){this.disabled||this._paymentMethodManagerTask.value&&this._paymentMethodManagerTask.value.start()}render(){return this._setupTasks.render({error:()=>h,complete:({assetsConfig:e})=>{this.style.setProperty("--redirect-payment-button-bg-color",e.backgroundColor);let r={loading:!!this.sdkState?.isProcessing,"icon-end":e.iconPosition==="END","image-only":!e.displayName},o=e.displayName?u`<span class="image-container"><img src="${e.iconUrl}" alt="${e.name}" /></span><span class="button-text">${e.displayName}</span>`:u`<span class="image-container"><img src="${e.iconUrl}" alt="${e.name}" /></span>`;return u`<primer-button @click="${()=>this.startRedirectPayment()}" class=${F(r)} title="${x("pay_with",{id:"pay_with"})} ${e.name}" ?disabled=${this.disabled} >${o}</primer-button>`}})}};re.styles=[M,Sa],l([p({type:Object})],re.prototype,"paymentMethod",2),l([p({type:Boolean,attribute:"disabled"})],re.prototype,"disabled",2),l([C({context:G,subscribe:!0})],re.prototype,"paymentManagers",2),l([C({context:V,subscribe:!0})],re.prototype,"sdkState",2),l([C({context:K,subscribe:!0})],re.prototype,"headlessUtils",2),re=l([b("primer-redirect-payment"),R()],re);var cd=ld({tagName:"primer-redirect-payment",elementClass:re,react:dd});import{createComponent as pd}from"@lit/react";import ud from"react";var Pa=g` :host { display: block; margin-top: var(--primer-space-medium); margin-bottom: var(--primer-space-medium); } .other-payment-methods-container { width: 100%; } .other-payment-methods-content { padding: var(--primer-space-medium) 0; } .primer-loader { display: flex; justify-content: center; align-items: center; } `;var Re=class extends v{constructor(){super(...arguments);this.vaultManager=null}render(){if(this.vaultManager?.isLoading)return h;let e=this.vaultManager?.showEmptyState&&this.vaultManager?.vaultedPaymentMethods.length;return!this.vaultManager||!this.vaultManager.enabled||!e?u`<slot name="other-payments"></slot>`:u`<div class="other-payment-methods-container"><primer-collapsable buttonVariant="secondary" .expanded="${this.vaultManager?.vaultedPaymentMethods.length===0}" .header="${x("navigateToPaymentMethods",{id:"navigateToPaymentMethods"})}" ><div class="other-payment-methods-content"><slot name="other-payments"></slot></div></primer-collapsable></div>`}};Re.styles=[Pa],l([C({context:at,subscribe:!0}),p({type:Object,attribute:!1})],Re.prototype,"vaultManager",2),Re=l([b("primer-show-other-payments")],Re);var md=pd({tagName:"primer-show-other-payments",elementClass:Re,react:ud});import{createComponent as xd}from"@lit/react";import Sd from"react";var et={WORLDPAY_IDEAL:"WORLDPAY_IDEAL",AUTOMATED_CLEARING_HOUSE:"AUTOMATED_CLEARING_HOUSE",ADYEN_KLARNA:"ADYEN_KLARNA",ADYEN_BANCONTACT_CARD:"ADYEN_BANCONTACT_CARD",PAY_NL_KAARTDIRECT:"PAY_NL_KAARTDIRECT",ADYEN_EPS:"ADYEN_EPS",ADYEN_BANCONTACT_PAYCONIQ:"ADYEN_BANCONTACT_PAYCONIQ",OMISE_PROMPTPAY:"OMISE_PROMPTPAY",OMISE_TRUEMONEY:"OMISE_TRUEMONEY",ADYEN_MULTIBANCO:"ADYEN_MULTIBANCO",PACYPAY_WECHAT:"PACYPAY_WECHAT",PACYPAY_ALIPAY:"PACYPAY_ALIPAY",ADYEN_MBWAY:"ADYEN_MBWAY",XENDIT_DANA:"XENDIT_DANA",XENDIT_SHOPEEPAY:"XENDIT_SHOPEEPAY",ADYEN_PAYSHOP:"ADYEN_PAYSHOP",ADYEN_PAYTRAIL:"ADYEN_PAYTRAIL",CLEARPAY:"CLEARPAY",RAPYD_FAST:"RAPYD_FAST",RAPYD_PROMPTPAY:"RAPYD_PROMPTPAY",RAPYD_GCASH:"RAPYD_GCASH",RAPYD_POLI:"RAPYD_POLI",RAPYD_GRABPAY:"RAPYD_GRABPAY",PRIMER_PAYPAL:"PRIMER_PAYPAL",TWOC2P:"TWOC2P",NETS:"NETS",STRIPE_ACH:"STRIPE_ACH",STRIPE_GIROPAY:"STRIPE_GIROPAY",MOLLIE_GIROPAY:"MOLLIE_GIROPAY",MOLLIE_EPS:"MOLLIE_EPS",PAY_NL_EPS:"PAY_NL_EPS",PAY_NL_P24:"PAY_NL_P24",MOLLIE_P24:"MOLLIE_P24",MOLLIE_SOFORT:"MOLLIE_SOFORT",COINBASE:"COINBASE",OPENNODE:"OPENNODE",MOLLIE_GIFT_CARD:"MOLLIE_GIFTCARD",XFERS_PAYNOW:"XFERS_PAYNOW",CARD:"PAYMENT_CARD",APPLE_PAY:"APPLE_PAY",GOOGLE_PAY:"GOOGLE_PAY",PAYPAL:"PAYPAL_ORDER",PAYPAL_VAULTED:"PAYPAL_BILLING_AGREEMENT",GO_CARDLESS:"GOCARDLESS",PAY_NL_IDEAL:"PAY_NL_IDEAL",PAY_NL_SOFORT_BANKING:"PAY_NL_SOFORT_BANKING",PAY_NL_BANCONTACT:"PAY_NL_BANCONTACT",PAY_NL_PAYPAL:"PAY_NL_PAYPAL",PAY_NL_CREDIT_TRANSFER:"PAY_NL_CREDIT_TRANSFER",PAY_NL_DIRECT_DEBIT:"PAY_NL_DIRECT_DEBIT",PAY_NL_GIROPAY:"PAY_NL_GIROPAY",PAY_NL_PAYCONIQ:"PAY_NL_PAYCONIQ",HOOLAH:"HOOLAH",ADYEN_BLIK:"ADYEN_BLIK",ADYEN_VIPPS:"ADYEN_VIPPS",ADYEN_GIROPAY:"ADYEN_GIROPAY",ADYEN_SOFORT:"ADYEN_SOFORT",ADYEN_IDEAL:"ADYEN_IDEAL",ADYEN_TRUSTLY:"ADYEN_TRUSTLY",ADYEN_ALIPAY:"ADYEN_ALIPAY",ADYEN_TWINT:"ADYEN_TWINT",ADYEN_MOBILEPAY:"ADYEN_MOBILEPAY",MOLLIE_BANCONTACT:"MOLLIE_BANCONTACT",MOLLIE_IDEAL:"MOLLIE_IDEAL",BUCKAROO_GIROPAY:"BUCKAROO_GIROPAY",BUCKAROO_EPS:"BUCKAROO_EPS",BUCKAROO_SOFORT:"BUCKAROO_SOFORT",BUCKAROO_BANCONTACT:"BUCKAROO_BANCONTACT",BUCKAROO_IDEAL:"BUCKAROO_IDEAL",ATOME:"ATOME",KLARNA_CUSTOMER_TOKEN:"KLARNA_CUSTOMER_TOKEN"};function wa(i){return i.paymentInstrumentType===et.CARD}async function Ta(i,t,e){if(!i||!t||!e)return{icon:"",shouldShowCVV:!1,type:"other",description:""};let r="";if(wa(i))r=t.getCardNetworkAsset(i.paymentInstrumentData.network).cardUrl;else{let n=await t.getCDNAssets(i.paymentMethodType);n&&(r=n.assets?.icon?`${n.goatCdnUrl}/${n.assets.icon}`:"")}let o=e.cvvRecapture,a=bi(i);return{icon:r,shouldShowCVV:o,...a}}function Ma(i){return i.charAt(0).toUpperCase()+i.slice(1).toLowerCase()}function hd(i){return i?i===i.toUpperCase()?Ma(i):i:""}function ka(i,t){return[i,t].filter(Boolean).join(" ")}function fd(i,t){return!i||!t?"":`Expires ${i}/${t.slice(-2)}`}function Na(i){return i?`\u2022\u2022\u2022\u2022 ${i}`:""}function yd(i){let t=i.paymentInstrumentData,e=t.cardholderName,r=t.last4Digits,o=fd(t.expirationMonth,t.expirationYear),a=hd(t.network),n=`${i.paymentInstrumentData.cardholderName?i.paymentInstrumentData.cardholderName:""}${(r?` ${a} ${Na(r)}`:a)||" Card"}`;return{type:"card",cardholderName:e,last4:r,expiresDate:o,network:a,description:n}}function gd(i){let t=i.paymentInstrumentData,e=t.externalPayerInfo?.email||"",r=t.externalPayerInfo?.firstName||"",o=t.externalPayerInfo?.lastName||"",a=i.userDescription||e||"PayPal Account";return{type:"other",fullName:ka(r,o),email:e,paymentMethodType:"PayPal",description:a}}function vd(i){let t=i.paymentInstrumentData,e=t.sessionData?.billingAddress?.email||"",r=t.sessionData?.billingAddress?.firstName||"",o=t.sessionData?.billingAddress?.lastName||"",a=i.userDescription||(e?`Klarna - ${e}`:"Klarna Account");return{type:"other",fullName:ka(r,o),email:e,paymentMethodType:"Klarna",description:a}}function bd(i){let t=i.paymentInstrumentData,e=t.accountNumberLastFourDigits||"",r=t.bankName||"",o=t.accountType||"",a=i.userDescription;return a||(r&&e?a=`${r} ${Na(e)}`:r?a=r:a="Bank Account"),{type:"other",fullName:"",bankName:r,last4:e,accountType:o,paymentMethodType:"ACH",description:a}}function Cd(i){let t=i.paymentInstrumentType,e=Ma(t.replace(/_/g," "));return{type:"other",description:i.userDescription||e}}var Ed={[et.CARD]:yd,[et.PAYPAL_VAULTED]:gd,[et.KLARNA_CUSTOMER_TOKEN]:vd,[et.AUTOMATED_CLEARING_HOUSE]:bd};function bi(i){try{let t=Ed[i.paymentInstrumentType];return t?t(i):Cd(i)}catch(t){return E.error("FormatUtils",`Error formatting payment method ${i.id}:`,t),{type:"other",description:i.userDescription||i.id||"Payment Method"}}}var Ia=g` :host { display: block; width: 100%; position: relative; } .vault-manager { display: flex; flex-direction: column; position: relative; } .vault-manager-content { display: flex; flex-direction: column; width: 100%; position: relative; } /* Content container using CSS Grid for height animation */ .content-container { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--primer-animation-duration) var(--primer-animation-easing); width: 100%; position: relative; } /* Required to make grid animation work - ensures content can expand/collapse properly */ .content-container > * { min-height: 0; overflow: hidden; } /* Submit button container */ .submit-button-container { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--primer-animation-duration) var(--primer-animation-easing); overflow: hidden; margin-top: var(--primer-space-small); width: 100%; } /* Ensure the submit button has full width */ .submit-button { width: 100%; } /* Make sure pay button inside the submit component is full width */ primer-vault-payment-submit::part(button), ::slotted(primer-button) { width: 100%; } /* Payment methods list */ .payment-methods-list { display: flex; flex-direction: column; gap: var(--primer-space-small); width: 100%; position: relative; } /* Delete confirmation container */ .delete-confirmation-container { width: 100%; position: relative; display: flex; flex-direction: column; gap: var(--primer-space-small); } /* Loading overlay styles */ .loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.7); z-index: 10; border-radius: var(--primer-radius-medium); backdrop-filter: blur(2px); opacity: 0; /* Start invisible */ } /* Add styles for when updating is active */ .is-updating { pointer-events: none; /* Prevent interaction when updating */ } /* * Component-specific styles to ensure smooth animations * These components need display:block to work with the grid layout */ primer-vault-payment-method-item, primer-vault-empty-state, primer-vault-delete-confirmation { display: block; width: 100%; } /* Disable animations for reduced motion preference */ @media (prefers-reduced-motion: reduce) { .content-container, .submit-button-container, primer-vault-payment-method-item, primer-vault-payment-submit, primer-vault-empty-state, primer-vault-delete-confirmation { transition: none; } } primer-button::part(button) { align-items: center; width: 100%; justify-content: flex-start; display: flex; text-align: left; padding: var(--primer-space-medium); } `;var kr=new WeakMap,ht=class{constructor(t,e){this.startPaused=!1,this.disabled=!1,this.clients=new Set,this.pendingComplete=!1,this.host=t,this.defaultOptions=e.defaultOptions||{},this.startPaused=!!e.startPaused,this.disabled=!!e.disabled,this.onComplete=e.onComplete,kr.set(this.host,this)}async add(t){this.clients.add(t),this.startPaused&&t.webAnimation?.pause(),this.pendingComplete=!0,await t.finished,this.pendingComplete&&!this.isAnimating&&(this.pendingComplete=!1,this.onComplete?.())}remove(t){this.clients.delete(t)}pause(){this.clients.forEach(t=>t.webAnimation?.pause())}play(){this.clients.forEach(t=>t.webAnimation?.play())}cancel(){this.clients.forEach(t=>t.webAnimation?.cancel()),this.clients.clear()}finish(){this.clients.forEach(t=>t.webAnimation?.finish()),this.clients.clear()}togglePlay(){this.isPlaying?this.pause():this.play()}get isAnimating(){return this.clients.size>0}get isPlaying(){return Array.from(this.clients).some(t=>t.webAnimation?.playState==="running")}async finished(){await Promise.all(Array.from(this.clients).map(t=>t.finished))}};var La=0,Ci=new Map,Oa=new WeakSet,Ei=()=>new Promise(i=>requestAnimationFrame(i));var Ra=(i,t)=>{let e=i-t;return e===0?void 0:e},Da=(i,t)=>{let e=i/t;return e===1?void 0:e},Nr={left:(i,t)=>{let e=Ra(i,t);return{value:e,transform:e==null||isNaN(e)?void 0:`translateX(${e}px)`}},top:(i,t)=>{let e=Ra(i,t);return{value:e,transform:e==null||isNaN(e)?void 0:`translateY(${e}px)`}},width:(i,t)=>{let e;t===0&&(t=1,e={width:"1px"});let r=Da(i,t);return{value:r,overrideFrom:e,transform:r==null||isNaN(r)?void 0:`scaleX(${r})`}},height:(i,t)=>{let e;t===0&&(t=1,e={height:"1px"});let r=Da(i,t);return{value:r,overrideFrom:e,transform:r==null||isNaN(r)?void 0:`scaleY(${r})`}}},Ya={duration:333,easing:"ease-in-out"},Va=["left","top","width","height","opacity","color","background"],$a=new WeakMap,Ir=class extends Le{constructor(t){if(super(t),this.t=!1,this.i=null,this.o=null,this.h=!0,this.shouldLog=!1,t.type===Ne.CHILD)throw Error("The `animate` directive must be used in attribute position.");this.createFinished()}createFinished(){this.resolveFinished?.(),this.finished=new Promise(t=>{this.l=t})}async resolveFinished(){this.l?.(),this.l=void 0}render(t){return h}getController(){return kr.get(this.u)}isDisabled(){return this.options.disabled||this.getController()?.disabled}update(t,[e]){let r=this.u===void 0;return r&&(this.u=t.options?.host,this.u.addController(this),this.u.updateComplete.then(o=>this.t=!0),this.element=t.element,$a.set(this.element,this)),this.optionsOrCallback=e,(r||typeof e!="function")&&this.p(e),this.render(e)}p(t){t=t??{};let e=this.getController();e!==void 0&&((t={...e.defaultOptions,...t}).keyframeOptions={...e.defaultOptions.keyframeOptions,...t.keyframeOptions}),t.properties??(t.properties=Va),this.options=t}m(){let t={},e=this.element.getBoundingClientRect(),r=getComputedStyle(this.element);return this.options.properties.forEach(o=>{let a=e[o]??(Nr[o]?void 0:r[o]),n=Number(a);t[o]=isNaN(n)?a+"":n}),t}v(){let t,e=!0;return this.options.guard&&(t=this.options.guard(),e=((r,o)=>{if(Array.isArray(r)){if(Array.isArray(o)&&o.length===r.length&&r.every((a,n)=>a===o[n]))return!1}else if(o===r)return!1;return!0})(t,this._)),this.h=this.t&&!this.isDisabled()&&!this.isAnimating()&&e&&this.element.isConnected,this.h&&(this._=Array.isArray(t)?Array.from(t):t),this.h}hostUpdate(){typeof this.optionsOrCallback=="function"&&this.p(this.optionsOrCallback()),this.v()&&(this.A=this.m(),this.i=this.i??this.element.parentNode,this.o=this.element.nextSibling)}async hostUpdated(){if(!this.h||!this.element.isConnected||this.options.skipInitial&&!this.isHostRendered)return;let t;this.prepare(),await Ei;let e=this.O(),r=this.j(this.options.keyframeOptions,e),o=this.m();if(this.A!==void 0){let{from:a,to:n}=this.N(this.A,o,e);this.log("measured",[this.A,o,a,n]),t=this.calculateKeyframes(a,n)}else{let a=Ci.get(this.options.inId);if(a){Ci.delete(this.options.inId);let{from:n,to:s}=this.N(a,o,e);t=this.calculateKeyframes(n,s),t=this.options.in?[{...this.options.in[0],...t[0]},...this.options.in.slice(1),t[1]]:t,La++,t.forEach(d=>d.zIndex=La)}else this.options.in&&(t=[...this.options.in,{}])}this.animate(t,r)}resetStyles(){this.P!==void 0&&(this.element.setAttribute("style",this.P??""),this.P=void 0)}commitStyles(){this.P=this.element.getAttribute("style"),this.webAnimation?.commitStyles(),this.webAnimation?.cancel()}reconnected(){}async disconnected(){if(!this.h||(this.options.id!==void 0&&Ci.set(this.options.id,this.A),this.options.out===void 0))return;if(this.prepare(),await Ei(),this.i?.isConnected){let e=this.o&&this.o.parentNode===this.i?this.o:null;if(this.i.insertBefore(this.element,e),this.options.stabilizeOut){let r=this.m();this.log("stabilizing out");let o=this.A.left-r.left,a=this.A.top-r.top;getComputedStyle(this.element).position!=="static"||o===0&&a===0||(this.element.style.position="relative"),o!==0&&(this.element.style.left=o+"px"),a!==0&&(this.element.style.top=a+"px")}}let t=this.j(this.options.keyframeOptions);await this.animate(this.options.out,t),this.element.remove()}prepare(){this.createFinished()}start(){this.options.onStart?.(this)}didFinish(t){t&&this.options.onComplete?.(this),this.A=void 0,this.animatingProperties=void 0,this.frames=void 0,this.resolveFinished()}O(){let t=[];for(let e=this.element.parentNode;e;e=e?.parentNode){let r=$a.get(e);r&&!r.isDisabled()&&r&&t.push(r)}return t}get isHostRendered(){let t=Oa.has(this.u);return t||this.u.updateComplete.then(()=>{Oa.add(this.u)}),t}j(t,e=this.O()){let r={...Ya};return e.forEach(o=>Object.assign(r,o.options.keyframeOptions)),Object.assign(r,t),r}N(t,e,r){t={...t},e={...e};let o=r.map(s=>s.animatingProperties).filter(s=>s!==void 0),a=1,n=1;return o.length>0&&(o.forEach(s=>{s.width&&(a/=s.width),s.height&&(n/=s.height)}),t.left!==void 0&&e.left!==void 0&&(t.left=a*t.left,e.left=a*e.left),t.top!==void 0&&e.top!==void 0&&(t.top=n*t.top,e.top=n*e.top)),{from:t,to:e}}calculateKeyframes(t,e,r=!1){let o={},a={},n=!1,s={};for(let d in e){let c=t[d],m=e[d];if(d in Nr){let f=Nr[d];if(c===void 0||m===void 0)continue;let y=f(c,m);y.transform!==void 0&&(s[d]=y.value,n=!0,o.transform=`${o.transform??""} ${y.transform}`,y.overrideFrom!==void 0&&Object.assign(o,y.overrideFrom))}else c!==m&&c!==void 0&&m!==void 0&&(n=!0,o[d]=c,a[d]=m)}return o.transformOrigin=a.transformOrigin=r?"center center":"top left",this.animatingProperties=s,n?[o,a]:void 0}async animate(t,e=this.options.keyframeOptions){this.start(),this.frames=t;let r=!1;if(!this.isAnimating()&&!this.isDisabled()&&(this.options.onFrames&&(this.frames=t=this.options.onFrames(this),this.log("modified frames",t)),t!==void 0)){this.log("animate",[t,e]),r=!0,this.webAnimation=this.element.animate(t,e);let o=this.getController();o?.add(this);try{await this.webAnimation.finished}catch{}o?.remove(this)}return this.didFinish(r),r}isAnimating(){return this.webAnimation?.playState==="running"||this.webAnimation?.pending}log(t,e){this.shouldLog&&this.isDisabled()}},De=Ce(Ir);var Ad=["top","right","bottom","left"],Lr=class extends Le{constructor(t){if(super(t),t.type!==Ne.ELEMENT)throw Error("The `position` directive must be used in attribute position.")}render(t,e){return h}update(t,[e,r]){return this.u===void 0&&(this.u=t.options?.host,this.u.addController(this)),this.S=t.element,this.C=e,this.F=r??["left","top","width","height"],this.render(e,r)}hostUpdated(){this.$()}$(){let t=typeof this.C=="function"?this.C():this.C?.value,e=t.offsetParent;if(t===void 0||!e)return;let r=t.getBoundingClientRect(),o=e.getBoundingClientRect();this.F?.forEach(a=>{let n=Ad.includes(a)?r[a]-o[a]:r[a];this.S.style[a]=n+"px"})}},_d=Ce(Lr);var z=class extends v{constructor(){super();this.vaultManagerContext=null;this.vaultItemContext=null;this.headlessUtils=null;this.isEditMode=!1;this.deletePaymentMethodId=null;this.isDeleting=!1;this.errorMessage="";this.animationDuration=300;this.deleteAssetConfig=null;this.handleToggleEditMode=e=>{this.isEditMode=e.detail,this.deletePaymentMethodId=null,this.isEditMode&&this.vaultItemContext&&this.vaultItemContext.setSelectedVaultedPaymentMethod(null)};this.handleDeletePaymentMethod=async e=>{if(this.deletePaymentMethodId=e.detail,this.deletePaymentMethodId&&this.vaultManagerContext&&this.headlessUtils){let r=this.vaultManagerContext.vaultedPaymentMethods.find(o=>o.id===this.deletePaymentMethodId);r&&(this.deleteAssetConfig=await Ta(r,this.headlessUtils,this.vaultManagerContext))}};this.handleCancelDelete=()=>{this.deletePaymentMethodId=null,this.deleteAssetConfig=null};this.handleConfirmDelete=async()=>{if(!this.vaultManagerContext?.deleteVaultedPaymentMethod||!this.deletePaymentMethodId){this.errorMessage=x("something_went_wrong_error",{id:"something_went_wrong_error"});return}try{this.isDeleting=!0,await this.vaultManagerContext.deleteVaultedPaymentMethod(this.deletePaymentMethodId),this.deletePaymentMethodId=null,this.deleteAssetConfig=null}catch(e){this.errorMessage=e instanceof Error?e.message:x("something_went_wrong_error",{id:"something_went_wrong_error"})}finally{this.isDeleting=!1}};this.handlePaymentError=e=>{let r=e.detail?.error;this.errorMessage=r instanceof Error?r.message:x("payment_processing_error",{id:"payment_processing_error"})};this.handleCloseError=()=>{this.errorMessage=""};new ht(this,{defaultOptions:{keyframeOptions:{duration:Number(getComputedStyle(document.documentElement).getPropertyValue("--primer-animation-duration").trim().replace("ms","")),easing:getComputedStyle(document.documentElement).getPropertyValue("--primer-animation-easing").trim()}}})}getAnimationConfig(){return{keyframeOptions:{duration:this.animationDuration,easing:getComputedStyle(document.documentElement).getPropertyValue("--primer-animation-easing").trim(),fill:"both"}}}getPaymentMethodName(e){if(!this.vaultManagerContext)return"";let r=this.vaultManagerContext.vaultedPaymentMethods.find(o=>o.id===e);if(!r)return"";try{return bi(r).description||""}catch{return""}}renderLoadingOverlay(){return u`<div class="loading-overlay" ${De({...this.getAnimationConfig(),properties:["opacity"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ><primer-spinner size="medium" color="var(--primer-color-loader)" ></primer-spinner></div>`}renderDeleteConfirmation(){if(!this.deletePaymentMethodId||!this.deleteAssetConfig)return h;let e=this.getPaymentMethodName(this.deletePaymentMethodId);return u`<div class="delete-confirmation-container"><primer-button disabled variant="secondary"><primer-payment-method-content .assetConfig=${this.deleteAssetConfig} ></primer-payment-method-content></primer-button><primer-vault-delete-confirmation .isDeleting=${this.isDeleting} .paymentMethodId=${this.deletePaymentMethodId} .paymentMethodName=${e} @confirm-delete=${this.handleConfirmDelete} @cancel-delete=${this.handleCancelDelete} ${De({...this.getAnimationConfig(),properties:["opacity"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-delete-confirmation></div>`}renderPaymentMethodItem(e){return this.deletePaymentMethodId===e.id?h:u`<primer-vault-payment-method-item .paymentMethod=${e} .isEditMode=${this.isEditMode} @delete-payment-method=${this.handleDeletePaymentMethod} ${De({...this.getAnimationConfig(),properties:["opacity"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-payment-method-item>`}renderPaymentMethodList(){let e=this.vaultManagerContext?.vaultedPaymentMethods||[],r=!this.isEditMode&&e.length>0&&!this.deletePaymentMethodId;return u`<div class="payment-methods-list">${e.map(o=>this.renderPaymentMethodItem(o))} ${L(r,()=>u`<div class="submit-button-container"><primer-vault-payment-submit class="submit-button" @primer-vault-payment-error=${this.handlePaymentError} ${De({...this.getAnimationConfig(),properties:["opacity"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-payment-submit></div>`,()=>h)}</div>`}render(){if(!this.vaultManagerContext?.enabled)return h;let e=this.vaultManagerContext.vaultedPaymentMethods.length>0,r=this.vaultManagerContext.isLoading,o=this.vaultManagerContext.isUpdating;return u` ${L(!this.vaultManagerContext?.showEmptyState&&!e,()=>h,()=>u`<slot name="vault-empty-state"><div class="vault-manager ${o?"is-updating":""}"><primer-vault-manager-header .isEditMode=${this.isEditMode} .hasPaymentMethods=${e} @toggle-edit-mode=${this.handleToggleEditMode} ></primer-vault-manager-header>${L(this.errorMessage,()=>u`<primer-vault-error-message .errorMessage=${this.errorMessage} @close-error=${this.handleCloseError} ${De({...this.getAnimationConfig(),properties:["opacity"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-error-message>`,()=>h)}<div class="vault-manager-content">${L(!r&&!e,()=>u`<div class="content-container"><primer-vault-empty-state ${De({...this.getAnimationConfig(),properties:["opacity"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-empty-state></div>`,()=>h)} ${L(!r&&e,()=>u`<div class="content-container">${L(this.deletePaymentMethodId,()=>this.renderDeleteConfirmation(),()=>this.renderPaymentMethodList())}</div>`,()=>h)}</div>${L(o,()=>this.renderLoadingOverlay(),()=>h)}</div></slot>`)} `}};z.styles=[M,Ia],l([C({context:at,subscribe:!0}),p({type:Object,attribute:!1})],z.prototype,"vaultManagerContext",2),l([C({context:Ht,subscribe:!0}),p({type:Object,attribute:!1})],z.prototype,"vaultItemContext",2),l([C({context:K,subscribe:!0}),p({type:Object,attribute:!1})],z.prototype,"headlessUtils",2),l([S()],z.prototype,"isEditMode",2),l([S()],z.prototype,"deletePaymentMethodId",2),l([S()],z.prototype,"isDeleting",2),l([S()],z.prototype,"errorMessage",2),l([p({type:Number})],z.prototype,"animationDuration",2),l([S()],z.prototype,"deleteAssetConfig",2),z=l([b("primer-vault-manager"),R()],z);var Pd=xd({tagName:"primer-vault-manager",elementClass:z,react:Sd});export{ml as AchPayment,cl as Button,yl as CardForm,bl as CardFormSubmit,Sl as CardNetworkSelector,Ms as CheckoutState,Is as Collapsable,Rs as Dialog,Ul as DynamicPayment,Ys as ErrorMessage,zl as ErrorMessageContainer,Hs as Icon,Ks as Input,Nl as InputCardExpiry,Tl as InputCardHolderName,$l as InputCardNumber,Ol as InputCvv,Ws as InputError,Xs as InputLabel,tl as InputWrapper,Kl as Klarna,Wl as NativePayment,Xl as PaymentMethod,ol as Portal,Ps as PrimerCheckout,td as PrimerCheckoutComplete,od as PrimerCheckoutError,sd as PrimerMain,cd as RedirectPayment,md as ShowOtherPayments,sl as Spinner,Pd as VaultManager};