@invopop/popui 0.1.19 → 0.1.21

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}
@@ -45,7 +45,7 @@
         </div>
       {/if}
     </div>
-    <div class="flex flex-col gap-0.5 w-full">
+    <div class="flex flex-col gap-0.5 w-full flex-1">
       <h3 class="font-medium text-sm leading-5 tracking-[-0.07px] text-foreground w-full">
         {title}
       </h3>

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)
@@ -188,7 +188,7 @@
       onclick={() => {
         isOpen = !isOpen
       }}
-      class="{styles} datepicker-trigger w-full py-1.25 pl-7 pr-8 border rounded-lg text-foreground placeholder-foreground text-base cursor-pointer"
+      class="{styles} datepicker-trigger w-full py-1.25 pl-7 pr-8 border border-border-default-secondary rounded-lg text-foreground placeholder-foreground text-base cursor-pointer"
     >
       {selectedLabel}
     </button>
@@ -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/EmptyState.svelte

@@ -23,7 +23,7 @@
     <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="size-10 text-foreground-accent" />
+        <Icon src={iconSource} class="size-10 text-icon-accent" />
         {#if check}
           <CheckBadge />
         {/if}

package/dist/FeedIconEvent.svelte

@@ -5,7 +5,7 @@
   let { icon = undefined, iconTheme = 'default' }: FeedIconEventProps = $props()
 </script>
 
-<div class="relative py-0.5 mt-2">
+<div class="relative py-0.5 mt-2 bg-background">
   {#if icon}
     <Icon src={icon} theme={iconTheme} class="size-4 text-icon-default-bold" />
   {/if}

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/FeedViewer.svelte

@@ -5,7 +5,7 @@
   let { items = [], onView }: FeedViewerProps = $props()
 </script>
 
-<div>
+<div class="space-y-1">
   {#each items as item, i (i)}
     <FeedItem {...item} hasNext={i < items.length - 1} {onView} />
   {/each}

package/dist/InputCheckbox.svelte

@@ -26,7 +26,7 @@
     type="checkbox"
     {checked}
     {indeterminate}
-    class="form-checkbox size-4 text-background-accent rounded border border-border-default-secondary hover:border-border-default-primary focus:ring-0 focus:ring-offset-0"
+    class="form-checkbox size-4 text-background-accent rounded border border-border-default-secondary hover:border-border-default-primary focus:ring-0 focus:ring-offset-0 bg-background"
     {...rest}
     onchange={updateInput}
     {onclick}

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>
 
@@ -33,7 +34,7 @@
     {name}
     {checked}
     {disabled}
-    class="appearance-none size-4 rounded-full border checked:border-0 checked:bg-background-accent checked:border-0 checked:bg-background-accent cursor-pointer focus:outline-none focus:ring-0 shrink-0 disabled:cursor-not-allowed border-border-default-secondary disabled:checked:bg-border-default-secondary disabled:checked:border"
+    class="appearance-none size-4 rounded-full border checked:border-0 checked:bg-background-accent cursor-pointer focus:outline-none focus:ring-0 shrink-0 disabled:cursor-not-allowed border-border-default-secondary disabled:checked:bg-border-default-secondary disabled:checked:border bg-background"
     {...rest}
     onchange={updateInput}
   />

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/ProfileAvatar.svelte

@@ -24,7 +24,7 @@
       {
         'bg-background after:shadow-avatar': !dark
       },
-      { 'border-border-inverse after:shadow-avatar-inverse': dark }
+      { 'bg-background-inverse after:shadow-avatar-inverse': dark }
     )
   )
 

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/ShortcutWrapper.svelte

@@ -8,7 +8,7 @@
     clsx('inline-flex items-center justify-center border', {
       'size-4 rounded': size === 'sm',
       'size-5 rounded-md': size === 'md',
-      'bg-background-default-secondary border-border-default-secondary shadow-[0px_1px_0px_#DFE0E6] text-foreground-default-secondary':
+      'bg-background-default-secondary border-border-default-secondary shadow-shortcut text-foreground-default-secondary':
         theme === 'light',
       'bg-background-inverse-secondary border-border-inverse-secondary shadow-[0px_1px_0px_rgba(255,255,255,0.20)] text-foreground-inverse-secondary':
         theme === 'navigation'

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-day.svelte

@@ -13,15 +13,15 @@
   bind:ref
   class={cn(
     buttonVariants({ variant: 'ghost' }),
-    'size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-medium leading-none rounded-lg',
+    'size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-medium leading-none rounded-lg text-foreground!',
     // today
     '[&[data-today]:not([data-selected]):not([data-outside-month])]:border-b [&[data-today]:not([data-selected]):not([data-outside-month])]:border-background-accent [&[data-today]:not([data-selected]):not([data-outside-month])]:rounded-none',
     // range Start
-    'data-[range-start]:bg-background-accent data-[range-start]:text-white data-[range-start]:font-semibold data-[range-start]:shadow-[0px_0px_0px_2px_rgba(22,153,88,0.12)]',
+    'data-[range-start]:bg-background-accent data-[range-start]:text-foreground-inverse! data-[range-start]:font-semibold data-[range-start]:shadow-[0px_0px_0px_2px_rgba(22,153,88,0.12)]',
     // range middle
     'data-[range-middle]:rounded-none data-[range-middle]:bg-background-default-secondary',
     // range End
-    'data-[range-end]:bg-background-accent data-[range-end]:text-white data-[range-end]:font-semibold data-[range-end]:shadow-[0px_0px_0px_2px_rgba(22,153,88,0.12)]',
+    'data-[range-end]:bg-background-accent data-[range-end]:text-foreground-inverse! data-[range-end]:font-semibold data-[range-end]:shadow-[0px_0px_0px_2px_rgba(22,153,88,0.12)]',
     // Outside months - must come after range styles to override
     '[&[data-outside-month]]:!text-transparent [&[data-outside-month]]:!bg-transparent [&[data-outside-month]]:!shadow-none [&[data-outside-month]:not([data-selected])]:pointer-events-none',
     // Disabled

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

@@ -11,7 +11,7 @@
 <RangeCalendarPrimitive.Header
   bind:ref
   class={cn(
-    'h-11 flex w-full items-center justify-center gap-1.5 text-base font-medium pt-2 pb-3',
+    'h-11 flex w-full items-center justify-center gap-1.5 text-base font-medium pt-2 pb-3 text-foreground',
     className
   )}
   {...restProps}

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

@@ -33,7 +33,7 @@
         {/each}
       </select>
       <span
-        class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5"
+        class="[&>svg]:text-foreground flex h-8 select-none items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5"
         aria-hidden="true"
       >
         {monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}

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/svg/IconEmpty.svelte

@@ -1,12 +1,7 @@
-<svg
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 352 120"
-  class="text-foreground-accent"
->
-  <g clip-path="url(#a99)">
+<svg width="352" height="120" viewBox="0 0 352 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_1410_923)">
     <mask
-      id="b98"
+      id="mask0_1410_923"
       style="mask-type:alpha"
       maskUnits="userSpaceOnUse"
       x="0"
@@ -15,31 +10,33 @@
       height="121"
     >
       <path
-        d="M0-1h353v121H0V-1Zm78 47a6 6 0 0 1 6-6h30a6 6 0 0 1 6 6v30a6 6 0 0 1-6 6H84a6 6 0 0 1-6-6V46Zm167-6a6 6 0 0 0-6 6v30a6 6 0 0 0 6 6h30a6 6 0 0 0 6-6V46a6 6 0 0 0-6-6h-30Z"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        fill="#D9D9D9"
+        d="M353 120H0V-1H353V120ZM84 40C80.6863 40 78 42.6863 78 46V76C78 79.3137 80.6863 82 84 82H114C117.314 82 120 79.3137 120 76V46C120 42.6863 117.314 40 114 40H84ZM245 40C241.686 40 239 42.6863 239 46V76C239 79.3137 241.686 82 245 82H275C278.314 82 281 79.3137 281 76V46C281 42.6863 278.314 40 275 40H245Z"
+        fill="black"
       />
     </mask>
-    <g mask="url(#b98)">
+    <g mask="url(#mask0_1410_923)">
       <path
-        d="M35.6 12.4H.4m35.2 0v-48.6m0 48.6 17.5 24.4M.4 61l-35.1-48.6H.4M.4 61v48.5M.3 61h70.2M.3 109.5h-35l35 48.6h35m-35-48.6h35m-35 0 35 48.6m70.4 0 17.5 24.5v-48.8m-17.5 24.3H70.5m35.2 0-17.5-24.3m17.5 24.3v-48.6m17.5 24.3 17.6 24.3H176l-35.2-48.6m-17.6 24.3-17.5-24.3m35.1 0H176m-35.2 0-35-48.5m35 48.5h-35.1m70.3 0 35 48.6h35.2M176 109.5h70.3m-70.3 0L140.8 61h-35"
-        stroke="url(#c97)"
-        stroke-width=".6"
+        d="M35.6124 12.398H0.445778M35.6124 12.398V-36.2311M35.6124 12.398L53.126 36.7825M0.445778 61.0272L-34.7209 12.398H0.445778M0.445778 61.0272L0.306227 109.517M0.445778 61.0272H70.6396M0.306227 109.517H-34.7209L0.306227 158.146H35.3333M0.306227 109.517H35.3333M0.306227 109.517L35.3333 158.146M105.667 158.146L123.25 182.6V133.831M105.667 158.146H70.5M105.667 158.146L88.1531 133.831M105.667 158.146V109.517M123.25 133.831L140.833 158.146H175.954L140.833 109.517M123.25 133.831L105.667 109.517M140.833 109.517H176M140.833 109.517L105.806 61.0272M140.833 109.517H105.667M176 109.517L211.027 158.146H246.194M176 109.517H246.333M176 109.517L140.833 61.0272H105.806M316.527 158.146L334.11 182.6V133.971M316.527 158.146L316.574 109.656M316.527 158.146H281.36M316.527 158.146L281.5 109.517M334.11 133.971L351.554 158.146H386.721L351.694 109.656M334.11 133.971L316.574 109.656M351.694 109.656H386.86L351.694 61.0272H316.667M351.694 109.656L316.667 61.0272M351.694 109.656H316.574M316.667 61.0272V-36.2311H351.833V12.398H281.5M316.667 61.0272H281.5M281.5 12.398V61.0272M281.5 12.398C281.5 -6.59284 281.5 -17.2403 281.5 -36.2311L263.917 -60.6156M281.5 12.398L246.333 -36.2311M281.5 61.0272L246.333 12.2583M281.5 61.0272H246.333M281.5 61.0272V109.517M281.5 61.0272L299.037 85.3417M211.167 61.0272L176 12.2583H211.167M211.167 61.0272H246.333M211.167 61.0272V109.517L246.194 158.146M246.333 12.2583V-36.2311M246.333 12.2583H211.167M246.333 -36.2311V-85L263.917 -60.6156M246.333 -36.2311H211.167V12.2583M263.917 -60.6156V36.6427M211.167 12.2583L246.333 61.0272M246.333 61.0272V109.517M316.574 109.656L299.037 85.3417M246.194 158.146H281.36M281.5 109.517H246.333M246.333 109.517L281.36 158.146M299.037 85.3417V133.831M0.445778 12.398V-36.2311H35.6124M0.445778 12.398L35.3333 61.0272V109.517M35.6124 -36.2311V-84.8603L53.126 -60.4758M35.6124 -36.2311L70.6396 12.5378M70.6396 12.5378V-36.0914L53.126 -60.4758M70.6396 12.5378H140.973V-36.0914H105.806V61.0272M70.6396 12.5378V61.0272M70.6396 61.0272L53.126 36.7825M70.6396 61.0272H105.806M70.6396 61.0272V109.517M70.6396 61.0272L88.1531 85.2719M53.126 -60.4758V36.7825M105.667 109.517L88.1531 85.2719M70.6396 109.517H35.3333M70.6396 109.517L88.1531 133.831M35.3333 109.517L70.5 158.146M35.3333 158.146H70.5M88.1531 85.2719V133.831"
+        stroke="url(#paint0_radial_1410_923)"
+        stroke-width="0.6"
       />
     </g>
-    <g filter="url(#d96)">
-      <rect x="144" y="28" width="64" height="64" rx="12" fill="white" />
-      <rect x="144" y="28" width="64" height="64" rx="12" />
+    <foreignObject x="124" y="8" width="104" height="106"
+      ><div
+        xmlns="http://www.w3.org/1999/xhtml"
+        style="backdrop-filter:blur(10px);clip-path:url(#bgblur_1_1410_923_clip_path);height:100%;width:100%"
+      ></div></foreignObject
+    ><g filter="url(#filter0_d_1410_923)" data-figma-bg-blur-radius="20">
+      <rect x="144" y="28" width="64" height="64" rx="12" fill="var(--color-background)" />
       <rect
         x="144.4"
         y="28.4"
         width="63.2"
         height="63.2"
         rx="11.6"
-        stroke="currentColor"
-        stroke-opacity=".6"
-        stroke-width="1"
+        class="stroke-border-selected-bold"
+        stroke-opacity="0.6"
+        stroke-width="0.8"
       />
       <rect
         x="148.3"
@@ -47,50 +44,53 @@
         width="55.4"
         height="55.4"
         rx="7.7"
-        stroke="currentColor"
-        stroke-opacity=".4"
-        stroke-width=".6"
+        class="stroke-border-selected-bold"
+        stroke-opacity="0.4"
+        stroke-width="0.6"
       />
     </g>
     <rect
-      x="238.3"
-      y="39.3"
-      width="43.3"
-      height="43.3"
-      rx="7.7"
-      stroke="#030712"
-      stroke-opacity=".1"
-      stroke-width=".7"
+      x="238.344"
+      y="39.3438"
+      width="43.3125"
+      height="43.3125"
+      rx="7.65625"
+      class="stroke-border-default-secondary"
+      stroke-width="0.6875"
       stroke-dasharray="2 3"
     />
     <rect
-      x="80"
-      y="42"
-      width="38.1"
-      height="38.1"
-      rx="5.3"
-      stroke="#030712"
-      stroke-opacity=".1"
-      stroke-width=".4"
+      x="79.9563"
+      y="41.9563"
+      width="38.0875"
+      height="38.0875"
+      rx="5.29375"
+      class="stroke-border-default-secondary"
+      stroke-width="0.4125"
+    />
+    <rect
+      x="240.956"
+      y="41.9563"
+      width="38.0875"
+      height="38.0875"
+      rx="5.29375"
+      class="stroke-border-default-secondary"
+      stroke-width="0.4125"
+    />
+    <rect
+      x="77.3438"
+      y="39.3438"
+      width="43.3125"
+      height="43.3125"
+      rx="7.65625"
+      class="stroke-border-default-secondary"
+      stroke-width="0.6875"
+      stroke-dasharray="2 3"
     />
   </g>
   <defs>
-    <radialGradient
-      id="c97"
-      cx="0"
-      cy="0"
-      r="1"
-      gradientUnits="userSpaceOnUse"
-      gradientTransform="matrix(.06967 120.59998 -345.06394 .19934 176 62)"
-    >
-      <stop stop-color="#D1D5DB" stop-opacity=".6" />
-      <stop offset=".5" stop-color="#D1D5DB" stop-opacity="0" />
-    </radialGradient>
-    <clipPath id="a99">
-      <path fill="#fff" d="M0 0h352v120H0z" />
-    </clipPath>
     <filter
-      id="d96"
+      id="filter0_d_1410_923"
       x="124"
       y="8"
       width="104"
@@ -101,15 +101,35 @@
       <feFlood flood-opacity="0" result="BackgroundImageFix" />
       <feColorMatrix
         in="SourceAlpha"
+        type="matrix"
         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
         result="hardAlpha"
       />
       <feOffset dy="2" />
       <feGaussianBlur stdDeviation="10" />
       <feComposite in2="hardAlpha" operator="out" />
-      <feColorMatrix values="0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0.04 0" />
-      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_280_210" />
-      <feBlend in="SourceGraphic" in2="effect1_dropShadow_280_210" result="shape" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0.04 0"
+      />
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1410_923" />
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1410_923" result="shape" />
     </filter>
+    <clipPath id="bgblur_1_1410_923_clip_path" transform="translate(-124 -8)"
+      ><rect x="144" y="28" width="64" height="64" rx="12" />
+    </clipPath><radialGradient
+      id="paint0_radial_1410_923"
+      cx="0"
+      cy="0"
+      r="1"
+      gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(176 62) rotate(89.9669) scale(120.6 345.064)"
+    >
+      <stop stop-opacity="0.1" />
+      <stop stop-color="var(--color-border-default-secondary)" offset="0.537503" stop-opacity="0" />
+    </radialGradient>
+    <clipPath id="clip0_1410_923">
+      <rect width="352" height="120" fill="var(--color-background)" />
+    </clipPath>
   </defs>
 </svg>

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/tailwind.theme.css

@@ -673,6 +673,7 @@
   --color-icon-inverse-bold: var(--color-neutral-white-alpha-100);
 
   --color-icon-selected-default: var(--color-positive-50);
+  --color-icon-accent-default: var(--color-accent-50);
 
   --color-icon-success-default: var(--color-positive-50);
 
@@ -758,7 +759,7 @@
   --color-icon: var(--color-icon-default-default);
   
   --color-icon-inverse: var(--color-icon-inverse-default);
-  
+  --color-icon-accent: var(--color-icon-accent-default);
   --color-icon-selected: var(--color-icon-selected-default);
   --color-icon-success: var(--color-icon-success-default);
   --color-icon-info: var(--color-icon-info-default);
@@ -780,13 +781,14 @@
   --shadow-lg:  0 8px 30px 0 rgba(10, 10, 10, 0.12);
   --shadow-xl:  0 8px 28px -6px rgba(10, 10, 10, 0.12), 0 18px 88px -4px rgba(10, 10, 10, 0.14);
   --shadow-active: 0px 0px 0px 2px color-mix(in lab, transparent 88%, var(--color-background-accent-default, var(--color-positive-50)));
-  --shadow-warning: 0px 0px 0px 2px rgba(215, 135, 0, 0.12);
   --shadow-button-default: 0 2px 6px -1px rgba(11, 11, 16, 0.04), 0 -2px 4px 0 rgba(11, 11, 16, 0.04) inset;
   --shadow-button-primary: 0 -4px 4px 0 rgba(11, 11, 16, 0.12) inset, 0 1px 1.5px 0 rgba(255, 255, 255, 0.16) inset, 0 2px 4px -1px rgba(11, 11, 16, 0.08);
   --shadow-button-pressed: 0 2px 6px 0 rgba(11, 11, 16, 0.16) inset, 0 -2px 5px -2px rgba(255, 255, 255, 0.25) inset;
   --shadow-button-dark-pressed: 0 4px 4px -1px rgba(11, 11, 16, 0.16) inset;
-  --shadow-avatar: 0 0 0 1px rgba(5, 5, 36, 0.06) inset;
-  --shadow-avatar-inverse: 0 0 0 1px rgba(255, 255, 255, 0.10) inset;
+  --shadow-avatar: 0 0 0 1px var(--color-border-default-default) inset;
+  --shadow-avatar-inverse: 0 0 0 1px var(--color-border-inverse-default) inset;
+  --shadow-shortcut: 0 1px 0 0 var(--color-border-default-secondary);
+  --shadow-shortcut-inverse: 0 1px 0 0 var(--color-border-inverse-secondary);
 
   /* Letter Spacing (tracking) */
   --tracking-tightest: -0.29px; /* -1.2% (text-2xl) */
@@ -829,7 +831,7 @@
     --color-foreground-default-tertiary: var(--color-neutral-white-alpha-40);
 
     --color-foreground-inverse-default: var(--color-white);
-    --color-foreground-inverse-secondary: var(--color-neutral-alpha-70);
+    --color-foreground-inverse-secondary: var(--color-neutral-white-alpha-70);
 
     --color-foreground-accent-default: var(--color-accent-60);
     --color-foreground-accent-default-hover: var(--color-accent-70);
@@ -877,9 +879,9 @@
     --color-background-selected-default: var(--color-accent-alpha-20);
     --color-background-selected-default-hover: var(--color-accent-alpha-30);
     --color-background-selected-default-press: var(--color-accent-alpha-40);
-    --color-background-selected-inverse: var(--color-neutral-alpha-10);
-    --color-background-selected-inverse-hover: var(--color-neutral-alpha-20);
-    --color-background-selected-inverse-press: var(--color-neutral-alpha-30);
+    --color-background-selected-inverse: var(--color-white-10);
+    --color-background-selected-inverse-hover: var(--color-nwhite-20);
+    --color-background-selected-inverse-press: var(--color-white-30);
 
     --color-background-accent-default: var(--color-accent-60);
     --color-background-accent-default-hover: var(--color-accent-70);
@@ -949,7 +951,7 @@
     --color-icon-inverse-bold: var(--color-neutral-white-alpha-100);
 
     --color-icon-selected-default: var(--color-positive-50);
-
+    --color-icon-accent-default: var(--color-white);
     --color-icon-success-default: var(--color-positive-50);
 
     --color-icon-info-default: var(--color-info-50);

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.21",
   "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;