Tailwind CSS Payment Method Forms Blocks

All Blocks
Application UI
Forms
Payment Method Forms

Payment Method Forms

Payment method forms for saved cards, new payment method entry, bank account setup, and billing details.

Saved Payment Cards Grid Pro

Responsive grid shows saved payment cards with brand icons, balances, and per-card actions.

Create a responsive UI block named "Saved Payment Cards Grid" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/payment-method-forms/#saved-payment-cards-grid. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: forms/payment-method-forms
- Block ID: saved-payment-cards-grid
- Source description: Responsive grid shows saved payment cards with brand icons, balances, and per-card actions.
- Preview iframe: https://preline.co/blocks/forms/payment-method-forms/iframes/pro/saved-payment-cards-grid.html (repo path: blocks/forms/payment-method-forms/iframes/pro/saved-payment-cards-grid.html)
- Source markup reference:
  - partials/pro/storefront/cards/payment-cards-grid-view.html
  - partials/pro/storefront/cards/payment-details.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - Grid is `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5` holding exactly two tiles: one saved card, then the add-new tile.
  - The saved card is `p-1 min-h-52 flex flex-col bg-surface border border-surface-line rounded-2xl` wrapping an inner `p-4 min-h-40 bg-layer rounded-xl shadow-2xs` body, and carries `id="hs-pro-shpc1"`.
  - Card copy: name `James Collins` with a primary-tinted `Default` pill, a Mastercard mark in a small bordered box, `MasterCard •••• 4242`, and a destructive alert line `Expired on 07/24`.
  - The footer is a divider-separated row of three underlined text buttons in order - `Edit`, `Remove`, `Set as default` - with `Remove` and `Set as default` rendered `disabled` on load.
  - `Edit` carries `data-hs-overlay="#hs-pro-shepm"` and `Remove` carries `data-hs-remove-element="#hs-pro-shpc1"`; the referenced overlay dialogs are not part of this block.
  - The second tile is a dashed-border button (`min-h-52`, `border border-dashed border-line-3 rounded-2xl`) with a plus icon above the label `Add payment method`, wired to `data-hs-overlay="#hs-pro-shcpm"`.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
                      
                      <div id="hs-pro-shpc1" class="p-1 min-h-52 flex flex-col bg-surface border border-surface-line rounded-2xl">
                        
                        <div class="p-4 h-full min-h-40 flex flex-col justify-between bg-layer rounded-xl shadow-2xs">
                          
                          <div class="mb-4 flex flex-wrap justify-between items-center gap-2">
                            <div class="grow">
                              <p class="font-semibold text-foreground">
                                James Collins
                              </p>
                            </div>

<span class="py-0.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium rounded-full border border-primary-200 bg-primary-100 text-primary-800 dark:border-primary-500/20 dark:bg-primary-500/10 dark:text-primary-500">Default</span>
                          </div>

<div class="flex items-center gap-x-3">
                            <div>
                              <div class="p-1 border border-line-2 rounded-md">
                                <svg class="shrink-0 w-6 h-auto" width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="asfasfa112" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="35" height="22"><path d="M34.5 0.375H0.5V21.387H34.5V0.375Z" fill="white"></path></mask><g mask="url(#asfasfa112)"><path d="M22.0899 19.1431H12.9099V2.61914H22.0899V19.1431Z" fill="#FF5F00"></path><path d="M13.488 10.881C13.488 7.532 15.052 4.54 17.5 2.619C15.647 1.157 13.369 0.375 11.006 0.375C5.209 0.375 0.5 5.084 0.5 10.881C0.5 16.678 5.209 21.387 11.006 21.387C13.369 21.387 15.647 20.605 17.5 19.143C15.052 17.222 13.488 14.23 13.488 10.881Z" fill="#EB001B"></path><path d="M34.5 10.881C34.5 16.678 29.791 21.387 23.994 21.387C21.631 21.387 19.353 20.605 17.5 19.143C19.948 17.222 21.512 14.23 21.512 10.881C21.512 7.532 19.948 4.54 17.5 2.619C19.353 1.157 21.631 0.375 23.994 0.375C29.791 0.375 34.5 5.084 34.5 10.881Z" fill="#F79E1B"></path></g></svg>
                              </div>
                            </div>

<div class="grow">
                              <p class="text-sm text-foreground">
                                MasterCard •••• 4242
                              </p>
                              <p class="inline-flex items-center gap-x-1 text-xs text-destructive">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
                                Expired on 07/24
                              </p>
                            </div>
                          </div>
                          
                        </div>

<div class="mt-auto">
                          <ul class="flex flex-wrap justify-center items-center gap-3">
                            <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-3.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:w-px after:h-3 after:bg-line-3 after:-translate-y-1/2">
                              <button type="button" class="py-3 font-medium text-xs text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none disabled:no-underline" data-hs-overlay="#hs-pro-shepm">
                                Edit
                              </button>
                            </li>
                            <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-3.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:w-px after:h-3 after:bg-line-3 after:-translate-y-1/2">
                              <button type="button" class="py-3 font-medium text-xs text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none disabled:no-underline" disabled data-hs-remove-element="#hs-pro-shpc1">
                                Remove
                              </button>
                            </li>
                            <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-3.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:w-px after:h-3 after:bg-line-3 after:-translate-y-1/2">
                              <button type="button" class="py-3 font-medium text-xs text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none disabled:no-underline" disabled>
                                Set as default
                              </button>
                            </li>
                          </ul>
                        </div>
                        
                      </div>

<button type="button" class="p-1 group min-h-52 flex flex-col justify-center items-center gap-y-2 border border-dashed border-line-3 rounded-2xl hover:border-line-4 focus:outline-hidden focus:border-line-4" data-hs-overlay="#hs-pro-shcpm">
                        <svg class="shrink-0 size-7 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
                        <span class="text-sm text-foreground group-hover:text-primary-hover group-focus:text-primary-focus">
                          Add payment method
                        </span>
                      </button>
                      
                    </div>

Open related payment template

Payment Method Form with Tabs Pro

Centered payment form switches between method tabs above the card fields and submit action.

Create a responsive UI block named "Payment Method Form with Tabs" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/payment-method-forms/#payment-method-form-with-tabs. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/payment-method-forms
- Block ID: payment-method-form-with-tabs
- Source description: Centered payment form switches between method tabs above the card fields and submit action.
- Preview iframe: https://preline.co/blocks/forms/payment-method-forms/iframes/pro/payment-method-form-with-tabs.html (repo path: blocks/forms/payment-method-forms/iframes/pro/payment-method-form-with-tabs.html)
- Source markup reference:
  - partials/pro/payments-dashboard/forms/add-payment-with-tabs.html
  - partials/pro/admin-dashboard/sources/tab-headless.html
  - partials/pro/payments-dashboard/forms/card-confirmation-form.html
  - partials/pro/payments-dashboard/forms/card-form.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - A pill tab bar (`p-0.5 inline-flex bg-layer border border-layer-line rounded-full`) holds exactly two tabs, `Saved card` (active on load) and `New card`, as `rounded-full` buttons using `hs-tab-active:bg-muted-active`.
  - Tabs are wired with Preline HSTabs (`data-hs-tab`, `role="tab"`, `aria-controls`, `aria-selected`); the `New card` panel carries `hidden`, so only the saved-card panel is visible initially.
  - Both panels are cards `p-5 flex flex-col gap-y-4 sm:gap-y-6 bg-layer border border-layer-line rounded-2xl` placed `mt-4` under the tab bar in a `max-w-lg` column.
  - Saved-card panel: Mastercard mark, `Debit card`, `Ending 8080, Expires 12/24`, then an input labelled `Confirm security code (CVC/CVV)`.
  - That panel closes with the note `Since your card is not issued in the U.S., an additional processing fee will apply. If your card is not in USD, your bank may also charge an extra fee.`
  - New-card panel: a `Card number` input whose trailing edge shows four brand marks in order Visa, Mastercard, UnionPay, Discover, then a 2-col grid of `Expiration` and `CVC`.
  - Both security-code fields end with the same card-back icon inside an `hs-tooltip` (`[--placement:auto]`) reading `Your security code is the last three digits on the back of your card.`
  - The New-card panel ends with a switch row `Save this card for future payments`, on by default (`peer sr-only` checkbox, `w-11 h-6` track, `size-5` knob); no input has a placeholder and the block has no submit button.

<nav  class="p-0.5 inline-flex bg-layer border border-layer-line rounded-full" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
  <button type="button" class="hs-tab-active:bg-muted-active hs-tab-active:focus:bg-muted-focus inline-flex justify-center items-center gap-x-2 text-foreground py-2 px-3 text-sm rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden active" id="hs-pro-tabs-pysp-item-saved-card" aria-selected="true" data-hs-tab="#hs-pro-tabs-pysp-saved-card" aria-controls="hs-pro-tabs-pysp-saved-card" role="tab" >
    Saved card
  </button>
  <button type="button" class="hs-tab-active:bg-muted-active hs-tab-active:focus:bg-muted-focus inline-flex justify-center items-center gap-x-2 text-foreground py-2 px-3 text-sm rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-pysp-item-new-card" aria-selected="false" data-hs-tab="#hs-pro-tabs-pysp-new-card" aria-controls="hs-pro-tabs-pysp-new-card" role="tab" >
    New card
  </button>
</nav>

<div class="mt-4">
  
  <div id="hs-pro-tabs-pysp-saved-card" role="tabpanel" aria-labelledby="hs-pro-tabs-pysp-item-saved-card">
    
    <div class="p-5 flex flex-col gap-y-4 sm:gap-y-6 bg-layer border border-layer-line rounded-2xl">
      
      <div class="flex gap-x-3">
        <span class="flex shrink-0 justify-center items-center size-10">
          <svg class="shrink-0 w-7 h-auto" width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="asfasfa152" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="35" height="22"><path d="M34.5 0.375H0.5V21.387H34.5V0.375Z" fill="white"></path></mask><g mask="url(#asfasfa152)"><path d="M22.0899 19.1431H12.9099V2.61914H22.0899V19.1431Z" fill="#FF5F00"></path><path d="M13.488 10.881C13.488 7.532 15.052 4.54 17.5 2.619C15.647 1.157 13.369 0.375 11.006 0.375C5.209 0.375 0.5 5.084 0.5 10.881C0.5 16.678 5.209 21.387 11.006 21.387C13.369 21.387 15.647 20.605 17.5 19.143C15.052 17.222 13.488 14.23 13.488 10.881Z" fill="#EB001B"></path><path d="M34.5 10.881C34.5 16.678 29.791 21.387 23.994 21.387C21.631 21.387 19.353 20.605 17.5 19.143C19.948 17.222 21.512 14.23 21.512 10.881C21.512 7.532 19.948 4.54 17.5 2.619C19.353 1.157 21.631 0.375 23.994 0.375C29.791 0.375 34.5 5.084 34.5 10.881Z" fill="#F79E1B"></path></g></svg>
        </span>

<div class="grow">
          <span class="block font-medium text-foreground">
            Debit card
          </span>
          <span class="block text-sm text-muted-foreground-1">
            Ending 8080, Expires 12/24
          </span>
        </div>
      </div>

<div>
        <label for="hs-pro-pyspcvc" class="block mb-2 text-sm text-foreground">
          Confirm security code (CVC/CVV)
        </label>

<div class="absolute inset-y-0 inset-e-0 flex items-center z-20 pe-3">
            <span class="hs-tooltip [--placement:auto] inline-block">
              <svg class="shrink-0 size-7" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="1" y="4" width="22" height="16" rx="2" fill="currentColor" class="fill-surface-1"/>
                <rect x="1" y="6" width="22" height="3" fill="currentColor" class="fill-surface-2"/>
                <rect x="3" y="12" width="18" height="3" rx="1.5" fill="currentColor" class="fill-layer"/>
                <path d="M14 6C14 3.23858 16.2386 1 19 1V1C21.7614 1 24 3.23858 24 6V6C24 8.76142 21.7614 11 19 11V11C16.2386 11 14 8.76142 14 6V6Z" fill="currentColor" class="fill-muted-foreground-1"/>
                <path d="M16.9359 4.59091V7.5H16.4089V5.10369H16.3919L15.7115 5.53835V5.0554L16.4345 4.59091H16.9359ZM17.6745 7.5V7.11932L18.6845 6.12926C18.7811 6.03172 18.8616 5.94508 18.926 5.86932C18.9904 5.79356 19.0386 5.72017 19.0708 5.64915C19.103 5.57812 19.1191 5.50237 19.1191 5.42188C19.1191 5.33002 19.0983 5.25142 19.0566 5.18608C19.015 5.11979 18.9577 5.06866 18.8848 5.03267C18.8118 4.99669 18.729 4.97869 18.6362 4.97869C18.5405 4.97869 18.4567 4.99858 18.3848 5.03835C18.3128 5.07718 18.2569 5.13258 18.2172 5.20455C18.1783 5.27652 18.1589 5.36222 18.1589 5.46165H17.6575C17.6575 5.27699 17.6996 5.11648 17.7839 4.98011C17.8682 4.84375 17.9842 4.73816 18.1319 4.66335C18.2806 4.58854 18.4511 4.55114 18.6433 4.55114C18.8384 4.55114 19.0098 4.58759 19.1575 4.66051C19.3052 4.73343 19.4198 4.83333 19.5012 4.96023C19.5836 5.08712 19.6248 5.23201 19.6248 5.39489C19.6248 5.50379 19.604 5.6108 19.5623 5.71591C19.5207 5.82102 19.4473 5.9375 19.3422 6.06534C19.238 6.19318 19.0917 6.34801 18.9032 6.52983L18.4018 7.03977V7.05966H19.6689V7.5H17.6745ZM21.2029 7.53977C20.9984 7.53977 20.8166 7.50473 20.6575 7.43466C20.4993 7.36458 20.3743 7.26705 20.2825 7.14205C20.1906 7.01705 20.1419 6.87263 20.1362 6.70881H20.6703C20.675 6.78741 20.7011 6.85606 20.7484 6.91477C20.7958 6.97254 20.8587 7.01752 20.9373 7.04972C21.0159 7.08191 21.104 7.09801 21.2015 7.09801C21.3057 7.09801 21.398 7.08002 21.4785 7.04403C21.559 7.0071 21.622 6.95597 21.6674 6.89062C21.7129 6.82528 21.7351 6.75 21.7342 6.66477C21.7351 6.5767 21.7124 6.49905 21.666 6.43182C21.6196 6.36458 21.5524 6.31203 21.4643 6.27415C21.3772 6.23627 21.2721 6.21733 21.149 6.21733H20.8919V5.81108H21.149C21.2503 5.81108 21.3388 5.79356 21.4146 5.75852C21.4913 5.72348 21.5514 5.67424 21.595 5.6108C21.6386 5.5464 21.6599 5.47206 21.6589 5.38778C21.6599 5.3054 21.6414 5.2339 21.6035 5.1733C21.5666 5.11174 21.514 5.06392 21.4458 5.02983C21.3786 4.99574 21.2995 4.97869 21.2086 4.97869C21.1196 4.97869 21.0372 4.99479 20.9615 5.02699C20.8857 5.05919 20.8246 5.10511 20.7782 5.16477C20.7318 5.22348 20.7072 5.29356 20.7044 5.375H20.1973C20.2011 5.21212 20.2479 5.06913 20.3379 4.94602C20.4288 4.82197 20.55 4.72538 20.7015 4.65625C20.853 4.58617 21.023 4.55114 21.2115 4.55114C21.4056 4.55114 21.5742 4.58759 21.7172 4.66051C21.8611 4.73248 21.9724 4.82955 22.051 4.9517C22.1296 5.07386 22.1689 5.20881 22.1689 5.35653C22.1698 5.52036 22.1215 5.65767 22.024 5.76847C21.9274 5.87926 21.8005 5.9517 21.6433 5.9858V6.00852C21.8478 6.03693 22.0046 6.11269 22.1135 6.2358C22.2233 6.35795 22.2778 6.50994 22.2768 6.69176C22.2768 6.85464 22.2304 7.00047 22.1376 7.12926C22.0458 7.2571 21.9189 7.35748 21.7569 7.4304C21.5959 7.50331 21.4113 7.53977 21.2029 7.53977Z" fill="currentColor" class="fill-foreground-inverse"/>
              </svg>
              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 max-w-48 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                Your security code is the last three digits on the back of your card.
              </span>
            </span>
          </div>
        </div>
      </div>

<p class="text-sm text-muted-foreground-1">
        Since your card is not issued in the U.S., an additional processing fee will apply. If your card is not in USD, your bank may also charge an extra fee.
      </p>
    </div>
    
  </div>

<div id="hs-pro-tabs-pysp-new-card" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-pysp-item-new-card">
    
    <div class="p-5 flex flex-col gap-y-4 sm:gap-y-6 bg-layer border border-layer-line rounded-2xl">
      <div class="flex flex-col gap-y-4">
        
        <div>
          <label for="hs-pro-pyocpcn" class="block mb-2 text-sm text-foreground">
            Card number
          </label>

<div class="grid grid-cols-2 gap-4">
          
          <div>
            <label for="hs-pro-pyocpep" class="block mb-2 text-sm text-foreground">
              Expiration
            </label>

<div>
            <label for="hs-pro-pyocpcvc" class="block mb-2 text-sm text-foreground">
              CVC
            </label>

<div class="absolute inset-y-0 inset-e-0 flex items-center z-20 pe-3">
                <span class="hs-tooltip [--placement:auto] inline-block">
                  <svg class="shrink-0 size-7" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="1" y="4" width="22" height="16" rx="2" fill="currentColor" class="fill-surface-1"/>
                    <rect x="1" y="6" width="22" height="3" fill="currentColor" class="fill-surface-2"/>
                    <rect x="3" y="12" width="18" height="3" rx="1.5" fill="currentColor" class="fill-layer"/>
                    <path d="M14 6C14 3.23858 16.2386 1 19 1V1C21.7614 1 24 3.23858 24 6V6C24 8.76142 21.7614 11 19 11V11C16.2386 11 14 8.76142 14 6V6Z" fill="currentColor" class="fill-muted-foreground-1"/>
                    <path d="M16.9359 4.59091V7.5H16.4089V5.10369H16.3919L15.7115 5.53835V5.0554L16.4345 4.59091H16.9359ZM17.6745 7.5V7.11932L18.6845 6.12926C18.7811 6.03172 18.8616 5.94508 18.926 5.86932C18.9904 5.79356 19.0386 5.72017 19.0708 5.64915C19.103 5.57812 19.1191 5.50237 19.1191 5.42188C19.1191 5.33002 19.0983 5.25142 19.0566 5.18608C19.015 5.11979 18.9577 5.06866 18.8848 5.03267C18.8118 4.99669 18.729 4.97869 18.6362 4.97869C18.5405 4.97869 18.4567 4.99858 18.3848 5.03835C18.3128 5.07718 18.2569 5.13258 18.2172 5.20455C18.1783 5.27652 18.1589 5.36222 18.1589 5.46165H17.6575C17.6575 5.27699 17.6996 5.11648 17.7839 4.98011C17.8682 4.84375 17.9842 4.73816 18.1319 4.66335C18.2806 4.58854 18.4511 4.55114 18.6433 4.55114C18.8384 4.55114 19.0098 4.58759 19.1575 4.66051C19.3052 4.73343 19.4198 4.83333 19.5012 4.96023C19.5836 5.08712 19.6248 5.23201 19.6248 5.39489C19.6248 5.50379 19.604 5.6108 19.5623 5.71591C19.5207 5.82102 19.4473 5.9375 19.3422 6.06534C19.238 6.19318 19.0917 6.34801 18.9032 6.52983L18.4018 7.03977V7.05966H19.6689V7.5H17.6745ZM21.2029 7.53977C20.9984 7.53977 20.8166 7.50473 20.6575 7.43466C20.4993 7.36458 20.3743 7.26705 20.2825 7.14205C20.1906 7.01705 20.1419 6.87263 20.1362 6.70881H20.6703C20.675 6.78741 20.7011 6.85606 20.7484 6.91477C20.7958 6.97254 20.8587 7.01752 20.9373 7.04972C21.0159 7.08191 21.104 7.09801 21.2015 7.09801C21.3057 7.09801 21.398 7.08002 21.4785 7.04403C21.559 7.0071 21.622 6.95597 21.6674 6.89062C21.7129 6.82528 21.7351 6.75 21.7342 6.66477C21.7351 6.5767 21.7124 6.49905 21.666 6.43182C21.6196 6.36458 21.5524 6.31203 21.4643 6.27415C21.3772 6.23627 21.2721 6.21733 21.149 6.21733H20.8919V5.81108H21.149C21.2503 5.81108 21.3388 5.79356 21.4146 5.75852C21.4913 5.72348 21.5514 5.67424 21.595 5.6108C21.6386 5.5464 21.6599 5.47206 21.6589 5.38778C21.6599 5.3054 21.6414 5.2339 21.6035 5.1733C21.5666 5.11174 21.514 5.06392 21.4458 5.02983C21.3786 4.99574 21.2995 4.97869 21.2086 4.97869C21.1196 4.97869 21.0372 4.99479 20.9615 5.02699C20.8857 5.05919 20.8246 5.10511 20.7782 5.16477C20.7318 5.22348 20.7072 5.29356 20.7044 5.375H20.1973C20.2011 5.21212 20.2479 5.06913 20.3379 4.94602C20.4288 4.82197 20.55 4.72538 20.7015 4.65625C20.853 4.58617 21.023 4.55114 21.2115 4.55114C21.4056 4.55114 21.5742 4.58759 21.7172 4.66051C21.8611 4.73248 21.9724 4.82955 22.051 4.9517C22.1296 5.07386 22.1689 5.20881 22.1689 5.35653C22.1698 5.52036 22.1215 5.65767 22.024 5.76847C21.9274 5.87926 21.8005 5.9517 21.6433 5.9858V6.00852C21.8478 6.03693 22.0046 6.11269 22.1135 6.2358C22.2233 6.35795 22.2778 6.50994 22.2768 6.69176C22.2768 6.85464 22.2304 7.00047 22.1376 7.12926C22.0458 7.2571 21.9189 7.35748 21.7569 7.4304C21.5959 7.50331 21.4113 7.53977 21.2029 7.53977Z" fill="currentColor" class="fill-foreground-inverse"/>
                  </svg>
                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 max-w-48 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                    Your security code is the last three digits on the back of your card.
                  </span>
                </span>
              </div>
            </div>
          </div>
          
        </div>

<div class="w-full flex justify-between items-center">
          <label for="hs-pro-pyocpstcffp" class="flex flex-1 text-sm text-muted-foreground-1">Save this card for future payments</label>
          <label for="hs-pro-pyocpstcffp" class="relative inline-block w-11 h-6 cursor-pointer">
            <input type="checkbox" id="hs-pro-pyocpstcffp" class="peer sr-only" checked>
            <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
            <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
          </label>
        </div>
        
      </div>
    </div>
    
  </div>
  
</div>

Open related add money payment template

Add Payment Method Form Pro

Card-payment form stacks payment-type options, card inputs, and a default-method checkbox.

Create a responsive UI block named "Add Payment Method Form" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/payment-method-forms/#add-payment-method-form. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/payment-method-forms
- Block ID: add-payment-method-form
- Source description: Card-payment form stacks payment-type options, card inputs, and a default-method checkbox.
- Preview iframe: https://preline.co/blocks/forms/payment-method-forms/iframes/pro/add-payment-method-form.html (repo path: blocks/forms/payment-method-forms/iframes/pro/add-payment-method-form.html)
- Source markup reference:
  - partials/pro/storefront/forms/payment.html
  - partials/pro/sources/overlay-header.html
  - partials/pro/storefront/radio-and-checkbox/payment.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - Root is a static card `<div class="bg-card border border-card-line shadow-2xs rounded-xl">` with a `py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider` header whose `<h2>` reads `Add Payment` (no close button) and a `p-4` body.
  - Top of the body is a `mb-6 grid grid-cols-3 gap-2` of 3 radio tiles sharing one radio group, in order `Card` (checked on first load, generic credit-card outline icon), `PayPal` (full-color PayPal mark) and `Klarna` (rendered `disabled` with a small `Soon` pill badge pinned to its top-end corner); each tile is `py-2 px-3 rounded-lg` with `has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked`.
  - Four empty inputs whose labels are all `sr-only` and whose placeholders are `Card number`, `Expiration`, `CVC` and `Name on card`; `Expiration` and `CVC` sit side by side in a `grid grid-cols-2 gap-x-2`, the others are full width. No values are prefilled.
  - The card-number field reserves `pe-40` for 4 brand card marks rendered inline at `w-8 h-auto` (Visa, Mastercard, UnionPay and Discover artwork with a `stroke-line-3` rounded outline) - keep these exact SVGs, do not swap in generic icons.
  - The CVC field ends with a card-back illustration wrapped in a Preline tooltip (`hs-tooltip [--placement:auto]`) whose content reads `Your security code is the last three digits on the back of your card.`.
  - Bottom of the body is an unchecked checkbox labelled `Set as default payment method`.
  - The source markup has no submit/cancel footer buttons and is not itself a modal: the only JS is the tooltip, and the demo iframe's auto-open overlay script is preview chrome that this static card does not use.

<div class="bg-card border border-card-line shadow-2xs rounded-xl">
  
  <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
    <h2  class="font-medium text-foreground">
      Add Payment
    </h2>
  </div>

<div class="p-4">
    
    <div class="mb-6 grid grid-cols-3 gap-2">
      
      <label for="hs-pro-shcpmgpr1" class="py-2 px-3 relative flex justify-center items-center gap-x-3 text-sm bg-layer border border-layer-line text-layer-foreground has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked has-disabled:opacity-50 has-disabled:pointer-events-none cursor-pointer rounded-lg">
        <input type="radio" id="hs-pro-shcpmgpr1" class="hidden" value="Card" name="hs-pro-shcpmgpr" checked >
        <span class="block text-foreground">
          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
        </span>
        <span class="block font-medium text-xs sm:text-sm text-foreground">
          Card
        </span>
      </label>

<label for="hs-pro-shcpmgpr2" class="py-2 px-3 relative flex justify-center items-center gap-x-3 text-sm bg-layer border border-layer-line text-layer-foreground has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked has-disabled:opacity-50 has-disabled:pointer-events-none cursor-pointer rounded-lg">
        <input type="radio" id="hs-pro-shcpmgpr2" class="hidden" value="PayPal" name="hs-pro-shcpmgpr"  >
        <span class="block text-foreground">
          <svg class="shrink-0 size-4" width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.6424 30.9152L11.197 27.3925L9.96162 27.3639H4.06256L8.16211 1.37005C8.17431 1.29063 8.21465 1.21823 8.27577 1.16607C8.33689 1.1139 8.41472 1.08543 8.49508 1.08586H18.4417C21.7438 1.08586 24.0227 1.773 25.2124 3.12927C25.7702 3.76551 26.1255 4.43039 26.2972 5.16208C26.4775 5.92981 26.4807 6.84707 26.3047 7.9658L26.2919 8.04745V8.76429L26.8497 9.08029C27.2755 9.29602 27.6583 9.58784 27.979 9.94134C28.4562 10.4853 28.7648 11.1767 28.8952 11.9964C29.0299 12.8394 28.9854 13.8426 28.7648 14.9783C28.5103 16.2847 28.0989 17.4225 27.5432 18.3536C27.053 19.1876 26.3938 19.91 25.608 20.4744C24.8699 20.9982 23.993 21.3959 23.0015 21.6504C22.0408 21.9007 20.9454 22.0268 19.7439 22.0268H18.9698C18.4163 22.0268 17.8786 22.2262 17.4566 22.5836C17.0352 22.9447 16.7556 23.4438 16.6677 23.9918L16.6093 24.3088L15.6295 30.5175L15.585 30.7455C15.5733 30.8176 15.5532 30.8537 15.5235 30.8781C15.4947 30.9016 15.4588 30.9147 15.4217 30.9152H10.6424Z" fill="#253B80"></path><path d="M27.3778 8.13017C27.3481 8.31998 27.3142 8.51403 27.276 8.71339C25.9643 15.4481 21.4766 17.7746 15.7451 17.7746H12.8268C12.1259 17.7746 11.5352 18.2836 11.426 18.975L9.93191 28.4508L9.5088 31.1368C9.49195 31.2434 9.49838 31.3523 9.52767 31.4561C9.55695 31.5599 9.60838 31.6562 9.67842 31.7382C9.74846 31.8202 9.83545 31.8861 9.9334 31.9313C10.0313 31.9765 10.1379 31.9999 10.2458 32H15.4217C16.0346 32 16.5552 31.5546 16.6517 30.9502L16.7026 30.6872L17.6771 24.5029L17.7397 24.1636C17.8351 23.557 18.3569 23.1116 18.9698 23.1116H19.7439C24.7586 23.1116 28.6842 21.0757 29.8316 15.184C30.3109 12.7228 30.0627 10.6677 28.7945 9.22239C28.3925 8.77528 27.9124 8.40516 27.3778 8.13017Z" fill="#179BD7"></path><path d="M26.0056 7.58299C25.5868 7.46183 25.1607 7.36727 24.7299 7.29986C23.8788 7.16905 23.0185 7.10629 22.1574 7.11217H14.3612C14.0645 7.11194 13.7776 7.21787 13.5521 7.41079C13.3267 7.60372 13.1778 7.87092 13.1322 8.1641L11.4737 18.6685L11.426 18.975C11.4777 18.6406 11.6473 18.3357 11.9043 18.1155C12.1612 17.8954 12.4885 17.7744 12.8268 17.7746H15.7451C21.4766 17.7746 25.9642 15.447 27.276 8.71339C27.3152 8.51403 27.3481 8.31998 27.3778 8.13017C27.0316 7.94865 26.6709 7.79648 26.2993 7.67525C26.2019 7.64293 26.104 7.61217 26.0056 7.58299Z" fill="#222D65"></path><path d="M13.1321 8.1641C13.1773 7.87084 13.3262 7.60351 13.5517 7.41068C13.7772 7.21785 14.0644 7.11231 14.3611 7.11323H22.1573C23.0809 7.11323 23.943 7.17368 24.7298 7.30092C25.2623 7.3846 25.7874 7.50976 26.3003 7.67525C26.6874 7.80356 27.0468 7.9552 27.3787 8.13017C27.769 5.64138 27.3756 3.94685 26.0299 2.41243C24.5464 0.7232 21.8688 0 18.4427 0H8.49601C7.79614 0 7.19913 0.508997 7.09097 1.20144L2.94795 27.4625C2.92865 27.5844 2.93599 27.7091 2.96947 27.8279C3.00294 27.9467 3.06176 28.0569 3.14187 28.1508C3.22198 28.2447 3.32149 28.3202 3.43354 28.3719C3.54559 28.4237 3.66753 28.4506 3.79097 28.4508H9.93181L11.4736 18.6685L13.1321 8.1641Z" fill="#253B80"></path></svg>
        </span>
        <span class="block font-medium text-xs sm:text-sm text-foreground">
          PayPal
        </span>
      </label>

<label for="hs-pro-shcpmgpr3" class="py-2 px-3 relative flex justify-center items-center gap-x-3 text-sm bg-layer border border-layer-line text-layer-foreground has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked has-disabled:opacity-50 has-disabled:pointer-events-none cursor-pointer rounded-lg">
        <input type="radio" id="hs-pro-shcpmgpr3" class="hidden" value="Klarna" name="hs-pro-shcpmgpr"  disabled>
        <span class="block text-foreground">
          <svg class="shrink-0 size-4" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4.592 2v20H0V2h4.592zm11.46 0c0 4.194-1.583 8.105-4.415 11.068l-.278.283L17.702 22h-5.668l-6.893-9.4 1.779-1.332c2.858-2.14 4.535-5.378 4.637-8.924L11.562 2h4.49zM21.5 17a2.5 2.5 0 110 5 2.5 2.5 0 010-5z" fill="currentColor"/></svg>
        </span>
        <span class="block font-medium text-xs sm:text-sm text-foreground">
          Klarna
        </span>
        <span class="absolute -top-2 -inset-e-2 pointer-events-none">
          <span class="py-0.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium rounded-full border border-primary-200 bg-primary-100 text-primary-800 dark:border-primary-500/20 dark:bg-primary-900 dark:text-primary-200">Soon</span>
        </span>
      </label>
      
    </div>

<div class="space-y-4">
      
      <div class="relative">
        <label for="hs-pro-shcpmcn" class="sr-only">
          Card number
        </label>

<div class="grid grid-cols-2 gap-x-2">
        
        <div>
          <label for="hs-pro-shcpmex" class="sr-only">
            Expiration
          </label>

<div>
          <label for="hs-pro-shcpmcvc" class="sr-only">
            CVC
          </label>

<div class="absolute inset-y-0 inset-e-0 flex items-center z-20 pe-3">
              <span class="hs-tooltip [--placement:auto] inline-block">
                <svg class="shrink-0 size-7" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="1" y="4" width="22" height="16" rx="2" fill="currentColor" class="fill-surface-1"/>
                  <rect x="1" y="6" width="22" height="3" fill="currentColor" class="fill-surface-2"/>
                  <rect x="3" y="12" width="18" height="3" rx="1.5" fill="currentColor" class="fill-layer"/>
                  <path d="M14 6C14 3.23858 16.2386 1 19 1V1C21.7614 1 24 3.23858 24 6V6C24 8.76142 21.7614 11 19 11V11C16.2386 11 14 8.76142 14 6V6Z" fill="currentColor" class="fill-muted-foreground-1"/>
                  <path d="M16.9359 4.59091V7.5H16.4089V5.10369H16.3919L15.7115 5.53835V5.0554L16.4345 4.59091H16.9359ZM17.6745 7.5V7.11932L18.6845 6.12926C18.7811 6.03172 18.8616 5.94508 18.926 5.86932C18.9904 5.79356 19.0386 5.72017 19.0708 5.64915C19.103 5.57812 19.1191 5.50237 19.1191 5.42188C19.1191 5.33002 19.0983 5.25142 19.0566 5.18608C19.015 5.11979 18.9577 5.06866 18.8848 5.03267C18.8118 4.99669 18.729 4.97869 18.6362 4.97869C18.5405 4.97869 18.4567 4.99858 18.3848 5.03835C18.3128 5.07718 18.2569 5.13258 18.2172 5.20455C18.1783 5.27652 18.1589 5.36222 18.1589 5.46165H17.6575C17.6575 5.27699 17.6996 5.11648 17.7839 4.98011C17.8682 4.84375 17.9842 4.73816 18.1319 4.66335C18.2806 4.58854 18.4511 4.55114 18.6433 4.55114C18.8384 4.55114 19.0098 4.58759 19.1575 4.66051C19.3052 4.73343 19.4198 4.83333 19.5012 4.96023C19.5836 5.08712 19.6248 5.23201 19.6248 5.39489C19.6248 5.50379 19.604 5.6108 19.5623 5.71591C19.5207 5.82102 19.4473 5.9375 19.3422 6.06534C19.238 6.19318 19.0917 6.34801 18.9032 6.52983L18.4018 7.03977V7.05966H19.6689V7.5H17.6745ZM21.2029 7.53977C20.9984 7.53977 20.8166 7.50473 20.6575 7.43466C20.4993 7.36458 20.3743 7.26705 20.2825 7.14205C20.1906 7.01705 20.1419 6.87263 20.1362 6.70881H20.6703C20.675 6.78741 20.7011 6.85606 20.7484 6.91477C20.7958 6.97254 20.8587 7.01752 20.9373 7.04972C21.0159 7.08191 21.104 7.09801 21.2015 7.09801C21.3057 7.09801 21.398 7.08002 21.4785 7.04403C21.559 7.0071 21.622 6.95597 21.6674 6.89062C21.7129 6.82528 21.7351 6.75 21.7342 6.66477C21.7351 6.5767 21.7124 6.49905 21.666 6.43182C21.6196 6.36458 21.5524 6.31203 21.4643 6.27415C21.3772 6.23627 21.2721 6.21733 21.149 6.21733H20.8919V5.81108H21.149C21.2503 5.81108 21.3388 5.79356 21.4146 5.75852C21.4913 5.72348 21.5514 5.67424 21.595 5.6108C21.6386 5.5464 21.6599 5.47206 21.6589 5.38778C21.6599 5.3054 21.6414 5.2339 21.6035 5.1733C21.5666 5.11174 21.514 5.06392 21.4458 5.02983C21.3786 4.99574 21.2995 4.97869 21.2086 4.97869C21.1196 4.97869 21.0372 4.99479 20.9615 5.02699C20.8857 5.05919 20.8246 5.10511 20.7782 5.16477C20.7318 5.22348 20.7072 5.29356 20.7044 5.375H20.1973C20.2011 5.21212 20.2479 5.06913 20.3379 4.94602C20.4288 4.82197 20.55 4.72538 20.7015 4.65625C20.853 4.58617 21.023 4.55114 21.2115 4.55114C21.4056 4.55114 21.5742 4.58759 21.7172 4.66051C21.8611 4.73248 21.9724 4.82955 22.051 4.9517C22.1296 5.07386 22.1689 5.20881 22.1689 5.35653C22.1698 5.52036 22.1215 5.65767 22.024 5.76847C21.9274 5.87926 21.8005 5.9517 21.6433 5.9858V6.00852C21.8478 6.03693 22.0046 6.11269 22.1135 6.2358C22.2233 6.35795 22.2778 6.50994 22.2768 6.69176C22.2768 6.85464 22.2304 7.00047 22.1376 7.12926C22.0458 7.2571 21.9189 7.35748 21.7569 7.4304C21.5959 7.50331 21.4113 7.53977 21.2029 7.53977Z" fill="currentColor" class="fill-foreground-inverse"/>
                </svg>
                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 max-w-48 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                  Your security code is the last three digits on the back of your card.
                </span>
              </span>
            </div>
          </div>
        </div>
        
      </div>

<div>
        <label for="hs-pro-shcpmnoc" class="sr-only">
          Name on card
        </label>

<input id="hs-pro-shcpmnoc" type="text" class="py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Name on card" >
      </div>
      
    </div>
    
    
    <div class="mt-4 flex items-center gap-x-2">
      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shcpmmdach" >
      <label for="hs-pro-shcpmmdach" class="text-sm text-muted-foreground-1">
        Set as default payment method
      </label>
    </div>
    
  </div>
  
</div>

Open related payment template

Card Details and Billing Form Pro

One billing form groups card details, address fields, a country select, and a default-card checkbox.

Create a responsive UI block named "Card Details and Billing Form" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/payment-method-forms/#card-details-and-billing-form. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/payment-method-forms
- Block ID: card-details-and-billing-form
- Source description: One billing form groups card details, address fields, a country select, and a default-card checkbox.
- Preview iframe: https://preline.co/blocks/forms/payment-method-forms/iframes/pro/card-details-and-billing-form.html (repo path: blocks/forms/payment-method-forms/iframes/pro/card-details-and-billing-form.html)
- Source markup reference:
  - partials/pro/admin-dashboard/cards/add-card-form.html
  - partials/pro/sources/overlay-header.html
  - partials/pro/admin-dashboard/sources/add-card-form.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - Card is `bg-card border border-card-line shadow-2xs rounded-xl` with a `py-2.5 px-4` header titled `Add card details` (bottom divider, no close button) over a `p-4 space-y-5` body; the preview centers it in a `max-w-xl` column.
  - The `Card details` label row is followed by four brand marks in fixed order - Visa, Mastercard, UnionPay, Discover - each a `w-8` 56x32 SVG with a rounded stroked outline.
  - All field labels are rendered `hidden` in this variant, so placeholders carry the copy: `Card number` (input has a leading credit-card icon and `ps-9`), then a 2-col grid of `Expiration` and `CVV`.
  - A lock-icon footnote reads `This is a secure form`.
  - The billing group is labelled `Billing address` and its inputs are placeholdered `Street address`, `Apt or suite number`, `City`, then a 2-col grid of `State` and `ZIP code`.
  - The country control is a Preline `data-hs-select` (HSSelect): placeholder `Country`, `hasSearch: true` with search placeholder `Country`, `dropdownPlacement: "top"`, a leading `Choose` option plus roughly 250 country options each carrying a round flag image, and nothing preselected.
  - The last row is a checkbox labelled `Set as default payment method`, checked on load.
  - The select needs the Preline runtime plus Floating UI core and dom, which the preview loads alongside it.

<div class="bg-card border border-card-line shadow-2xs rounded-xl">
  
  <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
    <h2  class="font-medium text-foreground">
      Add card details
    </h2>
  </div>

<div class="p-4 space-y-5">
    <div class="space-y-2">
      <div class="flex flex-wrap justify-between items-center gap-2">
        <label class="block text-sm font-medium text-foreground">
          Card details
        </label>

<div class="flex gap-x-2">
          <svg class="w-8 h-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 32" width="56" height="32" fill="none">
            <path d="M34.482 9a8.17 8.17 0 0 1 3.052.577l-.463 2.926-.308-.143a5.638 5.638 0 0 0-2.534-.52c-1.343 0-1.946.591-1.96 1.168 0 .635.73 1.053 1.92 1.673 1.96.966 2.868 2.148 2.855 3.69C37.016 21.184 34.692 23 31.122 23c-1.526-.015-2.996-.347-3.794-.721l.476-3.043.448.217c1.106.505 1.834.72 3.192.72.98 0 2.03-.418 2.043-1.325 0-.592-.447-1.024-1.763-1.688-1.288-.649-3.01-1.73-2.982-3.676.014-2.639 2.38-4.484 5.74-4.484ZM21.798 22.798H25.2l2.128-13.552h-3.402l-2.128 13.552Z" fill="#00579F" />
            <path clip-rule="evenodd" d="M46.255 9.246h-2.631c-.812 0-1.428.245-1.779 1.124l-5.053 12.428h3.57l.714-2.033h4.368c.098.476.406 2.033.406 2.033H49L46.255 9.246Zm-4.2 8.75 1.36-3.79c-.007.01.038-.116.104-.305.098-.28.243-.693.343-.993l.237 1.167s.645 3.244.785 3.922h-2.828Z" fill="#00579F" fill-rule="evenodd" />
            <path d="m15.624 18.487 3.332-9.241h3.598l-5.348 13.538h-3.598l-3.052-11.852c2.156 1.168 4.088 3.518 4.704 5.68l.364 1.875Z" fill="#00579F" />
            <path d="M12.53 9.246H7.056L7 9.519c4.27 1.125 7.098 3.836 8.26 7.094l-1.19-6.228c-.196-.866-.798-1.11-1.54-1.14Z" fill="#FAA61A" />
            <rect height="31" rx="5.5" stroke="currentColor" class="stroke-line-3" width="55" x=".5" y=".5" />
          </svg>
          <svg class="w-8 h-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 32" width="56" height="32" fill="none">
            <path d="M28.017 22.85A9.137 9.137 0 0 1 22.108 25C17.078 25 13 20.97 13 16s4.078-9 9.108-9c2.255 0 4.318.81 5.909 2.15A9.137 9.137 0 0 1 33.925 7c5.03 0 9.108 4.03 9.108 9s-4.078 9-9.108 9a9.137 9.137 0 0 1-5.908-2.15Z" fill="#ED0006" />
            <path d="M28.017 22.85a8.937 8.937 0 0 0 3.2-6.85c0-2.743-1.242-5.2-3.2-6.85A9.137 9.137 0 0 1 33.925 7c5.03 0 9.108 4.03 9.108 9s-4.078 9-9.108 9a9.137 9.137 0 0 1-5.908-2.15Z" fill="#F9A000" />
            <path d="M28.017 22.85c1.958-1.65 3.2-4.107 3.2-6.85 0-2.743-1.242-5.2-3.2-6.85a8.937 8.937 0 0 0-3.2 6.85c0 2.743 1.241 5.2 3.2 6.85Z" fill="#FF5E00" />
            <rect height="31" rx="5.5" stroke="currentColor" class="stroke-line-3" width="55" x=".5" y=".5" />
          </svg>
          <svg class="w-8 h-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 32" width="56" height="32" fill="none">
            <path d="M17.69 5.001h8.528c1.19 0 1.93 1 1.652 2.228L23.9 24.775C23.62 26.001 22.43 27 21.239 27H12.71c-1.188 0-1.93-1-1.653-2.225L15.03 7.23c.278-1.229 1.469-2.228 2.66-2.228Z" fill="#E21836" />
            <path d="M25.507 5h9.806c1.19 0 .654.999.374 2.228l-3.97 17.546C31.44 26 31.526 27 30.333 27h-9.806c-1.192 0-1.93-1-1.65-2.225l3.969-17.546C23.128 5.998 24.316 5 25.507 5Z" fill="#00447C" />
            <path d="M34.925 5h8.527c1.192 0 1.932.999 1.652 2.228l-3.969 17.546C40.855 26 39.662 27 38.47 27h-8.523c-1.192 0-1.932-1-1.653-2.225l3.97-17.546C32.542 5.998 33.732 5 34.924 5Z" fill="#007B84" />
            <path d="M19.917 10.623c-.877.01-1.136 0-1.219-.02-.032.155-.623 2.965-.625 2.967-.127.569-.22.974-.535 1.236a.937.937 0 0 1-.63.225c-.388 0-.615-.198-.653-.575l-.007-.13.119-.766s.62-2.56.732-2.899a.246.246 0 0 0 .009-.038c-1.21.01-1.423 0-1.438-.02-.008.027-.038.186-.038.186l-.634 2.886-.055.245-.105.8c0 .238.045.432.135.596.29.52 1.113.597 1.58.597.6 0 1.164-.131 1.544-.37.661-.403.834-1.031.988-1.59l.072-.286s.64-2.66.748-3.006c.005-.019.006-.029.012-.038Zm2.177 2.145a1.65 1.65 0 0 0-.69.166c-.091.05-.178.105-.27.161l.083-.307-.046-.052c-.537.112-.657.127-1.152.198l-.042.029c-.058.492-.109.861-.322 1.827-.082.356-.166.715-.25 1.07l.022.046c.509-.028.663-.028 1.104-.02l.036-.04c.056-.296.064-.366.188-.965.058-.284.18-.908.24-1.13.11-.053.22-.105.323-.105.248 0 .218.222.208.31-.01.15-.1.635-.193 1.052l-.062.27c-.043.198-.09.391-.133.588l.019.04c.5-.028.653-.028 1.081-.02l.05-.04c.078-.463.1-.586.238-1.26l.069-.308c.134-.605.2-.912.1-1.162-.108-.28-.365-.348-.601-.348Zm2.431.634c-.266.052-.436.088-.605.11-.167.028-.33.053-.588.09l-.02.019-.018.015c-.027.197-.046.368-.082.568-.03.207-.076.443-.151.781-.059.26-.09.35-.122.441-.033.091-.069.18-.134.435l.015.023.013.022c.24-.012.398-.02.56-.022.161-.006.328 0 .587.002l.023-.02.024-.02c.038-.23.043-.292.066-.404.023-.12.062-.287.158-.731.045-.21.096-.417.143-.63.048-.213.1-.422.148-.63l-.007-.026-.01-.023Zm.006-.854c-.242-.147-.667-.1-.953.102-.284.2-.317.482-.076.63.238.144.664.101.948-.104.284-.203.32-.483.08-.628Zm1.463 3.404c.49 0 .991-.14 1.369-.551.29-.334.424-.832.47-1.036.15-.679.033-.996-.114-1.189-.223-.294-.618-.388-1.027-.388-.246 0-.832.025-1.29.46-.329.313-.48.738-.572 1.146-.093.415-.2 1.163.469 1.442.206.09.503.116.695.116Zm-.038-1.527c.113-.514.246-.946.586-.946.266 0 .286.322.167.837-.021.115-.118.54-.25.721-.092.134-.2.215-.32.215-.036 0-.249 0-.252-.325a2.27 2.27 0 0 1 .069-.502Zm3.1 1.46.038-.04c.055-.295.064-.365.184-.964.06-.284.184-.908.243-1.13.11-.053.217-.105.324-.105.246 0 .216.222.207.31-.01.15-.1.635-.194 1.052l-.058.27c-.045.198-.093.391-.136.588l.018.04c.503-.028.65-.028 1.08-.02l.052-.04c.075-.463.096-.586.237-1.259l.067-.31c.135-.604.203-.911.104-1.161-.11-.28-.37-.348-.603-.348-.154 0-.438.039-.69.167-.09.048-.18.104-.268.16l.077-.307-.041-.052c-.537.112-.66.127-1.155.199l-.038.028c-.06.492-.109.86-.322 1.827-.081.356-.166.716-.25 1.07l.023.046c.509-.028.66-.028 1.101-.02Zm3.693.02.22-1.099s.16-.69.17-.715c0 0 .05-.072.1-.1h.075c.698 0 1.486 0 2.104-.469.42-.32.708-.795.836-1.37.034-.142.058-.31.058-.478 0-.22-.043-.438-.167-.609-.315-.454-.943-.462-1.667-.466l-.357.004c-.927.012-1.3.008-1.452-.011l-.037.193-.332 1.587-.832 3.528c.81-.01 1.141-.01 1.28.006Zm.615-2.814.352-1.575.011-.082.005-.061.141.015.745.066c.288.114.406.41.324.794-.076.352-.298.648-.583.791-.234.121-.522.131-.818.131h-.191l.014-.08Zm2.199 1.363c-.094.41-.2 1.158.464 1.424.212.093.402.12.595.11.204-.01.393-.116.568-.268l-.047.188.03.04c.478-.021.626-.021 1.144-.017l.047-.037c.076-.458.147-.902.344-1.778.096-.42.191-.835.29-1.253l-.016-.046c-.535.102-.678.124-1.192.199l-.04.032-.015.125a.741.741 0 0 0-.375-.318c-.229-.093-.766.027-1.228.46-.325.31-.48.733-.57 1.14Zm1.123.025c.115-.505.246-.932.587-.932.216 0 .33.205.306.554l-.061.283c-.034.15-.071.299-.107.447-.037.102-.08.198-.126.262-.088.128-.297.208-.417.208-.034 0-.244 0-.252-.32-.001-.159.03-.322.07-.502Zm5.868-1.666-.042-.049c-.529.11-.625.128-1.111.196l-.036.036-.006.024-.001-.008c-.362.86-.352.674-.646 1.35l-.004-.082-.073-1.467-.047-.049c-.554.11-.567.128-1.08.196l-.04.036c-.005.018-.005.037-.008.058l.003.008c.064.336.049.261.113.793.03.26.07.523.1.78.05.432.078.644.14 1.302-.346.587-.428.81-.76 1.325l.002.005-.235.382c-.027.04-.05.068-.085.08a.344.344 0 0 1-.154.022h-.13l-.193.661.663.012c.389-.002.633-.189.765-.44l.416-.735H40.1l.043-.052c.28-.621 2.412-4.384 2.412-4.384Zm-6.991 8.682h-.281l1.04-3.54h.345l.11-.366.01.406c-.013.25.179.473.682.436h.582l.2-.681h-.218c-.127 0-.185-.033-.178-.103l-.01-.413h-1.078v.002c-.349.008-1.39.034-1.6.092-.256.068-.524.267-.524.267l.105-.365H33.74l-.21.724-1.054 3.595h-.205l-.2.678h2.008l-.067.225h.99l.065-.226h.278l.218-.73Zm-.824-2.821c-.162.046-.462.185-.462.185l.267-.905h.801l-.193.66s-.248.015-.413.06Zm.015 1.293s-.252.032-.417.07c-.164.052-.47.212-.47.212l.277-.942h.805l-.195.66Zm-.449 1.537h-.804l.233-.795h.801l-.23.795Zm1.936-2.197h1.158l-.166.555h-1.174l-.176.607h1.027l-.778 1.127a.322.322 0 0 1-.158.136.45.45 0 0 1-.208.062h-.285l-.196.664h.745c.388 0 .617-.181.785-.42l.534-.75.114.762a.357.357 0 0 0 .192.26c.075.038.152.104.26.114.117.005.202.009.258.009h.366l.22-.744h-.145c-.082 0-.225-.014-.25-.04-.024-.033-.024-.083-.037-.16l-.116-.764h-.476l.209-.256h1.171l.18-.607h-1.084l.169-.555h1.081l.2-.684h-3.223l-.197.684Zm-9.785 2.351.27-.926h1.111l.204-.688h-1.113l.17-.57h1.087l.201-.667h-2.72l-.197.667h.618l-.165.57h-.62l-.204.7h.617l-.36 1.225c-.049.162.023.224.068.3a.299.299 0 0 0 .199.149c.109.025.183.04.285.04h1.253l.223-.763-.555.079c-.108 0-.405-.014-.372-.116Zm.127-4.433-.281.524a.606.606 0 0 1-.164.219c-.043.027-.128.039-.251.039h-.147l-.197.67h.488c.235 0 .415-.088.501-.133.093-.05.117-.022.188-.093l.165-.147h1.524l.202-.697h-1.115l.195-.382h-1.108Zm2.25 4.447c-.026-.039-.007-.107.032-.248l.417-1.419h1.482c.216-.003.372-.006.473-.013a.95.95 0 0 0 .356-.124.675.675 0 0 0 .26-.246c.063-.09.167-.29.255-.596l.524-1.796-1.538.009s-.473.072-.682.151c-.21.089-.51.336-.51.336l.138-.492h-.95l-1.33 4.54a2.886 2.886 0 0 0-.086.38c-.002.083.102.165.17.227.079.062.197.052.31.062.118.01.287.015.52.015h.73l.224-.779-.654.064a.17.17 0 0 1-.141-.071Zm.718-2.625h1.556l-.099.319c-.014.007-.047-.016-.206.003h-1.347l.096-.322Zm.311-1.071h1.57l-.113.384s-.74-.007-.858.015c-.521.093-.826.38-.826.38l.227-.78Zm1.18 2.459a.172.172 0 0 1-.06.098c-.032.021-.084.029-.16.029H30.6l.013-.389h-.922l-.037 1.9c-.002.138.011.217.109.28.097.08.397.09.802.09h.578l.208-.711-.503.028-.167.01c-.023-.01-.045-.019-.07-.044-.02-.022-.056-.008-.05-.146l.004-.487.527-.022c.285 0 .407-.096.511-.187.1-.087.132-.187.169-.322l.088-.431h-.725l-.092.304Z" fill="#FEFEFE" />
            <rect height="31" rx="5.5" stroke="currentColor" class="stroke-line-3" width="55" x=".5" y=".5" />
          </svg>
          <svg class="w-8 h-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 32" width="56" height="32" fill="none">
            <path d="M19.648 15.984c0 2.074 1.629 3.683 3.725 3.683.592 0 1.1-.117 1.726-.411v-1.62c-.55.55-1.038.772-1.662.772-1.386 0-2.37-1.005-2.37-2.434 0-1.355 1.015-2.424 2.306-2.424.656 0 1.153.235 1.726.794v-1.62c-.604-.306-1.101-.433-1.694-.433-2.085 0-3.757 1.642-3.757 3.693ZM16.116 14.27c0 .382.242.584 1.068.89 1.566.572 2.03 1.08 2.03 2.2 0 1.366-1.003 2.317-2.434 2.317-1.047 0-1.809-.412-2.443-1.343l.89-.856c.316.612.845.94 1.501.94.614 0 1.069-.423 1.069-.995 0-.296-.138-.55-.413-.73-.138-.085-.412-.212-.951-.402-1.293-.465-1.736-.962-1.736-1.935 0-1.155.952-2.022 2.2-2.022.774 0 1.482.265 2.074.783l-.72.943c-.359-.402-.698-.572-1.11-.572-.593 0-1.025.338-1.025.783Z" fill="#231F20" />
            <path clip-rule="evenodd" d="M8.02 12.451H6v7.057h2.01c1.068 0 1.84-.252 2.518-.815a3.54 3.54 0 0 0 1.28-2.709c0-2.082-1.555-3.533-3.788-3.533Zm1.608 5.301c-.432.39-.994.561-1.883.561h-.37v-4.666h.37c.89 0 1.429.159 1.883.57.476.424.763 1.081.763 1.757 0 .677-.287 1.354-.763 1.778Z" fill="#231F20" fill-rule="evenodd" />
            <path d="M13.819 12.451h-1.377v7.057h1.377V12.45ZM34.13 12.451l1.882 4.74 1.906-4.74h1.492l-3.048 7.238h-.74l-2.995-7.238h1.503ZM40.033 19.508h3.903v-1.195h-2.528v-1.905h2.435v-1.195h-2.435v-1.566h2.528V12.45h-3.903v7.057Z" fill="#231F20" />
            <path clip-rule="evenodd" d="M46.889 12.451c1.587 0 2.497.762 2.497 2.083 0 1.08-.57 1.79-1.607 2L50 19.509h-1.693l-1.905-2.835h-.18v2.835h-1.374V12.45h2.04Zm-.666 3.249h.402c.879 0 1.345-.382 1.345-1.091 0-.687-.466-1.046-1.323-1.046h-.424V15.7Z" fill="#231F20" fill-rule="evenodd" />
            <path d="M29.302 19.758a3.754 3.754 0 1 0 0-7.508 3.754 3.754 0 0 0 0 7.508Z" fill="#F48120" />
            <path d="M56 20c-1.492 1.035-12.661 8.428-32 12h28.85c1.74 0 3.15-1.39 3.15-3.104V20Z" fill="#F47216" />
            <rect height="31" rx="5.5" stroke="currentColor" class="stroke-line-3" width="55" x=".5" y=".5" />
          </svg>
        </div>
      </div>
      <div class="relative">
        <div class="absolute inset-y-0 inset-s-0 flex items-center z-20 ps-3 cursor-pointer">
          <svg class="shrink-0 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
        </div>
        <label for="hs-pro-dacfcnl" class="hidden mb-2 text-sm font-medium text-foreground">
          Card number
        </label>
        <input id="hs-pro-dacfcnl" type="text" class="py-1.5 sm:py-2 pe-3 ps-9 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="Card number" value="">
      </div>

<div class="grid grid-cols-2 gap-x-2">
        <div>
          <label for="hs-pro-dacfexl" class="hidden mb-2 text-sm font-medium text-foreground">
            Expiration
          </label>
          <input id="hs-pro-dacfexl" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="Expiration" value="">
        </div>
        <div>
          <label for="hs-pro-dacfcvl" class="hidden mb-2 text-sm font-medium text-foreground">
            CVV
          </label>
          <input id="hs-pro-dacfcvl" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="CVV" value="">
        </div>
      </div>

<p class="inline-flex items-center gap-x-1 text-xs text-muted-foreground-1">
        <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
        This is a secure form
      </p>
    </div>

<div class="space-y-2">
      <label class="block mb-2 text-sm font-medium text-foreground">
        Billing address
      </label>

<div>
        <label for="hs-pro-dacfad1l" class="hidden mb-2 text-sm font-medium text-foreground">
          Address
        </label>
        <input id="hs-pro-dacfad1l" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="Street address" value="">
      </div>
      <div>
        <label for="hs-pro-dacfad2l" class="hidden mb-2 text-sm font-medium text-foreground">
          Address 2
        </label>
        <input id="hs-pro-dacfad2l" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="Apt or suite number" value="">
      </div>
      <div>
        <label for="hs-pro-dacfctl" class="hidden mb-2 text-sm font-medium text-foreground">
          City
        </label>
        <input id="hs-pro-dacfctl" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="City" value="">
      </div>
      <div class="grid grid-cols-2 gap-x-2">
        <div>
          <label for="hs-pro-dacfstl" class="hidden mb-2 text-sm font-medium text-foreground">
            State
          </label>
          <input id="hs-pro-dacfstl" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="State" value="">
        </div>
        <div>
          <label for="hs-pro-dacfzpl" class="hidden mb-2 text-sm font-medium text-foreground">
            Zip
          </label>
          <input id="hs-pro-dacfzpl" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="ZIP code" value="">
        </div>
      </div>

<div class="relative">
        <select  data-hs-select='{
            "placeholder": "Country",
            "hasSearch": true,
            "searchPlaceholder": "Country",
            "searchClasses": "block w-full sm:text-sm bg-transparent border-layer-line text-layer-foreground placeholder:text-muted-foreground-1 rounded-lg focus:border-primary-focus focus:ring-primary-focus py-1.5 sm:py-2 px-3",
            "searchWrapperClasses": "bg-select p-2 -mx-1 sticky top-0",
            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span data-icon></span><span class=\"text-foreground\" data-title></span></button>",
            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1.5 sm:py-2 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer text-foreground bg-transparent border border-layer-line ring-1 ring-transparent rounded-lg text-start sm:text-sm focus:outline-hidden focus:border-primary-focus focus:ring-primary",
            "dropdownClasses": "max-h-64 p-1 pt-0 space-y-0.5 z-80 w-full overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
            "dropdownPlacement": "top",
            "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
            "optionTemplate": "<div class=\"flex items-center w-full\"><div class=\"me-2\" data-icon></div><span data-title></span><span class=\"hidden hs-selected:block ms-auto\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
            "preventSearchFocus": false,
            "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>",
            "dropdownScope": "window",
            "viewport": "#null.id"
          }' class="hidden">
          <option value="">Choose</option>
          <option value="AF" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/af.png\" alt=\"Afghanistan\" />"}'>
            Afghanistan
          </option>
          <option value="AX" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ax.png\" alt=\"Aland Islands\" />"}'>
            Aland Islands
          </option>
          <option value="AL" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/al.png\" alt=\"Albania\" />"}'>
            Albania
          </option>
          <option value="DZ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dz.png\" alt=\"Algeria\" />"}'>
            Algeria
          </option>
          <option value="AS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/as.png\" alt=\"American Samoa\" />"}'>
            American Samoa
          </option>
          <option value="AD" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ad.png\" alt=\"Andorra\" />"}'>
            Andorra
          </option>
          <option value="AO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ao.png\" alt=\"Angola\" />"}'>
            Angola
          </option>
          <option value="AI" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ai.png\" alt=\"Anguilla\" />"}'>
            Anguilla
          </option>
          <option value="AG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ag.png\" alt=\"Antigua and Barbuda\" />"}'>
            Antigua and Barbuda
          </option>
          <option value="AR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ar.png\" alt=\"Argentina\" />"}'>
            Argentina
          </option>
          <option value="AM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/am.png\" alt=\"Armenia\" />"}'>
            Armenia
          </option>
          <option value="AW" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/aw.png\" alt=\"Aruba\" />"}'>
            Aruba
          </option>
          <option value="AU" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/au.png\" alt=\"Australia\" />"}'>
            Australia
          </option>
          <option value="AT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/at.png\" alt=\"Austria\" />"}'>
            Austria
          </option>
          <option value="AZ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/az.png\" alt=\"Azerbaijan\" />"}'>
            Azerbaijan
          </option>
          <option value="BS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bs.png\" alt=\"Bahamas\" />"}'>
            Bahamas
          </option>
          <option value="BH" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bh.png\" alt=\"Bahrain\" />"}'>
            Bahrain
          </option>
          <option value="BD" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bd.png\" alt=\"Bangladesh\" />"}'>
            Bangladesh
          </option>
          <option value="BB" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bb.png\" alt=\"Barbados\" />"}'>
            Barbados
          </option>
          <option value="BY" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/by.png\" alt=\"Belarus\" />"}'>
            Belarus
          </option>
          <option value="BE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/be.png\" alt=\"Belgium\" />"}'>
            Belgium
          </option>
          <option value="BZ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bz.png\" alt=\"Belize\" />"}'>
            Belize
          </option>
          <option value="BJ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bj.png\" alt=\"Benin\" />"}'>
            Benin
          </option>
          <option value="BM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bm.png\" alt=\"Bermuda\" />"}'>
            Bermuda
          </option>
          <option value="BT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bt.png\" alt=\"Bhutan\" />"}'>
            Bhutan
          </option>
          <option value="BO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bo.png\" alt=\"Bolivia (Plurinational State of)\" />"}'>
            Bolivia (Plurinational State of)
          </option>
          <option value="BQ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bq.png\" alt=\"Bonaire, Sint Eustatius and Saba\" />"}'>
            Bonaire, Sint Eustatius and Saba
          </option>
          <option value="BA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ba.png\" alt=\"Bosnia and Herzegovina\" />"}'>
            Bosnia and Herzegovina
          </option>
          <option value="BW" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bw.png\" alt=\"Botswana\" />"}'>
            Botswana
          </option>
          <option value="BR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/br.png\" alt=\"Brazil\" />"}'>
            Brazil
          </option>
          <option value="IO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/io.png\" alt=\"British Indian Ocean Territory\" />"}'>
            British Indian Ocean Territory
          </option>
          <option value="BN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bn.png\" alt=\"Brunei Darussalam\" />"}'>
            Brunei Darussalam
          </option>
          <option value="BG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bg.png\" alt=\"Bulgaria\" />"}'>
            Bulgaria
          </option>
          <option value="BF" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bf.png\" alt=\"Burkina Faso\" />"}'>
            Burkina Faso
          </option>
          <option value="BI" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bi.png\" alt=\"Burundi\" />"}'>
            Burundi
          </option>
          <option value="CV" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cv.png\" alt=\"Cabo Verde\" />"}'>
            Cabo Verde
          </option>
          <option value="KH" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kh.png\" alt=\"Cambodia\" />"}'>
            Cambodia
          </option>
          <option value="CM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cm.png\" alt=\"Cameroon\" />"}'>
            Cameroon
          </option>
          <option value="CA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ca.png\" alt=\"Canada\" />"}'>
            Canada
          </option>
          <option value="KY" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ky.png\" alt=\"Cayman Islands\" />"}'>
            Cayman Islands
          </option>
          <option value="CF" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cf.png\" alt=\"Central African Republic\" />"}'>
            Central African Republic
          </option>
          <option value="TD" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/td.png\" alt=\"Chad\" />"}'>
            Chad
          </option>
          <option value="CL" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cl.png\" alt=\"Chile\" />"}'>
            Chile
          </option>
          <option value="CN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cn.png\" alt=\"China\" />"}'>
            China
          </option>
          <option value="CX" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cx.png\" alt=\"Christmas Island\" />"}'>
            Christmas Island
          </option>
          <option value="CC" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cc.png\" alt=\"Cocos (Keeling) Islands\" />"}'>
            Cocos (Keeling) Islands
          </option>
          <option value="CO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/co.png\" alt=\"Colombia\" />"}'>
            Colombia
          </option>
          <option value="KM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/km.png\" alt=\"Comoros\" />"}'>
            Comoros
          </option>
          <option value="CK" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ck.png\" alt=\"Cook Islands\" />"}'>
            Cook Islands
          </option>
          <option value="CR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cr.png\" alt=\"Costa Rica\" />"}'>
            Costa Rica
          </option>
          <option value="HR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hr.png\" alt=\"Croatia\" />"}'>
            Croatia
          </option>
          <option value="CU" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cu.png\" alt=\"Cuba\" />"}'>
            Cuba
          </option>
          <option value="CW" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cw.png\" alt=\"Curaçao\" />"}'>
            Curaçao
          </option>
          <option value="CY" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cy.png\" alt=\"Cyprus\" />"}'>
            Cyprus
          </option>
          <option value="CZ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cz.png\" alt=\"Czech Republic\" />"}'>
            Czech Republic
          </option>
          <option value="CI" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ci.png\" alt=Côte dIvoire\" />"}'>
            Côte dIvoire
          </option>
          <option value="CD" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cd.png\" alt=\"Democratic Republic of the Congo\" />"}'>
            Democratic Republic of the Congo
          </option>
          <option value="DK" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dk.png\" alt=\"Denmark\" />"}'>
            Denmark
          </option>
          <option value="DJ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dj.png\" alt=\"Djibouti\" />"}'>
            Djibouti
          </option>
          <option value="DM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dm.png\" alt=\"Dominica\" />"}'>
            Dominica
          </option>
          <option value="DO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/do.png\" alt=\"Dominican Republic\" />"}'>
            Dominican Republic
          </option>
          <option value="EC" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ec.png\" alt=\"Ecuador\" />"}'>
            Ecuador
          </option>
          <option value="EG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/eg.png\" alt=\"Egypt\" />"}'>
            Egypt
          </option>
          <option value="SV" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sv.png\" alt=\"El Salvador\" />"}'>
            El Salvador
          </option>
          <option value="GB-ENG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"England\" />"}'>
            England
          </option>
          <option value="GQ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gq.png\" alt=\"Equatorial Guinea\" />"}'>
            Equatorial Guinea
          </option>
          <option value="ER" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/er.png\" alt=\"Eritrea\" />"}'>
            Eritrea
          </option>
          <option value="EE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ee.png\" alt=\"Estonia\" />"}'>
            Estonia
          </option>
          <option value="ET" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/et.png\" alt=\"Ethiopia\" />"}'>
            Ethiopia
          </option>
          <option value="FK" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fk.png\" alt=\"Falkland Islands\" />"}'>
            Falkland Islands
          </option>
          <option value="FO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fo.png\" alt=\"Faroe Islands\" />"}'>
            Faroe Islands
          </option>
          <option value="FM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fm.png\" alt=\"Federated States of Micronesia\" />"}'>
            Federated States of Micronesia
          </option>
          <option value="FJ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fj.png\" alt=\"Fiji\" />"}'>
            Fiji
          </option>
          <option value="FI" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fi.png\" alt=\"Finland\" />"}'>
            Finland
          </option>
          <option value="FR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fr.png\" alt=\"France\" />"}'>
            France
          </option>
          <option value="GF" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gf.png\" alt=\"French Guiana\" />"}'>
            French Guiana
          </option>
          <option value="PF" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pf.png\" alt=\"French Polynesia\" />"}'>
            French Polynesia
          </option>
          <option value="TF" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tf.png\" alt=\"French Southern Territories\" />"}'>
            French Southern Territories
          </option>
          <option value="GA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ga.png\" alt=\"Gabon\" />"}'>
            Gabon
          </option>
          <option value="GM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gm.png\" alt=\"Gambia\" />"}'>
            Gambia
          </option>
          <option value="GE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ge.png\" alt=\"Georgia\" />"}'>
            Georgia
          </option>
          <option value="DE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/de.png\" alt=\"Germany\" />"}'>
            Germany
          </option>
          <option value="GH" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gh.png\" alt=\"Ghana\" />"}'>
            Ghana
          </option>
          <option value="GI" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gi.png\" alt=\"Gibraltar\" />"}'>
            Gibraltar
          </option>
          <option value="GR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gr.png\" alt=\"Greece\" />"}'>
            Greece
          </option>
          <option value="GL" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gl.png\" alt=\"Greenland\" />"}'>
            Greenland
          </option>
          <option value="GD" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gd.png\" alt=\"Grenada\" />"}'>
            Grenada
          </option>
          <option value="GP" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gp.png\" alt=\"Guadeloupe\" />"}'>
            Guadeloupe
          </option>
          <option value="GU" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gu.png\" alt=\"Guam\" />"}'>
            Guam
          </option>
          <option value="GT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gt.png\" alt=\"Guatemala\" />"}'>
            Guatemala
          </option>
          <option value="GG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gg.png\" alt=\"Guernsey\" />"}'>
            Guernsey
          </option>
          <option value="GN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gn.png\" alt=\"Guinea\" />"}'>
            Guinea
          </option>
          <option value="GW" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gw.png\" alt=\"Guinea-Bissau\" />"}'>
            Guinea-Bissau
          </option>
          <option value="GY" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gy.png\" alt=\"Guyana\" />"}'>
            Guyana
          </option>
          <option value="HT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ht.png\" alt=\"Haiti\" />"}'>
            Haiti
          </option>
          <option value="VA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/va.png\" alt=\"Holy See\" />"}'>
            Holy See
          </option>
          <option value="HN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hn.png\" alt=\"Honduras\" />"}'>
            Honduras
          </option>
          <option value="HK" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hk.png\" alt=\"Hong Kong\" />"}'>
            Hong Kong
          </option>
          <option value="HU" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hu.png\" alt=\"Hungary\" />"}'>
            Hungary
          </option>
          <option value="IS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/is.png\" alt=\"Iceland\" />"}'>
            Iceland
          </option>
          <option value="IN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/in.png\" alt=\"India\" />"}'>
            India
          </option>
          <option value="ID" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/id.png\" alt=\"Indonesia\" />"}'>
            Indonesia
          </option>
          <option value="IR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ir.png\" alt=\"Iran (Islamic Republic of)\" />"}'>
            Iran (Islamic Republic of)
          </option>
          <option value="IQ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/iq.png\" alt=\"Iraq\" />"}'>
            Iraq
          </option>
          <option value="IE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ie.png\" alt=\"Ireland\" />"}'>
            Ireland
          </option>
          <option value="IM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/im.png\" alt=\"Isle of Man\" />"}'>
            Isle of Man
          </option>
          <option value="IL" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/il.png\" alt=\"Israel\" />"}'>
            Israel
          </option>
          <option value="IT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/it.png\" alt=\"Italy\" />"}'>
            Italy
          </option>
          <option value="JM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/jm.png\" alt=\"Jamaica\" />"}'>
            Jamaica
          </option>
          <option value="JP" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/jp.png\" alt=\"Japan\" />"}'>
            Japan
          </option>
          <option value="JE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/je.png\" alt=\"Jersey\" />"}'>
            Jersey
          </option>
          <option value="JO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/jo.png\" alt=\"Jordan\" />"}'>
            Jordan
          </option>
          <option value="KZ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kz.png\" alt=\"Kazakhstan\" />"}'>
            Kazakhstan
          </option>
          <option value="KE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ke.png\" alt=\"Kenya\" />"}'>
            Kenya
          </option>
          <option value="KI" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ki.png\" alt=\"Kiribati\" />"}'>
            Kiribati
          </option>
          <option value="KW" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kw.png\" alt=\"Kuwait\" />"}'>
            Kuwait
          </option>
          <option value="KG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kg.png\" alt=\"Kyrgyzstan\" />"}'>
            Kyrgyzstan
          </option>
          <option value="LA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/la.png\" alt=\"Laos\" />"}'>
            Laos
          </option>
          <option value="LV" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lv.png\" alt=\"Latvia\" />"}'>
            Latvia
          </option>
          <option value="LB" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lb.png\" alt=\"Lebanon\" />"}'>
            Lebanon
          </option>
          <option value="LS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ls.png\" alt=\"Lesotho\" />"}'>
            Lesotho
          </option>
          <option value="LR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lr.png\" alt=\"Liberia\" />"}'>
            Liberia
          </option>
          <option value="LY" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ly.png\" alt=\"Libya\" />"}'>
            Libya
          </option>
          <option value="LI" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/li.png\" alt=\"Liechtenstein\" />"}'>
            Liechtenstein
          </option>
          <option value="LT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lt.png\" alt=\"Lithuania\" />"}'>
            Lithuania
          </option>
          <option value="LU" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lu.png\" alt=\"Luxembourg\" />"}'>
            Luxembourg
          </option>
          <option value="MO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mo.png\" alt=\"Macau\" />"}'>
            Macau
          </option>
          <option value="MG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mg.png\" alt=\"Madagascar\" />"}'>
            Madagascar
          </option>
          <option value="MW" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mw.png\" alt=\"Malawi\" />"}'>
            Malawi
          </option>
          <option value="MY" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/my.png\" alt=\"Malaysia\" />"}'>
            Malaysia
          </option>
          <option value="MV" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mv.png\" alt=\"Maldives\" />"}'>
            Maldives
          </option>
          <option value="ML" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ml.png\" alt=\"Mali\" />"}'>
            Mali
          </option>
          <option value="MT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mt.png\" alt=\"Malta\" />"}'>
            Malta
          </option>
          <option value="MH" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mh.png\" alt=\"Marshall Islands\" />"}'>
            Marshall Islands
          </option>
          <option value="MQ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mq.png\" alt=\"Martinique\" />"}'>
            Martinique
          </option>
          <option value="MR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mr.png\" alt=\"Mauritania\" />"}'>
            Mauritania
          </option>
          <option value="MU" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mu.png\" alt=\"Mauritius\" />"}'>
            Mauritius
          </option>
          <option value="YT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/yt.png\" alt=\"Mayotte\" />"}'>
            Mayotte
          </option>
          <option value="MX" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mx.png\" alt=\"Mexico\" />"}'>
            Mexico
          </option>
          <option value="MD" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/md.png\" alt=\"Moldova\" />"}'>
            Moldova
          </option>
          <option value="MC" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mc.png\" alt=\"Monaco\" />"}'>
            Monaco
          </option>
          <option value="MN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mn.png\" alt=\"Mongolia\" />"}'>
            Mongolia
          </option>
          <option value="ME" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/me.png\" alt=\"Montenegro\" />"}'>
            Montenegro
          </option>
          <option value="MS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ms.png\" alt=\"Montserrat\" />"}'>
            Montserrat
          </option>
          <option value="MA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ma.png\" alt=\"Morocco\" />"}'>
            Morocco
          </option>
          <option value="MZ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mz.png\" alt=\"Mozambique\" />"}'>
            Mozambique
          </option>
          <option value="MM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mm.png\" alt=\"Myanmar\" />"}'>
            Myanmar
          </option>
          <option value="NA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/na.png\" alt=\"Namibia\" />"}'>
            Namibia
          </option>
          <option value="NR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nr.png\" alt=\"Nauru\" />"}'>
            Nauru
          </option>
          <option value="NP" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/np.png\" alt=\"Nepal\" />"}'>
            Nepal
          </option>
          <option value="NL" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nl.png\" alt=\"Netherlands\" />"}'>
            Netherlands
          </option>
          <option value="NC" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nc.png\" alt=\"New Caledonia\" />"}'>
            New Caledonia
          </option>
          <option value="NZ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nz.png\" alt=\"New Zealand\" />"}'>
            New Zealand
          </option>
          <option value="NI" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ni.png\" alt=\"Nicaragua\" />"}'>
            Nicaragua
          </option>
          <option value="NE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ne.png\" alt=\"Niger\" />"}'>
            Niger
          </option>
          <option value="NG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ng.png\" alt=\"Nigeria\" />"}'>
            Nigeria
          </option>
          <option value="NU" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nu.png\" alt=\"Niue\" />"}'>
            Niue
          </option>
          <option value="NF" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nf.png\" alt=\"Norfolk Island\" />"}'>
            Norfolk Island
          </option>
          <option value="KP" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kp.png\" alt=\"North Korea\" />"}'>
            North Korea
          </option>
          <option value="MK" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mk.png\" alt=\"North Macedonia\" />"}'>
            North Macedonia
          </option>
          <option value="GB-NIR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"Northern Ireland\" />"}'>
            Northern Ireland
          </option>
          <option value="MP" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mp.png\" alt=\"Northern Mariana Islands\" />"}'>
            Northern Mariana Islands
          </option>
          <option value="NO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/no.png\" alt=\"Norway\" />"}'>
            Norway
          </option>
          <option value="OM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/om.png\" alt=\"Oman\" />"}'>
            Oman
          </option>
          <option value="PK" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pk.png\" alt=\"Pakistan\" />"}'>
            Pakistan
          </option>
          <option value="PW" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pw.png\" alt=\"Palau\" />"}'>
            Palau
          </option>
          <option value="PA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pa.png\" alt=\"Panama\" />"}'>
            Panama
          </option>
          <option value="PG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pg.png\" alt=\"Papua New Guinea\" />"}'>
            Papua New Guinea
          </option>
          <option value="PY" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/py.png\" alt=\"Paraguay\" />"}'>
            Paraguay
          </option>
          <option value="PE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pe.png\" alt=\"Peru\" />"}'>
            Peru
          </option>
          <option value="PH" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ph.png\" alt=\"Philippines\" />"}'>
            Philippines
          </option>
          <option value="PN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pn.png\" alt=\"Pitcairn\" />"}'>
            Pitcairn
          </option>
          <option value="PL" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pl.png\" alt=\"Poland\" />"}'>
            Poland
          </option>
          <option value="PT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pt.png\" alt=\"Portugal\" />"}'>
            Portugal
          </option>
          <option value="PR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pr.png\" alt=\"Puerto Rico\" />"}'>
            Puerto Rico
          </option>
          <option value="QA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/qa.png\" alt=\"Qatar\" />"}'>
            Qatar
          </option>
          <option value="CG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cg.png\" alt=\"Republic of the Congo\" />"}'>
            Republic of the Congo
          </option>
          <option value="RO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ro.png\" alt=\"Romania\" />"}'>
            Romania
          </option>
          <option value="RU" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ru.png\" alt=\"Russia\" />"}'>
            Russia
          </option>
          <option value="RW" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/rw.png\" alt=\"Rwanda\" />"}'>
            Rwanda
          </option>
          <option value="RE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/re.png\" alt=\"Réunion\" />"}'>
            Réunion
          </option>
          <option value="BL" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bl.png\" alt=\"Saint Barthélemy\" />"}'>
            Saint Barthélemy
          </option>
          <option value="SH" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sh.png\" alt=\"Saint Helena, Ascension and Tristan da Cunha\" />"}'>
            Saint Helena, Ascension and Tristan da Cunha
          </option>
          <option value="KN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kn.png\" alt=\"Saint Kitts and Nevis\" />"}'>
            Saint Kitts and Nevis
          </option>
          <option value="LC" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lc.png\" alt=\"Saint Lucia\" />"}'>
            Saint Lucia
          </option>
          <option value="MF" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mf.png\" alt=\"Saint Martin\" />"}'>
            Saint Martin
          </option>
          <option value="PM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pm.png\" alt=\"Saint Pierre and Miquelon\" />"}'>
            Saint Pierre and Miquelon
          </option>
          <option value="VC" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vc.png\" alt=\"Saint Vincent and the Grenadines\" />"}'>
            Saint Vincent and the Grenadines
          </option>
          <option value="WS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ws.png\" alt=\"Samoa\" />"}'>
            Samoa
          </option>
          <option value="SM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sm.png\" alt=\"San Marino\" />"}'>
            San Marino
          </option>
          <option value="ST" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/st.png\" alt=\"Sao Tome and Principe\" />"}'>
            Sao Tome and Principe
          </option>
          <option value="SA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sa.png\" alt=\"Saudi Arabia\" />"}'>
            Saudi Arabia
          </option>
          <option value="GB-SCT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"Scotland\" />"}'>
            Scotland
          </option>
          <option value="SN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sn.png\" alt=\"Senegal\" />"}'>
            Senegal
          </option>
          <option value="RS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/rs.png\" alt=\"Serbia\" />"}'>
            Serbia
          </option>
          <option value="SC" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sc.png\" alt=\"Seychelles\" />"}'>
            Seychelles
          </option>
          <option value="SL" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sl.png\" alt=\"Sierra Leone\" />"}'>
            Sierra Leone
          </option>
          <option value="SG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sg.png\" alt=\"Singapore\" />"}'>
            Singapore
          </option>
          <option value="SX" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sx.png\" alt=\"Sint Maarten\" />"}'>
            Sint Maarten
          </option>
          <option value="SK" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sk.png\" alt=\"Slovakia\" />"}'>
            Slovakia
          </option>
          <option value="SI" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/si.png\" alt=\"Slovenia\" />"}'>
            Slovenia
          </option>
          <option value="SB" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sb.png\" alt=\"Solomon Islands\" />"}'>
            Solomon Islands
          </option>
          <option value="SO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/so.png\" alt=\"Somalia\" />"}'>
            Somalia
          </option>
          <option value="ZA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/za.png\" alt=\"South Africa\" />"}'>
            South Africa
          </option>
          <option value="GS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gs.png\" alt=\"South Georgia and the South Sandwich Islands\" />"}'>
            South Georgia and the South Sandwich Islands
          </option>
          <option value="KR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kr.png\" alt=\"South Korea\" />"}'>
            South Korea
          </option>
          <option value="SS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ss.png\" alt=\"South Sudan\" />"}'>
            South Sudan
          </option>
          <option value="ES" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/es.png\" alt=\"Spain\" />"}'>
            Spain
          </option>
          <option value="LK" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lk.png\" alt=\"Sri Lanka\" />"}'>
            Sri Lanka
          </option>
          <option value="PS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ps.png\" alt=\"State of Palestine\" />"}'>
            State of Palestine
          </option>
          <option value="SD" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sd.png\" alt=\"Sudan\" />"}'>
            Sudan
          </option>
          <option value="SR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sr.png\" alt=\"Suriname\" />"}'>
            Suriname
          </option>
          <option value="SJ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sj.png\" alt=\"Svalbard and Jan Mayen\" />"}'>
            Svalbard and Jan Mayen
          </option>
          <option value="SZ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sz.png\" alt=\"Swaziland\" />"}'>
            Swaziland
          </option>
          <option value="SE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/se.png\" alt=\"Sweden\" />"}'>
            Sweden
          </option>
          <option value="CH" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ch.png\" alt=\"Switzerland\" />"}'>
            Switzerland
          </option>
          <option value="SY" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sy.png\" alt=\"Syrian Arab Republic\" />"}'>
            Syrian Arab Republic
          </option>
          <option value="TW" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tw.png\" alt=\"Taiwan\" />"}'>
            Taiwan
          </option>
          <option value="TJ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tj.png\" alt=\"Tajikistan\" />"}'>
            Tajikistan
          </option>
          <option value="TZ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tz.png\" alt=\"Tanzania\" />"}'>
            Tanzania
          </option>
          <option value="TH" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/th.png\" alt=\"Thailand\" />"}'>
            Thailand
          </option>
          <option value="TL" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tl.png\" alt=\"Timor-Leste\" />"}'>
            Timor-Leste
          </option>
          <option value="TG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tg.png\" alt=\"Togo\" />"}'>
            Togo
          </option>
          <option value="TK" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tk.png\" alt=\"Tokelau\" />"}'>
            Tokelau
          </option>
          <option value="TO" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/to.png\" alt=\"Tonga\" />"}'>
            Tonga
          </option>
          <option value="TT" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tt.png\" alt=\"Trinidad and Tobago\" />"}'>
            Trinidad and Tobago
          </option>
          <option value="TN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tn.png\" alt=\"Tunisia\" />"}'>
            Tunisia
          </option>
          <option value="TR" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tr.png\" alt=\"Turkey\" />"}'>
            Turkey
          </option>
          <option value="TM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tm.png\" alt=\"Turkmenistan\" />"}'>
            Turkmenistan
          </option>
          <option value="TC" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tc.png\" alt=\"Turks and Caicos Islands\" />"}'>
            Turks and Caicos Islands
          </option>
          <option value="TV" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tv.png\" alt=\"Tuvalu\" />"}'>
            Tuvalu
          </option>
          <option value="UG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ug.png\" alt=\"Uganda\" />"}'>
            Uganda
          </option>
          <option value="UA" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ua.png\" alt=\"Ukraine\" />"}'>
            Ukraine
          </option>
          <option value="AE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ae.png\" alt=\"United Arab Emirates\" />"}'>
            United Arab Emirates
          </option>
          <option value="GB"  data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"United Kingdom\" />"}'>
            United Kingdom
          </option>
          <option value="UM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/um.png\" alt=\"United States Minor Outlying Islands\" />"}'>
            United States Minor Outlying Islands
          </option>
          <option value="US"  data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/us.png\" alt=\"United States of America\" />"}'>
            United States of America
          </option>
          <option value="UY" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/uy.png\" alt=\"Uruguay\" />"}'>
            Uruguay
          </option>
          <option value="UZ" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/uz.png\" alt=\"Uzbekistan\" />"}'>
            Uzbekistan
          </option>
          <option value="VU" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vu.png\" alt=\"Vanuatu\" />"}'>
            Vanuatu
          </option>
          <option value="VE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ve.png\" alt=\"Venezuela (Bolivarian Republic of)\" />"}'>
            Venezuela (Bolivarian Republic of)
          </option>
          <option value="VN" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vn.png\" alt=\"Vietnam\" />"}'>
            Vietnam
          </option>
          <option value="VG" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vg.png\" alt=\"Virgin Islands (British)\" />"}'>
            Virgin Islands (British)
          </option>
          <option value="VI" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vi.png\" alt=\"Virgin Islands (U.S.)\" />"}'>
            Virgin Islands (U.S.)
          </option>
          <option value="GB-WLS" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"Wales\" />"}'>
            Wales
          </option>
          <option value="WF" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/wf.png\" alt=\"Wallis and Futuna\" />"}'>
            Wallis and Futuna
          </option>
          <option value="EH" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/eh.png\" alt=\"Western Sahara\" />"}'>
            Western Sahara
          </option>
          <option value="YE" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ye.png\" alt=\"Yemen\" />"}'>
            Yemen
          </option>
          <option value="ZM" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/zm.png\" alt=\"Zambia\" />"}'>
            Zambia
          </option>
          <option value="ZW" data-hs-select-option='{
            "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/zw.png\" alt=\"Zimbabwe\" />"}'>
            Zimbabwe
          </option>
        </select>
      </div>
      
    </div>
  
    <div class="flex items-center">
      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-dacfsadch" checked>
      <label for="hs-pro-dacfsadch" class="ms-2 text-sm text-foreground">
        Set as default payment method
      </label>
    </div>
  </div>
  
</div>

Bank Account Form Pro

Payout form combines method radios, bank account inputs, and an optional primary-account checkbox.

Create a responsive UI block named "Bank Account Form" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/payment-method-forms/#bank-account-form. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/payment-method-forms
- Block ID: bank-account-form
- Source description: Payout form combines method radios, bank account inputs, and an optional primary-account checkbox.
- Preview iframe: https://preline.co/blocks/forms/payment-method-forms/iframes/pro/bank-account-form.html (repo path: blocks/forms/payment-method-forms/iframes/pro/bank-account-form.html)
- Source markup reference:
  - partials/pro/ecommerce-admin/cards/radio-checkbox-group-with-inputs.html
  - partials/pro/ecommerce-admin/sources/radio-checkbox-with-icon.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - Card wrapper is `p-5 space-y-5 flex flex-col bg-card border border-card-line shadow-2xs rounded-xl`; the preview centers it in a `max-w-3xl` column.
  - The top row pairs the label `Account type` with a right-aligned small link `What type of account should I choose?`.
  - Two radio cards sit in a `grid lg:grid-cols-2 gap-3 lg:gap-5`: `Individual` / `When you are selling as yourself.` then `Business` / `When you are selling as a business` (no trailing period); `Individual` is checked on load.
  - Each radio card hides its native input (`class="hidden"`), highlights via `has-checked:ring-2 has-checked:ring-primary-focus`, and shows the same user-circle icon.
  - Three text inputs follow in order - `Account holder name`, `Routing name`, `Account number` - and none of them carries a placeholder.
  - Helper text under each input reads `Enter the account holder's name exactly as it appears on bank statements.`, `Enter the routing number.`, and `Enter the account number. This can usually be found within the account details.`
  - The source markup stops after the third input: no submit/cancel buttons, no extra checkbox row, and no Preline JS plugins (fully static).

<div class="p-5 space-y-5 flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
  
  <div>
    <div class="flex flex-wrap justify-between items-center gap-x-3 mb-2">
      <label for="hs-pro-epati" class="block text-sm font-medium text-foreground">
        Account type
      </label>

<p>
        <a class="text-xs text-muted-foreground-2 decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">
          What type of account should I choose?
        </a>
      </p>
    </div>
    
    
    <div class="grid lg:grid-cols-2 gap-3 lg:gap-5">
      
      <label for="hs-pro-epati" class="py-3 px-4 flex text-sm bg-layer text-foreground rounded-xl cursor-pointer rounded-xl ring-1 ring-layer-line has-checked:ring-2 has-checked:ring-primary-focus">
        <input type="radio" id="hs-pro-epati" class="hidden" value="Individual" name="hs-pro-epat" checked>
        <svg class="shrink-0 size-4 mt-0.5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>
        <span class="grow ps-3">
          <span class="block font-medium">
            Individual
          </span>
          <span class="block text-muted-foreground-1">
            When you are selling as yourself.
          </span>
        </span>
      </label>

<label for="hs-pro-epatb" class="py-3 px-4 flex text-sm bg-layer text-foreground rounded-xl cursor-pointer rounded-xl ring-1 ring-layer-line has-checked:ring-2 has-checked:ring-primary-focus">
        <input type="radio" id="hs-pro-epatb" class="hidden" value="Business" name="hs-pro-epat" >
        <svg class="shrink-0 size-4 mt-0.5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>
        <span class="grow ps-3">
          <span class="block font-medium">
            Business
          </span>
          <span class="block text-muted-foreground-1">
            When you are selling as a business
          </span>
        </span>
      </label>
      
    </div>
    
  </div>

<div>
    <label for="hs-pro-epyahn" class="block mb-2 text-sm font-medium text-foreground">
      Account holder name
    </label>
    <input id="hs-pro-epyahn" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus">
    <p class="inline-flex items-center gap-x-1 text-xs text-muted-foreground-1">
      Enter the account holder's name exactly as it appears on bank statements.
    </p>
  </div>

<div>
    <label for="hs-pro-epyrn" class="block mb-2 text-sm font-medium text-foreground">
      Routing name
    </label>
    <input id="hs-pro-epyrn" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus">
    <p class="inline-flex items-center gap-x-1 text-xs text-muted-foreground-1">
      Enter the routing number.
    </p>
  </div>

<div>
    <label for="hs-pro-epyan" class="block mb-2 text-sm font-medium text-foreground">
      Account number
    </label>
    <input id="hs-pro-epyan" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus">
    <p class="inline-flex items-center gap-x-1 text-xs text-muted-foreground-1">
      Enter the account number. This can usually be found within the account details.
    </p>
  </div>
  
</div>

Open related payouts template

Payment Method Settings Form Pro

Settings card pairs payment-type tabs with card inputs and two stacked preference checkboxes.

Create a responsive UI block named "Payment Method Settings Form" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/payment-method-forms/#payment-method-settings-form. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/payment-method-forms
- Block ID: payment-method-settings-form
- Source description: Settings card pairs payment-type tabs with card inputs and two stacked preference checkboxes.
- Preview iframe: https://preline.co/blocks/forms/payment-method-forms/iframes/pro/payment-method-settings-form.html (repo path: blocks/forms/payment-method-forms/iframes/pro/payment-method-settings-form.html)
- Source markup reference:
  - partials/pro/ecommerce-admin/cards/payment-method.html
  - partials/pro/admin-dashboard/layouts-components/payment-method-toggle-tab.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - Card is `flex flex-col bg-card border border-card-line shadow-2xs rounded-xl` with a `py-3 px-5` header titled `Payment method` above a `p-5 space-y-5` body; the preview centers it in a `max-w-2xl` column.
  - The first control is a two-option segmented radio toggle (`p-0.5 w-full inline-flex bg-surface rounded-lg`, id `payment-options`): `Pay by Card` checked on load, and `Pay with PayPal` rendered `disabled` behind the multi-color PayPal logo SVG.
  - Fields sit in a `grid sm:grid-cols-2 gap-3 sm:gap-5`: `Card number` (leading credit-card icon, `ps-9`) on the left and a nested 2-col grid of `Expiration` and `CVV` on the right; none of the inputs has a placeholder.
  - A lock-icon footnote reads `This is a secure form`.
  - Two unchecked checkboxes close the card, in order: `Make this primary card` and `Save my payment details for future purchases`.
  - Fully static: no Preline JS plugin is wired to any control and there are no submit/cancel buttons.

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
  
  <div class="py-3 px-5 border-b border-card-header">
    <h2 class="inline-block font-semibold text-foreground">
      Payment method
    </h2>
  </div>

<div class="p-5 space-y-5 flex flex-col justify-between h-full">
    
      <div id="payment-options" class="p-0.5 w-full inline-flex bg-surface rounded-lg">
        <label for="payment-options-by-card" class="relative w-full inline-flex justify-center py-2 px-4">
          <input id="payment-options-by-card" name="payment-options" type="radio" class="peer absolute top-0 inset-e-0 size-full border-transparent bg-transparent bg-none text-transparent rounded-md cursor-pointer disabled:opacity-50 disabled:pointer-events-none before:absolute before:inset-0 before:size-full before:rounded-md focus:ring-offset-0 checked:before:bg-layer checked:before:shadow-2xs checked:bg-none focus:ring-transparent focus:before:bg-muted" checked>
          <span class="relative z-10 inline-flex justify-center items-center gap-x-2 text-sm font-medium text-foreground cursor-pointer peer-disabled:cursor-default">
            Pay by Card
          </span>
        </label>
        <label for="payment-options-with-paypal" class="relative w-full inline-flex justify-center py-2 px-4">
          <input id="payment-options-with-paypal" name="payment-options" type="radio" class="peer absolute top-0 inset-e-0 size-full border-transparent bg-transparent bg-none text-transparent rounded-md cursor-pointer disabled:opacity-50 disabled:pointer-events-none before:absolute before:inset-0 before:size-full before:rounded-md focus:ring-offset-0 checked:before:bg-layer checked:before:shadow-2xs checked:bg-none focus:ring-transparent focus:before:bg-muted" disabled>
          <span class="relative z-10 inline-flex justify-center items-center gap-x-2 text-sm font-medium text-foreground cursor-pointer peer-disabled:cursor-default peer-disabled:opacity-50 peer-disabled:pointer-events-none">
            <svg class="shrink-0 size-4" width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.6424 30.9152L11.197 27.3925L9.96162 27.3639H4.06256L8.16211 1.37005C8.17431 1.29063 8.21465 1.21823 8.27577 1.16607C8.33689 1.1139 8.41472 1.08543 8.49508 1.08586H18.4417C21.7438 1.08586 24.0227 1.773 25.2124 3.12927C25.7702 3.76551 26.1255 4.43039 26.2972 5.16208C26.4775 5.92981 26.4807 6.84707 26.3047 7.9658L26.2919 8.04745V8.76429L26.8497 9.08029C27.2755 9.29602 27.6583 9.58784 27.979 9.94134C28.4562 10.4853 28.7648 11.1767 28.8952 11.9964C29.0299 12.8394 28.9854 13.8426 28.7648 14.9783C28.5103 16.2847 28.0989 17.4225 27.5432 18.3536C27.053 19.1876 26.3938 19.91 25.608 20.4744C24.8699 20.9982 23.993 21.3959 23.0015 21.6504C22.0408 21.9007 20.9454 22.0268 19.7439 22.0268H18.9698C18.4163 22.0268 17.8786 22.2262 17.4566 22.5836C17.0352 22.9447 16.7556 23.4438 16.6677 23.9918L16.6093 24.3088L15.6295 30.5175L15.585 30.7455C15.5733 30.8176 15.5532 30.8537 15.5235 30.8781C15.4947 30.9016 15.4588 30.9147 15.4217 30.9152H10.6424Z" fill="#253B80"/>
              <path d="M27.3778 8.13017C27.3481 8.31998 27.3142 8.51403 27.276 8.71339C25.9643 15.4481 21.4766 17.7746 15.7451 17.7746H12.8268C12.1259 17.7746 11.5352 18.2836 11.426 18.975L9.93191 28.4508L9.5088 31.1368C9.49195 31.2434 9.49838 31.3523 9.52767 31.4561C9.55695 31.5599 9.60838 31.6562 9.67842 31.7382C9.74846 31.8202 9.83545 31.8861 9.9334 31.9313C10.0313 31.9765 10.1379 31.9999 10.2458 32H15.4217C16.0346 32 16.5552 31.5546 16.6517 30.9502L16.7026 30.6872L17.6771 24.5029L17.7397 24.1636C17.8351 23.557 18.3569 23.1116 18.9698 23.1116H19.7439C24.7586 23.1116 28.6842 21.0757 29.8316 15.184C30.3109 12.7228 30.0627 10.6677 28.7945 9.22239C28.3925 8.77528 27.9124 8.40516 27.3778 8.13017Z" fill="#179BD7"/>
              <path d="M26.0056 7.58299C25.5868 7.46183 25.1607 7.36727 24.7299 7.29986C23.8788 7.16905 23.0185 7.10629 22.1574 7.11217H14.3612C14.0645 7.11194 13.7776 7.21787 13.5521 7.41079C13.3267 7.60372 13.1778 7.87092 13.1322 8.1641L11.4737 18.6685L11.426 18.975C11.4777 18.6406 11.6473 18.3357 11.9043 18.1155C12.1612 17.8954 12.4885 17.7744 12.8268 17.7746H15.7451C21.4766 17.7746 25.9642 15.447 27.276 8.71339C27.3152 8.51403 27.3481 8.31998 27.3778 8.13017C27.0316 7.94865 26.6709 7.79648 26.2993 7.67525C26.2019 7.64293 26.104 7.61217 26.0056 7.58299Z" fill="#222D65"/>
              <path d="M13.1321 8.1641C13.1773 7.87084 13.3262 7.60351 13.5517 7.41068C13.7772 7.21785 14.0644 7.11231 14.3611 7.11323H22.1573C23.0809 7.11323 23.943 7.17368 24.7298 7.30092C25.2623 7.3846 25.7874 7.50976 26.3003 7.67525C26.6874 7.80356 27.0468 7.9552 27.3787 8.13017C27.769 5.64138 27.3756 3.94685 26.0299 2.41243C24.5464 0.7232 21.8688 0 18.4427 0H8.49601C7.79614 0 7.19913 0.508997 7.09097 1.20144L2.94795 27.4625C2.92865 27.5844 2.93599 27.7091 2.96947 27.8279C3.00294 27.9467 3.06176 28.0569 3.14187 28.1508C3.22198 28.2447 3.32149 28.3202 3.43354 28.3719C3.54559 28.4237 3.66753 28.4506 3.79097 28.4508H9.93181L11.4736 18.6685L13.1321 8.1641Z" fill="#253B80"/>
            </svg>
            Pay with PayPal
          </span>
        </label>
      </div>

<div class="space-y-2">
      
      <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
        
        <div>
          <label for="hs-pro-echpmcn" class="block mb-2 text-sm font-medium text-foreground">
            Card number
          </label>
          <div class="relative">
            <div class="absolute inset-y-0 inset-s-0 flex items-center z-20 ps-3 cursor-pointer">
              <svg class="shrink-0 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
            </div>
            <input id="hs-pro-echpmcn" type="text" class="py-1.5 sm:py-2 px-3 ps-9 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus">
          </div>
        </div>

<div class="grid grid-cols-2 gap-3 lg:gap-5">
          
          <div>
            <label for="hs-pro-echpmex" class="block mb-2 text-sm font-medium text-foreground">
              Expiration
            </label>
            <input id="hs-pro-echpmex" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus">
          </div>

<div>
            <label for="hs-pro-echpmcvv" class="block mb-2 text-sm font-medium text-foreground">
              CVV
            </label>
            <input id="hs-pro-echpmcvv" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus">
          </div>
          
        </div>
      </div>

<div class="space-y-2">
      
      <div class="flex items-center gap-x-1">
        <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-echpmpc">
        <label for="hs-pro-echpmpc" class="ms-1.5 text-sm text-muted-foreground-1">
          Make this primary card
        </label>
      </div>

<div class="flex items-center gap-x-1">
        <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-echpmsc">
        <label for="hs-pro-echpmsc" class="ms-1.5 text-sm text-muted-foreground-1">
          Save my payment details for future purchases
        </label>
      </div>
      
    </div>
  </div>
  
</div>