@invopop/popui 0.1.13 → 0.1.15

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

@@ -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 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-md 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-md rounded-lg absolute right-0 top-2 z-40"
         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] rounded-lg 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-accent bg-foreground-accent/10'
+                  : 'text-foreground-default-secondary'} whitespace-nowrap text-base px-2 py-1 tracking-normal rounded cursor-pointer"
               >
                 {period.label}
               </button>

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,82 @@
       return i
     })
   }
+
+  function toggleGroup(groupSlug: string) {
+    openGroups = openGroups[groupSlug] ? {} : { [groupSlug]: true }
+  }
 </script>
 
 <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"
 >
   {@render children?.()}
-  <ul class="space-y-0.5 max-h-80 overflow-y-auto">
-    {#each items as item}
-      {#if item.separator}
-        <DrawerContextSeparator />
-      {:else}
-        <DrawerContextItem {item} {multiple} {onclick} onchange={updateItem} />
-      {/if}
+
+  {#if hasGroups}
+    {#each groups as group, index}
+      {@const groupItems = groupedItems.get(group.slug) || []}
+      {@const isLastGroup = index === groups!.length - 1}
+      <div class="flex-shrink-0 {!isLastGroup ? 'border-b border-border' : ''}">
+        <button
+          class="cursor-pointer flex items-center justify-between h-9 pl-3 pr-2.5 py-2.5 text-sm 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}
+                  {#if item.separator}
+                    <DrawerContextSeparator />
+                  {:else}
+                    <div class="px-1">
+                      <DrawerContextItem {item} {multiple} {onclick} onchange={updateItem} />
+                    </div>
+                  {/if}
+                {/each}
+              </div>
+            {/if}
+          </div>
+        {/if}
+      </div>
     {/each}
-  </ul>
+  {/if}
+
+  {#if ungroupedItems.length}
+    <div class="flex-shrink-0 max-h-[400px] overflow-y-auto">
+      {#each ungroupedItems as item}
+        {#if item.separator}
+          <DrawerContextSeparator />
+        {:else}
+          <div class="px-1">
+            <DrawerContextItem {item} {multiple} {onclick} onchange={updateItem} />
+          </div>
+        {/if}
+      {/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,26 @@
     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 }
+      'py-1.5 space-x-1.5',
+      { 'pl-1.5': !item.icon },
+      { 'pl-2': item.icon },
+      { '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 +57,15 @@
 
 <button
   bind:this={el}
-  class="cursor-pointer w-full px-1 py-0.5 disabled:opacity-30 group"
+  class="cursor-pointer w-full py-0.5 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}
+    {#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 +79,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 +87,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"></li>

package/dist/DrawerContextWorkspace.svelte

@@ -4,7 +4,7 @@
   import { Icon } from '@steeze-ui/svelte-icon'
   import { AddCircle, ExternalLink, Workspace } from '@invopop/ui-icons'
   import BaseCounter from './BaseCounter.svelte'
-  import EmptyStateIcon from './EmptyStateIcon.svelte'
+  import EmptyState from './EmptyState.svelte'
   import { slide } from 'svelte/transition'
   import { ChevronRight } from '@steeze-ui/heroicons'
 
@@ -44,15 +44,15 @@
         <span>Live</span>
       </div>
       {#if liveItems.length}
-        <BaseCounter content={liveItems.length} />
+        <BaseCounter value={liveItems.length} />
       {/if}
     </button>
     {#if liveOpen}
       <div transition:slide class="max-h-[475px] overflow-auto">
         {#if !liveItems.length}
           <div class="h-[182px] overflow-x-hidden">
-            <EmptyStateIcon
-              icon={Workspace}
+            <EmptyState
+              iconSource={Workspace}
               title="No workspaces here"
               description="Create a workspace to start"
             />
@@ -82,15 +82,15 @@
         <span>Sandbox</span>
       </div>
       {#if sandboxItems.length}
-        <BaseCounter content={sandboxItems.length} />
+        <BaseCounter value={sandboxItems.length} />
       {/if}
     </button>
     {#if sandboxOpen}
       <div transition:slide class="max-h-[475px] overflow-auto">
         {#if !sandboxItems.length}
           <div class="h-[182px] overflow-x-hidden">
-            <EmptyStateIcon
-              icon={Workspace}
+            <EmptyState
+              iconSource={Workspace}
               title="No workspaces here"
               description="Create a workspace to start"
             />

package/dist/DropdownSelect.svelte

@@ -49,9 +49,9 @@
   )
 
   let styles = $derived(
-    clsx({
-      'shadow-active border-workspace-accent hover:border-workspace-accent': isOpen,
-      'border-neutral-100': !isOpen
+    clsx('border backdrop-blur-sm backdrop-filter', {
+      'border-border-selected-bold shadow-active': isOpen,
+      'border-border hover:border-border-default-secondary-hover': !isOpen
     })
   )
 
@@ -78,19 +78,45 @@
 <BaseDropdown bind:isOpen placement="bottom-start" {fullWidth} bind:this={selectDropdown}>
   {#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} dropdown-select flex items-center rounded-lg py-1.5 px-2 bg-background whitespace-nowrap {fullWidth
+        ? 'w-full'
+        : widthClass}"
     >
       {#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" />
+        <div class="flex items-center gap-1 flex-1 min-w-0">
+          <TagStatus dot status={selectedColor} />
+          <span
+            class="flex-1 text-sm truncate {selectedItems.length
+              ? 'text-foreground'
+              : 'text-foreground-default-secondary'}"
+          >
+            {selectedLabel}
+          </span>
+        </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}
+          <span
+            class="flex-1 text-sm truncate {selectedItems.length
+              ? 'text-foreground'
+              : 'text-foreground-default-secondary'}"
+          >
+            {selectedLabel}
+          </span>
+        </div>
+      {:else}
+        <span
+          class="flex-1 text-sm truncate {selectedItems.length
+            ? 'text-foreground'
+            : 'text-foreground-default-secondary'}"
+        >
+          {selectedLabel}
+        </span>
       {/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} />
@@ -98,7 +124,7 @@
 
 <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/EmptyState.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import IconEmpty from './svg/IconEmpty.svelte'
+  import CheckBadge from './svg/CheckBadge.svelte'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import type { EmptyStateProps } from './types'
+
+  let {
+    icon,
+    iconSource,
+    title = '',
+    description = '',
+    check = false,
+    children
+  }: EmptyStateProps = $props()
+</script>
+
+<div class="flex flex-col items-center justify-center gap-4">
+  {#if icon}
+    <div class="relative h-[120px] w-[352px] max-w-sm flex items-center justify-center">
+      {@render icon()}
+    </div>
+  {:else if iconSource}
+    <div class="relative h-[120px] w-[352px] max-w-sm">
+      <IconEmpty />
+      <div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2">
+        <Icon src={iconSource} class="h-12 w-12 text-foreground-accent" />
+        {#if check}
+          <CheckBadge />
+        {/if}
+      </div>
+    </div>
+  {/if}
+  <div class="flex flex-col items-center gap-0.5 text-center">
+    <h4 class="font-medium text-foreground text-base">{title}</h4>
+    <p class="text-foreground-default-secondary text-base">{description}</p>
+  </div>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/EmptyState.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { EmptyStateProps } from './types';
+declare const EmptyState: import("svelte").Component<EmptyStateProps, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/EmptyStateIllustration.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { EmptyStateIllustrationProps } from './types.js';
 declare const EmptyStateIllustration: import("svelte").Component<EmptyStateIllustrationProps, {}, "">;
 type EmptyStateIllustration = ReturnType<typeof EmptyStateIllustration>;
 export default EmptyStateIllustration;