@primer-io/primer-js 0.1.0 → 0.1.1

package/dist/custom-elements.json

@@ -22,7 +22,7 @@
         {
           "kind": "variable",
           "name": "ae",
-          "default": "class extends f{constructor(){super();this.customStyles=\"\";this.clientToken=\"\";this.options={};this._jsInitialized=!1;this.previousLoadingState=!0;this.hasAssignedContent=!1;this.locale=\"en-GB\";this.onSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=i.length>0,this.requestUpdate()};this.sdkContextController=new Wt(this),this.sdkStateController=new qt(this),this.primerEventsController=new tt(this),this.styleProcessingController=new Zt(this),this.vaultManagerController=new _t(this),this.cardNetworkController=new Bt(this),new ur(this)}set jsInitialized(e){this.requestUpdate(),this._jsInitialized=e}get jsInitialized(){return this._jsInitialized}attributeChangedCallback(e,r,i){e===\"customstyles\"?this.styleProcessingController.processCustomStyles(i):super.attributeChangedCallback(e,r,i)}willUpdate(e){e.has(\"options\")&&(this.options?.locale&&(Wr(this.options?.locale)?this.locale=Zr(this.options?.locale):N.warn(\"\\u{1F30E}\\u2757 Unsupported locale provided:\",this.options?.locale,\"- Falling back to default locale `en-GB`\")),qr(this.locale||\"en-GB\"))}updated(){let e=getComputedStyle(this);this.sdkContextController.setComputedStyles(e),this.checkLoadingStateChange()}checkLoadingStateChange(){let e=this.sdkStateController?.state.isLoading||!1;this.previousLoadingState&&!e&&(this.jsInitialized=!0),this.previousLoadingState=e}render(){let e=this.sdkStateController.state,r=e.isLoading,i=e.error,n=!r&&!i;return m` ${D(r,()=>u)} ${D(i,()=>m`<primer-checkout-error></primer-checkout-error>`)} ${D(n,()=>m` <slot name=\"main\" @slotchange=${this.onSlotChange}></slot> ${D(this.hasAssignedContent,()=>u,()=>m`<primer-main></primer-main>`)} `,()=>u)} `}addEventListener(e,r,i){super.addEventListener(e,r,i)}}"
+          "default": "class extends f{constructor(){super();this.customStyles=\"\";this.clientToken=\"\";this.options={};this._jsInitialized=!1;this.previousLoadingState=!0;this.hasAssignedContent=!1;this.locale=\"en-GB\";this.onSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=i.length>0,this.requestUpdate()};this.sdkContextController=new Wt(this),this.sdkStateController=new qt(this),this.primerEventsController=new tt(this),this.styleProcessingController=new Zt(this),this.vaultManagerController=new _t(this),this.cardNetworkController=new Bt(this),new ur(this)}set jsInitialized(e){this.requestUpdate(),this._jsInitialized=e}get jsInitialized(){return this._jsInitialized}attributeChangedCallback(e,r,i){e===\"customstyles\"?this.styleProcessingController.processCustomStyles(i):super.attributeChangedCallback(e,r,i)}willUpdate(e){e.has(\"options\")&&(this.options?.locale&&(Wr(this.options?.locale)?this.locale=Zr(this.options?.locale):N.warn(\"\\u{1F30E}\\u2757 Unsupported locale provided:\",this.options?.locale,\"- Falling back to default locale `en-GB`\")),qr(this.locale||\"en-GB\"))}updated(){let e=getComputedStyle(this);this.sdkContextController.setComputedStyles(e),this.checkLoadingStateChange()}checkLoadingStateChange(){let e=this.sdkStateController?.state.isLoading||!1;this.previousLoadingState&&!e&&(this.jsInitialized=!0),this.previousLoadingState=e}render(){let e=this.sdkStateController.state,r=e.isLoading,i=e.error,n=!r&&!i;return m` ${$(r,()=>u)} ${$(i,()=>m`<primer-checkout-error></primer-checkout-error>`)} ${$(n,()=>m` <slot name=\"main\" @slotchange=${this.onSlotChange}></slot> ${$(this.hasAssignedContent,()=>u,()=>m`<primer-main></primer-main>`)} `,()=>u)} `}addEventListener(e,r,i){super.addEventListener(e,r,i)}}"
         },
         {
           "kind": "variable",
@@ -77,37 +77,37 @@
         {
           "kind": "variable",
           "name": "Z",
-          "default": "class extends f{constructor(){super(...arguments);this.paymentManagers=new Map;this.sdkState=null;this.headlessUtils=null;this.klarnaCategories=null;this.selectedCategory=null;this.isExpanded=!1;this.headerAriaLabel=P(\"pay_with\",{id:\"pay_with\"});this._paymentMethodManagerTask=new V(this,{task:async([e,r])=>{if(!e||!r)return $;let i=await r.getCDNAssets(\"KLARNA\");return{manager:e.manager,klarnaIcon:i?.assets?.icon?`${i.goatCdnUrl}/${i.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){N.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){N.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?m`<div class=\"loading\"> <primer-spinner size=\"small\"></primer-spinner> </div>`:e.length<=1?u:m` <div class=\"category-selection\"> ${e.map(i=>m` <button class=${ce({\"category-button\":!0,selected:i.id===this.selectedCategory})} @click=${()=>{this.selectCategory(i.id)}} > ${i.name} </button> `)} </div> `}renderExpandedContent(){return m` ${this.renderCategorySelection()} ${this.selectedCategory?m` <div id=\"klarna-category-container\" class=\"klarna-category-container\" ></div> `:u} <button class=${ce({\"klarna-pay-button\":!0,loading:!!this.sdkState?.isProcessing,disabled:!this.selectedCategory})} ?disabled=${!this.selectedCategory||this.sdkState?.isProcessing} @click=${()=>this.startKlarnaPayment()} > ${P(\"confirm\",{id:\"confirm\"})} </button> `}render(){return this._paymentMethodManagerTask.render({error:e=>{let r=e instanceof Error?e.message:\"Unknown error in Klarna\";return m`<div class=\"error\"> Error loading Klarna: ${r} </div>`},complete:({manager:e,klarnaIcon:r})=>e?m` <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} > <img src=${r} alt=\"Klarna logo\" /> <span>${P(\"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> `:u})}}"
+          "default": "class extends f{constructor(){super(...arguments);this.paymentManagers=new Map;this.sdkState=null;this.headlessUtils=null;this.klarnaCategories=null;this.selectedCategory=null;this.isExpanded=!1;this.headerAriaLabel=P(\"pay_with\",{id:\"pay_with\"});this._paymentMethodManagerTask=new V(this,{task:async([e,r])=>{if(!e||!r)return D;let i=await r.getCDNAssets(\"KLARNA\");return{manager:e.manager,klarnaIcon:i?.assets?.icon?`${i.goatCdnUrl}/${i.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){N.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){N.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?m`<div class=\"loading\"> <primer-spinner size=\"small\"></primer-spinner> </div>`:e.length<=1?u:m` <div class=\"category-selection\"> ${e.map(i=>m` <button class=${ce({\"category-button\":!0,selected:i.id===this.selectedCategory})} @click=${()=>{this.selectCategory(i.id)}} > ${i.name} </button> `)} </div> `}renderExpandedContent(){return m` ${this.renderCategorySelection()} ${this.selectedCategory?m` <div id=\"klarna-category-container\" class=\"klarna-category-container\" ></div> `:u} <button class=${ce({\"klarna-pay-button\":!0,loading:!!this.sdkState?.isProcessing,disabled:!this.selectedCategory})} ?disabled=${!this.selectedCategory||this.sdkState?.isProcessing} @click=${()=>this.startKlarnaPayment()} > ${P(\"confirm\",{id:\"confirm\"})} </button> `}render(){return this._paymentMethodManagerTask.render({error:e=>{let r=e instanceof Error?e.message:\"Unknown error in Klarna\";return m`<div class=\"error\"> Error loading Klarna: ${r} </div>`},complete:({manager:e,klarnaIcon:r})=>e?m` <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} > <img src=${r} alt=\"Klarna logo\" /> <span>${P(\"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> `:u})}}"
         },
         {
           "kind": "variable",
-          "name": "$e",
+          "name": "De",
           "default": "class extends f{constructor(){super(...arguments);this.type=void 0;this.paymentMethods=null}render(){if(!this.type)return u;let e=this.paymentMethods?.get(this.type);if(!e)return u;switch(e?.managerType){case\"CARD\":return m`<primer-card-form></primer-card-form>`;case\"NATIVE\":return m`<primer-native-payment .paymentMethod=${e} ></primer-native-payment>`;case\"REDIRECT\":return m`<primer-redirect-payment .paymentMethod=${e} ></primer-redirect-payment>`;case\"KLARNA\":return m`<primer-klarna></primer-klarna>`;default:return u}}}"
         },
         {
           "kind": "variable",
           "name": "ge",
-          "default": "class extends f{constructor(){super(...arguments);this.paymentManagers=new Map;this.sdkState=null;this.headlessUtils=null;this._paymentMethodManagerTask=new V(this,{task:async([e,r])=>!e||!r?$:r.get(e)?.manager,args:()=>[this.paymentMethod?.type,this.paymentManagers]});this._getAssetsTask=new V(this,{task:async([e,r])=>{if(!e||!r)return $;let i=r.getPaymentMethodConfiguration(e);return i?{backgroundColor:i.displayMetadata.button.backgroundColor.colored,name:i.name,iconUrl:i.displayMetadata.button.iconUrl.colored}:$},args:()=>[this.paymentMethod?.type,this.headlessUtils]});this._setupTasks=new V(this,{task:async([e,r])=>!e||!r?$:{paymentMethodManager:e,assetsConfig:r},args:()=>[this._paymentMethodManagerTask.value,this._getAssetsTask.value]})}startRedirectPayment(){this._paymentMethodManagerTask.value&&this._paymentMethodManagerTask.value.start()}render(){return this._setupTasks.render({error:()=>u,complete:({assetsConfig:e})=>(this.style.setProperty(\"--redirect-payment-button-bg-color\",e.backgroundColor),m` <primer-button @click=\"${()=>this.startRedirectPayment()}\" class=${ce({loading:!!this.sdkState?.isProcessing})} title=\"${P(\"pay_with\",{id:\"pay_with\"})} ${e.name}\" > <span class=\"image-container\"> <img src=\"${e.iconUrl}\" alt=\"${e.name}\" /> </span> </primer-button>`)})}}"
+          "default": "class extends f{constructor(){super(...arguments);this.paymentManagers=new Map;this.sdkState=null;this.headlessUtils=null;this._paymentMethodManagerTask=new V(this,{task:async([e,r])=>!e||!r?D:r.get(e)?.manager,args:()=>[this.paymentMethod?.type,this.paymentManagers]});this._getAssetsTask=new V(this,{task:async([e,r])=>{if(!e||!r)return D;let i=r.getPaymentMethodConfiguration(e);return i?{backgroundColor:i.displayMetadata.button.backgroundColor.colored,name:i.name,iconUrl:i.displayMetadata.button.iconUrl.colored}:D},args:()=>[this.paymentMethod?.type,this.headlessUtils]});this._setupTasks=new V(this,{task:async([e,r])=>!e||!r?D:{paymentMethodManager:e,assetsConfig:r},args:()=>[this._paymentMethodManagerTask.value,this._getAssetsTask.value]})}startRedirectPayment(){this._paymentMethodManagerTask.value&&this._paymentMethodManagerTask.value.start()}render(){return this._setupTasks.render({error:()=>u,complete:({assetsConfig:e})=>(this.style.setProperty(\"--redirect-payment-button-bg-color\",e.backgroundColor),m` <primer-button @click=\"${()=>this.startRedirectPayment()}\" class=${ce({loading:!!this.sdkState?.isProcessing})} title=\"${P(\"pay_with\",{id:\"pay_with\"})} ${e.name}\" > <span class=\"image-container\"> <img src=\"${e.iconUrl}\" alt=\"${e.name}\" /> </span> </primer-button>`)})}}"
         },
         {
           "kind": "variable",
-          "name": "De",
-          "default": "class extends f{constructor(){super(...arguments);this.hasAssignedContent=!1;this.onSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=i.length>0,this.requestUpdate()};this.paymentMethods=null;this.sdkState=null}render(){return this.sdkState?.isSuccessful?m` <slot name=\"checkout-complete\"> <primer-checkout-complete></primer-checkout-complete> </slot> `:m` <slot name=\"payments\" @slotchange=${this.onSlotChange}></slot> ${D(this.hasAssignedContent,()=>u,()=>m` <div class=${ce({\"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=>m` <primer-payment-method type=${e.type} ></primer-payment-method> `)} </div> </primer-show-other-payments> <primer-error-message-container></primer-error-message-container> </div> `)} `}}"
+          "name": "$e",
+          "default": "class extends f{constructor(){super(...arguments);this.hasAssignedContent=!1;this.onSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=i.length>0,this.requestUpdate()};this.paymentMethods=null;this.sdkState=null}render(){return this.sdkState?.isSuccessful?m` <slot name=\"checkout-complete\"> <primer-checkout-complete></primer-checkout-complete> </slot> `:m` <slot name=\"payments\" @slotchange=${this.onSlotChange}></slot> ${$(this.hasAssignedContent,()=>u,()=>m` <div class=${ce({\"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=>m` <primer-payment-method type=${e.type} ></primer-payment-method> `)} </div> </primer-show-other-payments> <primer-error-message-container></primer-error-message-container> </div> `)} `}}"
         },
         {
           "kind": "variable",
           "name": "Me",
-          "default": "class extends f{constructor(){super();this.paymentManagers=new Map;this.computedStyles=null;this._buttonId=\"button-container\";this.loadManagerTask=new V(this,{args:()=>[this.paymentMethod?.type],task:async([e])=>{if(!e)return $;let r=this.paymentManagers.get(e)?.manager;if(!r)throw new Error(`No manager found for payment method type ${e}`);return r}}),new V(this,{args:()=>[this.loadManagerTask.value],task:async([e])=>{if(!e)return $;await this.updateComplete;let r=this.shadowRoot?.getElementById(this._buttonId);if(!r)return;let i=this.calculateButtonHeight(),n=e.createButton(),p=this.createRenderOptions(i);return await n.render(this.paymentMethod?.type===\"GOOGLE_PAY\"?this.shadowRoot?.getRootNode():r,p),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:()=>u,complete:()=>m` <!-- The native button container is rendered first --> <div class=\"native-button-container\" id=\"${this._buttonId}\"></div> `,pending:()=>u})}}"
+          "default": "class extends f{constructor(){super();this.paymentManagers=new Map;this.computedStyles=null;this._buttonId=\"button-container\";this.loadManagerTask=new V(this,{args:()=>[this.paymentMethod?.type],task:async([e])=>{if(!e)return D;let r=this.paymentManagers.get(e)?.manager;if(!r)throw new Error(`No manager found for payment method type ${e}`);return r}}),new V(this,{args:()=>[this.loadManagerTask.value],task:async([e])=>{if(!e)return D;await this.updateComplete;let r=this.shadowRoot?.getElementById(this._buttonId);if(!r)return;let i=this.calculateButtonHeight(),n=e.createButton(),p=this.createRenderOptions(i);return await n.render(this.paymentMethod?.type===\"GOOGLE_PAY\"?this.shadowRoot?.getRootNode():r,p),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:()=>u,complete:()=>m` <!-- The native button container is rendered first --> <div class=\"native-button-container\" id=\"${this._buttonId}\"></div> `,pending:()=>u})}}"
         },
         {
           "kind": "variable",
           "name": "_e",
-          "default": "class extends f{constructor(){super(...arguments);this.hasAssignedContent=!1;this.selectedCardNetwork=null;this.paymentManagers=new Map;this.cardFormProvider=new K(this,{context:gr,initialValue:null});this.eventsController=new tt(this);this.setupCardFormTask=new V(this,{task:async([e])=>{if(!e?.manager)return $;let{manager:r}=e,{cardNumberInput:i,expiryInput:n,cvvInput:p}=r.createHostedInputs();return this.cardFormProvider.setValue({cardNumberInput:i,expiryInput:n,cvvInput:p,setCardholderName:x=>r.setCardholderName(x),setCardNetwork:x=>{this.selectedCardNetwork=x},validate:()=>r.validate(),submit:x=>r.submit(x)}),!0},args:()=>[this.paymentManagers.get(\"PAYMENT_CARD\")]});this.handleSlotButtonClick=e=>{let i=e.target.closest(\"button, primer-button\");if(!i)return;this.isSubmitButton(i)&&(e.preventDefault(),this.submitCardPayment())};this.handleDirectSubmit=e=>{e.stopPropagation(),this.submitCardPayment()};this.onSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=i.length>0};this.handleFormSubmit=e=>{e.preventDefault(),e.stopPropagation(),this.submitCardPayment()}}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(),i=r===\"button\",n=r===\"primer-button\";return i&&(e.getAttribute(\"type\")===\"submit\"||e.hasAttribute(\"data-submit\"))||n&&(e.getAttribute(\"buttonType\")===\"submit\"||e.hasAttribute(\"data-submit\"))}async submitCardPayment(){let e=this.cardFormProvider.value;if(!e)return;let r=await e.validate?.();if(r?.valid){let i=await e.submit?.(this.selectedCardNetwork?{cardNetwork:this.selectedCardNetwork}:void 0);this.eventsController.dispatchFormSubmitSuccess(i)}else{let i=r?.validationErrors;this.cardFormProvider.setValue({...e,errors:i}),this.eventsController.dispatchFormSubmitErrors(i)}}render(){return this.setupCardFormTask.status===ke.ERROR||this.setupCardFormTask.status===ke.INITIAL?u:m` <form @submit=${this.handleFormSubmit}> <slot name=\"card-form-content\" @slotchange=${this.onSlotChange}></slot> ${this.setupCardFormTask.render({complete:()=>D(this.hasAssignedContent,()=>u,()=>m` <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> `}}"
+          "default": "class extends f{constructor(){super(...arguments);this.hasAssignedContent=!1;this.selectedCardNetwork=null;this.paymentManagers=new Map;this.cardFormProvider=new K(this,{context:gr,initialValue:null});this.eventsController=new tt(this);this.setupCardFormTask=new V(this,{task:async([e])=>{if(!e?.manager)return D;let{manager:r}=e,{cardNumberInput:i,expiryInput:n,cvvInput:p}=r.createHostedInputs();return this.cardFormProvider.setValue({cardNumberInput:i,expiryInput:n,cvvInput:p,setCardholderName:x=>r.setCardholderName(x),setCardNetwork:x=>{this.selectedCardNetwork=x},validate:()=>r.validate(),submit:x=>r.submit(x)}),!0},args:()=>[this.paymentManagers.get(\"PAYMENT_CARD\")]});this.handleSlotButtonClick=e=>{let i=e.target.closest(\"button, primer-button\");if(!i)return;this.isSubmitButton(i)&&(e.preventDefault(),this.submitCardPayment())};this.handleDirectSubmit=e=>{e.stopPropagation(),this.submitCardPayment()};this.onSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=i.length>0};this.handleFormSubmit=e=>{e.preventDefault(),e.stopPropagation(),this.submitCardPayment()}}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(),i=r===\"button\",n=r===\"primer-button\";return i&&(e.getAttribute(\"type\")===\"submit\"||e.hasAttribute(\"data-submit\"))||n&&(e.getAttribute(\"buttonType\")===\"submit\"||e.hasAttribute(\"data-submit\"))}async submitCardPayment(){let e=this.cardFormProvider.value;if(!e)return;let r=await e.validate?.();if(r?.valid){let i=await e.submit?.(this.selectedCardNetwork?{cardNetwork:this.selectedCardNetwork}:void 0);this.eventsController.dispatchFormSubmitSuccess(i)}else{let i=r?.validationErrors;this.cardFormProvider.setValue({...e,errors:i}),this.eventsController.dispatchFormSubmitErrors(i)}}render(){return this.setupCardFormTask.status===ke.ERROR||this.setupCardFormTask.status===ke.INITIAL?u:m` <form @submit=${this.handleFormSubmit}> <slot name=\"card-form-content\" @slotchange=${this.onSlotChange}></slot> ${this.setupCardFormTask.render({complete:()=>$(this.hasAssignedContent,()=>u,()=>m` <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> `}}"
         },
         {
           "kind": "variable",
           "name": "lt",
-          "default": "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.childUpdated()}handleNetworkSelected(e){let{network:r}=e.detail;this.cardFormContext&&this.cardFormContext.setCardNetwork(r)}renderInput(){if(this.hostedInputController.setupTask.status===ke.ERROR)return u;let e=this.getError();return m` <primer-input-wrapper .focusWithin=\"${this.hostedInputController.isFocused}\" .hasError=${!!e} > <primer-input-label slot=\"label\">${this.label}</primer-input-label> <div slot=\"input\" class=\"card-number-container\"> <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> ${D(e,r=>m` <primer-input-error slot=\"error\"> ${P(r,{id:r})} </primer-input-error> `,()=>u)} </primer-input-wrapper> `}render(){return this.renderInput()}}"
+          "default": "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.childUpdated()}handleNetworkSelected(e){let{network:r}=e.detail;this.cardFormContext&&this.cardFormContext.setCardNetwork(r)}renderInput(){if(this.hostedInputController.setupTask.status===ke.ERROR)return u;let e=this.getError();return m` <primer-input-wrapper .focusWithin=\"${this.hostedInputController.isFocused}\" .hasError=${!!e} > <primer-input-label slot=\"label\">${this.label}</primer-input-label> <div slot=\"input\" class=\"card-number-container\"> <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> ${$(e,r=>m` <primer-input-error slot=\"error\"> ${P(r,{id:r})} </primer-input-error> `,()=>u)} </primer-input-wrapper> `}render(){return this.renderInput()}}"
         },
         {
           "kind": "variable",
@@ -132,17 +132,17 @@
         {
           "kind": "variable",
           "name": "le",
-          "default": "class extends f{constructor(){super(...arguments);this.cardNetworks=null;this.headlessUtils=null;this.selectedCardNetwork=null;this.isDropdownOpen=!1;this.focusedNetworkIndex=0;this.isKeyboardNavigation=!1;this.buttonRef=ao();this.dropdownRef=ao();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)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||(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}}}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(i=>i.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(\"keydown\",this.handleKeyDown),document.addEventListener(\"mousemove\",this.handleMouseMove)},0)}disconnectedCallback(){document.removeEventListener(\"click\",this.handleClickOutside),document.removeEventListener(\"keydown\",this.handleKeyDown),document.removeEventListener(\"mousemove\",this.handleMouseMove),super.disconnectedCallback()}render(){if(this.cardNetworks?.isLoading)return m`<primer-spinner size=\"small\" compact></primer-spinner>`;let e=this.getSelectableNetworks();if(!this.getDetectedNetwork()&&e.length===0)return m`<primer-icon name=\"payment-card\"></primer-icon>`;let r=this.getDetectedNetwork()||(e.length>0?e[0]:null);if(!r)return m`<primer-icon name=\"payment-card\" size=\"sm\"></primer-icon>`;let i=e.length>1;return m` <button ${br(this.buttonRef)} class=\"network-selector\" @click=${this.toggleDropdown} aria-label=${i?`Selected card network: ${r.displayName}. Click to change.`:`Card network: ${r.displayName}`} aria-expanded=${i?this.isDropdownOpen:u} aria-haspopup=${i?\"true\":u} aria-controls=${i?\"network-dropdown\":u} > <img class=\"network-icon\" src=${this.getNetworkIconUrl(r)} alt=${r.displayName} /> ${D(i,()=>m` <primer-icon class=\"caret ${this.isDropdownOpen?\"open\":\"\"}\" name=\"chevron-down\" ></primer-icon> `,()=>u)} </button> ${D(this.isDropdownOpen,()=>m` <div ${br(this.dropdownRef)} id=\"network-dropdown\" class=\"dropdown open\" role=\"listbox\" aria-label=\"Select card network\" > ${e.map((n,p)=>m` <div ${br(x=>this.setNetworkOptionRef(x,p))} class=\"network-option ${this.isKeyboardNavigation&&p===this.focusedNetworkIndex?\"focused\":\"\"}\" @click=${x=>this.selectNetwork(x,n)} @keydown=${x=>{(x.key===\"Enter\"||x.key===\" \")&&this.selectNetwork(x,n)}} role=\"option\" aria-selected=${n.network===r.network} tabindex=\"${p===this.focusedNetworkIndex?\"0\":\"-1\"}\" > <img class=\"network-option-icon\" src=${this.getNetworkIconUrl(n)} alt=${n.displayName} /> <span class=\"network-name\">${n.displayName}</span> ${D(n.network===r.network,()=>m` <primer-icon class=\"checkmark\" name=\"checkmark\" ></primer-icon> `,()=>u)} </div> `)} </div> `,()=>u)} `}}"
+          "default": "class extends f{constructor(){super(...arguments);this.cardNetworks=null;this.headlessUtils=null;this.selectedCardNetwork=null;this.isDropdownOpen=!1;this.focusedNetworkIndex=0;this.isKeyboardNavigation=!1;this.buttonRef=ao();this.dropdownRef=ao();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(i=>i.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 m`<primer-spinner size=\"small\" compact></primer-spinner>`;let e=this.getSelectableNetworks();if(!this.getDetectedNetwork()&&e.length===0)return m`<primer-icon name=\"payment-card\"></primer-icon>`;let r=this.getDetectedNetwork()||(e.length>0?e[0]:null);if(!r)return m`<primer-icon name=\"payment-card\" size=\"sm\"></primer-icon>`;let i=e.length>1;return m` <button ${br(this.buttonRef)} class=\"network-selector\" @click=${this.toggleDropdown} @keydown=${n=>{(n.key===\" \"||n.key===\"Enter\")&&i&&(n.preventDefault(),this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen&&(this.focusedNetworkIndex=this.getSelectedNetworkIndex()))}} aria-label=${i?`Selected card network: ${r.displayName}. Click to change.`:`Card network: ${r.displayName}`} aria-expanded=${i?this.isDropdownOpen:u} aria-haspopup=${i?\"true\":u} aria-controls=${i?\"network-dropdown\":u} > <img class=\"network-icon\" src=${this.getNetworkIconUrl(r)} alt=${r.displayName} /> ${$(i,()=>m` <primer-icon class=\"caret ${this.isDropdownOpen?\"open\":\"\"}\" name=\"chevron-down\" ></primer-icon> `,()=>u)} </button> ${$(this.isDropdownOpen,()=>m` <div ${br(this.dropdownRef)} id=\"network-dropdown\" class=\"dropdown open\" role=\"listbox\" aria-label=\"Select card network\" > ${e.map((n,p)=>m` <div ${br(x=>this.setNetworkOptionRef(x,p))} class=\"network-option ${this.isKeyboardNavigation&&p===this.focusedNetworkIndex?\"focused\":\"\"}\" @click=${x=>this.selectNetwork(x,n)} @keydown=${x=>{(x.key===\"Enter\"||x.key===\" \")&&this.selectNetwork(x,n)}} role=\"option\" aria-selected=${n.network===r.network} tabindex=\"${p===this.focusedNetworkIndex?\"0\":\"-1\"}\" > <img class=\"network-option-icon\" src=${this.getNetworkIconUrl(n)} alt=${n.displayName} /> <span class=\"network-name\">${n.displayName}</span> ${$(n.network===r.network,()=>m` <primer-icon class=\"checkmark\" name=\"checkmark\" ></primer-icon> `,()=>u)} </div> `)} </div> `,()=>u)} `}}"
         },
         {
           "kind": "variable",
           "name": "pe",
-          "default": "class extends f{constructor(){super(...arguments);this.vaultManagerContext=null;this.isEditMode=!1;this.deletePaymentMethodId=null;this.isDeleting=!1;this.errorMessage=\"\"}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=P(\"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:P(\"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:P(\"payment_processing_error\",{id:\"payment_processing_error\"})}handleCloseError(){this.errorMessage=\"\"}getPaymentMethodName(e){if(!this.vaultManagerContext)return\"\";let r=this.vaultManagerContext.vaultedPaymentMethods.find(i=>i.id===e);if(!r)return\"\";try{return Cr(r).description||\"\"}catch{return\"\"}}renderDeleteConfirmation(){if(!this.deletePaymentMethodId)return u;let e=this.getPaymentMethodName(this.deletePaymentMethodId);return m` <div class=\"delete-confirmation-container\"> <primer-vault-delete-confirmation .isDeleting=${this.isDeleting} .paymentMethodId=${this.deletePaymentMethodId} .paymentMethodName=${e} @confirm-delete=${this.handleConfirmDelete} @cancel-delete=${this.handleCancelDelete} ></primer-vault-delete-confirmation> </div> `}renderPaymentMethodItem(e){return this.deletePaymentMethodId===e.id?u:m` <primer-vault-payment-method-item .paymentMethod=${e} .isEditMode=${this.isEditMode} @delete-payment-method=${this.handleDeletePaymentMethod} ></primer-vault-payment-method-item> `}render(){if(!this.vaultManagerContext?.enabled)return u;let e=this.vaultManagerContext.vaultedPaymentMethods.length>0,r=this.vaultManagerContext.isLoading,i=!this.isEditMode&&e&&!r&&!this.deletePaymentMethodId;return m` <div class=\"vault-manager\"> <primer-vault-manager-header .isEditMode=${this.isEditMode} .hasPaymentMethods=${e} @toggle-edit-mode=${this.handleToggleEditMode} ></primer-vault-manager-header> ${D(this.errorMessage,()=>m` <primer-vault-error-message .errorMessage=${this.errorMessage} @close-error=${this.handleCloseError} ></primer-vault-error-message> `,()=>u)} <div class=\"vault-manager-content\"> ${D(!r&&!e,()=>m`<primer-vault-empty-state></primer-vault-empty-state>`,()=>u)} ${D(!r&&e&&this.deletePaymentMethodId,()=>this.renderDeleteConfirmation(),()=>u)} ${D(!r&&e&&!this.deletePaymentMethodId,()=>m` <div class=\"payment-methods-list\"> ${this.vaultManagerContext?.vaultedPaymentMethods.map(n=>this.renderPaymentMethodItem(n))} ${D(i,()=>m` <primer-vault-payment-submit @primer-vault-payment-error=${this.handlePaymentError} ></primer-vault-payment-submit> `,()=>u)} </div> `,()=>u)} </div> </div> `}}"
+          "default": "class extends f{constructor(){super(...arguments);this.vaultManagerContext=null;this.isEditMode=!1;this.deletePaymentMethodId=null;this.isDeleting=!1;this.errorMessage=\"\"}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=P(\"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:P(\"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:P(\"payment_processing_error\",{id:\"payment_processing_error\"})}handleCloseError(){this.errorMessage=\"\"}getPaymentMethodName(e){if(!this.vaultManagerContext)return\"\";let r=this.vaultManagerContext.vaultedPaymentMethods.find(i=>i.id===e);if(!r)return\"\";try{return Cr(r).description||\"\"}catch{return\"\"}}renderDeleteConfirmation(){if(!this.deletePaymentMethodId)return u;let e=this.getPaymentMethodName(this.deletePaymentMethodId);return m` <div class=\"delete-confirmation-container\"> <primer-vault-delete-confirmation .isDeleting=${this.isDeleting} .paymentMethodId=${this.deletePaymentMethodId} .paymentMethodName=${e} @confirm-delete=${this.handleConfirmDelete} @cancel-delete=${this.handleCancelDelete} ></primer-vault-delete-confirmation> </div> `}renderPaymentMethodItem(e){return this.deletePaymentMethodId===e.id?u:m` <primer-vault-payment-method-item .paymentMethod=${e} .isEditMode=${this.isEditMode} @delete-payment-method=${this.handleDeletePaymentMethod} ></primer-vault-payment-method-item> `}render(){if(!this.vaultManagerContext?.enabled)return u;let e=this.vaultManagerContext.vaultedPaymentMethods.length>0,r=this.vaultManagerContext.isLoading,i=!this.isEditMode&&e&&!r&&!this.deletePaymentMethodId;return m` <div class=\"vault-manager\"> <primer-vault-manager-header .isEditMode=${this.isEditMode} .hasPaymentMethods=${e} @toggle-edit-mode=${this.handleToggleEditMode} ></primer-vault-manager-header> ${$(this.errorMessage,()=>m` <primer-vault-error-message .errorMessage=${this.errorMessage} @close-error=${this.handleCloseError} ></primer-vault-error-message> `,()=>u)} <div class=\"vault-manager-content\"> ${$(!r&&!e,()=>m`<primer-vault-empty-state></primer-vault-empty-state>`,()=>u)} ${$(!r&&e&&this.deletePaymentMethodId,()=>this.renderDeleteConfirmation(),()=>u)} ${$(!r&&e&&!this.deletePaymentMethodId,()=>m` <div class=\"payment-methods-list\"> ${this.vaultManagerContext?.vaultedPaymentMethods.map(n=>this.renderPaymentMethodItem(n))} ${$(i,()=>m` <primer-vault-payment-submit @primer-vault-payment-error=${this.handlePaymentError} ></primer-vault-payment-submit> `,()=>u)} </div> `,()=>u)} </div> </div> `}}"
         },
         {
           "kind": "variable",
           "name": "me",
-          "default": "class extends f{constructor(){super(...arguments);this.vaultManagerContext=null;this.vaultItemContext=null;this.headlessUtils=null;this.paymentMethod=null;this.isEditMode=!1;this._getAssetsTask=new V(this,{task:async([e,r,i])=>{if(!e||!r||!i)return $;let n=\"\";if(ji(e))n=r.getCardNetworkAsset(e.paymentInstrumentData.network).cardUrl;else{let h=await r.getCDNAssets(e.paymentMethodType);h&&(n=h.assets?.icon?`${h.goatCdnUrl}/${h.assets.icon}`:\"\")}let p=i.cvvRecapture,x=Cr(e);return{icon:n,shouldShowCVV:p,...x}},args:()=>[this.paymentMethod,this.headlessUtils,this.vaultManagerContext]})}isSelected(){if(!this.vaultManagerContext||!this.paymentMethod)return!1;let e=this.vaultItemContext?.selectedVaultedPaymentMethod;return!!e&&e.id===this.paymentMethod.id}handleClick(){this.isEditMode||!this.vaultManagerContext||!this.paymentMethod||(this.isSelected()?this.vaultItemContext?.setSelectedVaultedPaymentMethod(null):this.vaultItemContext?.setSelectedVaultedPaymentMethod(this.paymentMethod))}handleDeleteClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent(\"delete-payment-method\",{detail:this.paymentMethod?.id,bubbles:!0,composed:!0}))}renderPaymentMethodContent(e){let r=e.icon?m`<img class=\"payment-method-icon\" src=${e.icon} alt=${e.description} />`:m` <div class=\"payment-method-icon payment-method-icon-generic\"> <primer-icon name=\"payment-card\" size=\"sm\"></primer-icon> </div> `;return m` ${r} <div class=\"payment-method-details\"> <div class=\"payment-method-description\">${e.description}</div> ${e.secondaryDescription?m`<div class=\"payment-method-secondary-description\"> ${e.secondaryDescription} </div>`:u} </div> `}render(){return this._getAssetsTask.render({error:()=>u,complete:e=>{let r=this.isSelected()?\"checked\":\"default\";return this.isEditMode?m` <div class=\"payment-method-item\" @click=${this.handleClick}> <div class=\"payment-method-content\"> ${this.renderPaymentMethodContent(e)} <button class=\"delete-button\" @click=${this.handleDeleteClick} aria-label=${`${P(\"delete\",{id:\"delete\"})} ${e.description}`} > <primer-icon name=\"trash\" size=\"sm\"></primer-icon> </button> </div> </div> `:m` <div class=\"payment-method-wrapper\"> <primer-button variant=\"secondary\" class=\"payment-method-button\" selectable selectionState=${r} @click=${this.handleClick} > ${this.renderPaymentMethodContent(e)} </primer-button> ${D(e.shouldShowCVV&&this.isSelected(),()=>m`<primer-vault-cvv-input .paymentMethod=\"${this.paymentMethod}\" ></primer-vault-cvv-input>`)} </div> `}})}}"
+          "default": "class extends f{constructor(){super(...arguments);this.vaultManagerContext=null;this.vaultItemContext=null;this.headlessUtils=null;this.paymentMethod=null;this.isEditMode=!1;this._getAssetsTask=new V(this,{task:async([e,r,i])=>{if(!e||!r||!i)return D;let n=\"\";if(ji(e))n=r.getCardNetworkAsset(e.paymentInstrumentData.network).cardUrl;else{let h=await r.getCDNAssets(e.paymentMethodType);h&&(n=h.assets?.icon?`${h.goatCdnUrl}/${h.assets.icon}`:\"\")}let p=i.cvvRecapture,x=Cr(e);return{icon:n,shouldShowCVV:p,...x}},args:()=>[this.paymentMethod,this.headlessUtils,this.vaultManagerContext]})}isSelected(){if(!this.vaultManagerContext||!this.paymentMethod)return!1;let e=this.vaultItemContext?.selectedVaultedPaymentMethod;return!!e&&e.id===this.paymentMethod.id}handleClick(){this.isEditMode||!this.vaultManagerContext||!this.paymentMethod||(this.isSelected()?this.vaultItemContext?.setSelectedVaultedPaymentMethod(null):this.vaultItemContext?.setSelectedVaultedPaymentMethod(this.paymentMethod))}handleDeleteClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent(\"delete-payment-method\",{detail:this.paymentMethod?.id,bubbles:!0,composed:!0}))}renderPaymentMethodContent(e){let r=e.icon?m`<img class=\"payment-method-icon\" src=${e.icon} alt=${e.description} />`:m` <div class=\"payment-method-icon payment-method-icon-generic\"> <primer-icon name=\"payment-card\" size=\"sm\"></primer-icon> </div> `;return m` ${r} <div class=\"payment-method-details\"> <div class=\"payment-method-description\">${e.description}</div> ${e.secondaryDescription?m`<div class=\"payment-method-secondary-description\"> ${e.secondaryDescription} </div>`:u} </div> `}render(){return this._getAssetsTask.render({error:()=>u,complete:e=>{let r=this.isSelected()?\"checked\":\"default\";return this.isEditMode?m` <div class=\"payment-method-item\" @click=${this.handleClick}> <div class=\"payment-method-content\"> ${this.renderPaymentMethodContent(e)} <button class=\"delete-button\" @click=${this.handleDeleteClick} aria-label=${`${P(\"delete\",{id:\"delete\"})} ${e.description}`} > <primer-icon name=\"trash\" size=\"sm\"></primer-icon> </button> </div> </div> `:m` <div class=\"payment-method-wrapper\"> <primer-button variant=\"secondary\" class=\"payment-method-button\" selectable selectionState=${r} @click=${this.handleClick} > ${this.renderPaymentMethodContent(e)} </primer-button> ${$(e.shouldShowCVV&&this.isSelected(),()=>m`<primer-vault-cvv-input .paymentMethod=\"${this.paymentMethod}\" ></primer-vault-cvv-input>`)} </div> `}})}}"
         },
         {
           "kind": "variable",
@@ -172,7 +172,7 @@
         {
           "kind": "variable",
           "name": "J",
-          "default": "class extends f{constructor(){super();this.vaultManagerFormContext=null;this.vaultManagerCvvContext=null;this.computedStyles=null;this.paymentMethod=null;this.cvvError=null;this.cvvInputIsDirty=!1;this.cvvInputIsBlurred=!1;this.cvvInput=null;this._setupCVVIframe=new V(this,{task:async([e,r])=>!e||!r||e.paymentMethodType!==\"PAYMENT_CARD\"||!e.paymentInstrumentData?.network||r.createCvvInput===void 0?$:{network:e.paymentInstrumentData.network,createCvvInput:r.createCvvInput},args:()=>[this.paymentMethod,this.vaultManagerFormContext]});this.cvvContainerId=`cvv-container-${Math.random().toString(36).substring(2,9)}`,new V(this,{task:async([e])=>{if(!e)return $;await this.updateComplete;let r=this.renderRoot.querySelector(`#${this.cvvContainerId}`);if(!r)return;let i=fr(this.computedStyles),n=i?{input:{base:i}}:void 0,p={cardNetwork:e.network,container:r,name:\"cvv\",placeholder:\"123\",style:n};this.cvvInput=await e.createCvvInput(p),this.cvvInput&&(this.cvvInput.focus(),this.cvvError=this.cvvInput.metadata.error||null,this.vaultManagerCvvContext?.setCvvInput(this.cvvInput),this.cvvInput.addListener(\"change\",()=>{this.onCvvInputChange()}),this.cvvInput.addListener(\"blur\",()=>{this.onBlur()}))},args:()=>[this._setupCVVIframe.value]})}disconnectedCallback(){super.disconnectedCallback(),this.cvvInput&&(this.cvvInput.remove(),this.cvvInput=null,this.cvvError=null,this.vaultManagerCvvContext?.setCvvInput(null))}onCvvInputChange(){!this.cvvInput||!this.vaultManagerCvvContext||(this.cvvInputIsDirty=!0,this.cvvError=this.cvvInput.metadata.error||null)}onBlur(){this.cvvInput&&(this.cvvInputIsBlurred=!0,this.cvvError=this.cvvInput.metadata.error||null)}render(){return this._setupCVVIframe.render({error:()=>u,complete:()=>m` <div class=\"cvv-input-container\"> <primer-input-wrapper .hasError=${!!this.cvvError&&(this.vaultManagerCvvContext?.formIsDirty||this.cvvInputIsDirty&&this.cvvInputIsBlurred)} > <primer-input-label slot=\"label\">CVV</primer-input-label> <div slot=\"input\" id=\"${this.cvvContainerId}\"></div> ${D(this.cvvError&&(this.vaultManagerCvvContext?.formIsDirty||this.cvvInputIsDirty&&this.cvvInputIsBlurred),()=>m` <primer-input-error slot=\"error\"> ${this.cvvError} </primer-input-error> `)} </primer-input-wrapper> </div> `})}}"
+          "default": "class extends f{constructor(){super();this.vaultManagerFormContext=null;this.vaultManagerCvvContext=null;this.computedStyles=null;this.paymentMethod=null;this.cvvError=null;this.cvvInputIsDirty=!1;this.cvvInputIsBlurred=!1;this.cvvInput=null;this._setupCVVIframe=new V(this,{task:async([e,r])=>!e||!r||e.paymentMethodType!==\"PAYMENT_CARD\"||!e.paymentInstrumentData?.network||r.createCvvInput===void 0?D:{network:e.paymentInstrumentData.network,createCvvInput:r.createCvvInput},args:()=>[this.paymentMethod,this.vaultManagerFormContext]});this.cvvContainerId=`cvv-container-${Math.random().toString(36).substring(2,9)}`,new V(this,{task:async([e])=>{if(!e)return D;await this.updateComplete;let r=this.renderRoot.querySelector(`#${this.cvvContainerId}`);if(!r)return;let i=fr(this.computedStyles),n=i?{input:{base:i}}:void 0,p={cardNetwork:e.network,container:r,name:\"cvv\",placeholder:\"123\",style:n};this.cvvInput=await e.createCvvInput(p),this.cvvInput&&(this.cvvInput.focus(),this.cvvError=this.cvvInput.metadata.error||null,this.vaultManagerCvvContext?.setCvvInput(this.cvvInput),this.cvvInput.addListener(\"change\",()=>{this.onCvvInputChange()}),this.cvvInput.addListener(\"blur\",()=>{this.onBlur()}))},args:()=>[this._setupCVVIframe.value]})}disconnectedCallback(){super.disconnectedCallback(),this.cvvInput&&(this.cvvInput.remove(),this.cvvInput=null,this.cvvError=null,this.vaultManagerCvvContext?.setCvvInput(null))}onCvvInputChange(){!this.cvvInput||!this.vaultManagerCvvContext||(this.cvvInputIsDirty=!0,this.cvvError=this.cvvInput.metadata.error||null)}onBlur(){this.cvvInput&&(this.cvvInputIsBlurred=!0,this.cvvError=this.cvvInput.metadata.error||null)}render(){return this._setupCVVIframe.render({error:()=>u,complete:()=>m` <div class=\"cvv-input-container\"> <primer-input-wrapper .hasError=${!!this.cvvError&&(this.vaultManagerCvvContext?.formIsDirty||this.cvvInputIsDirty&&this.cvvInputIsBlurred)} > <primer-input-label slot=\"label\">CVV</primer-input-label> <div slot=\"input\" id=\"${this.cvvContainerId}\"></div> ${$(this.cvvError&&(this.vaultManagerCvvContext?.formIsDirty||this.cvvInputIsDirty&&this.cvvInputIsBlurred),()=>m` <primer-input-error slot=\"error\"> ${this.cvvError} </primer-input-error> `)} </primer-input-wrapper> </div> `})}}"
         },
         {
           "kind": "variable",
@@ -352,7 +352,7 @@
           "kind": "js",
           "name": "PaymentMethod",
           "declaration": {
-            "name": "$e",
+            "name": "De",
             "module": "cdn/primer-components.js"
           }
         },
@@ -408,7 +408,7 @@
           "kind": "js",
           "name": "PrimerMain",
           "declaration": {
-            "name": "De",
+            "name": "$e",
             "module": "cdn/primer-components.js"
           }
         },
@@ -516,7 +516,7 @@
         },
         {
           "kind": "function",
-          "name": "B"
+          "name": "G"
         },
         {
           "kind": "function",
@@ -540,7 +540,7 @@
           "kind": "js",
           "name": "injectLightTheme",
           "declaration": {
-            "name": "B",
+            "name": "G",
             "module": "dist/primer-loader.js"
           }
         },
@@ -2473,78 +2473,226 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/controllers/card-network-controller.ts",
+      "path": "src/contexts/card-networks-context.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "cardNetworksContext"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "cardNetworksContext",
+          "declaration": {
+            "name": "cardNetworksContext",
+            "module": "src/contexts/card-networks-context.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/contexts/client-options-context.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "clientOptionsContext"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "clientOptionsContext",
+          "declaration": {
+            "name": "clientOptionsContext",
+            "module": "src/contexts/client-options-context.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/contexts/computed-styles-context.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "computedStylesContext"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "computedStylesContext",
+          "declaration": {
+            "name": "computedStylesContext",
+            "module": "src/contexts/computed-styles-context.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/contexts/headless-unitils-context.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "headlessUnitilsContext"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "headlessUnitilsContext",
+          "declaration": {
+            "name": "headlessUnitilsContext",
+            "module": "src/contexts/headless-unitils-context.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/contexts/klarna-categories-context.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "klarnaCategoriesContext"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "klarnaCategoriesContext",
+          "declaration": {
+            "name": "klarnaCategoriesContext",
+            "module": "src/contexts/klarna-categories-context.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/contexts/payment-manager-context.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "paymentManagerContext"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "paymentManagerContext",
+          "declaration": {
+            "name": "paymentManagerContext",
+            "module": "src/contexts/payment-manager-context.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/contexts/payment-methods-context.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "paymentMethodsContext"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "paymentMethodsContext",
+          "declaration": {
+            "name": "paymentMethodsContext",
+            "module": "src/contexts/payment-methods-context.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/contexts/payments-objects.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "CardNetworkController manages and processes card network data\n\nThis controller is responsible for:\n- Handling card network change events\n- Processing detected and selectable card networks\n- Maintaining card network state",
-          "name": "CardNetworkController",
+          "description": "",
+          "name": "InitializedPayments",
           "members": [
             {
               "kind": "field",
-              "name": "host",
+              "name": "_methods",
               "type": {
-                "text": "PrimerCheckoutType"
+                "text": "InitializedPaymentMethodMap"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "readonly": true,
+              "default": "map"
             },
             {
               "kind": "method",
-              "name": "hostConnected",
+              "name": "get",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "RedirectPaymentMethod | undefined"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "setCardNetworksLoading",
+              "name": "get",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "PaymentMethodByType<T> | undefined"
                 }
               },
-              "description": "Sets the card networks to loading state"
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "updateCardNetworksState",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
+              "name": "get",
               "parameters": [
                 {
-                  "name": "cardNetworks",
+                  "name": "type",
                   "type": {
-                    "text": "CardNetworksContext"
-                  },
-                  "description": "The new card networks context"
+                    "text": "T"
+                  }
                 }
-              ],
-              "description": "Updates card networks state and dispatches events"
+              ]
             },
             {
               "kind": "method",
-              "name": "processCardNetworkChangeEvent",
+              "name": "toArray",
               "return": {
                 "type": {
-                  "text": "Promise<void>"
+                  "text": "InitializedPaymentMethod[]"
                 }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CardNetworkChangeEvent"
-                  },
-                  "description": "The card network change event"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "size",
+              "return": {
+                "type": {
+                  "text": "number"
                 }
-              ],
-              "description": "Processes a card network change event"
+              }
             }
           ]
         }
@@ -2552,37 +2700,192 @@
       "exports": [
         {
           "kind": "js",
-          "name": "CardNetworkController",
+          "name": "InitializedPayments",
           "declaration": {
-            "name": "CardNetworkController",
-            "module": "src/controllers/card-network-controller.ts"
+            "name": "InitializedPayments",
+            "module": "src/contexts/payments-objects.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/controllers/headless-sdk-controller.ts",
+      "path": "src/contexts/sdk-state-context.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "HeadlessSdkController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "host",
-              "type": {
-                "text": "PrimerCheckoutType"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "sdkInstanceTask",
-              "type": {
-                "text": "Task<\n    [string | null, PrimerCheckoutOptions | null],\n    PrimerHeadlessCheckout | null\n  >"
-              },
-              "privacy": "private",
+          "kind": "variable",
+          "name": "sdkStateContext"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "sdkStateContext",
+          "declaration": {
+            "name": "sdkStateContext",
+            "module": "src/contexts/sdk-state-context.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/contexts/types.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/contexts/vault-item-context.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "vaultItemContext"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "vaultItemContext",
+          "declaration": {
+            "name": "vaultItemContext",
+            "module": "src/contexts/vault-item-context.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/contexts/vault-manager-context.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "vaultManagerContext"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "vaultManagerContext",
+          "declaration": {
+            "name": "vaultManagerContext",
+            "module": "src/contexts/vault-manager-context.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/controllers/card-network-controller.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "CardNetworkController manages and processes card network data\n\nThis controller is responsible for:\n- Handling card network change events\n- Processing detected and selectable card networks\n- Maintaining card network state",
+          "name": "CardNetworkController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "host",
+              "type": {
+                "text": "PrimerCheckoutType"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setCardNetworksLoading",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Sets the card networks to loading state"
+            },
+            {
+              "kind": "method",
+              "name": "updateCardNetworksState",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "cardNetworks",
+                  "type": {
+                    "text": "CardNetworksContext"
+                  },
+                  "description": "The new card networks context"
+                }
+              ],
+              "description": "Updates card networks state and dispatches events"
+            },
+            {
+              "kind": "method",
+              "name": "processCardNetworkChangeEvent",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CardNetworkChangeEvent"
+                  },
+                  "description": "The card network change event"
+                }
+              ],
+              "description": "Processes a card network change event"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CardNetworkController",
+          "declaration": {
+            "name": "CardNetworkController",
+            "module": "src/controllers/card-network-controller.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/controllers/headless-sdk-controller.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "HeadlessSdkController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "host",
+              "type": {
+                "text": "PrimerCheckoutType"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "sdkInstanceTask",
+              "type": {
+                "text": "Task<\n    [string | null, PrimerCheckoutOptions | null],\n    PrimerHeadlessCheckout | null\n  >"
+              },
+              "privacy": "private",
               "default": "new Task(host, { args: () => [this.host.clientToken, this.host.options] as const, task: this.initializeHeadless(), })"
             },
             {
@@ -3249,440 +3552,203 @@
                     "text": "Record<string, unknown>"
                   }
                 }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "reset"
-            },
-            {
-              "kind": "field",
-              "name": "state",
-              "type": {
-                "text": "SdkState"
-              },
-              "privacy": "public",
-              "readonly": true
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "initialSDKState",
-          "declaration": {
-            "name": "initialSDKState",
-            "module": "src/controllers/sdk-state-controller.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "SdkStateController",
-          "declaration": {
-            "name": "SdkStateController",
-            "module": "src/controllers/sdk-state-controller.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/controllers/style-processing-controller.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Controller that handles processing and application of custom styles to Lit components.\nSafely converts JSON style objects to CSS variables applied to the host element.",
-          "name": "StyleProcessingController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "host",
-              "type": {
-                "text": "ReactiveControllerHost & LitElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "cssVarCache",
-              "privacy": "private",
-              "static": true,
-              "default": "new Map<string, string>()"
-            },
-            {
-              "kind": "method",
-              "name": "processCustomStyles",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "jsonString",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The JSON string representing custom styles."
-                }
-              ],
-              "description": "Processes the customStyles JSON string.\nExpected JSON contains only CSS variable properties in camelCase."
-            },
-            {
-              "kind": "method",
-              "name": "isValidCssProperty",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "property",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The CSS property name to validate."
-                }
-              ],
-              "description": "Validates a CSS property name to ensure it follows expected patterns."
-            },
-            {
-              "kind": "method",
-              "name": "isValidCssValue",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The CSS value to validate."
-                }
-              ],
-              "description": "Validates a CSS value to ensure it only contains safe, expected characters.\nAllowed characters include alphanumerics, whitespace, and common CSS punctuation.\nThis helps prevent CSS injection attacks."
-            },
-            {
-              "kind": "method",
-              "name": "getCssVarName",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The camelCase property key"
-                }
-              ],
-              "description": "Gets the CSS variable name for a camelCase property key.\nUses caching for performance."
-            },
-            {
-              "kind": "method",
-              "name": "applyStyles",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "styles",
-                  "type": {
-                    "text": "StylesObject"
-                  },
-                  "description": "An object with style keys and corresponding CSS values."
-                }
-              ],
-              "description": "Transforms a styles object into CSS variables and applies them to the host element.\nEach key (in camelCase) is converted into a kebab-case CSS variable prefixed with '--'.\nOnly valid CSS properties and values are applied."
-            },
-            {
-              "kind": "method",
-              "name": "removeStyle",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The camelCase property key to remove"
-                }
-              ],
-              "description": "Removes a specific CSS variable from the host element"
-            },
-            {
-              "kind": "method",
-              "name": "clearAllStyles",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Removes all custom styles from the host element"
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Optional cleanup when the host is disconnected"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "StyleProcessingController",
-          "declaration": {
-            "name": "StyleProcessingController",
-            "module": "src/controllers/style-processing-controller.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/contexts/card-networks-context.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "cardNetworksContext"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "cardNetworksContext",
-          "declaration": {
-            "name": "cardNetworksContext",
-            "module": "src/contexts/card-networks-context.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/contexts/client-options-context.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "clientOptionsContext"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "clientOptionsContext",
-          "declaration": {
-            "name": "clientOptionsContext",
-            "module": "src/contexts/client-options-context.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/contexts/computed-styles-context.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "computedStylesContext"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "computedStylesContext",
-          "declaration": {
-            "name": "computedStylesContext",
-            "module": "src/contexts/computed-styles-context.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/contexts/headless-unitils-context.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "headlessUnitilsContext"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "headlessUnitilsContext",
-          "declaration": {
-            "name": "headlessUnitilsContext",
-            "module": "src/contexts/headless-unitils-context.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/contexts/klarna-categories-context.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "klarnaCategoriesContext"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "klarnaCategoriesContext",
-          "declaration": {
-            "name": "klarnaCategoriesContext",
-            "module": "src/contexts/klarna-categories-context.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/contexts/payment-manager-context.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "paymentManagerContext"
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "reset"
+            },
+            {
+              "kind": "field",
+              "name": "state",
+              "type": {
+                "text": "SdkState"
+              },
+              "privacy": "public",
+              "readonly": true
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "paymentManagerContext",
+          "name": "initialSDKState",
           "declaration": {
-            "name": "paymentManagerContext",
-            "module": "src/contexts/payment-manager-context.ts"
+            "name": "initialSDKState",
+            "module": "src/controllers/sdk-state-controller.ts"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/contexts/payment-methods-context.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "paymentMethodsContext"
-        }
-      ],
-      "exports": [
+        },
         {
           "kind": "js",
-          "name": "paymentMethodsContext",
+          "name": "SdkStateController",
           "declaration": {
-            "name": "paymentMethodsContext",
-            "module": "src/contexts/payment-methods-context.ts"
+            "name": "SdkStateController",
+            "module": "src/controllers/sdk-state-controller.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/contexts/payments-objects.ts",
+      "path": "src/controllers/style-processing-controller.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "InitializedPayments",
+          "description": "Controller that handles processing and application of custom styles to Lit components.\nSafely converts JSON style objects to CSS variables applied to the host element.",
+          "name": "StyleProcessingController",
           "members": [
             {
               "kind": "field",
-              "name": "_methods",
+              "name": "host",
               "type": {
-                "text": "InitializedPaymentMethodMap"
+                "text": "ReactiveControllerHost & LitElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "cssVarCache",
+              "privacy": "private",
+              "static": true,
+              "default": "new Map<string, string>()"
+            },
+            {
+              "kind": "method",
+              "name": "processCustomStyles",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
+              "parameters": [
+                {
+                  "name": "jsonString",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The JSON string representing custom styles."
+                }
+              ],
+              "description": "Processes the customStyles JSON string.\nExpected JSON contains only CSS variable properties in camelCase."
+            },
+            {
+              "kind": "method",
+              "name": "isValidCssProperty",
               "privacy": "private",
-              "readonly": true,
-              "default": "map"
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "property",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The CSS property name to validate."
+                }
+              ],
+              "description": "Validates a CSS property name to ensure it follows expected patterns."
             },
             {
               "kind": "method",
-              "name": "get",
+              "name": "isValidCssValue",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "RedirectPaymentMethod | undefined"
+                  "text": ""
                 }
               },
               "parameters": [
                 {
-                  "name": "type",
+                  "name": "value",
                   "type": {
-                    "text": "T"
-                  }
+                    "text": "string"
+                  },
+                  "description": "The CSS value to validate."
                 }
-              ]
+              ],
+              "description": "Validates a CSS value to ensure it only contains safe, expected characters.\nAllowed characters include alphanumerics, whitespace, and common CSS punctuation.\nThis helps prevent CSS injection attacks."
             },
             {
               "kind": "method",
-              "name": "get",
+              "name": "getCssVarName",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "PaymentMethodByType<T> | undefined"
+                  "text": ""
                 }
               },
               "parameters": [
                 {
-                  "name": "type",
+                  "name": "key",
                   "type": {
-                    "text": "T"
-                  }
+                    "text": "string"
+                  },
+                  "description": "The camelCase property key"
                 }
-              ]
+              ],
+              "description": "Gets the CSS variable name for a camelCase property key.\nUses caching for performance."
             },
             {
               "kind": "method",
-              "name": "get",
+              "name": "applyStyles",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
-                  "name": "type",
+                  "name": "styles",
                   "type": {
-                    "text": "T"
-                  }
+                    "text": "StylesObject"
+                  },
+                  "description": "An object with style keys and corresponding CSS values."
                 }
-              ]
+              ],
+              "description": "Transforms a styles object into CSS variables and applies them to the host element.\nEach key (in camelCase) is converted into a kebab-case CSS variable prefixed with '--'.\nOnly valid CSS properties and values are applied."
             },
             {
               "kind": "method",
-              "name": "toArray",
+              "name": "removeStyle",
               "return": {
                 "type": {
-                  "text": "InitializedPaymentMethod[]"
+                  "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The camelCase property key to remove"
+                }
+              ],
+              "description": "Removes a specific CSS variable from the host element"
             },
             {
               "kind": "method",
-              "name": "size",
+              "name": "clearAllStyles",
               "return": {
                 "type": {
-                  "text": "number"
+                  "text": "void"
                 }
-              }
+              },
+              "description": "Removes all custom styles from the host element"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Optional cleanup when the host is disconnected"
             }
           ]
         }
@@ -3690,76 +3756,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "InitializedPayments",
-          "declaration": {
-            "name": "InitializedPayments",
-            "module": "src/contexts/payments-objects.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/contexts/sdk-state-context.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "sdkStateContext"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "sdkStateContext",
-          "declaration": {
-            "name": "sdkStateContext",
-            "module": "src/contexts/sdk-state-context.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/contexts/types.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/contexts/vault-item-context.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "vaultItemContext"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "vaultItemContext",
-          "declaration": {
-            "name": "vaultItemContext",
-            "module": "src/contexts/vault-item-context.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/contexts/vault-manager-context.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "vaultManagerContext"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "vaultManagerContext",
+          "name": "StyleProcessingController",
           "declaration": {
-            "name": "vaultManagerContext",
-            "module": "src/contexts/vault-manager-context.ts"
+            "name": "StyleProcessingController",
+            "module": "src/controllers/style-processing-controller.ts"
           }
         }
       ]
@@ -3867,7 +3867,7 @@
         {
           "kind": "variable",
           "name": "lightThemeCSS",
-          "default": "`/** * Do not edit directly, this file was auto-generated. */ primer-checkout { --primer-color-background-transparent-default: rgba(255, 255, 255, 0); --primer-color-border-transparent-default: rgba(255, 255, 255, 0); --primer-color-gray-100: #f5f5f5; --primer-color-gray-200: #eeeeee; --primer-color-gray-300: #e0e0e0; --primer-color-gray-400: #bdbdbd; --primer-color-gray-500: #9e9e9e; --primer-color-gray-600: #757575; --primer-color-gray-900: #212121; --primer-color-gray-000: #ffffff; --primer-color-brand: #2f98ff; --primer-color-red-100: #ffecec; --primer-color-red-500: #ff7279; --primer-color-red-900: #b4324b; --primer-color-blue-500: #399dff; --primer-color-blue-900: #2270f4; --primer-radius-base: 4px; --primer-typography-brand: Inter; --primer-typography-title-xlarge-letter-spacing: -0.6px; --primer-typography-title-xlarge-weight: 550; --primer-typography-title-xlarge-size: 24px; --primer-typography-title-xlarge-line-height: 32px; --primer-typography-title-large-letter-spacing: -0.2px; --primer-typography-title-large-weight: 550; --primer-typography-title-large-size: 16px; --primer-typography-title-large-line-height: 20px; --primer-typography-body-large-letter-spacing: -0.2px; --primer-typography-body-large-weight: 400; --primer-typography-body-large-size: 16px; --primer-typography-body-large-line-height: 20px; --primer-typography-body-medium-letter-spacing: 0px; --primer-typography-body-medium-weight: 400; --primer-typography-body-medium-size: 14px; --primer-typography-body-medium-line-height: 20px; --primer-typography-body-small-letter-spacing: 0px; --primer-typography-body-small-weight: 400; --primer-typography-body-small-size: 12px; --primer-typography-body-small-line-height: 16px; --primer-space-base: 4px; --primer-size-base: 4px; --primer-animation-duration: 200ms; --primer-animation-easing: cubic-bezier(0.44, 0, 0.4, 1); --primer-color-background-outlined-default: var(--primer-color-gray-000); --primer-color-background-outlined-disabled: var(--primer-color-gray-100); --primer-color-background-transparent-hover: var(--primer-color-gray-100); --primer-color-background-transparent-active: var(--primer-color-gray-200); --primer-color-background-transparent-loading: var(--primer-color-gray-100); --primer-color-background-transparent-focus: var(--primer-color-background-transparent-default); --primer-color-background-transparent-disabled: var(--primer-color-gray-100); --primer-color-background-transparent-selected: var(--primer-color-gray-100); --primer-color-text-primary: var(--primer-color-gray-900); --primer-color-text-placeholder: var(--primer-color-gray-500); --primer-color-text-disabled: var(--primer-color-gray-400); --primer-color-text-negative: var(--primer-color-red-900); --primer-color-text-link: var(--primer-color-blue-900); --primer-color-text-secondary: var(--primer-color-gray-600); --primer-color-border-outlined-default: var(--primer-color-gray-300); --primer-color-border-outlined-hover: var(--primer-color-gray-400); --primer-color-border-outlined-active: var(--primer-color-gray-500); --primer-color-border-outlined-disabled: var(--primer-color-gray-200); --primer-color-border-outlined-loading: var(--primer-color-gray-200); --primer-color-border-outlined-selected: var(--primer-color-brand); --primer-color-border-outlined-error: var(--primer-color-red-500); --primer-color-border-transparent-hover: var(--primer-color-border-transparent-default); --primer-color-border-transparent-active: var(--primer-color-border-transparent-default); --primer-color-border-transparent-disabled: var(--primer-color-border-transparent-default); --primer-color-border-transparent-selected: var(--primer-color-border-transparent-default); --primer-color-icon-primary: var(--primer-color-gray-900); --primer-color-icon-disabled: var(--primer-color-gray-400); --primer-color-icon-negative: var(--primer-color-red-500); --primer-color-focus: var(--primer-color-brand); --primer-color-loader: var(--primer-color-brand); --primer-radius-medium: 8px; --primer-radius-small: 4px; --primer-radius-large: 12px; --primer-radius-xsmall: 2px; --primer-typography-title-xlarge-font: var(--primer-typography-brand); --primer-typography-title-large-font: var(--primer-typography-brand); --primer-typography-body-large-font: var(--primer-typography-brand); --primer-typography-body-medium-font: var(--primer-typography-brand); --primer-typography-body-small-font: var(--primer-typography-brand); --primer-space-xxsmall: 2px; --primer-space-xsmall: 4px; --primer-space-small: 8px; --primer-space-medium: 12px; --primer-space-large: 16px; --primer-space-xlarge: 20px; --primer-size-small: 16px; --primer-size-medium: 20px; --primer-size-large: 24px; --primer-size-xlarge: 32px; --primer-size-xxlarge: 40px; --primer-size-xxxlarge: 56px; --primer-color-background-outlined-focus: var(--primer-color-background-outlined-default); --primer-color-background-outlined-loading: var(--primer-color-background-outlined-disabled); --primer-color-background-outlined-active: var(--primer-color-background-outlined-default); --primer-color-background-outlined-hover: var(--primer-color-background-outlined-default); --primer-color-background-outlined-selected: var(--primer-color-background-outlined-default); --primer-color-background-outlined-error: var(--primer-color-background-outlined-default); --primer-color-border-outlined-focus: var(--primer-color-focus); --primer-color-border-transparent-focus: var(--primer-color-focus); --primer-color-border-transparent-loading: var(--primer-color-border-transparent-disabled); } `",
+          "default": "`/** * Do not edit directly, this file was auto-generated. */ primer-checkout { --primer-color-background-transparent-default: rgba(255, 255, 255, 0); --primer-color-border-transparent-default: rgba(255, 255, 255, 0); --primer-color-gray-100: #f5f5f5; --primer-color-gray-200: #eeeeee; --primer-color-gray-300: #e0e0e0; --primer-color-gray-400: #bdbdbd; --primer-color-gray-500: #9e9e9e; --primer-color-gray-600: #757575; --primer-color-gray-900: #212121; --primer-color-gray-000: #ffffff; --primer-color-brand: #2f98ff; --primer-color-red-100: #ffecec; --primer-color-red-500: #ff7279; --primer-color-red-900: #b4324b; --primer-color-blue-500: #399dff; --primer-color-blue-900: #2270f4; --primer-radius-base: 4px; --primer-typography-brand: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif; --primer-typography-title-xlarge-letter-spacing: -0.6px; --primer-typography-title-xlarge-weight: 550; --primer-typography-title-xlarge-size: 24px; --primer-typography-title-xlarge-line-height: 32px; --primer-typography-title-large-letter-spacing: -0.2px; --primer-typography-title-large-weight: 550; --primer-typography-title-large-size: 16px; --primer-typography-title-large-line-height: 20px; --primer-typography-body-large-letter-spacing: -0.2px; --primer-typography-body-large-weight: 400; --primer-typography-body-large-size: 16px; --primer-typography-body-large-line-height: 20px; --primer-typography-body-medium-letter-spacing: 0px; --primer-typography-body-medium-weight: 400; --primer-typography-body-medium-size: 14px; --primer-typography-body-medium-line-height: 20px; --primer-typography-body-small-letter-spacing: 0px; --primer-typography-body-small-weight: 400; --primer-typography-body-small-size: 12px; --primer-typography-body-small-line-height: 16px; --primer-space-base: 4px; --primer-size-base: 4px; --primer-animation-duration: 200ms; --primer-animation-easing: cubic-bezier(0.44, 0, 0.4, 1); --primer-color-background-outlined-default: var(--primer-color-gray-000); --primer-color-background-outlined-disabled: var(--primer-color-gray-100); --primer-color-background-transparent-hover: var(--primer-color-gray-100); --primer-color-background-transparent-active: var(--primer-color-gray-200); --primer-color-background-transparent-loading: var(--primer-color-gray-100); --primer-color-background-transparent-focus: var(--primer-color-background-transparent-default); --primer-color-background-transparent-disabled: var(--primer-color-gray-100); --primer-color-background-transparent-selected: var(--primer-color-gray-100); --primer-color-text-primary: var(--primer-color-gray-900); --primer-color-text-placeholder: var(--primer-color-gray-500); --primer-color-text-disabled: var(--primer-color-gray-400); --primer-color-text-negative: var(--primer-color-red-900); --primer-color-text-link: var(--primer-color-blue-900); --primer-color-text-secondary: var(--primer-color-gray-600); --primer-color-border-outlined-default: var(--primer-color-gray-300); --primer-color-border-outlined-hover: var(--primer-color-gray-400); --primer-color-border-outlined-active: var(--primer-color-gray-500); --primer-color-border-outlined-disabled: var(--primer-color-gray-200); --primer-color-border-outlined-loading: var(--primer-color-gray-200); --primer-color-border-outlined-selected: var(--primer-color-brand); --primer-color-border-outlined-error: var(--primer-color-red-500); --primer-color-border-transparent-hover: var(--primer-color-border-transparent-default); --primer-color-border-transparent-active: var(--primer-color-border-transparent-default); --primer-color-border-transparent-disabled: var(--primer-color-border-transparent-default); --primer-color-border-transparent-selected: var(--primer-color-border-transparent-default); --primer-color-icon-primary: var(--primer-color-gray-900); --primer-color-icon-disabled: var(--primer-color-gray-400); --primer-color-icon-negative: var(--primer-color-red-500); --primer-color-focus: var(--primer-color-brand); --primer-color-loader: var(--primer-color-brand); --primer-radius-medium: 8px; --primer-radius-small: 4px; --primer-radius-large: 12px; --primer-radius-xsmall: 2px; --primer-typography-title-xlarge-font: var(--primer-typography-brand); --primer-typography-title-large-font: var(--primer-typography-brand); --primer-typography-body-large-font: var(--primer-typography-brand); --primer-typography-body-medium-font: var(--primer-typography-brand); --primer-typography-body-small-font: var(--primer-typography-brand); --primer-space-xxsmall: 2px; --primer-space-xsmall: 4px; --primer-space-small: 8px; --primer-space-medium: 12px; --primer-space-large: 16px; --primer-space-xlarge: 20px; --primer-size-small: 16px; --primer-size-medium: 20px; --primer-size-large: 24px; --primer-size-xlarge: 32px; --primer-size-xxlarge: 40px; --primer-size-xxxlarge: 56px; --primer-color-background-outlined-focus: var(--primer-color-background-outlined-default); --primer-color-background-outlined-loading: var(--primer-color-background-outlined-disabled); --primer-color-background-outlined-active: var(--primer-color-background-outlined-default); --primer-color-background-outlined-hover: var(--primer-color-background-outlined-default); --primer-color-background-outlined-selected: var(--primer-color-background-outlined-default); --primer-color-background-outlined-error: var(--primer-color-background-outlined-default); --primer-color-border-outlined-focus: var(--primer-color-focus); --primer-color-border-transparent-focus: var(--primer-color-focus); --primer-color-border-transparent-loading: var(--primer-color-border-transparent-disabled); } `",
           "description": "Light theme CSS variables"
         },
         {
@@ -10073,6 +10073,12 @@
                 }
               ],
               "description": "Save reference to network option element"
+            },
+            {
+              "kind": "field",
+              "name": "handleDocumentKeyDown",
+              "privacy": "private",
+              "description": "Handle document-level keydown events, but only when dropdown is open\nThis allows keyboard navigation to continue working"
             }
           ],
           "events": [