@invopop/popui 0.1.3 → 0.1.4-beta.2

package/dist/DatePicker.svelte

@@ -115,7 +115,7 @@
     onSelect
   }: DatePickerProps = $props()
 
-  let selectedPeriod = $state('this-week')
+  let selectedPeriod = $state('custom')
   let value = $state<DateRange>({
     start: undefined,
     end: undefined
@@ -123,8 +123,8 @@
   let isOpen = $state(false)
   let styles = $derived(
     clsx({
-      'border-workspace-accent focus:border-workspace-accent shadow-active': isOpen,
-      'border-neutral-200 hover:border-neutral-300': !isOpen
+      'border-border-selected-bold shadow-active': isOpen,
+      'border-border-secondary hover:border-border-default-secondary-hover': !isOpen
     })
   )
   let selectedLabel = $state(label)
@@ -143,14 +143,15 @@
       }
       return
     }
-    value = {
-      start: toCalendarDate(startOfThisWeek),
-      end: toCalendarDate(endOfThisWeek)
-    }
-    selectedPeriod = 'this-week'
   })
 
   function cancel() {
+    value = {
+      start: undefined,
+      end: undefined
+    }
+    selectedPeriod = 'custom'
+    selectedLabel = label
     isOpen = false
     onSelect?.({ from: '', to: '' })
   }
@@ -187,11 +188,11 @@
       onclick={() => {
         isOpen = !isOpen
       }}
-      class="{styles} datepicker-trigger w-full py-1.25 pl-7 pr-8 border rounded-md text-neutral-800 placeholder-neutral-800 text-base cursor-pointer"
+      class="{styles} datepicker-trigger w-full py-1.25 pl-7 pr-2 text-left border border-border-default-secondary rounded-lg text-foreground placeholder-foreground text-base cursor-pointer"
     >
       {selectedLabel}
     </button>
-    <Icon src={Calendar} class="h-4 w-4 absolute top-2 left-2 text-neutral-500" />
+    <Icon src={Calendar} class="h-4 w-4 absolute top-2 left-2 text-foreground-default-secondary" />
   </div>
 
   <div class="relative">
@@ -208,21 +209,21 @@
       <div
         class:left-0={position === 'left'}
         class:right-0={position === 'right'}
-        class="bg-white inline-flex flex-col shadow rounded-lg absolute right-0 top-2 z-40"
+        class="bg-background inline-flex flex-col shadow-lg rounded-xl absolute right-0 top-2 z-40 border border-border"
         use:clickOutside
         onclick_outside={() => {
           if (!isOpen) return
           cancel()
         }}
       >
-        <div class="flex border-b border-neutral-100 min-h-[300px] rounded-lg shadow-calendar">
-          <div class="flex flex-col space-y-2 items-start p-3 border-r border-neutral-100">
+        <div class="flex border-b border-border min-h-[300px] shadow-calendar">
+          <div class="flex flex-col space-y-2 items-start p-3 border-r border-border">
             {#each periods as period}
               <button
                 onclick={period.action}
                 class="{selectedPeriod === period.slug
-                  ? 'selected-period text-workspace-accent-600 bg-workspace-accent-100'
-                  : 'text-neutral-500'} whitespace-nowrap text-base px-2 py-1 tracking-normal rounded cursor-pointer"
+                  ? 'selected-period text-foreground-selected bg-background-selected font-medium'
+                  : 'text-foreground-default-secondary'} whitespace-nowrap text-base px-2 py-1 tracking-normal rounded-md cursor-pointer"
               >
                 {period.label}
               </button>
@@ -231,8 +232,10 @@
           <RangeCalendar bind:value numberOfMonths={2} />
         </div>
         <div class="p-3 flex justify-end items-center space-x-3">
-          <BaseButton variant="secondary" onclick={cancel}>Cancel</BaseButton>
-          <BaseButton variant="primary" onclick={confirm} disabled={!value.end}>Confirm</BaseButton>
+          <BaseButton variant="secondary" size="lg" onclick={cancel}>Cancel</BaseButton>
+          <BaseButton variant="primary" size="lg" onclick={confirm} disabled={!value.end}
+            >Confirm</BaseButton
+          >
         </div>
       </div>
     </Transition>

package/dist/DrawerContext.svelte

@@ -1,46 +1,238 @@
 <script lang="ts">
   import type { DrawerContextProps, DrawerOption } from './types.ts'
   import DrawerContextItem from './DrawerContextItem.svelte'
-  import InputSearch from './InputSearch.svelte'
   import DrawerContextSeparator from './DrawerContextSeparator.svelte'
+  import EmptyState from './EmptyState.svelte'
+  import BaseCounter from './BaseCounter.svelte'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { ChevronRight } from '@steeze-ui/heroicons'
+  import { slide } from 'svelte/transition'
+  import Sortable from 'sortablejs'
+  import { onMount } from 'svelte'
 
   let {
     items = $bindable([]),
     multiple = false,
-    searchable = false,
+    draggable = false,
     widthClass = 'w-60',
     onclick,
-    onselect
+    onselect,
+    onreorder,
+    children,
+    groups
   }: DrawerContextProps = $props()
 
   let selectedItems = $derived(items.filter((i) => i.selected))
+  let hasGroups = $derived(groups && groups.length > 0)
+  let { groupedItems, ungroupedItems } = $derived.by(() => {
+    if (!hasGroups) return { groupedItems: new Map(), ungroupedItems: items }
+
+    const grouped = new Map<string, DrawerOption[]>()
+    const ungrouped: DrawerOption[] = []
+
+    groups!.forEach((group) => {
+      grouped.set(group.slug, [])
+    })
+
+    items.forEach((item) => {
+      if (item.groupBy && grouped.has(item.groupBy)) {
+        grouped.get(item.groupBy)!.push(item)
+      } else {
+        ungrouped.push(item)
+      }
+    })
+
+    return { groupedItems: grouped, ungroupedItems: ungrouped }
+  })
+
+  let openGroups = $state<Record<string, boolean>>({})
+  let ungroupedContainer: HTMLElement | null = $state(null)
+  let groupContainers: Record<string, HTMLElement | null> = {}
+
+  $effect(() => {
+    if (hasGroups) {
+      const selectedItem = items.find((i) => i.selected)
+      if (selectedItem?.groupBy && Object.keys(openGroups).length === 0) {
+        openGroups = { [selectedItem.groupBy]: true }
+      }
+    }
+  })
+
   $effect(() => {
     onselect?.(selectedItems)
   })
 
+  function initializeSortable() {
+    if (!draggable) return
+
+    // Initialize sortable for ungrouped items
+    if (ungroupedContainer && ungroupedItems.length > 0) {
+      Sortable.create(ungroupedContainer, {
+        animation: 150,
+        handle: '.draggable-item',
+        ghostClass: 'opacity-10',
+        dragClass: 'cursor-grabbing',
+        forceFallback: true,
+        onEnd: (event) => {
+          if (event.oldIndex !== undefined && event.newIndex !== undefined) {
+            const newItems = [...items]
+            const ungroupedIndices = items
+              .map((item, index) => (!item.groupBy ? index : -1))
+              .filter((i) => i !== -1)
+
+            const fromIndex = ungroupedIndices[event.oldIndex]
+            const toIndex = ungroupedIndices[event.newIndex]
+
+            const [removed] = newItems.splice(fromIndex, 1)
+            newItems.splice(toIndex, 0, removed)
+
+            items = newItems
+            onreorder?.(newItems)
+          }
+        }
+      })
+    }
+
+    // Initialize sortable for grouped items
+    if (hasGroups && groups) {
+      groups.forEach((group) => {
+        const container = groupContainers[group.slug]
+        const groupItems = groupedItems.get(group.slug) || []
+
+        if (container && groupItems.length > 0) {
+          Sortable.create(container, {
+            animation: 150,
+            handle: '.draggable-item',
+            ghostClass: 'opacity-10',
+            dragClass: 'cursor-grabbing',
+            forceFallback: true,
+            onEnd: (event) => {
+              if (event.oldIndex !== undefined && event.newIndex !== undefined) {
+                const newItems = [...items]
+                const groupedIndices = items
+                  .map((item, index) => (item.groupBy === group.slug ? index : -1))
+                  .filter((i) => i !== -1)
+
+                const fromIndex = groupedIndices[event.oldIndex]
+                const toIndex = groupedIndices[event.newIndex]
+
+                const [removed] = newItems.splice(fromIndex, 1)
+                newItems.splice(toIndex, 0, removed)
+
+                items = newItems
+                onreorder?.(newItems)
+              }
+            }
+          })
+        }
+      })
+    }
+  }
+
+  onMount(() => {
+    if (draggable) {
+      // Small delay to ensure DOM is ready
+      setTimeout(initializeSortable, 100)
+    }
+  })
+
   function updateItem(item: DrawerOption) {
     items = items.map((i) => {
       if (i.value === item.value) return item
       return i
     })
   }
+
+  function toggleGroup(groupSlug: string) {
+    openGroups = openGroups[groupSlug] ? {} : { [groupSlug]: true }
+
+    // Reinitialize sortable when a group is toggled
+    if (draggable) {
+      setTimeout(initializeSortable, 100)
+    }
+  }
 </script>
 
-<div
-  class="{widthClass} border border-neutral-200 py-1 rounded-md shadow-lg space-y-0.5 bg-white max-h-80 overflow-y-auto"
->
-  {#if searchable}
-    <div class="px-2 mt-2 mb-1">
-      <InputSearch placeholder="Search" />
+{#snippet drawerItem(item: DrawerOption)}
+  {#if item.separator}
+    <DrawerContextSeparator />
+  {:else}
+    <div class:px-1={!item.groupBy} class:draggable-item={draggable} class:cursor-grab={draggable}>
+      <DrawerContextItem {item} {multiple} {onclick} onchange={updateItem} />
     </div>
   {/if}
-  <ul class="space-y-0.5 max-h-80 overflow-y-auto">
-    {#each items as item}
-      {#if item.separator}
+{/snippet}
+
+<div
+  class="{widthClass} border border-border rounded-2xl shadow-lg bg-background flex flex-col py-1 max-h-[568px] list-none"
+>
+  {@render children?.()}
+
+  {#if hasGroups}
+    {#each groups as group, index}
+      {@const groupItems = groupedItems.get(group.slug) || []}
+      {@const isLastGroup = index === groups!.length - 1}
+      {@const isOpen = openGroups[group.slug]}
+      {@const hasOpenGroup = Object.values(openGroups).some((v) => v)}
+      <div
+        class="px-1"
+        class:flex-1={isOpen}
+        class:flex={isOpen}
+        class:flex-col={isOpen}
+        class:min-h-0={isOpen}
+        class:flex-shrink-0={!isOpen && hasOpenGroup}
+      >
+        <button
+          class="cursor-pointer flex items-center justify-between h-8 pl-2.5 pr-2.5 py-2.5 text-base font-medium text-foreground-default-secondary w-full hover:bg-background-default-secondary rounded-lg overflow-clip flex-shrink-0"
+          onclick={() => toggleGroup(group.slug)}
+        >
+          <div class="flex items-center gap-1.5">
+            <span>{group.label}</span>
+            <Icon
+              src={ChevronRight}
+              class="size-3 text-icon-default-secondary transition-all transform {isOpen
+                ? 'rotate-90'
+                : ''}"
+            />
+          </div>
+          {#if groupItems.length}
+            <BaseCounter value={groupItems.length} />
+          {/if}
+        </button>
+
+        {#if isOpen}
+          <div
+            class="w-full overflow-y-auto flex-1 min-h-0"
+            transition:slide={{ duration: 200 }}
+            bind:this={groupContainers[group.slug]}
+          >
+            {#if !groupItems.length}
+              <div class="px-1 pt-1 pb-5">
+                <EmptyState
+                  iconSource={group.emptyIcon}
+                  title={group.emptyTitle || 'No items here'}
+                  description={group.emptyDescription || 'Add items to get started'}
+                />
+              </div>
+            {:else}
+              {#each groupItems as item}
+                {@render drawerItem(item)}
+              {/each}
+            {/if}
+          </div>
+        {/if}
+      </div>
+      {#if !isLastGroup}
         <DrawerContextSeparator />
-      {:else}
-        <DrawerContextItem {item} {multiple} {onclick} onchange={updateItem} />
       {/if}
     {/each}
-  </ul>
+  {/if}
+
+  {#if ungroupedItems.length}
+    <div class="flex-shrink-0 overflow-y-auto max-h-[564px]" bind:this={ungroupedContainer}>
+      {#each ungroupedItems as item (item.value)}
+        {@render drawerItem(item)}
+      {/each}
+    </div>
+  {/if}
 </div>

package/dist/DrawerContextItem.svelte

@@ -2,57 +2,54 @@
   import type { DrawerContextItemProps } from './types.ts'
   import InputCheckbox from './InputCheckbox.svelte'
   import { Icon } from '@steeze-ui/svelte-icon'
-  import { onMount } from 'svelte'
-  import { Success, Tick } from '@invopop/ui-icons'
-  import ProfileAvatar from './ProfileAvatar.svelte'
+  import { onMount, onDestroy } from 'svelte'
+  import { Success } from '@invopop/ui-icons'
   import clsx from 'clsx'
   import BaseFlag from './BaseFlag.svelte'
   import { getCountryName } from './helpers.js'
   import TagStatus from './TagStatus.svelte'
+  import ProfileAvatar from './ProfileAvatar.svelte'
 
   let {
     multiple = false,
     item = $bindable(),
     scrollIfSelected = false,
-    workspace = false,
     onchange,
     onclick
   }: DrawerContextItemProps = $props()
 
   let el: HTMLElement | undefined = $state()
 
-  let hasIcon = $derived(item.icon || workspace)
-
   let styles = $derived(
     clsx(
-      { 'py-1 space-x-3': workspace },
-      { 'py-1.5 space-x-1.5': !workspace },
-      { 'pl-1.5': !hasIcon },
-      { 'pl-2': hasIcon },
-      { 'bg-workspace-accent-100': item.selected && !multiple },
-      { 'group-hover:bg-neutral-100': (!item.selected && !item.disabled) || multiple }
+      'px-2 py-1.5 space-x-1.5',
+      { 'bg-background-selected': item?.selected && !multiple },
+      {
+        'group-hover:bg-background-default-secondary':
+          (!item?.selected && !item?.disabled) || multiple
+      }
     )
   )
+
   let labelStyles = $derived(
     clsx(
-      { 'text-danger-500': item.destructive },
-      { 'text-neutral-800': !item.destructive },
-      { 'tracking-tight max-w-[200px]': workspace },
-      { 'tracking-normal': !workspace }
+      { 'text-foreground-critical': item?.destructive },
+      { 'text-foreground': !item?.destructive },
+      { 'opacity-30': item?.locked }
     )
   )
-  let title = $derived(item.label.length > 25 ? item.label : undefined)
+  let title = $derived(item?.label && item.label.length > 25 ? item.label : undefined)
 
   onMount(() => {
-    if (!scrollIfSelected) return
-
-    if (item.selected) {
+    if (scrollIfSelected && item?.selected) {
       el?.scrollIntoView()
     }
   })
 
   function handleClick(event: MouseEvent) {
     event.stopPropagation()
+    if (!item) return
+
     if (multiple) {
       item.selected = !item.selected
       onchange?.(item)
@@ -64,49 +61,52 @@
 
 <button
   bind:this={el}
-  class="w-full px-1 py-0.5 disabled:opacity-30 group"
-  disabled={item.disabled}
+  class="cursor-pointer w-full disabled:opacity-30 group"
+  disabled={item?.disabled}
   onclick={handleClick}
 >
-  <div class="{styles} rounded pr-2 flex items-center justify-start w-full">
-    {#if workspace}
-      <ProfileAvatar name={item.label} picture={item.picture} large />
-    {:else if item.icon}
+  <div class="{styles} rounded-md pr-2 flex items-center justify-start w-full">
+    {#if item?.useAvatar}
+      <ProfileAvatar name={item?.label || ''} picture={item?.picture || ''} variant="sm" />
+    {:else if item?.picture}
+      <ProfileAvatar name={item?.label || ''} picture={item?.picture} variant="sm" />
+    {:else if item?.icon}
       <Icon
         src={item.icon}
-        class="w-4 h-4 {item.destructive
-          ? 'text-danger-500'
-          : item.iconClass || 'text-neutral-500'}"
+        class="w-4 h-4 {item?.destructive
+          ? 'text-icon-critical'
+          : item?.iconClass || 'text-icon'} {item?.locked ? 'opacity-30' : ''}"
       />
     {/if}
-    <div class="whitespace-nowrap flex-1 text-left flex flex-col truncate" {title}>
-      <span class="flex items-center space-x-1.5">
-        {#if item.color}
-          <TagStatus status={item.color} dot />
-        {/if}
-        <span class="{labelStyles} text-base font-medium truncate">{item.label}</span>
-      </span>
+    <div class="whitespace-nowrap flex-1 text-left flex items-center space-x-1.5 truncate" {title}>
+      {#if item?.color}
+        <TagStatus status={item.color} dot />
+      {/if}
+      <span class="{labelStyles} text-base font-medium truncate">{item?.label || ''}</span>
 
-      {#if item.country}
-        <span class="flex space-x-1 items-center">
-          <BaseFlag country={item.country} width={10} />
-          <span class="text-sm text-neutral-500 tracking-normal"
-            >{getCountryName(item.country)}</span
-          >
+      {#if item?.country}
+        <BaseFlag country={item.country} />
+        <span class="text-xs font-medium text-foreground-default-secondary uppercase">
+          {item.country}
         </span>
       {/if}
     </div>
-    {#if multiple}
+    {#if item?.action}
+      {@render item.action(item)}
+    {:else if multiple}
       <InputCheckbox
-        bind:checked={item.selected}
-        onchange={() => {
-          onchange?.(item)
+        checked={item?.selected ?? false}
+        onchange={(value) => {
+          if (item) {
+            item.selected = value
+            onchange?.(item)
+          }
         }}
       />
-    {:else if item.selected}
-      <Icon src={Success} class="w-4 h-4 text-workspace-accent" />
-    {:else if item.rightIcon}
-      <Icon src={item.rightIcon} class="w-4 h-4 text-neutral-400" />
+    {:else if item?.selected}
+      <Icon src={Success} class="size-4 text-icon-selected" />
+    {:else if item?.rightIcon}
+      <Icon src={item.rightIcon} class="size-4 text-icon-default-secondary" />
     {/if}
   </div>
 </button>

package/dist/DrawerContextSeparator.svelte

@@ -1 +1 @@
-<li class="bg-neutral-100 h-px w-full"></li>
+<li class="bg-border h-px min-h-px w-full my-1"></li>

package/dist/DropdownSelect.svelte

@@ -7,6 +7,7 @@
   import clsx from 'clsx'
   import TagStatus from './TagStatus.svelte'
   import { resolveIcon } from './helpers.js'
+  import { buttonVariants } from './button/button.svelte'
 
   let {
     value = $bindable(''),
@@ -17,7 +18,10 @@
     multiple = false,
     fullWidth = false,
     widthClass = 'min-w-[160px] max-w-[420px]',
-    onSelect
+    onSelect,
+    stackLeft = false,
+    stackRight = false,
+    multipleLabel = 'items'
   }: DropdownSelectProps = $props()
 
   let selectDropdown: BaseDropdown | undefined = $state()
@@ -39,20 +43,34 @@
 
   let selectedItems = $derived(items.filter((i) => i.selected))
   let selectedColor = $derived(!multiple && items.find((i) => i.selected)?.color)
+  let selectedColors = $derived(
+    multiple ? selectedItems.filter((i) => i.color).map((i) => i.color) : []
+  )
+  let hasMultipleColors = $derived(multiple && selectedColors.length > 0)
   let selectedIcon = $derived(!multiple && items.find((i) => i.selected)?.icon)
   let selectedIconColor = $derived(
-    (!multiple && items.find((i) => i.selected)?.iconClass) || 'text-neutral-500'
+    (!multiple && items.find((i) => i.selected)?.iconClass) || 'text-foreground-default-secondary'
   )
   let selectedLabel = $derived(
-    `${selectedItems[0]?.label || ''}${selectedItems.length > 1 ? ' and more...' : ''}` ||
-      placeholder
+    hasMultipleColors && selectedItems.length > 1
+      ? `${selectedItems.length} ${multipleLabel}`
+      : `${selectedItems[0]?.label || ''}${selectedItems.length > 1 && multiple ? ' and more' : ''}` ||
+          placeholder
   )
 
+  let isStacked = $derived(stackLeft || stackRight)
+
   let styles = $derived(
-    clsx({
-      'shadow-active border-workspace-accent hover:border-workspace-accent': isOpen,
-      'border-neutral-100': !isOpen
-    })
+    isStacked
+      ? buttonVariants({
+          variant: 'ghost',
+          stackedLeft: stackLeft,
+          stackedRight: stackRight
+        })
+      : clsx('border backdrop-blur-sm backdrop-filter dropdown-select', {
+          'border-border-selected-bold shadow-active': isOpen,
+          'border-border-default-secondary hover:border-border-default-secondary-hover': !isOpen
+        })
   )
 
   function handleClick(val: AnyProp) {
@@ -75,30 +93,71 @@
   }
 </script>
 
-<BaseDropdown bind:isOpen placement="bottom-start" {fullWidth} bind:this={selectDropdown}>
+{#snippet label()}
+  <span
+    class="flex-1 text-base truncate {selectedItems.length
+      ? 'text-foreground'
+      : 'text-foreground-default-secondary'}"
+  >
+    {selectedLabel}
+  </span>
+{/snippet}
+
+<BaseDropdown
+  bind:isOpen
+  placement="bottom-start"
+  {fullWidth}
+  bind:this={selectDropdown}
+  class={fullWidth || isStacked ? '' : widthClass}
+>
   {#snippet trigger()}
     <div
-      class="{styles} dropdown-select max-w-[420px] flex items-center border hover:border-neutral-300 rounded-md py-1.25 pl-2 gap-1 bg-white whitespace-nowrap"
+      class="{styles} flex items-center rounded-lg py-1.5 pl-2 bg-background overflow-hidden w-full h-7"
+      class:pr-[28px]={!isStacked}
+      class:pr-2={isStacked}
     >
-      {#if selectedColor}
-        <TagStatus dot status={selectedColor} />
-      {:else if selectedIcon}
-        <Icon src={selectedIcon} {iconTheme} class="{selectedIconColor} h-4 w-4 flex-shrink-0" />
-      {:else if resolvedIcon}
-        <Icon src={resolvedIcon} {iconTheme} class="h-4 w-4 text-neutral-500 flex-shrink-0" />
+      {#if hasMultipleColors}
+        <div class="flex items-center gap-1 flex-1 min-w-0">
+          <div class="flex items-center -space-x-0.5">
+            {#each selectedColors.slice(0, 3) as color}
+              <span class="border-l border-background rounded-xs flex first:border-l-0">
+                <TagStatus dot status={color} />
+              </span>
+            {/each}
+          </div>
+          {@render label()}
+        </div>
+      {:else if selectedColor}
+        <div class="flex items-center gap-1 flex-1 min-w-0">
+          <TagStatus dot status={selectedColor} />
+          {@render label()}
+        </div>
+      {:else if selectedIcon || resolvedIcon}
+        <div class="flex items-center gap-1 flex-1 min-w-0">
+          {#if selectedIcon}
+            <Icon src={selectedIcon} {iconTheme} class="{selectedIconColor} size-4 flex-shrink-0" />
+          {:else if resolvedIcon}
+            <Icon src={resolvedIcon} {iconTheme} class="text-icon size-4 flex-shrink-0" />
+          {/if}
+          {@render label()}
+        </div>
+      {:else}
+        {@render label()}
       {/if}
-
-      <span class="w-full pr-8 text-neutral-800 placeholder-neutral-800 text-base truncate">
-        {selectedLabel}
-      </span>
     </div>
   {/snippet}
-  <DrawerContext {widthClass} {multiple} {items} onclick={handleClick} onselect={handleSelected} />
+  <DrawerContext
+    widthClass="min-w-[256px]"
+    {multiple}
+    {items}
+    onclick={handleClick}
+    onselect={handleSelected}
+  />
 </BaseDropdown>
 
 <style>
   .dropdown-select {
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMiIgeT0iMiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiByeD0iNCIgZmlsbD0iI0YzRjRGNiIvPgo8cGF0aCBkPSJNNi41IDguMjUwMDRMMTAgMTEuNzVMMTMuNSA4LjI1IiBzdHJva2U9IiMwMzA3MTIiIHN0cm9rZS13aWR0aD0iMS4xIi8+Cjwvc3ZnPg==');
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiByeD0iNCIgZmlsbD0icmdiYSg1LCA1LCAzNiwgMC4wNikiLz4KPHBhdGggZD0iTTQuNSA2LjVMOCAxMEwxMS41IDYuNSIgc3Ryb2tlPSIjMGIwYjEwIiBzdHJva2Utd2lkdGg9IjEuMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==');
     background-repeat: no-repeat;
     background-position: center right 8px;
   }

package/dist/DropdownSelectGroup.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    children: Snippet
+  }
+
+  let { children }: Props = $props()
+</script>
+
+<div
+  class="flex items-center h-7 rounded-md border border-border-default-secondary divide-x divide-border-default-secondary"
+>
+  {@render children()}
+</div>