Tailwind CSS Select Menus Blocks

Select Menus

Tailwind CSS select menus for language, currency, assignees, status, country search, visibility, and other reusable selection controls.

Single-choice select keeps flag icons in both the trigger and the option list.

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

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

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

Source metadata:
- Catalog family: ui-components/select-menus
- Block ID: language-select-with-flags
- Source description: Single-choice select keeps flag icons in both the trigger and the option list.
- Preview iframe: https://preline.co/blocks/ui-components/select-menus/iframes/pro/language-select-with-flags.html (repo path: blocks/ui-components/select-menus/iframes/pro/language-select-with-flags.html)
- Source markup reference:
  - partials/pro/admin-dashboard/sources/select-language.html

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

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve trigger geometry, open panel placement, grouping, row order, scroll container, overlay/backdrop behavior, z-index, active/current states, and keyboard/focus semantics.
- Do not simplify grouped or nested menus, drawers, popovers, and modals into flat generic lists or default forms unless the source does.
- Source content inventory (from the source markup):
  - Placeholder copy is `Select country` (not "language" or "Select language") - keep it verbatim.
  - Six options after the hidden `<option value="">Choose</option>`, in order: `English (US)`, `English (UK)`, `Deutsch`, `Dansk`, `Italiano`, `中文 (繁體)`.
  - `English (US)` is selected on first load, and the toggle template includes `<div data-icon>` so the selected flag also renders inside the trigger button.
  - Each option carries an inline `viewBox="0 0 512 512"` flag SVG at `shrink-0 size-4 rounded-full` (US stars and stripes, UK union flag, German tricolour, Danish cross, Italian tricolour, Chinese five stars) - real flag artwork, never emoji or letter badges.
  - Trigger is `py-2 px-3 pe-7 flex items-center gap-x-2 text-nowrap w-full bg-layer border border-layer-line rounded-lg text-sm text-layer-foreground` with a stacked up/down chevron at `inset-e-2`.
  - Dropdown is `w-full min-w-45 max-h-72 p-1 space-y-0.5 z-50` with thin custom scrollbar utilities and `py-2 px-4 text-sm rounded-lg` rows plus a check on the selected row. Closed by default - the preview iframe force-opens it as demo chrome.

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

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

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

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

<div class="relative">
  <select id="hs-pro-select-language" data-hs-select='{
    "placeholder": "Select country",
    "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-3 pe-7 flex items-center gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line rounded-lg text-start text-sm text-layer-foreground hover:border-layer-line focus:outline-hidden focus:border-layer-line",
    "dropdownClasses": "inset-e-0 w-full min-w-45 max-h-72 p-1 space-y-0.5 z-50 w-full overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
    "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
    "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-foreground\" data-title></div><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></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 value="English-us" selected data-hs-select-option='{
      "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><g fill-rule=\"evenodd\"><g stroke-width=\"1pt\"><path fill=\"#bd3d44\" d=\"M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z\" transform=\"scale(3.9385)\"/><path fill=\"#fff\" d=\"M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z\" transform=\"scale(3.9385)\"/></g><path fill=\"#192f5d\" d=\"M0 0h98.8v70H0z\" transform=\"scale(3.9385)\"/><path fill=\"#fff\" d=\"M8.2 3l1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z\" transform=\"scale(3.9385)\"/></g></svg>"}'>
      English (US)
    </option>
    <option value="English-uk" data-hs-select-option='{
      "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-gb\" viewBox=\"0 0 512 512\"><path fill=\"#012169\" d=\"M0 0h512v512H0z\"/><path fill=\"#FFF\" d=\"M512 0v64L322 256l190 187v69h-67L254 324 68 512H0v-68l186-187L0 74V0h62l192 188L440 0z\"/><path fill=\"#C8102E\" d=\"M184 324l11 34L42 512H0v-3l184-185zm124-12l54 8 150 147v45L308 312zM512 0L320 196l-4-44L466 0h46zM0 1l193 189-59-8L0 49V1z\"/><path fill=\"#FFF\" d=\"M176 0v512h160V0H176zM0 176v160h512V176H0z\"/><path fill=\"#C8102E\" d=\"M0 208v96h512v-96H0zM208 0v512h96V0h-96z\"/></svg>"}'>
      English (UK)
    </option>
    <option value="Deutsch" data-hs-select-option='{
      "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-de\" viewBox=\"0 0 512 512\"><path fill=\"#ffce00\" d=\"M0 341.3h512V512H0z\"/><path d=\"M0 0h512v170.7H0z\"/><path fill=\"#d00\" d=\"M0 170.7h512v170.6H0z\"/></svg>"}'>
      Deutsch
    </option>
    <option value="Dansk" data-hs-select-option='{
      "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-dk\" viewBox=\"0 0 512 512\"><path fill=\"#c8102e\" d=\"M0 0h512.1v512H0z\"/><path fill=\"#fff\" d=\"M144 0h73.1v512H144z\"/><path fill=\"#fff\" d=\"M0 219.4h512.1v73.2H0z\"/></svg>"}'>
      Dansk
    </option>
    <option value="Italiano" data-hs-select-option='{
      "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-it\" viewBox=\"0 0 512 512\"><g fill-rule=\"evenodd\" stroke-width=\"1pt\"><path fill=\"#fff\" d=\"M0 0h512v512H0z\"/><path fill=\"#009246\" d=\"M0 0h170.7v512H0z\"/><path fill=\"#ce2b37\" d=\"M341.3 0H512v512H341.3z\"/></g></svg>"}'>
      Italiano
    </option>
    <option value="中文-繁體" data-hs-select-option='{
      "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" id=\"flag-icon-css-cn\" viewBox=\"0 0 512 512\"><defs><path id=\"a\" fill=\"#ffde00\" d=\"M1-.3L-.7.8 0-1 .6.8-1-.3z\"/></defs><path fill=\"#de2910\" d=\"M0 0h512v512H0z\"/><use width=\"30\" height=\"20\" transform=\"matrix(76.8 0 0 76.8 128 128)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"rotate(-121 142.6 -47) scale(25.5827)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"rotate(-98.1 198 -82) scale(25.6)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"rotate(-74 272.4 -114) scale(25.6137)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"matrix(16 -19.968 19.968 16 256 230.4)\" xlink:href=\"#a\"/></svg>"}'>
      中文 (繁體)
    </option>
  </select>
  
</div>

Column Time Picker New Pro

Time field with a dropdown of hour, minute and AM/PM columns plus now and confirm actions.

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

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

Source metadata:
- Catalog family: ui-components/select-menus
- Block ID: column-time-picker
- Source description: Time field with a dropdown of hour, minute and AM/PM columns plus now and confirm actions.
- Preview iframe: https://preline.co/blocks/ui-components/select-menus/iframes/pro/column-time-picker.html (repo path: blocks/ui-components/select-menus/iframes/pro/column-time-picker.html)
- Source markup reference:
  - partials/pro/finance-tracker/sources/time-picker.html

<div class="min-h-14 px-4 flex justify-between items-center gap-x-3">
                      <label for="hs-pro-ctp-time" class="shrink-0 text-sm text-muted-foreground-1">
                        Time
                      </label>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] [--strategy:fixed] relative inline-flex">
                            <button id="hs-pro-ctp-time-dropdown" type="button" class="hs-dropdown-toggle size-6 shrink-0 inline-flex justify-center items-center rounded-full text-layer-foreground hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="menu" aria-expanded="false" aria-label="Pick a time">
                              <span class="sr-only">Pick a time</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                            </button>

</div>

<div class="p-1 max-h-56 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                  
                                  <label for="hs-pro-ctp-mm00" class="group relative flex justify-center items-center p-1.5 w-10 text-center text-sm text-foreground cursor-pointer rounded-md hover:bg-muted-hover has-checked:bg-primary has-checked:text-primary-foreground has-disabled:pointer-events-none has-disabled:opacity-50 has-disabled:text-muted-foreground">
                                    <input type="radio" id="hs-pro-ctp-mm00" name="hs-pro-ctp-mm" class="hidden bg-transparent border-line-2 text-primary focus:ring-layer focus:ring-offset-0">
                                    <span class="block">
                                      00
                                    </span>
                                  </label>
                                  

                                  <label for="hs-pro-ctp-mm05" class="group relative flex justify-center items-center p-1.5 w-10 text-center text-sm text-foreground cursor-pointer rounded-md hover:bg-muted-hover has-checked:bg-primary has-checked:text-primary-foreground has-disabled:pointer-events-none has-disabled:opacity-50 has-disabled:text-muted-foreground">
                                    <input type="radio" id="hs-pro-ctp-mm05" name="hs-pro-ctp-mm" class="hidden bg-transparent border-line-2 text-primary focus:ring-layer focus:ring-offset-0">
                                    <span class="block">
                                      05
                                    </span>
                                  </label>
                                  

                                  <label for="hs-pro-ctp-mm10" class="group relative flex justify-center items-center p-1.5 w-10 text-center text-sm text-foreground cursor-pointer rounded-md hover:bg-muted-hover has-checked:bg-primary has-checked:text-primary-foreground has-disabled:pointer-events-none has-disabled:opacity-50 has-disabled:text-muted-foreground">
                                    <input type="radio" id="hs-pro-ctp-mm10" name="hs-pro-ctp-mm" class="hidden bg-transparent border-line-2 text-primary focus:ring-layer focus:ring-offset-0">
                                    <span class="block">
                                      10
                                    </span>
                                  </label>
                                  

                                  <label for="hs-pro-ctp-mm15" class="group relative flex justify-center items-center p-1.5 w-10 text-center text-sm text-foreground cursor-pointer rounded-md hover:bg-muted-hover has-checked:bg-primary has-checked:text-primary-foreground has-disabled:pointer-events-none has-disabled:opacity-50 has-disabled:text-muted-foreground">
                                    <input type="radio" id="hs-pro-ctp-mm15" name="hs-pro-ctp-mm" class="hidden bg-transparent border-line-2 text-primary focus:ring-layer focus:ring-offset-0">
                                    <span class="block">
                                      15
                                    </span>
                                  </label>
                                  

                                  <label for="hs-pro-ctp-mm20" class="group relative flex justify-center items-center p-1.5 w-10 text-center text-sm text-foreground cursor-pointer rounded-md hover:bg-muted-hover has-checked:bg-primary has-checked:text-primary-foreground has-disabled:pointer-events-none has-disabled:opacity-50 has-disabled:text-muted-foreground">
                                    <input type="radio" id="hs-pro-ctp-mm20" name="hs-pro-ctp-mm" class="hidden bg-transparent border-line-2 text-primary focus:ring-layer focus:ring-offset-0">
                                    <span class="block">
                                      20
                                    </span>
                                  </label>
                                  

                                  <label for="hs-pro-ctp-mm25" class="group relative flex justify-center items-center p-1.5 w-10 text-center text-sm text-foreground cursor-pointer rounded-md hover:bg-muted-hover has-checked:bg-primary has-checked:text-primary-foreground has-disabled:pointer-events-none has-disabled:opacity-50 has-disabled:text-muted-foreground">
                                    <input type="radio" id="hs-pro-ctp-mm25" name="hs-pro-ctp-mm" class="hidden bg-transparent border-line-2 text-primary focus:ring-layer focus:ring-offset-0">
                                    <span class="block">
                                      25
                                    </span>
                                  </label>
                                  

                                  <label for="hs-pro-ctp-mm30" class="group relative flex justify-center items-center p-1.5 w-10 text-center text-sm text-foreground cursor-pointer rounded-md hover:bg-muted-hover has-checked:bg-primary has-checked:text-primary-foreground has-disabled:pointer-events-none has-disabled:opacity-50 has-disabled:text-muted-foreground">
                                    <input type="radio" id="hs-pro-ctp-mm30" name="hs-pro-ctp-mm" class="hidden bg-transparent border-line-2 text-primary focus:ring-layer focus:ring-offset-0">
                                    <span class="block">
                                      30
                                    </span>
                                  </label>
                                  

                                  <label for="hs-pro-ctp-mm35" class="group relative flex justify-center items-center p-1.5 w-10 text-center text-sm text-foreground cursor-pointer rounded-md hover:bg-muted-hover has-checked:bg-primary has-checked:text-primary-foreground has-disabled:pointer-events-none has-disabled:opacity-50 has-disabled:text-muted-foreground">
                                    <input type="radio" id="hs-pro-ctp-mm35" name="hs-pro-ctp-mm" class="hidden bg-transparent border-line-2 text-primary focus:ring-layer focus:ring-offset-0">
                                    <span class="block">
                                      35
                                    </span>
                                  </label>
                                  

                                  <label for="hs-pro-ctp-mm40" class="group relative flex justify-center items-center p-1.5 w-10 text-center text-sm text-foreground cursor-pointer rounded-md hover:bg-muted-hover has-checked:bg-primary has-checked:text-primary-foreground has-disabled:pointer-events-none has-disabled:opacity-50 has-disabled:text-muted-foreground">
                                    <input type="radio" id="hs-pro-ctp-mm40" name="hs-pro-ctp-mm" class="hidden bg-transparent border-line-2 text-primary focus:ring-layer focus:ring-offset-0" checked>
                                    <span class="block">
                                      40
                                    </span>
                                  </label>
                                  

                                  <label for="hs-pro-ctp-mm45" class="group relative flex justify-center items-center p-1.5 w-10 text-center text-sm text-foreground cursor-pointer rounded-md hover:bg-muted-hover has-checked:bg-primary has-checked:text-primary-foreground has-disabled:pointer-events-none has-disabled:opacity-50 has-disabled:text-muted-foreground">
                                    <input type="radio" id="hs-pro-ctp-mm45" name="hs-pro-ctp-mm" class="hidden bg-transparent border-line-2 text-primary focus:ring-layer focus:ring-offset-0">
                                    <span class="block">
                                      45
                                    </span>
                                  </label>
                                  

                                  <label for="hs-pro-ctp-mm50" class="group relative flex justify-center items-center p-1.5 w-10 text-center text-sm text-foreground cursor-pointer rounded-md hover:bg-muted-hover has-checked:bg-primary has-checked:text-primary-foreground has-disabled:pointer-events-none has-disabled:opacity-50 has-disabled:text-muted-foreground">
                                    <input type="radio" id="hs-pro-ctp-mm50" name="hs-pro-ctp-mm" class="hidden bg-transparent border-line-2 text-primary focus:ring-layer focus:ring-offset-0">
                                    <span class="block">
                                      50
                                    </span>
                                  </label>
                                  

                                  <label for="hs-pro-ctp-mm55" class="group relative flex justify-center items-center p-1.5 w-10 text-center text-sm text-foreground cursor-pointer rounded-md hover:bg-muted-hover has-checked:bg-primary has-checked:text-primary-foreground has-disabled:pointer-events-none has-disabled:opacity-50 has-disabled:text-muted-foreground">
                                    <input type="radio" id="hs-pro-ctp-mm55" name="hs-pro-ctp-mm" class="hidden bg-transparent border-line-2 text-primary focus:ring-layer focus:ring-offset-0">
                                    <span class="block">
                                      55
                                    </span>
                                  </label>

</div>

<div class="p-1 max-h-56 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                  
                                  <label for="hs-pro-ctp-csam" class="group relative flex justify-center items-center p-1.5 w-10 text-center text-sm text-foreground cursor-pointer rounded-md hover:bg-muted-hover has-checked:bg-primary has-checked:text-primary-foreground has-disabled:pointer-events-none has-disabled:opacity-50 has-disabled:text-muted-foreground">
                                    <input type="radio" id="hs-pro-ctp-csam" name="hs-pro-ctp-cs" class="hidden bg-transparent border-line-2 text-primary focus:ring-layer focus:ring-offset-0" checked>
                                    <span class="block">
                                      AM
                                    </span>
                                  </label>
                                  

                                  <label for="hs-pro-ctp-cspm" class="group relative flex justify-center items-center p-1.5 w-10 text-center text-sm text-foreground cursor-pointer rounded-md hover:bg-muted-hover has-checked:bg-primary has-checked:text-primary-foreground has-disabled:pointer-events-none has-disabled:opacity-50 has-disabled:text-muted-foreground">
                                    <input type="radio" id="hs-pro-ctp-cspm" name="hs-pro-ctp-cs" class="hidden bg-transparent border-line-2 text-primary focus:ring-layer focus:ring-offset-0">
                                    <span class="block">
                                      PM
                                    </span>
                                  </label>

</div>
                                
                              </div>

<div class="py-2 px-3 flex flex-wrap justify-between items-center gap-2 border-t border-dropdown-footer">
                                <button type="button" class="text-[13px] font-medium rounded-md bg-layer text-layer-foreground hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-primary-focus">
                                  Now
                                </button>
                                <button type="button" class="py-1 px-2.5 text-[13px] font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
                                  OK
                                </button>
                              </div>
                              
                            </div>
                          </div>
                          
                        </div>
                      </div>
                    </div>

Open related finance tracker template

Currency Select Button with Search Pro

Rounded button trigger opens a searchable currency list with flag icons and code labels.

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

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

Source metadata:
- Catalog family: ui-components/select-menus
- Block ID: currency-select-button-with-search
- Source description: Rounded button trigger opens a searchable currency list with flag icons and code labels.
- Preview iframe: https://preline.co/blocks/ui-components/select-menus/iframes/pro/currency-select-button-with-search.html (repo path: blocks/ui-components/select-menus/iframes/pro/currency-select-button-with-search.html)
- Source markup reference:
  - partials/pro/payments-dashboard/selects/currency-button-style.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve trigger geometry, open panel placement, grouping, row order, scroll container, overlay/backdrop behavior, z-index, active/current states, and keyboard/focus semantics.
- Do not simplify grouped or nested menus, drawers, popovers, and modals into flat generic lists or default forms unless the source does.
- Source content inventory (from the source markup):
  - Pill trigger: `py-1 ps-1.5 pe-7 flex items-center gap-x-1.5 text-nowrap bg-layer border border-layer-line rounded-full text-sm sm:text-base` inside `<div class="relative inline-block">`, with a chevron-down at `inset-e-2`; select placeholder copy is `Choose a currency`.
  - `"hasSearch": true` with search placeholder `Type a currency`; the search field is sticky at the top of the panel (`bg-select p-2 -mx-1 sticky top-0`).
  - Exactly three options after the hidden `<option value="">Choose</option>`, in order `USD`, `GBP`, `EURO`, each with a right-aligned muted description: `United States Dollar`, `British Pound`, `EUR`.
  - `USD` is selected on first load.
  - Each row leads with a real `size-4 rounded-full` country flag PNG from the `svg-country-flags` package (`us.png`, `gb.png`, `eu.png`) - not emoji, initials, or generic icons.
  - Dropdown is `w-72 max-h-72 p-1 pt-0 space-y-0.5 z-80 rounded-xl shadow-xl` with thin custom scrollbar utilities and `py-2 px-4 text-sm rounded-lg` rows. Closed by default - the preview iframe force-opens it via `HSSelect.getInstance("#hs-pro-select-currency").open()`, which is demo chrome.

<div class="relative inline-block">
                      <select id="hs-pro-select-currency" data-hs-select='{
                          "placeholder": "Choose a currency",
                          "hasSearch": true,
                          "searchPlaceholder": "Type a currency",
                          "searchClasses": "block py-1.5 sm:py-2 px-3 w-full sm:text-sm bg-transparent border-layer-line rounded-lg text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus",
                          "searchWrapperClasses": "bg-select p-2 -mx-1 sticky top-0",
                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"flex\" data-icon></span><span class=\"text-sm text-foreground\" data-title></span></button>",
                          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 ps-1.5 pe-7 flex items-center gap-x-1.5 text-nowrap cursor-pointer bg-layer border border-layer-line rounded-full text-start text-sm sm:text-base hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus",
                          "dropdownClasses": "z-80 inset-e-0 w-72 max-h-72 p-1 pt-0 space-y-0.5 z-50 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                          "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                          "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"shrink-0 me-2\" data-icon></div><div class=\"grow\"><div class=\"flex justify-between items-center gap-x-3\"><div class=\"text-foreground\" data-title></div><div class=\"text-muted-foreground-1\" data-description></div></div></div></div></div>",
                          "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>",
                          "preventSearchFocus": "false"
                        }' class="hidden">
                        <option value="">Choose</option>
                        <option selected value="USD" data-hs-select-option='{
                          "description": "United States Dollar",
                          "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/us.png\" alt=\"United States Dollar\" />"}'>
                          USD
                        </option>
                        <option  value="GBP" data-hs-select-option='{
                          "description": "British Pound",
                          "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"British Pound\" />"}'>
                          GBP
                        </option>
                        <option  value="EURO" data-hs-select-option='{
                          "description": "EUR",
                          "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/eu.png\" alt=\"EUR\" />"}'>
                          EURO
                        </option>
                      </select>
                    </div>

Open related send amount page

View Mode Select Pro

Compact select swaps between layout modes through icon-labeled option rows.

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

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

Source metadata:
- Catalog family: ui-components/select-menus
- Block ID: view-mode-select
- Source description: Compact select swaps between layout modes through icon-labeled option rows.
- Preview iframe: https://preline.co/blocks/ui-components/select-menus/iframes/pro/view-mode-select.html (repo path: blocks/ui-components/select-menus/iframes/pro/view-mode-select.html)
- Source markup reference:
  - partials/pro/admin-dashboard/sources/select-view.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve trigger geometry, open panel placement, grouping, row order, scroll container, overlay/backdrop behavior, z-index, active/current states, and keyboard/focus semantics.
- Do not simplify grouped or nested menus, drawers, popovers, and modals into flat generic lists or default forms unless the source does.
- Source content inventory (from the source markup):
  - Placeholder copy is `View`; the toggle template renders `<span class="-ms-0.5 me-1.5" data-icon>` plus the title on a ghost button `py-1.5 px-2.5 inline-flex justify-center items-center text-start text-foreground text-[13px] rounded-lg align-middle hover:bg-surface-hover focus:bg-surface-focus`, inside `<div class="relative inline-block">`.
  - Exactly three options after the hidden `<option value="">Choose</option>`, in order: `Board`, `Table`, `Timeline`.
  - `Table` is selected on first load.
  - Each option has a `shrink-0 size-3.5` Lucide-style 24-viewBox outline icon drawn inside an 18x18 `rx="2"` rounded square: three vertical bars for `Board`, a centre divider plus two horizontal rules for `Table`, and three ragged indented lines for `Timeline`.
  - Dropdown is `mt-2 z-50 w-36 p-1 space-y-0.5 rounded-xl shadow-xl` with `py-2 px-3 text-sm rounded-lg` rows; the trigger has no chevron/`extraMarkup` and selected rows have no check-mark markup - selection reads only from `hs-selected:bg-select-item-active`.
  - The option template reserves a description line but no option supplies one. The source sets `"viewport": "#hs-modal-status-body"` for its host modal - drop or repoint it when standalone. Closed by default; the preview iframe force-opens it as demo chrome.

<div class="relative inline-block">
                      <select id="hs-pro-select-view" data-hs-select='{
                          "placeholder": "View",
                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"-ms-0.5 me-1.5\" 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 px-2.5 inline-flex justify-center items-center text-start text-foreground text-[13px] rounded-lg align-middle hover:bg-surface-hover focus:bg-surface-focus focus:outline-hidden before:absolute before:inset-0 before:z-1",
                          "dropdownClasses": "mt-2 z-50 w-36 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-3 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                          "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"me-2\" data-icon></div><div data-title></div></div><div class=\"text-sm text-muted-foreground-1\" data-description></div></div>",
                          "viewport": "#hs-modal-status-body"
                        }' class="hidden">
                        <option value="">Choose</option>
                        <option value="1"  data-hs-select-option='{
                          "icon": "<svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><path d=\"M8 7v7\"/><path d=\"M12 7v4\"/><path d=\"M16 7v9\"/></svg>"
                        }'>Board</option>
                        <option value="2" selected data-hs-select-option='{
                          "icon": "<svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3v18\"/><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><path d=\"M3 9h18\"/><path d=\"M3 15h18\"/></svg>"
                        }'>Table</option>
                        <option value="3"  data-hs-select-option='{
                          "icon": "<svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><path d=\"M9 8h7\"/><path d=\"M8 12h6\"/><path d=\"M11 16h5\"/></svg>"
                        }'>Timeline</option>
                      </select>
                    </div>

Assignee Tag Select Pro

Multi-select turns chosen people into removable tags above the option list.

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

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

Source metadata:
- Catalog family: ui-components/select-menus
- Block ID: assignee-tag-select
- Source description: Multi-select turns chosen people into removable tags above the option list.
- Preview iframe: https://preline.co/blocks/ui-components/select-menus/iframes/pro/assignee-tag-select.html (repo path: blocks/ui-components/select-menus/iframes/pro/assignee-tag-select.html)
- Source markup reference:
  - partials/pro/admin-dashboard/sources/select-assignee.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve trigger geometry, open panel placement, grouping, row order, scroll container, overlay/backdrop behavior, z-index, active/current states, and keyboard/focus semantics.
- Do not simplify grouped or nested menus, drawers, popovers, and modals into flat generic lists or default forms unless the source does.
- Source content inventory (from the source markup):
  - Preline `HSSelect` (`data-hs-select`) in `"mode": "tags"` on a hidden `<select multiple>` inside `<div class="relative w-full">`; placeholder copy is `Assignee`.
  - Seven people after the hidden `<option value="">Choose</option>` placeholder, in order: `James Collins`, `Amanda Harvey`, `Ols Schols`, `Bob Hills`, `Daniel Hobbs`, `Liza Harrison`, `Anna Richard`.
  - Four rows use Unsplash avatar photos (`James Collins`, `Amanda Harvey`, `Daniel Hobbs`, `Anna Richard`) as `<img class="inline-block rounded-full">`; three use `size-5` initial circles on `bg-surface` reading `L` for `Ols Schols`, `B` for `Bob Hills`, and `O` for `Liza Harrison` - the mismatched `O` is intentional source content.
  - `James Collins` is the only option selected on first load, so the field starts with exactly one removable tag.
  - Tag chips are `bg-layer border border-transparent rounded-md p-1 hover:border-line-2 m-0.5` with a `size-5` icon slot, a `text-[13px]` title, and a `size-5` X remove button; the tag field is `min-h-9.5 ps-0.5 pe-9 rounded-lg` and the dropdown is `mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 rounded-xl shadow-xl`.
  - The dropdown is closed by default; the preview iframe force-opens it with `HSSelect.getInstance("#hs-pro-select-assignee").open()`, which is demo chrome and not part of the block.

<div class="relative w-full">
                      <select id="hs-pro-select-assignee" multiple data-hs-select='{
                          "placeholder": "Assignee",
                          "wrapperClasses": "hs-select-active:border-transparent hs-select-active:bg-surface rounded-md flex items-center flex-wrap text-nowrap w-full text-start text-sm border border-transparent hover:border-line-2 focus:outline-hidden",
                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer bg-layer border border-layer-line rounded-lg text-start text-sm focus:bg-layer-hover",
                          "dropdownClasses": "mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 bg-select border border-select-line rounded-xl shadow-xl",
                          "optionClasses": "py-1 px-2 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",
                          "mode": "tags",
                          "tagsClasses": "relative ps-0.5 pe-9 min-h-9.5 flex items-center flex-wrap text-nowrap w-full bg-layer border border-layer-line rounded-lg text-start text-sm focus:border-primary-focus focus:ring-primary-focus",
                          "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-10 bg-layer border border-transparent rounded-md p-1 hover:border-line-2 m-0.5\"><div class=\"size-5 me-1\" data-icon></div><div class=\"whitespace-nowrap text-[13px] text-foreground\" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-1 rounded-md text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus text-sm cursor-pointer\" data-remove><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\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg></div></div>",
                          "tagsInputClasses": "py-1 sm:py-1.5 px-2 grow order-1 sm:text-sm bg-transparent border-transparent rounded-md text-foreground placeholder:text-muted-foreground-1 focus:ring-0 focus-visible:outline-hidden",
                          "optionTemplate": "<div class=\"flex items-center\"><div class=\"size-5 me-2\" data-icon></div><div><div class=\"text-sm text-foreground\" data-title></div><div class=\"text-xs text-muted-foreground-1\" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>"
                        }' class="hidden">
                        <option value="">Choose</option>
                        <option value="1" selected data-hs-select-option='{
                          "icon": "<img class=\"inline-block rounded-full\" src=\"https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                        }'>James Collins</option>

<option value="2" data-hs-select-option='{
                          "icon": "<img class=\"inline-block rounded-full\" src=\"https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80\" alt=\"Avatar\">"
                        }'>Amanda Harvey</option>

<option value="3" data-hs-select-option='{
                          "icon": "<span class=\"flex shrink-0 justify-center items-center size-5 bg-surface text-surface-foreground text-[10px] font-medium uppercase rounded-full\">L</span>"
                        }'>Ols Schols</option>

<option value="4" data-hs-select-option='{
                          "icon": "<span class=\"flex shrink-0 justify-center items-center size-5 bg-surface text-surface-foreground text-[10px] font-medium uppercase rounded-full\">B</span>"
                        }'>Bob Hills</option>

<option value="5" data-hs-select-option='{
                          "icon": "<img class=\"inline-block rounded-full\" src=\"https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80\" alt=\"Avatar\">"
                        }'>Daniel Hobbs</option>

<option value="6" data-hs-select-option='{
                          "icon": "<span class=\"flex shrink-0 justify-center items-center size-5 bg-surface text-surface-foreground text-[10px] font-medium uppercase rounded-full\">O</span>"
                        }'>Liza Harrison</option>

<option value="7" data-hs-select-option='{
                          "icon": "<img class=\"inline-block rounded-full\" src=\"https://images.unsplash.com/photo-1670272505340-d906d8d77d03?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80\" alt=\"Avatar\">"
                        }'>Anna Richard</option>
                      </select>
                    </div>

Tag-Style Multi-Select Pro

Multi-select keeps each chosen item as a compact tag while the dropdown stays open for more picks.

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

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

Source metadata:
- Catalog family: ui-components/select-menus
- Block ID: tag-style-multi-select
- Source description: Multi-select keeps each chosen item as a compact tag while the dropdown stays open for more picks.
- Preview iframe: https://preline.co/blocks/ui-components/select-menus/iframes/pro/tag-style-multi-select.html (repo path: blocks/ui-components/select-menus/iframes/pro/tag-style-multi-select.html)
- Source markup reference:
  - partials/pro/admin-dashboard/sources/select-tag-style.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve trigger geometry, open panel placement, grouping, row order, scroll container, overlay/backdrop behavior, z-index, active/current states, and keyboard/focus semantics.
- Do not simplify grouped or nested menus, drawers, popovers, and modals into flat generic lists or default forms unless the source does.
- Source content inventory (from the source markup):
  - Preline `HSSelect` in `"mode": "tags"` on a hidden `<select multiple>` inside `<div class="relative w-full">`; placeholder copy is `Issue type`.
  - Five options after the hidden `<option value="">Choose</option>`, in order: `Bug 🐞`, `Support 🙏`, `Feature ⚡️`, `Docs 📄`, `Improvement 📈` - the emoji are part of the visible copy.
  - `Docs 📄` and `Improvement 📈` are both selected on first load, so the field starts with exactly two chips and the other three options stay unselected.
  - Chips are `bg-surface text-surface-foreground rounded-md py-1 px-2 m-0.5` with a `text-[13px]` label and a circular `size-5` X remove button; the tag field is `relative ps-0.5 pe-9 min-h-9.5 flex items-center flex-wrap border border-layer-line rounded-lg`.
  - Options carry no icons, avatars, or descriptions - text only, with a check mark shown on selected rows; the dropdown is `mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 rounded-lg shadow-xl`.
  - Closed by default; the preview iframe force-opens it with `HSSelect.getInstance("#hs-pro-select-tag-style").open()`, which is demo chrome rather than block behavior.

<div class="relative w-full">
                      <select id="hs-pro-select-tag-style" multiple data-hs-select='{
                          "placeholder": "Issue type",
                          "wrapperClasses": "hs-select-active:border-transparent hs-select-active:bg-surface rounded-md flex items-center flex-wrap text-nowrap w-full text-start text-sm border border-transparent hover:border-line-2",
                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer bg-layer border border-layer-line rounded-lg text-start text-sm focus:bg-layer-hover",
                          "dropdownClasses": "mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 bg-select border border-select-line rounded-lg overflow-hidden overflow-y-auto shadow-xl",
                          "optionClasses": "py-1 px-2 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",
                          "mode": "tags",
                          "tagsClasses": "relative ps-0.5 pe-9 min-h-9.5 flex items-center flex-wrap text-nowrap w-full border border-layer-line rounded-lg text-start text-sm focus:border-blue-500 focus:ring-blue-500",
                          "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-10 bg-surface text-surface-foreground rounded-md py-1 px-2 focus:outline-hidden m-0.5\"><div class=\"size-5 me-1\" data-icon></div><div class=\"whitespace-nowrap text-[13px]\" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-1 rounded-full text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus text-sm cursor-pointer\" data-remove><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\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg></div></div>",
                          "tagsInputClasses": "py-1 sm:py-1.5 px-2 grow order-1 sm:text-sm bg-transparent border-transparent text-foreground placeholder:text-muted-foreground-1 rounded-md focus:ring-0 focus-visible:outline-hidden",
                          "optionTemplate": "<div class=\"flex items-center\"><div class=\"size-5 me-2\" data-icon></div><div><div class=\"text-sm text-foreground\" data-title></div><div class=\"text-xs text-muted-foreground-1\" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>"
                        }' class="hidden">
                        <option value="">Choose</option>
                        <option value="issueType1">Bug 🐞</option>
                        <option value="issueType2">Support 🙏</option>
                        <option value="issueType3">Feature ⚡️</option>
                        <option value="issueType4" selected>Docs 📄</option>
                        <option value="issueType5" selected>Improvement 📈</option>
                      </select>
                    </div>

Status Select with Color Bars Pro

Narrow color markers and stacked labels sit inside a compact single-select menu.

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

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

Source metadata:
- Catalog family: ui-components/select-menus
- Block ID: status-select-with-color-bars
- Source description: Narrow color markers and stacked labels sit inside a compact single-select menu.
- Preview iframe: https://preline.co/blocks/ui-components/select-menus/iframes/pro/status-select-with-color-bars.html (repo path: blocks/ui-components/select-menus/iframes/pro/status-select-with-color-bars.html)
- Source markup reference:
  - partials/pro/admin-dashboard/sources/select-status.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve trigger geometry, open panel placement, grouping, row order, scroll container, overlay/backdrop behavior, z-index, active/current states, and keyboard/focus semantics.
- Do not simplify grouped or nested menus, drawers, popovers, and modals into flat generic lists or default forms unless the source does.
- Source content inventory (from the source markup):
  - Placeholder copy is `Status`; the trigger is an inline chip on `bg-surface` at `py-1 px-2 rounded-md` whose hover ring is drawn by `after:absolute after:-inset-1 after:rounded-lg hover:after:border-line-2`, and its toggle template renders `<span class="me-2" data-icon>` plus the title.
  - Six options after the hidden `<option value="">Choose</option>`, in order: `No status`, `To do`, `In progress`, `Review`, `Completed 👏`, `Product Launch` - the clapping-hands emoji is part of the `Completed 👏` label.
  - Each option's marker is a vertical bar `block w-1 h-3 rounded-full` colored `bg-surface-3` (No status), `bg-sky-500` (To do), `bg-orange-500` (In progress), `bg-indigo-500` (Review), `bg-green-500` (Completed 👏), `bg-surface-3` (Product Launch); these are literal status hues, not primary-token roles.
  - `In progress` is selected on first load.
  - Dropdown is `mt-2 z-50 w-full p-1 space-y-0.5 rounded-xl shadow-xl` with `py-1 px-2 text-sm gap-x-2 rounded-lg` rows and a check icon on the selected row only.
  - Single-select, no search field, no avatars, and no option supplies description text even though the option template reserves a slot for it. Closed by default - the preview iframe force-opens it as demo chrome.

<div class="relative w-full">
                      <select id="hs-pro-select-status" data-hs-select='{
                          "placeholder": "Status",
                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"me-2\" data-icon></span><span class=\"text-foreground\" data-title></span></button>",
                          "toggleClasses": "hs-select-active:border-transparent hs-select-active:bg-surface py-1 px-2 rounded-md flex items-center flex-wrap text-nowrap text-start text-sm bg-surface border border-transparent after:absolute after:-inset-1 after:border after:border-transparent after:rounded-lg hover:after:border-line-2 focus:outline-hidden",
                          "dropdownClasses": "mt-2 z-50 w-full p-1 space-y-0.5 bg-select border border-select-line rounded-xl shadow-xl",
                          "optionClasses": "hs-selected:bg-select-item-active py-1 px-2 w-full text-sm text-select-item-foreground flex grow items-center gap-x-2 cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                          "optionTemplate": "<div class=\"flex grow items-center\"><div class=\"me-2\" data-icon></div><div><div class=\"text-sm text-foreground\" data-title></div><div class=\"text-xs text-muted-foreground-1\" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>"
                        }' class="hidden">
                        <option value="">Choose</option>
                        <option value="status1"  data-hs-select-option='{
                          "icon": "<span class=\"block w-1 h-3 rounded-full bg-surface-3\"></span>"
                        }'>No status</option>

<option value="status3" selected data-hs-select-option='{
                          "icon": "<span class=\"block w-1 h-3 rounded-full bg-orange-500\"></span>"
                        }'>In progress</option>

<option value="status4" data-hs-select-option='{
                          "icon": "<span class=\"block w-1 h-3 rounded-full bg-indigo-500\"></span>"
                        }'>Review</option>

<option value="status5" data-hs-select-option='{
                          "icon": "<span class=\"block w-1 h-3 rounded-full bg-green-500\"></span>"
                        }'>Completed 👏</option>

<option value="status6" data-hs-select-option='{
                          "icon": "<span class=\"block w-1 h-3 rounded-full bg-surface-3\"></span>"
                        }'>Product Launch</option>
                      </select>
                    </div>

Open related project details page

Metric Filter Select Pro

Lightweight text-only menu keeps one metric active in a short filter list.

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

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

Source metadata:
- Catalog family: ui-components/select-menus
- Block ID: metric-filter-select
- Source description: Lightweight text-only menu keeps one metric active in a short filter list.
- Preview iframe: https://preline.co/blocks/ui-components/select-menus/iframes/pro/metric-filter-select.html (repo path: blocks/ui-components/select-menus/iframes/pro/metric-filter-select.html)
- Source markup reference:
  - partials/pro/admin-dashboard/sources/select-revenue.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve trigger geometry, open panel placement, grouping, row order, scroll container, overlay/backdrop behavior, z-index, active/current states, and keyboard/focus semantics.
- Do not simplify grouped or nested menus, drawers, popovers, and modals into flat generic lists or default forms unless the source does.
- Source content inventory (from the source markup):
  - Text-style trigger with no border or fill: `-ms-2.5 py-1.5 ps-2.5 pe-6 inline-flex shrink-0 justify-center items-center gap-x-1.5 text-sm text-foreground rounded-lg hover:bg-muted-hover`, inside `<div class="relative inline-block">`, with a chevron-down at `inset-e-2`; placeholder copy is `Select option...`.
  - Eight options after the hidden `<option value="">Choose</option>`, in order: `Revenue`, `Total sales`, `New sales`, `Refunds`, `New subscriptions`, `Trial conversion rate`, `Affiliate revenue`, `Affiliate clicks`.
  - `Revenue` is selected on first load.
  - Rows are plain text only - no icons, avatars, descriptions, badges, or counts; the selected row alone gets a trailing check `polyline points="20 6 9 17 4 12"`.
  - Dropdown is `mt-2 z-50 w-48 p-1 space-y-0.5 rounded-xl shadow-xl` with thin custom scrollbar utilities and `py-1.5 px-2 text-[13px] rounded-lg` rows.
  - Single-select, no search field, no option groups. Closed by default - the preview iframe force-opens it as demo chrome.

<div class="relative inline-block">
  <select id="hs-pro-select-revenue" data-hs-select='{
      "placeholder": "Select option...",
      "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
      "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative -ms-2.5 py-1.5 ps-2.5 pe-6 inline-flex shrink-0 justify-center items-center gap-x-1.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus before:absolute before:inset-0 before:z-1",
      "dropdownClasses": "mt-2 z-50 w-48 p-1 space-y-0.5 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-1.5 px-2 w-full text-[13px] text-select-item-foreground rounded-lg 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-3.5 text-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>"
    }' class="hidden">
    <option value="">Choose</option>
    <option selected>Revenue</option>
    <option>Total sales</option>
    <option>New sales</option>
    <option>Refunds</option>
    <option>New subscriptions</option>
    <option>Trial conversion rate</option>
    <option>Affiliate revenue</option>
    <option>Affiliate clicks</option>
  </select>
</div>

Open related admin dashboard template

Country Select with Search Pro

Full-width select adds search at the top and icon-led country rows underneath.

Create a searchable country select component named "Country Select with Search" that visually matches the reference as closely as possible. Use the current project's existing framework, styling conventions, tokens, form controls, select/listbox primitives, icons, floating-positioning utilities, and dark-mode strategy. Do not add external UI dependencies just to recreate a select if the project already has an equivalent searchable select/listbox component. Flag assets are separate from the select primitive: the Preline source uses the `svg-country-flags` package, so use that package or the destination project's existing flag asset pipeline for country flags.

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

Baseline fidelity gates:
- Preserve exact visible copy, data values, order, hierarchy, and default state unless the user explicitly asks to change them.
- Map semantic token roles to one coherent destination token vocabulary. Every source primary role must use the destination project's primary token/config, never Preline blue or fixed blue palette values unless the destination primary is explicitly blue.
- Verify every emitted utility or component class exists in the destination. Map or define a missing semantic token before use; do not leave any undefined source class in generated markup.
- Use exact source assets, image URLs, inline SVGs, avatars, logos, and brand marks when supplied; do not replace them with placeholders, initials, emojis, generic icons, or alternate stock media.
- Final QA: compare the implementation with the exact anchored Preview and HTML source at mobile and desktop widths, including open/alternate states, assets, layering, focus behavior, and dark mode.

Behavior runtime rule:
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.

The details below are derived from the actual source block. Do not infer this from a generic country dropdown, native select, command palette, or language picker. The source is a full-width Preline HSSelect country selector with a sticky search input at the top of the dropdown and flag-led country rows underneath.

Keep the implementation Tailwind-first in Tailwind projects. Use utility classes directly in markup and reuse existing project component classes only when they already exist. Do not create new one-off classes such as `.country-select`, `.country-option`, `.select-menu`, or `@layer components` rules just to style this block.

Preserve source scale/layout utilities where the destination Tailwind setup supports them, and map missing custom scale values to the closest existing project scale or a reusable theme token. Do not replace source scale with scattered arbitrary bracket utilities. Source scale/layout examples for this block include `relative`, `w-full`, `max-w-xs`, `mx-auto`, `py-4`, `xl:py-0`, `px-4`, `xl:px-0`, `xl:mt-3`, `block`, `flex`, `items-center`, `gap-x-2`, `text-nowrap`, `py-1.5`, `sm:py-2`, `ps-3`, `pe-9`, `px-3`, `p-1`, `pt-0`, `p-2`, `-mx-1`, `space-y-0.5`, `max-h-64`, `overflow-hidden`, `overflow-y-auto`, `rounded-lg`, `rounded-xl`, `rounded-md`, `shadow-xl`, `text-sm`, `sm:text-sm`, `size-4`, `size-3.5`, and `z-80`.

Separate Tailwind scale from source token class names. Source token classes such as `bg-transparent`, `border-layer-line`, `text-layer-foreground`, `placeholder:text-muted-foreground-1`, `focus:border-primary-focus`, `focus:ring-primary-focus`, `text-foreground`, `bg-select`, `border-select-line`, `text-select-item-foreground`, `bg-select-item-active`, `bg-select-item-hover`, `bg-select-item-focus`, and `text-muted-foreground-1` describe roles. Map those roles to the destination project's actual token vocabulary. Do not copy Preline-only token names unless those exact classes already exist in the destination project.

Use one token vocabulary consistently. In common Tailwind/shadcn-style projects, use native tokens such as `bg-background`, `bg-popover`, `border-border`, `text-foreground`, `text-muted-foreground`, `bg-accent`, `text-accent-foreground`, `bg-primary`, and `ring-ring` when available. In tokenized Tailwind projects, combine structural utilities with semantic token utilities; do not use raw palette classes like `text-gray-900`, `text-gray-500`, `bg-white`, `bg-gray-50`, `dark:bg-gray-950`, `border-gray-200`, `bg-blue-600`, or `ring-indigo-600` for colors, surfaces, borders, focus rings, hover states, or selected states when semantic tokens exist. In Bootstrap projects, use native Bootstrap components/classes and variables such as `.form-select`, `.form-control`, `.dropdown-menu`, `.dropdown-item`, `.text-body`, `.text-muted`, `.border`, `--bs-primary`, and `--bs-primary-rgb`, including any app override such as a green/teal primary. Do not mix Preline token names, shadcn token names, Bootstrap classes, raw Tailwind palette colors, inline styles, and newly invented token classes in the same component.

Build only this country select and its dropdown/options. Do not append unrelated forms, profile pages, headers, footers, dashboards, marketing sections, language pickers, currency selectors, or extra demo blocks around it.

Overall component:
- The reference preview centers the select in a compact wrapper: body/demo wrapper `w-full max-w-xs mx-auto`, with `px-4 py-4` on small screens and no extra padding at `xl`.
- The actual select wrapper is only `relative`; do not introduce card chrome, labels, helper text, or surrounding form fields unless the destination page already requires them.
- The select is full width inside its local wrapper.
- Placeholder text is `Country`.
- The source includes a native hidden `<select>` enhanced by Preline `HSSelect`. In a non-Preline project, implement the same behavior with the project's searchable select/listbox/combobox primitive instead of leaving a plain native select.
- When this select is composed in a toolbar or form row beside other controls, its full control contract must adapt to the neighboring control size variant. Match the row's existing button/input/select height, vertical padding, horizontal padding rhythm, radius, border width, shadow strength, font size, font weight, line-height, icon size, text color role, and baseline. In the screenshots, the select sits beside the `Today` date button and `Add project` button; it should visually share their control height and text treatment instead of becoming taller, shorter, more spacious, lighter, darker, bolder, or softer than the row.

Trigger:
- Trigger is a button generated from `toggleTag`, not a visible native `<select>`.
- Trigger layout/scale: `relative py-1.5 sm:py-2 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer text-start sm:text-sm rounded-lg`.
- Trigger includes a left icon slot for the selected country's flag, a title slot, and a right chevron.
- Trigger token roles: transparent/layer input background, layer border, foreground text, primary focus border, primary focus ring, disabled opacity and pointer state.
- Chevron sits absolutely at the right side, vertically centered, `size-4`, muted foreground role.
- Treat the trigger height and typography as a control-system relationship, not a fixed isolated measurement. If the destination row has existing `button`, `select`, or input size variants, choose the same size variant for this trigger and adjust only the inner flag/title/chevron layout needed to preserve the source behavior.
- The trigger's selected value and trigger placeholder both participate in the row's typography. Match the neighboring control labels for font size, font weight, line-height, baseline, and color role unless the source row intentionally uses a different placeholder treatment. Do not let a select component's default placeholder style make `Country` lighter, grayer, larger, smaller, lower, or less bold than the adjacent `Today` label when those controls are meant to match.
- Do not replace the trigger with a large card, pill badge, segmented control, button group, command button, or browser-default select.

Search field:
- Search is enabled by default. Preserve `hasSearch: true`.
- Search placeholder is exactly `Country`.
- Search field layout/scale: `block w-full sm:text-sm bg-transparent rounded-lg py-1.5 sm:py-2 px-3`.
- Search wrapper layout: `bg-select p-2 -mx-1 sticky top-0`.
- The search input is sticky at the top of the dropdown while country options scroll underneath it.
- Search token roles: transparent input background, layer border, layer/input foreground, muted placeholder, primary focus border/ring.
- Search input placeholder styling is separate from the trigger placeholder. The search field can use muted placeholder treatment, but the closed trigger placeholder `Country` must follow the trigger/neighbor control label treatment described above.
- Do not remove the search field, move it outside the dropdown, make it a separate page-level command palette, or replace it with browser find behavior.

Dropdown:
- Dropdown is full width relative to the trigger.
- Dropdown layout/scale: `max-h-64 p-1 pt-0 space-y-0.5 z-80 w-full overflow-hidden overflow-y-auto rounded-xl shadow-xl`.
- Dropdown token roles: select/popover surface, select border, selected item background, hover item background, focus item background, scrollbar track, and scrollbar thumb.
- Preserve the custom vertical scrollbar intent when the destination supports scrollbar utilities: scrollbar width `w-2`, square thumb radius, semantic track/thumb tokens.
- Preserve high stacking behavior so the dropdown is not clipped by surrounding preview containers, sticky headers, or scroll containers. The Preline source uses `dropdownScope: "window"` and a viewport binding.
- Do not render the dropdown as a modal, drawer, full-page picker, static screenshot, or always-visible list unless the destination context is explicitly a preview.

Country options:
- Include the full source country/territory option list, in source order, from `Afghanistan` through `Zimbabwe`. Do not shorten it to a few sample countries.
- The first empty value option is `Choose`; the visible placeholder remains `Country`.
- Each country row shows a round flag image before the country name.
- Do not inline, embed, generate, or manually paste flag artwork into the prompt or component. Call the flag files from the same package/source Preline uses: `node_modules/svg-country-flags/png100px/{lowercase-code}.png`, for example `af.png`, `gb.png`, and `us.png`.
- If the destination project does not already have flag assets, install or add the `svg-country-flags` package and reference its `png100px` files through the destination bundler/public-asset pipeline. If the app cannot serve `node_modules` paths directly, import/copy/serve those package assets correctly instead of leaving broken image URLs.
- Outside the Preline repo, a public URL fallback may use the same package path from Preline, for example `https://preline.co/node_modules/svg-country-flags/png100px/us.png`, but prefer the destination project's own installed package or asset pipeline when building an app.
- Flag image scale/shape: `inline-block size-4 rounded-full`.
- Flag alt text is the country/territory name.
- Option row layout/scale: `py-2 px-4 w-full text-sm rounded-md cursor-pointer`.
- Option template layout: flag/icon slot with `me-2`, country title, and a right-aligned selected checkmark.
- Selected checkmark is hidden by default and appears only for the selected option. It is a Lucide-style check icon at `size-3.5`.
- Country rows use hover, focus, and selected states. Do not flatten these states into plain text rows.
- Do not replace flags with emojis, generic globe icons, initials, colored dots, checkboxes, or missing-image placeholders.

Default state:
- In the block source, `United States` and `United Kingdom` are configurable selected examples, but this preview sets both selected flags to false, so the first-load trigger shows the placeholder `Country`.
- In the iframe/reference preview only, the select is opened on page load so viewers see the dropdown and search field immediately.
- In normal product usage, do not force the dropdown open on page load; open it from the trigger.

Interactions and dependencies:
- If the destination project already uses Preline, use `HSSelect` and preserve the relevant `data-hs-select` behavior: search, sticky search wrapper, option templates, selected checkmark, `preventSearchFocus` when used in the iframe preview, `dropdownScope: "window"`, and viewport binding.
- If the destination project has an equivalent searchable select/listbox/combobox primitive, use that native project primitive and map the source behavior to it.
- If no faithful equivalent exists, install/use Preline `HSSelect` with Floating UI and the source `svg-country-flags` asset package. Only under the explicit dependency-prohibition fallback above, implement a scoped searchable listbox/combobox with open/close state, filtered country options, keyboard navigation, selected state, outside-click close, Escape close, and focus management.
- Preserve the `svg-country-flags` asset dependency or equivalent served asset path for flags. Missing or broken flags are not acceptable; do not silently drop the flag slot when asset loading fails.
- Floating positioning should keep the dropdown attached to the trigger and above surrounding UI. The Preline demo requires Floating UI scripts: `@floating-ui/core` and `@floating-ui/dom`.
- Do not replace this with static HTML, a screenshot, a decorative SVG, a non-searchable native select, or a simplified autocomplete input without the dropdown row structure.

Icon rules:
- The source uses Lucide-style stroke SVGs for the chevron and selected checkmark.
- Use the destination project's existing icon system when it can provide visually equivalent chevron-down and check icons.
- If the project has no ordinary UI icon library, use Lucide or inline SVGs with the same stroke style.
- Flags are identity assets, not ordinary UI icons; keep them as flag images loaded from `svg-country-flags` or the destination's equivalent flag asset source. Do not replace flags with Lucide icons.

Theme and dark mode:
- The source is tokenized and supports theme/dark variants through surface, border, foreground, muted foreground, select item, primary focus, scrollbar, and selected/hover/focus roles.
- Implement intentional dark mode for the trigger, dropdown surface, search input, borders, country rows, selected state, hover/focus states, chevron, checkmark, scrollbar, and focus ring.
- Do not leave a bright white dropdown inside a dark UI unless the destination design system intentionally uses that pattern.

Responsive behavior:
- The select remains full width inside its local wrapper.
- The reference wrapper is compact (`max-w-xs`), not a wide form row or full settings page.
- The dropdown width matches the trigger width.
- The country text must not overflow the trigger or option rows; long country names should truncate or wrap according to the destination select primitive while preserving row density.
- Mobile and desktop preserve the same option order, flag size, search behavior, and dropdown structure.
- Across breakpoints and theme variants, compare the closed select trigger against the neighboring controls in the same row. The text baseline, label/placeholder weight, and perceived control height should remain matched after responsive wrapping or theme changes.

Accessibility:
- Use a semantic combobox/listbox/select pattern appropriate to the destination component system.
- Trigger exposes expanded/collapsed state with `aria-expanded`.
- Search input has an accessible name or placeholder of `Country`.
- Options expose selected state.
- Keyboard users can open the select, type to search, move through options, select an option, and close with Escape.
- Decorative chevron/check icons should be `aria-hidden="true"` when the accessible selected state is already exposed.
- Flag images should keep meaningful alt text when they are part of the option content; if the destination select also announces the country title separately, it is acceptable to mark duplicate flag images decorative.

Final QA checklist:
- The result is a compact full-width searchable country select, not a command palette, modal, language picker, currency select, or plain native select.
- First-load normal state shows placeholder `Country`; the reference iframe/demo may open the dropdown on load.
- Trigger has a selected flag/title slot on the left and a right-aligned chevron, with compact `rounded-lg` input geometry.
- When placed beside other controls, the select trigger height, vertical alignment, padding, radius, border/shadow strength, icon size, font size, font weight, line-height, baseline, and text color role match adjacent buttons/selects/inputs such as `Today` and `Add project`; it is not visibly taller, shorter, lighter, bolder, lower, or using a different density.
- The closed trigger placeholder `Country` and selected country labels match the neighboring control label treatment. A default select placeholder style must not make `Country` gray/regular if adjacent labels such as `Today` are foreground/semibold in the same row.
- Dropdown is `max-h-64`, scrollable, full width, rounded-xl, elevated, and not clipped by parent containers.
- Sticky search field remains at the top of the dropdown and uses placeholder `Country`.
- Country rows include round `size-4` flag images loaded from `svg-country-flags` or an equivalent served asset path, country names, hover/focus/selected states, and a right-aligned selected checkmark.
- The full source country/territory list is preserved in source order; it is not shortened to only popular countries.
- Flag asset paths or public URLs use the `svg-country-flags/png100px` source assets and are not replaced by broken images, empty spaces, emojis, generated art, or generic icons. If needed, the generated project installs/adds `svg-country-flags` and serves those assets correctly.
- `HSSelect` is preserved in Preline projects; otherwise the destination project's native searchable select/listbox primitive provides equivalent search, keyboard, selected, and floating dropdown behavior.
- Floating/dropdown behavior keeps the menu above surrounding UI and aligned to the trigger. In Preline demos, Floating UI dependencies are present.
- Generated Tailwind code preserves source scale/layout utilities where available, maps token roles to the destination token vocabulary, and does not mix Preline-only token names with another design system.
- In tokenized Tailwind projects, generated code uses semantic token classes for semantic color roles and does not mix in raw palette classes such as `text-gray-900`, `bg-white`, `dark:bg-gray-950`, `border-gray-200`, `bg-blue-600`, or `ring-indigo-600`.
- No unrelated page shell, form fields, dashboard cards, helper text, labels, or extra demo blocks are added.
- There are no one-off component classes created only for this block, no scattered raw hex/rgb values, no placeholder flags, no missing flag images, no generic select-menu defaults replacing the source geometry, no control-height drift against neighboring buttons or inputs, and no label/placeholder typography drift inside the closed trigger.

<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",
                        "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                        "optionTemplate": "<div class=\"flex items-center w-full\"><div class=\"me-2\" data-icon></div><span data-title></span><span class=\"hidden hs-selected:block ms-auto\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                        "preventSearchFocus": false,
                        "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>",
                        "dropdownScope": "window",
                        "viewport": "#hs-pro-select-country-viewport"
                      }' 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>

Open related account profile page

Time Slot Select Pro

Tall single-column menu keeps one time slot active in a long scrolling list.

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

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

Source metadata:
- Catalog family: ui-components/select-menus
- Block ID: time-slot-select
- Source description: Tall single-column menu keeps one time slot active in a long scrolling list.
- Preview iframe: https://preline.co/blocks/ui-components/select-menus/iframes/pro/time-slot-select.html (repo path: blocks/ui-components/select-menus/iframes/pro/time-slot-select.html)
- Source markup reference:
  - partials/pro/admin-dashboard/sources/select-time.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve trigger geometry, open panel placement, grouping, row order, scroll container, overlay/backdrop behavior, z-index, active/current states, and keyboard/focus semantics.
- Do not simplify grouped or nested menus, drawers, popovers, and modals into flat generic lists or default forms unless the source does.
- Source content inventory (from the source markup):
  - Placeholder copy is `Select option...`; the trigger is a filled, borderless `py-2 px-4 pe-7 flex text-nowrap w-full cursor-pointer bg-surface rounded-lg text-start text-sm text-surface-foreground` control inside `<div class="relative">`, with a stacked up/down chevron at `inset-e-2`.
  - Exactly 24 hourly options after the hidden `<option value="">Choose</option>`, in order `12:01 AM`, `1:00 AM` through `11:00 AM`, then `12:01 PM`, `1:00 PM` through `11:00 PM` - the two twelve-o'clock entries read `12:01`, not `12:00`.
  - `9:00 AM` is selected on first load.
  - Rows are plain time strings with no icons or descriptions; only the selected row shows a trailing check `polyline points="20 6 9 17 4 12"`.
  - Dropdown is `mt-2 z-50 w-full min-w-36 max-h-72 p-1 space-y-0.5 rounded-xl shadow-xl` with thin custom scrollbar utilities and `py-2 px-3 text-sm rounded-md` rows.
  - The source sets `"viewport": "#hs-modal-status-body"` because it normally lives inside that modal - drop or repoint that option when the block is standalone. Closed by default; the preview iframe force-opens it as demo chrome.

<div class="relative">
                      <select id="hs-pro-select-time" data-hs-select='{
                          "placeholder": "Select option...",
                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-4 pe-7 flex text-nowrap w-full cursor-pointer bg-surface rounded-lg text-start text-sm text-surface-foreground focus:outline-hidden focus:bg-surface-focus before:absolute before:inset-0 before:z-1",
                          "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 [&::-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-3 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 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>",
                          "viewport": "#hs-modal-status-body"
                        }' class="hidden">
                        <option value="">Choose</option>
                        <option>12:01 AM</option>
                        <option>1:00 AM</option>
                        <option>2:00 AM</option>
                        <option>3:00 AM</option>
                        <option>4:00 AM</option>
                        <option>5:00 AM</option>
                        <option>6:00 AM</option>
                        <option>7:00 AM</option>
                        <option>8:00 AM</option>
                        <option selected>9:00 AM</option>
                        <option >10:00 AM</option>
                        <option>11:00 AM</option>
                        <option>12:01 PM</option>
                        <option>1:00 PM</option>
                        <option>2:00 PM</option>
                        <option>3:00 PM</option>
                        <option>4:00 PM</option>
                        <option>5:00 PM</option>
                        <option>6:00 PM</option>
                        <option>7:00 PM</option>
                        <option>8:00 PM</option>
                        <option>9:00 PM</option>
                        <option>10:00 PM</option>
                        <option>11:00 PM</option>
                      </select>
                    </div>

Open related user profile page

Visibility Select with Description Rows Pro

Each option row pairs an icon, title, and supporting copy in one stacked layout.

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

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

Source metadata:
- Catalog family: ui-components/select-menus
- Block ID: visibility-select-with-description-rows
- Source description: Each option row pairs an icon, title, and supporting copy in one stacked layout.
- Preview iframe: https://preline.co/blocks/ui-components/select-menus/iframes/pro/visibility-select-with-description-rows.html (repo path: blocks/ui-components/select-menus/iframes/pro/visibility-select-with-description-rows.html)
- Source markup reference:
  - partials/pro/admin-dashboard/sources/select-visibility.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve trigger geometry, open panel placement, grouping, row order, scroll container, overlay/backdrop behavior, z-index, active/current states, and keyboard/focus semantics.
- Do not simplify grouped or nested menus, drawers, popovers, and modals into flat generic lists or default forms unless the source does.
- Source content inventory (from the source markup):
  - The placeholder string in the source is `Visibile to` - that exact spelling, typo included, is the shipped copy.
  - Exactly two options after the hidden `<option value="">Choose</option>`, in order `Anyone` then `Guideline`.
  - `Anyone` is selected on first load and is the only option with a description row, reading `Your status will be visible to everyone`; `Guideline` has a title only.
  - `Anyone` uses a 24-viewBox Lucide `globe-2` outline icon at `shrink-0 size-4`; `Guideline` uses a four-path multicolor brand SVG (`#A49DFF`, `#28289A`, `#5ADCEE`, `#7878FF`) at `inline-block size-4` - keep those literal brand fills rather than mapping them to the primary token.
  - Option rows render the title as `font-semibold text-foreground` above a `text-sm text-muted-foreground-1` description, at `py-2 px-4 w-full rounded-lg`; the dropdown is `mt-2 z-50 w-48 p-1 space-y-0.5 rounded-xl shadow-xl`.
  - Trigger is `py-2 ps-3 pe-7 inline-flex justify-center items-center bg-layer border border-layer-line text-layer-foreground text-sm rounded-lg shadow-2xs hover:bg-layer-hover` with a stacked up/down chevron at `inset-e-2`. Closed by default - the preview iframe force-opens it as demo chrome.

<div class="relative inline-block">
                      <select id="hs-pro-select-visibility" data-hs-select='{
                          "placeholder": "Visibile to",
                          "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-7 inline-flex justify-center items-center text-start bg-layer border border-layer-line text-layer-foreground text-sm rounded-lg shadow-2xs align-middle focus:outline-hidden before:absolute before:inset-0 before:z-1 hover:bg-layer-hover",
                          "dropdownClasses": "mt-2 z-50 w-48 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><div class=\"flex items-center\"><div class=\"me-2\" data-icon></div><div class=\"font-semibold text-foreground\" data-title></div></div><div class=\"text-sm text-muted-foreground-1\" data-description></div></div>",
                          "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>",
                          "viewport": "#hs-modal-status-body"
                        }' class="hidden">
                        <option value="">Choose</option>
                        <option value="1" selected data-hs-select-option='{
                          "description": "Your status will be visible to everyone",
                          "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-globe-2\"><path d=\"M21.54 15H17a2 2 0 0 0-2 2v4.54\"/><path d=\"M7 3.34V5a3 3 0 0 0 3 3v0a2 2 0 0 1 2 2v0c0 1.1.9 2 2 2v0a2 2 0 0 0 2-2v0c0-1.1.9-2 2-2h3.17\"/><path d=\"M11 21.95V18a2 2 0 0 0-2-2v0a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05\"/><circle cx=\"12\" cy=\"12\" r=\"10\"/></svg>"
                        }'>Anyone</option>
                        <option value="2" data-hs-select-option='{
                          "icon": "<svg class=\"inline-block size-4\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16.0355 1.75926C10.6408 1.75926 5.30597 1.49951 0.0111241 1C-0.288584 7.23393 5.50578 13.1282 12.7987 14.5668L13.9975 14.7266C14.3372 12.4289 15.9956 3.7773 16.595 1.73928C16.4152 1.75926 16.2353 1.75926 16.0355 1.75926Z\" fill=\"#A49DFF\"/><path d=\"M16.615 1.75926C16.615 1.75926 25.2266 7.9932 28.5234 16.3451C30.0419 11.3499 31.1608 6.15498 32 1C26.8051 1.49951 21.71 1.75926 16.615 1.75926Z\" fill=\"#28289A\"/><path d=\"M13.9975 14.7466L13.8177 15.9455C13.8177 15.9455 12.2592 28.4133 23.1886 31.9699C25.2266 26.8748 27.0049 21.6599 28.5234 16.3251C21.9698 15.8456 13.9975 14.7466 13.9975 14.7466Z\" fill=\"#5ADCEE\"/><path d=\"M16.6149 1.75927C16.0155 3.79729 14.3571 12.4089 14.0175 14.7466C14.0175 14.7466 21.9897 15.8456 28.5233 16.3251C25.1866 7.9932 16.6149 1.75927 16.6149 1.75927Z\" fill=\"#7878FF\"/></svg>"
                        }'>Guideline</option>
                      </select>
                    </div>

Open related user profile page

Filter Select with Icons Pro

Icon-led option rows turn a simple filter control into a compact action menu.

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

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

Source metadata:
- Catalog family: ui-components/select-menus
- Block ID: filter-select-with-icons
- Source description: Icon-led option rows turn a simple filter control into a compact action menu.
- Preview iframe: https://preline.co/blocks/ui-components/select-menus/iframes/pro/filter-select-with-icons.html (repo path: blocks/ui-components/select-menus/iframes/pro/filter-select-with-icons.html)
- Source markup reference:
  - partials/pro/admin-dashboard/sources/select-with-icons.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve trigger geometry, open panel placement, grouping, row order, scroll container, overlay/backdrop behavior, z-index, active/current states, and keyboard/focus semantics.
- Do not simplify grouped or nested menus, drawers, popovers, and modals into flat generic lists or default forms unless the source does.
- Source content inventory (from the source markup):
  - Compact borderless trigger with placeholder copy `Filter`: `py-1.5 sm:py-2 ps-2 pe-8 inline-flex shrink-0 justify-center items-center gap-x-1.5 border border-transparent sm:text-sm text-muted-foreground-1 rounded-lg hover:bg-muted-hover hover:text-foreground`, inside `<div class="relative inline-block">`, with a chevron-down at `inset-e-2`.
  - Seven options after the hidden `<option value="">Choose</option>`, in order: `All files`, `Documents`, `Images`, `Snippets`, `Spreadsheets`, `Audio`, `Videos`.
  - `All files` is selected on first load.
  - Every row leads with a `shrink-0 size-3 sm:size-3.5` Lucide-style 24-viewBox outline icon (archive box, file-with-lines, image, angle brackets, spreadsheet, speaker, video camera) and the selected row adds a trailing check `polyline points="20 6 9 17 4 12"`.
  - Dropdown is `mt-2 p-1 space-y-0.5 z-50 w-40 rounded-xl shadow-xl` with `py-1.5 px-2 text-[13px] gap-x-3` rows.
  - Single-select with no search field, no descriptions, and no tag mode. Closed by default - the preview iframe force-opens it as demo chrome.

<div class="relative inline-block">
                      <select id="hs-pro-select-with-icons" data-hs-select='{
                          "placeholder": "Filter",
                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1.5 sm:py-2 ps-2 pe-8 inline-flex shrink-0 justify-center items-center gap-x-1.5 border border-transparent sm:text-sm text-muted-foreground-1 rounded-lg hover:bg-muted-hover hover:text-foreground focus:outline-hidden focus:bg-muted-focus before:absolute before:inset-0 before:z-1",
                          
                          "dropdownClasses": "inset-e-0 mt-2 p-1 space-y-0.5 z-50 w-40 bg-select border border-select-line rounded-xl shadow-xl",
                          "optionClasses": "hs-selected:bg-select-item-active flex gap-x-3 py-1.5 px-2 text-[13px] text-select-item-foreground hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                          "optionTemplate": "<div class=\"flex items-center w-full\"><div class=\"me-2 sm:me-3\" 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>",
                          "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>"
                        }' class="hidden">
                        <option value="">Choose</option>
                        <option selected data-hs-select-option='{
                          "icon": "<svg class=\"shrink-0 size-3 sm:size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 2h10\"/><path d=\"M5 6h14\"/><rect width=\"18\" height=\"12\" x=\"3\" y=\"10\" rx=\"2\"/></svg>"}'>
                          All files
                        </option>
                        <option data-hs-select-option='{
                          "icon": "<svg class=\"shrink-0 size-3 sm:size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"/><polyline points=\"14 2 14 8 20 8\"/><line x1=\"16\" x2=\"8\" y1=\"13\" y2=\"13\"/><line x1=\"16\" x2=\"8\" y1=\"17\" y2=\"17\"/><line x1=\"10\" x2=\"8\" y1=\"9\" y2=\"9\"/></svg>"}'>
                          Documents
                        </option>
                        <option data-hs-select-option='{
                          "icon": "<svg class=\"shrink-0 size-3 sm:size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"/></svg>"}'>
                          Images
                        </option>
                        <option data-hs-select-option='{
                          "icon": "<svg class=\"shrink-0 size-3 sm:size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"/><polyline points=\"8 6 2 12 8 18\"/></svg>"}'>
                          Snippets
                        </option>
                        <option data-hs-select-option='{
                          "icon": "<svg class=\"shrink-0 size-3 sm:size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"/><polyline points=\"14 2 14 8 20 8\"/><path d=\"M8 13h2\"/><path d=\"M8 17h2\"/><path d=\"M14 13h2\"/><path d=\"M14 17h2\"/></svg>"}'>
                          Spreadsheets
                        </option>
                        <option data-hs-select-option='{
                          "icon": "<svg class=\"shrink-0 size-3 sm:size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/><path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"/><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14\"/></svg>"}'>
                          Audio
                        </option>
                        <option data-hs-select-option='{
                          "icon": "<svg class=\"shrink-0 size-3 sm:size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m22 8-6 4 6 4V8Z\"/><rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\"/></svg>"}'>
                          Videos
                        </option>
                      </select>
                    </div>

Open related user profile files page

Currency Code Select Pro

Plain currency codes sit in a narrow scrolling menu with no extra description layer.

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

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

Source metadata:
- Catalog family: ui-components/select-menus
- Block ID: currency-code-select
- Source description: Plain currency codes sit in a narrow scrolling menu with no extra description layer.
- Preview iframe: https://preline.co/blocks/ui-components/select-menus/iframes/pro/currency-code-select.html (repo path: blocks/ui-components/select-menus/iframes/pro/currency-code-select.html)
- Source markup reference:
  - partials/pro/admin-dashboard/sources/select-currency.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve trigger geometry, open panel placement, grouping, row order, scroll container, overlay/backdrop behavior, z-index, active/current states, and keyboard/focus semantics.
- Do not simplify grouped or nested menus, drawers, popovers, and modals into flat generic lists or default forms unless the source does.
- Source content inventory (from the source markup):
  - Single Preline `HSSelect` on a hidden native `<select>` inside `<div class="relative inline-block">`; placeholder copy is `Select currency`.
  - 135 three-letter currency options follow the hidden `<option value="">Choose</option>`: `USD` is listed first, then strict alphabetical order starting `AED`, `AFN`, `ALL`, `AMD` and ending `YER`, `ZAR`, `ZMW`.
  - `USD` is selected on first load and is what the trigger displays.
  - Options are bare currency codes - no flags, no descriptions, no search input, no grouping; only the selected row gets a trailing check `polyline points="20 6 9 17 4 12"`.
  - Trigger is `py-2 ps-3 pe-9 flex gap-x-2 text-nowrap w-full bg-layer border border-layer-line rounded-lg text-sm` with a stacked up/down chevron (`m7 15 5 5 5-5` and `m7 9 5-5 5 5`) pinned `absolute top-1/2 inset-e-2 -translate-y-1/2`.
  - Dropdown is deliberately narrow and scrolling: `w-28 max-h-72 p-1 space-y-0.5 z-80` with thin custom scrollbar utilities and `py-2 px-4 text-sm rounded-lg` rows; `"dropdownScope": "window"` is set. Closed by default - the preview iframe force-opens it as demo chrome.

<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>

Open related plans page