Tailwind CSS Transfer Forms Blocks

All Blocks
Application UI
Forms
Transfer Forms

Transfer Forms

Transfer forms for money transfer inputs, recipient quotes, and bank details workflows.

Transfer Form with Recipient Amount Quote Pro

Two stacked currency inputs are linked by a transfer arrow above preset amount chips.

Create a responsive UI block named "Transfer Form with Recipient Amount Quote" 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/transfer-forms/#transfer-form-with-recipient-amount-quote. 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/transfer-forms
- Block ID: transfer-form-with-recipient-amount-quote
- Source description: Two stacked currency inputs are linked by a transfer arrow above preset amount chips.
- Preview iframe: https://preline.co/blocks/forms/transfer-forms/iframes/pro/transfer-form-with-recipient-amount-quote.html (repo path: blocks/forms/transfer-forms/iframes/pro/transfer-form-with-recipient-amount-quote.html)
- Source markup reference:
  - partials/pro/payments-dashboard/forms/money-transfer-card-group-input.html
  - partials/pro/payments-dashboard/selects/currency-button-style.html
  - partials/pro/payments-dashboard/radio-and-checkbox/badge-style-button-with-icon.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.

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="relative flex flex-col gap-0.5">
                      
                      <div class="p-4 bg-layer border border-layer-line rounded-2xl">
                        <div>
                          <label for="hs-pro-pysmyp" class="block text-sm text-muted-foreground-1">
                            You pay
                          </label>

<div class="py-2 flex items-center gap-x-3">
                            <div class="grow">
                              <input id="hs-pro-pysmyp" type="text" class="p-0 block w-full bg-transparent border-transparent rounded-0 text-4xl text-foreground placeholder:text-muted-foreground focus:border-transparent focus:ring-0 focus:placeholder:text-foreground focus:text-foreground [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none" placeholder="0"  autofocus>
                            </div>
        
                            <div class="min-w-32 text-end">
                              <label class="sr-only">
                                Currency
                              </label>
          
                              
                              <div class="relative inline-block">
                                <select  data-hs-select='{
                                    "placeholder": "Choose a currency",
                                    "hasSearch": true,
                                    "searchPlaceholder": "Type a currency",
                                    "searchClasses": "block py-1.5 sm:py-2 px-3 w-full sm:text-sm bg-transparent border-layer-line rounded-lg text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus",
                                    "searchWrapperClasses": "bg-select p-2 -mx-1 sticky top-0",
                                    "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"flex\" data-icon></span><span class=\"text-sm text-foreground\" data-title></span></button>",
                                    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 ps-1.5 pe-7 flex items-center gap-x-1.5 text-nowrap cursor-pointer bg-layer border border-layer-line rounded-full text-start text-sm sm:text-base hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus",
                                    "dropdownClasses": "z-80 inset-e-0 w-72 max-h-72 p-1 pt-0 space-y-0.5 z-50 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",
                                    "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-lg focus:outline-hidden focus:bg-select-item-focus",
                                    "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"shrink-0 me-2\" data-icon></div><div class=\"grow\"><div class=\"flex justify-between items-center gap-x-3\"><div class=\"text-foreground\" data-title></div><div class=\"text-muted-foreground-1\" data-description></div></div></div></div></div>",
                                    "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>",
                                    "preventSearchFocus": "@@input1.currencySelect.preventSearchFocus"
                                  }' class="hidden">
                                  <option value="">Choose</option>
                                  <option selected value="USD" data-hs-select-option='{
                                    "description": "United States Dollar",
                                    "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/us.png\" alt=\"United States Dollar\" />"}'>
                                    USD
                                  </option>
                                  <option  value="GBP" data-hs-select-option='{
                                    "description": "British Pound",
                                    "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"British Pound\" />"}'>
                                    GBP
                                  </option>
                                  <option  value="EURO" data-hs-select-option='{
                                    "description": "EUR",
                                    "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/eu.png\" alt=\"EUR\" />"}'>
                                    EURO
                                  </option>
                                </select>
                              </div>
                              
                            </div>
                          </div>
                        </div>
                      </div>

<div class="h-0">
                        <div class="-mt-6">
                          <button type="button" class="relative z-10 flex shrink-0 justify-center items-center size-12 mx-auto bg-surface border-3 border-layer text-layer-foreground rounded-full hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus">
                            <svg class="shrink-0 size-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"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                          </button>
                        </div>
                      </div>

<div class="p-4 flex items-center gap-x-3 bg-surface rounded-2xl">
                        <div>
                          <label for="hs-pro-pysmrg" class="block text-sm text-muted-foreground-1">
                            Recipient gets
                          </label>

<div class="py-2 flex items-center gap-x-3">
                            <div class="grow">
                              <input id="hs-pro-pysmrg" type="text" class="p-0 block w-full bg-transparent border-transparent rounded-0 text-4xl text-foreground placeholder:text-muted-foreground focus:border-transparent focus:ring-0 focus:placeholder:text-foreground focus:text-foreground [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none" placeholder="0"  >
                            </div>
        
                            <div class="min-w-32 text-end">
                              <label class="sr-only">
                                Currency
                              </label>
          
                              
                              <div class="relative inline-block">
                                <select  data-hs-select='{
                                    "placeholder": "Choose a currency",
                                    "hasSearch": true,
                                    "searchPlaceholder": "Type a currency",
                                    "searchClasses": "block py-1.5 sm:py-2 px-3 w-full sm:text-sm bg-transparent border-layer-line rounded-lg text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus",
                                    "searchWrapperClasses": "bg-select p-2 -mx-1 sticky top-0",
                                    "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"flex\" data-icon></span><span class=\"text-sm text-foreground\" data-title></span></button>",
                                    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 ps-1.5 pe-7 flex items-center gap-x-1.5 text-nowrap cursor-pointer bg-layer border border-layer-line rounded-full text-start text-sm sm:text-base hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus",
                                    "dropdownClasses": "z-80 inset-e-0 w-72 max-h-72 p-1 pt-0 space-y-0.5 z-50 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",
                                    "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-lg focus:outline-hidden focus:bg-select-item-focus",
                                    "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"shrink-0 me-2\" data-icon></div><div class=\"grow\"><div class=\"flex justify-between items-center gap-x-3\"><div class=\"text-foreground\" data-title></div><div class=\"text-muted-foreground-1\" data-description></div></div></div></div></div>",
                                    "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>",
                                    "preventSearchFocus": "@@input2.currencySelect.preventSearchFocus"
                                  }' class="hidden">
                                  <option value="">Choose</option>
                                  <option selected value="USD" data-hs-select-option='{
                                    "description": "United States Dollar",
                                    "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/us.png\" alt=\"United States Dollar\" />"}'>
                                    USD
                                  </option>
                                  <option  value="GBP" data-hs-select-option='{
                                    "description": "British Pound",
                                    "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"British Pound\" />"}'>
                                    GBP
                                  </option>
                                  <option  value="EURO" data-hs-select-option='{
                                    "description": "EUR",
                                    "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/eu.png\" alt=\"EUR\" />"}'>
                                    EURO
                                  </option>
                                </select>
                              </div>
                              
                            </div>
                          </div>
                        </div>
                      </div>

<div class="mt-3 flex flex-wrap gap-2">
                        
                        <label for="hs-pro-pymtmdp10" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
                        has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
                        dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
                        has-disabled:pointer-events-none
                        has-disabled:text-muted-foreground/30">
                          <input type="radio" id="hs-pro-pymtmdp10" class="hidden peer" name="hs-pro-pymtmdp" >
                          <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                            <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                          </span>
                          <span class="block">
                            10 USD
                          </span>
                        </label>

<label for="hs-pro-pymtmdp25" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
                        has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
                        dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
                        has-disabled:pointer-events-none
                        has-disabled:text-muted-foreground/30">
                          <input type="radio" id="hs-pro-pymtmdp25" class="hidden peer" name="hs-pro-pymtmdp" >
                          <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                            <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                          </span>
                          <span class="block">
                            25 USD
                          </span>
                        </label>

<label for="hs-pro-pymtmdp50" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
                        has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
                        dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
                        has-disabled:pointer-events-none
                        has-disabled:text-muted-foreground/30">
                          <input type="radio" id="hs-pro-pymtmdp50" class="hidden peer" name="hs-pro-pymtmdp" >
                          <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                            <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                          </span>
                          <span class="block">
                            50 USD
                          </span>
                        </label>

<label for="hs-pro-pymtmdp100" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
                        has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
                        dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
                        has-disabled:pointer-events-none
                        has-disabled:text-muted-foreground/30">
                          <input type="radio" id="hs-pro-pymtmdp100" class="hidden peer" name="hs-pro-pymtmdp" >
                          <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                            <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                          </span>
                          <span class="block">
                            100 USD
                          </span>
                        </label>
                        
                      </div>
                      
                    </div>

Open related send calculator template

Transfer Amount Form with Quick Amount Buttons Pro

Single currency amount field sits above preset transfer chips in one compact card group.

Create a responsive UI block named "Transfer Amount Form with Quick Amount Buttons" 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/transfer-forms/#transfer-amount-form-with-quick-amount-buttons. 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/transfer-forms
- Block ID: transfer-amount-form-with-quick-amount-buttons
- Source description: Single currency amount field sits above preset transfer chips in one compact card group.
- Preview iframe: https://preline.co/blocks/forms/transfer-forms/iframes/pro/transfer-amount-form-with-quick-amount-buttons.html (repo path: blocks/forms/transfer-forms/iframes/pro/transfer-amount-form-with-quick-amount-buttons.html)
- Source markup reference:
  - partials/pro/payments-dashboard/forms/money-transfer-card-group-input.html
  - partials/pro/payments-dashboard/selects/currency-button-style.html
  - partials/pro/payments-dashboard/radio-and-checkbox/badge-style-button-with-icon.html

Open related request amount template

Recipient Bank Details Form with Transfer Method Tabs Pro

Top-level recipient options lead into tabbed ACH, Wire, and SWIFT bank detail forms.

Create a responsive UI block named "Recipient Bank Details Form with Transfer Method 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/transfer-forms/#recipient-bank-details-form-with-transfer-method-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/transfer-forms
- Block ID: recipient-bank-details-form-with-transfer-method-tabs
- Source description: Top-level recipient options lead into tabbed ACH, Wire, and SWIFT bank detail forms.
- Preview iframe: https://preline.co/blocks/forms/transfer-forms/iframes/pro/recipient-bank-details-form-with-transfer-method-tabs.html (repo path: blocks/forms/transfer-forms/iframes/pro/recipient-bank-details-form-with-transfer-method-tabs.html)
- Source markup reference:
  - partials/pro/payments-dashboard/forms/recipient-bank-details-listing.html
  - partials/pro/payments-dashboard/sources/tabs-center-aligned-with-checkbox.html
  - partials/pro/admin-dashboard/sources/tab-headless.html
  - partials/pro/payments-dashboard/forms/bank-details.html
  - partials/pro/payments-dashboard/layouts-components/alert-gray-bg-with-yellow-bg-icon.html
  - partials/pro/payments-dashboard/layouts-components/footer-button-group.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.
- Source content inventory (from the source markup):
  - Top level is exactly two full-width card tabs in a `flex w-full gap-3` nav: `I'll add them now myself` (active on load) then `My recipient will add them later`; each card is `py-6 px-4 w-full relative bg-muted-active border border-transparent rounded-xl` with a `size-7` outline icon above the title and a `size-5` primary circular check badge pinned top-inline-end that is scaled/faded to 0 until the tab is active.
  - Inside the first panel: heading `Recipient's bank details` next to a bank icon, then a pill tab bar `p-0.5 inline-flex bg-layer border border-layer-line rounded-full` holding exactly three rounded-full buttons in order `ACH`, `Wire`, `SWIFT`; `ACH` is active on load and the `Wire` and `SWIFT` panels carry `hidden`.
  - ACH panel field labels in order: `Email`, `Full name of the account holder`, `ACH routing number`, `Account number`, then an `Account type` radio group rendered as a `grid grid-cols-2 gap-3` of two bordered label cards `Checking` and `Savings` with neither preselected. Wire panel: `Full name of the account holder`, `Fedwire routing number`, `Account number`, same `Account type` pair. SWIFT panel: `Full name of the account holder`, `SWIFT / BIC code`, `IBAN / Account number` and no radio group.
  - The Wire panel opens with a `p-5 bg-surface rounded-xl` alert whose `size-10 bg-yellow-400` round icon precedes the text `The recipient's bank will charge an additional $5 fee for incoming wire transfers.`; its `Alert` heading is `sr-only`.
  - After a `mt-10 pt-10 border-t border-line-2` divider comes a second heading `Recipient address` with a house icon, a searchable country select (placeholder `Choose a country`, search placeholder `Country`, United States preselected with its flag), then `City`, `Recipient address`, `ZIP code`.
  - The `My recipient will add them later` panel (hidden on load) contains one alert with `sr-only` title `We'll email recipient` and the body `Enter the recipient's email address in the provided field. We'll email them to request their bank details after you've completed the transfer. If they don't respond, the money will be refunded to you.`, then only two fields: `Recipient's email` and `Full name of the account holder`.
  - The block ends with a stacked `flex flex-col gap-y-2` button group: full-width primary `Continue` above a transparent-border link-colored `Go back` that leads with a chevron-left icon.
  - Every text input is empty on load with no placeholder and shares `py-3 px-4 block w-full bg-layer border-layer-line rounded-xl`; both tab layers are wired with `data-hs-tab` / `aria-controls` (Preline HSTabs) and the country control is a `data-hs-select` HSSelect - there is no chart, modal, or dropdown menu in this block.

<div class="flex flex-col gap-y-8">
  
  <nav class="flex w-full gap-3" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
    <button type="button" class="hs-tab-active:bg-layer hs-tab-active:border-layer-line py-6 px-4 w-full relative bg-muted-active border border-transparent rounded-xl disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden active" id="hs-pro-tabs-pystseiktbd-item-add-myself" aria-selected="true" data-hs-tab="#hs-pro-tabs-pystseiktbd-add-myself" aria-controls="hs-pro-tabs-pystseiktbd-add-myself" role="tab" >
      <span class="hs-tab-active:opacity-100 hs-tab-active:scale-100 opacity-0 scale-0 transition-all duration-200 absolute top-3 inset-e-3">
        <span class="size-5 flex shrink-0 justify-center items-center bg-primary border border-primary-line text-primary-foreground rounded-full">
          <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="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
        </span>
      </span>
      <span class="block mb-2">
        <svg class="shrink-0 size-7 mx-auto text-foreground" 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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><polyline points="16 11 18 13 22 9"/></svg>
      </span>
      <span class="block mb-1 font-medium text-sm text-foreground">
        I'll add them now myself
      </span>
    </button>
    <button type="button" class="hs-tab-active:bg-layer hs-tab-active:border-layer-line py-6 px-4 w-full relative bg-muted-active border border-transparent rounded-xl disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-pystseiktbd-item-add-later" aria-selected="false" data-hs-tab="#hs-pro-tabs-pystseiktbd-add-later" aria-controls="hs-pro-tabs-pystseiktbd-add-later" role="tab" >
      <span class="hs-tab-active:opacity-100 hs-tab-active:scale-100 opacity-0 scale-0 transition-all duration-200 absolute top-3 inset-e-3">
        <span class="size-5 flex shrink-0 justify-center items-center bg-primary border border-primary-line text-primary-foreground rounded-full">
          <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="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
        </span>
      </span>
      <span class="block mb-2">
        <svg class="shrink-0 size-7 mx-auto text-foreground" 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"><polyline points="15 17 20 12 15 7"/><path d="M4 18v-2a4 4 0 0 1 4-4h12"/></svg>
      </span>
      <span class="block mb-1 font-medium text-sm text-foreground">
        My recipient will add them later
      </span>
    </button>
  </nav>

<div id="hs-pro-tabs-pystseiktbd-add-myself" role="tabpanel" aria-labelledby="hs-pro-tabs-pystseiktbd-item-add-myself">
    
    <div class="mb-5 flex items-center gap-x-2">
      <svg class="shrink-0 size-6 text-muted-foreground-2" 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"><line x1="3" x2="21" y1="22" y2="22"/><line x1="6" x2="6" y1="18" y2="11"/><line x1="10" x2="10" y1="18" y2="11"/><line x1="14" x2="14" y1="18" y2="11"/><line x1="18" x2="18" y1="18" y2="11"/><polygon points="12 2 20 7 4 7"/></svg>
      
      <h2 class="text-sm text-foreground">
        Recipient's bank details
      </h2>
    </div>

<div class="mb-4 sm:mb-6">
      
      <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 hs-tab-active:focus:text-foreground 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 focus:text-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden active" id="hs-pro-tabs-pystse-item-ach" aria-selected="true" data-hs-tab="#hs-pro-tabs-pystse-ach" aria-controls="hs-pro-tabs-pystse-ach" role="tab" >
          ACH
        </button>
        <button type="button" class="hs-tab-active:bg-muted-active hs-tab-active:focus:bg-muted-focus hs-tab-active:focus:text-foreground 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 focus:text-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-pystse-item-wire" aria-selected="false" data-hs-tab="#hs-pro-tabs-pystse-wire" aria-controls="hs-pro-tabs-pystse-wire" role="tab" >
          Wire
        </button>
        <button type="button" class="hs-tab-active:bg-muted-active hs-tab-active:focus:bg-muted-focus hs-tab-active:focus:text-foreground 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 focus:text-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-pystse-item-swift" aria-selected="false" data-hs-tab="#hs-pro-tabs-pystse-swift" aria-controls="hs-pro-tabs-pystse-swift" role="tab" >
          SWIFT
        </button>
      </nav>
      
    </div>

<div id="hs-pro-tabs-pystse-ach" role="tabpanel" aria-labelledby="hs-pro-tabs-pystse-item-ach">
      <div class="flex flex-col gap-y-4 sm:gap-y-6">

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

<div>
          <label for="hs-pro-pystseachfn" class="block mb-2 text-sm text-foreground">
            Full name of the account holder
          </label>

<div>
          <label for="hs-pro-pystseachfwrn" class="block mb-2 text-sm text-foreground">
            ACH routing number
          </label>

<div>
          <label for="hs-pro-pystseachan" class="block mb-2 text-sm text-foreground">
            Account number
          </label>

<div>
          <span class="block mb-2 text-sm text-foreground">
            Account type
          </span>

<div class="grid grid-cols-2 gap-3">
            
            <label for="hs-pro-pystseachatch" class="py-3 px-4 w-full flex items-center gap-x-2 bg-layer border border-layer-line rounded-xl cursor-pointer ring-1 ring-transparent hover:border-primary-hover hover:ring-primary-hoveer focus:border-primary-focus focus:ring-primary-focus">
              <input type="radio" name="hs-pro-pystseachat" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full 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-pystseachatch"  >
              <span class="text-sm sm:text-base text-foreground">Checking</span>
            </label>

<label for="hs-pro-pystseachatsv" class="py-3 px-4 w-full flex items-center gap-x-2 bg-layer border border-layer-line rounded-xl cursor-pointer ring-1 ring-transparent hover:border-primary-hover hover:ring-primary-hoveer focus:border-primary-focus focus:ring-primary-focus">
              <input type="radio" name="hs-pro-pystseachat" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full 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-pystseachatsv"  >
              <span class="text-sm sm:text-base text-foreground">Savings</span>
            </label>
            
          </div>
        </div>
        
      </div>
    </div>

<div id="hs-pro-tabs-pystse-wire" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-pystse-item-wire">
      <div class="flex flex-col gap-y-4 sm:gap-y-6">
        
        <div class="p-5 bg-surface rounded-xl" role="alert" tabindex="-1" aria-labelledby="hs-bordered-success-style-label">
          <div class="flex gap-x-4">
            <span class="flex shrink-0 justify-center items-center size-10 bg-yellow-400 text-inverse rounded-full">
              <svg class="shrink-0 size-7" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0z"/></svg>
            </span>

<div class="grow">
              <h3 id="hs-bordered-success-style-label" class="sr-only">
                Alert
              </h3>
              <p class="text-muted-foreground-2">
                The recipient's bank will charge an additional $5 fee for incoming wire transfers.
              </p>
            </div>
          </div>
        </div>

<div>
            <label for="hs-pro-pystsewirefn" class="block mb-2 text-sm text-foreground">
              Full name of the account holder
            </label>

<div>
            <label for="hs-pro-pystsewirefwrn" class="block mb-2 text-sm text-foreground">
              Fedwire routing number
            </label>

<div>
            <label for="hs-pro-pystsewirean" class="block mb-2 text-sm text-foreground">
              Account number
            </label>

<div>
            <span class="block mb-2 text-sm text-foreground">
              Account type
            </span>

<div class="grid grid-cols-2 gap-3">
              
              <label for="hs-pro-pystsewireatch" class="py-3 px-4 w-full flex items-center gap-x-2 bg-layer border border-layer-line rounded-xl cursor-pointer ring-1 ring-transparent hover:border-primary-hover hover:ring-primary-hoveer focus:border-primary-focus focus:ring-primary-focus">
                <input type="radio" name="hs-pro-pystsewireat" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full 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-pystsewireatch"  >
                <span class="text-sm sm:text-base text-foreground">Checking</span>
              </label>

<label for="hs-pro-pystsewireatsv" class="py-3 px-4 w-full flex items-center gap-x-2 bg-layer border border-layer-line rounded-xl cursor-pointer ring-1 ring-transparent hover:border-primary-hover hover:ring-primary-hoveer focus:border-primary-focus focus:ring-primary-focus">
                <input type="radio" name="hs-pro-pystsewireat" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full 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-pystsewireatsv"  >
                <span class="text-sm sm:text-base text-foreground">Savings</span>
              </label>
              
            </div>
          </div>
          
        </div>
      </div>
    </div>

<div id="hs-pro-tabs-pystse-swift" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-pystse-item-swift">
      <div class="flex flex-col gap-y-4 sm:gap-y-6">

<div>
          <label for="hs-pro-pystseswiftfn" class="block mb-2 text-sm text-foreground">
            Full name of the account holder
          </label>

<div>
          <label for="hs-pro-pystseswiftfwrn" class="block mb-2 text-sm text-foreground">
            SWIFT / BIC code
          </label>

<div>
          <label for="hs-pro-pystseswiftan" class="block mb-2 text-sm text-foreground">
            IBAN / Account number
          </label>

<div class="mt-10 pt-10 border-t border-line-2">
      
      <div class="mb-5 flex items-center gap-x-2">
        <svg class="shrink-0 size-6 text-muted-foreground-2" 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="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
        
        <h2 class="text-sm text-foreground">
          Recipient address
        </h2>
      </div>
      
      
      <div class="flex flex-col gap-y-4 sm:gap-y-6">

<div>
          <label class="block mb-2 text-sm text-foreground">
            Country
          </label>
    
          
          <div class="relative">
            <select data-hs-select='{
                "placeholder": "Choose a country",
                "hasSearch": true,
                "searchPlaceholder": "Country",
                "searchClasses": "block py-1.5 sm:py-2 px-3 w-full sm:text-sm bg-transparent border-layer-line rounded-lg text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus",
                "searchWrapperClasses": "bg-select p-2 -mx-1 sticky top-0",
                "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"flex\" 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-3 ps-4 pe-9 flex items-center gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line rounded-xl text-start text-sm sm:text-base ring-1 ring-transparent hover:border-primary-hover hover:ring-primary-hover focus:outline-hidden focus:ring-primary-focus",
                "dropdownClasses": "z-80 max-h-72 p-1 pt-0 space-y-0.5 z-50 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",
                "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-lg focus:outline-hidden focus:bg-select-item-focus",
                "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=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>",
                "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"shrink-0 me-2\" data-icon></div><div class=\"text-foreground\" data-title></div></div></div>"
              }' class="hidden">
              <option value="">Choose</option>
              <option value="AF" data-hs-select-option='{
                "icon": "<img class=\"inline-block shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 selected value="US" data-hs-select-option='{
                "icon": "<img class=\"inline-block shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 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 shrink-0 size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/zw.png\" alt=\"Zimbabwe\" />"}'>
                Zimbabwe
              </option>
            </select>
          </div>
          
        </div>

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

<div>
          <label for="hs-pro-pystmra" class="block mb-2 text-sm text-foreground">
            Recipient address
          </label>

<div>
          <label for="hs-pro-pystmzc" class="block mb-2 text-sm text-foreground">
            ZIP code
          </label>

<div id="hs-pro-tabs-pystseiktbd-add-later" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-pystseiktbd-item-add-later">
    <div class="flex flex-col gap-y-4 sm:gap-y-6">
      
      <div class="p-5 bg-surface rounded-xl" role="alert" tabindex="-1" aria-labelledby="hs-pro-pystmawer-label">
        <div class="flex gap-x-4">
          <span class="flex shrink-0 justify-center items-center size-10 bg-yellow-400 text-inverse rounded-full">
            <svg class="shrink-0 size-7" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0z"/></svg>
          </span>

<div class="grow">
            <h3 id="hs-pro-pystmawer-label" class="sr-only">
              We'll email recipient
            </h3>
            <p class="text-muted-foreground-2">
              Enter the recipient's email address in the provided field. We'll email them to request their bank details after you've completed the transfer. If they don't respond, the money will be refunded to you.
            </p>
          </div>
        </div>
      </div>

<div>
          <label for="hs-pro-pystseiktbdrem" class="block mb-2 text-sm text-foreground">
            Recipient's email
          </label>

<div>
          <label for="hs-pro-pystsealfn" class="block mb-2 text-sm text-foreground">
            Full name of the account holder
          </label>

<div class="flex flex-col gap-y-2">
    <a class="py-3 px-3 w-full inline-flex justify-center items-center gap-x-1.5 font-medium rounded-xl bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" href="../../../templates/payments/payments-dashboard/send-calculator.html">
      Continue
    </a>