Data Management Modals
Checkbox filters, file uploads, and adaptive admin forms - all in Data Management Modal examples.
<!-- Export Contacts Modal -->
<div id="hs-pro-decm" class="hs-overlay hidden kquz2 fixed zxmp1 a98ho c61v5 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] n8854" role="dialog" tabindex="-1" aria-labelledby="hs-pro-decm-label">
<div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 p1xgh opacity-0 bx2ni nf9l7 sg50e hweyy oxtl1 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
<div class="xp67g hx6ns flex flex-col zxv30 mzy38 pointer-events-auto x32l5 dark:bg-neutral-800">
<!-- Header -->
<div class="u3poc gjk1t flex saet7 items-center xu4xz yxawv dark:border-neutral-700">
<h3 id="hs-pro-decm-label" class="hw6xt ejo46 dark:text-neutral-200">
Export contacts (2)
</h3>
<button type="button" class="x8hlq n2l26 flex enhxb items-center u3ov7 mr9qs k9mkq je4jy gxtht ejo46 p12pm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden d10id dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-pro-decm">
<span class="r8a99">Close</span>
<svg class="n2l26 szmrd" 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>
</button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="overflow-y-auto hm2m0 uqiuh b3ail ykfhs dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
<div class="jhb8q">
<!-- List Item -->
<div class="q6ob7 ltzuf uixns vxxhz xu4xz of9oo yxawv dark:border-neutral-700">
<label class="tuuss z0e83 dark:text-neutral-500">
Choose what contact details want to export:
</label>
<!-- Grid -->
<div class="nqo4p khfgm theuu">
<div class="space-y-2">
<!-- Checkbox -->
<div class="flex items-center">
<input type="checkbox" class="n2l26 sga4h rlapk j28t5 isksk checked:border-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmwcdte1" checked>
<label for="hs-pro-duecmwcdte1" class="tuuss ejo46 xy9c2 dark:text-neutral-400">
Name
</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="flex items-center">
<input type="checkbox" class="n2l26 sga4h rlapk j28t5 isksk checked:border-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmwcdte2" checked>
<label for="hs-pro-duecmwcdte2" class="tuuss ejo46 xy9c2 dark:text-neutral-400">
User ID
</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="flex items-center">
<input type="checkbox" class="n2l26 sga4h rlapk j28t5 isksk checked:border-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmwcdte3" checked>
<label for="hs-pro-duecmwcdte3" class="tuuss ejo46 xy9c2 dark:text-neutral-400">
Email
</label>
</div>
<!-- End Checkbox -->
</div>
<!-- End Col -->
<div class="space-y-2">
<!-- Checkbox -->
<div class="flex items-center">
<input type="checkbox" class="n2l26 sga4h rlapk j28t5 isksk checked:border-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmwcdte4" checked>
<label for="hs-pro-duecmwcdte4" class="tuuss ejo46 xy9c2 dark:text-neutral-400">
Address
</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="flex items-center">
<input type="checkbox" class="n2l26 sga4h rlapk j28t5 isksk checked:border-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmwcdte5" checked>
<label for="hs-pro-duecmwcdte5" class="tuuss ejo46 xy9c2 dark:text-neutral-400">
Phone
</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="flex items-center">
<input type="checkbox" class="n2l26 sga4h rlapk j28t5 isksk checked:border-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmwcdte6">
<label for="hs-pro-duecmwcdte6" class="tuuss ejo46 xy9c2 dark:text-neutral-400">
Signed up as
</label>
</div>
<!-- End Checkbox -->
</div>
<!-- End Col -->
</div>
<!-- End Grid -->
</div>
<!-- End List Item -->
<!-- List Item -->
<div class="q6ob7 ltzuf uixns vxxhz xu4xz of9oo yxawv dark:border-neutral-700">
<label class="tuuss z0e83 dark:text-neutral-500">
Choose your format for exporting your contacts:
</label>
<div class="nqo4p space-y-2">
<!-- Radio -->
<div class="flex items-center">
<input type="radio" name="hs-pro-duecmfm" class="n2l26 sga4h mr9qs j28t5 isksk checked:border-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmfm1" checked>
<label for="hs-pro-duecmfm1" class="tuuss ejo46 xy9c2 dark:text-neutral-400">
Regular CSV file
</label>
</div>
<!-- End Radio -->
<!-- Radio -->
<div class="flex items-center">
<input type="radio" name="hs-pro-duecmfm" class="n2l26 sga4h mr9qs j28t5 isksk checked:border-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmfm2">
<label for="hs-pro-duecmfm2" class="tuuss ejo46 xy9c2 dark:text-neutral-400">
Google CSV file
</label>
</div>
<!-- End Radio -->
</div>
</div>
<!-- End List Item -->
<!-- List Item -->
<div class="q6ob7 ltzuf uixns vxxhz xu4xz of9oo yxawv dark:border-neutral-700">
<label class="tuuss z0e83 dark:text-neutral-500">
Date range
</label>
<div class="space-y-2">
<!-- Radio -->
<div class="flex items-center">
<input type="radio" name="hs-pro-duecmdtr" class="n2l26 sga4h mr9qs j28t5 isksk checked:border-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmdtr1" checked>
<label for="hs-pro-duecmdtr1" class="tuuss ejo46 xy9c2 dark:text-neutral-400">
Today (18 Feb)
</label>
</div>
<!-- End Radio -->
<!-- Radio -->
<div class="flex items-center">
<input type="radio" name="hs-pro-duecmdtr" class="n2l26 sga4h mr9qs j28t5 isksk checked:border-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmdtr2">
<label for="hs-pro-duecmdtr2" class="tuuss ejo46 xy9c2 dark:text-neutral-400">
Current month
</label>
</div>
<!-- End Radio -->
<!-- Radio -->
<div class="flex items-center">
<input type="radio" name="hs-pro-duecmdtr" class="n2l26 sga4h mr9qs j28t5 isksk checked:border-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmdtr3">
<label for="hs-pro-duecmdtr3" class="tuuss ejo46 xy9c2 dark:text-neutral-400">
Last 7 days
</label>
</div>
<!-- End Radio -->
<!-- Radio -->
<div class="flex items-center">
<input type="radio" name="hs-pro-duecmdtr" class="n2l26 sga4h mr9qs j28t5 isksk checked:border-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmdtr4">
<label for="hs-pro-duecmdtr4" class="tuuss ejo46 xy9c2 dark:text-neutral-400">
Last month
</label>
</div>
<!-- End Radio -->
<!-- Radio -->
<div class="flex items-center">
<input type="radio" name="hs-pro-duecmdtr" class="n2l26 sga4h mr9qs j28t5 isksk checked:border-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmdtr5">
<label for="hs-pro-duecmdtr5" class="tuuss ejo46 xy9c2 dark:text-neutral-400">
All
</label>
</div>
<!-- End Radio -->
<!-- Radio -->
<div class="flex items-center">
<input type="radio" name="hs-pro-duecmdtr" class="n2l26 sga4h mr9qs j28t5 isksk checked:border-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-pro-duecmdtr6">
<label for="hs-pro-duecmdtr6" class="tuuss ejo46 xy9c2 dark:text-neutral-400">
Custom
</label>
</div>
<!-- End Radio -->
<div class="oqf2e">
<button type="button" class="ur00w inline-flex items-center u3ov7 on128 hw6xt wavyl k9mkq yxawv zxv30 ejo46 ntfdl wsl5v disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden u7q2f dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
<svg class="n2l26 bnmi1" 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="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg>
1 Jan 2023 - 18 Feb 2023
</button>
</div>
</div>
</div>
<!-- End List Item -->
</div>
</div>
<!-- End Body -->
<!-- Footer -->
<div class="jhb8q flex saet7 u3ov7">
<div class="flex-1 flex lokyk items-center v6f2r">
<button type="button" class="hxfjh l1xlu xggui inline-flex enhxb items-center m8hmi j8ti2 zxv30 k9mkq yxawv ejo46 tuuss hw6xt wavyl ntfdl moa07 wsl5v disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-overlay="#hs-pro-decm">
Cancel
</button>
<button type="button" class="hxfjh l1xlu xggui inline-flex enhxb items-center u3ov7 m8hmi j8ti2 o0y3u k9mkq t9n9o w3h0o tuuss hw6xt wavyl ntfdl moa07 pgsi2 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden v9ivw nny95 dark:focus:ring-blue-500" data-hs-overlay="#hs-pro-decm">
Export
</button>
</div>
</div>
<!-- Footer -->
</div>
</div>
</div>
<!-- End Export Contacts Modal -->
<!-- Payment Methods Modal -->
<div id="hs-pro-pycdmpmm" class="hs-overlay hidden kquz2 fixed zxmp1 a98ho c61v5 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] n8854" role="dialog" tabindex="-1" aria-labelledby="hs-pro-pycdmpmm-label">
<div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 p1xgh opacity-0 bx2ni nf9l7 vvxt8 hweyy oxtl1 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
<div class="relative xp67g hx6ns overflow-hidden flex flex-col zxv30 mzy38 pointer-events-auto dark:bg-neutral-800">
<!-- Header -->
<div class="iifk8 p5zbr cgjzl flex enhxb items-center xu4xz yxawv dark:border-neutral-700">
<h3 id="hs-pro-pycdmpmm-label" class="hw6xt ejo46 dark:text-neutral-200">
Payment methods
</h3>
<div class="absolute kjxn2 f65mc">
<button type="button" class="x8hlq n2l26 flex enhxb items-center u3ov7 mr9qs k9mkq je4jy gxtht ejo46 p12pm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden d10id dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-pro-pycdmpmm">
<span class="r8a99">Close</span>
<svg class="n2l26 szmrd" 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>
</button>
</div>
</div>
<!-- End Header -->
<!-- Body -->
<div class="y3kub hq7gn overflow-y-auto hm2m0 uqiuh b3ail ykfhs dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
<!-- List -->
<div class="-mx-3 flex flex-col cgrem">
<!-- Switch/Toggle -->
<label for="hs-pro-pysw1" class="hxfjh l1xlu group flex saet7 items-center rdqxy cursor-pointer lk55v dje09 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
<span class="dgznh">
<span class="flex items-center rdqxy">
<span class="n2l26 rditj inline-flex enhxb items-center gxtht ejo46 mr9qs group-hover:bg-gray-200 group-focus:bg-gray-200 dark:bg-neutral-700 dark:text-neutral-300 dark:bg-neutral-700 dark:group-hover:bg-neutral-600 dark:group-focus:bg-neutral-600">
<svg class="n2l26 szmrd" 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="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z"/><path d="M14 8H8"/><path d="M16 12H8"/><path d="M13 16H8"/></svg>
</span>
<span class="dgznh">
<span class="block tuuss ejo46 dark:text-neutral-200">
ATM withdrawals
</span>
</span>
</span>
</span>
<span class="block">
<span class="relative inline-block x0kau k6z5i cursor-pointer">
<input type="checkbox" id="hs-pro-pysw1" class="peer r8a99" checked>
<span class="absolute inset-0 iili6 mr9qs en36y rvew4 se6sv peer-checked:bg-purple-600 dark:bg-neutral-700 dark:peer-checked:bg-purple-500 peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
<span class="absolute uwi6w pqx29 -translate-y-1/2 s1u6m zxv30 mr9qs dossw ykcw4 rvew4 se6sv peer-checked:translate-x-full dark:bg-neutral-400 dark:peer-checked:bg-white"></span>
</span>
</span>
</label>
<!-- End Switch/Toggle -->
<!-- Switch/Toggle -->
<label for="hs-pro-pysw2" class="hxfjh l1xlu group flex saet7 items-center rdqxy cursor-pointer lk55v dje09 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
<span class="dgznh">
<span class="flex items-center rdqxy">
<span class="n2l26 rditj inline-flex enhxb items-center gxtht ejo46 mr9qs group-hover:bg-gray-200 group-focus:bg-gray-200 dark:bg-neutral-700 dark:text-neutral-300 dark:bg-neutral-700 dark:group-hover:bg-neutral-600 dark:group-focus:bg-neutral-600">
<svg class="n2l26 szmrd" 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="M21.54 15H17a2 2 0 0 0-2 2v4.54"/><path d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17"/><path d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05"/><circle cx="12" cy="12" r="10"/></svg>
</span>
<span class="dgznh">
<span class="block tuuss ejo46 dark:text-neutral-200">
Online transactions
</span>
</span>
</span>
</span>
<span class="block">
<span class="relative inline-block x0kau k6z5i cursor-pointer">
<input type="checkbox" id="hs-pro-pysw2" class="peer r8a99" checked>
<span class="absolute inset-0 iili6 mr9qs en36y rvew4 se6sv peer-checked:bg-purple-600 dark:bg-neutral-700 dark:peer-checked:bg-purple-500 peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
<span class="absolute uwi6w pqx29 -translate-y-1/2 s1u6m zxv30 mr9qs dossw ykcw4 rvew4 se6sv peer-checked:translate-x-full dark:bg-neutral-400 dark:peer-checked:bg-white"></span>
</span>
</span>
</label>
<!-- End Switch/Toggle -->
<!-- Switch/Toggle -->
<label for="hs-pro-pysw3" class="hxfjh l1xlu group flex saet7 items-center rdqxy cursor-pointer lk55v dje09 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
<span class="dgznh">
<span class="flex items-center rdqxy">
<span class="n2l26 rditj inline-flex enhxb items-center gxtht ejo46 mr9qs group-hover:bg-gray-200 group-focus:bg-gray-200 dark:bg-neutral-700 dark:text-neutral-300 dark:bg-neutral-700 dark:group-hover:bg-neutral-600 dark:group-focus:bg-neutral-600">
<svg class="n2l26 szmrd" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
</span>
<span class="dgznh">
<span class="block tuuss ejo46 dark:text-neutral-200">
Swipe payments
</span>
</span>
</span>
</span>
<span class="block">
<span class="relative inline-block x0kau k6z5i cursor-pointer">
<input type="checkbox" id="hs-pro-pysw3" class="peer r8a99" checked>
<span class="absolute inset-0 iili6 mr9qs en36y rvew4 se6sv peer-checked:bg-purple-600 dark:bg-neutral-700 dark:peer-checked:bg-purple-500 peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
<span class="absolute uwi6w pqx29 -translate-y-1/2 s1u6m zxv30 mr9qs dossw ykcw4 rvew4 se6sv peer-checked:translate-x-full dark:bg-neutral-400 dark:peer-checked:bg-white"></span>
</span>
</span>
</label>
<!-- End Switch/Toggle -->
<!-- Switch/Toggle -->
<label for="hs-pro-pysw4" class="hxfjh l1xlu group flex saet7 items-center rdqxy cursor-pointer lk55v dje09 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
<span class="dgznh">
<span class="flex items-center rdqxy">
<span class="n2l26 rditj inline-flex enhxb items-center gxtht ejo46 mr9qs group-hover:bg-gray-200 group-focus:bg-gray-200 dark:bg-neutral-700 dark:text-neutral-300 dark:bg-neutral-700 dark:group-hover:bg-neutral-600 dark:group-focus:bg-neutral-600">
<svg class="n2l26 szmrd" 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="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>
</span>
<span class="dgznh">
<span class="block tuuss ejo46 dark:text-neutral-200">
Location-based security
</span>
</span>
</span>
</span>
<span class="block">
<span class="relative inline-block x0kau k6z5i cursor-pointer">
<input type="checkbox" id="hs-pro-pysw4" class="peer r8a99" >
<span class="absolute inset-0 iili6 mr9qs en36y rvew4 se6sv peer-checked:bg-purple-600 dark:bg-neutral-700 dark:peer-checked:bg-purple-500 peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
<span class="absolute uwi6w pqx29 -translate-y-1/2 s1u6m zxv30 mr9qs dossw ykcw4 rvew4 se6sv peer-checked:translate-x-full dark:bg-neutral-400 dark:peer-checked:bg-white"></span>
</span>
</span>
</label>
<!-- End Switch/Toggle -->
</div>
<!-- End List -->
</div>
<!-- End Body -->
<!-- Footer -->
<div class="y3kub r28n2 jhbd9 yxawv dark:border-neutral-700">
<button type="button" class="u3poc l1xlu xp67g inline-flex enhxb items-center lwq0m tuuss hw6xt mzy38 k9mkq je4jy hs5iv w3h0o bsfgs disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden pcmsi" data-hs-overlay="#hs-pro-pycdmpmm">
Save changes
</button>
</div>
<!-- End Footer -->
</div>
</div>
</div>
<!-- End Payment Methods Modal -->
<!-- Show PIN Modal -->
<div id="hs-pro-pycdvpm" class="hs-overlay hidden kquz2 fixed zxmp1 a98ho c61v5 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] n8854" role="dialog" tabindex="-1" aria-labelledby="hs-pro-pycdvpm-label">
<div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 p1xgh opacity-0 bx2ni nf9l7 vvxt8 hweyy oxtl1 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
<div class="relative xp67g hx6ns overflow-hidden flex flex-col zxv30 mzy38 pointer-events-auto dark:bg-neutral-800">
<!-- Header -->
<div class="iifk8 p5zbr cgjzl flex enhxb items-center xu4xz yxawv dark:border-neutral-700">
<h3 id="hs-pro-pycdvpm-label" class="hw6xt ejo46 dark:text-neutral-200">
View PIN
</h3>
<div class="absolute kjxn2 f65mc">
<button type="button" class="x8hlq n2l26 flex enhxb items-center u3ov7 mr9qs k9mkq je4jy gxtht ejo46 p12pm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden d10id dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-pro-pycdvpm">
<span class="r8a99">Close</span>
<svg class="n2l26 szmrd" 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>
</button>
</div>
</div>
<!-- End Header -->
<!-- Body -->
<div class="y3kub n1www overflow-y-auto hm2m0 uqiuh b3ail ykfhs dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
<div class="cgjzl">
<h4 class="hw6xt ejo46 dark:text-neutral-200">
4-digit PIN
</h4>
<div class="v8kfk wwvj4 ahgde mx-auto">
<div class="ur00w gxtht v6924 ejo46 wavyl dark:bg-neutral-700 dark:text-neutral-200">
1248
</div>
</div>
<p class="tuuss z0e83 dark:text-neutral-500">
PIN will disappear in <span class="jr5ck dark:text-purple-500">00:56</span>
</p>
</div>
</div>
<!-- End Body -->
<!-- Footer -->
<div class="y3kub r28n2 jhbd9 yxawv dark:border-neutral-700">
<button type="button" class="u3poc l1xlu xp67g inline-flex enhxb items-center lwq0m tuuss hw6xt mzy38 k9mkq je4jy hs5iv w3h0o bsfgs disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden pcmsi" data-hs-overlay="#hs-pro-pycdvpm">
Got it
</button>
</div>
<!-- End Footer -->
</div>
</div>
</div>
<!-- End Show PIN Modal -->
<!-- Import Contacts Modal -->
<div id="hs-pro-dicm" class="hs-overlay hidden kquz2 fixed zxmp1 a98ho c61v5 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] n8854" role="dialog" tabindex="-1" aria-labelledby="hs-pro-dicm-label">
<div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 p1xgh opacity-0 bx2ni nf9l7 sg50e hweyy oxtl1 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
<div class="xp67g hx6ns flex flex-col zxv30 mzy38 pointer-events-auto x32l5 dark:bg-neutral-800">
<!-- Header -->
<div class="u3poc gjk1t flex saet7 items-center xu4xz yxawv dark:border-neutral-700">
<h3 id="hs-pro-dicm-label" class="hw6xt ejo46 dark:text-neutral-200">
Import contacts
</h3>
<button type="button" class="x8hlq n2l26 flex enhxb items-center u3ov7 mr9qs k9mkq je4jy gxtht ejo46 p12pm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden d10id dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-pro-dicm">
<span class="r8a99">Close</span>
<svg class="n2l26 szmrd" 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>
</button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="overflow-y-auto hm2m0 uqiuh b3ail ykfhs dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
<div class="jhb8q">
<!-- Media -->
<div class="xp67g flex pc3xl q6ob7 ltzuf uixns vxxhz xu4xz yxawv urtgc dark:border-neutral-700 dark:last:border-b-transparent">
<svg class="n2l26 x8hlq" width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_11766_122209asdasd21123fde)">
<path d="M3.11931 28.4817H8.21019V16.1181L0.937439 10.6636V26.3C0.937439 27.5054 1.91381 28.4819 3.11931 28.4819V28.4817Z" fill="#4285F4"/>
<path d="M25.6647 28.4817H30.7556C31.961 28.4817 32.9374 27.5054 32.9374 26.2999V10.6636L25.6647 16.1181V28.4817Z" fill="#34A853"/>
<path d="M25.6647 6.66356V16.1181L32.9374 10.6636V7.7545C32.9374 5.05812 29.8593 3.51812 27.701 5.13631L25.6647 6.66356Z" fill="#FBBC04"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.21021 16.1181V6.66356L16.9375 13.2091L25.6647 6.66356V16.1181L16.9375 22.6636L8.21021 16.1181Z" fill="#EA4335"/>
<path d="M0.937439 7.7545V10.6636L8.21019 16.1181V6.66356L6.17381 5.13631C4.01556 3.51813 0.937439 5.05813 0.937439 7.75438V7.7545Z" fill="#C5221F"/>
</g>
<defs>
<clipPath id="clip0_11766_122209asdasd21123fde">
<rect width="32" height="32" fill="white" transform="translate(0.937439)"/>
</clipPath>
</defs>
</svg>
<div class="dgznh">
<span class="block tuuss hw6xt ejo46 dark:text-neutral-300">
Gmail account
</span>
<p class="block tuuss z0e83 dark:text-neutral-500">
Import your Gmail account contacts.
</p>
</div>
<div class="flex flex-col enhxb">
<button type="button" class="ur00w inline-flex items-center u3ov7 on128 hw6xt wavyl k9mkq je4jy o0y3u w3h0o pgsi2 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kebql isksk">
Connect
</button>
</div>
</div>
<!-- End Media -->
<!-- Media -->
<div class="xp67g flex pc3xl q6ob7 ltzuf uixns vxxhz xu4xz yxawv urtgc dark:border-neutral-700 dark:last:border-b-transparent">
<svg class="n2l26 x8hlq" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.7438 0.940745C6.84695 1.30308 2.6841 1.63631 2.48837 1.67533C1.9396 1.77319 1.44038 2.14544 1.20563 2.63537L1 3.06646L1.01982 13.3407L1.04893 23.615L1.36234 24.2517C1.53886 24.6042 2.73365 26.2499 4.0362 27.9439C6.61221 31.2836 6.79802 31.47 7.77726 31.5679C8.06156 31.597 10.1966 31.4991 12.5081 31.3622C14.8295 31.2154 18.5508 30.99 20.7842 30.863C30.3233 30.2839 29.8334 30.3328 30.3815 29.8627C31.0672 29.2947 31.0183 30.2251 31.0474 17.7377C31.0672 7.15003 31.0573 6.45509 30.9006 6.13177C30.7148 5.76943 30.3815 5.51487 26.0329 2.45885C23.1243 0.421704 22.9186 0.313932 21.6155 0.294111C21.0772 0.274911 16.6307 0.568497 11.7438 0.940745ZM22.752 2.28232C23.1633 2.46814 26.1704 4.56412 26.6108 4.9661C26.7284 5.08378 26.7675 5.18164 26.7086 5.24048C26.5717 5.35817 7.96245 6.465 7.42421 6.38634C7.17956 6.34732 6.81722 6.20052 6.61159 6.06302C5.75932 5.48514 3.64413 3.75149 3.64413 3.62452C3.64413 3.29129 3.57538 3.29129 11.8714 2.69421C13.4582 2.58644 16.0633 2.39071 17.6502 2.26312C21.0871 1.98874 22.1159 1.99865 22.752 2.28232ZM28.6677 7.63996C28.8046 7.77685 28.9223 8.04132 28.9613 8.29589C28.9904 8.53125 29.0102 12.9189 28.9904 18.0313C28.9613 26.8067 28.9514 27.3555 28.7848 27.61C28.6869 27.7667 28.4912 27.9333 28.3438 27.9823C27.9331 28.1489 8.43318 29.2557 8.03183 29.138C7.84601 29.0891 7.59083 28.9324 7.45394 28.7955L7.21858 28.541L7.18947 19.0799C7.16965 12.4395 7.18947 9.5012 7.26813 9.23672C7.32697 9.041 7.47376 8.80564 7.60136 8.72759C7.77788 8.60991 8.93364 8.51205 12.9101 8.2773C15.7016 8.1206 20.0206 7.85613 22.4987 7.70933C28.3933 7.34638 28.3741 7.34638 28.6677 7.63996Z" class="p0t9n dark:fill-neutral-200" fill="currentColor"/>
<path d="M23.4277 10.8818C22.3698 10.9506 21.4296 11.0484 21.3218 11.1073C20.9985 11.2739 20.8028 11.5483 20.7638 11.8617C20.7347 12.185 20.8325 12.224 21.8898 12.3516L22.35 12.4104V16.5925C22.35 19.0799 22.311 20.7256 22.2621 20.6767C22.2131 20.6178 20.8226 18.5027 19.167 15.9756C17.512 13.4392 16.1407 11.3525 16.1209 11.3333C16.1011 11.3135 15.024 11.3724 13.7313 11.4609C12.1445 11.5687 11.273 11.6666 11.0965 11.7644C10.8122 11.9112 10.4988 12.4303 10.4988 12.7734C10.4988 12.979 10.871 13.0868 11.6545 13.0868H12.0658V25.1139L11.4 25.3196C10.8809 25.4763 10.7044 25.5741 10.6165 25.7698C10.4598 26.1031 10.4697 26.4066 10.6264 26.4066C10.6852 26.4066 11.792 26.3378 13.0649 26.2598C15.582 26.113 15.8657 26.0442 16.1302 25.5252C16.2088 25.3685 16.277 25.2019 16.277 25.1529C16.277 25.1139 15.9345 24.9962 15.5226 24.8984C15.1014 24.8005 14.6802 24.7027 14.5923 24.6828C14.4257 24.6339 14.4157 24.3304 14.4157 20.1186V15.6033L17.3931 20.2753C20.5173 25.1721 20.9093 25.7308 21.3893 25.9755C21.987 26.2889 23.5051 26.0733 24.2688 25.5741L24.5042 25.4273L24.524 18.7479L24.5531 12.0586L25.0722 11.9608C25.6891 11.8431 25.9734 11.5594 25.9734 11.0695C25.9734 10.7561 25.9536 10.7362 25.66 10.7462C25.4847 10.7542 24.4757 10.813 23.4277 10.8818Z" class="p0t9n dark:fill-neutral-200" fill="currentColor"/>
</svg>
<div class="dgznh">
<span class="block tuuss hw6xt ejo46 dark:text-neutral-300">
Notion
</span>
<p class="block tuuss z0e83 dark:text-neutral-500">
Add your contacts to a Notion file and upload it here.
</p>
</div>
<div class="flex flex-col enhxb">
<button type="button" class="ur00w inline-flex items-center u3ov7 on128 hw6xt wavyl k9mkq je4jy o0y3u w3h0o pgsi2 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kebql isksk">
Connect
</button>
</div>
</div>
<!-- End Media -->
<!-- Media -->
<div class="xp67g flex pc3xl q6ob7 ltzuf uixns vxxhz xu4xz yxawv urtgc dark:border-neutral-700 dark:last:border-b-transparent">
<svg class="n2l26 x8hlq" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.6141 1.91994H9.45071C9.09999 1.91994 8.76367 2.05926 8.51567 2.30725C8.26767 2.55523 8.12839 2.89158 8.12839 3.24228V8.86395L20.0324 12.3359L31.9364 8.86395V3.24228C31.9364 2.89158 31.797 2.55523 31.549 2.30725C31.3011 2.05926 30.9647 1.91994 30.6141 1.91994Z" fill="#41A5EE"/>
<path d="M31.9364 8.86395H8.12839V15.8079L20.0324 19.2799L31.9364 15.8079V8.86395Z" fill="#2B7CD3"/>
<path d="M31.9364 15.8079H8.12839V22.7519L20.0324 26.2239L31.9364 22.7519V15.8079Z" fill="#185ABD"/>
<path d="M31.9364 22.752H8.12839V28.3736C8.12839 28.7244 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.696 9.45071 29.696H30.6141C30.9647 29.696 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7244 31.9364 28.3736V22.752Z" fill="#103F91"/>
<path opacity="0.1" d="M16.7261 6.87994H8.12839V25.7279H16.7261C17.0764 25.7269 17.4121 25.5872 17.6599 25.3395C17.9077 25.0917 18.0473 24.756 18.0484 24.4056V8.20226C18.0473 7.8519 17.9077 7.51616 17.6599 7.2684C17.4121 7.02064 17.0764 6.88099 16.7261 6.87994Z" class="p0t9n dark:fill-neutral-200" fill="currentColor"/>
<path opacity="0.2" d="M15.7341 7.87194H8.12839V26.7199H15.7341C16.0844 26.7189 16.4201 26.5792 16.6679 26.3315C16.9157 26.0837 17.0553 25.748 17.0564 25.3976V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" class="p0t9n dark:fill-neutral-200" fill="currentColor"/>
<path opacity="0.2" d="M15.7341 7.87194H8.12839V24.7359H15.7341C16.0844 24.7349 16.4201 24.5952 16.6679 24.3475C16.9157 24.0997 17.0553 23.764 17.0564 23.4136V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" class="p0t9n dark:fill-neutral-200" fill="currentColor"/>
<path opacity="0.2" d="M14.7421 7.87194H8.12839V24.7359H14.7421C15.0924 24.7349 15.4281 24.5952 15.6759 24.3475C15.9237 24.0997 16.0633 23.764 16.0644 23.4136V9.19426C16.0633 8.84386 15.9237 8.50818 15.6759 8.26042C15.4281 8.01266 15.0924 7.87299 14.7421 7.87194Z" class="p0t9n dark:fill-neutral-200" fill="currentColor"/>
<path d="M1.51472 7.87194H14.7421C15.0927 7.87194 15.4291 8.01122 15.6771 8.25922C15.925 8.50722 16.0644 8.84354 16.0644 9.19426V22.4216C16.0644 22.7723 15.925 23.1087 15.6771 23.3567C15.4291 23.6047 15.0927 23.7439 14.7421 23.7439H1.51472C1.16401 23.7439 0.827669 23.6047 0.579687 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579687 8.25922C0.827669 8.01122 1.16401 7.87194 1.51472 7.87194Z" fill="#185ABD"/>
<path d="M12.0468 20.7679H10.2612L8.17801 13.9231L5.99558 20.7679H4.20998L2.22598 10.8479H4.01158L5.40038 17.7919L7.48358 11.0463H8.97161L10.9556 17.7919L12.3444 10.8479H14.0308L12.0468 20.7679Z" fill="white"/>
</svg>
<div class="dgznh">
<span class="block tuuss hw6xt ejo46 dark:text-neutral-300">
Word file
</span>
<span class="block tuuss z0e83 dark:text-neutral-500">
Add your contacts to a Word file and upload it here.
</span>
</div>
<div class="flex flex-col enhxb">
<button type="button" class="ur00w inline-flex items-center u3ov7 on128 hw6xt wavyl k9mkq je4jy o0y3u w3h0o pgsi2 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kebql isksk">
Connect
</button>
</div>
</div>
<!-- End Media -->
</div>
</div>
<!-- End Body -->
<!-- Upload Form -->
<div class="jhb8q gxtht jhbd9 yxawv grf7k dark:bg-neutral-700 dark:border-neutral-700">
<!-- Drag 'n Drop -->
<div class="space-y-2">
<label class="block block madsw tuuss hw6xt ejo46 dark:text-neutral-200">
Upload file
</label>
<div class="qfp7x flex enhxb zxv30 k9mkq hq9av sga4h mzy38 dark:bg-neutral-800 dark:border-neutral-600">
<div class="cgjzl">
<svg class="mga1y lqxom mx-auto dark:text-neutral-400" width="70" height="46" viewBox="0 0 70 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.05172 9.36853L17.2131 7.5083V41.3608L12.3018 42.3947C9.01306 43.0871 5.79705 40.9434 5.17081 37.6414L1.14319 16.4049C0.515988 13.0978 2.73148 9.92191 6.05172 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="nadn9 vi5df dark:fill-neutral-800 dark:stroke-neutral-500"/>
<path d="M63.9483 9.36853L52.7869 7.5083V41.3608L57.6982 42.3947C60.9869 43.0871 64.203 40.9434 64.8292 37.6414L68.8568 16.4049C69.484 13.0978 67.2685 9.92191 63.9483 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="nadn9 vi5df dark:fill-neutral-800 dark:stroke-neutral-500"/>
<rect x="17.0656" y="1.62305" width="35.8689" height="42.7541" rx="5" fill="currentColor" stroke="currentColor" stroke-width="2" class="nadn9 vi5df dark:fill-neutral-800 dark:stroke-neutral-500"/>
<path d="M47.9344 44.3772H22.0655C19.3041 44.3772 17.0656 42.1386 17.0656 39.3772L17.0656 35.9161L29.4724 22.7682L38.9825 33.7121C39.7832 34.6335 41.2154 34.629 42.0102 33.7025L47.2456 27.5996L52.9344 33.7209V39.3772C52.9344 42.1386 50.6958 44.3772 47.9344 44.3772Z" stroke="currentColor" stroke-width="2" class="vi5df dark:stroke-neutral-500"/>
<circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="vi5df dark:stroke-neutral-500"/>
</svg>
<div class="p7mth flex flex-wrap enhxb gw8cm zqruk">
<span class="svb23 hw6xt ejo46 dark:text-neutral-200">
Drop your files here or
</span>
<label for="hs-pro-daiccf" class="relative cursor-pointer zxv30 hysdx j28t5 mg0zb wavyl njs8g h8tqt focus-within:outline-hidden jb7kr us03t jm9id dark:bg-neutral-800 dark:text-blue-500 dark:hover:text-blue-600">
<span>browse</span>
<input id="hs-pro-daiccf" type="file" class="r8a99">
</label>
</div>
<p class="kd00o on128 lqxom dark:text-neutral-400">
CSV, XLS, DOCX
</p>
</div>
</div>
</div>
<!-- End Drag 'n Drop -->
</div>
<!-- End Upload Form -->
</div>
</div>
</div>
<!-- End Import Contacts Modal -->