Tailwind CSS Billing & Upgrade Forms Blocks

All Blocks
Application UI
Forms
Billing & Upgrade Forms

Billing & Upgrade Forms

Billing and upgrade forms for gifting plans, upgrading subscriptions, and setting up team billing accounts.

Gift Pro Purchase Form Pro

Compact gifting form combines invite inputs, billing-period tabs, plan radios, and a checkout button.

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

<div class="p-4 space-y-6">
    
    <div class="pb-6 border-b border-line-2 flex items-center gap-x-2">
      <input type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="Add name or emails">

<nav  class="inline-flex gap-1 w-full p-1 relative bg-surface rounded-full" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
      <button type="button" class="hs-tab-active:bg-layer hs-tab-active:shadow-sm hs-tab-active:text-layer-foreground py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm text-layer-foreground rounded-full hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-dgpro-item-one-month" aria-selected="false" data-hs-tab="#hs-pro-tabs-dgpro-one-month" aria-controls="hs-pro-tabs-dgpro-one-month" role="tab" >
        1 Month
      </button>
      <button type="button" class="hs-tab-active:bg-layer hs-tab-active:shadow-sm hs-tab-active:text-layer-foreground py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm text-layer-foreground rounded-full hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden active" id="hs-pro-tabs-dgpro-item-one-year" aria-selected="true" data-hs-tab="#hs-pro-tabs-dgpro-one-year" aria-controls="hs-pro-tabs-dgpro-one-year" role="tab" >
        1 Year
      </button>
    </nav>

<div>
      
      <div id="hs-pro-tabs-dgpro-one-month" role="tabpanel" class="hidden" aria-labelledby="hs-pro-tabs-dgpro-item-one-month">
        <fieldset class="grid gap-y-3">
          <legend class="sr-only">
            Monthly pricing list
          </legend>

<label for="hs-pro-gproms" class="py-3 px-4 flex items-center font-medium bg-layer text-layer-foreground rounded-xl cursor-pointer rounded-xl ring-1 ring-layer-line has-checked:ring-2 has-checked:ring-primary-checked">
            <input type="radio" id="hs-pro-gproms" class="bg-transparent border-layer-line rounded-full checked:bg-primary-checked checked:border-primary-checked focus:ring-0 focus:ring-offset-0" value="Startup" name="hs-pro-gpromn" checked>
            <span class="grow px-4">
              <span class="block">
                Startup
              </span>
              <span class="block text-sm/6 text-muted-foreground-1">
                $39 / mon
              </span>
            </span>
            <span class="block">
              $348
            </span>
          </label>

<label for="hs-pro-gpromp" class="py-3 px-4 flex items-center font-medium bg-layer text-layer-foreground rounded-xl cursor-pointer rounded-xl ring-1 ring-layer-line has-checked:ring-2 has-checked:ring-primary-checked">
            <input type="radio" id="hs-pro-gpromp" class="bg-transparent border-layer-line rounded-full checked:bg-primary-checked checked:border-primary-checked focus:ring-0 focus:ring-offset-0" value="Pro" name="hs-pro-gpromn" >
            <span class="grow px-4">
              <span class="block">
                Pro
              </span>
              <span class="block text-sm/6 text-muted-foreground-1">
                $69 / mon
              </span>
            </span>
            <span class="block">
              $708
            </span>
          </label>

<label for="hs-pro-gprome" class="py-3 px-4 flex items-center font-medium bg-layer text-layer-foreground rounded-xl cursor-pointer rounded-xl ring-1 ring-layer-line has-checked:ring-2 has-checked:ring-primary-checked">
            <input type="radio" id="hs-pro-gprome" class="bg-transparent border-layer-line rounded-full checked:bg-primary-checked checked:border-primary-checked focus:ring-0 focus:ring-offset-0" value="Enterprise" name="hs-pro-gpromn" >
            <span class="grow px-4">
              <span class="block">
                Enterprise
              </span>
              <span class="block text-sm/6 text-muted-foreground-1">
                $129 / mon
              </span>
            </span>
            <span class="block">
              $1428
            </span>
          </label>
          
        </fieldset>
      </div>

<div id="hs-pro-tabs-dgpro-one-year" role="tabpanel" aria-labelledby="hs-pro-tabs-dgpro-item-one-year">
        <fieldset class="grid gap-y-3">
          <legend class="sr-only">
            Yearly pricing list
          </legend>

<label for="hs-pro-gproys" class="py-3 px-4 flex items-center font-medium bg-layer text-layer-foreground rounded-xl cursor-pointer rounded-xl ring-1 ring-layer-line has-checked:ring-2 has-checked:ring-primary-checked">
            <input type="radio" id="hs-pro-gproys" class="bg-transparent border-layer-line rounded-full checked:bg-primary-checked checked:border-primary-checked focus:ring-0 focus:ring-offset-0" value="Startup" name="hs-pro-gpromn" checked>
            <span class="grow px-4">
              <span class="block">
                Startup
              </span>
              <span class="block text-sm/6 text-muted-foreground-1">
                <span class="me-1 inline-flex items-center gap-1.5 py-0.5 px-1.5 text-xs font-medium bg-primary-100 text-primary-800 rounded-lg dark:bg-primary-500/10 dark:text-primary-500">
                  15% off
                </span>
                $29 / mon
              </span>
            </span>
            <span class="block">
              $368
            </span>
          </label>

<label for="hs-pro-gproyp" class="py-3 px-4 flex items-center font-medium bg-layer text-layer-foreground rounded-xl cursor-pointer rounded-xl ring-1 ring-layer-line has-checked:ring-2 has-checked:ring-primary-checked">
            <input type="radio" id="hs-pro-gproyp" class="bg-transparent border-layer-line rounded-full checked:bg-primary-checked checked:border-primary-checked focus:ring-0 focus:ring-offset-0" value="Pro" name="hs-pro-gpromn" >
            <span class="grow px-4">
              <span class="block">
                Pro
              </span>
              <span class="block text-sm/6 text-muted-foreground-1">
                <span class="me-1 inline-flex items-center gap-1.5 py-0.5 px-1.5 text-xs font-medium bg-primary-100 text-primary-800 rounded-lg dark:bg-primary-500/10 dark:text-primary-500">
                  15% off
                </span>
                $59 / mon
              </span>
            </span>
            <span class="block">
              $828
            </span>
          </label>

<label for="hs-pro-gproye" class="py-3 px-4 flex items-center font-medium bg-layer text-layer-foreground rounded-xl cursor-pointer rounded-xl ring-1 ring-layer-line has-checked:ring-2 has-checked:ring-primary-checked">
            <input type="radio" id="hs-pro-gproye" class="bg-transparent border-layer-line rounded-full checked:bg-primary-checked checked:border-primary-checked focus:ring-0 focus:ring-offset-0" value="Enterprise" name="hs-pro-gpromn" >
            <span class="grow px-4">
              <span class="block">
                Enterprise
              </span>
              <span class="block text-sm/6 text-muted-foreground-1">
                <span class="me-1 inline-flex items-center gap-1.5 py-0.5 px-1.5 text-xs font-medium bg-primary-100 text-primary-800 rounded-lg dark:bg-primary-500/10 dark:text-primary-500">
                  15% off
                </span>
                $119 / mon
              </span>
            </span>
            <span class="block">
              $1548
            </span>
          </label>
          
        </fieldset>
      </div>
      
    </div>

<button type="button" class="py-3 px-4 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg 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" data-hs-overlay="#hs-pro-dicm">
      Gift Startup for $368
    </button>
    
  </div>
  
</div>

Plan Upgrade Form Pro

Two-column upgrade form pairs billing and payment fields with a plan summary and total card.

<div class="bg-card border border-card-line shadow-2xs rounded-xl">
  
  <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
    <h2  class="font-medium text-foreground">
      <span class="inline-flex items-center gap-x-3"><svg class="w-8.5 h-7.5" width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="7" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-200 dark:fill-primary-500"/><rect y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-300 dark:fill-primary-600"/><rect x="14" y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-500 dark:fill-primary-700"/></svg>Upgrade to PRO</span>
    </h2>
  </div>

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

<div class="space-y-2">
            <label for="hs-pro-dufbi" class="block mb-2 text-sm font-medium text-foreground">
              Billing information
            </label>

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

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

<div class="space-y-2">
            <label for="hs-pro-dufpi" class="block mb-2 text-sm font-medium text-foreground">
              Payment information
            </label>

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

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

<div class="p-4 h-full bg-surface space-y-4">
      <div class="flex flex-wrap justify-between items-center gap-2">
        <label class="block mb-2 text-sm font-medium text-foreground">
          Currency
        </label>

<div class="relative inline-block">
          <select id="hs-pro-select-simple-style-currency" data-hs-select='{
              "placeholder": "Select currency",
              "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
              "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary",
              
              "dropdownClasses": "inset-e-0 w-28 max-h-72 p-1 space-y-0.5 z-80 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 class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
              "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>",
              "dropdownScope": "window",
              "viewport": "#hs-modal-upgrade-to-pro-body"
            }' class="hidden">
            <option value="">Choose</option>
            <option value="USD" selected>USD</option>
            <option value="AED">AED</option>
            <option value="AFN">AFN</option>
            <option value="ALL">ALL</option>
            <option value="AMD">AMD</option>
            <option value="ANG">ANG</option>
            <option value="AOA">AOA</option>
            <option value="ARS">ARS</option>
            <option value="AUD">AUD</option>
            <option value="AWG">AWG</option>
            <option value="AZN">AZN</option>
            <option value="BAM">BAM</option>
            <option value="BBD">BBD</option>
            <option value="BDT">BDT</option>
            <option value="BGN">BGN</option>
            <option value="BIF">BIF</option>
            <option value="BMD">BMD</option>
            <option value="BND">BND</option>
            <option value="BOB">BOB</option>
            <option value="BRL">BRL</option>
            <option value="BSD">BSD</option>
            <option value="BWP">BWP</option>
            <option value="BZD">BZD</option>
            <option value="CAD">CAD</option>
            <option value="CDF">CDF</option>
            <option value="CHF">CHF</option>
            <option value="CLP">CLP</option>
            <option value="CNY">CNY</option>
            <option value="COP">COP</option>
            <option value="CRC">CRC</option>
            <option value="CVE">CVE</option>
            <option value="CZK">CZK</option>
            <option value="DJF">DJF</option>
            <option value="DKK">DKK</option>
            <option value="DOP">DOP</option>
            <option value="DZD">DZD</option>
            <option value="EGP">EGP</option>
            <option value="ETB">ETB</option>
            <option value="EUR">EUR</option>
            <option value="FJD">FJD</option>
            <option value="FKP">FKP</option>
            <option value="GBP">GBP</option>
            <option value="GEL">GEL</option>
            <option value="GIP">GIP</option>
            <option value="GMD">GMD</option>
            <option value="GNF">GNF</option>
            <option value="GTQ">GTQ</option>
            <option value="GYD">GYD</option>
            <option value="HKD">HKD</option>
            <option value="HNL">HNL</option>
            <option value="HRK">HRK</option>
            <option value="HTG">HTG</option>
            <option value="HUF">HUF</option>
            <option value="IDR">IDR</option>
            <option value="ILS">ILS</option>
            <option value="INR">INR</option>
            <option value="ISK">ISK</option>
            <option value="JMD">JMD</option>
            <option value="JPY">JPY</option>
            <option value="KES">KES</option>
            <option value="KGS">KGS</option>
            <option value="KHR">KHR</option>
            <option value="KMF">KMF</option>
            <option value="KRW">KRW</option>
            <option value="KYD">KYD</option>
            <option value="KZT">KZT</option>
            <option value="LAK">LAK</option>
            <option value="LBP">LBP</option>
            <option value="LKR">LKR</option>
            <option value="LRD">LRD</option>
            <option value="LSL">LSL</option>
            <option value="MAD">MAD</option>
            <option value="MDL">MDL</option>
            <option value="MGA">MGA</option>
            <option value="MKD">MKD</option>
            <option value="MMK">MMK</option>
            <option value="MNT">MNT</option>
            <option value="MOP">MOP</option>
            <option value="MRO">MRO</option>
            <option value="MUR">MUR</option>
            <option value="MVR">MVR</option>
            <option value="MWK">MWK</option>
            <option value="MXN">MXN</option>
            <option value="MYR">MYR</option>
            <option value="MZN">MZN</option>
            <option value="NAD">NAD</option>
            <option value="NGN">NGN</option>
            <option value="NIO">NIO</option>
            <option value="NOK">NOK</option>
            <option value="NPR">NPR</option>
            <option value="NZD">NZD</option>
            <option value="PAB">PAB</option>
            <option value="PEN">PEN</option>
            <option value="PGK">PGK</option>
            <option value="PHP">PHP</option>
            <option value="PKR">PKR</option>
            <option value="PLN">PLN</option>
            <option value="PYG">PYG</option>
            <option value="QAR">QAR</option>
            <option value="RON">RON</option>
            <option value="RSD">RSD</option>
            <option value="RUB">RUB</option>
            <option value="RWF">RWF</option>
            <option value="SAR">SAR</option>
            <option value="SBD">SBD</option>
            <option value="SCR">SCR</option>
            <option value="SEK">SEK</option>
            <option value="SGD">SGD</option>
            <option value="SHP">SHP</option>
            <option value="SLL">SLL</option>
            <option value="SOS">SOS</option>
            <option value="SRD">SRD</option>
            <option value="STD">STD</option>
            <option value="SZL">SZL</option>
            <option value="THB">THB</option>
            <option value="TJS">TJS</option>
            <option value="TOP">TOP</option>
            <option value="TRY">TRY</option>
            <option value="TTD">TTD</option>
            <option value="TWD">TWD</option>
            <option value="TZS">TZS</option>
            <option value="UAH">UAH</option>
            <option value="UGX">UGX</option>
            <option value="UYU">UYU</option>
            <option value="UZS">UZS</option>
            <option value="VND">VND</option>
            <option value="VUV">VUV</option>
            <option value="WST">WST</option>
            <option value="XAF">XAF</option>
            <option value="XCD">XCD</option>
            <option value="XOF">XOF</option>
            <option value="XPF">XPF</option>
            <option value="YER">YER</option>
            <option value="ZAR">ZAR</option>
            <option value="ZMW">ZMW</option>
          </select>
        </div>
        
      </div>

<div class="space-y-2">
        <label class="block text-sm font-semibold text-foreground">
          Billing period
        </label>

<div class="relative">
          <select data-hs-select='{
              "placeholder": "Select a plan",
              "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
              "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary",
              "dropdownClasses": "mt-2 z-50 w-full min-w-36 max-h-72 z-50 p-1 space-y-0.5 bg-select border border-select-line rounded-xl shadow-xl",
              "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 class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
              "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>"
            }' class="hidden">
            <option value="">Choose</option>
            <option selected>Pro (Monthly - $59 / user / month)</option>
            <option>Free - (Free forever)</option>
          </select>
        </div>
        
      </div>

<div class="p-3 bg-card shadow-xs rounded-lg">
        <ul class="space-y-3 mb-3">
          <li class="flex justify-between items-center">
            <span class="text-sm text-foreground">
              1 seat on Pro
            </span>
            <span class="text-sm font-semibold text-foreground">
              $59
            </span>
          </li>
          <li class="flex justify-between items-center">
            <span class="text-sm text-foreground">
              Tax
            </span>
            <span class="text-sm font-semibold text-foreground">
              $0
            </span>
          </li>
          <li class="border-t border-t-card-divider"></li>
          <li class="flex justify-between items-center">
            <span class="text-sm text-foreground">
              Due today
            </span>
            <span class="text-sm font-semibold text-foreground">
              $59
            </span>
          </li>
        </ul>

<button type="button" class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary-focus">
          Pay and upgrade
        </button>
      </div>

<p class="text-xs text-muted-foreground-1">
        You can cancel your plan at any time. Purchases made by credit card can’t be refunded, although your credit can be transferred to another account.
      </p>
    </div>
    
  </div>
</div>

Open related plans template

Team Billing Account Form Pro

Short setup card collects a team name and subscription plan in a stacked two-field form.

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

<div class="p-4 space-y-5">
    <div class="space-y-2">
      <label for="hs-pro-dasadamtn" class="block mb-2 text-sm font-medium text-foreground">
        Team name
      </label>

<div class="space-y-2">
      <label for="hs-pro-dasadamtn" class="block mb-2 text-sm font-medium text-foreground">
        Subscription plan
      </label>

<div class="relative">
        <select data-hs-select='{
            "placeholder": "Select a plan",
            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-3 pe-9 flex text-nowrap w-full cursor-pointer bg-transparent border border-layer-line rounded-lg text-start text-sm text-muted-foreground-1 focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary-focus",
            "dropdownClasses": "mt-2 z-50 w-full min-w-36 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl",
            "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 class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-muted-foreground-1\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
            "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>",
            "viewport": "#hs-pro-datab"
          }' class="hidden">
          <option value="">Choose</option>
          <option>Pro (Monthly - $59 / user / month)</option>
          <option>Free - (Free forever)</option>
        </select>
      </div>
      
    </div>
  </div>
  
</div>