@invopop/popui 0.1.14 → 0.1.16

package/dist/ButtonFile.svelte

@@ -1,32 +1,29 @@
 <script lang="ts">
-  import { Icon } from '@steeze-ui/svelte-icon'
-  import { Invoice, Download } from '@invopop/ui-icons'
-  import BaseButton from './BaseButton.svelte'
+  import { Download } from '@invopop/ui-icons'
+  import Button from './button/button.svelte'
   import type { ButtonFileProps } from './types.js'
-  import clsx from 'clsx'
+  import { cn } from './utils.js'
 
   let {
-    icon = Invoice,
     name = '',
     disabled = false,
     date = '',
-    iconColor = 'grey',
+    fileType = 'pdf',
     onPreview,
     onDownload,
+    class: className,
     ...rest
   }: ButtonFileProps = $props()
 
-  let iconStyles = $derived(
-    clsx({
-      'border-positive-100 bg-positive-50 text-positive-500': iconColor === 'green',
-      'border-yellow-100 bg-yellow-50 text-yellow-500': iconColor === 'yellow',
-      'border-red-100 bg-red-50 text-red-500': iconColor === 'red',
-      'border-warning-100 bg-warning-50 text-warning-500': iconColor === 'orange',
-      'border-blue-100 bg-blue-50 text-blue-500': iconColor === 'blue',
-      'border-purple-100 bg-purple-50 text-purple-500': iconColor === 'purple',
-      'border-dashed border-neutral-100 text-neutral-400': iconColor === 'empty',
-      'border-neutral-100 bg-neutral-50 text-neutral-500': iconColor === 'grey'
-    })
+  let fileAvatarStyles = $derived(
+    cn(
+      'size-8 rounded-md border border-border flex items-center justify-center text-xs font-black font-mono leading-4 uppercase',
+      {
+        'text-foreground-document-pdf': fileType === 'pdf',
+        'text-foreground-document-xml': fileType === 'xml',
+        'text-foreground-document-png': fileType === 'png'
+      }
+    )
   )
 
   function handleClick(event: MouseEvent) {
@@ -36,27 +33,35 @@
 </script>
 
 <button
-  class:opacity-40={disabled}
-  class="border border-neutral-100 hover:bg-neutral-50 active:bg-neutral-100 hover:border-neutral-200 active:border-neutral-300 rounded-lg flex items-center space-x-3 py-1.5 pr-3 pl-2.5 w-full cursor-pointer"
+  class={cn(
+    'flex items-center gap-3 px-2 py-1.5 rounded-[10px] w-full hover:bg-background-default-secondary cursor-pointer',
+    disabled && 'opacity-30 pointer-events-none',
+    className
+  )}
   {disabled}
   {...rest}
   onclick={handleClick}
 >
-  <span class="flex items-center justify-start space-x-2.5 flex-1">
-    <div class="{iconStyles} p-2 border rounded">
-      <Icon src={icon} class="w-4 h-4" />
+  <div class="flex items-center gap-[10px] flex-1 min-w-0">
+    <div class={fileAvatarStyles}>
+      {fileType}
     </div>
-    <div class="flex flex-col items-start space-y-0.5">
-      <span class="text-base font-medium text-neutral-800 tracking-tight max-w-[174px] truncate">
+    <div class="flex flex-col text-start min-w-0 flex-1">
+      <div class="text-sm font-medium text-foreground truncate w-full">
         {name}
-      </span>
-      <span class="text-sm text-neutral-500">{date}</span>
+      </div>
+      <div class="text-xs text-foreground-default-secondary truncate w-full">
+        {date}
+      </div>
     </div>
-  </span>
-  <BaseButton
-    {disabled}
+  </div>
+  <Button
+    variant="secondary"
+    size="md"
     icon={Download}
-    onclick={() => {
+    {disabled}
+    onclick={(e) => {
+      e.stopPropagation()
       onDownload?.()
     }}
   />

package/dist/ButtonUuidCopy.svelte

@@ -28,13 +28,14 @@
 
 <BaseButton
   {disabled}
-  big
+  size="sm"
   icon={Duplicate}
   iconPosition="right"
+  variant="ghost"
   onclick={async () => {
     await navigator.clipboard.writeText(uuid)
     oncopied?.(uuid)
   }}
 >
-  <span class="font-mono text-neutral-500">{formattedUuid}</span>
+  <span class="font-mono">{formattedUuid}</span>
 </BaseButton>

package/dist/CardCheckbox.svelte

@@ -11,47 +11,51 @@
     description = '',
     accentText = '',
     checked = false,
+    disabled = false,
     icon = undefined,
     hideRadio = false,
     footer,
     onchange
   }: CardCheckboxProps = $props()
 
-  let styles = $derived(
-    clsx(
-      { 'border-workspace-accent shadow-active': checked },
-      { 'border-neutral-200 hover:border-neutral-300': !checked }
-    )
+  let containerStyles = $derived(
+    clsx('border gap-3 py-2 pr-2 pl-3 flex items-start rounded-xl', {
+      'border-foreground-selected': checked,
+      'border-border': !checked,
+      'bg-background-default-secondary': disabled
+    })
   )
 </script>
 
-<label for={id} class="{styles} border rounded-lg w-full text-left cursor-pointer block">
-  <div class="py-2 pr-2 pl-3 flex items-start justify-between">
-    <div class="flex space-x-2">
+<label for={id} class="cursor-pointer">
+  <div class={containerStyles}>
+    <div class="flex grow items-start gap-1 min-w-0">
       {#if icon}
-        <Icon src={icon} class="h-5 w-5 text-neutral-500 flex-shrink-0" />
+        <Icon src={icon} class="size-4 text-icon shrink-0 mt-0.5" />
       {/if}
-      <div class="flex flex-col space-y-0.5">
-        <span class="text-base text-neutral-800 font-medium">{title}</span>
+      <div class="flex flex-col gap-1 min-w-0">
+        <span class="text-base font-medium text-foreground">
+          {title}
+        </span>
         {#if description}
-          <span class="flex items-center space-x-1">
+          <span class="text-sm text-foreground-default-secondary">
             {#if accentText}
-              <p class="text-workspace-accent text-sm font-bold">{accentText}</p>
+              <span class="font-medium text-foreground-accent">{accentText}</span>
+              {' · '}
             {/if}
-            <p class="text-sm text-neutral-500" class:first-letter:uppercase={!accentText}>
-              {description}
-            </p>
+            {description}
           </span>
         {/if}
       </div>
     </div>
-
-    <div class:hidden={hideRadio}>
-      <InputRadio {id} {name} {checked} {onchange} />
-    </div>
+    {#if !hideRadio}
+      <div class="flex items-center p-px">
+        <InputRadio {id} {name} {checked} {disabled} {onchange} />
+      </div>
+    {/if}
   </div>
   {#if footer}
-    <div class="bg-neutral-50 rounded-b-lg px-3 py-2.5 border-t border-neutral-100">
+    <div class="border-t border-border bg-background-default-secondary rounded-b-xl px-3 pb-3 pt-2">
       {@render footer?.()}
     </div>
   {/if}

package/dist/CardRelation.svelte

@@ -2,31 +2,27 @@
   import { Icon } from '@steeze-ui/svelte-icon'
   import type { CardRelationProps } from './types.js'
   import { ChevronRight } from '@invopop/ui-icons'
-  import SeparatorHorizontal from './SeparatorHorizontal.svelte'
 
   let { title = '', icon = undefined, items = [], onclick }: CardRelationProps = $props()
 </script>
 
-<div class="border border-neutral-100 rounded-lg">
-  <button
-    class="cursor-pointer pl-3 py-2 pr-2 flex items-center justify-between space-x-3 w-full"
-    {onclick}
-  >
-    <div class="flex items-center space-x-1.5">
+<div class="border border-border-default-secondary rounded-2xl overflow-hidden">
+  <button class="flex items-center gap-3 px-3 py-2 w-full cursor-pointer" {onclick}>
+    <div class="flex grow items-center gap-1.5 min-w-0">
       {#if icon}
-        <Icon src={icon} class="h-4 w-4 text-neutral-500" />
+        <Icon src={icon} class="size-4 text-icon shrink-0" />
       {/if}
-      <span class="text-base font-medium text-neutral-800">{title}</span>
+      <span class="text-base font-medium text-foreground whitespace-nowrap">
+        {title}
+      </span>
     </div>
-
-    <Icon src={ChevronRight} class="h-4 w-4 text-neutral-500" />
+    <Icon src={ChevronRight} class="size-3 text-icon shrink-0" />
   </button>
-  <SeparatorHorizontal />
-  <div class="py-1.5 text-sm">
+  <div class="flex flex-col gap-2 px-3 pb-3 pt-2">
     {#each items as item}
-      <div class="px-3 py-1 flex items-center space-x-3">
-        <div class="min-w-[88px] text-neutral-500">{item.label}</div>
-        <div class="text-neutral-800">{item.value}</div>
+      <div class="flex items-center gap-3 text-sm">
+        <div class="min-w-[88px] text-foreground-default-secondary shrink-0">{item.label}</div>
+        <div class="grow text-foreground min-w-0">{item.value}</div>
       </div>
     {/each}
   </div>

package/dist/CompanySelector.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import ProfileAvatar from './ProfileAvatar.svelte'
-  import type { AnyProp, CompanySelectorProps, DrawerOption } from './types.js'
+  import type { AnyProp, CompanySelectorProps, DrawerOption, DrawerGroup } from './types.js'
   import BaseDropdown from './BaseDropdown.svelte'
-  import DrawerContextWorkspace from './DrawerContextWorkspace.svelte'
-  import { DoubleArrow } from '@invopop/ui-icons'
+  import DrawerContext from './DrawerContext.svelte'
+  import { DoubleArrow, Workspace, AddCircle, ExternalLink } from '@invopop/ui-icons'
   import MenuItemCollapsible from './MenuItemCollapsible.svelte'
 
   let companyDropdown: BaseDropdown | undefined = $state()
@@ -21,6 +21,24 @@
   let country = $derived(selectedCompany?.country || '')
   let picture = $derived(selectedCompany?.logo_url || '')
   let isSandbox = $derived(selectedCompany?.sandbox)
+
+  let groups: DrawerGroup[] = [
+    {
+      label: 'Live',
+      slug: 'live',
+      emptyIcon: Workspace,
+      emptyTitle: 'No workspaces here',
+      emptyDescription: 'Create a workspace to start'
+    },
+    {
+      label: 'Sandbox',
+      slug: 'sandbox',
+      emptyIcon: Workspace,
+      emptyTitle: 'No workspaces here',
+      emptyDescription: 'Create a workspace to start'
+    }
+  ]
+
   let items = $derived([
     ...companies.map((c) => ({
       value: c.id,
@@ -28,8 +46,18 @@
       selected: c.slug === selectedCompany?.slug && !!c.sandbox === !!selectedCompany?.sandbox,
       country: c.country,
       picture: c.logo_url,
-      sandbox: c.sandbox
-    }))
+      sandbox: c.sandbox,
+      groupBy: c.sandbox ? 'sandbox' : 'live'
+    })),
+    {
+      separator: true
+    },
+    {
+      value: 'add',
+      label: 'Create workspace',
+      icon: AddCircle,
+      rightIcon: ExternalLink
+    }
   ] as DrawerOption[])
 
   function selectCompany(value: AnyProp) {
@@ -60,8 +88,8 @@
       active={isOpen}
       bold
     >
-      <ProfileAvatar {name} {picture} {country} dark large />
+      <ProfileAvatar {name} {picture} {country} dark variant="lg" />
     </MenuItemCollapsible>
   {/snippet}
-  <DrawerContextWorkspace {items} onclick={selectCompany} />
+  <DrawerContext {items} {groups} onclick={selectCompany} widthClass="w-[300px]" />
 </BaseDropdown>

package/dist/DataListItem.svelte

@@ -11,8 +11,8 @@
     children
   }: DataListItemProps = $props()
 
-  let styles = $derived(
-    clsx({
+  let valueStyles = $derived(
+    clsx('text-foreground font-medium text-base', {
       'font-mono': monospaced,
       'slashed-zero tabular-nums lining-nums': monospacedNums,
       'w-full': fullWidth
@@ -20,13 +20,17 @@
   )
 </script>
 
-<div class="flex space-x-4 text-base items-center">
-  <div class="text-neutral-500 min-w-[125px]">{label}</div>
-  <div class="{styles} text-neutral-800 font-medium">
-    {#if children}
-      {@render children()}
-    {:else}
-      {value}
-    {/if}
+<div class="flex gap-6 items-center px-3 py-1.5 rounded-lg hover:bg-background-default-secondary">
+  <div class="text-foreground-default-secondary text-base min-w-[125px]">
+    {label}
+  </div>
+  <div class="flex gap-1 items-center">
+    <div class={valueStyles}>
+      {#if children}
+        {@render children()}
+      {:else}
+        {value}
+      {/if}
+    </div>
   </div>
 </div>

package/dist/DatePicker.svelte

@@ -120,11 +120,11 @@
     start: undefined,
     end: undefined
   })
-  let isOpen = $state(false)
+  let isOpen = $state(true)
   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 hover:border-border-default-secondary-hover': !isOpen
     })
   )
   let selectedLabel = $state(label)
@@ -188,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-8 border 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">
@@ -209,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-white 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>
@@ -232,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

@@ -2,6 +2,11 @@
   import type { DrawerContextProps, DrawerOption } from './types.ts'
   import DrawerContextItem from './DrawerContextItem.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'
 
   let {
     items = $bindable([]),
@@ -9,10 +14,44 @@
     widthClass = 'w-60',
     onclick,
     onselect,
-    children
+    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>>({})
+
+  $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)
   })
@@ -23,19 +62,83 @@
       return i
     })
   }
+
+  function toggleGroup(groupSlug: string) {
+    openGroups = openGroups[groupSlug] ? {} : { [groupSlug]: true }
+  }
 </script>
 
+{#snippet drawerItem(item: DrawerOption)}
+  {#if item.separator}
+    <DrawerContextSeparator />
+  {:else}
+    <div class:px-1={!item.groupBy}>
+      <DrawerContextItem {item} {multiple} {onclick} onchange={updateItem} />
+    </div>
+  {/if}
+{/snippet}
+
 <div
-  class="{widthClass} border border-neutral-200 py-0.5 rounded-2xl shadow-lg space-y-0.5 bg-white max-h-80 overflow-y-auto"
+  class="{widthClass} border border-border rounded-2xl shadow-lg bg-white overflow-hidden flex flex-col py-1 max-h-[400px] overflow-y-auto"
 >
   {@render children?.()}
-  <ul class="space-y-0.5 max-h-80 overflow-y-auto">
-    {#each items as item}
-      {#if item.separator}
+
+  {#if hasGroups}
+    {#each groups as group, index}
+      {@const groupItems = groupedItems.get(group.slug) || []}
+      {@const isLastGroup = index === groups!.length - 1}
+      <div class="flex-shrink-0 px-1">
+        <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"
+          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 {openGroups[
+                group.slug
+              ]
+                ? 'rotate-90'
+                : ''}"
+            />
+          </div>
+          {#if groupItems.length}
+            <BaseCounter value={groupItems.length} />
+          {/if}
+        </button>
+
+        {#if openGroups[group.slug]}
+          <div transition:slide class="w-full">
+            {#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}
+              <div class="max-h-[400px] overflow-y-auto">
+                {#each groupItems as item}
+                  {@render drawerItem(item)}
+                {/each}
+              </div>
+            {/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">
+      {#each ungroupedItems as item}
+        {@render drawerItem(item)}
+      {/each}
+    </div>
+  {/if}
 </div>

package/dist/DrawerContextItem.svelte

@@ -3,8 +3,7 @@
   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 { Success } from '@invopop/ui-icons'
   import clsx from 'clsx'
   import BaseFlag from './BaseFlag.svelte'
   import { getCountryName } from './helpers.js'
@@ -14,32 +13,24 @@
     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 }
-    )
+    clsx({ 'text-danger-500': item.destructive }, { 'text-neutral-800': !item.destructive })
   )
   let title = $derived(item.label.length > 25 ? item.label : undefined)
 
@@ -64,19 +55,15 @@
 
 <button
   bind:this={el}
-  class="cursor-pointer w-full px-1 py-0.5 disabled:opacity-30 group"
+  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.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'}"
       />
     {/if}
     <div class="whitespace-nowrap flex-1 text-left flex flex-col truncate" {title}>
@@ -90,7 +77,7 @@
       {#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">
+          <span class="text-sm text-foreground-default-secondary">
             {getCountryName(item.country)}
           </span>
         </span>
@@ -98,15 +85,16 @@
     </div>
     {#if multiple}
       <InputCheckbox
-        bind:checked={item.selected}
-        onchange={() => {
+        checked={item.selected ?? false}
+        onchange={(value) => {
+          item.selected = value
           onchange?.(item)
         }}
       />
     {:else if item.selected}
-      <Icon src={Success} class="w-4 h-4 text-workspace-accent" />
+      <Icon src={Success} class="size-4 text-icon-selected" />
     {:else if item.rightIcon}
-      <Icon src={item.rightIcon} class="w-4 h-4 text-neutral-400" />
+      <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 w-full my-1"></li>