@primer-io/primer-js 0.1.5 → 0.1.6

package/dist/custom-elements.json

@@ -2,6 +2,21 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "react-wrappers.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./src/react-components"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "cdn/primer-components.js",
@@ -16,13 +31,13 @@
         },
         {
           "kind": "variable",
-          "name": "Vr",
+          "name": "Hr",
           "default": "class{constructor(e){this._methods=e}get(e){return this._methods.get(e)}toArray(){return Array.from(this._methods.values())}size(){return this._methods.size}}"
         },
         {
           "kind": "variable",
           "name": "le",
-          "default": "class extends v{constructor(){super();this.customStyles=\"\";this.clientToken=\"\";this.options={};this._jsInitialized=!1;this.previousLoadingState=!0;this.hasAssignedContent=!1;this._loadingTimeoutId=null;this.locale=\"en-GB\";this.onSlotChange=t=>{let o=t.target.assignedNodes({flatten:!0});this.hasAssignedContent=o.length>0,this.requestUpdate()};this.sdkContextController=new xr(this),this.sdkStateController=new Er(this),this.primerEventsController=new gt(this),this.styleProcessingController=new Ar(this),this.vaultManagerController=new Yt(this),this.cardNetworkController=new gr(this),this.achPaymentEventsController=new Yr(this),new Ur(this)}set jsInitialized(t){this.requestUpdate(),this._jsInitialized=t}get jsInitialized(){return this._jsInitialized}attributeChangedCallback(t,r,o){t===zr.CUSTOM_STYLES?this.styleProcessingController.processCustomStyles(o):super.attributeChangedCallback(t,r,o)}disconnectedCallback(){this._loadingTimeoutId&&(window.clearTimeout(this._loadingTimeoutId),this._loadingTimeoutId=null),this.sdkStateController?.currentState.isLoading&&this.sdkStateController.forceCompleteLoading(),super.disconnectedCallback()}willUpdate(t){t.has(\"options\")&&(this.options?.locale&&(Oi(this.options?.locale)?this.locale=Di(this.options?.locale):R.warn(\"\\u{1F30E}\\u2757 Unsupported locale provided:\",this.options?.locale,\"- Falling back to default locale `en-GB`\")),Ri(this.locale||\"en-GB\"))}updated(){let t=getComputedStyle(this);this.sdkContextController.setComputedStyles(t),this.checkLoadingStateChange()}checkLoadingStateChange(){let t=this.sdkStateController?.currentState.isLoading||!1;this.previousLoadingState&&!t&&(this.jsInitialized=!0),this.previousLoadingState=t,t&&!this._loadingTimeoutId?this._loadingTimeoutId=window.setTimeout(()=>{this.sdkStateController?.currentState.isLoading&&(R.warn(\"Loading timeout in component, forcing completion\"),this.sdkStateController.forceCompleteLoading(),this.jsInitialized=!0),this._loadingTimeoutId=null},1e4):!t&&this._loadingTimeoutId&&(window.clearTimeout(this._loadingTimeoutId),this._loadingTimeoutId=null)}render(){let t=this.sdkStateController.currentState,r=t.isLoading,o=t.error,n=!r&&!o;return c` ${U(r,()=>h)} ${U(o,()=>c`<primer-checkout-error></primer-checkout-error>`)} ${U(n,()=>c` <slot name=\"main\" @slotchange=${this.onSlotChange}></slot> ${U(this.hasAssignedContent,()=>h,()=>c`<primer-main></primer-main>`)} `,()=>h)} `}addEventListener(t,r,o){super.addEventListener(t,r,o)}removeEventListener(t,r,o){super.removeEventListener(t,r,o)}}"
+          "default": "class extends v{constructor(){super();this.customStyles=\"\";this.clientToken=\"\";this.options={};this._jsInitialized=!1;this.previousLoadingState=!0;this.hasAssignedContent=!1;this._loadingTimeoutId=null;this.locale=\"en-GB\";this.onSlotChange=t=>{let o=t.target.assignedNodes({flatten:!0});this.hasAssignedContent=o.length>0,this.requestUpdate()};this.sdkContextController=new Ar(this),this.sdkStateController=new Cr(this),this.primerEventsController=new gt(this),this.styleProcessingController=new _r(this),this.vaultManagerController=new Yt(this),this.cardNetworkController=new fr(this),this.achPaymentEventsController=new zr(this),new Yr(this)}set jsInitialized(t){this.requestUpdate(),this._jsInitialized=t}get jsInitialized(){return this._jsInitialized}attributeChangedCallback(t,r,o){t===Fr.CUSTOM_STYLES?this.styleProcessingController.processCustomStyles(o):super.attributeChangedCallback(t,r,o)}disconnectedCallback(){this._loadingTimeoutId&&(window.clearTimeout(this._loadingTimeoutId),this._loadingTimeoutId=null),this.sdkStateController?.currentState.isLoading&&this.sdkStateController.forceCompleteLoading(),super.disconnectedCallback()}willUpdate(t){t.has(\"options\")&&(this.options?.locale&&(Oi(this.options?.locale)?this.locale=Di(this.options?.locale):R.warn(\"\\u{1F30E}\\u2757 Unsupported locale provided:\",this.options?.locale,\"- Falling back to default locale `en-GB`\")),Ri(this.locale||\"en-GB\"))}updated(){let t=getComputedStyle(this);this.sdkContextController.setComputedStyles(t),this.checkLoadingStateChange()}checkLoadingStateChange(){let t=this.sdkStateController?.currentState.isLoading||!1;this.previousLoadingState&&!t&&(this.jsInitialized=!0),this.previousLoadingState=t,t&&!this._loadingTimeoutId?this._loadingTimeoutId=window.setTimeout(()=>{this.sdkStateController?.currentState.isLoading&&(R.warn(\"Loading timeout in component, forcing completion\"),this.sdkStateController.forceCompleteLoading(),this.jsInitialized=!0),this._loadingTimeoutId=null},1e4):!t&&this._loadingTimeoutId&&(window.clearTimeout(this._loadingTimeoutId),this._loadingTimeoutId=null)}render(){let t=this.sdkStateController.currentState,r=t.isLoading,o=t.error,n=!r&&!o;return c` ${V(r,()=>h)} ${V(o,()=>c`<primer-checkout-error></primer-checkout-error>`)} ${V(n,()=>c` <slot name=\"main\" @slotchange=${this.onSlotChange}></slot> ${V(this.hasAssignedContent,()=>h,()=>c`<primer-main></primer-main>`)} `,()=>h)} `}addEventListener(t,r,o){super.addEventListener(t,r,o)}removeEventListener(t,r,o){super.removeEventListener(t,r,o)}}"
         },
         {
           "kind": "function",
@@ -42,7 +57,7 @@
         },
         {
           "kind": "variable",
-          "name": "Me",
+          "name": "Pe",
           "default": "class extends v{constructor(){super(...arguments);this.color=\"var(--primer-color-loader)\";this.size=\"medium\";this.compact=!1}getSize(){if(this.size in Ki)return Ki[this.size];let t=parseInt(this.size,10);return isNaN(t)?Ki.medium:t}render(){let t=this.getSize(),r=20,o=`0 0 ${r} ${r}`;return this.style.setProperty(\"--spinner-color\",this.color),this.style.setProperty(\"--spinner-size\",`${t}px`),c` <div class=\"spinner-container ${this.compact?\"compact\":\"\"}\"> <svg class=\"spinner\" width=\"${t}\" height=\"${t}\" viewBox=\"${o}\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" role=\"status\" aria-label=\"Loading\" > <path d=\"M4.27827 10.002C4.27827 6.84166 6.84019 4.27973 10.0005 4.27973C10.7676 4.27973 11.3894 3.6579 11.3894 2.89084C11.3894 2.12378 10.7676 1.50195 10.0005 1.50195C5.30607 1.50195 1.50049 5.30753 1.50049 10.002C1.50049 14.6964 5.30607 18.502 10.0005 18.502C14.6949 18.502 18.5005 14.6964 18.5005 10.002C18.5005 9.23489 17.8787 8.61306 17.1116 8.61306C16.3445 8.61306 15.7227 9.23489 15.7227 10.002C15.7227 13.1622 13.1608 15.7242 10.0005 15.7242C6.84019 15.7242 4.27827 13.1622 4.27827 10.002Z\" fill=\"currentColor\" class=\"path\" /> </svg> </div> `}}"
         },
         {
@@ -67,7 +82,7 @@
         },
         {
           "kind": "variable",
-          "name": "Pe",
+          "name": "we",
           "default": "class extends v{constructor(){super(...arguments);this.color=\"var(--primer-color-icon-primary)\";this.size=\"lg\"}render(){let t=this.name?wa[this.name]:null;return c` <div style=\"--internal-icon-color: ${this.color}\"> ${t||c`<slot></slot>`} </div> `}}"
         },
         {
@@ -113,7 +128,7 @@
         {
           "kind": "variable",
           "name": "pe",
-          "default": "class extends v{constructor(){super(...arguments);this.formController=new Br(this,t=>this._paymentMethodManagerTask.value.setAndValidate(t));this.paymentManagers=new Map;this.sdkState=void 0;this.clientOptions=void 0;this.screen=\"form\";this.isSubmitting=!1;this._paymentMethodManagerTask=new D(this,{task:async([t])=>t!==\"STRIPE_ACH\"?L:this.paymentManagers.get(t)?.manager,args:()=>[this.paymentMethod?.type]})}_handleInput(t,r){let o=t.target;this.formController.setFieldValue(r,o.value)}_handleBlur(t){this.formController.setFieldTouched(t)}_handleError(t){this.dispatchEvent(new CustomEvent(\"primer-ach-error\",{bubbles:!0,composed:!0,detail:{error:t instanceof Error?t:new Error(typeof t==\"string\"?t:\"Unknown error occurred\")}}))}async _handleSubmitButtonClick(t){if(!this.isSubmitting){this.isSubmitting=!0;try{let r=await t.start(this.formController.formData);if(!r||r.valid)return await this._handleCollectBankAccountDetails(t);r&&this.formController.setValidation(r,!0)}catch(r){this._handleError(r)}finally{this.isSubmitting=!1}}}async _handleCollectBankAccountDetails(t){try{await t.collectBankAccountDetails(),this.screen=\"mandate\",this.dispatchEvent(new CustomEvent(\"primer-ach-bank-details-collected\",{bubbles:!0,composed:!0}))}catch(r){this._handleError(r)}}async _handleConfirmMandate(){if(this._paymentMethodManagerTask.value){this.isSubmitting=!0;try{await this._paymentMethodManagerTask.value.confirmMandate(),this.dispatchEvent(new CustomEvent(\"primer-ach-mandate-confirmed\",{bubbles:!0,composed:!0}))}catch(t){this._handleError(t)}finally{this.isSubmitting=!1}}}async _handleDeclineMandate(){if(this._paymentMethodManagerTask.value){this.isSubmitting=!0;try{await this._paymentMethodManagerTask.value.declineMandate(),this.dispatchEvent(new CustomEvent(\"primer-ach-mandate-declined\",{bubbles:!0,composed:!0}))}catch(t){this._handleError(t)}finally{this.isSubmitting=!1}}}renderForm(t){return c` <h2> ${A(\"payWithAch\",{id:\"payWithAch\"})} </h2> <p> ${A(\"stripe_ach_user_details_collection_subtitle_label\",{id:\"stripe_ach_user_details_collection_subtitle_label\"})} </p> <form @submit=${r=>r.preventDefault()}> <div class=\"form-row\"> <primer-input-wrapper .hasError=${this.formController.hasError.firstName} > <primer-input-label slot=\"label\"> ${A(\"stripe_ach_user_details_collection_first_name_label\",{id:\"stripe_ach_user_details_collection_first_name_label\"})} </primer-input-label> <primer-input slot=\"input\" .value=${this.formController.formState.firstName.value} @input=${r=>this._handleInput(r,\"firstName\")} @blur=${()=>this._handleBlur(\"firstName\")} ?disabled=${this.isSubmitting} ></primer-input> <primer-input-error slot=\"error\"> ${this.formController.hasError.firstName?this.formController.formState.firstName.error:h} </primer-input-error> </primer-input-wrapper> <primer-input-wrapper .hasError=${this.formController.hasError.lastName} > <primer-input-label slot=\"label\"> ${A(\"stripe_ach_user_details_collection_last_name_label\",{id:\"stripe_ach_user_details_collection_last_name_label\"})} </primer-input-label> <primer-input slot=\"input\" .value=${this.formController.formState.lastName.value} @input=${r=>this._handleInput(r,\"lastName\")} @blur=${()=>this._handleBlur(\"lastName\")} ?disabled=${this.isSubmitting} > </primer-input> <primer-input-error slot=\"error\"> ${this.formController.hasError.lastName?this.formController.formState.lastName.error:h} </primer-input-error> </primer-input-wrapper> </div> <primer-input-wrapper .hasError=${this.formController.hasError.emailAddress} > <primer-input-label slot=\"label\"> ${A(\"stripe_ach_user_details_collection_email_address_label\",{id:\"stripe_ach_user_details_collection_email_address_label\"})} </primer-input-label> <primer-input slot=\"input\" type=\"email\" .value=${this.formController.formState.emailAddress.value} @input=${r=>this._handleInput(r,\"emailAddress\")} @blur=${()=>this._handleBlur(\"emailAddress\")} ?disabled=${this.isSubmitting} ></primer-input> <primer-input-error slot=\"error\"> ${this.formController.hasError.emailAddress?this.formController.formState.emailAddress.error:h} </primer-input-error> </primer-input-wrapper> <p> ${A(\"stripe_ach_user_details_collection_data_usage_label\",{id:\"stripe_ach_user_details_collection_data_usage_label\"})} </p> <primer-button buttonType=\"submit\" variant=\"primary\" @click=${()=>this._handleSubmitButtonClick(t)} ?disabled=${this.isSubmitting} ?loading=${this.isSubmitting} > ${A(\"stripe_ach_user_details_collection_continue_button\",{id:\"stripe_ach_user_details_collection_continue_button\"})} </primer-button> </form> `}renderMandate(){return c` <h2> ${A(\"payWithAch\",{id:\"payWithAch\"})} </h2> <p> ${this.clientOptions?.stripe?.mandateData.fullMandateText??A(\"stripe_ach_mandate_template_web\",{id:\"stripe_ach_mandate_template_web\"}).replace(/\\{merchantName\\}/g,this.clientOptions?.stripe?.mandateData.merchantName??\"Merchant\")} </p> <div class=\"button-group\"> <primer-button variant=\"primary\" @click=${this._handleConfirmMandate.bind(this)} ?disabled=${this.isSubmitting} ?loading=${this.isSubmitting} > ${A(\"stripe_ach_mandate_accept_button\",{id:\"stripe_ach_mandate_accept_button\"})} </primer-button> <primer-button variant=\"tertiary\" @click=${this._handleDeclineMandate.bind(this)} ?disabled=${this.isSubmitting} > ${A(\"stripe_ach_mandate_cancel_payment_button\",{id:\"stripe_ach_mandate_cancel_payment_button\"})} </primer-button> </div> `}render(){return this._paymentMethodManagerTask.render({complete:t=>t?this.screen===\"form\"?this.renderForm(t):this.renderMandate():h})}}"
+          "default": "class extends v{constructor(){super(...arguments);this.formController=new Kr(this,t=>this._paymentMethodManagerTask.value.setAndValidate(t));this.paymentManagers=new Map;this.sdkState=void 0;this.clientOptions=void 0;this.screen=\"form\";this.isSubmitting=!1;this._paymentMethodManagerTask=new D(this,{task:async([t])=>t!==\"STRIPE_ACH\"?L:this.paymentManagers.get(t)?.manager,args:()=>[this.paymentMethod?.type]})}_handleInput(t,r){let o=t.target;this.formController.setFieldValue(r,o.value)}_handleBlur(t){this.formController.setFieldTouched(t)}_handleError(t){this.dispatchEvent(new CustomEvent(\"primer-ach-error\",{bubbles:!0,composed:!0,detail:{error:t instanceof Error?t:new Error(typeof t==\"string\"?t:\"Unknown error occurred\")}}))}async _handleSubmitButtonClick(t){if(!this.isSubmitting){this.isSubmitting=!0;try{let r=await t.start(this.formController.formData);if(!r||r.valid)return await this._handleCollectBankAccountDetails(t);r&&this.formController.setValidation(r,!0)}catch(r){this._handleError(r)}finally{this.isSubmitting=!1}}}async _handleCollectBankAccountDetails(t){try{await t.collectBankAccountDetails(),this.screen=\"mandate\",this.dispatchEvent(new CustomEvent(\"primer-ach-bank-details-collected\",{bubbles:!0,composed:!0}))}catch(r){this._handleError(r)}}async _handleConfirmMandate(){if(this._paymentMethodManagerTask.value){this.isSubmitting=!0;try{await this._paymentMethodManagerTask.value.confirmMandate(),this.dispatchEvent(new CustomEvent(\"primer-ach-mandate-confirmed\",{bubbles:!0,composed:!0}))}catch(t){this._handleError(t)}finally{this.isSubmitting=!1}}}async _handleDeclineMandate(){if(this._paymentMethodManagerTask.value){this.isSubmitting=!0;try{await this._paymentMethodManagerTask.value.declineMandate(),this.dispatchEvent(new CustomEvent(\"primer-ach-mandate-declined\",{bubbles:!0,composed:!0}))}catch(t){this._handleError(t)}finally{this.isSubmitting=!1}}}renderForm(t){return c` <h2> ${A(\"payWithAch\",{id:\"payWithAch\"})} </h2> <p> ${A(\"stripe_ach_user_details_collection_subtitle_label\",{id:\"stripe_ach_user_details_collection_subtitle_label\"})} </p> <form @submit=${r=>r.preventDefault()}> <div class=\"form-row\"> <primer-input-wrapper .hasError=${this.formController.hasError.firstName} > <primer-input-label slot=\"label\"> ${A(\"stripe_ach_user_details_collection_first_name_label\",{id:\"stripe_ach_user_details_collection_first_name_label\"})} </primer-input-label> <primer-input slot=\"input\" .value=${this.formController.formState.firstName.value} @input=${r=>this._handleInput(r,\"firstName\")} @blur=${()=>this._handleBlur(\"firstName\")} ?disabled=${this.isSubmitting} ></primer-input> <primer-input-error slot=\"error\"> ${this.formController.hasError.firstName?this.formController.formState.firstName.error:h} </primer-input-error> </primer-input-wrapper> <primer-input-wrapper .hasError=${this.formController.hasError.lastName} > <primer-input-label slot=\"label\"> ${A(\"stripe_ach_user_details_collection_last_name_label\",{id:\"stripe_ach_user_details_collection_last_name_label\"})} </primer-input-label> <primer-input slot=\"input\" .value=${this.formController.formState.lastName.value} @input=${r=>this._handleInput(r,\"lastName\")} @blur=${()=>this._handleBlur(\"lastName\")} ?disabled=${this.isSubmitting} > </primer-input> <primer-input-error slot=\"error\"> ${this.formController.hasError.lastName?this.formController.formState.lastName.error:h} </primer-input-error> </primer-input-wrapper> </div> <primer-input-wrapper .hasError=${this.formController.hasError.emailAddress} > <primer-input-label slot=\"label\"> ${A(\"stripe_ach_user_details_collection_email_address_label\",{id:\"stripe_ach_user_details_collection_email_address_label\"})} </primer-input-label> <primer-input slot=\"input\" type=\"email\" .value=${this.formController.formState.emailAddress.value} @input=${r=>this._handleInput(r,\"emailAddress\")} @blur=${()=>this._handleBlur(\"emailAddress\")} ?disabled=${this.isSubmitting} ></primer-input> <primer-input-error slot=\"error\"> ${this.formController.hasError.emailAddress?this.formController.formState.emailAddress.error:h} </primer-input-error> </primer-input-wrapper> <p> ${A(\"stripe_ach_user_details_collection_data_usage_label\",{id:\"stripe_ach_user_details_collection_data_usage_label\"})} </p> <primer-button buttonType=\"submit\" variant=\"primary\" @click=${()=>this._handleSubmitButtonClick(t)} ?disabled=${this.isSubmitting} ?loading=${this.isSubmitting} > ${A(\"stripe_ach_user_details_collection_continue_button\",{id:\"stripe_ach_user_details_collection_continue_button\"})} </primer-button> </form> `}renderMandate(){return c` <h2> ${A(\"payWithAch\",{id:\"payWithAch\"})} </h2> <p> ${this.clientOptions?.stripe?.mandateData.fullMandateText??A(\"stripe_ach_mandate_template_web\",{id:\"stripe_ach_mandate_template_web\"}).replace(/\\{merchantName\\}/g,this.clientOptions?.stripe?.mandateData.merchantName??\"Merchant\")} </p> <div class=\"button-group\"> <primer-button variant=\"primary\" @click=${this._handleConfirmMandate.bind(this)} ?disabled=${this.isSubmitting} ?loading=${this.isSubmitting} > ${A(\"stripe_ach_mandate_accept_button\",{id:\"stripe_ach_mandate_accept_button\"})} </primer-button> <primer-button variant=\"tertiary\" @click=${this._handleDeclineMandate.bind(this)} ?disabled=${this.isSubmitting} > ${A(\"stripe_ach_mandate_cancel_payment_button\",{id:\"stripe_ach_mandate_cancel_payment_button\"})} </primer-button> </div> `}render(){return this._paymentMethodManagerTask.render({complete:t=>t?this.screen===\"form\"?this.renderForm(t):this.renderMandate():h})}}"
         },
         {
           "kind": "variable",
@@ -128,22 +143,22 @@
         {
           "kind": "variable",
           "name": "Fe",
-          "default": "class extends v{constructor(){super(...arguments);this.hasAssignedContent=!1;this.onSlotChange=t=>{let o=t.target.assignedNodes({flatten:!0});this.hasAssignedContent=o.length>0,this.requestUpdate()};this.paymentMethods=null;this.sdkState=null}render(){return this.sdkState?.isSuccessful?c` <slot name=\"checkout-complete\"> <primer-checkout-complete></primer-checkout-complete> </slot> `:c` <slot name=\"payments\" @slotchange=${this.onSlotChange}></slot> ${U(this.hasAssignedContent,()=>h,()=>c` <div class=${Z({\"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(t=>c` <primer-payment-method type=${t.type} ></primer-payment-method> `)} </div> </primer-show-other-payments> <primer-error-message-container></primer-error-message-container> </div> `)} `}}"
+          "default": "class extends v{constructor(){super(...arguments);this.hasAssignedContent=!1;this.onSlotChange=t=>{let o=t.target.assignedNodes({flatten:!0});this.hasAssignedContent=o.length>0,this.requestUpdate()};this.paymentMethods=null;this.sdkState=null}render(){return this.sdkState?.isSuccessful?c` <slot name=\"checkout-complete\"> <primer-checkout-complete></primer-checkout-complete> </slot> `:c` <slot name=\"payments\" @slotchange=${this.onSlotChange}></slot> ${V(this.hasAssignedContent,()=>h,()=>c` <div class=${Z({\"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(t=>c` <primer-payment-method type=${t.type} ></primer-payment-method> `)} </div> </primer-show-other-payments> <primer-error-message-container></primer-error-message-container> </div> `)} `}}"
         },
         {
           "kind": "variable",
-          "name": "we",
+          "name": "ke",
           "default": "class extends v{constructor(){super();this.paymentManagers=new Map;this.computedStyles=null;this._buttonId=\"button-container\";this.loadManagerTask=new D(this,{args:()=>[this.paymentMethod?.type],task:async([t])=>{if(!t)return L;let r=this.paymentManagers.get(t)?.manager;if(!r)throw new Error(`No manager found for payment method type ${t}`);return r}}),new D(this,{args:()=>[this.loadManagerTask.value],task:async([t])=>{if(!t)return L;await this.updateComplete;let r=this.shadowRoot?.getElementById(this._buttonId);if(!r)return;let o=this.calculateButtonHeight(),n=t.createButton(),l=this.createRenderOptions(o);return await n.render(this.paymentMethod?.type===\"GOOGLE_PAY\"?this.shadowRoot?.getRootNode():r,l),t}})}calculateButtonHeight(){if(typeof window>\"u\"||!this.isConnected||!this.computedStyles)return 0;let t=parseFloat(this.computedStyles.getPropertyValue(\"--primer-typography-title-large-line-height\")),r=parseFloat(this.computedStyles.getPropertyValue(\"--primer-space-medium\"));return t+2*r}createRenderOptions(t){let r=this.paymentMethod?.type;return r===\"GOOGLE_PAY\"?{style:{shadowRoot:!0}}:r===\"APPLE_PAY\"?{style:{buttonHeight:t}}:r===\"PAYPAL\"?{style:{buttonHeight:t}}:{style:{buttonHeight:t}}}updated(t){t.has(\"paymentMethod\")&&this.paymentMethod&&(this._buttonId=`button-container-${this.paymentMethod.type}`)}render(){return this.loadManagerTask.render({error:()=>h,complete:()=>c` <!-- The native button container is rendered first --> <div class=\"native-button-container\" id=\"${this._buttonId}\"></div> `,pending:()=>h})}}"
         },
         {
           "kind": "variable",
-          "name": "ke",
-          "default": "class extends v{constructor(){super(...arguments);this.hasAssignedContent=!1;this.selectedCardNetwork=null;this.paymentManagers=new Map;this.cardFormProvider=new q(this,{context:Kr,initialValue:null});this.eventsController=new gt(this);this.setupCardFormTask=new D(this,{task:async([t])=>{if(!t?.manager)return L;let{manager:r}=t,{cardNumberInput:o,expiryInput:n,cvvInput:l}=r.createHostedInputs();return this.cardFormProvider.setValue({cardNumberInput:o,expiryInput:n,cvvInput:l,setCardholderName:g=>r.setCardholderName(g),setCardNetwork:g=>{this.selectedCardNetwork=g},validate:()=>r.validate(),submit:g=>r.submit(g)}),!0},args:()=>[this.paymentManagers.get(\"PAYMENT_CARD\")]});this.handleSlotButtonClick=t=>{let o=t.target.closest(\"button, primer-button\");if(!o)return;this.isSubmitButton(o)&&(t.preventDefault(),this.submitCardPayment())};this.handleDirectSubmit=t=>{t.stopPropagation(),this.submitCardPayment()};this.onSlotChange=t=>{let o=t.target.assignedNodes({flatten:!0});this.hasAssignedContent=o.length>0};this.handleFormSubmit=t=>{t.preventDefault(),t.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(t){let r=t.tagName.toLowerCase(),o=r===\"button\",n=r===\"primer-button\";return o&&(t.getAttribute(\"type\")===\"submit\"||t.hasAttribute(\"data-submit\"))||n&&(t.getAttribute(\"buttonType\")===\"submit\"||t.hasAttribute(\"data-submit\"))}async submitCardPayment(){let t=this.cardFormProvider.value;if(!t)return;let r=await t.validate?.();if(r?.valid){let o=await t.submit?.(this.selectedCardNetwork?{cardNetwork:this.selectedCardNetwork}:void 0);this.eventsController.dispatchFormSubmitSuccess(o)}else{let o=r?.validationErrors;this.cardFormProvider.setValue({...t,errors:o}),this.eventsController.dispatchFormSubmitErrors(o)}}render(){return this.setupCardFormTask.status===De.ERROR||this.setupCardFormTask.status===De.INITIAL?h:c` <form @submit=${this.handleFormSubmit}> <slot name=\"card-form-content\" @slotchange=${this.onSlotChange}></slot> ${this.setupCardFormTask.render({complete:()=>U(this.hasAssignedContent,()=>h,()=>c` <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> `}}"
+          "name": "Ee",
+          "default": "class extends v{constructor(){super(...arguments);this.hideLabels=!1;this.hasAssignedContent=!1;this.selectedCardNetwork=null;this.paymentManagers=new Map;this.cardFormProvider=new q(this,{context:jr,initialValue:null});this.eventsController=new gt(this);this.setupCardFormTask=new D(this,{task:async([t])=>{if(!t?.manager)return L;let{manager:r}=t,{cardNumberInput:o,expiryInput:n,cvvInput:l}=r.createHostedInputs();return this.cardFormProvider.setValue({cardNumberInput:o,expiryInput:n,cvvInput:l,setCardholderName:g=>r.setCardholderName(g),setCardNetwork:g=>{this.selectedCardNetwork=g},validate:()=>r.validate(),submit:g=>r.submit(g),hideLabels:this.hideLabels}),!0},args:()=>[this.paymentManagers.get(\"PAYMENT_CARD\")]});this.handleSlotButtonClick=t=>{let o=t.target.closest(\"button, primer-button\");if(!o)return;this.isSubmitButton(o)&&(t.preventDefault(),this.submitCardPayment())};this.handleDirectSubmit=t=>{t.stopPropagation(),this.submitCardPayment()};this.onSlotChange=t=>{let o=t.target.assignedNodes({flatten:!0});this.hasAssignedContent=o.length>0};this.handleFormSubmit=t=>{t.preventDefault(),t.stopPropagation(),this.submitCardPayment()}}updated(t){super.updated(t),t.has(\"hideLabels\")&&this.cardFormProvider.value&&this.cardFormProvider.setValue({...this.cardFormProvider.value,hideLabels:this.hideLabels})}connectedCallback(){super.connectedCallback(),this.addEventListener(\"click\",this.handleSlotButtonClick),this.addEventListener(\"primer-form-submit\",this.handleDirectSubmit)}disconnectedCallback(){this.removeEventListener(\"click\",this.handleSlotButtonClick),this.removeEventListener(\"primer-form-submit\",this.handleDirectSubmit),super.disconnectedCallback()}isSubmitButton(t){let r=t.tagName.toLowerCase(),o=r===\"button\",n=r===\"primer-button\";return o&&(t.getAttribute(\"type\")===\"submit\"||t.hasAttribute(\"data-submit\"))||n&&(t.getAttribute(\"type\")===\"submit\"||t.hasAttribute(\"data-submit\"))}async submitCardPayment(){let t=this.cardFormProvider.value;if(!t)return;let r=await t.validate?.();if(r?.valid){let o=await t.submit?.(this.selectedCardNetwork?{cardNetwork:this.selectedCardNetwork}:void 0);this.eventsController.dispatchFormSubmitSuccess(o)}else{let o=r?.validationErrors;this.cardFormProvider.setValue({...t,errors:o}),this.eventsController.dispatchFormSubmitErrors(o)}}render(){return this.setupCardFormTask.status===De.ERROR||this.setupCardFormTask.status===De.INITIAL?h:c` <form @submit=${this.handleFormSubmit}> <slot name=\"card-form-content\" @slotchange=${this.onSlotChange}></slot> ${this.setupCardFormTask.render({complete:()=>V(this.hasAssignedContent,()=>h,()=>c` <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": "xt",
-          "default": "class extends X{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(t){let{network:r}=t.detail;this.cardFormContext&&this.cardFormContext.setCardNetwork(r)}renderInput(){if(this.hostedInputController.setupTask.status===De.ERROR)return h;let t=this.getError();return c` <primer-input-wrapper .focusWithin=\"${this.hostedInputController.isFocused}\" .hasError=${!!t} > <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> ${U(t,r=>c` <primer-input-error slot=\"error\"> ${A(r,{id:r})} </primer-input-error> `,()=>h)} </primer-input-wrapper> `}render(){return this.renderInput()}}"
+          "default": "class extends X{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(t){let{network:r}=t.detail;this.cardFormContext&&this.cardFormContext.setCardNetwork(r)}renderInput(){if(this.hostedInputController.setupTask.status===De.ERROR)return h;let t=this.getError();return c` <primer-input-wrapper .focusWithin=\"${this.hostedInputController.isFocused}\" .hasError=${!!t} > ${V(!this.cardFormContext?.hideLabels,()=>c`<primer-input-label slot=\"label\" >${this.label}</primer-input-label >`,()=>h)} <div slot=\"input\" class=\"card-number-container\" aria-label=\"${this.ariaLabel}\" > <div id=\"${this.config.containerSelector.substring(1)}\"></div> <div class=\"network-selector-container\"> <primer-card-network-selector @network-selected=${this.handleNetworkSelected} ></primer-card-network-selector> </div> </div> ${V(t,r=>c` <primer-input-error slot=\"error\"> ${A(r,{id:r})} </primer-input-error> `,()=>h)} </primer-input-wrapper> `}render(){return this.renderInput()}}"
         },
         {
           "kind": "variable",
@@ -163,22 +178,22 @@
         {
           "kind": "variable",
           "name": "ce",
-          "default": "class extends v{constructor(){super(...arguments);this._userAssignedProps=new Set;this._internalButtonText=\"\";this.headlessInstance=null;this.clientOptions=null;this.sdkState=null;this.variant=\"primary\";this.disabled=!1;this.handleClick=t=>{if(t.preventDefault(),this.disabled)return;let r=new CustomEvent(\"primer-form-submit\",{bubbles:!0,composed:!0,detail:{source:\"primer-card-form-submit\"}});this.dispatchEvent(r)}}get buttonText(){return this._userAssignedProps.has(\"buttonText\")?this._internalButtonText:A(\"pay\",{id:\"pay\"})}set buttonText(t){let r=this.buttonText;t!==\"\"?(this._userAssignedProps.add(\"buttonText\"),this._internalButtonText=t):(this._userAssignedProps.delete(\"buttonText\"),this._internalButtonText=\"\"),this.requestUpdate(\"buttonText\",r)}render(){let t=this.clientOptions?.submitButton?.amountVisible?this.headlessInstance?.getUIOrderAmount():null,r=t?` ${t}`:h;return c` <primer-button buttonType=\"submit\" variant=${this.variant} ?disabled=${this.disabled} @click=${this.handleClick} .loading=${!!this.sdkState?.isProcessing} data-submit > ${this.buttonText}${r} </primer-button> `}}"
+          "default": "class extends v{constructor(){super(...arguments);this._userAssignedProps=new Set;this._internalButtonText=\"\";this.headlessInstance=null;this.clientOptions=null;this.sdkState=null;this.variant=\"primary\";this.disabled=!1;this.handleClick=t=>{if(t.preventDefault(),this.disabled)return;let r=new CustomEvent(\"primer-form-submit\",{bubbles:!0,composed:!0,detail:{source:\"primer-card-form-submit\"}});this.dispatchEvent(r)}}get buttonText(){return this._userAssignedProps.has(\"buttonText\")?this._internalButtonText:A(\"pay\",{id:\"pay\"})}set buttonText(t){let r=this.buttonText;t!==\"\"?(this._userAssignedProps.add(\"buttonText\"),this._internalButtonText=t):(this._userAssignedProps.delete(\"buttonText\"),this._internalButtonText=\"\"),this.requestUpdate(\"buttonText\",r)}render(){let t=this.clientOptions?.submitButton?.amountVisible?this.headlessInstance?.getUIOrderAmount():null,r=t?` ${t}`:h;return c` <primer-button type=\"submit\" variant=${this.variant} ?disabled=${this.disabled} @click=${this.handleClick} .loading=${!!this.sdkState?.isProcessing} data-submit > ${this.buttonText}${r} </primer-button> `}}"
         },
         {
           "kind": "variable",
           "name": "me",
-          "default": "class extends v{constructor(){super(...arguments);this.cardNetworks=null;this.headlessUtils=null;this.selectedCardNetwork=null;this.isDropdownOpen=!1;this.focusedNetworkIndex=0;this.isKeyboardNavigation=!1;this.buttonRef=qi();this.dropdownRef=qi();this.networkOptionRefs=[];this.handleClickOutside=t=>{this.isDropdownOpen&&(this.contains(t.target)||(this.isDropdownOpen=!1,this.isKeyboardNavigation=!1))};this.handleMouseMove=()=>{this.isKeyboardNavigation&&(this.isKeyboardNavigation=!1)};this.handleKeyDown=t=>{if(!(!(this.getSelectableNetworks().length>1)||!(this.contains(t.target)||this===t.target||this.isDropdownOpen&&t.target===document.body)))switch(this.isKeyboardNavigation=!0,t.key){case\"ArrowDown\":t.preventDefault(),this.isDropdownOpen?(this.focusedNetworkIndex=(this.focusedNetworkIndex+1)%this.getSelectableNetworks().length,this.focusNetworkOption()):(this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case\"ArrowUp\":t.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?(t.preventDefault(),this.selectNetwork(t,this.getSelectableNetworks()[this.focusedNetworkIndex])):!this.isDropdownOpen&&this.buttonRef.value===document.activeElement&&(t.preventDefault(),this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case\"Escape\":this.isDropdownOpen&&(t.preventDefault(),this.isDropdownOpen=!1,this.buttonRef.value?.focus());break;case\"Tab\":this.isDropdownOpen&&(this.isDropdownOpen=!1);break}};this.handleDocumentKeyDown=t=>{this.isDropdownOpen&&this.handleKeyDown(t)}}toggleDropdown(t){this.isKeyboardNavigation=!1,t.stopPropagation(),this.getSelectableNetworks().length>1&&(this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen&&(this.focusedNetworkIndex=this.getSelectedNetworkIndex()))}getNetworkIconUrl(t){return this.headlessUtils?.getCardNetworkAsset(t.network)?.cardUrl}getSelectableNetworks(){return this.cardNetworks?.selectableCardNetworks||[]}getDetectedNetwork(){return this.selectedCardNetwork??(this.cardNetworks?.detectedCardNetwork||null)}getSelectedNetworkIndex(){let t=this.getDetectedNetwork();if(!t)return 0;let r=this.getSelectableNetworks().findIndex(o=>o.network===t.network);return r>=0?r:0}selectNetwork(t,r){t.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(t,r){this.networkOptionRefs[r]=t}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 c`<primer-spinner size=\"small\" compact></primer-spinner>`;let t=this.getSelectableNetworks();if(!this.getDetectedNetwork()&&t.length===0)return c`<primer-icon name=\"payment-card\"></primer-icon>`;let r=this.getDetectedNetwork()||(t.length>0?t[0]:null);if(!r)return c`<primer-icon name=\"payment-card\" size=\"sm\"></primer-icon>`;let o=t.length>1;return c` <button ${Zr(this.buttonRef)} class=\"network-selector\" @click=${this.toggleDropdown} @keydown=${n=>{(n.key===\" \"||n.key===\"Enter\")&&o&&(n.preventDefault(),this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen&&(this.focusedNetworkIndex=this.getSelectedNetworkIndex()))}} aria-label=${o?`Selected card network: ${r.displayName}. Click to change.`:`Card network: ${r.displayName}`} aria-expanded=${o?this.isDropdownOpen:h} aria-haspopup=${o?\"true\":h} aria-controls=${o?\"network-dropdown\":h} > <img class=\"network-icon\" src=${this.getNetworkIconUrl(r)} alt=${r.displayName} /> ${U(o,()=>c` <primer-icon class=\"caret ${this.isDropdownOpen?\"open\":\"\"}\" name=\"chevron-down\" ></primer-icon> `,()=>h)} </button> ${U(this.isDropdownOpen,()=>c` <div ${Zr(this.dropdownRef)} id=\"network-dropdown\" class=\"dropdown open\" role=\"listbox\" aria-label=\"Select card network\" > ${t.map((n,l)=>c` <div ${Zr(g=>this.setNetworkOptionRef(g,l))} class=\"network-option ${this.isKeyboardNavigation&&l===this.focusedNetworkIndex?\"focused\":\"\"}\" @click=${g=>this.selectNetwork(g,n)} @keydown=${g=>{(g.key===\"Enter\"||g.key===\" \")&&this.selectNetwork(g,n)}} role=\"option\" aria-selected=${n.network===r.network} tabindex=\"${l===this.focusedNetworkIndex?\"0\":\"-1\"}\" > <img class=\"network-option-icon\" src=${this.getNetworkIconUrl(n)} alt=${n.displayName} /> <span class=\"network-name\">${n.displayName}</span> ${U(n.network===r.network,()=>c` <primer-icon class=\"checkmark\" name=\"checkmark\" ></primer-icon> `,()=>h)} </div> `)} </div> `,()=>h)} `}}"
+          "default": "class extends v{constructor(){super(...arguments);this.cardNetworks=null;this.headlessUtils=null;this.selectedCardNetwork=null;this.isDropdownOpen=!1;this.focusedNetworkIndex=0;this.isKeyboardNavigation=!1;this.buttonRef=qi();this.dropdownRef=qi();this.networkOptionRefs=[];this.handleClickOutside=t=>{this.isDropdownOpen&&(this.contains(t.target)||(this.isDropdownOpen=!1,this.isKeyboardNavigation=!1))};this.handleMouseMove=()=>{this.isKeyboardNavigation&&(this.isKeyboardNavigation=!1)};this.handleKeyDown=t=>{if(!(!(this.getSelectableNetworks().length>1)||!(this.contains(t.target)||this===t.target||this.isDropdownOpen&&t.target===document.body)))switch(this.isKeyboardNavigation=!0,t.key){case\"ArrowDown\":t.preventDefault(),this.isDropdownOpen?(this.focusedNetworkIndex=(this.focusedNetworkIndex+1)%this.getSelectableNetworks().length,this.focusNetworkOption()):(this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case\"ArrowUp\":t.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?(t.preventDefault(),this.selectNetwork(t,this.getSelectableNetworks()[this.focusedNetworkIndex])):!this.isDropdownOpen&&this.buttonRef.value===document.activeElement&&(t.preventDefault(),this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case\"Escape\":this.isDropdownOpen&&(t.preventDefault(),this.isDropdownOpen=!1,this.buttonRef.value?.focus());break;case\"Tab\":this.isDropdownOpen&&(this.isDropdownOpen=!1);break}};this.handleDocumentKeyDown=t=>{this.isDropdownOpen&&this.handleKeyDown(t)}}toggleDropdown(t){this.isKeyboardNavigation=!1,t.stopPropagation(),this.getSelectableNetworks().length>1&&(this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen&&(this.focusedNetworkIndex=this.getSelectedNetworkIndex()))}getNetworkIconUrl(t){return this.headlessUtils?.getCardNetworkAsset(t.network)?.cardUrl}getSelectableNetworks(){return this.cardNetworks?.selectableCardNetworks||[]}getDetectedNetwork(){return this.selectedCardNetwork??(this.cardNetworks?.detectedCardNetwork||null)}getSelectedNetworkIndex(){let t=this.getDetectedNetwork();if(!t)return 0;let r=this.getSelectableNetworks().findIndex(o=>o.network===t.network);return r>=0?r:0}selectNetwork(t,r){t.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(t,r){this.networkOptionRefs[r]=t}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 c`<primer-spinner size=\"small\" compact></primer-spinner>`;let t=this.getSelectableNetworks();if(!this.getDetectedNetwork()&&t.length===0)return c`<primer-icon name=\"payment-card\"></primer-icon>`;let r=this.getDetectedNetwork()||(t.length>0?t[0]:null);if(!r)return c`<primer-icon name=\"payment-card\" size=\"sm\"></primer-icon>`;let o=t.length>1;return c` <button ${Xr(this.buttonRef)} class=\"network-selector\" @click=${this.toggleDropdown} @keydown=${n=>{(n.key===\" \"||n.key===\"Enter\")&&o&&(n.preventDefault(),this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen&&(this.focusedNetworkIndex=this.getSelectedNetworkIndex()))}} aria-label=${o?`Selected card network: ${r.displayName}. Click to change.`:`Card network: ${r.displayName}`} aria-expanded=${o?this.isDropdownOpen:h} aria-haspopup=${o?\"true\":h} aria-controls=${o?\"network-dropdown\":h} > <img class=\"network-icon\" src=${this.getNetworkIconUrl(r)} alt=${r.displayName} /> ${V(o,()=>c` <primer-icon class=\"caret ${this.isDropdownOpen?\"open\":\"\"}\" name=\"chevron-down\" ></primer-icon> `,()=>h)} </button> ${V(this.isDropdownOpen,()=>c` <div ${Xr(this.dropdownRef)} id=\"network-dropdown\" class=\"dropdown open\" role=\"listbox\" aria-label=\"Select card network\" > ${t.map((n,l)=>c` <div ${Xr(g=>this.setNetworkOptionRef(g,l))} class=\"network-option ${this.isKeyboardNavigation&&l===this.focusedNetworkIndex?\"focused\":\"\"}\" @click=${g=>this.selectNetwork(g,n)} @keydown=${g=>{(g.key===\"Enter\"||g.key===\" \")&&this.selectNetwork(g,n)}} role=\"option\" aria-selected=${n.network===r.network} tabindex=\"${l===this.focusedNetworkIndex?\"0\":\"-1\"}\" > <img class=\"network-option-icon\" src=${this.getNetworkIconUrl(n)} alt=${n.displayName} /> <span class=\"network-name\">${n.displayName}</span> ${V(n.network===r.network,()=>c` <primer-icon class=\"checkmark\" name=\"checkmark\" ></primer-icon> `,()=>h)} </div> `)} </div> `,()=>h)} `}}"
         },
         {
           "kind": "variable",
           "name": "ue",
-          "default": "class extends v{constructor(){super();this.vaultManagerContext=null;this.isEditMode=!1;this.deletePaymentMethodId=null;this.isDeleting=!1;this.errorMessage=\"\";this.animationDuration=300;new Pt(this,{defaultOptions:{keyframeOptions:{duration:Number(getComputedStyle(document.documentElement).getPropertyValue(\"--primer-animation-duration\").trim().replace(\"ms\",\"\")),easing:getComputedStyle(document.documentElement).getPropertyValue(\"--primer-animation-easing\").trim()}}})}getAnimationConfig(){return{keyframeOptions:{duration:this.animationDuration,easing:getComputedStyle(document.documentElement).getPropertyValue(\"--primer-animation-easing\").trim(),fill:\"both\"}}}handleToggleEditMode(t){this.isEditMode=t.detail,this.deletePaymentMethodId=null}handleDeletePaymentMethod(t){this.deletePaymentMethodId=t.detail}handleCancelDelete(){this.deletePaymentMethodId=null}async handleConfirmDelete(){if(!this.vaultManagerContext?.deleteVaultedPaymentMethod||!this.deletePaymentMethodId){this.errorMessage=A(\"something_went_wrong_error\",{id:\"something_went_wrong_error\"});return}try{this.isDeleting=!0,await this.vaultManagerContext.deleteVaultedPaymentMethod(this.deletePaymentMethodId),this.deletePaymentMethodId=null}catch(t){this.errorMessage=t instanceof Error?t.message:A(\"something_went_wrong_error\",{id:\"something_went_wrong_error\"})}finally{this.isDeleting=!1}}handlePaymentError(t){let r=t.detail?.error;this.errorMessage=r instanceof Error?r.message:A(\"payment_processing_error\",{id:\"payment_processing_error\"})}handleCloseError(){this.errorMessage=\"\"}getPaymentMethodName(t){if(!this.vaultManagerContext)return\"\";let r=this.vaultManagerContext.vaultedPaymentMethods.find(o=>o.id===t);if(!r)return\"\";try{return Xr(r).description||\"\"}catch{return\"\"}}renderLoadingOverlay(){return c` <div class=\"loading-overlay\" ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} > <primer-spinner size=\"medium\" color=\"var(--primer-color-loader)\" ></primer-spinner> </div> `}renderDeleteConfirmation(){if(!this.deletePaymentMethodId)return h;let t=this.getPaymentMethodName(this.deletePaymentMethodId);return c` <div class=\"delete-confirmation-container\"> <primer-vault-delete-confirmation .isDeleting=${this.isDeleting} .paymentMethodId=${this.deletePaymentMethodId} .paymentMethodName=${t} @confirm-delete=${this.handleConfirmDelete} @cancel-delete=${this.handleCancelDelete} ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-delete-confirmation> </div> `}renderPaymentMethodItem(t){return this.deletePaymentMethodId===t.id?h:c` <primer-vault-payment-method-item .paymentMethod=${t} .isEditMode=${this.isEditMode} @delete-payment-method=${this.handleDeletePaymentMethod} ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-payment-method-item> `}renderPaymentMethodList(){let t=this.vaultManagerContext?.vaultedPaymentMethods||[],r=!this.isEditMode&&t.length>0&&!this.deletePaymentMethodId;return c` <div class=\"payment-methods-list\"> ${t.map(o=>this.renderPaymentMethodItem(o))} ${U(r,()=>c` <div class=\"submit-button-container\"> <primer-vault-payment-submit class=\"submit-button\" @primer-vault-payment-error=${this.handlePaymentError} ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-payment-submit> </div> `,()=>h)} </div> `}render(){if(!this.vaultManagerContext?.enabled)return h;let t=this.vaultManagerContext.vaultedPaymentMethods.length>0,r=this.vaultManagerContext.isLoading,o=this.vaultManagerContext.isUpdating;return c` <div class=\"vault-manager ${o?\"is-updating\":\"\"}\"> <primer-vault-manager-header .isEditMode=${this.isEditMode} .hasPaymentMethods=${t} @toggle-edit-mode=${this.handleToggleEditMode} ></primer-vault-manager-header> ${U(this.errorMessage,()=>c` <primer-vault-error-message .errorMessage=${this.errorMessage} @close-error=${this.handleCloseError} ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-error-message> `,()=>h)} <div class=\"vault-manager-content\"> ${U(!r&&!t,()=>c` <div class=\"content-container\"> <primer-vault-empty-state ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-empty-state> </div> `,()=>h)} ${U(!r&&t,()=>c` <div class=\"content-container\"> ${U(this.deletePaymentMethodId,()=>this.renderDeleteConfirmation(),()=>this.renderPaymentMethodList())} </div> `,()=>h)} </div> ${U(o,()=>this.renderLoadingOverlay(),()=>h)} </div> `}}"
+          "default": "class extends v{constructor(){super();this.vaultManagerContext=null;this.isEditMode=!1;this.deletePaymentMethodId=null;this.isDeleting=!1;this.errorMessage=\"\";this.animationDuration=300;new Tt(this,{defaultOptions:{keyframeOptions:{duration:Number(getComputedStyle(document.documentElement).getPropertyValue(\"--primer-animation-duration\").trim().replace(\"ms\",\"\")),easing:getComputedStyle(document.documentElement).getPropertyValue(\"--primer-animation-easing\").trim()}}})}getAnimationConfig(){return{keyframeOptions:{duration:this.animationDuration,easing:getComputedStyle(document.documentElement).getPropertyValue(\"--primer-animation-easing\").trim(),fill:\"both\"}}}handleToggleEditMode(t){this.isEditMode=t.detail,this.deletePaymentMethodId=null}handleDeletePaymentMethod(t){this.deletePaymentMethodId=t.detail}handleCancelDelete(){this.deletePaymentMethodId=null}async handleConfirmDelete(){if(!this.vaultManagerContext?.deleteVaultedPaymentMethod||!this.deletePaymentMethodId){this.errorMessage=A(\"something_went_wrong_error\",{id:\"something_went_wrong_error\"});return}try{this.isDeleting=!0,await this.vaultManagerContext.deleteVaultedPaymentMethod(this.deletePaymentMethodId),this.deletePaymentMethodId=null}catch(t){this.errorMessage=t instanceof Error?t.message:A(\"something_went_wrong_error\",{id:\"something_went_wrong_error\"})}finally{this.isDeleting=!1}}handlePaymentError(t){let r=t.detail?.error;this.errorMessage=r instanceof Error?r.message:A(\"payment_processing_error\",{id:\"payment_processing_error\"})}handleCloseError(){this.errorMessage=\"\"}getPaymentMethodName(t){if(!this.vaultManagerContext)return\"\";let r=this.vaultManagerContext.vaultedPaymentMethods.find(o=>o.id===t);if(!r)return\"\";try{return Jr(r).description||\"\"}catch{return\"\"}}renderLoadingOverlay(){return c` <div class=\"loading-overlay\" ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} > <primer-spinner size=\"medium\" color=\"var(--primer-color-loader)\" ></primer-spinner> </div> `}renderDeleteConfirmation(){if(!this.deletePaymentMethodId)return h;let t=this.getPaymentMethodName(this.deletePaymentMethodId);return c` <div class=\"delete-confirmation-container\"> <primer-vault-delete-confirmation .isDeleting=${this.isDeleting} .paymentMethodId=${this.deletePaymentMethodId} .paymentMethodName=${t} @confirm-delete=${this.handleConfirmDelete} @cancel-delete=${this.handleCancelDelete} ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-delete-confirmation> </div> `}renderPaymentMethodItem(t){return this.deletePaymentMethodId===t.id?h:c` <primer-vault-payment-method-item .paymentMethod=${t} .isEditMode=${this.isEditMode} @delete-payment-method=${this.handleDeletePaymentMethod} ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-payment-method-item> `}renderPaymentMethodList(){let t=this.vaultManagerContext?.vaultedPaymentMethods||[],r=!this.isEditMode&&t.length>0&&!this.deletePaymentMethodId;return c` <div class=\"payment-methods-list\"> ${t.map(o=>this.renderPaymentMethodItem(o))} ${V(r,()=>c` <div class=\"submit-button-container\"> <primer-vault-payment-submit class=\"submit-button\" @primer-vault-payment-error=${this.handlePaymentError} ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-payment-submit> </div> `,()=>h)} </div> `}render(){if(!this.vaultManagerContext?.enabled)return h;let t=this.vaultManagerContext.vaultedPaymentMethods.length>0,r=this.vaultManagerContext.isLoading,o=this.vaultManagerContext.isUpdating;return c` <div class=\"vault-manager ${o?\"is-updating\":\"\"}\"> <primer-vault-manager-header .isEditMode=${this.isEditMode} .hasPaymentMethods=${t} @toggle-edit-mode=${this.handleToggleEditMode} ></primer-vault-manager-header> ${V(this.errorMessage,()=>c` <primer-vault-error-message .errorMessage=${this.errorMessage} @close-error=${this.handleCloseError} ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-error-message> `,()=>h)} <div class=\"vault-manager-content\"> ${V(!r&&!t,()=>c` <div class=\"content-container\"> <primer-vault-empty-state ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-empty-state> </div> `,()=>h)} ${V(!r&&t,()=>c` <div class=\"content-container\"> ${V(this.deletePaymentMethodId,()=>this.renderDeleteConfirmation(),()=>this.renderPaymentMethodList())} </div> `,()=>h)} </div> ${V(o,()=>this.renderLoadingOverlay(),()=>h)} </div> `}}"
         },
         {
           "kind": "variable",
           "name": "ve",
-          "default": "class extends v{constructor(){super(...arguments);this.vaultManagerContext=null;this.vaultItemContext=null;this.headlessUtils=null;this.paymentMethod=null;this.isEditMode=!1;this._getAssetsTask=new D(this,{task:async([t,r,o])=>{if(!t||!r||!o)return L;let n=\"\";if(Mn(t))n=r.getCardNetworkAsset(t.paymentInstrumentData.network).cardUrl;else{let u=await r.getCDNAssets(t.paymentMethodType);u&&(n=u.assets?.icon?`${u.goatCdnUrl}/${u.assets.icon}`:\"\")}let l=o.cvvRecapture,g=Xr(t);return{icon:n,shouldShowCVV:l,...g}},args:()=>[this.paymentMethod,this.headlessUtils,this.vaultManagerContext]})}isSelected(){if(!this.vaultManagerContext||!this.paymentMethod)return!1;let t=this.vaultItemContext?.selectedVaultedPaymentMethod;return!!t&&t.id===this.paymentMethod.id}handleClick(){this.isEditMode||!this.vaultManagerContext||!this.paymentMethod||(this.isSelected()?this.vaultItemContext?.setSelectedVaultedPaymentMethod(null):this.vaultItemContext?.setSelectedVaultedPaymentMethod(this.paymentMethod))}handleDeleteClick(t){t.stopPropagation(),this.dispatchEvent(new CustomEvent(\"delete-payment-method\",{detail:this.paymentMethod?.id,bubbles:!0,composed:!0}))}renderPaymentMethodContent(t){let r=t.icon?c`<img class=\"payment-method-icon\" src=${t.icon} alt=${t.description} />`:c` <div class=\"payment-method-icon payment-method-icon-generic\"> <primer-icon name=\"payment-card\" size=\"sm\"></primer-icon> </div> `;return c` ${r} <div class=\"payment-method-details\"> <div class=\"payment-method-description\">${t.description}</div> ${t.secondaryDescription?c`<div class=\"payment-method-secondary-description\"> ${t.secondaryDescription} </div>`:h} </div> `}render(){return this._getAssetsTask.render({error:()=>h,complete:t=>{let r=this.isSelected()?\"checked\":\"default\";return c` <div class=\"payment-method-wrapper\"> <div class=\"payment-method-container\"> <primer-button variant=\"secondary\" class=\"payment-method-button\" selectable ?disabled=${this.isEditMode} selectionState=${r} @click=${this.handleClick} > ${this.renderPaymentMethodContent(t)} </primer-button> ${this.isEditMode?c` <button class=\"delete-button\" @click=${this.handleDeleteClick} aria-label=${`${A(\"delete\",{id:\"delete\"})} ${t.description}`} > <primer-icon name=\"trash\" size=\"sm\"></primer-icon> </button> `:h} </div> ${U(t.shouldShowCVV&&this.isSelected()&&!this.isEditMode,()=>c`<primer-vault-cvv-input .paymentMethod=\"${this.paymentMethod}\" ></primer-vault-cvv-input>`,()=>h)} </div> `}})}}"
+          "default": "class extends v{constructor(){super(...arguments);this.vaultManagerContext=null;this.vaultItemContext=null;this.headlessUtils=null;this.paymentMethod=null;this.isEditMode=!1;this._getAssetsTask=new D(this,{task:async([t,r,o])=>{if(!t||!r||!o)return L;let n=\"\";if(Mn(t))n=r.getCardNetworkAsset(t.paymentInstrumentData.network).cardUrl;else{let u=await r.getCDNAssets(t.paymentMethodType);u&&(n=u.assets?.icon?`${u.goatCdnUrl}/${u.assets.icon}`:\"\")}let l=o.cvvRecapture,g=Jr(t);return{icon:n,shouldShowCVV:l,...g}},args:()=>[this.paymentMethod,this.headlessUtils,this.vaultManagerContext]})}isSelected(){if(!this.vaultManagerContext||!this.paymentMethod)return!1;let t=this.vaultItemContext?.selectedVaultedPaymentMethod;return!!t&&t.id===this.paymentMethod.id}handleClick(){this.isEditMode||!this.vaultManagerContext||!this.paymentMethod||(this.isSelected()?this.vaultItemContext?.setSelectedVaultedPaymentMethod(null):this.vaultItemContext?.setSelectedVaultedPaymentMethod(this.paymentMethod))}handleDeleteClick(t){t.stopPropagation(),this.dispatchEvent(new CustomEvent(\"delete-payment-method\",{detail:this.paymentMethod?.id,bubbles:!0,composed:!0}))}renderPaymentMethodContent(t){let r=t.icon?c`<img class=\"payment-method-icon\" src=${t.icon} alt=${t.description} />`:c` <div class=\"payment-method-icon payment-method-icon-generic\"> <primer-icon name=\"payment-card\" size=\"sm\"></primer-icon> </div> `;return c` ${r} <div class=\"payment-method-details\"> <div class=\"payment-method-description\">${t.description}</div> ${t.secondaryDescription?c`<div class=\"payment-method-secondary-description\"> ${t.secondaryDescription} </div>`:h} </div> `}render(){return this._getAssetsTask.render({error:()=>h,complete:t=>{let r=this.isSelected()?\"checked\":\"default\";return c` <div class=\"payment-method-wrapper\"> <div class=\"payment-method-container\"> <primer-button variant=\"secondary\" class=\"payment-method-button\" selectable ?disabled=${this.isEditMode} selectionState=${r} @click=${this.handleClick} > ${this.renderPaymentMethodContent(t)} </primer-button> ${this.isEditMode?c` <button class=\"delete-button\" @click=${this.handleDeleteClick} aria-label=${`${A(\"delete\",{id:\"delete\"})} ${t.description}`} > <primer-icon name=\"trash\" size=\"sm\"></primer-icon> </button> `:h} </div> ${V(t.shouldShowCVV&&this.isSelected()&&!this.isEditMode,()=>c`<primer-vault-cvv-input .paymentMethod=\"${this.paymentMethod}\" ></primer-vault-cvv-input>`,()=>h)} </div> `}})}}"
         },
         {
           "kind": "variable",
@@ -187,7 +202,7 @@
         },
         {
           "kind": "variable",
-          "name": "Ee",
+          "name": "Ce",
           "default": "class extends v{constructor(){super(...arguments);this.isDeleting=!1;this.paymentMethodId=\"\";this.paymentMethodName=\"\";this.vaultManager=null}handleConfirmClick(){this.dispatchEvent(new CustomEvent(\"confirm-delete\",{bubbles:!0,composed:!0}))}handleCancelClick(){this.dispatchEvent(new CustomEvent(\"cancel-delete\",{bubbles:!0,composed:!0}))}render(){let t=this.paymentMethodName;return c` <div class=\"delete-confirmation\"> <div class=\"delete-message\"> <p class=\"delete-text\">${t}</p> </div> <div class=\"delete-actions\"> <button class=\"delete-confirm\" @click=${this.handleConfirmClick} ?disabled=${this.isDeleting} > ${this.isDeleting?A(\"deleting\",{id:\"deleting\"}):A(\"confirmVaultedPaymentMethodDeletion\",{id:\"confirmVaultedPaymentMethodDeletion\"})} </button> <button class=\"delete-cancel\" @click=${this.handleCancelClick} ?disabled=${this.isDeleting} > ${A(\"cancel\",{id:\"cancel\"})} </button> </div> </div> `}}"
         },
         {
@@ -208,7 +223,7 @@
         {
           "kind": "variable",
           "name": "re",
-          "default": "class extends v{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 D(this,{task:async([t,r])=>!t||!r||t.paymentMethodType!==\"PAYMENT_CARD\"||!t.paymentInstrumentData?.network||r.createCvvInput===null?L:{network:t.paymentInstrumentData.network,createCvvInput:r.createCvvInput},args:()=>[this.paymentMethod,this.vaultManagerFormContext]});this.cvvContainerId=`cvv-container-${Math.random().toString(36).substring(2,9)}`,new D(this,{task:async([t])=>{if(!t)return L;await this.updateComplete;let r=this.renderRoot.querySelector(`#${this.cvvContainerId}`);if(!r)return;let o=jr(this.computedStyles),n=o?{input:{base:o}}:void 0,l={cardNetwork:t.network,container:r,name:\"cvv\",placeholder:\"123\",style:n};this.cvvInput=await t.createCvvInput?.(l)??null,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:()=>h,complete:()=>c` <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> ${U(this.cvvError&&(this.vaultManagerCvvContext?.formIsDirty||this.cvvInputIsDirty&&this.cvvInputIsBlurred),()=>c` <primer-input-error slot=\"error\"> ${this.cvvError} </primer-input-error> `)} </primer-input-wrapper> </div> `})}}"
+          "default": "class extends v{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 D(this,{task:async([t,r])=>!t||!r||t.paymentMethodType!==\"PAYMENT_CARD\"||!t.paymentInstrumentData?.network||r.createCvvInput===null?L:{network:t.paymentInstrumentData.network,createCvvInput:r.createCvvInput},args:()=>[this.paymentMethod,this.vaultManagerFormContext]});this.cvvContainerId=`cvv-container-${Math.random().toString(36).substring(2,9)}`,new D(this,{task:async([t])=>{if(!t)return L;await this.updateComplete;let r=this.renderRoot.querySelector(`#${this.cvvContainerId}`);if(!r)return;let o=Gr(this.computedStyles),n=o?{input:{base:o}}:void 0,l={cardNetwork:t.network,container:r,name:\"cvv\",placeholder:\"123\",style:n};this.cvvInput=await t.createCvvInput?.(l)??null,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:()=>h,complete:()=>c` <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> ${V(this.cvvError&&(this.vaultManagerCvvContext?.formIsDirty||this.cvvInputIsDirty&&this.cvvInputIsBlurred),()=>c` <primer-input-error slot=\"error\"> ${this.cvvError} </primer-input-error> `)} </primer-input-wrapper> </div> `})}}"
         },
         {
           "kind": "variable",
@@ -268,7 +283,7 @@
           "kind": "js",
           "name": "CardForm",
           "declaration": {
-            "name": "ke",
+            "name": "Ee",
             "module": "cdn/primer-components.js"
           }
         },
@@ -372,7 +387,7 @@
           "kind": "js",
           "name": "InitializedPayments",
           "declaration": {
-            "name": "Vr",
+            "name": "Hr",
             "module": "cdn/primer-components.js"
           }
         },
@@ -404,7 +419,7 @@
           "kind": "js",
           "name": "NativePayment",
           "declaration": {
-            "name": "we",
+            "name": "ke",
             "module": "cdn/primer-components.js"
           }
         },
@@ -460,7 +475,7 @@
           "kind": "js",
           "name": "PrimerIcon",
           "declaration": {
-            "name": "Pe",
+            "name": "we",
             "module": "cdn/primer-components.js"
           }
         },
@@ -500,7 +515,7 @@
           "kind": "js",
           "name": "Spinner",
           "declaration": {
-            "name": "Me",
+            "name": "Pe",
             "module": "cdn/primer-components.js"
           }
         },
@@ -516,7 +531,7 @@
           "kind": "js",
           "name": "VaultDeleteConfirmation",
           "declaration": {
-            "name": "Ee",
+            "name": "Ce",
             "module": "cdn/primer-components.js"
           }
         },
@@ -616,13 +631,13 @@
         },
         {
           "kind": "variable",
-          "name": "Vr",
+          "name": "Hr",
           "default": "class{constructor(e){this._methods=e}get(e){return this._methods.get(e)}toArray(){return Array.from(this._methods.values())}size(){return this._methods.size}}"
         },
         {
           "kind": "variable",
           "name": "le",
-          "default": "class extends v{constructor(){super();this.customStyles=\"\";this.clientToken=\"\";this.options={};this._jsInitialized=!1;this.previousLoadingState=!0;this.hasAssignedContent=!1;this._loadingTimeoutId=null;this.locale=\"en-GB\";this.onSlotChange=t=>{let o=t.target.assignedNodes({flatten:!0});this.hasAssignedContent=o.length>0,this.requestUpdate()};this.sdkContextController=new xr(this),this.sdkStateController=new Er(this),this.primerEventsController=new gt(this),this.styleProcessingController=new Ar(this),this.vaultManagerController=new Yt(this),this.cardNetworkController=new gr(this),this.achPaymentEventsController=new Yr(this),new Ur(this)}set jsInitialized(t){this.requestUpdate(),this._jsInitialized=t}get jsInitialized(){return this._jsInitialized}attributeChangedCallback(t,r,o){t===zr.CUSTOM_STYLES?this.styleProcessingController.processCustomStyles(o):super.attributeChangedCallback(t,r,o)}disconnectedCallback(){this._loadingTimeoutId&&(window.clearTimeout(this._loadingTimeoutId),this._loadingTimeoutId=null),this.sdkStateController?.currentState.isLoading&&this.sdkStateController.forceCompleteLoading(),super.disconnectedCallback()}willUpdate(t){t.has(\"options\")&&(this.options?.locale&&(Oi(this.options?.locale)?this.locale=Di(this.options?.locale):R.warn(\"\\u{1F30E}\\u2757 Unsupported locale provided:\",this.options?.locale,\"- Falling back to default locale `en-GB`\")),Ri(this.locale||\"en-GB\"))}updated(){let t=getComputedStyle(this);this.sdkContextController.setComputedStyles(t),this.checkLoadingStateChange()}checkLoadingStateChange(){let t=this.sdkStateController?.currentState.isLoading||!1;this.previousLoadingState&&!t&&(this.jsInitialized=!0),this.previousLoadingState=t,t&&!this._loadingTimeoutId?this._loadingTimeoutId=window.setTimeout(()=>{this.sdkStateController?.currentState.isLoading&&(R.warn(\"Loading timeout in component, forcing completion\"),this.sdkStateController.forceCompleteLoading(),this.jsInitialized=!0),this._loadingTimeoutId=null},1e4):!t&&this._loadingTimeoutId&&(window.clearTimeout(this._loadingTimeoutId),this._loadingTimeoutId=null)}render(){let t=this.sdkStateController.currentState,r=t.isLoading,o=t.error,n=!r&&!o;return c` ${U(r,()=>h)} ${U(o,()=>c`<primer-checkout-error></primer-checkout-error>`)} ${U(n,()=>c` <slot name=\"main\" @slotchange=${this.onSlotChange}></slot> ${U(this.hasAssignedContent,()=>h,()=>c`<primer-main></primer-main>`)} `,()=>h)} `}addEventListener(t,r,o){super.addEventListener(t,r,o)}removeEventListener(t,r,o){super.removeEventListener(t,r,o)}}"
+          "default": "class extends v{constructor(){super();this.customStyles=\"\";this.clientToken=\"\";this.options={};this._jsInitialized=!1;this.previousLoadingState=!0;this.hasAssignedContent=!1;this._loadingTimeoutId=null;this.locale=\"en-GB\";this.onSlotChange=t=>{let o=t.target.assignedNodes({flatten:!0});this.hasAssignedContent=o.length>0,this.requestUpdate()};this.sdkContextController=new Ar(this),this.sdkStateController=new Cr(this),this.primerEventsController=new gt(this),this.styleProcessingController=new _r(this),this.vaultManagerController=new Yt(this),this.cardNetworkController=new fr(this),this.achPaymentEventsController=new zr(this),new Yr(this)}set jsInitialized(t){this.requestUpdate(),this._jsInitialized=t}get jsInitialized(){return this._jsInitialized}attributeChangedCallback(t,r,o){t===Fr.CUSTOM_STYLES?this.styleProcessingController.processCustomStyles(o):super.attributeChangedCallback(t,r,o)}disconnectedCallback(){this._loadingTimeoutId&&(window.clearTimeout(this._loadingTimeoutId),this._loadingTimeoutId=null),this.sdkStateController?.currentState.isLoading&&this.sdkStateController.forceCompleteLoading(),super.disconnectedCallback()}willUpdate(t){t.has(\"options\")&&(this.options?.locale&&(Oi(this.options?.locale)?this.locale=Di(this.options?.locale):R.warn(\"\\u{1F30E}\\u2757 Unsupported locale provided:\",this.options?.locale,\"- Falling back to default locale `en-GB`\")),Ri(this.locale||\"en-GB\"))}updated(){let t=getComputedStyle(this);this.sdkContextController.setComputedStyles(t),this.checkLoadingStateChange()}checkLoadingStateChange(){let t=this.sdkStateController?.currentState.isLoading||!1;this.previousLoadingState&&!t&&(this.jsInitialized=!0),this.previousLoadingState=t,t&&!this._loadingTimeoutId?this._loadingTimeoutId=window.setTimeout(()=>{this.sdkStateController?.currentState.isLoading&&(R.warn(\"Loading timeout in component, forcing completion\"),this.sdkStateController.forceCompleteLoading(),this.jsInitialized=!0),this._loadingTimeoutId=null},1e4):!t&&this._loadingTimeoutId&&(window.clearTimeout(this._loadingTimeoutId),this._loadingTimeoutId=null)}render(){let t=this.sdkStateController.currentState,r=t.isLoading,o=t.error,n=!r&&!o;return c` ${V(r,()=>h)} ${V(o,()=>c`<primer-checkout-error></primer-checkout-error>`)} ${V(n,()=>c` <slot name=\"main\" @slotchange=${this.onSlotChange}></slot> ${V(this.hasAssignedContent,()=>h,()=>c`<primer-main></primer-main>`)} `,()=>h)} `}addEventListener(t,r,o){super.addEventListener(t,r,o)}removeEventListener(t,r,o){super.removeEventListener(t,r,o)}}"
         },
         {
           "kind": "function",
@@ -642,7 +657,7 @@
         },
         {
           "kind": "variable",
-          "name": "Me",
+          "name": "Pe",
           "default": "class extends v{constructor(){super(...arguments);this.color=\"var(--primer-color-loader)\";this.size=\"medium\";this.compact=!1}getSize(){if(this.size in Ki)return Ki[this.size];let t=parseInt(this.size,10);return isNaN(t)?Ki.medium:t}render(){let t=this.getSize(),r=20,o=`0 0 ${r} ${r}`;return this.style.setProperty(\"--spinner-color\",this.color),this.style.setProperty(\"--spinner-size\",`${t}px`),c` <div class=\"spinner-container ${this.compact?\"compact\":\"\"}\"> <svg class=\"spinner\" width=\"${t}\" height=\"${t}\" viewBox=\"${o}\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" role=\"status\" aria-label=\"Loading\" > <path d=\"M4.27827 10.002C4.27827 6.84166 6.84019 4.27973 10.0005 4.27973C10.7676 4.27973 11.3894 3.6579 11.3894 2.89084C11.3894 2.12378 10.7676 1.50195 10.0005 1.50195C5.30607 1.50195 1.50049 5.30753 1.50049 10.002C1.50049 14.6964 5.30607 18.502 10.0005 18.502C14.6949 18.502 18.5005 14.6964 18.5005 10.002C18.5005 9.23489 17.8787 8.61306 17.1116 8.61306C16.3445 8.61306 15.7227 9.23489 15.7227 10.002C15.7227 13.1622 13.1608 15.7242 10.0005 15.7242C6.84019 15.7242 4.27827 13.1622 4.27827 10.002Z\" fill=\"currentColor\" class=\"path\" /> </svg> </div> `}}"
         },
         {
@@ -667,7 +682,7 @@
         },
         {
           "kind": "variable",
-          "name": "Pe",
+          "name": "we",
           "default": "class extends v{constructor(){super(...arguments);this.color=\"var(--primer-color-icon-primary)\";this.size=\"lg\"}render(){let t=this.name?wa[this.name]:null;return c` <div style=\"--internal-icon-color: ${this.color}\"> ${t||c`<slot></slot>`} </div> `}}"
         },
         {
@@ -713,7 +728,7 @@
         {
           "kind": "variable",
           "name": "pe",
-          "default": "class extends v{constructor(){super(...arguments);this.formController=new Br(this,t=>this._paymentMethodManagerTask.value.setAndValidate(t));this.paymentManagers=new Map;this.sdkState=void 0;this.clientOptions=void 0;this.screen=\"form\";this.isSubmitting=!1;this._paymentMethodManagerTask=new D(this,{task:async([t])=>t!==\"STRIPE_ACH\"?L:this.paymentManagers.get(t)?.manager,args:()=>[this.paymentMethod?.type]})}_handleInput(t,r){let o=t.target;this.formController.setFieldValue(r,o.value)}_handleBlur(t){this.formController.setFieldTouched(t)}_handleError(t){this.dispatchEvent(new CustomEvent(\"primer-ach-error\",{bubbles:!0,composed:!0,detail:{error:t instanceof Error?t:new Error(typeof t==\"string\"?t:\"Unknown error occurred\")}}))}async _handleSubmitButtonClick(t){if(!this.isSubmitting){this.isSubmitting=!0;try{let r=await t.start(this.formController.formData);if(!r||r.valid)return await this._handleCollectBankAccountDetails(t);r&&this.formController.setValidation(r,!0)}catch(r){this._handleError(r)}finally{this.isSubmitting=!1}}}async _handleCollectBankAccountDetails(t){try{await t.collectBankAccountDetails(),this.screen=\"mandate\",this.dispatchEvent(new CustomEvent(\"primer-ach-bank-details-collected\",{bubbles:!0,composed:!0}))}catch(r){this._handleError(r)}}async _handleConfirmMandate(){if(this._paymentMethodManagerTask.value){this.isSubmitting=!0;try{await this._paymentMethodManagerTask.value.confirmMandate(),this.dispatchEvent(new CustomEvent(\"primer-ach-mandate-confirmed\",{bubbles:!0,composed:!0}))}catch(t){this._handleError(t)}finally{this.isSubmitting=!1}}}async _handleDeclineMandate(){if(this._paymentMethodManagerTask.value){this.isSubmitting=!0;try{await this._paymentMethodManagerTask.value.declineMandate(),this.dispatchEvent(new CustomEvent(\"primer-ach-mandate-declined\",{bubbles:!0,composed:!0}))}catch(t){this._handleError(t)}finally{this.isSubmitting=!1}}}renderForm(t){return c` <h2> ${A(\"payWithAch\",{id:\"payWithAch\"})} </h2> <p> ${A(\"stripe_ach_user_details_collection_subtitle_label\",{id:\"stripe_ach_user_details_collection_subtitle_label\"})} </p> <form @submit=${r=>r.preventDefault()}> <div class=\"form-row\"> <primer-input-wrapper .hasError=${this.formController.hasError.firstName} > <primer-input-label slot=\"label\"> ${A(\"stripe_ach_user_details_collection_first_name_label\",{id:\"stripe_ach_user_details_collection_first_name_label\"})} </primer-input-label> <primer-input slot=\"input\" .value=${this.formController.formState.firstName.value} @input=${r=>this._handleInput(r,\"firstName\")} @blur=${()=>this._handleBlur(\"firstName\")} ?disabled=${this.isSubmitting} ></primer-input> <primer-input-error slot=\"error\"> ${this.formController.hasError.firstName?this.formController.formState.firstName.error:h} </primer-input-error> </primer-input-wrapper> <primer-input-wrapper .hasError=${this.formController.hasError.lastName} > <primer-input-label slot=\"label\"> ${A(\"stripe_ach_user_details_collection_last_name_label\",{id:\"stripe_ach_user_details_collection_last_name_label\"})} </primer-input-label> <primer-input slot=\"input\" .value=${this.formController.formState.lastName.value} @input=${r=>this._handleInput(r,\"lastName\")} @blur=${()=>this._handleBlur(\"lastName\")} ?disabled=${this.isSubmitting} > </primer-input> <primer-input-error slot=\"error\"> ${this.formController.hasError.lastName?this.formController.formState.lastName.error:h} </primer-input-error> </primer-input-wrapper> </div> <primer-input-wrapper .hasError=${this.formController.hasError.emailAddress} > <primer-input-label slot=\"label\"> ${A(\"stripe_ach_user_details_collection_email_address_label\",{id:\"stripe_ach_user_details_collection_email_address_label\"})} </primer-input-label> <primer-input slot=\"input\" type=\"email\" .value=${this.formController.formState.emailAddress.value} @input=${r=>this._handleInput(r,\"emailAddress\")} @blur=${()=>this._handleBlur(\"emailAddress\")} ?disabled=${this.isSubmitting} ></primer-input> <primer-input-error slot=\"error\"> ${this.formController.hasError.emailAddress?this.formController.formState.emailAddress.error:h} </primer-input-error> </primer-input-wrapper> <p> ${A(\"stripe_ach_user_details_collection_data_usage_label\",{id:\"stripe_ach_user_details_collection_data_usage_label\"})} </p> <primer-button buttonType=\"submit\" variant=\"primary\" @click=${()=>this._handleSubmitButtonClick(t)} ?disabled=${this.isSubmitting} ?loading=${this.isSubmitting} > ${A(\"stripe_ach_user_details_collection_continue_button\",{id:\"stripe_ach_user_details_collection_continue_button\"})} </primer-button> </form> `}renderMandate(){return c` <h2> ${A(\"payWithAch\",{id:\"payWithAch\"})} </h2> <p> ${this.clientOptions?.stripe?.mandateData.fullMandateText??A(\"stripe_ach_mandate_template_web\",{id:\"stripe_ach_mandate_template_web\"}).replace(/\\{merchantName\\}/g,this.clientOptions?.stripe?.mandateData.merchantName??\"Merchant\")} </p> <div class=\"button-group\"> <primer-button variant=\"primary\" @click=${this._handleConfirmMandate.bind(this)} ?disabled=${this.isSubmitting} ?loading=${this.isSubmitting} > ${A(\"stripe_ach_mandate_accept_button\",{id:\"stripe_ach_mandate_accept_button\"})} </primer-button> <primer-button variant=\"tertiary\" @click=${this._handleDeclineMandate.bind(this)} ?disabled=${this.isSubmitting} > ${A(\"stripe_ach_mandate_cancel_payment_button\",{id:\"stripe_ach_mandate_cancel_payment_button\"})} </primer-button> </div> `}render(){return this._paymentMethodManagerTask.render({complete:t=>t?this.screen===\"form\"?this.renderForm(t):this.renderMandate():h})}}"
+          "default": "class extends v{constructor(){super(...arguments);this.formController=new Kr(this,t=>this._paymentMethodManagerTask.value.setAndValidate(t));this.paymentManagers=new Map;this.sdkState=void 0;this.clientOptions=void 0;this.screen=\"form\";this.isSubmitting=!1;this._paymentMethodManagerTask=new D(this,{task:async([t])=>t!==\"STRIPE_ACH\"?L:this.paymentManagers.get(t)?.manager,args:()=>[this.paymentMethod?.type]})}_handleInput(t,r){let o=t.target;this.formController.setFieldValue(r,o.value)}_handleBlur(t){this.formController.setFieldTouched(t)}_handleError(t){this.dispatchEvent(new CustomEvent(\"primer-ach-error\",{bubbles:!0,composed:!0,detail:{error:t instanceof Error?t:new Error(typeof t==\"string\"?t:\"Unknown error occurred\")}}))}async _handleSubmitButtonClick(t){if(!this.isSubmitting){this.isSubmitting=!0;try{let r=await t.start(this.formController.formData);if(!r||r.valid)return await this._handleCollectBankAccountDetails(t);r&&this.formController.setValidation(r,!0)}catch(r){this._handleError(r)}finally{this.isSubmitting=!1}}}async _handleCollectBankAccountDetails(t){try{await t.collectBankAccountDetails(),this.screen=\"mandate\",this.dispatchEvent(new CustomEvent(\"primer-ach-bank-details-collected\",{bubbles:!0,composed:!0}))}catch(r){this._handleError(r)}}async _handleConfirmMandate(){if(this._paymentMethodManagerTask.value){this.isSubmitting=!0;try{await this._paymentMethodManagerTask.value.confirmMandate(),this.dispatchEvent(new CustomEvent(\"primer-ach-mandate-confirmed\",{bubbles:!0,composed:!0}))}catch(t){this._handleError(t)}finally{this.isSubmitting=!1}}}async _handleDeclineMandate(){if(this._paymentMethodManagerTask.value){this.isSubmitting=!0;try{await this._paymentMethodManagerTask.value.declineMandate(),this.dispatchEvent(new CustomEvent(\"primer-ach-mandate-declined\",{bubbles:!0,composed:!0}))}catch(t){this._handleError(t)}finally{this.isSubmitting=!1}}}renderForm(t){return c` <h2> ${A(\"payWithAch\",{id:\"payWithAch\"})} </h2> <p> ${A(\"stripe_ach_user_details_collection_subtitle_label\",{id:\"stripe_ach_user_details_collection_subtitle_label\"})} </p> <form @submit=${r=>r.preventDefault()}> <div class=\"form-row\"> <primer-input-wrapper .hasError=${this.formController.hasError.firstName} > <primer-input-label slot=\"label\"> ${A(\"stripe_ach_user_details_collection_first_name_label\",{id:\"stripe_ach_user_details_collection_first_name_label\"})} </primer-input-label> <primer-input slot=\"input\" .value=${this.formController.formState.firstName.value} @input=${r=>this._handleInput(r,\"firstName\")} @blur=${()=>this._handleBlur(\"firstName\")} ?disabled=${this.isSubmitting} ></primer-input> <primer-input-error slot=\"error\"> ${this.formController.hasError.firstName?this.formController.formState.firstName.error:h} </primer-input-error> </primer-input-wrapper> <primer-input-wrapper .hasError=${this.formController.hasError.lastName} > <primer-input-label slot=\"label\"> ${A(\"stripe_ach_user_details_collection_last_name_label\",{id:\"stripe_ach_user_details_collection_last_name_label\"})} </primer-input-label> <primer-input slot=\"input\" .value=${this.formController.formState.lastName.value} @input=${r=>this._handleInput(r,\"lastName\")} @blur=${()=>this._handleBlur(\"lastName\")} ?disabled=${this.isSubmitting} > </primer-input> <primer-input-error slot=\"error\"> ${this.formController.hasError.lastName?this.formController.formState.lastName.error:h} </primer-input-error> </primer-input-wrapper> </div> <primer-input-wrapper .hasError=${this.formController.hasError.emailAddress} > <primer-input-label slot=\"label\"> ${A(\"stripe_ach_user_details_collection_email_address_label\",{id:\"stripe_ach_user_details_collection_email_address_label\"})} </primer-input-label> <primer-input slot=\"input\" type=\"email\" .value=${this.formController.formState.emailAddress.value} @input=${r=>this._handleInput(r,\"emailAddress\")} @blur=${()=>this._handleBlur(\"emailAddress\")} ?disabled=${this.isSubmitting} ></primer-input> <primer-input-error slot=\"error\"> ${this.formController.hasError.emailAddress?this.formController.formState.emailAddress.error:h} </primer-input-error> </primer-input-wrapper> <p> ${A(\"stripe_ach_user_details_collection_data_usage_label\",{id:\"stripe_ach_user_details_collection_data_usage_label\"})} </p> <primer-button buttonType=\"submit\" variant=\"primary\" @click=${()=>this._handleSubmitButtonClick(t)} ?disabled=${this.isSubmitting} ?loading=${this.isSubmitting} > ${A(\"stripe_ach_user_details_collection_continue_button\",{id:\"stripe_ach_user_details_collection_continue_button\"})} </primer-button> </form> `}renderMandate(){return c` <h2> ${A(\"payWithAch\",{id:\"payWithAch\"})} </h2> <p> ${this.clientOptions?.stripe?.mandateData.fullMandateText??A(\"stripe_ach_mandate_template_web\",{id:\"stripe_ach_mandate_template_web\"}).replace(/\\{merchantName\\}/g,this.clientOptions?.stripe?.mandateData.merchantName??\"Merchant\")} </p> <div class=\"button-group\"> <primer-button variant=\"primary\" @click=${this._handleConfirmMandate.bind(this)} ?disabled=${this.isSubmitting} ?loading=${this.isSubmitting} > ${A(\"stripe_ach_mandate_accept_button\",{id:\"stripe_ach_mandate_accept_button\"})} </primer-button> <primer-button variant=\"tertiary\" @click=${this._handleDeclineMandate.bind(this)} ?disabled=${this.isSubmitting} > ${A(\"stripe_ach_mandate_cancel_payment_button\",{id:\"stripe_ach_mandate_cancel_payment_button\"})} </primer-button> </div> `}render(){return this._paymentMethodManagerTask.render({complete:t=>t?this.screen===\"form\"?this.renderForm(t):this.renderMandate():h})}}"
         },
         {
           "kind": "variable",
@@ -728,22 +743,22 @@
         {
           "kind": "variable",
           "name": "Fe",
-          "default": "class extends v{constructor(){super(...arguments);this.hasAssignedContent=!1;this.onSlotChange=t=>{let o=t.target.assignedNodes({flatten:!0});this.hasAssignedContent=o.length>0,this.requestUpdate()};this.paymentMethods=null;this.sdkState=null}render(){return this.sdkState?.isSuccessful?c` <slot name=\"checkout-complete\"> <primer-checkout-complete></primer-checkout-complete> </slot> `:c` <slot name=\"payments\" @slotchange=${this.onSlotChange}></slot> ${U(this.hasAssignedContent,()=>h,()=>c` <div class=${Z({\"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(t=>c` <primer-payment-method type=${t.type} ></primer-payment-method> `)} </div> </primer-show-other-payments> <primer-error-message-container></primer-error-message-container> </div> `)} `}}"
+          "default": "class extends v{constructor(){super(...arguments);this.hasAssignedContent=!1;this.onSlotChange=t=>{let o=t.target.assignedNodes({flatten:!0});this.hasAssignedContent=o.length>0,this.requestUpdate()};this.paymentMethods=null;this.sdkState=null}render(){return this.sdkState?.isSuccessful?c` <slot name=\"checkout-complete\"> <primer-checkout-complete></primer-checkout-complete> </slot> `:c` <slot name=\"payments\" @slotchange=${this.onSlotChange}></slot> ${V(this.hasAssignedContent,()=>h,()=>c` <div class=${Z({\"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(t=>c` <primer-payment-method type=${t.type} ></primer-payment-method> `)} </div> </primer-show-other-payments> <primer-error-message-container></primer-error-message-container> </div> `)} `}}"
         },
         {
           "kind": "variable",
-          "name": "we",
+          "name": "ke",
           "default": "class extends v{constructor(){super();this.paymentManagers=new Map;this.computedStyles=null;this._buttonId=\"button-container\";this.loadManagerTask=new D(this,{args:()=>[this.paymentMethod?.type],task:async([t])=>{if(!t)return L;let r=this.paymentManagers.get(t)?.manager;if(!r)throw new Error(`No manager found for payment method type ${t}`);return r}}),new D(this,{args:()=>[this.loadManagerTask.value],task:async([t])=>{if(!t)return L;await this.updateComplete;let r=this.shadowRoot?.getElementById(this._buttonId);if(!r)return;let o=this.calculateButtonHeight(),n=t.createButton(),l=this.createRenderOptions(o);return await n.render(this.paymentMethod?.type===\"GOOGLE_PAY\"?this.shadowRoot?.getRootNode():r,l),t}})}calculateButtonHeight(){if(typeof window>\"u\"||!this.isConnected||!this.computedStyles)return 0;let t=parseFloat(this.computedStyles.getPropertyValue(\"--primer-typography-title-large-line-height\")),r=parseFloat(this.computedStyles.getPropertyValue(\"--primer-space-medium\"));return t+2*r}createRenderOptions(t){let r=this.paymentMethod?.type;return r===\"GOOGLE_PAY\"?{style:{shadowRoot:!0}}:r===\"APPLE_PAY\"?{style:{buttonHeight:t}}:r===\"PAYPAL\"?{style:{buttonHeight:t}}:{style:{buttonHeight:t}}}updated(t){t.has(\"paymentMethod\")&&this.paymentMethod&&(this._buttonId=`button-container-${this.paymentMethod.type}`)}render(){return this.loadManagerTask.render({error:()=>h,complete:()=>c` <!-- The native button container is rendered first --> <div class=\"native-button-container\" id=\"${this._buttonId}\"></div> `,pending:()=>h})}}"
         },
         {
           "kind": "variable",
-          "name": "ke",
-          "default": "class extends v{constructor(){super(...arguments);this.hasAssignedContent=!1;this.selectedCardNetwork=null;this.paymentManagers=new Map;this.cardFormProvider=new q(this,{context:Kr,initialValue:null});this.eventsController=new gt(this);this.setupCardFormTask=new D(this,{task:async([t])=>{if(!t?.manager)return L;let{manager:r}=t,{cardNumberInput:o,expiryInput:n,cvvInput:l}=r.createHostedInputs();return this.cardFormProvider.setValue({cardNumberInput:o,expiryInput:n,cvvInput:l,setCardholderName:g=>r.setCardholderName(g),setCardNetwork:g=>{this.selectedCardNetwork=g},validate:()=>r.validate(),submit:g=>r.submit(g)}),!0},args:()=>[this.paymentManagers.get(\"PAYMENT_CARD\")]});this.handleSlotButtonClick=t=>{let o=t.target.closest(\"button, primer-button\");if(!o)return;this.isSubmitButton(o)&&(t.preventDefault(),this.submitCardPayment())};this.handleDirectSubmit=t=>{t.stopPropagation(),this.submitCardPayment()};this.onSlotChange=t=>{let o=t.target.assignedNodes({flatten:!0});this.hasAssignedContent=o.length>0};this.handleFormSubmit=t=>{t.preventDefault(),t.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(t){let r=t.tagName.toLowerCase(),o=r===\"button\",n=r===\"primer-button\";return o&&(t.getAttribute(\"type\")===\"submit\"||t.hasAttribute(\"data-submit\"))||n&&(t.getAttribute(\"buttonType\")===\"submit\"||t.hasAttribute(\"data-submit\"))}async submitCardPayment(){let t=this.cardFormProvider.value;if(!t)return;let r=await t.validate?.();if(r?.valid){let o=await t.submit?.(this.selectedCardNetwork?{cardNetwork:this.selectedCardNetwork}:void 0);this.eventsController.dispatchFormSubmitSuccess(o)}else{let o=r?.validationErrors;this.cardFormProvider.setValue({...t,errors:o}),this.eventsController.dispatchFormSubmitErrors(o)}}render(){return this.setupCardFormTask.status===De.ERROR||this.setupCardFormTask.status===De.INITIAL?h:c` <form @submit=${this.handleFormSubmit}> <slot name=\"card-form-content\" @slotchange=${this.onSlotChange}></slot> ${this.setupCardFormTask.render({complete:()=>U(this.hasAssignedContent,()=>h,()=>c` <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> `}}"
+          "name": "Ee",
+          "default": "class extends v{constructor(){super(...arguments);this.hideLabels=!1;this.hasAssignedContent=!1;this.selectedCardNetwork=null;this.paymentManagers=new Map;this.cardFormProvider=new q(this,{context:jr,initialValue:null});this.eventsController=new gt(this);this.setupCardFormTask=new D(this,{task:async([t])=>{if(!t?.manager)return L;let{manager:r}=t,{cardNumberInput:o,expiryInput:n,cvvInput:l}=r.createHostedInputs();return this.cardFormProvider.setValue({cardNumberInput:o,expiryInput:n,cvvInput:l,setCardholderName:g=>r.setCardholderName(g),setCardNetwork:g=>{this.selectedCardNetwork=g},validate:()=>r.validate(),submit:g=>r.submit(g),hideLabels:this.hideLabels}),!0},args:()=>[this.paymentManagers.get(\"PAYMENT_CARD\")]});this.handleSlotButtonClick=t=>{let o=t.target.closest(\"button, primer-button\");if(!o)return;this.isSubmitButton(o)&&(t.preventDefault(),this.submitCardPayment())};this.handleDirectSubmit=t=>{t.stopPropagation(),this.submitCardPayment()};this.onSlotChange=t=>{let o=t.target.assignedNodes({flatten:!0});this.hasAssignedContent=o.length>0};this.handleFormSubmit=t=>{t.preventDefault(),t.stopPropagation(),this.submitCardPayment()}}updated(t){super.updated(t),t.has(\"hideLabels\")&&this.cardFormProvider.value&&this.cardFormProvider.setValue({...this.cardFormProvider.value,hideLabels:this.hideLabels})}connectedCallback(){super.connectedCallback(),this.addEventListener(\"click\",this.handleSlotButtonClick),this.addEventListener(\"primer-form-submit\",this.handleDirectSubmit)}disconnectedCallback(){this.removeEventListener(\"click\",this.handleSlotButtonClick),this.removeEventListener(\"primer-form-submit\",this.handleDirectSubmit),super.disconnectedCallback()}isSubmitButton(t){let r=t.tagName.toLowerCase(),o=r===\"button\",n=r===\"primer-button\";return o&&(t.getAttribute(\"type\")===\"submit\"||t.hasAttribute(\"data-submit\"))||n&&(t.getAttribute(\"type\")===\"submit\"||t.hasAttribute(\"data-submit\"))}async submitCardPayment(){let t=this.cardFormProvider.value;if(!t)return;let r=await t.validate?.();if(r?.valid){let o=await t.submit?.(this.selectedCardNetwork?{cardNetwork:this.selectedCardNetwork}:void 0);this.eventsController.dispatchFormSubmitSuccess(o)}else{let o=r?.validationErrors;this.cardFormProvider.setValue({...t,errors:o}),this.eventsController.dispatchFormSubmitErrors(o)}}render(){return this.setupCardFormTask.status===De.ERROR||this.setupCardFormTask.status===De.INITIAL?h:c` <form @submit=${this.handleFormSubmit}> <slot name=\"card-form-content\" @slotchange=${this.onSlotChange}></slot> ${this.setupCardFormTask.render({complete:()=>V(this.hasAssignedContent,()=>h,()=>c` <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": "xt",
-          "default": "class extends X{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(t){let{network:r}=t.detail;this.cardFormContext&&this.cardFormContext.setCardNetwork(r)}renderInput(){if(this.hostedInputController.setupTask.status===De.ERROR)return h;let t=this.getError();return c` <primer-input-wrapper .focusWithin=\"${this.hostedInputController.isFocused}\" .hasError=${!!t} > <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> ${U(t,r=>c` <primer-input-error slot=\"error\"> ${A(r,{id:r})} </primer-input-error> `,()=>h)} </primer-input-wrapper> `}render(){return this.renderInput()}}"
+          "default": "class extends X{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(t){let{network:r}=t.detail;this.cardFormContext&&this.cardFormContext.setCardNetwork(r)}renderInput(){if(this.hostedInputController.setupTask.status===De.ERROR)return h;let t=this.getError();return c` <primer-input-wrapper .focusWithin=\"${this.hostedInputController.isFocused}\" .hasError=${!!t} > ${V(!this.cardFormContext?.hideLabels,()=>c`<primer-input-label slot=\"label\" >${this.label}</primer-input-label >`,()=>h)} <div slot=\"input\" class=\"card-number-container\" aria-label=\"${this.ariaLabel}\" > <div id=\"${this.config.containerSelector.substring(1)}\"></div> <div class=\"network-selector-container\"> <primer-card-network-selector @network-selected=${this.handleNetworkSelected} ></primer-card-network-selector> </div> </div> ${V(t,r=>c` <primer-input-error slot=\"error\"> ${A(r,{id:r})} </primer-input-error> `,()=>h)} </primer-input-wrapper> `}render(){return this.renderInput()}}"
         },
         {
           "kind": "variable",
@@ -763,22 +778,22 @@
         {
           "kind": "variable",
           "name": "ce",
-          "default": "class extends v{constructor(){super(...arguments);this._userAssignedProps=new Set;this._internalButtonText=\"\";this.headlessInstance=null;this.clientOptions=null;this.sdkState=null;this.variant=\"primary\";this.disabled=!1;this.handleClick=t=>{if(t.preventDefault(),this.disabled)return;let r=new CustomEvent(\"primer-form-submit\",{bubbles:!0,composed:!0,detail:{source:\"primer-card-form-submit\"}});this.dispatchEvent(r)}}get buttonText(){return this._userAssignedProps.has(\"buttonText\")?this._internalButtonText:A(\"pay\",{id:\"pay\"})}set buttonText(t){let r=this.buttonText;t!==\"\"?(this._userAssignedProps.add(\"buttonText\"),this._internalButtonText=t):(this._userAssignedProps.delete(\"buttonText\"),this._internalButtonText=\"\"),this.requestUpdate(\"buttonText\",r)}render(){let t=this.clientOptions?.submitButton?.amountVisible?this.headlessInstance?.getUIOrderAmount():null,r=t?` ${t}`:h;return c` <primer-button buttonType=\"submit\" variant=${this.variant} ?disabled=${this.disabled} @click=${this.handleClick} .loading=${!!this.sdkState?.isProcessing} data-submit > ${this.buttonText}${r} </primer-button> `}}"
+          "default": "class extends v{constructor(){super(...arguments);this._userAssignedProps=new Set;this._internalButtonText=\"\";this.headlessInstance=null;this.clientOptions=null;this.sdkState=null;this.variant=\"primary\";this.disabled=!1;this.handleClick=t=>{if(t.preventDefault(),this.disabled)return;let r=new CustomEvent(\"primer-form-submit\",{bubbles:!0,composed:!0,detail:{source:\"primer-card-form-submit\"}});this.dispatchEvent(r)}}get buttonText(){return this._userAssignedProps.has(\"buttonText\")?this._internalButtonText:A(\"pay\",{id:\"pay\"})}set buttonText(t){let r=this.buttonText;t!==\"\"?(this._userAssignedProps.add(\"buttonText\"),this._internalButtonText=t):(this._userAssignedProps.delete(\"buttonText\"),this._internalButtonText=\"\"),this.requestUpdate(\"buttonText\",r)}render(){let t=this.clientOptions?.submitButton?.amountVisible?this.headlessInstance?.getUIOrderAmount():null,r=t?` ${t}`:h;return c` <primer-button type=\"submit\" variant=${this.variant} ?disabled=${this.disabled} @click=${this.handleClick} .loading=${!!this.sdkState?.isProcessing} data-submit > ${this.buttonText}${r} </primer-button> `}}"
         },
         {
           "kind": "variable",
           "name": "me",
-          "default": "class extends v{constructor(){super(...arguments);this.cardNetworks=null;this.headlessUtils=null;this.selectedCardNetwork=null;this.isDropdownOpen=!1;this.focusedNetworkIndex=0;this.isKeyboardNavigation=!1;this.buttonRef=qi();this.dropdownRef=qi();this.networkOptionRefs=[];this.handleClickOutside=t=>{this.isDropdownOpen&&(this.contains(t.target)||(this.isDropdownOpen=!1,this.isKeyboardNavigation=!1))};this.handleMouseMove=()=>{this.isKeyboardNavigation&&(this.isKeyboardNavigation=!1)};this.handleKeyDown=t=>{if(!(!(this.getSelectableNetworks().length>1)||!(this.contains(t.target)||this===t.target||this.isDropdownOpen&&t.target===document.body)))switch(this.isKeyboardNavigation=!0,t.key){case\"ArrowDown\":t.preventDefault(),this.isDropdownOpen?(this.focusedNetworkIndex=(this.focusedNetworkIndex+1)%this.getSelectableNetworks().length,this.focusNetworkOption()):(this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case\"ArrowUp\":t.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?(t.preventDefault(),this.selectNetwork(t,this.getSelectableNetworks()[this.focusedNetworkIndex])):!this.isDropdownOpen&&this.buttonRef.value===document.activeElement&&(t.preventDefault(),this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case\"Escape\":this.isDropdownOpen&&(t.preventDefault(),this.isDropdownOpen=!1,this.buttonRef.value?.focus());break;case\"Tab\":this.isDropdownOpen&&(this.isDropdownOpen=!1);break}};this.handleDocumentKeyDown=t=>{this.isDropdownOpen&&this.handleKeyDown(t)}}toggleDropdown(t){this.isKeyboardNavigation=!1,t.stopPropagation(),this.getSelectableNetworks().length>1&&(this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen&&(this.focusedNetworkIndex=this.getSelectedNetworkIndex()))}getNetworkIconUrl(t){return this.headlessUtils?.getCardNetworkAsset(t.network)?.cardUrl}getSelectableNetworks(){return this.cardNetworks?.selectableCardNetworks||[]}getDetectedNetwork(){return this.selectedCardNetwork??(this.cardNetworks?.detectedCardNetwork||null)}getSelectedNetworkIndex(){let t=this.getDetectedNetwork();if(!t)return 0;let r=this.getSelectableNetworks().findIndex(o=>o.network===t.network);return r>=0?r:0}selectNetwork(t,r){t.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(t,r){this.networkOptionRefs[r]=t}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 c`<primer-spinner size=\"small\" compact></primer-spinner>`;let t=this.getSelectableNetworks();if(!this.getDetectedNetwork()&&t.length===0)return c`<primer-icon name=\"payment-card\"></primer-icon>`;let r=this.getDetectedNetwork()||(t.length>0?t[0]:null);if(!r)return c`<primer-icon name=\"payment-card\" size=\"sm\"></primer-icon>`;let o=t.length>1;return c` <button ${Zr(this.buttonRef)} class=\"network-selector\" @click=${this.toggleDropdown} @keydown=${n=>{(n.key===\" \"||n.key===\"Enter\")&&o&&(n.preventDefault(),this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen&&(this.focusedNetworkIndex=this.getSelectedNetworkIndex()))}} aria-label=${o?`Selected card network: ${r.displayName}. Click to change.`:`Card network: ${r.displayName}`} aria-expanded=${o?this.isDropdownOpen:h} aria-haspopup=${o?\"true\":h} aria-controls=${o?\"network-dropdown\":h} > <img class=\"network-icon\" src=${this.getNetworkIconUrl(r)} alt=${r.displayName} /> ${U(o,()=>c` <primer-icon class=\"caret ${this.isDropdownOpen?\"open\":\"\"}\" name=\"chevron-down\" ></primer-icon> `,()=>h)} </button> ${U(this.isDropdownOpen,()=>c` <div ${Zr(this.dropdownRef)} id=\"network-dropdown\" class=\"dropdown open\" role=\"listbox\" aria-label=\"Select card network\" > ${t.map((n,l)=>c` <div ${Zr(g=>this.setNetworkOptionRef(g,l))} class=\"network-option ${this.isKeyboardNavigation&&l===this.focusedNetworkIndex?\"focused\":\"\"}\" @click=${g=>this.selectNetwork(g,n)} @keydown=${g=>{(g.key===\"Enter\"||g.key===\" \")&&this.selectNetwork(g,n)}} role=\"option\" aria-selected=${n.network===r.network} tabindex=\"${l===this.focusedNetworkIndex?\"0\":\"-1\"}\" > <img class=\"network-option-icon\" src=${this.getNetworkIconUrl(n)} alt=${n.displayName} /> <span class=\"network-name\">${n.displayName}</span> ${U(n.network===r.network,()=>c` <primer-icon class=\"checkmark\" name=\"checkmark\" ></primer-icon> `,()=>h)} </div> `)} </div> `,()=>h)} `}}"
+          "default": "class extends v{constructor(){super(...arguments);this.cardNetworks=null;this.headlessUtils=null;this.selectedCardNetwork=null;this.isDropdownOpen=!1;this.focusedNetworkIndex=0;this.isKeyboardNavigation=!1;this.buttonRef=qi();this.dropdownRef=qi();this.networkOptionRefs=[];this.handleClickOutside=t=>{this.isDropdownOpen&&(this.contains(t.target)||(this.isDropdownOpen=!1,this.isKeyboardNavigation=!1))};this.handleMouseMove=()=>{this.isKeyboardNavigation&&(this.isKeyboardNavigation=!1)};this.handleKeyDown=t=>{if(!(!(this.getSelectableNetworks().length>1)||!(this.contains(t.target)||this===t.target||this.isDropdownOpen&&t.target===document.body)))switch(this.isKeyboardNavigation=!0,t.key){case\"ArrowDown\":t.preventDefault(),this.isDropdownOpen?(this.focusedNetworkIndex=(this.focusedNetworkIndex+1)%this.getSelectableNetworks().length,this.focusNetworkOption()):(this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case\"ArrowUp\":t.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?(t.preventDefault(),this.selectNetwork(t,this.getSelectableNetworks()[this.focusedNetworkIndex])):!this.isDropdownOpen&&this.buttonRef.value===document.activeElement&&(t.preventDefault(),this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case\"Escape\":this.isDropdownOpen&&(t.preventDefault(),this.isDropdownOpen=!1,this.buttonRef.value?.focus());break;case\"Tab\":this.isDropdownOpen&&(this.isDropdownOpen=!1);break}};this.handleDocumentKeyDown=t=>{this.isDropdownOpen&&this.handleKeyDown(t)}}toggleDropdown(t){this.isKeyboardNavigation=!1,t.stopPropagation(),this.getSelectableNetworks().length>1&&(this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen&&(this.focusedNetworkIndex=this.getSelectedNetworkIndex()))}getNetworkIconUrl(t){return this.headlessUtils?.getCardNetworkAsset(t.network)?.cardUrl}getSelectableNetworks(){return this.cardNetworks?.selectableCardNetworks||[]}getDetectedNetwork(){return this.selectedCardNetwork??(this.cardNetworks?.detectedCardNetwork||null)}getSelectedNetworkIndex(){let t=this.getDetectedNetwork();if(!t)return 0;let r=this.getSelectableNetworks().findIndex(o=>o.network===t.network);return r>=0?r:0}selectNetwork(t,r){t.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(t,r){this.networkOptionRefs[r]=t}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 c`<primer-spinner size=\"small\" compact></primer-spinner>`;let t=this.getSelectableNetworks();if(!this.getDetectedNetwork()&&t.length===0)return c`<primer-icon name=\"payment-card\"></primer-icon>`;let r=this.getDetectedNetwork()||(t.length>0?t[0]:null);if(!r)return c`<primer-icon name=\"payment-card\" size=\"sm\"></primer-icon>`;let o=t.length>1;return c` <button ${Xr(this.buttonRef)} class=\"network-selector\" @click=${this.toggleDropdown} @keydown=${n=>{(n.key===\" \"||n.key===\"Enter\")&&o&&(n.preventDefault(),this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen&&(this.focusedNetworkIndex=this.getSelectedNetworkIndex()))}} aria-label=${o?`Selected card network: ${r.displayName}. Click to change.`:`Card network: ${r.displayName}`} aria-expanded=${o?this.isDropdownOpen:h} aria-haspopup=${o?\"true\":h} aria-controls=${o?\"network-dropdown\":h} > <img class=\"network-icon\" src=${this.getNetworkIconUrl(r)} alt=${r.displayName} /> ${V(o,()=>c` <primer-icon class=\"caret ${this.isDropdownOpen?\"open\":\"\"}\" name=\"chevron-down\" ></primer-icon> `,()=>h)} </button> ${V(this.isDropdownOpen,()=>c` <div ${Xr(this.dropdownRef)} id=\"network-dropdown\" class=\"dropdown open\" role=\"listbox\" aria-label=\"Select card network\" > ${t.map((n,l)=>c` <div ${Xr(g=>this.setNetworkOptionRef(g,l))} class=\"network-option ${this.isKeyboardNavigation&&l===this.focusedNetworkIndex?\"focused\":\"\"}\" @click=${g=>this.selectNetwork(g,n)} @keydown=${g=>{(g.key===\"Enter\"||g.key===\" \")&&this.selectNetwork(g,n)}} role=\"option\" aria-selected=${n.network===r.network} tabindex=\"${l===this.focusedNetworkIndex?\"0\":\"-1\"}\" > <img class=\"network-option-icon\" src=${this.getNetworkIconUrl(n)} alt=${n.displayName} /> <span class=\"network-name\">${n.displayName}</span> ${V(n.network===r.network,()=>c` <primer-icon class=\"checkmark\" name=\"checkmark\" ></primer-icon> `,()=>h)} </div> `)} </div> `,()=>h)} `}}"
         },
         {
           "kind": "variable",
           "name": "ue",
-          "default": "class extends v{constructor(){super();this.vaultManagerContext=null;this.isEditMode=!1;this.deletePaymentMethodId=null;this.isDeleting=!1;this.errorMessage=\"\";this.animationDuration=300;new Pt(this,{defaultOptions:{keyframeOptions:{duration:Number(getComputedStyle(document.documentElement).getPropertyValue(\"--primer-animation-duration\").trim().replace(\"ms\",\"\")),easing:getComputedStyle(document.documentElement).getPropertyValue(\"--primer-animation-easing\").trim()}}})}getAnimationConfig(){return{keyframeOptions:{duration:this.animationDuration,easing:getComputedStyle(document.documentElement).getPropertyValue(\"--primer-animation-easing\").trim(),fill:\"both\"}}}handleToggleEditMode(t){this.isEditMode=t.detail,this.deletePaymentMethodId=null}handleDeletePaymentMethod(t){this.deletePaymentMethodId=t.detail}handleCancelDelete(){this.deletePaymentMethodId=null}async handleConfirmDelete(){if(!this.vaultManagerContext?.deleteVaultedPaymentMethod||!this.deletePaymentMethodId){this.errorMessage=A(\"something_went_wrong_error\",{id:\"something_went_wrong_error\"});return}try{this.isDeleting=!0,await this.vaultManagerContext.deleteVaultedPaymentMethod(this.deletePaymentMethodId),this.deletePaymentMethodId=null}catch(t){this.errorMessage=t instanceof Error?t.message:A(\"something_went_wrong_error\",{id:\"something_went_wrong_error\"})}finally{this.isDeleting=!1}}handlePaymentError(t){let r=t.detail?.error;this.errorMessage=r instanceof Error?r.message:A(\"payment_processing_error\",{id:\"payment_processing_error\"})}handleCloseError(){this.errorMessage=\"\"}getPaymentMethodName(t){if(!this.vaultManagerContext)return\"\";let r=this.vaultManagerContext.vaultedPaymentMethods.find(o=>o.id===t);if(!r)return\"\";try{return Xr(r).description||\"\"}catch{return\"\"}}renderLoadingOverlay(){return c` <div class=\"loading-overlay\" ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} > <primer-spinner size=\"medium\" color=\"var(--primer-color-loader)\" ></primer-spinner> </div> `}renderDeleteConfirmation(){if(!this.deletePaymentMethodId)return h;let t=this.getPaymentMethodName(this.deletePaymentMethodId);return c` <div class=\"delete-confirmation-container\"> <primer-vault-delete-confirmation .isDeleting=${this.isDeleting} .paymentMethodId=${this.deletePaymentMethodId} .paymentMethodName=${t} @confirm-delete=${this.handleConfirmDelete} @cancel-delete=${this.handleCancelDelete} ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-delete-confirmation> </div> `}renderPaymentMethodItem(t){return this.deletePaymentMethodId===t.id?h:c` <primer-vault-payment-method-item .paymentMethod=${t} .isEditMode=${this.isEditMode} @delete-payment-method=${this.handleDeletePaymentMethod} ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-payment-method-item> `}renderPaymentMethodList(){let t=this.vaultManagerContext?.vaultedPaymentMethods||[],r=!this.isEditMode&&t.length>0&&!this.deletePaymentMethodId;return c` <div class=\"payment-methods-list\"> ${t.map(o=>this.renderPaymentMethodItem(o))} ${U(r,()=>c` <div class=\"submit-button-container\"> <primer-vault-payment-submit class=\"submit-button\" @primer-vault-payment-error=${this.handlePaymentError} ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-payment-submit> </div> `,()=>h)} </div> `}render(){if(!this.vaultManagerContext?.enabled)return h;let t=this.vaultManagerContext.vaultedPaymentMethods.length>0,r=this.vaultManagerContext.isLoading,o=this.vaultManagerContext.isUpdating;return c` <div class=\"vault-manager ${o?\"is-updating\":\"\"}\"> <primer-vault-manager-header .isEditMode=${this.isEditMode} .hasPaymentMethods=${t} @toggle-edit-mode=${this.handleToggleEditMode} ></primer-vault-manager-header> ${U(this.errorMessage,()=>c` <primer-vault-error-message .errorMessage=${this.errorMessage} @close-error=${this.handleCloseError} ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-error-message> `,()=>h)} <div class=\"vault-manager-content\"> ${U(!r&&!t,()=>c` <div class=\"content-container\"> <primer-vault-empty-state ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-empty-state> </div> `,()=>h)} ${U(!r&&t,()=>c` <div class=\"content-container\"> ${U(this.deletePaymentMethodId,()=>this.renderDeleteConfirmation(),()=>this.renderPaymentMethodList())} </div> `,()=>h)} </div> ${U(o,()=>this.renderLoadingOverlay(),()=>h)} </div> `}}"
+          "default": "class extends v{constructor(){super();this.vaultManagerContext=null;this.isEditMode=!1;this.deletePaymentMethodId=null;this.isDeleting=!1;this.errorMessage=\"\";this.animationDuration=300;new Tt(this,{defaultOptions:{keyframeOptions:{duration:Number(getComputedStyle(document.documentElement).getPropertyValue(\"--primer-animation-duration\").trim().replace(\"ms\",\"\")),easing:getComputedStyle(document.documentElement).getPropertyValue(\"--primer-animation-easing\").trim()}}})}getAnimationConfig(){return{keyframeOptions:{duration:this.animationDuration,easing:getComputedStyle(document.documentElement).getPropertyValue(\"--primer-animation-easing\").trim(),fill:\"both\"}}}handleToggleEditMode(t){this.isEditMode=t.detail,this.deletePaymentMethodId=null}handleDeletePaymentMethod(t){this.deletePaymentMethodId=t.detail}handleCancelDelete(){this.deletePaymentMethodId=null}async handleConfirmDelete(){if(!this.vaultManagerContext?.deleteVaultedPaymentMethod||!this.deletePaymentMethodId){this.errorMessage=A(\"something_went_wrong_error\",{id:\"something_went_wrong_error\"});return}try{this.isDeleting=!0,await this.vaultManagerContext.deleteVaultedPaymentMethod(this.deletePaymentMethodId),this.deletePaymentMethodId=null}catch(t){this.errorMessage=t instanceof Error?t.message:A(\"something_went_wrong_error\",{id:\"something_went_wrong_error\"})}finally{this.isDeleting=!1}}handlePaymentError(t){let r=t.detail?.error;this.errorMessage=r instanceof Error?r.message:A(\"payment_processing_error\",{id:\"payment_processing_error\"})}handleCloseError(){this.errorMessage=\"\"}getPaymentMethodName(t){if(!this.vaultManagerContext)return\"\";let r=this.vaultManagerContext.vaultedPaymentMethods.find(o=>o.id===t);if(!r)return\"\";try{return Jr(r).description||\"\"}catch{return\"\"}}renderLoadingOverlay(){return c` <div class=\"loading-overlay\" ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} > <primer-spinner size=\"medium\" color=\"var(--primer-color-loader)\" ></primer-spinner> </div> `}renderDeleteConfirmation(){if(!this.deletePaymentMethodId)return h;let t=this.getPaymentMethodName(this.deletePaymentMethodId);return c` <div class=\"delete-confirmation-container\"> <primer-vault-delete-confirmation .isDeleting=${this.isDeleting} .paymentMethodId=${this.deletePaymentMethodId} .paymentMethodName=${t} @confirm-delete=${this.handleConfirmDelete} @cancel-delete=${this.handleCancelDelete} ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-delete-confirmation> </div> `}renderPaymentMethodItem(t){return this.deletePaymentMethodId===t.id?h:c` <primer-vault-payment-method-item .paymentMethod=${t} .isEditMode=${this.isEditMode} @delete-payment-method=${this.handleDeletePaymentMethod} ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-payment-method-item> `}renderPaymentMethodList(){let t=this.vaultManagerContext?.vaultedPaymentMethods||[],r=!this.isEditMode&&t.length>0&&!this.deletePaymentMethodId;return c` <div class=\"payment-methods-list\"> ${t.map(o=>this.renderPaymentMethodItem(o))} ${V(r,()=>c` <div class=\"submit-button-container\"> <primer-vault-payment-submit class=\"submit-button\" @primer-vault-payment-error=${this.handlePaymentError} ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-payment-submit> </div> `,()=>h)} </div> `}render(){if(!this.vaultManagerContext?.enabled)return h;let t=this.vaultManagerContext.vaultedPaymentMethods.length>0,r=this.vaultManagerContext.isLoading,o=this.vaultManagerContext.isUpdating;return c` <div class=\"vault-manager ${o?\"is-updating\":\"\"}\"> <primer-vault-manager-header .isEditMode=${this.isEditMode} .hasPaymentMethods=${t} @toggle-edit-mode=${this.handleToggleEditMode} ></primer-vault-manager-header> ${V(this.errorMessage,()=>c` <primer-vault-error-message .errorMessage=${this.errorMessage} @close-error=${this.handleCloseError} ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-error-message> `,()=>h)} <div class=\"vault-manager-content\"> ${V(!r&&!t,()=>c` <div class=\"content-container\"> <primer-vault-empty-state ${je({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-empty-state> </div> `,()=>h)} ${V(!r&&t,()=>c` <div class=\"content-container\"> ${V(this.deletePaymentMethodId,()=>this.renderDeleteConfirmation(),()=>this.renderPaymentMethodList())} </div> `,()=>h)} </div> ${V(o,()=>this.renderLoadingOverlay(),()=>h)} </div> `}}"
         },
         {
           "kind": "variable",
           "name": "ve",
-          "default": "class extends v{constructor(){super(...arguments);this.vaultManagerContext=null;this.vaultItemContext=null;this.headlessUtils=null;this.paymentMethod=null;this.isEditMode=!1;this._getAssetsTask=new D(this,{task:async([t,r,o])=>{if(!t||!r||!o)return L;let n=\"\";if(Mn(t))n=r.getCardNetworkAsset(t.paymentInstrumentData.network).cardUrl;else{let u=await r.getCDNAssets(t.paymentMethodType);u&&(n=u.assets?.icon?`${u.goatCdnUrl}/${u.assets.icon}`:\"\")}let l=o.cvvRecapture,g=Xr(t);return{icon:n,shouldShowCVV:l,...g}},args:()=>[this.paymentMethod,this.headlessUtils,this.vaultManagerContext]})}isSelected(){if(!this.vaultManagerContext||!this.paymentMethod)return!1;let t=this.vaultItemContext?.selectedVaultedPaymentMethod;return!!t&&t.id===this.paymentMethod.id}handleClick(){this.isEditMode||!this.vaultManagerContext||!this.paymentMethod||(this.isSelected()?this.vaultItemContext?.setSelectedVaultedPaymentMethod(null):this.vaultItemContext?.setSelectedVaultedPaymentMethod(this.paymentMethod))}handleDeleteClick(t){t.stopPropagation(),this.dispatchEvent(new CustomEvent(\"delete-payment-method\",{detail:this.paymentMethod?.id,bubbles:!0,composed:!0}))}renderPaymentMethodContent(t){let r=t.icon?c`<img class=\"payment-method-icon\" src=${t.icon} alt=${t.description} />`:c` <div class=\"payment-method-icon payment-method-icon-generic\"> <primer-icon name=\"payment-card\" size=\"sm\"></primer-icon> </div> `;return c` ${r} <div class=\"payment-method-details\"> <div class=\"payment-method-description\">${t.description}</div> ${t.secondaryDescription?c`<div class=\"payment-method-secondary-description\"> ${t.secondaryDescription} </div>`:h} </div> `}render(){return this._getAssetsTask.render({error:()=>h,complete:t=>{let r=this.isSelected()?\"checked\":\"default\";return c` <div class=\"payment-method-wrapper\"> <div class=\"payment-method-container\"> <primer-button variant=\"secondary\" class=\"payment-method-button\" selectable ?disabled=${this.isEditMode} selectionState=${r} @click=${this.handleClick} > ${this.renderPaymentMethodContent(t)} </primer-button> ${this.isEditMode?c` <button class=\"delete-button\" @click=${this.handleDeleteClick} aria-label=${`${A(\"delete\",{id:\"delete\"})} ${t.description}`} > <primer-icon name=\"trash\" size=\"sm\"></primer-icon> </button> `:h} </div> ${U(t.shouldShowCVV&&this.isSelected()&&!this.isEditMode,()=>c`<primer-vault-cvv-input .paymentMethod=\"${this.paymentMethod}\" ></primer-vault-cvv-input>`,()=>h)} </div> `}})}}"
+          "default": "class extends v{constructor(){super(...arguments);this.vaultManagerContext=null;this.vaultItemContext=null;this.headlessUtils=null;this.paymentMethod=null;this.isEditMode=!1;this._getAssetsTask=new D(this,{task:async([t,r,o])=>{if(!t||!r||!o)return L;let n=\"\";if(Mn(t))n=r.getCardNetworkAsset(t.paymentInstrumentData.network).cardUrl;else{let u=await r.getCDNAssets(t.paymentMethodType);u&&(n=u.assets?.icon?`${u.goatCdnUrl}/${u.assets.icon}`:\"\")}let l=o.cvvRecapture,g=Jr(t);return{icon:n,shouldShowCVV:l,...g}},args:()=>[this.paymentMethod,this.headlessUtils,this.vaultManagerContext]})}isSelected(){if(!this.vaultManagerContext||!this.paymentMethod)return!1;let t=this.vaultItemContext?.selectedVaultedPaymentMethod;return!!t&&t.id===this.paymentMethod.id}handleClick(){this.isEditMode||!this.vaultManagerContext||!this.paymentMethod||(this.isSelected()?this.vaultItemContext?.setSelectedVaultedPaymentMethod(null):this.vaultItemContext?.setSelectedVaultedPaymentMethod(this.paymentMethod))}handleDeleteClick(t){t.stopPropagation(),this.dispatchEvent(new CustomEvent(\"delete-payment-method\",{detail:this.paymentMethod?.id,bubbles:!0,composed:!0}))}renderPaymentMethodContent(t){let r=t.icon?c`<img class=\"payment-method-icon\" src=${t.icon} alt=${t.description} />`:c` <div class=\"payment-method-icon payment-method-icon-generic\"> <primer-icon name=\"payment-card\" size=\"sm\"></primer-icon> </div> `;return c` ${r} <div class=\"payment-method-details\"> <div class=\"payment-method-description\">${t.description}</div> ${t.secondaryDescription?c`<div class=\"payment-method-secondary-description\"> ${t.secondaryDescription} </div>`:h} </div> `}render(){return this._getAssetsTask.render({error:()=>h,complete:t=>{let r=this.isSelected()?\"checked\":\"default\";return c` <div class=\"payment-method-wrapper\"> <div class=\"payment-method-container\"> <primer-button variant=\"secondary\" class=\"payment-method-button\" selectable ?disabled=${this.isEditMode} selectionState=${r} @click=${this.handleClick} > ${this.renderPaymentMethodContent(t)} </primer-button> ${this.isEditMode?c` <button class=\"delete-button\" @click=${this.handleDeleteClick} aria-label=${`${A(\"delete\",{id:\"delete\"})} ${t.description}`} > <primer-icon name=\"trash\" size=\"sm\"></primer-icon> </button> `:h} </div> ${V(t.shouldShowCVV&&this.isSelected()&&!this.isEditMode,()=>c`<primer-vault-cvv-input .paymentMethod=\"${this.paymentMethod}\" ></primer-vault-cvv-input>`,()=>h)} </div> `}})}}"
         },
         {
           "kind": "variable",
@@ -787,7 +802,7 @@
         },
         {
           "kind": "variable",
-          "name": "Ee",
+          "name": "Ce",
           "default": "class extends v{constructor(){super(...arguments);this.isDeleting=!1;this.paymentMethodId=\"\";this.paymentMethodName=\"\";this.vaultManager=null}handleConfirmClick(){this.dispatchEvent(new CustomEvent(\"confirm-delete\",{bubbles:!0,composed:!0}))}handleCancelClick(){this.dispatchEvent(new CustomEvent(\"cancel-delete\",{bubbles:!0,composed:!0}))}render(){let t=this.paymentMethodName;return c` <div class=\"delete-confirmation\"> <div class=\"delete-message\"> <p class=\"delete-text\">${t}</p> </div> <div class=\"delete-actions\"> <button class=\"delete-confirm\" @click=${this.handleConfirmClick} ?disabled=${this.isDeleting} > ${this.isDeleting?A(\"deleting\",{id:\"deleting\"}):A(\"confirmVaultedPaymentMethodDeletion\",{id:\"confirmVaultedPaymentMethodDeletion\"})} </button> <button class=\"delete-cancel\" @click=${this.handleCancelClick} ?disabled=${this.isDeleting} > ${A(\"cancel\",{id:\"cancel\"})} </button> </div> </div> `}}"
         },
         {
@@ -808,7 +823,7 @@
         {
           "kind": "variable",
           "name": "re",
-          "default": "class extends v{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 D(this,{task:async([t,r])=>!t||!r||t.paymentMethodType!==\"PAYMENT_CARD\"||!t.paymentInstrumentData?.network||r.createCvvInput===null?L:{network:t.paymentInstrumentData.network,createCvvInput:r.createCvvInput},args:()=>[this.paymentMethod,this.vaultManagerFormContext]});this.cvvContainerId=`cvv-container-${Math.random().toString(36).substring(2,9)}`,new D(this,{task:async([t])=>{if(!t)return L;await this.updateComplete;let r=this.renderRoot.querySelector(`#${this.cvvContainerId}`);if(!r)return;let o=jr(this.computedStyles),n=o?{input:{base:o}}:void 0,l={cardNetwork:t.network,container:r,name:\"cvv\",placeholder:\"123\",style:n};this.cvvInput=await t.createCvvInput?.(l)??null,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:()=>h,complete:()=>c` <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> ${U(this.cvvError&&(this.vaultManagerCvvContext?.formIsDirty||this.cvvInputIsDirty&&this.cvvInputIsBlurred),()=>c` <primer-input-error slot=\"error\"> ${this.cvvError} </primer-input-error> `)} </primer-input-wrapper> </div> `})}}"
+          "default": "class extends v{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 D(this,{task:async([t,r])=>!t||!r||t.paymentMethodType!==\"PAYMENT_CARD\"||!t.paymentInstrumentData?.network||r.createCvvInput===null?L:{network:t.paymentInstrumentData.network,createCvvInput:r.createCvvInput},args:()=>[this.paymentMethod,this.vaultManagerFormContext]});this.cvvContainerId=`cvv-container-${Math.random().toString(36).substring(2,9)}`,new D(this,{task:async([t])=>{if(!t)return L;await this.updateComplete;let r=this.renderRoot.querySelector(`#${this.cvvContainerId}`);if(!r)return;let o=Gr(this.computedStyles),n=o?{input:{base:o}}:void 0,l={cardNetwork:t.network,container:r,name:\"cvv\",placeholder:\"123\",style:n};this.cvvInput=await t.createCvvInput?.(l)??null,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:()=>h,complete:()=>c` <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> ${V(this.cvvError&&(this.vaultManagerCvvContext?.formIsDirty||this.cvvInputIsDirty&&this.cvvInputIsBlurred),()=>c` <primer-input-error slot=\"error\"> ${this.cvvError} </primer-input-error> `)} </primer-input-wrapper> </div> `})}}"
         },
         {
           "kind": "variable",
@@ -872,7 +887,7 @@
           "kind": "js",
           "name": "CardForm",
           "declaration": {
-            "name": "ke",
+            "name": "Ee",
             "module": "dist/primer-loader.js"
           }
         },
@@ -976,7 +991,7 @@
           "kind": "js",
           "name": "InitializedPayments",
           "declaration": {
-            "name": "Vr",
+            "name": "Hr",
             "module": "dist/primer-loader.js"
           }
         },
@@ -1008,7 +1023,7 @@
           "kind": "js",
           "name": "NativePayment",
           "declaration": {
-            "name": "we",
+            "name": "ke",
             "module": "dist/primer-loader.js"
           }
         },
@@ -1064,7 +1079,7 @@
           "kind": "js",
           "name": "PrimerIcon",
           "declaration": {
-            "name": "Pe",
+            "name": "we",
             "module": "dist/primer-loader.js"
           }
         },
@@ -1104,7 +1119,7 @@
           "kind": "js",
           "name": "Spinner",
           "declaration": {
-            "name": "Me",
+            "name": "Pe",
             "module": "dist/primer-loader.js"
           }
         },
@@ -1120,7 +1135,7 @@
           "kind": "js",
           "name": "VaultDeleteConfirmation",
           "declaration": {
-            "name": "Ee",
+            "name": "Ce",
             "module": "dist/primer-loader.js"
           }
         },
@@ -1216,182 +1231,458 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/base.styles.ts",
+      "path": "dist/primer-react-wrappers.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "base",
-          "default": "css` * { box-sizing: border-box; } `"
+          "name": "i"
         },
         {
           "kind": "variable",
-          "name": "primerCheckout",
-          "default": "css` :host { display: block; isolation: isolate; position: relative; width: 100%; //Keep the CSS loader in the same position - check css-loader-inline.ts min-height: 64px; } `"
+          "name": "t"
+        },
+        {
+          "kind": "variable",
+          "name": "Eh"
+        },
+        {
+          "kind": "variable",
+          "name": "Ih"
+        },
+        {
+          "kind": "variable",
+          "name": "eu"
+        },
+        {
+          "kind": "variable",
+          "name": "Cu"
+        },
+        {
+          "kind": "variable",
+          "name": "Wu"
+        },
+        {
+          "kind": "variable",
+          "name": "tf"
+        },
+        {
+          "kind": "variable",
+          "name": "uf"
+        },
+        {
+          "kind": "variable",
+          "name": "Mf"
+        },
+        {
+          "kind": "variable",
+          "name": "Vf"
+        },
+        {
+          "kind": "variable",
+          "name": "Xf"
+        },
+        {
+          "kind": "variable",
+          "name": "dg"
+        },
+        {
+          "kind": "variable",
+          "name": "Cg"
+        },
+        {
+          "kind": "variable",
+          "name": "Gg"
+        },
+        {
+          "kind": "variable",
+          "name": "uy"
+        },
+        {
+          "kind": "variable",
+          "name": "$y"
+        },
+        {
+          "kind": "variable",
+          "name": "gv"
+        },
+        {
+          "kind": "variable",
+          "name": "eb"
+        },
+        {
+          "kind": "variable",
+          "name": "yb"
+        },
+        {
+          "kind": "variable",
+          "name": "Lb"
+        },
+        {
+          "kind": "variable",
+          "name": "Jb"
+        },
+        {
+          "kind": "variable",
+          "name": "AE"
+        },
+        {
+          "kind": "variable",
+          "name": "YE"
+        },
+        {
+          "kind": "variable",
+          "name": "mC"
+        },
+        {
+          "kind": "variable",
+          "name": "kC"
+        },
+        {
+          "kind": "variable",
+          "name": "KC"
+        },
+        {
+          "kind": "variable",
+          "name": "tA"
+        },
+        {
+          "kind": "variable",
+          "name": "mA"
+        },
+        {
+          "kind": "variable",
+          "name": "IA"
+        },
+        {
+          "kind": "variable",
+          "name": "e_"
+        },
+        {
+          "kind": "variable",
+          "name": "A_"
+        },
+        {
+          "kind": "variable",
+          "name": "P_"
+        },
+        {
+          "kind": "variable",
+          "name": "Kx"
         }
       ],
       "exports": [
         {
-          "kind": "js",
-          "name": "base",
+          "kind": "custom-element-definition",
+          "name": "i",
           "declaration": {
-            "name": "base",
-            "module": "src/base.styles.ts"
+            "name": "t",
+            "module": "dist/primer-react-wrappers.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "i",
+          "declaration": {
+            "name": "t",
+            "module": "dist/primer-react-wrappers.js"
           }
         },
         {
           "kind": "js",
-          "name": "primerCheckout",
+          "name": "AchPayment",
           "declaration": {
-            "name": "primerCheckout",
-            "module": "src/base.styles.ts"
+            "name": "Gg",
+            "module": "dist/primer-react-wrappers.js"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components.ts",
-      "declarations": [],
-      "exports": [
+        },
         {
           "kind": "js",
-          "name": "*",
+          "name": "Button",
           "declaration": {
-            "name": "*",
-            "package": "./contexts/types"
+            "name": "P_",
+            "module": "dist/primer-react-wrappers.js"
           }
         },
         {
           "kind": "js",
-          "name": "*",
+          "name": "CardForm",
           "declaration": {
-            "name": "*",
-            "package": "./contexts/payments-objects"
+            "name": "uy",
+            "module": "dist/primer-react-wrappers.js"
           }
         },
         {
           "kind": "js",
-          "name": "*",
+          "name": "CardFormSubmit",
           "declaration": {
-            "name": "*",
-            "package": "./atoms"
+            "name": "$y",
+            "module": "dist/primer-react-wrappers.js"
           }
         },
         {
           "kind": "js",
-          "name": "*",
+          "name": "CardNetworkSelector",
           "declaration": {
-            "name": "*",
-            "package": "./containers"
+            "name": "gv",
+            "module": "dist/primer-react-wrappers.js"
           }
         },
         {
           "kind": "js",
-          "name": "PrimerCheckoutOptions",
+          "name": "CheckoutState",
           "declaration": {
-            "name": "PrimerCheckoutOptions",
-            "module": "./types/sdk"
+            "name": "Ih",
+            "module": "dist/primer-react-wrappers.js"
           }
         },
         {
           "kind": "js",
-          "name": "PrimerCheckoutComponent",
+          "name": "Collapsable",
           "declaration": {
-            "name": "PrimerCheckoutComponent",
-            "module": "src/components.ts"
+            "name": "eu",
+            "module": "dist/primer-react-wrappers.js"
           }
         },
         {
           "kind": "js",
-          "name": "injectLoaderStyles",
+          "name": "Dialog",
           "declaration": {
-            "name": "injectLoaderStyles",
-            "module": "src/components.ts"
+            "name": "Cu",
+            "module": "dist/primer-react-wrappers.js"
           }
         },
         {
           "kind": "js",
-          "name": "injectThemeStyles",
+          "name": "DynamicPayment",
           "declaration": {
-            "name": "injectThemeStyles",
-            "module": "src/components.ts"
+            "name": "AE",
+            "module": "dist/primer-react-wrappers.js"
           }
         },
         {
           "kind": "js",
-          "name": "injectLightTheme",
+          "name": "ErrorMessage",
           "declaration": {
-            "name": "injectLightTheme",
-            "module": "src/components.ts"
+            "name": "Wu",
+            "module": "dist/primer-react-wrappers.js"
           }
         },
         {
           "kind": "js",
-          "name": "injectDarkTheme",
+          "name": "ErrorMessageContainer",
           "declaration": {
-            "name": "injectDarkTheme",
-            "module": "src/components.ts"
+            "name": "YE",
+            "module": "dist/primer-react-wrappers.js"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/consts.ts",
-      "declarations": [
+        },
         {
-          "kind": "variable",
-          "name": "legacySdkCdnUrl"
-        }
-      ],
-      "exports": [
+          "kind": "js",
+          "name": "Icon",
+          "declaration": {
+            "name": "tf",
+            "module": "dist/primer-react-wrappers.js"
+          }
+        },
         {
           "kind": "js",
-          "name": "legacySdkCdnUrl",
+          "name": "Input",
           "declaration": {
-            "name": "legacySdkCdnUrl",
-            "module": "src/consts.ts"
+            "name": "uf",
+            "module": "dist/primer-react-wrappers.js"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/css-loader-inline.ts",
-      "declarations": [
+        },
         {
-          "kind": "variable",
-          "name": "cssLoaderStyles",
-          "default": "` @keyframes primer-css-spinner-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } primer-checkout:has(:not(:defined)) > * { visibility: hidden; } primer-checkout:not([js-initialized]) { display: block; position: relative; width: 100%; min-height: 64px; } primer-checkout:not([js-initialized]):not([loader-disabled])::after { content: \"\"; display: block; box-sizing: border-box; position: absolute; inset: 0; margin: auto; width: var(--primer-size-xlarge); height: var(--primer-size-xlarge); border-radius: 50%; border: 3px solid #f5f5f5; border-top-color: var(--primer-color-loader); animation: primer-css-spinner-rotate 1.2s linear infinite; z-index: 9999; } `",
-          "description": "This module exports the CSS loader styles as a string for inline injection.\nThese styles are injected into the page before any JavaScript loads,\nensuring the loading indicator appears immediately."
-        }
-      ],
-      "exports": [
+          "kind": "js",
+          "name": "InputCardExpiry",
+          "declaration": {
+            "name": "yb",
+            "module": "dist/primer-react-wrappers.js"
+          }
+        },
         {
           "kind": "js",
-          "name": "cssLoaderStyles",
+          "name": "InputCardHolderName",
           "declaration": {
-            "name": "cssLoaderStyles",
-            "module": "src/css-loader-inline.ts"
+            "name": "eb",
+            "module": "dist/primer-react-wrappers.js"
           }
-        }
+        },
+        {
+          "kind": "js",
+          "name": "InputCardNumber",
+          "declaration": {
+            "name": "Jb",
+            "module": "dist/primer-react-wrappers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "InputCvv",
+          "declaration": {
+            "name": "Lb",
+            "module": "dist/primer-react-wrappers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "InputError",
+          "declaration": {
+            "name": "Mf",
+            "module": "dist/primer-react-wrappers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "InputLabel",
+          "declaration": {
+            "name": "Vf",
+            "module": "dist/primer-react-wrappers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "InputWrapper",
+          "declaration": {
+            "name": "Xf",
+            "module": "dist/primer-react-wrappers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Klarna",
+          "declaration": {
+            "name": "mC",
+            "module": "dist/primer-react-wrappers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "NativePayment",
+          "declaration": {
+            "name": "kC",
+            "module": "dist/primer-react-wrappers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PaymentMethod",
+          "declaration": {
+            "name": "KC",
+            "module": "dist/primer-react-wrappers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Portal",
+          "declaration": {
+            "name": "dg",
+            "module": "dist/primer-react-wrappers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimerCheckout",
+          "declaration": {
+            "name": "Eh",
+            "module": "dist/primer-react-wrappers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimerCheckoutComplete",
+          "declaration": {
+            "name": "tA",
+            "module": "dist/primer-react-wrappers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimerCheckoutError",
+          "declaration": {
+            "name": "mA",
+            "module": "dist/primer-react-wrappers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimerMain",
+          "declaration": {
+            "name": "IA",
+            "module": "dist/primer-react-wrappers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "RedirectPayment",
+          "declaration": {
+            "name": "e_",
+            "module": "dist/primer-react-wrappers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ShowOtherPayments",
+          "declaration": {
+            "name": "A_",
+            "module": "dist/primer-react-wrappers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Spinner",
+          "declaration": {
+            "name": "Cg",
+            "module": "dist/primer-react-wrappers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "VaultManager",
+          "declaration": {
+            "name": "Kx",
+            "module": "dist/primer-react-wrappers.js"
+          }
+        }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/loader.ts",
+      "path": "src/base.styles.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "loadPrimer",
-          "return": {
-            "type": {
-              "text": "Promise<void>"
-            }
-          },
-          "description": "Main function to load the Primer SDK with all required dependencies and styles"
+          "kind": "variable",
+          "name": "base",
+          "default": "css` * { box-sizing: border-box; } `"
+        },
+        {
+          "kind": "variable",
+          "name": "primerCheckout",
+          "default": "css` :host { display: block; isolation: isolate; position: relative; width: 100%; //Keep the CSS loader in the same position - check css-loader-inline.ts min-height: 64px; } `"
         }
       ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "base",
+          "declaration": {
+            "name": "base",
+            "module": "src/base.styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "primerCheckout",
+          "declaration": {
+            "name": "primerCheckout",
+            "module": "src/base.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components.ts",
+      "declarations": [],
       "exports": [
         {
           "kind": "js",
@@ -1438,7 +1729,7 @@
           "name": "PrimerCheckoutComponent",
           "declaration": {
             "name": "PrimerCheckoutComponent",
-            "module": "src/loader.ts"
+            "module": "src/components.ts"
           }
         },
         {
@@ -1446,7 +1737,7 @@
           "name": "injectLoaderStyles",
           "declaration": {
             "name": "injectLoaderStyles",
-            "module": "src/loader.ts"
+            "module": "src/components.ts"
           }
         },
         {
@@ -1454,7 +1745,7 @@
           "name": "injectThemeStyles",
           "declaration": {
             "name": "injectThemeStyles",
-            "module": "src/loader.ts"
+            "module": "src/components.ts"
           }
         },
         {
@@ -1462,7 +1753,7 @@
           "name": "injectLightTheme",
           "declaration": {
             "name": "injectLightTheme",
-            "module": "src/loader.ts"
+            "module": "src/components.ts"
           }
         },
         {
@@ -1470,35 +1761,175 @@
           "name": "injectDarkTheme",
           "declaration": {
             "name": "injectDarkTheme",
-            "module": "src/loader.ts"
+            "module": "src/components.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/consts.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "legacySdkCdnUrl"
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "loadPrimer",
+          "name": "legacySdkCdnUrl",
           "declaration": {
-            "name": "loadPrimer",
-            "module": "src/loader.ts"
+            "name": "legacySdkCdnUrl",
+            "module": "src/consts.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/primer-checkout.ts",
+      "path": "src/css-loader-inline.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "PrimerCheckoutComponent implements the main checkout experience.\nThis component includes a CSS-only loader that displays before the JavaScript\nis fully loaded, ensuring users see a loading indicator immediately.\n\nThe loader can be disabled by:\n1. Adding the 'loader-disabled' attribute to the component\n2. Setting the CSS custom property --primer-loader-disabled: 1",
+          "kind": "variable",
+          "name": "cssLoaderStyles",
+          "default": "` @keyframes primer-css-spinner-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } primer-checkout:has(:not(:defined)) > * { visibility: hidden; } primer-checkout:not([js-initialized]) { display: block; position: relative; width: 100%; min-height: 64px; } primer-checkout:not([js-initialized]):not([loader-disabled])::after { content: \"\"; display: block; box-sizing: border-box; position: absolute; inset: 0; margin: auto; width: var(--primer-size-xlarge); height: var(--primer-size-xlarge); border-radius: 50%; border: 3px solid #f5f5f5; border-top-color: var(--primer-color-loader); animation: primer-css-spinner-rotate 1.2s linear infinite; z-index: 9999; } `",
+          "description": "This module exports the CSS loader styles as a string for inline injection.\nThese styles are injected into the page before any JavaScript loads,\nensuring the loading indicator appears immediately."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "cssLoaderStyles",
+          "declaration": {
+            "name": "cssLoaderStyles",
+            "module": "src/css-loader-inline.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/loader.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "loadPrimer",
+          "return": {
+            "type": {
+              "text": "Promise<void>"
+            }
+          },
+          "description": "Main function to load the Primer SDK with all required dependencies and styles"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./contexts/types"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./contexts/payments-objects"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./atoms"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./containers"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimerCheckoutOptions",
+          "declaration": {
+            "name": "PrimerCheckoutOptions",
+            "module": "./types/sdk"
+          }
+        },
+        {
+          "kind": "js",
           "name": "PrimerCheckoutComponent",
-          "members": [
-            {
-              "kind": "field",
-              "name": "jsInitialized",
-              "type": {
-                "text": "boolean"
-              }
-            },
+          "declaration": {
+            "name": "PrimerCheckoutComponent",
+            "module": "src/loader.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "injectLoaderStyles",
+          "declaration": {
+            "name": "injectLoaderStyles",
+            "module": "src/loader.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "injectThemeStyles",
+          "declaration": {
+            "name": "injectThemeStyles",
+            "module": "src/loader.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "injectLightTheme",
+          "declaration": {
+            "name": "injectLightTheme",
+            "module": "src/loader.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "injectDarkTheme",
+          "declaration": {
+            "name": "injectDarkTheme",
+            "module": "src/loader.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "loadPrimer",
+          "declaration": {
+            "name": "loadPrimer",
+            "module": "src/loader.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/primer-checkout.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "PrimerCheckoutComponent implements the main checkout experience.\nThis component includes a CSS-only loader that displays before the JavaScript\nis fully loaded, ensuring users see a loading indicator immediately.\n\nThe loader can be disabled by:\n1. Adding the 'loader-disabled' attribute to the component\n2. Setting the CSS custom property --primer-loader-disabled: 1",
+          "name": "PrimerCheckoutComponent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "jsInitialized",
+              "type": {
+                "text": "boolean"
+              }
+            },
             {
               "kind": "field",
               "name": "customStyles",
@@ -5216,6 +5647,47 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "dispatchOnCheckoutComplete",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "payment",
+                  "type": {
+                    "text": "Payment | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "dispatchOnCheckoutFailure",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "error",
+                  "type": {
+                    "text": "PrimerClientError"
+                  }
+                },
+                {
+                  "name": "payment",
+                  "optional": true,
+                  "type": {
+                    "text": "Payment"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "dispatchFormSubmitSuccess",
@@ -5755,193 +6227,1136 @@
       "exports": [
         {
           "kind": "js",
-          "name": "initialSDKState",
+          "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/react-components/ach-payment.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "AchPayment"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AchPayment",
+          "declaration": {
+            "name": "AchPayment",
+            "module": "src/react-components/ach-payment.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/button.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "Button"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Button",
+          "declaration": {
+            "name": "Button",
+            "module": "src/react-components/button.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ButtonSelectionState",
+          "declaration": {
+            "name": "ButtonSelectionState",
+            "module": "../atoms/button/button.component"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/card-form-submit.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "CardFormSubmit"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CardFormSubmit",
+          "declaration": {
+            "name": "CardFormSubmit",
+            "module": "src/react-components/card-form-submit.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/card-form.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "CardForm"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CardForm",
+          "declaration": {
+            "name": "CardForm",
+            "module": "src/react-components/card-form.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/card-network-selector.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "CardNetworkSelector"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CardNetworkSelector",
+          "declaration": {
+            "name": "CardNetworkSelector",
+            "module": "src/react-components/card-network-selector.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/checkout-state.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "CheckoutState"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CheckoutState",
+          "declaration": {
+            "name": "CheckoutState",
+            "module": "src/react-components/checkout-state.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/checkout.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "PrimerCheckout"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PrimerCheckout",
+          "declaration": {
+            "name": "PrimerCheckout",
+            "module": "src/react-components/checkout.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/collapsable.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "Collapsable"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Collapsable",
+          "declaration": {
+            "name": "Collapsable",
+            "module": "src/react-components/collapsable.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ButtonVariant",
+          "declaration": {
+            "name": "ButtonVariant",
+            "module": "../atoms/collapsable/collapsable.component"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/dialog.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "Dialog"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Dialog",
+          "declaration": {
+            "name": "Dialog",
+            "module": "src/react-components/dialog.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/dynamic-payment.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "DynamicPayment"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DynamicPayment",
+          "declaration": {
+            "name": "DynamicPayment",
+            "module": "src/react-components/dynamic-payment.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/error-message-container.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ErrorMessageContainer"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ErrorMessageContainer",
+          "declaration": {
+            "name": "ErrorMessageContainer",
+            "module": "src/react-components/error-message-container.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/error-message.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ErrorMessage"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ErrorMessage",
+          "declaration": {
+            "name": "ErrorMessage",
+            "module": "src/react-components/error-message.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/icon.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "Icon"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Icon",
+          "declaration": {
+            "name": "Icon",
+            "module": "src/react-components/icon.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./checkout"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./checkout-state"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./collapsable"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./dialog"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./error-message"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./icon"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./input"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./input-error"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./input-label"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./input-wrapper"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./portal"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./spinner"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./ach-payment"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./card-form"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./card-form-submit"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./card-network-selector"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./input-card-holder-name"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./input-card-expiry"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./input-cvv"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./input-card-number"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./dynamic-payment"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./error-message-container"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./klarna"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./native-payment"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./payment-method"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./primer-checkout-complete"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./primer-checkout-error"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./primer-main"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./redirect-payment"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./show-other-payments"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./button"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./vault-manager"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/input-card-expiry.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "InputCardExpiry"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "InputCardExpiry",
+          "declaration": {
+            "name": "InputCardExpiry",
+            "module": "src/react-components/input-card-expiry.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/input-card-holder-name.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "InputCardHolderName"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "InputCardHolderName",
+          "declaration": {
+            "name": "InputCardHolderName",
+            "module": "src/react-components/input-card-holder-name.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/input-card-number.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "InputCardNumber"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "InputCardNumber",
+          "declaration": {
+            "name": "InputCardNumber",
+            "module": "src/react-components/input-card-number.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/input-cvv.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "InputCvv"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "InputCvv",
+          "declaration": {
+            "name": "InputCvv",
+            "module": "src/react-components/input-cvv.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/input-error.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "InputError"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "InputError",
+          "declaration": {
+            "name": "InputError",
+            "module": "src/react-components/input-error.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/input-label.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "InputLabel"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "InputLabel",
+          "declaration": {
+            "name": "InputLabel",
+            "module": "src/react-components/input-label.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/input-wrapper.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "InputWrapper"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "InputWrapper",
+          "declaration": {
+            "name": "InputWrapper",
+            "module": "src/react-components/input-wrapper.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/input.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "Input"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Input",
+          "declaration": {
+            "name": "Input",
+            "module": "src/react-components/input.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "InputType",
+          "declaration": {
+            "name": "InputType",
+            "module": "../atoms/input/input.component"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "InputEventMap",
+          "declaration": {
+            "name": "InputEventMap",
+            "module": "../atoms/input/input.component"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/klarna.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "Klarna"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Klarna",
+          "declaration": {
+            "name": "Klarna",
+            "module": "src/react-components/klarna.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/native-payment.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "NativePayment"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "NativePayment",
+          "declaration": {
+            "name": "NativePayment",
+            "module": "src/react-components/native-payment.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/payment-method.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "PaymentMethod"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PaymentMethod",
+          "declaration": {
+            "name": "PaymentMethod",
+            "module": "src/react-components/payment-method.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/portal.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "Portal"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Portal",
+          "declaration": {
+            "name": "Portal",
+            "module": "src/react-components/portal.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/primer-checkout-complete.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "PrimerCheckoutComplete"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PrimerCheckoutComplete",
+          "declaration": {
+            "name": "PrimerCheckoutComplete",
+            "module": "src/react-components/primer-checkout-complete.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/primer-checkout-error.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "PrimerCheckoutError"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PrimerCheckoutError",
+          "declaration": {
+            "name": "PrimerCheckoutError",
+            "module": "src/react-components/primer-checkout-error.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/primer-main.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "PrimerMain"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PrimerMain",
+          "declaration": {
+            "name": "PrimerMain",
+            "module": "src/react-components/primer-main.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/redirect-payment.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "RedirectPayment"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RedirectPayment",
           "declaration": {
-            "name": "initialSDKState",
-            "module": "src/controllers/sdk-state-controller.ts"
+            "name": "RedirectPayment",
+            "module": "src/react-components/redirect-payment.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/show-other-payments.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ShowOtherPayments"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ShowOtherPayments",
+          "declaration": {
+            "name": "ShowOtherPayments",
+            "module": "src/react-components/show-other-payments.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react-components/spinner.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "Spinner"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Spinner",
+          "declaration": {
+            "name": "Spinner",
+            "module": "src/react-components/spinner.ts"
           }
         },
         {
           "kind": "js",
-          "name": "SdkStateController",
+          "name": "SpinnerSize",
           "declaration": {
-            "name": "SdkStateController",
-            "module": "src/controllers/sdk-state-controller.ts"
+            "name": "SpinnerSize",
+            "module": "../atoms/spinner/spinner.component"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/controllers/style-processing-controller.ts",
+      "path": "src/react-components/vault-manager.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"
-            }
-          ]
+          "kind": "variable",
+          "name": "VaultManager"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "StyleProcessingController",
+          "name": "VaultManager",
           "declaration": {
-            "name": "StyleProcessingController",
-            "module": "src/controllers/style-processing-controller.ts"
+            "name": "VaultManager",
+            "module": "src/react-components/vault-manager.ts"
           }
         }
       ]
@@ -6337,6 +7752,14 @@
             "module": "src/types/sdk.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "Payment",
+          "declaration": {
+            "name": "Payment",
+            "module": "src/types/sdk.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "PaymentCardVaultedMethod",
@@ -6385,6 +7808,14 @@
             "module": "src/types/sdk.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "PrimerClientError",
+          "declaration": {
+            "name": "PrimerClientError",
+            "module": "src/types/sdk.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "StripeAchCustomerDetails",
@@ -6948,10 +8379,11 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "'primary' | 'secondary' | 'tertiary'"
+                "text": "| 'primary'\n    | 'secondary'\n    | 'tertiary'"
               },
               "default": "'primary'",
-              "attribute": "variant"
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -6978,10 +8410,10 @@
               "kind": "field",
               "name": "buttonType",
               "type": {
-                "text": "'button' | 'submit' | 'reset'"
+                "text": "| 'button'\n    | 'submit'\n    | 'reset'"
               },
               "default": "'button'",
-              "attribute": "buttonType"
+              "attribute": "type"
             },
             {
               "kind": "field",
@@ -7041,7 +8473,7 @@
             {
               "name": "variant",
               "type": {
-                "text": "'primary' | 'secondary' | 'tertiary'"
+                "text": "| 'primary'\n    | 'secondary'\n    | 'tertiary'"
               },
               "default": "'primary'",
               "fieldName": "variant"
@@ -7064,9 +8496,9 @@
               "fieldName": "loading"
             },
             {
-              "name": "buttonType",
+              "name": "type",
               "type": {
-                "text": "'button' | 'submit' | 'reset'"
+                "text": "| 'button'\n    | 'submit'\n    | 'reset'"
               },
               "default": "'button'",
               "fieldName": "buttonType"
@@ -7162,7 +8594,8 @@
                 "text": "'complete' | 'failure'"
               },
               "default": "'complete'",
-              "attribute": "type"
+              "attribute": "type",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -7170,7 +8603,8 @@
               "type": {
                 "text": "string | undefined"
               },
-              "attribute": "description"
+              "attribute": "description",
+              "reflects": true
             }
           ],
           "attributes": [
@@ -7771,7 +9205,8 @@
                 "text": "string"
               },
               "default": "'var(--primer-color-icon-primary)'",
-              "attribute": "color"
+              "attribute": "color",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -7780,7 +9215,8 @@
                 "text": "'lg' | 'md' | 'sm'"
               },
               "default": "'lg'",
-              "attribute": "size"
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -9685,6 +11121,16 @@
           "description": "CardFormComponent serves as a container for card input components.\nIt handles form submission, validation, and provides context to child components.",
           "name": "CardFormComponent",
           "members": [
+            {
+              "kind": "field",
+              "name": "hideLabels",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "hide-labels",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "hasAssignedContent",
@@ -9735,7 +11181,7 @@
               "name": "setupCardFormTask",
               "privacy": "private",
               "readonly": true,
-              "default": "new Task(this, { task: async ([cardManager]) => { if (!cardManager?.manager) return initialState; const { manager } = cardManager; const { cardNumberInput, expiryInput, cvvInput } = manager.createHostedInputs(); this.cardFormProvider.setValue({ cardNumberInput, expiryInput, cvvInput, setCardholderName: (val: string) => manager.setCardholderName(val), setCardNetwork: (val: string) => { this.selectedCardNetwork = val; }, validate: () => manager.validate(), submit: (args) => manager.submit(args), }); return true; }, args: () => [this.paymentManagers.get('PAYMENT_CARD')], })",
+              "default": "new Task(this, { task: async ([cardManager]) => { if (!cardManager?.manager) return initialState; const { manager } = cardManager; const { cardNumberInput, expiryInput, cvvInput } = manager.createHostedInputs(); this.cardFormProvider.setValue({ cardNumberInput, expiryInput, cvvInput, setCardholderName: (val: string) => manager.setCardholderName(val), setCardNetwork: (val: string) => { this.selectedCardNetwork = val; }, validate: () => manager.validate(), submit: (args) => manager.submit(args), hideLabels: this.hideLabels, }); return true; }, args: () => [this.paymentManagers.get('PAYMENT_CARD')], })",
               "description": "Task to set up the card form with hosted inputs"
             },
             {
@@ -9794,6 +11240,14 @@
             }
           ],
           "attributes": [
+            {
+              "name": "hide-labels",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "hideLabels"
+            },
             {
               "name": "paymentManagers",
               "type": {