Tailwind CSS Product Tables Blocks

Product Tables

Product catalog and inventory tables with search, sorting, filters, status badges, tabs, and bulk actions for store admins and merchandisers.

Catalog Table with Search and Sorting Pro

Search, sorting, and product rows share one catalog screen with room for media, inventory, and status columns.

<div class="p-5 flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                      
                      <div class="mb-3 pb-2 flex flex-row justify-between gap-4 overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                        
                        <a class="min-w-57.5 max-w-57.5 group p-4 inline-flex flex-col justify-center items-center text-center bg-layer border border-layer-line rounded-xl shadow-2xs hover:shadow-md focus:outline-hidden focus:shadow-md transition" href="#">
                          <svg class="size-9 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg>
                          <div class="mt-3">
                            <h3 class="text-sm font-semibold text-foreground group-hover:text-primary group-focus:text-primary">
                              Product
                            </h3>
                            <p class="text-[13px] text-muted-foreground-1">
                              We can help to turn your great idea into a success
                            </p>
                          </div>
                        </a>

<a class="min-w-57.5 max-w-57.5 group p-4 inline-flex flex-col justify-center items-center text-center bg-layer border border-layer-line rounded-xl shadow-2xs hover:shadow-md focus:outline-hidden focus:shadow-md transition" href="#">
                          <svg class="size-9 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m15 9-6 6"/><path d="M9 9h.01"/><path d="M15 15h.01"/></svg>
                          <div class="mt-3">
                            <h3 class="text-sm font-semibold text-foreground group-hover:text-primary group-focus:text-primary">
                              Discount
                            </h3>
                            <p class="text-[13px] text-muted-foreground-1">
                              Attract new customers or reward loyal customers
                            </p>
                          </div>
                        </a>

<a class="min-w-57.5 max-w-57.5 group p-4 inline-flex flex-col justify-center items-center text-center bg-layer border border-layer-line rounded-xl shadow-2xs hover:shadow-md focus:outline-hidden focus:shadow-md transition" href="#">
                          <svg class="size-9 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"/><path d="m7 16.5-4.74-2.85"/><path d="m7 16.5 5-3"/><path d="M7 16.5v5.17"/><path d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"/><path d="m17 16.5-5-3"/><path d="m17 16.5 4.74-2.85"/><path d="M17 16.5v5.17"/><path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"/><path d="M12 8 7.26 5.15"/><path d="m12 8 4.74-2.85"/></svg>
                          <div class="mt-3">
                            <h3 class="text-sm font-semibold text-foreground group-hover:text-primary group-focus:text-primary">
                              Collection
                            </h3>
                            <p class="text-[13px] text-muted-foreground-1">
                              Create a new collection of products
                            </p>
                          </div>
                        </a>

<a class="min-w-57.5 max-w-57.5 group p-4 inline-flex flex-col justify-center items-center text-center bg-layer border border-layer-line rounded-xl shadow-2xs hover:shadow-md focus:outline-hidden focus:shadow-md transition" href="#">
                          <svg class="size-9 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
                          <div class="mt-3">
                            <h3 class="text-sm font-semibold text-foreground group-hover:text-primary group-focus:text-primary">
                              Get paid
                            </h3>
                            <p class="text-[13px] text-muted-foreground-1">
                              Receive money with Preline's fast and secure payment
                            </p>
                          </div>
                        </a>

<a class="min-w-57.5 max-w-57.5 group p-4 inline-flex flex-col justify-center items-center text-center bg-layer border border-layer-line rounded-xl shadow-2xs hover:shadow-md focus:outline-hidden focus:shadow-md transition" href="#">
                          <svg class="size-9 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/></svg>
                          <div class="mt-3">
                            <h3 class="text-sm font-semibold text-foreground group-hover:text-primary group-focus:text-primary">
                              Preline products
                            </h3>
                            <p class="text-[13px] text-muted-foreground-1">
                              A collection of 100+ Preline products and more
                            </p>
                          </div>
                        </a>
                        
                      </div>

<div class="pb-4 flex justify-between items-center flex-wrap gap-2 md:gap-5 border-b border-card-header">
                        <div>
                          <h2 class="inline-block font-semibold text-foreground">
                            Top products
                          </h2>
                        </div>

<div>
                          
                          <div class="relative">
                            <div class="absolute inset-y-0 inset-s-0 flex items-center pointer-events-none z-20 ps-3.5">
                              <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"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                            </div>
                            <input type="text" class="py-1.5 sm:py-2 ps-10 pe-8 block w-full min-w-75 bg-surface border-surface-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:bg-layer focus:border-primary-focus focus:ring-primary-focus checked:border-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Search products">
                            <div class="hidden absolute inset-y-0 inset-e-0 flex items-center z-20 pe-1">
                              <button type="button" class="inline-flex shrink-0 justify-center items-center size-6 rounded-full text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" aria-label="Close">
                                <span class="sr-only">Close</span>
                                <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"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
                              </button>
                            </div>
                          </div>
                          
                        </div>
                        
                      </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptits">
                                    <div class="p-1">
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                        Sort ascending
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                        Sort descending
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                        Move left
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                        Move right
                                      </button>

<th scope="col">
                                
                                <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                  <button id="hs-pro-eptchs" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    Change
                                    <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptchs">
                                    <div class="p-1">
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                        Sort ascending
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                        Sort descending
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                        Move left
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                        Move right
                                      </button>

<th scope="col">
                                
                                <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                  <button id="hs-pro-eptprs" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    Price
                                    <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptprs">
                                    <div class="p-1">
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                        Sort ascending
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                        Sort descending
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                        Move left
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                        Move right
                                      </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptsls">
                                    <div class="p-1">
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                        Sort ascending
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                        Sort descending
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                        Move left
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                        Move right
                                      </button>

<th scope="col">
                                
                                <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                  <button id="hs-pro-eptsas" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    Sales
                                    <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptsas">
                                    <div class="p-1">
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                        Sort ascending
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                        Sort descending
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                        Move left
                                      </button>
                                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                        <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                        Move right
                                      </button>

<tbody class="divide-y divide-table-line">
                            <tr class="hover:bg-surface cursor-pointer">
                              <td class="size-px whitespace-nowrap ps-3 py-3 align-top">
                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                              </td>
                              <td class="size-px py-3 px-5 relative">
                                <a class="before:z-9 before:absolute before:inset-0" href="#"></a>
                                <div class="w-full flex items-center gap-x-3">
                                  <img class="shrink-0 size-9.5 rounded-md" src="https://images.unsplash.com/photo-1528310385748-dba09bf1657a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                                  <div class="grow">
                                    <span class="text-sm font-medium text-foreground">
                                      Google Home
                                    </span>
                                  </div>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  72%
                                  <span class="inline-block text-red-500">
                                    3.1%
                                    <svg class="inline-block align-middle size-4 text-red-500" 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="22 17 13.5 8.5 8.5 13.5 2 7"></polyline><polyline points="16 17 22 17 22 11"></polyline></svg>
                                  </span>
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  $65
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  7,545
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="font-semibold text-sm text-foreground">
                                  $15,302.00
                                </span>
                              </td>
                            </tr>

<tr class="hover:bg-surface cursor-pointer">
                              <td class="size-px whitespace-nowrap ps-3 py-3 align-top">
                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                              </td>
                              <td class="size-px py-3 px-5 relative">
                                <a class="before:z-9 before:absolute before:inset-0" href="#"></a>
                                <div class="w-full flex items-center gap-x-3">
                                  <img class="shrink-0 size-9.5 rounded-md" src="https://images.unsplash.com/photo-1613852348851-df1739db8201?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                                  <div class="grow">
                                    <span class="text-sm font-medium text-foreground">
                                      Calvin Klein T-shirts
                                    </span>
                                  </div>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  50%
                                  <span class="inline-block text-green-500">
                                    47%
                                    <svg class="inline-block align-middle size-4 text-green-500" 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="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>
                                  </span>
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  $89
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  4,714
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="font-semibold text-sm text-foreground">
                                  $8,466.02
                                </span>
                              </td>
                            </tr>

<tr class="hover:bg-surface cursor-pointer">
                              <td class="size-px whitespace-nowrap ps-3 py-3 align-top">
                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                              </td>
                              <td class="size-px py-3 px-5 relative">
                                <a class="before:z-9 before:absolute before:inset-0" href="#"></a>
                                <div class="w-full flex items-center gap-x-3">
                                  <img class="shrink-0 size-9.5 rounded-md" src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                                  <div class="grow">
                                    <span class="text-sm font-medium text-foreground">
                                      RayBan black sunglasses
                                    </span>
                                  </div>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  65%
                                  <span class="inline-block text-red-500">
                                    0.9%
                                    <svg class="inline-block align-middle size-4 text-red-500" 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="22 17 13.5 8.5 8.5 13.5 2 7"></polyline><polyline points="16 17 22 17 22 11"></polyline></svg>
                                  </span>
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  $37
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  5,951
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="font-semibold text-sm text-foreground">
                                  $10,351.71
                                </span>
                              </td>
                            </tr>

<tr class="hover:bg-surface cursor-pointer">
                              <td class="size-px whitespace-nowrap ps-3 py-3 align-top">
                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                              </td>
                              <td class="size-px py-3 px-5 relative">
                                <a class="before:z-9 before:absolute before:inset-0" href="#"></a>
                                <div class="w-full flex items-center gap-x-3">
                                  <img class="shrink-0 size-9.5 rounded-md" src="https://images.unsplash.com/photo-1610398752800-146f269dfcc8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                                  <div class="grow">
                                    <span class="text-sm font-medium text-foreground">
                                      Mango Women's shoe
                                    </span>
                                  </div>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  53%
                                  <span class="inline-block text-red-500">
                                    0.1%
                                    <svg class="inline-block align-middle size-4 text-red-500" 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="22 17 13.5 8.5 8.5 13.5 2 7"></polyline><polyline points="16 17 22 17 22 11"></polyline></svg>
                                  </span>
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  $65
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  5,002
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="font-semibold text-sm text-foreground">
                                  $9,917.45
                                </span>
                              </td>
                            </tr>

<tr class="hover:bg-surface cursor-pointer">
                              <td class="size-px whitespace-nowrap ps-3 py-3 align-top">
                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                              </td>
                              <td class="size-px py-3 px-5 relative">
                                <a class="before:z-9 before:absolute before:inset-0" href="#"></a>
                                <div class="w-full flex items-center gap-x-3">
                                  <img class="shrink-0 size-9.5 rounded-md" src="https://images.unsplash.com/photo-1620799140408-edc6dcb6d633?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                                  <div class="grow">
                                    <span class="text-sm font-medium text-foreground">
                                      Plain white sweater
                                    </span>
                                  </div>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  69%
                                  <span class="inline-block text-green-500">
                                    14.2%
                                    <svg class="inline-block align-middle size-4 text-green-500" 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="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>
                                  </span>
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  $21
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  6,643
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="font-semibold text-sm text-foreground">
                                  $12,492.21
                                </span>
                              </td>
                            </tr>

<tr class="hover:bg-surface cursor-pointer">
                              <td class="size-px whitespace-nowrap ps-3 py-3 align-top">
                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                              </td>
                              <td class="size-px py-3 px-5 relative">
                                <a class="before:z-9 before:absolute before:inset-0" href="#"></a>
                                <div class="w-full flex items-center gap-x-3">
                                  <img class="shrink-0 size-9.5 rounded-md" src="https://images.unsplash.com/photo-1611911813383-67769b37a149?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                                  <div class="grow">
                                    <span class="text-sm font-medium text-foreground">
                                      Pattern Winter Sweater
                                    </span>
                                  </div>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  42%
                                  <span class="inline-block text-green-500">
                                    8.1%
                                    <svg class="inline-block align-middle size-4 text-green-500" 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="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>
                                  </span>
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  $47
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  3,391
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="font-semibold text-sm text-foreground">
                                  $7,089.10
                                </span>
                              </td>
                            </tr>

<tr class="hover:bg-surface cursor-pointer">
                              <td class="size-px whitespace-nowrap ps-3 py-3 align-top">
                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                              </td>
                              <td class="size-px py-3 px-5 relative">
                                <a class="before:z-9 before:absolute before:inset-0" href="#"></a>
                                <div class="w-full flex items-center gap-x-3">
                                  <img class="shrink-0 size-9.5 rounded-md" src="https://images.unsplash.com/photo-1616969899621-0ea269426a21?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                                  <div class="grow">
                                    <span class="text-sm font-medium text-foreground">
                                      White Blazer by Armani
                                    </span>
                                  </div>
                                </div>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  11%
                                  <span class="inline-block text-red-500">
                                    0.3%
                                    <svg class="inline-block align-middle size-4 text-red-500" 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="22 17 13.5 8.5 8.5 13.5 2 7"></polyline><polyline points="16 17 22 17 22 11"></polyline></svg>
                                  </span>
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  $17
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="text-sm text-muted-foreground-2">
                                  4,191
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap py-3 px-5">
                                <span class="font-semibold text-sm text-foreground">
                                  $8,610
                                </span>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        
                      </div>
                      </div>

<div class="mt-5">
                        
                        <div class="flex flex-wrap justify-between items-center gap-2">
  
                          
                          <div class="relative inline-block">
                            <select 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 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-focus",
                                "dropdownClasses": "mt-2 z-50 w-16 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-1.5 px-2 w-full text-[13px] text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                                "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>"
                              }' class="hidden">
                              <option value="">Choose</option>
                              <option>1</option>
                              <option>2</option>
                              <option>3</option>
                              <option>4</option>
                              <option selected>5</option>
                              <option>6</option>
                              <option>7</option>
                            </select>
                          </div>
                          
  
                          <a class="inline-flex items-center gap-x-1 text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">
                            All top products
                            <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"><path d="m9 18 6-6-6-6"></path></svg>
                          </a>
                        </div>
                        
                      </div>
                      
                    </div>

Open related ecommerce admin dashboard

Product Table with Tabs and Bulk Actions Pro

Tabs split the table by product state, while checkboxes and header actions support batch changes.

<div class="p-5 space-y-4 flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                      
                      <nav  class="flex gap-1 relative after:absolute after:bottom-0 after:inset-x-0 after:border-b after:border-line-2" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                        <button type="button" class="hs-tab-active:after:bg-foreground hs-tab-active:text-foreground px-2.5 py-1.5 mb-2 relative inline-flex justify-center items-center gap-x-2 hover:bg-muted-hover text-muted-foreground-1 hover:text-foreground text-sm rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus focus:text-foreground after:absolute after:-bottom-2 after:inset-x-0 after:z-10 after:h-0.5 after:pointer-events-none disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden active" id="hs-pro-tabs-dut-item-all" aria-selected="true" data-hs-tab="#hs-pro-tabs-dut-all" aria-controls="hs-pro-tabs-dut-all" role="tab" >
                          All
                        </button>
                        <button type="button" class="hs-tab-active:after:bg-foreground hs-tab-active:text-foreground px-2.5 py-1.5 mb-2 relative inline-flex justify-center items-center gap-x-2 hover:bg-muted-hover text-muted-foreground-1 hover:text-foreground text-sm rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus focus:text-foreground after:absolute after:-bottom-2 after:inset-x-0 after:z-10 after:h-0.5 after:pointer-events-none disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-dut-item-archived" aria-selected="false" data-hs-tab="#hs-pro-tabs-dut-archived" aria-controls="hs-pro-tabs-dut-archived" role="tab" >
                          Archived
                        </button>
                        <button type="button" class="hs-tab-active:after:bg-foreground hs-tab-active:text-foreground px-2.5 py-1.5 mb-2 relative inline-flex justify-center items-center gap-x-2 hover:bg-muted-hover text-muted-foreground-1 hover:text-foreground text-sm rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus focus:text-foreground after:absolute after:-bottom-2 after:inset-x-0 after:z-10 after:h-0.5 after:pointer-events-none disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-dut-item-publish" aria-selected="false" data-hs-tab="#hs-pro-tabs-dut-publish" aria-controls="hs-pro-tabs-dut-publish" role="tab" >
                          Publish
                        </button>
                        <button type="button" class="hs-tab-active:after:bg-foreground hs-tab-active:text-foreground px-2.5 py-1.5 mb-2 relative inline-flex justify-center items-center gap-x-2 hover:bg-muted-hover text-muted-foreground-1 hover:text-foreground text-sm rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus focus:text-foreground after:absolute after:-bottom-2 after:inset-x-0 after:z-10 after:h-0.5 after:pointer-events-none disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-dut-item-unpublish" aria-selected="false" data-hs-tab="#hs-pro-tabs-dut-unpublish" aria-controls="hs-pro-tabs-dut-unpublish" role="tab" >
                          Unpublish
                        </button>
                      </nav>

<div class="pb-4 grid md:grid-cols-2 gap-y-2 md:gap-y-0 md:gap-x-5 border-b border-line-2">
                        <div>
                          
                          <div class="relative">
                            <div class="absolute inset-y-0 inset-s-0 flex items-center pointer-events-none z-20 ps-3.5">
                              <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"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                            </div>
                            <input type="text" class="py-1.5 sm:py-2 ps-10 pe-8 block w-full min-w-75 bg-surface border-surface-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:bg-layer focus:border-primary-focus focus:ring-primary-focus checked:border-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Search products">
                            <div class="hidden absolute inset-y-0 inset-e-0 flex items-center z-20 pe-1">
                              <button type="button" class="inline-flex shrink-0 justify-center items-center size-6 rounded-full text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" aria-label="Close">
                                <span class="sr-only">Close</span>
                                <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"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
                              </button>
                            </div>
                          </div>
                          
                        </div>

<div class="flex md:justify-end items-center gap-x-2">
                          
                          <div class="hs-dropdown [--auto-close:true] relative inline-flex">
                            
                            <button id="hs-pro-dptied" type="button" class="py-2 px-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                              <svg class="shrink-0 mt-0.5 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"><path d="m3 16 4 4 4-4"/><path d="M7 20V4"/><path d="m21 8-4-4-4 4"/><path d="M17 4v16"/></svg>
                              Import / Export
                              <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"><path d="m6 9 6 6 6-6"/></svg>
                            </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-48 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dptied">
                              <div class="p-1">
                                <button type="button" class="w-full flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-eipm">
                                  <svg class="shrink-0 mt-0.5 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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                                  Import products
                                </button>
                                <button type="button" class="w-full flex gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-eepm">
                                  <svg class="shrink-0 mt-0.5 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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
                                  Export products
                                </button>
                              </div>
                            </div>
                            
                          </div>

<button type="button" class="py-3 px-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-pro-epfo">
                            <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"><line x1="21" x2="14" y1="4" y2="4"/><line x1="10" x2="3" y1="4" y2="4"/><line x1="21" x2="12" y1="12" y2="12"/><line x1="8" x2="3" y1="12" y2="12"/><line x1="21" x2="16" y1="20" y2="20"/><line x1="12" x2="3" y1="20" y2="20"/><line x1="14" x2="14" y1="2" y2="6"/><line x1="8" x2="8" y1="10" y2="14"/><line x1="16" x2="16" y1="18" y2="22"/></svg>
                            Filter
                            <span class="font-medium text-[10px] py-0.5 px-2 bg-secondary text-secondary-foreground leading-3 rounded-full">
                              2
                            </span>
                          </button>
                          
                        </div>
                        
                      </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptits">
                                          <div class="p-1">
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                              Sort ascending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                              Sort descending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                              Move left
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                              Move right
                                            </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-epttys">
                                          <div class="p-1">
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                              Sort ascending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                              Sort descending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                              Move left
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                              Move right
                                            </button>

<th scope="col">
                                      
                                      <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                        <button id="hs-pro-eptsts" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          Stocks
                                          <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                        </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptsts">
                                          <div class="p-1">
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                              Sort ascending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                              Sort descending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                              Move left
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                              Move right
                                            </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptsks">
                                          <div class="p-1">
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                              Sort ascending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                              Sort descending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                              Move left
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                              Move right
                                            </button>

<th scope="col">
                                      
                                      <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                        <button id="hs-pro-eptprs" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          Price
                                          <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                        </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptprs">
                                          <div class="p-1">
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                              Sort ascending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                              Sort descending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                              Move left
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                              Move right
                                            </button>

<th scope="col" class="min-w-40">
                                      
                                      <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                                        <button id="hs-pro-eptai" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          Available In
                                          <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                        </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptai">
                                          <div class="p-1">
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                              Sort ascending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                                              Sort descending
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                                              Move left
                                            </button>
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                              Move right
                                            </button>

<tbody class="divide-y divide-table-line">
                                  <tr>
                                    <td class="size-px whitespace-nowrap ps-3 py-4">
                                      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="w-full flex items-center gap-x-3">
                                        <img class="shrink-0 size-12 rounded-md" src="https://images.unsplash.com/photo-1528310385748-dba09bf1657a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                                        <div class="grow">
                                          <a class="text-sm font-medium text-foreground hover:text-primary-hover decoration-2 hover:underline focus:outline-hidden focus:underline focus:text-primary-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                            Google Home
                                          </a>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        Electronics
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap justify-between items-center gap-2">
                                        <label class="relative inline-block w-9 h-5 cursor-pointer">
                                          <input type="checkbox" class="peer sr-only">
                                          <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                          <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                                        </label>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        2384741241
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        $65
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap gap-1">
                                        <span class="p-2 bg-surface text-surface-foreground text-xs rounded-md">
                                          🛍️ In store
                                        </span>
                                        <span class="p-2 bg-surface text-surface-foreground text-xs rounded-md">
                                          🌐 Online
                                        </span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="inline-flex items-center -space-x-px">
                                        <a class="size-8 inline-flex justify-center items-center gap-x-2 font-medium rounded-s-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                          <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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                        </a>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                                          <button id="hs-pro-etwsdd1" type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-e-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                            <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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                                          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-etwsdd1">
                                            <div class="p-1">
                                              <div class="py-2 px-3">
                                                <span class="block font-semibold text-foreground">
                                                  Download Report
                                                </span>
                                                <span class="block text-xs text-muted-foreground-1">
                                                  Select Options
                                                </span>
                                              </div>

<div class="py-1 px-2">
                                                <div class="flex items-center bg-surface rounded-xl p-1">
                                                  <label for="hs-pro-etwsdd1ts1" class="relative py-1.5 px-3 w-full cursor-pointer text-center text-sm text-foreground rounded-lg has-checked:bg-layer has-checked:shadow-2xs">
                                                    <svg class="relative z-10 me-1.5 inline-block align-middle shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.0324 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 15.8079L25.9844 18.3197L31.9364 15.8079V8.86395L20.0324 1.91994Z" fill="#21A366"/><path d="M8.12839 8.86395H20.0324V15.8079H8.12839V8.86395Z" fill="#107C41"/><path d="M30.614 1.91994H20.0324V8.86395H31.9364V3.24228C31.9364 2.89158 31.7971 2.55523 31.5491 2.30725C31.3011 2.05926 30.9647 1.91994 30.614 1.91994Z" fill="#33C481"/><path d="M20.0324 15.8079H8.12839V28.3736C8.12839 28.7243 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.6959 9.45071 29.6959H30.6141C30.9647 29.6959 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7243 31.9364 28.3736V22.7519L20.0324 15.8079Z" fill="#185C37"/><path d="M20.0324 15.8079H31.9364V22.7519H20.0324V15.8079Z" fill="#107C41"/><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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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.16402 23.7439 0.827672 23.6047 0.579686 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579686 8.25922C0.827672 8.01122 1.16402 7.87194 1.51472 7.87194Z" fill="#107C41"/><path d="M3.69711 20.7679L6.90722 15.794L3.96694 10.8479H6.33286L7.93791 14.0095C8.08536 14.3091 8.18688 14.5326 8.24248 14.68H8.26328C8.36912 14.4407 8.47984 14.2079 8.5956 13.9817L10.3108 10.8479H12.4822L9.46656 15.7663L12.5586 20.7679H10.2473L8.3932 17.2959C8.30592 17.148 8.23184 16.9927 8.172 16.8317H8.14424C8.09016 16.9891 8.01824 17.1399 7.92998 17.2811L6.02236 20.7679H3.69711Z" fill="white"/></svg><span class="relative z-10 align-middle">Excel</span>
                                                    <input type="radio" name="hs-pro-etwsdd1ts" class="hidden" id="hs-pro-etwsdd1ts1" checked >
                                                  </label>

<div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd1s1" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Item
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd1s1" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd1s2" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Type
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd1s2" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd1s3" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Stocks
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd1s3" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd1s4" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  SKU
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd1s4" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd1s5" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Price
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd1s5" checked >
                                              </div>

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

<tr>
                                    <td class="size-px whitespace-nowrap ps-3 py-4">
                                      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="w-full flex items-center gap-x-3">
                                        <img class="shrink-0 size-12 rounded-md" src="https://images.unsplash.com/photo-1613852348851-df1739db8201?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                                        <div class="grow">
                                          <a class="text-sm font-medium text-foreground hover:text-primary-hover decoration-2 hover:underline focus:outline-hidden focus:underline focus:text-primary-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                            Calvin Klein T-shirts
                                          </a>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        Clothing
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap justify-between items-center gap-2">
                                        <label class="relative inline-block w-9 h-5 cursor-pointer">
                                          <input type="checkbox" class="peer sr-only" checked>
                                          <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                          <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                                        </label>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        4124123847
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        $21
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap gap-1">
                                        <span class="p-2 bg-surface text-surface-foreground text-xs rounded-md">
                                          🛍️ In store
                                        </span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="inline-flex items-center -space-x-px">
                                        <a class="size-8 inline-flex justify-center items-center gap-x-2 font-medium rounded-s-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                          <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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                        </a>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                                          <button id="hs-pro-etwsdd2" type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-e-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                            <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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                                          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-etwsdd2">
                                            <div class="p-1">
                                              <div class="py-2 px-3">
                                                <span class="block font-semibold text-foreground">
                                                  Download Report
                                                </span>
                                                <span class="block text-xs text-muted-foreground-1">
                                                  Select Options
                                                </span>
                                              </div>

<div class="py-1 px-2">
                                                <div class="flex items-center bg-surface rounded-xl p-1">
                                                  <label for="hs-pro-etwsdd2ts1" class="relative py-1.5 px-3 w-full cursor-pointer text-center text-sm text-foreground rounded-lg has-checked:bg-layer has-checked:shadow-2xs">
                                                    <svg class="relative z-10 me-1.5 inline-block align-middle shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.0324 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 15.8079L25.9844 18.3197L31.9364 15.8079V8.86395L20.0324 1.91994Z" fill="#21A366"/><path d="M8.12839 8.86395H20.0324V15.8079H8.12839V8.86395Z" fill="#107C41"/><path d="M30.614 1.91994H20.0324V8.86395H31.9364V3.24228C31.9364 2.89158 31.7971 2.55523 31.5491 2.30725C31.3011 2.05926 30.9647 1.91994 30.614 1.91994Z" fill="#33C481"/><path d="M20.0324 15.8079H8.12839V28.3736C8.12839 28.7243 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.6959 9.45071 29.6959H30.6141C30.9647 29.6959 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7243 31.9364 28.3736V22.7519L20.0324 15.8079Z" fill="#185C37"/><path d="M20.0324 15.8079H31.9364V22.7519H20.0324V15.8079Z" fill="#107C41"/><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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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.16402 23.7439 0.827672 23.6047 0.579686 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579686 8.25922C0.827672 8.01122 1.16402 7.87194 1.51472 7.87194Z" fill="#107C41"/><path d="M3.69711 20.7679L6.90722 15.794L3.96694 10.8479H6.33286L7.93791 14.0095C8.08536 14.3091 8.18688 14.5326 8.24248 14.68H8.26328C8.36912 14.4407 8.47984 14.2079 8.5956 13.9817L10.3108 10.8479H12.4822L9.46656 15.7663L12.5586 20.7679H10.2473L8.3932 17.2959C8.30592 17.148 8.23184 16.9927 8.172 16.8317H8.14424C8.09016 16.9891 8.01824 17.1399 7.92998 17.2811L6.02236 20.7679H3.69711Z" fill="white"/></svg><span class="relative z-10 align-middle">Excel</span>
                                                    <input type="radio" name="hs-pro-etwsdd2ts" class="hidden" id="hs-pro-etwsdd2ts1" checked >
                                                  </label>

<div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd2s1" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Item
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd2s1" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd2s2" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Type
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd2s2" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd2s3" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Stocks
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd2s3" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd2s4" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  SKU
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd2s4" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd2s5" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Price
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd2s5" checked >
                                              </div>

<tr>
                                    <td class="size-px whitespace-nowrap ps-3 py-4">
                                      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="w-full flex items-center gap-x-3">
                                        <img class="shrink-0 size-12 rounded-md" src="https://images.unsplash.com/photo-1611911813383-67769b37a149?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                                        <div class="grow">
                                          <a class="text-sm font-medium text-foreground hover:text-primary-hover decoration-2 hover:underline focus:outline-hidden focus:underline focus:text-primary-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                            Pattern Winter Sweater
                                          </a>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        Accessories
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap justify-between items-center gap-2">
                                        <label class="relative inline-block w-9 h-5 cursor-pointer">
                                          <input type="checkbox" class="peer sr-only">
                                          <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                          <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                                        </label>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        8472341241
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        $37
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap gap-1">
                                        <span class="p-2 bg-surface text-surface-foreground text-xs rounded-md">
                                          🛍️ In store
                                        </span>
                                        <span class="p-2 bg-surface text-surface-foreground text-xs rounded-md">
                                          🌐 Online
                                        </span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="inline-flex items-center -space-x-px">
                                        <a class="size-8 inline-flex justify-center items-center gap-x-2 font-medium rounded-s-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                          <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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                        </a>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                                          <button id="hs-pro-etwsdd3" type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-e-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                            <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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                                          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-etwsdd3">
                                            <div class="p-1">
                                              <div class="py-2 px-3">
                                                <span class="block font-semibold text-foreground">
                                                  Download Report
                                                </span>
                                                <span class="block text-xs text-muted-foreground-1">
                                                  Select Options
                                                </span>
                                              </div>

<div class="py-1 px-2">
                                                <div class="flex items-center bg-surface rounded-xl p-1">
                                                  <label for="hs-pro-etwsdd3ts1" class="relative py-1.5 px-3 w-full cursor-pointer text-center text-sm text-foreground rounded-lg has-checked:bg-layer has-checked:shadow-2xs">
                                                    <svg class="relative z-10 me-1.5 inline-block align-middle shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.0324 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 15.8079L25.9844 18.3197L31.9364 15.8079V8.86395L20.0324 1.91994Z" fill="#21A366"/><path d="M8.12839 8.86395H20.0324V15.8079H8.12839V8.86395Z" fill="#107C41"/><path d="M30.614 1.91994H20.0324V8.86395H31.9364V3.24228C31.9364 2.89158 31.7971 2.55523 31.5491 2.30725C31.3011 2.05926 30.9647 1.91994 30.614 1.91994Z" fill="#33C481"/><path d="M20.0324 15.8079H8.12839V28.3736C8.12839 28.7243 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.6959 9.45071 29.6959H30.6141C30.9647 29.6959 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7243 31.9364 28.3736V22.7519L20.0324 15.8079Z" fill="#185C37"/><path d="M20.0324 15.8079H31.9364V22.7519H20.0324V15.8079Z" fill="#107C41"/><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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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.16402 23.7439 0.827672 23.6047 0.579686 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579686 8.25922C0.827672 8.01122 1.16402 7.87194 1.51472 7.87194Z" fill="#107C41"/><path d="M3.69711 20.7679L6.90722 15.794L3.96694 10.8479H6.33286L7.93791 14.0095C8.08536 14.3091 8.18688 14.5326 8.24248 14.68H8.26328C8.36912 14.4407 8.47984 14.2079 8.5956 13.9817L10.3108 10.8479H12.4822L9.46656 15.7663L12.5586 20.7679H10.2473L8.3932 17.2959C8.30592 17.148 8.23184 16.9927 8.172 16.8317H8.14424C8.09016 16.9891 8.01824 17.1399 7.92998 17.2811L6.02236 20.7679H3.69711Z" fill="white"/></svg><span class="relative z-10 align-middle">Excel</span>
                                                    <input type="radio" name="hs-pro-etwsdd3ts" class="hidden" id="hs-pro-etwsdd3ts1" checked >
                                                  </label>

<div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd3s1" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Item
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd3s1" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd3s2" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Type
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd3s2" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd3s3" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Stocks
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd3s3" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd3s4" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  SKU
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd3s4" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd3s5" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Price
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd3s5" checked >
                                              </div>

<tr>
                                    <td class="size-px whitespace-nowrap ps-3 py-4">
                                      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="w-full flex items-center gap-x-3">
                                        <img class="shrink-0 size-12 rounded-md" src="https://images.unsplash.com/photo-1610398752800-146f269dfcc8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                                        <div class="grow">
                                          <a class="text-sm font-medium text-foreground hover:text-primary-hover decoration-2 hover:underline focus:outline-hidden focus:underline focus:text-primary-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                            Mango Women's shoe
                                          </a>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        Shoes
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap justify-between items-center gap-2">
                                        <label class="relative inline-block w-9 h-5 cursor-pointer">
                                          <input type="checkbox" class="peer sr-only">
                                          <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                          <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                                        </label>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        2412384741
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        $65
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap gap-1">
                                        <span class="p-2 bg-surface text-surface-foreground text-xs rounded-md">
                                          🌐 Online
                                        </span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="inline-flex items-center -space-x-px">
                                        <a class="size-8 inline-flex justify-center items-center gap-x-2 font-medium rounded-s-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                          <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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                        </a>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                                          <button id="hs-pro-etwsdd4" type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-e-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                            <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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                                          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-etwsdd4">
                                            <div class="p-1">
                                              <div class="py-2 px-3">
                                                <span class="block font-semibold text-foreground">
                                                  Download Report
                                                </span>
                                                <span class="block text-xs text-muted-foreground-1">
                                                  Select Options
                                                </span>
                                              </div>

<div class="py-1 px-2">
                                                <div class="flex items-center bg-surface rounded-xl p-1">
                                                  <label for="hs-pro-etwsdd4ts1" class="relative py-1.5 px-3 w-full cursor-pointer text-center text-sm text-foreground rounded-lg has-checked:bg-layer has-checked:shadow-2xs">
                                                    <svg class="relative z-10 me-1.5 inline-block align-middle shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.0324 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 15.8079L25.9844 18.3197L31.9364 15.8079V8.86395L20.0324 1.91994Z" fill="#21A366"/><path d="M8.12839 8.86395H20.0324V15.8079H8.12839V8.86395Z" fill="#107C41"/><path d="M30.614 1.91994H20.0324V8.86395H31.9364V3.24228C31.9364 2.89158 31.7971 2.55523 31.5491 2.30725C31.3011 2.05926 30.9647 1.91994 30.614 1.91994Z" fill="#33C481"/><path d="M20.0324 15.8079H8.12839V28.3736C8.12839 28.7243 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.6959 9.45071 29.6959H30.6141C30.9647 29.6959 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7243 31.9364 28.3736V22.7519L20.0324 15.8079Z" fill="#185C37"/><path d="M20.0324 15.8079H31.9364V22.7519H20.0324V15.8079Z" fill="#107C41"/><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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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.16402 23.7439 0.827672 23.6047 0.579686 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579686 8.25922C0.827672 8.01122 1.16402 7.87194 1.51472 7.87194Z" fill="#107C41"/><path d="M3.69711 20.7679L6.90722 15.794L3.96694 10.8479H6.33286L7.93791 14.0095C8.08536 14.3091 8.18688 14.5326 8.24248 14.68H8.26328C8.36912 14.4407 8.47984 14.2079 8.5956 13.9817L10.3108 10.8479H12.4822L9.46656 15.7663L12.5586 20.7679H10.2473L8.3932 17.2959C8.30592 17.148 8.23184 16.9927 8.172 16.8317H8.14424C8.09016 16.9891 8.01824 17.1399 7.92998 17.2811L6.02236 20.7679H3.69711Z" fill="white"/></svg><span class="relative z-10 align-middle">Excel</span>
                                                    <input type="radio" name="hs-pro-etwsdd4ts" class="hidden" id="hs-pro-etwsdd4ts1" checked >
                                                  </label>

<div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd4s1" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Item
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd4s1" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd4s2" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Type
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd4s2" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd4s3" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Stocks
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd4s3" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd4s4" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  SKU
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd4s4" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd4s5" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Price
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd4s5" checked >
                                              </div>

<tr>
                                    <td class="size-px whitespace-nowrap ps-3 py-4">
                                      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="w-full flex items-center gap-x-3">
                                        <img class="shrink-0 size-12 rounded-md" src="https://images.unsplash.com/photo-1620799140408-edc6dcb6d633?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                                        <div class="grow">
                                          <a class="text-sm font-medium text-foreground hover:text-primary-hover decoration-2 hover:underline focus:outline-hidden focus:underline focus:text-primary-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                            Plain white sweater
                                          </a>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        Clothing
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap justify-between items-center gap-2">
                                        <label class="relative inline-block w-9 h-5 cursor-pointer">
                                          <input type="checkbox" class="peer sr-only" checked>
                                          <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                          <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                                        </label>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        8234741241
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        $89
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap gap-1">
                                        <span class="p-2 bg-surface text-surface-foreground text-xs rounded-md">
                                          🌐 Online
                                        </span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="inline-flex items-center -space-x-px">
                                        <a class="size-8 inline-flex justify-center items-center gap-x-2 font-medium rounded-s-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                          <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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                        </a>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                                          <button id="hs-pro-etwsdd5" type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-e-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                            <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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                                          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-etwsdd5">
                                            <div class="p-1">
                                              <div class="py-2 px-3">
                                                <span class="block font-semibold text-foreground">
                                                  Download Report
                                                </span>
                                                <span class="block text-xs text-muted-foreground-1">
                                                  Select Options
                                                </span>
                                              </div>

<div class="py-1 px-2">
                                                <div class="flex items-center bg-surface rounded-xl p-1">
                                                  <label for="hs-pro-etwsdd5ts1" class="relative py-1.5 px-3 w-full cursor-pointer text-center text-sm text-foreground rounded-lg has-checked:bg-layer has-checked:shadow-2xs">
                                                    <svg class="relative z-10 me-1.5 inline-block align-middle shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.0324 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 15.8079L25.9844 18.3197L31.9364 15.8079V8.86395L20.0324 1.91994Z" fill="#21A366"/><path d="M8.12839 8.86395H20.0324V15.8079H8.12839V8.86395Z" fill="#107C41"/><path d="M30.614 1.91994H20.0324V8.86395H31.9364V3.24228C31.9364 2.89158 31.7971 2.55523 31.5491 2.30725C31.3011 2.05926 30.9647 1.91994 30.614 1.91994Z" fill="#33C481"/><path d="M20.0324 15.8079H8.12839V28.3736C8.12839 28.7243 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.6959 9.45071 29.6959H30.6141C30.9647 29.6959 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7243 31.9364 28.3736V22.7519L20.0324 15.8079Z" fill="#185C37"/><path d="M20.0324 15.8079H31.9364V22.7519H20.0324V15.8079Z" fill="#107C41"/><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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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.16402 23.7439 0.827672 23.6047 0.579686 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579686 8.25922C0.827672 8.01122 1.16402 7.87194 1.51472 7.87194Z" fill="#107C41"/><path d="M3.69711 20.7679L6.90722 15.794L3.96694 10.8479H6.33286L7.93791 14.0095C8.08536 14.3091 8.18688 14.5326 8.24248 14.68H8.26328C8.36912 14.4407 8.47984 14.2079 8.5956 13.9817L10.3108 10.8479H12.4822L9.46656 15.7663L12.5586 20.7679H10.2473L8.3932 17.2959C8.30592 17.148 8.23184 16.9927 8.172 16.8317H8.14424C8.09016 16.9891 8.01824 17.1399 7.92998 17.2811L6.02236 20.7679H3.69711Z" fill="white"/></svg><span class="relative z-10 align-middle">Excel</span>
                                                    <input type="radio" name="hs-pro-etwsdd5ts" class="hidden" id="hs-pro-etwsdd5ts1" checked >
                                                  </label>

<div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd5s1" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Item
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd5s1" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd5s2" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Type
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd5s2" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd5s3" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Stocks
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd5s3" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd5s4" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  SKU
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd5s4" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd5s5" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Price
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd5s5" checked >
                                              </div>

<tr>
                                    <td class="size-px whitespace-nowrap ps-3 py-4">
                                      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="w-full flex items-center gap-x-3">
                                        <img class="shrink-0 size-12 rounded-md" src="https://images.unsplash.com/photo-1562273138-f46be4ebdf33?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                                        <div class="grow">
                                          <a class="text-sm font-medium text-foreground hover:text-primary-hover decoration-2 hover:underline focus:outline-hidden focus:underline focus:text-primary-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                            Maroon Wedges
                                          </a>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        Shoes
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap justify-between items-center gap-2">
                                        <label class="relative inline-block w-9 h-5 cursor-pointer">
                                          <input type="checkbox" class="peer sr-only">
                                          <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                          <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                                        </label>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        9984741241
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        $199
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap gap-1">
                                        <span class="p-2 bg-surface text-surface-foreground text-xs rounded-md">
                                          🛍️ In store
                                        </span>
                                        <span class="p-2 bg-surface text-surface-foreground text-xs rounded-md">
                                          🌐 Online
                                        </span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="inline-flex items-center -space-x-px">
                                        <a class="size-8 inline-flex justify-center items-center gap-x-2 font-medium rounded-s-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                          <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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                        </a>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                                          <button id="hs-pro-etwsdd6" type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-e-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                            <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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                                          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-etwsdd6">
                                            <div class="p-1">
                                              <div class="py-2 px-3">
                                                <span class="block font-semibold text-foreground">
                                                  Download Report
                                                </span>
                                                <span class="block text-xs text-muted-foreground-1">
                                                  Select Options
                                                </span>
                                              </div>

<div class="py-1 px-2">
                                                <div class="flex items-center bg-surface rounded-xl p-1">
                                                  <label for="hs-pro-etwsdd6ts1" class="relative py-1.5 px-3 w-full cursor-pointer text-center text-sm text-foreground rounded-lg has-checked:bg-layer has-checked:shadow-2xs">
                                                    <svg class="relative z-10 me-1.5 inline-block align-middle shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.0324 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 15.8079L25.9844 18.3197L31.9364 15.8079V8.86395L20.0324 1.91994Z" fill="#21A366"/><path d="M8.12839 8.86395H20.0324V15.8079H8.12839V8.86395Z" fill="#107C41"/><path d="M30.614 1.91994H20.0324V8.86395H31.9364V3.24228C31.9364 2.89158 31.7971 2.55523 31.5491 2.30725C31.3011 2.05926 30.9647 1.91994 30.614 1.91994Z" fill="#33C481"/><path d="M20.0324 15.8079H8.12839V28.3736C8.12839 28.7243 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.6959 9.45071 29.6959H30.6141C30.9647 29.6959 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7243 31.9364 28.3736V22.7519L20.0324 15.8079Z" fill="#185C37"/><path d="M20.0324 15.8079H31.9364V22.7519H20.0324V15.8079Z" fill="#107C41"/><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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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.16402 23.7439 0.827672 23.6047 0.579686 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579686 8.25922C0.827672 8.01122 1.16402 7.87194 1.51472 7.87194Z" fill="#107C41"/><path d="M3.69711 20.7679L6.90722 15.794L3.96694 10.8479H6.33286L7.93791 14.0095C8.08536 14.3091 8.18688 14.5326 8.24248 14.68H8.26328C8.36912 14.4407 8.47984 14.2079 8.5956 13.9817L10.3108 10.8479H12.4822L9.46656 15.7663L12.5586 20.7679H10.2473L8.3932 17.2959C8.30592 17.148 8.23184 16.9927 8.172 16.8317H8.14424C8.09016 16.9891 8.01824 17.1399 7.92998 17.2811L6.02236 20.7679H3.69711Z" fill="white"/></svg><span class="relative z-10 align-middle">Excel</span>
                                                    <input type="radio" name="hs-pro-etwsdd6ts" class="hidden" id="hs-pro-etwsdd6ts1" checked >
                                                  </label>

<div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd6s1" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Item
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd6s1" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd6s2" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Type
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd6s2" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd6s3" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Stocks
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd6s3" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd6s4" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  SKU
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd6s4" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd6s5" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Price
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd6s5" checked >
                                              </div>

<tr>
                                    <td class="size-px whitespace-nowrap ps-3 py-4">
                                      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="w-full flex items-center gap-x-3">
                                        <img class="shrink-0 size-12 rounded-md" src="https://images.unsplash.com/photo-1616969899621-0ea269426a21?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                                        <div class="grow">
                                          <a class="text-sm font-medium text-foreground hover:text-primary-hover decoration-2 hover:underline focus:outline-hidden focus:underline focus:text-primary-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                            White Blazer by Armani
                                          </a>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        Clothing
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap justify-between items-center gap-2">
                                        <label class="relative inline-block w-9 h-5 cursor-pointer">
                                          <input type="checkbox" class="peer sr-only" checked>
                                          <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                          <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                                        </label>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        7184741241
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        $17
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap gap-1">
                                        <span class="p-2 bg-surface text-surface-foreground text-xs rounded-md">
                                          🛍️ In store
                                        </span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="inline-flex items-center -space-x-px">
                                        <a class="size-8 inline-flex justify-center items-center gap-x-2 font-medium rounded-s-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                          <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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                        </a>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                                          <button id="hs-pro-etwsdd7" type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-e-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                            <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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                                          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-etwsdd7">
                                            <div class="p-1">
                                              <div class="py-2 px-3">
                                                <span class="block font-semibold text-foreground">
                                                  Download Report
                                                </span>
                                                <span class="block text-xs text-muted-foreground-1">
                                                  Select Options
                                                </span>
                                              </div>

<div class="py-1 px-2">
                                                <div class="flex items-center bg-surface rounded-xl p-1">
                                                  <label for="hs-pro-etwsdd7ts1" class="relative py-1.5 px-3 w-full cursor-pointer text-center text-sm text-foreground rounded-lg has-checked:bg-layer has-checked:shadow-2xs">
                                                    <svg class="relative z-10 me-1.5 inline-block align-middle shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.0324 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 15.8079L25.9844 18.3197L31.9364 15.8079V8.86395L20.0324 1.91994Z" fill="#21A366"/><path d="M8.12839 8.86395H20.0324V15.8079H8.12839V8.86395Z" fill="#107C41"/><path d="M30.614 1.91994H20.0324V8.86395H31.9364V3.24228C31.9364 2.89158 31.7971 2.55523 31.5491 2.30725C31.3011 2.05926 30.9647 1.91994 30.614 1.91994Z" fill="#33C481"/><path d="M20.0324 15.8079H8.12839V28.3736C8.12839 28.7243 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.6959 9.45071 29.6959H30.6141C30.9647 29.6959 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7243 31.9364 28.3736V22.7519L20.0324 15.8079Z" fill="#185C37"/><path d="M20.0324 15.8079H31.9364V22.7519H20.0324V15.8079Z" fill="#107C41"/><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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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.16402 23.7439 0.827672 23.6047 0.579686 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579686 8.25922C0.827672 8.01122 1.16402 7.87194 1.51472 7.87194Z" fill="#107C41"/><path d="M3.69711 20.7679L6.90722 15.794L3.96694 10.8479H6.33286L7.93791 14.0095C8.08536 14.3091 8.18688 14.5326 8.24248 14.68H8.26328C8.36912 14.4407 8.47984 14.2079 8.5956 13.9817L10.3108 10.8479H12.4822L9.46656 15.7663L12.5586 20.7679H10.2473L8.3932 17.2959C8.30592 17.148 8.23184 16.9927 8.172 16.8317H8.14424C8.09016 16.9891 8.01824 17.1399 7.92998 17.2811L6.02236 20.7679H3.69711Z" fill="white"/></svg><span class="relative z-10 align-middle">Excel</span>
                                                    <input type="radio" name="hs-pro-etwsdd7ts" class="hidden" id="hs-pro-etwsdd7ts1" checked >
                                                  </label>

<div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd7s1" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Item
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd7s1" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd7s2" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Type
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd7s2" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd7s3" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Stocks
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd7s3" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd7s4" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  SKU
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd7s4" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd7s5" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Price
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd7s5" checked >
                                              </div>

<tr>
                                    <td class="size-px whitespace-nowrap ps-3 py-4">
                                      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="w-full flex items-center gap-x-3">
                                        <img class="shrink-0 size-12 rounded-md" src="https://images.unsplash.com/photo-1548169874-53e85f753f1e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                                        <div class="grow">
                                          <a class="text-sm font-medium text-foreground hover:text-primary-hover decoration-2 hover:underline focus:outline-hidden focus:underline focus:text-primary-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                            Watch
                                          </a>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        Tech
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap justify-between items-center gap-2">
                                        <label class="relative inline-block w-9 h-5 cursor-pointer">
                                          <input type="checkbox" class="peer sr-only" checked>
                                          <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                          <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                                        </label>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        1084741241
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        $249
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap gap-1">
                                        <span class="p-2 bg-surface text-surface-foreground text-xs rounded-md">
                                          🌐 Online
                                        </span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="inline-flex items-center -space-x-px">
                                        <a class="size-8 inline-flex justify-center items-center gap-x-2 font-medium rounded-s-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                          <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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                        </a>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                                          <button id="hs-pro-etwsdd8" type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-e-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                            <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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                                          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-etwsdd8">
                                            <div class="p-1">
                                              <div class="py-2 px-3">
                                                <span class="block font-semibold text-foreground">
                                                  Download Report
                                                </span>
                                                <span class="block text-xs text-muted-foreground-1">
                                                  Select Options
                                                </span>
                                              </div>

<div class="py-1 px-2">
                                                <div class="flex items-center bg-surface rounded-xl p-1">
                                                  <label for="hs-pro-etwsdd8ts1" class="relative py-1.5 px-3 w-full cursor-pointer text-center text-sm text-foreground rounded-lg has-checked:bg-layer has-checked:shadow-2xs">
                                                    <svg class="relative z-10 me-1.5 inline-block align-middle shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.0324 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 15.8079L25.9844 18.3197L31.9364 15.8079V8.86395L20.0324 1.91994Z" fill="#21A366"/><path d="M8.12839 8.86395H20.0324V15.8079H8.12839V8.86395Z" fill="#107C41"/><path d="M30.614 1.91994H20.0324V8.86395H31.9364V3.24228C31.9364 2.89158 31.7971 2.55523 31.5491 2.30725C31.3011 2.05926 30.9647 1.91994 30.614 1.91994Z" fill="#33C481"/><path d="M20.0324 15.8079H8.12839V28.3736C8.12839 28.7243 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.6959 9.45071 29.6959H30.6141C30.9647 29.6959 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7243 31.9364 28.3736V22.7519L20.0324 15.8079Z" fill="#185C37"/><path d="M20.0324 15.8079H31.9364V22.7519H20.0324V15.8079Z" fill="#107C41"/><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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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.16402 23.7439 0.827672 23.6047 0.579686 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579686 8.25922C0.827672 8.01122 1.16402 7.87194 1.51472 7.87194Z" fill="#107C41"/><path d="M3.69711 20.7679L6.90722 15.794L3.96694 10.8479H6.33286L7.93791 14.0095C8.08536 14.3091 8.18688 14.5326 8.24248 14.68H8.26328C8.36912 14.4407 8.47984 14.2079 8.5956 13.9817L10.3108 10.8479H12.4822L9.46656 15.7663L12.5586 20.7679H10.2473L8.3932 17.2959C8.30592 17.148 8.23184 16.9927 8.172 16.8317H8.14424C8.09016 16.9891 8.01824 17.1399 7.92998 17.2811L6.02236 20.7679H3.69711Z" fill="white"/></svg><span class="relative z-10 align-middle">Excel</span>
                                                    <input type="radio" name="hs-pro-etwsdd8ts" class="hidden" id="hs-pro-etwsdd8ts1" checked >
                                                  </label>

<div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd8s1" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Item
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd8s1" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd8s2" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Type
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd8s2" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd8s3" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Stocks
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd8s3" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd8s4" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  SKU
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd8s4" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd8s5" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Price
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd8s5" checked >
                                              </div>

<tr>
                                    <td class="size-px whitespace-nowrap ps-3 py-4">
                                      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="w-full flex items-center gap-x-3">
                                        <img class="shrink-0 size-12 rounded-md" src="https://images.unsplash.com/photo-1549298916-f52d724204b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                                        <div class="grow">
                                          <a class="text-sm font-medium text-foreground hover:text-primary-hover decoration-2 hover:underline focus:outline-hidden focus:underline focus:text-primary-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                            Nike Air Jordan 1 Yellow
                                          </a>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        Shoes
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap justify-between items-center gap-2">
                                        <label class="relative inline-block w-9 h-5 cursor-pointer">
                                          <input type="checkbox" class="peer sr-only">
                                          <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                          <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                                        </label>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        4831441241
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        $149
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap gap-1">
                                        <span class="p-2 bg-surface text-surface-foreground text-xs rounded-md">
                                          🛍️ In store
                                        </span>
                                        <span class="p-2 bg-surface text-surface-foreground text-xs rounded-md">
                                          🌐 Online
                                        </span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="inline-flex items-center -space-x-px">
                                        <a class="size-8 inline-flex justify-center items-center gap-x-2 font-medium rounded-s-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                          <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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                        </a>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                                          <button id="hs-pro-etwsdd9" type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-e-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                            <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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                                          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-etwsdd9">
                                            <div class="p-1">
                                              <div class="py-2 px-3">
                                                <span class="block font-semibold text-foreground">
                                                  Download Report
                                                </span>
                                                <span class="block text-xs text-muted-foreground-1">
                                                  Select Options
                                                </span>
                                              </div>

<div class="py-1 px-2">
                                                <div class="flex items-center bg-surface rounded-xl p-1">
                                                  <label for="hs-pro-etwsdd9ts1" class="relative py-1.5 px-3 w-full cursor-pointer text-center text-sm text-foreground rounded-lg has-checked:bg-layer has-checked:shadow-2xs">
                                                    <svg class="relative z-10 me-1.5 inline-block align-middle shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.0324 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 15.8079L25.9844 18.3197L31.9364 15.8079V8.86395L20.0324 1.91994Z" fill="#21A366"/><path d="M8.12839 8.86395H20.0324V15.8079H8.12839V8.86395Z" fill="#107C41"/><path d="M30.614 1.91994H20.0324V8.86395H31.9364V3.24228C31.9364 2.89158 31.7971 2.55523 31.5491 2.30725C31.3011 2.05926 30.9647 1.91994 30.614 1.91994Z" fill="#33C481"/><path d="M20.0324 15.8079H8.12839V28.3736C8.12839 28.7243 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.6959 9.45071 29.6959H30.6141C30.9647 29.6959 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7243 31.9364 28.3736V22.7519L20.0324 15.8079Z" fill="#185C37"/><path d="M20.0324 15.8079H31.9364V22.7519H20.0324V15.8079Z" fill="#107C41"/><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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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.16402 23.7439 0.827672 23.6047 0.579686 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579686 8.25922C0.827672 8.01122 1.16402 7.87194 1.51472 7.87194Z" fill="#107C41"/><path d="M3.69711 20.7679L6.90722 15.794L3.96694 10.8479H6.33286L7.93791 14.0095C8.08536 14.3091 8.18688 14.5326 8.24248 14.68H8.26328C8.36912 14.4407 8.47984 14.2079 8.5956 13.9817L10.3108 10.8479H12.4822L9.46656 15.7663L12.5586 20.7679H10.2473L8.3932 17.2959C8.30592 17.148 8.23184 16.9927 8.172 16.8317H8.14424C8.09016 16.9891 8.01824 17.1399 7.92998 17.2811L6.02236 20.7679H3.69711Z" fill="white"/></svg><span class="relative z-10 align-middle">Excel</span>
                                                    <input type="radio" name="hs-pro-etwsdd9ts" class="hidden" id="hs-pro-etwsdd9ts1" checked >
                                                  </label>

<div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd9s1" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Item
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd9s1" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd9s2" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Type
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd9s2" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd9s3" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Stocks
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd9s3" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd9s4" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  SKU
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd9s4" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd9s5" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Price
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd9s5" checked >
                                              </div>

<tr>
                                    <td class="size-px whitespace-nowrap ps-3 py-4">
                                      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="w-full flex items-center gap-x-3">
                                        <img class="shrink-0 size-12 rounded-md" src="https://images.unsplash.com/photo-1617220933132-4e0d0596ff64?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                                        <div class="grow">
                                          <a class="text-sm font-medium text-foreground hover:text-primary-hover decoration-2 hover:underline focus:outline-hidden focus:underline focus:text-primary-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                            Keyboard Matt
                                          </a>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        Accessories
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap justify-between items-center gap-2">
                                        <label class="relative inline-block w-9 h-5 cursor-pointer">
                                          <input type="checkbox" class="peer sr-only" checked>
                                          <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                          <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                                        </label>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        1223847441
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        $39
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap gap-1">
                                        <span class="p-2 bg-surface text-surface-foreground text-xs rounded-md">
                                          🛍️ In store
                                        </span>
                                        <span class="p-2 bg-surface text-surface-foreground text-xs rounded-md">
                                          🌐 Online
                                        </span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="inline-flex items-center -space-x-px">
                                        <a class="size-8 inline-flex justify-center items-center gap-x-2 font-medium rounded-s-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                          <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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                        </a>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                                          <button id="hs-pro-etwsdd10" type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-e-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                            <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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                                          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-etwsdd10">
                                            <div class="p-1">
                                              <div class="py-2 px-3">
                                                <span class="block font-semibold text-foreground">
                                                  Download Report
                                                </span>
                                                <span class="block text-xs text-muted-foreground-1">
                                                  Select Options
                                                </span>
                                              </div>

<div class="py-1 px-2">
                                                <div class="flex items-center bg-surface rounded-xl p-1">
                                                  <label for="hs-pro-etwsdd10ts1" class="relative py-1.5 px-3 w-full cursor-pointer text-center text-sm text-foreground rounded-lg has-checked:bg-layer has-checked:shadow-2xs">
                                                    <svg class="relative z-10 me-1.5 inline-block align-middle shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.0324 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 15.8079L25.9844 18.3197L31.9364 15.8079V8.86395L20.0324 1.91994Z" fill="#21A366"/><path d="M8.12839 8.86395H20.0324V15.8079H8.12839V8.86395Z" fill="#107C41"/><path d="M30.614 1.91994H20.0324V8.86395H31.9364V3.24228C31.9364 2.89158 31.7971 2.55523 31.5491 2.30725C31.3011 2.05926 30.9647 1.91994 30.614 1.91994Z" fill="#33C481"/><path d="M20.0324 15.8079H8.12839V28.3736C8.12839 28.7243 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.6959 9.45071 29.6959H30.6141C30.9647 29.6959 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7243 31.9364 28.3736V22.7519L20.0324 15.8079Z" fill="#185C37"/><path d="M20.0324 15.8079H31.9364V22.7519H20.0324V15.8079Z" fill="#107C41"/><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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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.16402 23.7439 0.827672 23.6047 0.579686 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579686 8.25922C0.827672 8.01122 1.16402 7.87194 1.51472 7.87194Z" fill="#107C41"/><path d="M3.69711 20.7679L6.90722 15.794L3.96694 10.8479H6.33286L7.93791 14.0095C8.08536 14.3091 8.18688 14.5326 8.24248 14.68H8.26328C8.36912 14.4407 8.47984 14.2079 8.5956 13.9817L10.3108 10.8479H12.4822L9.46656 15.7663L12.5586 20.7679H10.2473L8.3932 17.2959C8.30592 17.148 8.23184 16.9927 8.172 16.8317H8.14424C8.09016 16.9891 8.01824 17.1399 7.92998 17.2811L6.02236 20.7679H3.69711Z" fill="white"/></svg><span class="relative z-10 align-middle">Excel</span>
                                                    <input type="radio" name="hs-pro-etwsdd10ts" class="hidden" id="hs-pro-etwsdd10ts1" checked >
                                                  </label>

<div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd10s1" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Item
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd10s1" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd10s2" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Type
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd10s2" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd10s3" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Stocks
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd10s3" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd10s4" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  SKU
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd10s4" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd10s5" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Price
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd10s5" checked >
                                              </div>

<tr>
                                    <td class="size-px whitespace-nowrap ps-3 py-4">
                                      <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="w-full flex items-center gap-x-3">
                                        <img class="shrink-0 size-12 rounded-md" src="https://images.unsplash.com/photo-1556306535-0f09a537f0a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                                        <div class="grow">
                                          <a class="text-sm font-medium text-foreground hover:text-primary-hover decoration-2 hover:underline focus:outline-hidden focus:underline focus:text-primary-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                            Hat
                                          </a>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        Accessories
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap justify-between items-center gap-2">
                                        <label class="relative inline-block w-9 h-5 cursor-pointer">
                                          <input type="checkbox" class="peer sr-only" checked>
                                          <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                          <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                                        </label>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        1242384741
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <span class="text-sm text-muted-foreground-2">
                                        $4
                                      </span>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="flex flex-wrap gap-1">
                                        <span class="p-2 bg-surface text-surface-foreground text-xs rounded-md">
                                          🛍️ In store
                                        </span>
                                      </div>
                                    </td>
                                    <td class="size-px whitespace-nowrap px-4 py-3">
                                      <div class="inline-flex items-center -space-x-px">
                                        <a class="size-8 inline-flex justify-center items-center gap-x-2 font-medium rounded-s-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="../../../templates/ecommerce/admin/product-details.html">
                                          <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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                        </a>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                                          <button id="hs-pro-etwsdd11" type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-e-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                            <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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                                          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-etwsdd11">
                                            <div class="p-1">
                                              <div class="py-2 px-3">
                                                <span class="block font-semibold text-foreground">
                                                  Download Report
                                                </span>
                                                <span class="block text-xs text-muted-foreground-1">
                                                  Select Options
                                                </span>
                                              </div>

<div class="py-1 px-2">
                                                <div class="flex items-center bg-surface rounded-xl p-1">
                                                  <label for="hs-pro-etwsdd11ts1" class="relative py-1.5 px-3 w-full cursor-pointer text-center text-sm text-foreground rounded-lg has-checked:bg-layer has-checked:shadow-2xs">
                                                    <svg class="relative z-10 me-1.5 inline-block align-middle shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.0324 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 15.8079L25.9844 18.3197L31.9364 15.8079V8.86395L20.0324 1.91994Z" fill="#21A366"/><path d="M8.12839 8.86395H20.0324V15.8079H8.12839V8.86395Z" fill="#107C41"/><path d="M30.614 1.91994H20.0324V8.86395H31.9364V3.24228C31.9364 2.89158 31.7971 2.55523 31.5491 2.30725C31.3011 2.05926 30.9647 1.91994 30.614 1.91994Z" fill="#33C481"/><path d="M20.0324 15.8079H8.12839V28.3736C8.12839 28.7243 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.6959 9.45071 29.6959H30.6141C30.9647 29.6959 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7243 31.9364 28.3736V22.7519L20.0324 15.8079Z" fill="#185C37"/><path d="M20.0324 15.8079H31.9364V22.7519H20.0324V15.8079Z" fill="#107C41"/><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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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="fill-foreground" 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.16402 23.7439 0.827672 23.6047 0.579686 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579686 8.25922C0.827672 8.01122 1.16402 7.87194 1.51472 7.87194Z" fill="#107C41"/><path d="M3.69711 20.7679L6.90722 15.794L3.96694 10.8479H6.33286L7.93791 14.0095C8.08536 14.3091 8.18688 14.5326 8.24248 14.68H8.26328C8.36912 14.4407 8.47984 14.2079 8.5956 13.9817L10.3108 10.8479H12.4822L9.46656 15.7663L12.5586 20.7679H10.2473L8.3932 17.2959C8.30592 17.148 8.23184 16.9927 8.172 16.8317H8.14424C8.09016 16.9891 8.01824 17.1399 7.92998 17.2811L6.02236 20.7679H3.69711Z" fill="white"/></svg><span class="relative z-10 align-middle">Excel</span>
                                                    <input type="radio" name="hs-pro-etwsdd11ts" class="hidden" id="hs-pro-etwsdd11ts1" checked >
                                                  </label>

<div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd11s1" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Item
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd11s1" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd11s2" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Type
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd11s2" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd11s3" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Stocks
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd11s3" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd11s4" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  SKU
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd11s4" checked >
                                              </div>
                                              <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                                                <label for="hs-pro-etwsdd11s5" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                                  Price
                                                </label>
                                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-etwsdd11s5" checked >
                                              </div>

<div class="flex flex-wrap justify-between items-center gap-2">
                            <p class="text-sm text-foreground">
                              <span class="font-medium">27</span>
                              <span class="text-muted-foreground-1">results</span>
                            </p>
  
                            
                            <nav class="flex justify-end items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Previous">
                                <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="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <span class="min-h-9.5 min-w-9.5 flex justify-center items-center bg-surface text-surface-foreground py-2 px-3 text-sm rounded-lg disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</span>
                                <span class="min-h-9.5 flex justify-center items-center text-muted-foreground-1 py-2 px-1.5 text-sm">of</span>
                                <span class="min-h-9.5 flex justify-center items-center text-muted-foreground-1 py-2 px-1.5 text-sm">3</span>
                              </div>
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Next">
                                <span class="sr-only">Next</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"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>
                            
                          </div>
                          
                        </div>

<div id="hs-pro-tabs-dut-archived" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-dut-item-archived">
                          
                          <div class="p-5  flex flex-col justify-center items-center text-center">
                            <svg class="w-48 mx-auto mb-4" width="178" height="90" viewBox="0 0 178 90" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <rect x="27" y="50.5" width="124" height="39" rx="7.5" fill="currentColor" class="fill-layer opacity-30"/>
                              <rect x="27" y="50.5" width="124" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1 opacity-30"/>
                              <rect x="34.5" y="58" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1 opacity-30"/>
                              <rect x="66.5" y="61" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1 opacity-30"/>
                              <rect x="66.5" y="73" width="77" height="6" rx="3" fill="currentColor" class="fill-surface-1 opacity-30"/>
                              <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" fill="currentColor" class="fill-layer"/>
                              <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1"/>
                              <rect x="27" y="36" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1"/>
                              <rect x="59" y="39" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                              <rect x="59" y="51" width="92" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                              <g filter="url(#filter4)">
                              <rect x="12" y="6" width="154" height="40" rx="8" fill="currentColor" class="fill-layer" shape-rendering="crispEdges"/>
                              <rect x="12.5" y="6.5" width="153" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1" shape-rendering="crispEdges"/>
                              <rect x="20" y="14" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1"/>
                              <rect x="52" y="17" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                              <rect x="52" y="29" width="106" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                              </g>
                              <defs>
                              <filter id="filter4" x="0" y="0" width="178" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                              <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                              <feOffset dy="6"/>
                              <feGaussianBlur stdDeviation="6"/>
                              <feComposite in2="hardAlpha" operator="out"/>
                              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
                              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1187_14810"/>
                              <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1187_14810" result="shape"/>
                              </filter>
                              </defs>
                            </svg>

<div class="max-w-sm mx-auto">
                              <p class="mt-2 font-medium text-foreground">
                                Your data will appear here soon.
                              </p>
                              <p class="mb-5 text-sm text-muted-foreground-1">
                                In the meantime, you can create new custom insights to monitor your most important metrics. 
                              </p>
                            </div>

<a class="py-2 px-3 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="#">
                              Learn more
                            </a>
                          </div>
                          
                        </div>

<div id="hs-pro-tabs-dut-publish" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-dut-item-publish">
                          
                          <div class="p-5  flex flex-col justify-center items-center text-center">
                            <svg class="w-48 mx-auto mb-4" width="178" height="90" viewBox="0 0 178 90" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <rect x="27" y="50.5" width="124" height="39" rx="7.5" fill="currentColor" class="fill-layer opacity-30"/>
                              <rect x="27" y="50.5" width="124" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1 opacity-30"/>
                              <rect x="34.5" y="58" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1 opacity-30"/>
                              <rect x="66.5" y="61" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1 opacity-30"/>
                              <rect x="66.5" y="73" width="77" height="6" rx="3" fill="currentColor" class="fill-surface-1 opacity-30"/>
                              <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" fill="currentColor" class="fill-layer"/>
                              <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1"/>
                              <rect x="27" y="36" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1"/>
                              <rect x="59" y="39" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                              <rect x="59" y="51" width="92" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                              <g filter="url(#filter5)">
                              <rect x="12" y="6" width="154" height="40" rx="8" fill="currentColor" class="fill-layer" shape-rendering="crispEdges"/>
                              <rect x="12.5" y="6.5" width="153" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1" shape-rendering="crispEdges"/>
                              <rect x="20" y="14" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1"/>
                              <rect x="52" y="17" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                              <rect x="52" y="29" width="106" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                              </g>
                              <defs>
                              <filter id="filter5" x="0" y="0" width="178" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                              <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                              <feOffset dy="6"/>
                              <feGaussianBlur stdDeviation="6"/>
                              <feComposite in2="hardAlpha" operator="out"/>
                              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
                              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1187_14810"/>
                              <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1187_14810" result="shape"/>
                              </filter>
                              </defs>
                            </svg>

<div id="hs-pro-tabs-dut-unpublish" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-dut-item-unpublish">
                          
                          <div class="p-5  flex flex-col justify-center items-center text-center">
                            <svg class="w-48 mx-auto mb-4" width="178" height="90" viewBox="0 0 178 90" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <rect x="27" y="50.5" width="124" height="39" rx="7.5" fill="currentColor" class="fill-layer opacity-30"/>
                              <rect x="27" y="50.5" width="124" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1 opacity-30"/>
                              <rect x="34.5" y="58" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1 opacity-30"/>
                              <rect x="66.5" y="61" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1 opacity-30"/>
                              <rect x="66.5" y="73" width="77" height="6" rx="3" fill="currentColor" class="fill-surface-1 opacity-30"/>
                              <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" fill="currentColor" class="fill-layer"/>
                              <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1"/>
                              <rect x="27" y="36" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1"/>
                              <rect x="59" y="39" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                              <rect x="59" y="51" width="92" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                              <g filter="url(#filter6)">
                              <rect x="12" y="6" width="154" height="40" rx="8" fill="currentColor" class="fill-layer" shape-rendering="crispEdges"/>
                              <rect x="12.5" y="6.5" width="153" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1" shape-rendering="crispEdges"/>
                              <rect x="20" y="14" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1"/>
                              <rect x="52" y="17" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                              <rect x="52" y="29" width="106" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                              </g>
                              <defs>
                              <filter id="filter6" x="0" y="0" width="178" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                              <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                              <feOffset dy="6"/>
                              <feGaussianBlur stdDeviation="6"/>
                              <feComposite in2="hardAlpha" operator="out"/>
                              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
                              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1187_14810"/>
                              <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1187_14810" result="shape"/>
                              </filter>
                              </defs>
                            </svg>

<div id="hs-pro-epfo" class="hs-overlay hs-overlay-open:translate-x-0 hidden translate-x-full fixed top-0 inset-e-0 transition-all duration-300 transform size-full sm:w-100 z-80 flex flex-col bg-overlay border border-overlay-line" role="dialog" tabindex="-1" aria-labelledby="hs-pro-epfo-label">
                      
                      <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
                        <h2 id="hs-pro-epfo-label" class="font-medium text-foreground">
                          Filter
                        </h2>
                        <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-epfo">
                          <span class="sr-only">Close</span>
                          <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"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                        </button>
                      </div>

<div class="h-[calc(100%-58px)] flex flex-col">
                        
                        <div class="h-full p-5 overflow-y-auto overflow-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          
                          <div class="pb-5 mb-5 last:pb-0 last:mb-0 border-b last:border-b-0 border-line-2">
                            <label class="font-semibold text-xs uppercase text-foreground">
                              Product vendor
                            </label>

<div class="mt-3 grid grid-cols-2">
                              <div class="space-y-2">
                                
                                <div class="flex items-center">
                                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch1" checked>
                                  <label for="hs-pro-epfopvch1" class="ms-3 text-sm text-foreground">
                                    Google
                                  </label>
                                </div>

<div class="flex items-center">
                                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch2">
                                  <label for="hs-pro-epfopvch2" class="ms-3 text-sm text-foreground">
                                    Topman
                                  </label>
                                </div>

<div class="flex items-center">
                                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch3">
                                  <label for="hs-pro-epfopvch3" class="ms-3 text-sm text-foreground">
                                    RayBan
                                  </label>
                                </div>

<div class="flex items-center">
                                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch4">
                                  <label for="hs-pro-epfopvch4" class="ms-3 text-sm text-foreground">
                                    Mango
                                  </label>
                                </div>

<div class="flex items-center">
                                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch5">
                                  <label for="hs-pro-epfopvch5" class="ms-3 text-sm text-foreground">
                                    Calvin Klein
                                  </label>
                                </div>

<div class="flex items-center">
                                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch6">
                                  <label for="hs-pro-epfopvch6" class="ms-3 text-sm text-foreground">
                                    Givenchy
                                  </label>
                                </div>

<div class="flex items-center">
                                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch7">
                                  <label for="hs-pro-epfopvch7" class="ms-3 text-sm text-foreground">
                                    Asos
                                  </label>
                                </div>

<div class="flex items-center">
                                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch8">
                                  <label for="hs-pro-epfopvch8" class="ms-3 text-sm text-foreground">
                                    Apple
                                  </label>
                                </div>

<div class="flex items-center">
                                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch9">
                                  <label for="hs-pro-epfopvch9" class="ms-3 text-sm text-foreground">
                                    Zara
                                  </label>
                                </div>
                                
                              </div>

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

<div class="flex items-center">
                                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch11">
                                  <label for="hs-pro-epfopvch11" class="ms-3 text-sm text-foreground">
                                    Nike
                                  </label>
                                </div>

<div class="flex items-center">
                                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch12">
                                  <label for="hs-pro-epfopvch12" class="ms-3 text-sm text-foreground">
                                    Adidas
                                  </label>
                                </div>

<div class="flex items-center">
                                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch17">
                                  <label for="hs-pro-epfopvch17" class="ms-3 text-sm text-foreground">
                                    Reebok
                                  </label>
                                </div>

<div class="flex items-center">
                                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch13">
                                  <label for="hs-pro-epfopvch13" class="ms-3 text-sm text-foreground">
                                    Levis
                                  </label>
                                </div>

<div class="flex items-center">
                                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch14">
                                  <label for="hs-pro-epfopvch14" class="ms-3 text-sm text-foreground">
                                    Beats
                                  </label>
                                </div>

<div class="flex items-center">
                                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch15">
                                  <label for="hs-pro-epfopvch15" class="ms-3 text-sm text-foreground">
                                    Clarke
                                  </label>
                                </div>

<div class="flex items-center">
                                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch16">
                                  <label for="hs-pro-epfopvch16" class="ms-3 text-sm text-foreground">
                                    Mango
                                  </label>
                                </div>
                                
                              </div>
                              
                            </div>

<p class="mt-3">
                              <button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-xs font-medium rounded-full bg-layer border border-dashed border-layer-line text-primary hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                <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>
                                Clear
                              </button>
                            </p>
                            
                          </div>

<div class="pb-5 mb-5 last:pb-0 last:mb-0 border-b last:border-b-0 border-line-2">
                            <label class="font-semibold text-xs uppercase text-foreground">
                              Availability
                            </label>

<div class="mt-3 space-y-2">
                              
                              <div class="flex items-center">
                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfoach1" checked>
                                <label for="hs-pro-epfoach1" class="ms-3 text-sm text-foreground">
                                  Available on Online Store
                                </label>
                              </div>

<div class="flex items-center">
                                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfoach2">
                                <label for="hs-pro-epfoach2" class="ms-3 text-sm text-foreground">
                                  Unavailable on Online Store
                                </label>
                              </div>
                              
                            </div>

<div class="pb-5 mb-5 last:pb-0 last:mb-0 border-b last:border-b-0 border-line-2">
                            <label class="font-semibold text-xs uppercase text-foreground">
                              Tagged with
                            </label>

<div class="p-5 border-t border-overlay-footer">
                          <div class="flex items-center gap-x-2">
                            
                            <button type="button" class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                              <svg class="hidden sm:block 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"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                              Clear all filters
                            </button>

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

<div id="hs-pro-eepm" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-eepm-label">
                      <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-md sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
                        <div class="w-full max-h-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                          
                          <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
                            <h2 id="hs-pro-eepm-label" class="font-medium text-foreground">
                              Export products (2)
                            </h2>
                            <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-eepm">
                              <span class="sr-only">Close</span>
                              <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"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                            </button>
                          </div>

<div class="overflow-y-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                            <div class="p-4">
                              
                              <div class="pb-5 mb-5 last:pb-0 last:mb-0 border-b last:border-b-0 border-overlay-divider">
                                <p class="mb-3 text-sm text-muted-foreground-1">
                                  This CSV file can update all product information. To update just inventory quantites use the <a class="text-sm text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline" href="#">CSV file for inventory</a>.
                                </p>

<label class="text-sm text-muted-foreground-1">
                                  Export
                                </label>

<div class="mt-2 space-y-2">
                                  
                                  <div class="flex items-center">
                                    <input type="radio" name="hs-pro-eepmer" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-eepmer1" checked>
                                    <label for="hs-pro-eepmer1" class="ms-3 text-sm text-foreground">
                                      Current page
                                    </label>
                                  </div>

<div class="flex items-center">
                                    <input type="radio" name="hs-pro-eepmer" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-eepmer2">
                                    <label for="hs-pro-eepmer2" class="ms-3 text-sm text-foreground">
                                      All products
                                    </label>
                                  </div>

<div class="flex items-center">
                                    <input type="radio" name="hs-pro-eepmer" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-eepmer3">
                                    <label for="hs-pro-eepmer3" class="ms-3 text-sm text-foreground">
                                      Selected: 20 products
                                    </label>
                                  </div>
                                  
                                </div>
                              </div>

<div class="pb-5 mb-5 last:pb-0 last:mb-0 border-b last:border-b-0 border-overlay-divider">
                                <label class="text-sm text-muted-foreground-1">
                                  Export as
                                </label>

<div class="mt-2 space-y-2">
                                  
                                  <div class="flex items-center">
                                    <input type="radio" name="hs-pro-eepmear" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-eepmear1" checked>
                                    <label for="hs-pro-eepmear1" class="ms-3 text-sm text-foreground">
                                      CSV for Excel, Numbers, or other spreadsheet programs
                                    </label>
                                  </div>

<div class="flex items-center">
                                    <input type="radio" name="hs-pro-eepmear" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-eepmear2">
                                    <label for="hs-pro-eepmear2" class="ms-3 text-sm text-foreground">
                                      Plain CSV file
                                    </label>
                                  </div>
                                  
                                </div>
                              </div>
                              
                            </div>
                          </div>

<div class="p-4 flex justify-end gap-x-2">
                            <div class="flex-1 flex justify-end items-center gap-2">
                              <button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center text-start whitespace-nowrap bg-layer border border-layer-line text-layer-foreground text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-pro-eepm">
                                Save as draft
                              </button>

<button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center gap-x-2 text-start whitespace-nowrap bg-primary border border-primary-line text-primary-foreground text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" data-hs-overlay="#hs-pro-eepm">
                                Export
                              </button>
                            </div>
                          </div>  
                          
                        </div>
                      </div>
                    </div>

<div id="hs-pro-eipm" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-eipm-label">
                      <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
                        <div class="w-full max-h-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                          
                          <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
                            <h2 id="hs-pro-eipm-label" class="font-medium text-foreground">
                              Import products
                            </h2>
                            <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-eipm">
                              <span class="sr-only">Close</span>
                              <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"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                            </button>
                          </div>

<div class="overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                            <div class="p-4">
                              <label class="block mb-2 text-sm text-muted-foreground-1">
                                <a class="text-sm text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline" href="#">Download a sample CSV template</a> to see an example of the format required.
                              </label>

<div class="space-y-2">
                                <label class="hidden block mb-2 text-sm font-medium text-foreground">
                                  Upload images
                                </label>
                                <div class="p-12 flex justify-center bg-layer border border-dashed border-layer-line rounded-xl">
                                  <div class="text-center">
                                    <svg class="shrink-0 w-16 text-muted-foreground mx-auto" width="73" height="47" viewBox="0 0 73 47" fill="none" xmlns="http://www.w3.org/2000/svg">
                                      <path d="M54.519 40.4773V6.76876C54.519 3.92686 52.2121 1.62305 49.3664 1.62305H22.7076C19.8619 1.62305 17.555 3.92686 17.555 6.76876V40.4773M54.519 40.4773C54.519 43.3192 52.2121 45.6231 49.3664 45.6231H22.7076C19.8619 45.6231 17.555 43.3192 17.555 40.4773M54.519 40.4773L54.5189 34.6563L48.6564 28.3566L43.2612 34.6373C42.4421 35.5908 40.9662 35.5955 40.141 34.6472L30.3406 23.3844L17.555 36.9154V40.4773M6.20483 9.59424L17.707 7.6798V42.5188L12.6457 43.5828C9.25658 44.2954 5.94238 42.0892 5.29702 38.691L1.14643 16.8357C0.500082 13.4322 2.78322 10.1637 6.20483 9.59424ZM65.8691 9.59424L54.3669 7.6798V42.5188L59.4282 43.5828C62.8173 44.2954 66.1316 42.0892 66.7769 38.691L70.9274 16.8357C71.5738 13.4322 69.2907 10.1637 65.8691 9.59424ZM45.0584 15.3561C45.0584 17.7228 43.1372 19.6413 40.7673 19.6413C38.3974 19.6413 36.4762 17.7228 36.4762 15.3561C36.4762 12.9894 38.3974 11.0708 40.7673 11.0708C43.1372 11.0708 45.0584 12.9894 45.0584 15.3561Z" stroke="currentColor" stroke-width="2"/>
                                    </svg>

<div class="mt-4 flex flex-wrap justify-center text-sm/6 text-muted-foreground-1">
                                      <span class="pe-1 font-medium text-foreground">
                                        Drop your files here or
                                      </span>
                                      <label for="hs-pro-eipb" class="relative cursor-pointer bg-transparent font-semibold text-primary hover:text-primary-hover rounded-lg decoration-2 hover:underline focus-within:outline-hidden focus-within:ring-2 focus-within:ring-primary-focus focus-within:ring-offset-2">
                                        <span>browse</span>
                                        <input id="hs-pro-eipb" type="file" class="sr-only">
                                      </label>
                                    </div>

<div class="mt-3 flex">
                                <input type="checkbox" class="mt-0.5 shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-eipoonch">
                                <label for="hs-pro-eipoonch" class="ms-3 text-sm text-muted-foreground-1">
                                  Overwrite any current products that have the same handle. Existing values will be used for any missing columns. <a class="text-sm text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline" href="#">Learn more</a>
                                </label>
                              </div>
                              
                            </div>
                          </div>

<div class="p-4 flex justify-end gap-x-2">
                            <div class="flex-1 flex justify-end items-center gap-2">
                              <button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center text-start whitespace-nowrap bg-layer border border-layer-line text-layer-foreground text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-pro-eipm">
                                Save as draft
                              </button>

<button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center gap-x-2 text-start whitespace-nowrap bg-primary border border-primary-line text-primary-foreground text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" data-hs-overlay="#hs-pro-eipm">
                                Upload and continue
                              </button>
                            </div>
                          </div>
                          
                        </div>
                      </div>
                    </div>

Open related products page

Product Table with Filter Bar and Status Badges Pro

A stacked filter bar sits above the grid, while colorful badges keep row status visible at a glance.

<div class="p-5 space-y-4 flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
  
  <div class="grid md:grid-cols-2 gap-y-2 md:gap-y-0 md:gap-x-5">
    <div>
      
      <div class="relative">
        <div class="absolute inset-y-0 inset-s-0 flex items-center pointer-events-none z-20 ps-3.5">
          <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"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
        </div>
        <input type="text" class="py-1.5 sm:py-2 ps-10 pe-8 block w-full min-w-75 bg-surface border-surface-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:bg-layer focus:border-primary-focus focus:ring-primary-focus checked:border-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Search discounts">
        <div class="hidden absolute inset-y-0 inset-e-0 flex items-center z-20 pe-1">
          <button type="button" class="inline-flex shrink-0 justify-center items-center size-6 rounded-full text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" aria-label="Close">
            <span class="sr-only">Close</span>
            <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"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
          </button>
        </div>
      </div>
      
    </div>

<div class="flex flex-wrap md:justify-end items-center gap-2">
      
      <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-pro-epfo">
        Export
        <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"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
      </button>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
        
        <button id="hs-pro-dupfind" type="button" class="py-2 px-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
          <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"><line x1="21" x2="14" y1="4" y2="4"/><line x1="10" x2="3" y1="4" y2="4"/><line x1="21" x2="12" y1="12" y2="12"/><line x1="8" x2="3" y1="12" y2="12"/><line x1="21" x2="16" y1="20" y2="20"/><line x1="12" x2="3" y1="20" y2="20"/><line x1="14" x2="14" y1="2" y2="6"/><line x1="8" x2="8" y1="10" y2="14"/><line x1="16" x2="16" y1="18" y2="22"/></svg>
          Filter
          <span class="font-medium text-[10px] py-0.5 px-2 bg-secondary text-secondary-foreground leading-3 rounded-full">
            7
          </span>
        </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-44 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dupfind">
          <div class="p-1">
            <div class="flex items-center gap-x-3 py-1.5 px-2 cursor-pointer rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-dupfindch2" checked>
              <label for="hs-pro-dupfindch2" class="flex flex-1 items-center gap-x-3 cursor-pointer text-[13px] text-foreground">
                Name
              </label>
            </div>

<div class="flex items-center gap-x-3 py-1.5 px-2 cursor-pointer rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-dupfindch4" checked>
              <label for="hs-pro-dupfindch4" class="flex flex-1 items-center gap-x-3 cursor-pointer text-[13px] text-foreground">
                Status
              </label>
            </div>

<div class="flex items-center gap-x-3 py-1.5 px-2 cursor-pointer rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-dupfindch5" checked>
              <label for="hs-pro-dupfindch5" class="flex flex-1 items-center gap-x-3 cursor-pointer text-[13px] text-foreground">
                Products
              </label>
            </div>

<div class="flex items-center gap-x-3 py-1.5 px-2 cursor-pointer rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-dupfindch6" checked>
              <label for="hs-pro-dupfindch6" class="flex flex-1 items-center gap-x-3 cursor-pointer text-[13px] text-foreground">
                Amount
              </label>
            </div>

<div class="flex items-center gap-x-3 py-1.5 px-2 cursor-pointer rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-dupfindch7" checked>
              <label for="hs-pro-dupfindch7" class="flex flex-1 items-center gap-x-3 cursor-pointer text-[13px] text-foreground">
                Redemptions
              </label>
            </div>
          </div>
        </div>
        
      </div>
      
    </div>
    
  </div>

<div class="overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
    <div class="min-w-full inline-block align-middle">
      
      <table class="min-w-full divide-y divide-table-line">
        <thead>
          <tr class="border-t border-table-line">
            <th scope="col" class="px-3 py-2.5 text-start">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </th>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptnms">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                      Sort ascending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                      Sort descending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                      Move left
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                      Move right
                    </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptcds">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                      Sort ascending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                      Sort descending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                      Move left
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                      Move right
                    </button>

<th scope="col" class="min-w-42.5">
              
              <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                <button id="hs-pro-eptsts" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  Status
                  <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptsts">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                      Sort ascending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                      Sort descending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                      Move left
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                      Move right
                    </button>

<th scope="col" class="min-w-[270px] ">
              
              <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                <button id="hs-pro-eptprs" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  Products
                  <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptprs">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                      Sort ascending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                      Sort descending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                      Move left
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                      Move right
                    </button>

<th scope="col">
              
              <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                <button id="hs-pro-eptams" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  Amount
                  <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptams">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                      Sort ascending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                      Sort descending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                      Move left
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                      Move right
                    </button>

<th scope="col">
              
              <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
                <button id="hs-pro-eptrds" type="button" class="px-5 py-2.5 text-start w-full flex items-center gap-x-1 text-sm text-nowrap whitespace-nowrap font-normal text-muted-foreground-1 focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  Redemption
                  <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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-eptrds">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                      Sort ascending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                      Sort descending
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                      Move left
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] font-normal text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                      Move right
                    </button>

<tbody class="divide-y divide-table-line">
          <tr>
            <td class="size-px whitespace-nowrap px-3 py-4">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm font-medium text-foreground">
                Social Fun
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="js-clipboard [--is-toggle-tooltip:false] hs-tooltip p-2 bg-surface text-surface-foreground text-xs rounded-md cursor-pointer"
                    data-clipboard-target="#hs-socialfun"
                    data-clipboard-action="copy"
                    data-clipboard-success-text="Copied">
                <span id="hs-socialfun" class="uppercase">socialfun</span>
                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                  <span class="js-clipboard-success-text">Copy</span>
                </span>
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="py-1.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-surface text-surface-foreground rounded-full">
                <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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                Draft
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm text-muted-foreground-2">
                All products
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm text-muted-foreground-2">
                Up to 70%
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1 text-end">
              <span class="text-sm text-muted-foreground-2">
              0
              </span>
            </td>
            <td class="h-px witespace-nowrap px-4 py-1 text-end">
              <div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                <button id="hs-pro-errtmd1" type="button" class="size-7 inline-flex justify-center items-center gap-x-2 rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  <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="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-24 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-errtmd1">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Edit
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Duplicate
                    </button>

<button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Delete
                    </button>
                  </div>
                </div>
              </div>
            </td>
          </tr>

<tr>
            <td class="size-px whitespace-nowrap px-3 py-4">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm font-medium text-foreground">
                Cyber Monday
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="js-clipboard [--is-toggle-tooltip:false] hs-tooltip p-2 bg-surface text-surface-foreground text-xs rounded-md cursor-pointer"
                    data-clipboard-target="#hs-cybermonday"
                    data-clipboard-action="copy"
                    data-clipboard-success-text="Copied">
                <span id="hs-cybermonday" class="uppercase">cybermonday</span>
                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                  <span class="js-clipboard-success-text">Copy</span>
                </span>
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="py-1.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-red-100 text-red-800 rounded-full dark:bg-red-500/10 dark:text-red-500">
                <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"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
                Expired
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm text-muted-foreground-2">
                All products
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm text-muted-foreground-2">
                50%
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1 text-end">
              <span class="text-sm text-muted-foreground-2">
                328
              </span>
            </td>
            <td class="h-px witespace-nowrap px-4 py-1 text-end">
              <div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                <button id="hs-pro-errtmd2" type="button" class="size-7 inline-flex justify-center items-center gap-x-2 rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  <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="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-24 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-errtmd2">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Edit
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Duplicate
                    </button>

<tr>
            <td class="size-px whitespace-nowrap px-3 py-4">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm font-medium text-foreground">
                iPhone 15
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="js-clipboard [--is-toggle-tooltip:false] hs-tooltip p-2 bg-surface text-surface-foreground text-xs rounded-md cursor-pointer"
                    data-clipboard-target="#hs-iphone15"
                    data-clipboard-action="copy"
                    data-clipboard-success-text="Copied">
                <span id="hs-iphone15" class="uppercase">iphone15</span>
                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                  <span class="js-clipboard-success-text">Copy</span>
                </span>
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="py-1.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-green-100 text-green-800 rounded-full dark:bg-green-500/10 dark:text-green-500">
                <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 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m9 12 2 2 4-4"/></svg>
                Active
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <div class="flex items-center gap-x-3">
                <img class="shrink-0 size-8 rounded-md" src="https://images.unsplash.com/photo-1611911813383-67769b37a149?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                <div class="grow">
                  <span class="text-sm text-muted-foreground-2">
                    Pattern Winter Sweater
                  </span>
                </div>
              </div>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm text-muted-foreground-2">
                iPhone 15
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1 text-end">
              <span class="text-sm text-muted-foreground-2">
                1
              </span>
            </td>
            <td class="h-px witespace-nowrap px-4 py-1 text-end">
              <div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                <button id="hs-pro-errtmd3" type="button" class="size-7 inline-flex justify-center items-center gap-x-2 rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  <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="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-24 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-errtmd3">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Edit
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Duplicate
                    </button>

<tr>
            <td class="size-px whitespace-nowrap px-3 py-4">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm font-medium text-foreground">
                30% Off
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="js-clipboard [--is-toggle-tooltip:false] hs-tooltip p-2 bg-surface text-surface-foreground text-xs rounded-md cursor-pointer"
                    data-clipboard-target="#hs-30off"
                    data-clipboard-action="copy"
                    data-clipboard-success-text="Copied">
                <span id="hs-30off" class="uppercase">30%off</span>
                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                  <span class="js-clipboard-success-text">Copy</span>
                </span>
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="py-1.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-green-100 text-green-800 rounded-full dark:bg-green-500/10 dark:text-green-500">
                <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 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m9 12 2 2 4-4"/></svg>
                Active
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <div class="flex items-center gap-x-3">
                <img class="shrink-0 size-8 rounded-md" src="https://images.unsplash.com/photo-1611911813383-67769b37a149?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                <div class="grow">
                  <span class="text-sm text-muted-foreground-2">
                    Pattern Winter Sweater
                  </span>
                </div>
              </div>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm text-muted-foreground-2">
                30%
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1 text-end">
              <span class="text-sm text-muted-foreground-2">
                82
              </span>
            </td>
            <td class="h-px witespace-nowrap px-4 py-1 text-end">
              <div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                <button id="hs-pro-errtmd4" type="button" class="size-7 inline-flex justify-center items-center gap-x-2 rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  <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="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-24 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-errtmd4">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Edit
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Duplicate
                    </button>

<tr>
            <td class="size-px whitespace-nowrap px-3 py-4">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm font-medium text-foreground">
                Welcome Offer
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="js-clipboard [--is-toggle-tooltip:false] hs-tooltip p-2 bg-surface text-surface-foreground text-xs rounded-md cursor-pointer"
                    data-clipboard-target="#hs-thankyou"
                    data-clipboard-action="copy"
                    data-clipboard-success-text="Copied">
                <span id="hs-thankyou" class="uppercase">thankyou</span>
                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                  <span class="js-clipboard-success-text">Copy</span>
                </span>
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="py-1.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-red-100 text-red-800 rounded-full dark:bg-red-500/10 dark:text-red-500">
                <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"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
                Expired
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm text-muted-foreground-2">
                All products
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm text-muted-foreground-2">
                $10
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1 text-end">
              <span class="text-sm text-muted-foreground-2">
                129
              </span>
            </td>
            <td class="h-px witespace-nowrap px-4 py-1 text-end">
              <div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                <button id="hs-pro-errtmd5" type="button" class="size-7 inline-flex justify-center items-center gap-x-2 rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  <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="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-24 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-errtmd5">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Edit
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Duplicate
                    </button>

<tr>
            <td class="size-px whitespace-nowrap px-3 py-4">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm font-medium text-foreground">
                Upgrade
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="js-clipboard [--is-toggle-tooltip:false] hs-tooltip p-2 bg-surface text-surface-foreground text-xs rounded-md cursor-pointer"
                    data-clipboard-target="#hs-upgrade"
                    data-clipboard-action="copy"
                    data-clipboard-success-text="Copied">
                <span id="hs-upgrade" class="uppercase">upgrade</span>
                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                  <span class="js-clipboard-success-text">Copy</span>
                </span>
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="py-1.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-green-100 text-green-800 rounded-full dark:bg-green-500/10 dark:text-green-500">
                <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 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m9 12 2 2 4-4"/></svg>
                Active
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm text-muted-foreground-2">
                All products
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm text-muted-foreground-2">
                $30
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1 text-end">
              <span class="text-sm text-muted-foreground-2">
                7
              </span>
            </td>
            <td class="h-px witespace-nowrap px-4 py-1 text-end">
              <div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                <button id="hs-pro-errtmd6" type="button" class="size-7 inline-flex justify-center items-center gap-x-2 rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  <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="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-24 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-errtmd6">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Edit
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Duplicate
                    </button>

<tr>
            <td class="size-px whitespace-nowrap px-3 py-4">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm font-medium text-foreground">
                Late Winter
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="js-clipboard [--is-toggle-tooltip:false] hs-tooltip p-2 bg-surface text-surface-foreground text-xs rounded-md cursor-pointer"
                    data-clipboard-target="#hs-late5"
                    data-clipboard-action="copy"
                    data-clipboard-success-text="Copied">
                <span id="hs-late5" class="uppercase">late5</span>
                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                  <span class="js-clipboard-success-text">Copy</span>
                </span>
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="py-1.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-surface text-surface-foreground rounded-full">
                <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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                Draft
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <div class="flex items-center gap-x-3">
                <img class="shrink-0 size-8 rounded-md" src="https://images.unsplash.com/photo-1610398752800-146f269dfcc8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                <div class="grow">
                  <span class="text-sm text-muted-foreground-2">
                    Mango Women's shoe
                  </span>
                </div>
              </div>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm text-muted-foreground-2">
                $5
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1 text-end">
              <span class="text-sm text-muted-foreground-2">
              0
              </span>
            </td>
            <td class="h-px witespace-nowrap px-4 py-1 text-end">
              <div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                <button id="hs-pro-errtmd7" type="button" class="size-7 inline-flex justify-center items-center gap-x-2 rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  <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="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-24 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-errtmd7">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Edit
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Duplicate
                    </button>

<tr>
            <td class="size-px whitespace-nowrap px-3 py-4">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm font-medium text-foreground">
                We're 5 yrs old
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="js-clipboard [--is-toggle-tooltip:false] hs-tooltip p-2 bg-surface text-surface-foreground text-xs rounded-md cursor-pointer"
                    data-clipboard-target="#hs-5for5"
                    data-clipboard-action="copy"
                    data-clipboard-success-text="Copied">
                <span id="hs-5for5" class="uppercase">5for5</span>
                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                  <span class="js-clipboard-success-text">Copy</span>
                </span>
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="py-1.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-surface text-surface-foreground rounded-full">
                <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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                Draft
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm text-muted-foreground-2">
                All products
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm text-muted-foreground-2">
                $5
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1 text-end">
              <span class="text-sm text-muted-foreground-2">
              0
              </span>
            </td>
            <td class="h-px witespace-nowrap px-4 py-1 text-end">
              <div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                <button id="hs-pro-errtmd8" type="button" class="size-7 inline-flex justify-center items-center gap-x-2 rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  <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="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-24 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-errtmd8">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Edit
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Duplicate
                    </button>

<tr>
            <td class="size-px whitespace-nowrap px-3 py-4">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm font-medium text-foreground">
                Loyal Cutomer
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="js-clipboard [--is-toggle-tooltip:false] hs-tooltip p-2 bg-surface text-surface-foreground text-xs rounded-md cursor-pointer"
                    data-clipboard-target="#hs-loyal10"
                    data-clipboard-action="copy"
                    data-clipboard-success-text="Copied">
                <span id="hs-loyal10" class="uppercase">loyal10</span>
                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                  <span class="js-clipboard-success-text">Copy</span>
                </span>
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="py-1.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-green-100 text-green-800 rounded-full dark:bg-green-500/10 dark:text-green-500">
                <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 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m9 12 2 2 4-4"/></svg>
                Active
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <div class="flex items-center gap-x-3">
                <img class="shrink-0 size-8 rounded-md" src="https://images.unsplash.com/photo-1549298916-f52d724204b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                <div class="grow">
                  <span class="text-sm text-muted-foreground-2">
                    Nike Air Jordan 1 Yellow
                  </span>
                </div>
              </div>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm text-muted-foreground-2">
                $10
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1 text-end">
              <span class="text-sm text-muted-foreground-2">
                66
              </span>
            </td>
            <td class="h-px witespace-nowrap px-4 py-1 text-end">
              <div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                <button id="hs-pro-errtmd9" type="button" class="size-7 inline-flex justify-center items-center gap-x-2 rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  <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="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-24 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-errtmd9">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Edit
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Duplicate
                    </button>

<tr>
            <td class="size-px whitespace-nowrap px-3 py-4">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm font-medium text-foreground">
                Summer Sale
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="js-clipboard [--is-toggle-tooltip:false] hs-tooltip p-2 bg-surface text-surface-foreground text-xs rounded-md cursor-pointer"
                    data-clipboard-target="#hs-summersale"
                    data-clipboard-action="copy"
                    data-clipboard-success-text="Copied">
                <span id="hs-summersale" class="uppercase">summersale</span>
                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                  <span class="js-clipboard-success-text">Copy</span>
                </span>
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="py-1.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-green-100 text-green-800 rounded-full dark:bg-green-500/10 dark:text-green-500">
                <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 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m9 12 2 2 4-4"/></svg>
                Active
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <div class="flex items-center gap-x-3">
                <img class="shrink-0 size-8 rounded-md" src="https://images.unsplash.com/photo-1610398752800-146f269dfcc8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                <div class="grow">
                  <span class="text-sm text-muted-foreground-2">
                    Mango Women's shoe
                  </span>
                </div>
              </div>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm text-muted-foreground-2">
                $40
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1 text-end">
              <span class="text-sm text-muted-foreground-2">
                12
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1 text-end">
              <div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                <button id="hs-pro-errtmd10" type="button" class="size-7 inline-flex justify-center items-center gap-x-2 rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  <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="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-24 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-errtmd10">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Edit
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Duplicate
                    </button>

<tr>
            <td class="size-px whitespace-nowrap px-3 py-4">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm font-medium text-foreground">
                Just for Fun
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="js-clipboard [--is-toggle-tooltip:false] hs-tooltip p-2 bg-surface text-surface-foreground text-xs rounded-md cursor-pointer"
                    data-clipboard-target="#hs-fun"
                    data-clipboard-action="copy"
                    data-clipboard-success-text="Copied">
                <span id="hs-fun" class="uppercase">fun</span>
                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                  <span class="js-clipboard-success-text">Copy</span>
                </span>
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="py-1.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-surface text-surface-foreground rounded-full">
                <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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                Draft
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <div class="flex items-center gap-x-3">
                <img class="shrink-0 size-8 rounded-md" src="https://images.unsplash.com/photo-1549298916-f52d724204b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Product Image">
                <div class="grow">
                  <span class="text-sm text-muted-foreground-2">
                    Nike Air Jordan 1 Yellow
                  </span>
                </div>
              </div>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm text-muted-foreground-2">
                20 Custom hats
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1 text-end">
              <span class="text-sm text-muted-foreground-2">
              0
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1 text-end">
              <div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                <button id="hs-pro-errtmd11" type="button" class="size-7 inline-flex justify-center items-center gap-x-2 rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  <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="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-24 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-errtmd11">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Edit
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Duplicate
                    </button>

<tr>
            <td class="size-px whitespace-nowrap px-3 py-4">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm font-medium text-foreground">
                20% Off
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="js-clipboard [--is-toggle-tooltip:false] hs-tooltip p-2 bg-surface text-surface-foreground text-xs rounded-md cursor-pointer"
                    data-clipboard-target="#hs-20off"
                    data-clipboard-action="copy"
                    data-clipboard-success-text="Copied">
                <span id="hs-20off" class="uppercase">20%off</span>
                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                  <span class="js-clipboard-success-text">Copy</span>
                </span>
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="py-1.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-red-100 text-red-800 rounded-full dark:bg-red-500/10 dark:text-red-500">
                <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"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
                Expired
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm text-muted-foreground-2">
                All products
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1">
              <span class="text-sm text-muted-foreground-2">
                $50
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1 text-end">
              <span class="text-sm text-muted-foreground-2">
                41
              </span>
            </td>
            <td class="size-px whitespace-nowrap px-4 py-1 text-end">
              <div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                <button id="hs-pro-errtmd12" type="button" class="size-7 inline-flex justify-center items-center gap-x-2 rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  <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="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-24 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-errtmd12">
                  <div class="p-1">
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Edit
                    </button>
                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      Duplicate
                    </button>

<div class="flex flex-wrap justify-between items-center gap-2">
    <p class="text-sm text-foreground">
      <span class="font-medium">27</span>
      <span class="text-muted-foreground-1">results</span>
    </p>
  
    
    <nav class="flex justify-end items-center gap-x-1" aria-label="Pagination">
      <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Previous">
        <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="m15 18-6-6 6-6"/></svg>
        <span class="sr-only">Previous</span>
      </button>
      <div class="flex items-center gap-x-1">
        <span class="min-h-9.5 min-w-9.5 flex justify-center items-center bg-surface text-surface-foreground py-2 px-3 text-sm rounded-lg disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</span>
        <span class="min-h-9.5 flex justify-center items-center text-muted-foreground-1 py-2 px-1.5 text-sm">of</span>
        <span class="min-h-9.5 flex justify-center items-center text-muted-foreground-1 py-2 px-1.5 text-sm">3</span>
      </div>
      <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Next">
        <span class="sr-only">Next</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"><path d="m9 18 6-6-6-6"/></svg>
      </button>
    </nav>
    
  </div>
  
</div>

Open related discounts page