@invopop/popui 0.1.19 → 0.1.20

package/dist/BaseCard.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <button
-  class="flex flex-col gap-4 p-3 w-[298px] bg-background border border-border rounded-xl cursor-pointer text-left transition-colors hover:border-border-default-secondary disabled:bg-background-default-secondary disabled:cursor-not-allowed disabled:pointer-events-none"
+  class="flex flex-col gap-4 p-3 min-w-[298px] bg-background border border-border rounded-xl cursor-pointer text-left transition-colors hover:border-border-default-secondary disabled:bg-background-default-secondary disabled:cursor-not-allowed disabled:pointer-events-none"
   disabled={type === 'soon'}
   {...rest}
   {onclick}

package/dist/BaseTable.svelte

@@ -258,7 +258,7 @@
       <TableRow>
         {#if selectable}
           <!-- if table is selectable we need to add an extra header with a checkbox -->
-          <TableHead class="bg-white sticky top-0 z-10 p-0 h-9">
+          <TableHead class="bg-background sticky top-0 z-10 p-0 h-9">
             {#if !hideSelectAll}
               <BaseTableCheckbox
                 {indeterminate}
@@ -273,7 +273,7 @@
         {/if}
         {#each fields as field, i (i)}
           <TableHead
-            class="bg-white group sticky z-10 top-0 py-0 {i === 0 && !selectable
+            class="bg-background group sticky z-10 top-0 py-0 {i === 0 && !selectable
               ? 'pl-3'
               : 'pl-0'} {i === fields.length - 1 && !addExtraCell ? 'pr-3' : 'pr-0'}"
           >
@@ -282,7 +282,7 @@
         {/each}
         {#if addExtraCell}
           <!-- if table has actions cell we need to add an extra header -->
-          <th scope="col" class="bg-white sticky top-0 z-10 rounded-tr-md"> </th>
+          <th scope="col" class="bg-background sticky top-0 z-10 rounded-tr-md"> </th>
         {/if}
       </TableRow>
     </TableHeader>
@@ -293,10 +293,10 @@
             <th
               scope="colgroup"
               colspan={fields.length + (selectable ? 2 : 1)}
-              class="bg-white text-left text-base font-normal text-foreground-default-secondary sticky top-9 tracking-normal h-8 z-10"
+              class="bg-background text-left text-base font-normal text-foreground-default-secondary sticky top-9 tracking-normal h-8 z-10"
             >
               <span
-                class:pl-13={selectable}
+                class:pl-16={selectable}
                 class:pl-6={!selectable}
                 class="flex items-center space-x-1 box-border border-b border-border h-9"
               >
@@ -361,7 +361,7 @@
       {#each group.rows as row}
         <button
           class:cursor-default={disableRowClick}
-          class="w-full text-left border border-neutral-20 rounded"
+          class="w-full text-left border border-border rounded"
           onclick={() => {
             if (disableRowClick) return
 

package/dist/BaseTableCellContent.svelte

@@ -44,7 +44,7 @@
     {#if icons}
       <span class:ml-2={!!data} class="flex items-center gap-1 shrink-0">
         {#each icons as icon}
-          <div class="border border-neutral-20 rounded-md p-px">
+          <div class="border border-border rounded-md p-px">
             {#if typeof icon === 'string'}
               <img alt="icon" src={icon} class="h-4 w-4" />
             {:else}

package/dist/BaseTableHeaderContent.svelte

@@ -15,7 +15,7 @@
 
   let headerStyles = $derived(
     clsx({
-      'hover:bg-neutral-5 focus:bg-neutral-10': field.sortable
+      'hover:bg-background-default-secondary focus:bg-background-default-tertiary': field.sortable
     })
   )
 
@@ -38,7 +38,7 @@
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
             class:rotate-180={sortDirection === 'asc'}
-            class="mt-px text-neutral-40 h-3 w-3"
+            class="mt-px text-icon h-3 w-3"
           >
             <path
               fill-rule="evenodd"

package/dist/CardCheckbox.svelte

@@ -10,7 +10,7 @@
     title = '',
     description = '',
     accentText = '',
-    checked = false,
+    checked = $bindable(false),
     disabled = false,
     icon = undefined,
     hideRadio = false,
@@ -19,44 +19,51 @@
   }: CardCheckboxProps = $props()
 
   let containerStyles = $derived(
-    clsx('border gap-3 flex items-start', {
+    clsx('border gap-3', {
       'border-foreground-selected': checked,
       'border-border': !checked,
       'bg-background-default-secondary': disabled,
-      'px-2 py-1.5 rounded-lg': hideRadio,
-      'py-2 pr-2 pl-3 rounded-xl': !hideRadio
+      'rounded-lg': hideRadio,
+      'rounded-xl': !hideRadio
+    })
+  )
+
+  let headerStyles = $derived(
+    clsx('flex items-start', {
+      'px-2 py-1.5': hideRadio,
+      'py-2 pr-2 pl-3': !hideRadio
     })
   )
 </script>
 
 <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="size-4 text-icon shrink-0 mt-0.5" />
-      {/if}
-      <div class="flex flex-col gap-1 min-w-0">
-        <span class="text-base font-medium text-foreground">
-          {title}
-        </span>
-        {#if description}
-          <span class="text-sm text-foreground-default-secondary">
-            {#if accentText}
-              <span class="font-medium text-foreground-accent">{accentText}</span>
-              {' · '}
-            {/if}
-            {description}
-          </span>
+    <div class={headerStyles}>
+      <div class="flex grow items-start gap-1 min-w-0">
+        {#if icon}
+          <Icon src={icon} class="size-4 text-icon shrink-0 mt-0.5" />
         {/if}
+        <div class="flex flex-col gap-1 min-w-0">
+          <span class="text-base font-medium text-foreground">
+            {title}
+          </span>
+          {#if description}
+            <span class="text-sm text-foreground-default-secondary">
+              {#if accentText}
+                <span class="font-medium text-foreground-accent">{accentText}</span>
+                {' · '}
+              {/if}
+              {description}
+            </span>
+          {/if}
+        </div>
       </div>
-    </div>
-    {#if !hideRadio}
-      <div class="flex items-center p-px">
-        <InputRadio {id} {name} {checked} {disabled} {onchange} />
+      <div class={clsx('flex items-center p-px', { 'sr-only': hideRadio })}>
+        <InputRadio {id} {name} bind:checked {disabled} {onchange} />
       </div>
-    {/if}
+    </div>
     {#if footer}
-      <div class="px-3 pb-3 pt-2">
+      <div class="pl-3 pr-2 pb-3 pt-2">
         {@render footer?.()}
       </div>
     {/if}

package/dist/CardCheckbox.svelte.d.ts

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

package/dist/DatePicker.svelte

@@ -124,7 +124,7 @@
   let styles = $derived(
     clsx({
       'border-border-selected-bold shadow-active': isOpen,
-      'border-border hover:border-border-default-secondary-hover': !isOpen
+      'border-border-secondary hover:border-border-default-secondary-hover': !isOpen
     })
   )
   let selectedLabel = $state(label)
@@ -209,7 +209,7 @@
       <div
         class:left-0={position === 'left'}
         class:right-0={position === 'right'}
-        class="bg-white inline-flex flex-col shadow-lg rounded-xl absolute right-0 top-2 z-40 border border-border"
+        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

package/dist/DrawerContext.svelte

@@ -79,7 +79,7 @@
 {/snippet}
 
 <div
-  class="{widthClass} border border-border rounded-2xl shadow-lg bg-white flex flex-col py-1 max-h-[480px] list-none"
+  class="{widthClass} border border-border rounded-2xl shadow-lg bg-background flex flex-col py-1 max-h-[480px] list-none"
 >
   {@render children?.()}
 

package/dist/DropdownSelect.svelte

@@ -41,7 +41,7 @@
   let selectedColor = $derived(!multiple && items.find((i) => i.selected)?.color)
   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
@@ -50,7 +50,7 @@
   let styles = $derived(
     clsx('border backdrop-blur-sm backdrop-filter', {
       'border-border-selected-bold shadow-active': isOpen,
-      'border-border hover:border-border-default-secondary-hover': !isOpen
+      'border-border-default-secondary hover:border-border-default-secondary-hover': !isOpen
     })
   )
 

package/dist/FeedIconStatus.svelte

@@ -27,5 +27,5 @@
     <Icon src={iconStatus} class="h-4 w-4 shrink-0 text-icon" />
   </div>
 {:else}
-  <div class="w-4 h-4 shrink-0 bg-neutral-200 rounded-full"></div>
+  <div class="w-4 h-4 shrink-0 bg-background-default-secondary rounded-full"></div>
 {/if}

package/dist/InputRadio.svelte

@@ -2,7 +2,7 @@
   import type { InputRadioProps } from './types'
 
   let {
-    checked = false,
+    checked = $bindable(false),
     disabled = false,
     id = Math.random().toString(36).slice(2, 7),
     name = '',
@@ -21,7 +21,8 @@
 
   function updateInput(event: Event) {
     const target = event.target as HTMLInputElement
-    onchange?.(target.checked)
+    checked = target.checked
+    onchange?.(checked)
   }
 </script>
 

package/dist/InputRadio.svelte.d.ts

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

package/dist/ProgressBar.svelte

@@ -2,6 +2,6 @@
   let { percentage = 0 }: { percentage?: number } = $props()
 </script>
 
-<div class="w-full h-1 shrink-0 rounded-full bg-neutral-200">
-  <div class="rounded-full h-1 bg-workspace-accent" style="width: {percentage}%;"></div>
+<div class="w-full h-1 shrink-0 rounded-full bg-background-default-secondary">
+  <div class="rounded-full h-1 bg-foreground-accent" style="width: {percentage}%;"></div>
 </div>

package/dist/TagSearch.svelte

@@ -20,15 +20,15 @@
 <span
   class:pl-2={icon}
   class:pl-3={!icon}
-  class="border rounded pr-1.5 text-sm inline-flex items-center border-workspace-accent-100 bg-workspace-accent-50"
+  class="border rounded pr-1.5 text-sm inline-flex items-center border-border-selected bg-background-selected"
 >
   {#if resolvedIcon}
-    <Icon src={resolvedIcon} theme={iconTheme} class="h-4 w-4 mr-1 text-workspace-accent" />
+    <Icon src={resolvedIcon} theme={iconTheme} class="h-4 w-4 mr-1 text-foreground-selected" />
   {/if}
-  <span class="py-1 pr-2 text-workspace-accent tracking-normal">{label}</span>
+  <span class="py-1 pr-2 text-foreground-selected tracking-normal">{label}</span>
   <button
     aria-label="Clear"
-    class="cursor-pointer py-1 border-l border-workspace-accent-100 pl-1 text-neutral-500"
+    class="cursor-pointer py-1 border-l border-border-selected pl-1 text-foreground-default-secondary"
     onclick={handleClear}
   >
     <svg

package/dist/alert-dialog/alert-dialog-overlay.svelte

@@ -8,7 +8,7 @@
   bind:ref
   data-slot="alert-dialog-overlay"
   class={cn(
-    'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-neutral-800/30 fixed inset-0 z-[1001]',
+    'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-neutral-80/30 fixed inset-0 z-[1001]',
     className
   )}
 />

package/dist/button/button.svelte

@@ -5,7 +5,7 @@
   import type { IconSource } from '@steeze-ui/svelte-icon'
 
   export const buttonVariants = tv({
-    base: 'inline-flex items-center justify-center font-medium text-base whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-workspace-accent focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden box-border cursor-pointer',
+    base: 'inline-flex items-center justify-center font-medium text-base whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-selected focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden box-border cursor-pointer',
     variants: {
       variant: {
         primary:

package/dist/button/button.svelte.d.ts

@@ -26,7 +26,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "inline-flex items-center justify-center font-medium text-base whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-workspace-accent focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden box-border cursor-pointer", {
+}, undefined, "inline-flex items-center justify-center font-medium text-base whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-selected focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden box-border cursor-pointer", {
     variant: {
         primary: string;
         warning: string;
@@ -74,7 +74,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "inline-flex items-center justify-center font-medium text-base whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-workspace-accent focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden box-border cursor-pointer", unknown, unknown, undefined>>;
+}, undefined, "inline-flex items-center justify-center font-medium text-base whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-selected focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden box-border cursor-pointer", unknown, unknown, undefined>>;
 export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
 export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
 export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {

package/dist/range-calendar/range-calendar.svelte

@@ -44,7 +44,7 @@
   {weekdayFormat}
   {disableDaysOutsideMonth}
   class={cn(
-    'bg-white group/calendar px-3 pb-2 pt-1 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+    'bg-background group/calendar px-3 pb-2 pt-1 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
     className
   )}
   {locale}

package/dist/table/table-body.svelte

@@ -8,6 +8,10 @@
   }: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props()
 </script>
 
-<tbody bind:this={ref} data-slot="table-body" class={cn('[&_tr:hover]:bg-neutral-5', className)}>
+<tbody
+  bind:this={ref}
+  data-slot="table-body"
+  class={cn('[&_tr:hover]:bg-background-default-secondary', className)}
+>
   {@render children?.()}
 </tbody>

package/dist/table/table-header.svelte

@@ -15,7 +15,7 @@
 <thead
   bind:this={ref}
   data-slot="table-header"
-  class={cn('[&_tr]:border-b [&_tr]:border-border bg-white', className)}
+  class={cn('[&_tr]:border-b [&_tr]:border-border bg-background', className)}
   onclick={bubble('click')}
   onkeydown={bubble('keydown')}
 >

package/dist/table/table-row.svelte

@@ -18,7 +18,7 @@
   bind:this={ref}
   data-slot="table-row"
   class={cn(
-    'data-[state=selected]:bg-neutral-5 data-[state=checked]:bg-workspace-accent-50 transition-colors border-b border-border h-10',
+    'data-[state=selected]:bg-background-default-secondary data-[state=checked]:bg-background-selected transition-colors border-b border-border h-10',
     className
   )}
   {oncontextmenu}

package/dist/tabs/tabs-trigger.svelte

@@ -15,7 +15,7 @@
   {value}
   data-slot="tabs-trigger"
   class={cn(
-    'data-[state=active]:bg-white inline-flex items-center justify-center whitespace-nowrap px-3 py-0.5 text-base font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm w-full cursor-pointer h-full',
+    'data-[state=active]:bg-background inline-flex items-center justify-center whitespace-nowrap px-3 py-0.5 text-base font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm w-full cursor-pointer h-full',
     variant === 'lg' ? 'rounded-md' : 'rounded',
     className
   )}

package/dist/types.d.ts

@@ -3,7 +3,7 @@ import type { IconSource } from '@steeze-ui/svelte-icon';
 import type { Snippet } from 'svelte';
 export type IconTheme = 'default' | 'solid' | 'mini';
 export type IconPosition = 'right' | 'left';
-export type ButtonVariant = 'warning' | 'primary' | 'secondary' | 'danger' | 'dark' | 'outline' | 'ghost';
+export type ButtonVariant = 'warning' | 'primary' | 'secondary' | 'danger' | 'dark' | 'outline' | 'ghost' | 'dark-ghost';
 export type StatusType = 'grey' | 'green' | 'yellow' | 'red' | 'orange' | 'blue' | 'purple' | 'olive' | 'teal' | 'crimson' | 'blueViolet' | 'steelBlue' | 'empty';
 export type AnyProp = string | number | object | boolean;
 export type SidebarIcon = {
@@ -363,11 +363,6 @@ export interface DrawerContextItemProps {
     onclick?: (value: AnyProp) => void;
     onchange?: (item: DrawerOption) => void;
 }
-export interface DrawerContextWorkspaceProps {
-    items?: DrawerOption[];
-    multiple?: boolean;
-    onclick?: (value: AnyProp) => void;
-}
 export interface DropdownSelectProps {
     value?: AnyProp;
     icon?: IconSource | string | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "scripts": {
     "dev": "vite dev",
     "dev:clean": "npm run clean && vite dev",

package/dist/DrawerContextWorkspace.svelte

@@ -1,126 +0,0 @@
-<script lang="ts">
-  import type { DrawerContextWorkspaceProps } from './types.ts'
-  import DrawerContextItem from './DrawerContextItem.svelte'
-  import { Icon } from '@steeze-ui/svelte-icon'
-  import { AddCircle, ExternalLink, Workspace } from '@invopop/ui-icons'
-  import BaseCounter from './BaseCounter.svelte'
-  import EmptyState from './EmptyState.svelte'
-  import { slide } from 'svelte/transition'
-  import { ChevronRight } from '@steeze-ui/heroicons'
-
-  let { items = [], multiple = false, onclick }: DrawerContextWorkspaceProps = $props()
-  let liveOpen = $state(false)
-  let sandboxOpen = $state(false)
-  let liveItems = $derived(items.filter((i) => !i.sandbox))
-  let sandboxItems = $derived(items.filter((i) => i.sandbox))
-  let selectedItem = $derived(items.find((i) => i.selected))
-
-  $effect(() => {
-    if (selectedItem) {
-      if (selectedItem.sandbox) {
-        sandboxOpen = true
-      } else {
-        liveOpen = true
-      }
-    }
-  })
-</script>
-
-<div class="w-[300px] border border-neutral-200 rounded-md shadow-lg bg-white">
-  <div class="max-h-[550px] overflow-hidden rounded-t-md">
-    <button
-      class="cursor-pointer flex items-center justify-between bg-neutral-50 border-b border-neutral-200 rounded-t-sm h-9 py-2 pl-2.5 pr-3 text-base font-medium text-neutral-800 w-full"
-      onclick={() => {
-        if (liveOpen) return
-        liveOpen = true
-        sandboxOpen = false
-      }}
-    >
-      <div class="flex items-center space-x-1.5">
-        <Icon
-          src={ChevronRight}
-          class="h-4 w-4 text-neutral-500 transition-all transform {liveOpen ? 'rotate-90' : ''}"
-        />
-        <span>Live</span>
-      </div>
-      {#if 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">
-            <EmptyState
-              iconSource={Workspace}
-              title="No workspaces here"
-              description="Create a workspace to start"
-            />
-          </div>
-        {/if}
-        <ul class="p-1 space-y-1">
-          {#each liveItems as item}
-            <DrawerContextItem {item} {multiple} workspace {onclick} />
-          {/each}
-        </ul>
-      </div>
-    {/if}
-    <button
-      class="cursor-pointer flex items-center justify-between bg-neutral-50 border-b border-neutral-200 h-9 py-2 pl-2.5 pr-3 text-base font-medium text-neutral-800 w-full"
-      class:border-t={liveOpen}
-      onclick={() => {
-        if (sandboxOpen) return
-        sandboxOpen = true
-        liveOpen = false
-      }}
-    >
-      <div class="flex items-center space-x-1.5">
-        <Icon
-          src={ChevronRight}
-          class="h-4 w-4 text-neutral-500 transition-all transform {sandboxOpen ? 'rotate-90' : ''}"
-        />
-        <span>Sandbox</span>
-      </div>
-      {#if 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">
-            <EmptyState
-              iconSource={Workspace}
-              title="No workspaces here"
-              description="Create a workspace to start"
-            />
-          </div>
-        {/if}
-        <ul class="p-1 space-y-1">
-          {#each sandboxItems as item}
-            <DrawerContextItem {item} {multiple} workspace {onclick} />
-          {/each}
-        </ul>
-      </div>
-    {/if}
-  </div>
-
-  <ul class="px-1 space-y-1 bg-neutral-50 rounded-b border-t border-neutral-100 py-1">
-    <li class="pl-1.5 py-1.5 pr-2 hover:bg-neutral-100 rounded-sm">
-      <button
-        class="cursor-pointer flex items-center justify-between w-full"
-        onclick={() => {
-          onclick?.('add')
-        }}
-      >
-        <div class="flex items-center space-x-1.5">
-          <Icon src={AddCircle} class="w-4 h-4 text-neutral-800 shrink-0" />
-          <span class="text-neutral-800 tracking-tight text-base font-medium">Create workspace</span
-          >
-        </div>
-
-        <Icon src={ExternalLink} class="w-4 h-4 text-neutral-400 shrink-0" />
-      </button>
-    </li>
-  </ul>
-</div>

package/dist/DrawerContextWorkspace.svelte.d.ts

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

package/dist/EmptyStateIllustration.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-  import type { EmptyStateIcon, EmptyStateIllustrationProps } from './types.js'
-  import BgPattern from './svg/BgPattern.svelte'
-  import IconContact from './svg/IconContact.svelte'
-  import IconInvoice from './svg/IconInvoice.svelte'
-  import IconProduct from './svg/IconProduct.svelte'
-  import IconFile from './svg/IconFile.svelte'
-  import IconPdf from './svg/IconPdf.svelte'
-  import IconNoResults from './svg/IconNoResults.svelte'
-  import type { SvelteComponent } from 'svelte'
-  import IconDelivery from './svg/IconDelivery.svelte'
-  import IconOrder from './svg/IconOrder.svelte'
-  import IconPayment from './svg/IconPayment.svelte'
-
-  let {
-    icon = undefined,
-    title = '',
-    description = '',
-    children
-  }: EmptyStateIllustrationProps = $props()
-
-  function getComponent(icon: EmptyStateIcon | undefined) {
-    if (!icon) return undefined
-
-    const icons: Record<EmptyStateIcon, unknown> = {
-      invoices: IconInvoice,
-      contacts: IconContact,
-      parties: IconContact,
-      products: IconProduct,
-      deliveries: IconDelivery,
-      orders: IconOrder,
-      payments: IconPayment,
-      file: IconFile,
-      pdf: IconPdf,
-      'no-results': IconNoResults
-    }
-
-    return icons[icon] as typeof SvelteComponent
-  }
-  let iconComponent = $derived(getComponent(icon))
-</script>
-
-<div
-  class="flex flex-col text-center items-center justify-center h-full font-sans gap-1"
-  aria-label={title}
->
-  {#if iconComponent}
-    {@const SvelteComponent_1 = iconComponent}
-    {@const SvelteComponent_2 = iconComponent}
-    {@const SvelteComponent_3 = iconComponent}
-    <div class="relative h-[120px] w-full max-w-sm">
-      <div class="absolute top-0 left-0">
-        <BgPattern />
-      </div>
-      <SvelteComponent_1
-        classes="text-neutral-400/40 absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] -ml-[40px] rotate-[-8deg] mt-0.5 z-20 w-[86px] h-[104px]"
-      />
-      <SvelteComponent_2
-        classes="{icon === 'no-results'
-          ? 'text-neutral-400'
-          : 'text-workspace-accent'} absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] z-30 w-[97px] h-[117px]"
-      />
-      <SvelteComponent_3
-        classes="text-neutral-400/40 absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] ml-[40px] rotate-[8deg] mt-0.5 z-20 w-[86px] h-[104px]"
-      />
-    </div>
-  {/if}
-  <div class="space-y-0.5">
-    <h4 class="font-medium text-neutral-800 text-base tracking-tight">{title}</h4>
-    <p class="max-w-xs text-base text-neutral-500 tracking-normal">{description}</p>
-    <p>{@render children?.()}</p>
-  </div>
-</div>

package/dist/EmptyStateIllustration.svelte.d.ts

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