@invopop/popui 0.1.14 → 0.1.16

package/dist/index.d.ts

@@ -13,15 +13,13 @@ import ButtonUuidCopy from './ButtonUuidCopy.svelte';
 import CardCheckbox from './CardCheckbox.svelte';
 import CardRelation from './CardRelation.svelte';
 import CompanySelector from './CompanySelector.svelte';
-import CounterWorkflow from './CounterWorkflow.svelte';
 import DataListItem from './DataListItem.svelte';
 import DatePicker from './DatePicker.svelte';
 import DrawerContext from './DrawerContext.svelte';
 import DrawerContextItem from './DrawerContextItem.svelte';
 import DrawerContextSeparator from './DrawerContextSeparator.svelte';
 import DropdownSelect from './DropdownSelect.svelte';
-import EmptyStateIcon from './EmptyStateIcon.svelte';
-import EmptyStateIllustration from './EmptyStateIllustration.svelte';
+import EmptyState from './EmptyState.svelte';
 import FeedEvents from './FeedEvents.svelte';
 import FeedIconEvent from './FeedIconEvent.svelte';
 import FeedIconStatus from './FeedIconStatus.svelte';
@@ -42,9 +40,7 @@ import MenuItem from './MenuItem.svelte';
 import MenuItemCollapsible from './MenuItemCollapsible.svelte';
 import Notification from './Notification.svelte';
 import ProfileAvatar from './ProfileAvatar.svelte';
-import ProfileSelector from './ProfileSelector.svelte';
 import ProgressBar from './ProgressBar.svelte';
-import SectionLayout from './SectionLayout.svelte';
 import SeparatorHorizontal from './SeparatorHorizontal.svelte';
 import ShortcutWrapper from './ShortcutWrapper.svelte';
 import StatusLabel from './StatusLabel.svelte';
@@ -71,8 +67,7 @@ import { Tooltip } from './tooltip';
 import { TooltipContent } from './tooltip';
 import { TooltipTrigger } from './tooltip';
 import UuidCopy from './UuidCopy.svelte';
-import twTheme from './tw.theme.js';
-import { resolveIcon } from './helpers.js';
-import { getCountryName } from './helpers.js';
-import { getStatusType } from './helpers.js';
-export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, BaseTableActions, BaseTableHeaderContent, Breadcrumbs, ButtonFile, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, CounterWorkflow, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, EmptyStateIcon, EmptyStateIllustration, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProfileSelector, ProgressBar, SectionLayout, SeparatorHorizontal, ShortcutWrapper, StatusLabel, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagSearch, TagStatus, TitleMain, TitleSection, Toaster, Tooltip, TooltipContent, TooltipTrigger, UuidCopy, twTheme, resolveIcon, getCountryName, getStatusType };
+import { resolveIcon } from './helpers.ts';
+import { getCountryName } from './helpers.ts';
+import { getStatusType } from './helpers.ts';
+export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, BaseTableActions, BaseTableHeaderContent, Breadcrumbs, ButtonFile, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, EmptyState, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProgressBar, SeparatorHorizontal, ShortcutWrapper, StatusLabel, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagSearch, TagStatus, TitleMain, TitleSection, Toaster, Tooltip, TooltipContent, TooltipTrigger, UuidCopy, resolveIcon, getCountryName, getStatusType };

package/dist/index.js

@@ -13,15 +13,13 @@ import ButtonUuidCopy from './ButtonUuidCopy.svelte'
 import CardCheckbox from './CardCheckbox.svelte'
 import CardRelation from './CardRelation.svelte'
 import CompanySelector from './CompanySelector.svelte'
-import CounterWorkflow from './CounterWorkflow.svelte'
 import DataListItem from './DataListItem.svelte'
 import DatePicker from './DatePicker.svelte'
 import DrawerContext from './DrawerContext.svelte'
 import DrawerContextItem from './DrawerContextItem.svelte'
 import DrawerContextSeparator from './DrawerContextSeparator.svelte'
 import DropdownSelect from './DropdownSelect.svelte'
-import EmptyStateIcon from './EmptyStateIcon.svelte'
-import EmptyStateIllustration from './EmptyStateIllustration.svelte'
+import EmptyState from './EmptyState.svelte'
 import FeedEvents from './FeedEvents.svelte'
 import FeedIconEvent from './FeedIconEvent.svelte'
 import FeedIconStatus from './FeedIconStatus.svelte'
@@ -42,9 +40,7 @@ import MenuItem from './MenuItem.svelte'
 import MenuItemCollapsible from './MenuItemCollapsible.svelte'
 import Notification from './Notification.svelte'
 import ProfileAvatar from './ProfileAvatar.svelte'
-import ProfileSelector from './ProfileSelector.svelte'
 import ProgressBar from './ProgressBar.svelte'
-import SectionLayout from './SectionLayout.svelte'
 import SeparatorHorizontal from './SeparatorHorizontal.svelte'
 import ShortcutWrapper from './ShortcutWrapper.svelte'
 import StatusLabel from './StatusLabel.svelte'
@@ -68,8 +64,7 @@ import TitleSection from './TitleSection.svelte'
 import { Toaster } from './sonner'
 import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip'
 import UuidCopy from './UuidCopy.svelte'
-import twTheme from './tw.theme.js'
-import { resolveIcon, getCountryName, getStatusType } from './helpers.js'
+import { resolveIcon, getCountryName, getStatusType } from './helpers.ts'
 
 export {
   AlertDialog,
@@ -87,15 +82,13 @@ export {
   CardCheckbox,
   CardRelation,
   CompanySelector,
-  CounterWorkflow,
   DataListItem,
   DatePicker,
   DrawerContext,
   DrawerContextItem,
   DrawerContextSeparator,
   DropdownSelect,
-  EmptyStateIcon,
-  EmptyStateIllustration,
+  EmptyState,
   FeedEvents,
   FeedIconEvent,
   FeedIconStatus,
@@ -116,9 +109,7 @@ export {
   MenuItemCollapsible,
   Notification,
   ProfileAvatar,
-  ProfileSelector,
   ProgressBar,
-  SectionLayout,
   SeparatorHorizontal,
   ShortcutWrapper,
   StatusLabel,
@@ -145,7 +136,6 @@ export {
   TooltipContent,
   TooltipTrigger,
   UuidCopy,
-  twTheme,
   resolveIcon,
   getCountryName,
   getStatusType

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

@@ -11,7 +11,7 @@
 <RangeCalendarPrimitive.Cell
   bind:ref
   class={cn(
-    'size-(--cell-size) [&:has([data-range-middle])]:bg-accent [&:has([data-selected])]:bg-accent relative p-0 text-center text-sm focus-within:z-20 data-[range-middle]:rounded-r-md [&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:has([data-range-end])]:rounded-r-md [&:has([data-range-middle])]:rounded-none first:[&:has([data-range-middle])]:rounded-l-md last:[&:has([data-range-middle])]:rounded-r-md [&:has([data-range-start])]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md',
+    'size-(--cell-size) [&:has([data-range-middle]:not([data-outside-month]))]:bg-background-default-secondary [&:has([data-selected]:not([data-outside-month]))]:bg-background-default-secondary relative p-0 text-center text-sm focus-within:z-20 data-[range-middle]:rounded-r-md [&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:has([data-range-end])]:rounded-r-md [&:has([data-range-middle])]:rounded-none first:[&:has([data-range-middle])]:rounded-l-md last:[&:has([data-range-middle])]:rounded-r-md [&:has([data-range-start])]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md',
     className
   )}
   {...restProps}

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

@@ -13,23 +13,25 @@
   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-normal leading-none',
+    'size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-medium leading-none rounded-lg',
     // today
-    '[&[data-today]:not([data-selected]):not([data-outside-month])]:border-b [&[data-today]:not([data-selected]):not([data-outside-month])]:border-workspace-accent [&[data-today]:not([data-selected]):not([data-outside-month])]:rounded-none',
+    '[&[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-workspace-accent data-[range-start]:text-white data-[range-start]:font-semibold data-[range-start]:shadow-active',
+    '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)]',
     // range middle
-    'data-[range-middle]:rounded-none data-[range-middle]:bg-neutral-100',
+    'data-[range-middle]:rounded-none data-[range-middle]:bg-background-default-secondary',
     // range End
-    'data-[range-end]:bg-workspace-accent data-[range-end]:text-white data-[range-end]:font-semibold data-[range-end]:shadow-active',
-    // Outside months
-    '[&[data-outside-month]]:text-transparent [&[data-outside-month]]:bg-transparent [&[data-outside-month]]:shadow-none [&[data-outside-month]:not([data-selected])]:pointer-events-none',
+    '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)]',
+    // 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
-    'data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    'data-[disabled]:text-foreground-default-tertiary data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
     // Unavailable
     'data-[unavailable]:line-through',
     // focus
     'focus:border-ring focus:ring-ring/50 focus:relative',
+    // Default text color
+    'text-foreground-default-primary',
     // inner spans
     '[&>span]:text-xs [&>span]:opacity-70',
     className

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

@@ -11,7 +11,7 @@
 <RangeCalendarPrimitive.HeadCell
   bind:ref
   class={cn(
-    'text-[#989AA4] w-(--cell-size) h-(--cell-size) text-sm font-normal border-b border-neutral-100 flex items-center justify-center',
+    'text-foreground-default-tertiary w-(--cell-size) h-(--cell-size) text-xs font-normal border-b border-border flex items-center justify-center',
     className
   )}
   {...restProps}

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

@@ -16,13 +16,13 @@
 </script>
 
 {#snippet Fallback()}
-  <Icon src={ChevronRight} class="size-4" />
+  <Icon src={ChevronRight} class="size-4 shrink-0" />
 {/snippet}
 <RangeCalendarPrimitive.NextButton
   bind:ref
   class={cn(
-    buttonVariants({ variant, size: 'icon-sm' }),
-    'select-none disabled:opacity-50 rtl:rotate-180',
+    buttonVariants({ variant, size: 'sm' }),
+    'size-6 group select-none disabled:opacity-50 rtl:rotate-180',
     className
   )}
   children={children || Fallback}

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

@@ -16,13 +16,13 @@
 </script>
 
 {#snippet Fallback()}
-  <Icon src={ChevronLeft} class="size-4" />
+  <Icon src={ChevronLeft} class="size-4 shrink-0" />
 {/snippet}
 <RangeCalendarPrimitive.PrevButton
   bind:ref
   class={cn(
-    buttonVariants({ variant, size: 'icon-sm' }),
-    'select-none disabled:opacity-50 rtl:rotate-180',
+    buttonVariants({ variant, size: 'sm' }),
+    'size-6 group select-none disabled:opacity-50 rtl:rotate-180',
     className
   )}
   children={children || Fallback}

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

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

package/dist/sonner/sonner.svelte

@@ -14,28 +14,26 @@
     unstyled: true,
     classes: {
       toast:
-        'group toast bg-neutral-800 border-0 rounded-lg text-white flex gap-2 items-start py-2 px-3 w-[336px]',
-      title: 'font-medium text-sm leading-5 tracking-tight text-white',
-      description: 'font-normal text-sm leading-5 tracking-tight text-white/70',
+        'group toast bg-background-default-negative border-0 rounded-lg text-foreground-inverse flex gap-2 items-start pl-3 pr-2 py-2 w-[336px] [&>[data-content]]:flex-1',
+      title: 'font-medium text-base text-foreground-inverse',
+      description: 'font-normal text-base text-foreground-inverse-secondary',
       actionButton:
-        'bg-white/10 rounded px-2 py-1 text-xs font-medium text-white leading-4 hover:bg-white/15 transition-colors',
-      cancelButton:
-        'bg-white/10 rounded px-2 py-1 text-xs font-medium text-white leading-4 hover:bg-white/15 transition-colors',
+        'bg-background-selected-inverse rounded px-2 py-1 text-xs font-medium text-foreground-inverse hover:bg-background-selected-inverse-hover transition-colors',
       closeButton: 'hidden'
     }
   }}
   {...restProps}
 >
   {#snippet successIcon()}
-    <Icon src={Success} class="w-4 h-4 text-positive-500" />
+    <Icon src={Success} class="size-4 mt-0.5" />
   {/snippet}
 
   {#snippet errorIcon()}
-    <Icon src={Failure} class="w-4 h-4 text-danger-500" />
+    <Icon src={Failure} class="size-4 mt-0.5" />
   {/snippet}
 
   {#snippet infoIcon()}
-    <Icon src={Info} class="w-4 h-4 text-white" />
+    <Icon src={Info} class="size-4 mt-0.5 text-icon-inverse" />
   {/snippet}
 </Sonner>
 

package/dist/svg/CheckBadge.svelte

@@ -0,0 +1,18 @@
+<svg
+  width="26"
+  height="26"
+  viewBox="0 0 26 26"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class="absolute top-[-16px] right-[-16px]"
+>
+  <path
+    d="M13 1C6.3835 1 1 6.3835 1 13C1 19.6165 6.3835 25 13 25C19.6165 25 25 19.6165 25 13C25 6.3835 19.6165 1 13 1Z"
+    fill="#169958"
+  />
+  <circle cx="13" cy="13" r="10" stroke="white" stroke-opacity="0.4" stroke-width="0.6" />
+  <path
+    d="M18.1078 9.82205C15.7021 11.6837 13.6627 14.2538 12.0477 17.4584C11.8808 17.7912 11.5495 17.9999 11.1884 17.9999C10.83 18.004 10.4922 17.7885 10.3253 17.4517C9.58119 15.9471 8.7491 14.7239 7.78243 13.7123C7.40457 13.3176 7.40586 12.6764 7.78632 12.2831C8.16418 11.8898 8.78016 11.8898 9.15932 12.2871C9.90083 13.063 10.5699 13.9413 11.182 14.9435C12.7853 12.1888 14.7199 9.92443 16.9509 8.19887C17.3805 7.8675 17.9888 7.9591 18.3084 8.40766C18.628 8.85488 18.5387 9.48934 18.1078 9.82205Z"
+    fill="white"
+  />
+</svg>

package/dist/svg/CheckBadge.svelte.d.ts

@@ -0,0 +1,26 @@
+export default CheckBadge;
+type CheckBadge = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const CheckBadge: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/svg/IconEmpty.svelte

@@ -1,143 +1,115 @@
-<svg 
-  fill="none" 
-  xmlns="http://www.w3.org/2000/svg" 
+<svg
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 352 120"
+  class="text-foreground-accent"
 >
   <g clip-path="url(#a99)">
-    <mask 
-      id="b98" 
-      style="mask-type:alpha" 
-      maskUnits="userSpaceOnUse" 
-      x="0" 
-      y="-1" 
-      width="353" 
+    <mask
+      id="b98"
+      style="mask-type:alpha"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="-1"
+      width="353"
       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" 
+      <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"
       />
     </mask>
     <g mask="url(#b98)">
-      <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)" 
+      <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"
       />
     </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"
-      />
-      <rect 
-        x="144.4" 
-        y="28.4" 
-        width="63.2" 
-        height="63.2" 
-        rx="11.6" 
-        stroke="var(--workspace-accent-color, #169958)" 
-        stroke-opacity=".6" 
+      <rect x="144" y="28" width="64" height="64" rx="12" fill="white" />
+      <rect x="144" y="28" width="64" height="64" rx="12" />
+      <rect
+        x="144.4"
+        y="28.4"
+        width="63.2"
+        height="63.2"
+        rx="11.6"
+        stroke="currentColor"
+        stroke-opacity=".6"
         stroke-width="1"
       />
-      <rect 
-        x="148.3" 
-        y="32.3" 
-        width="55.4" 
-        height="55.4" 
-        rx="7.7" 
-        stroke="var(--workspace-accent-color, #169958)" 
-        stroke-opacity=".4" 
+      <rect
+        x="148.3"
+        y="32.3"
+        width="55.4"
+        height="55.4"
+        rx="7.7"
+        stroke="currentColor"
+        stroke-opacity=".4"
         stroke-width=".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" 
+    <rect
+      x="238.3"
+      y="39.3"
+      width="43.3"
+      height="43.3"
+      rx="7.7"
+      stroke="#030712"
+      stroke-opacity=".1"
+      stroke-width=".7"
       stroke-dasharray="2 3"
     />
-    <rect 
-      x="80" 
-      y="42" 
-      width="38.1" 
-      height="38.1" 
-      rx="5.3" 
-      stroke="#030712" 
-      stroke-opacity=".1" 
+    <rect
+      x="80"
+      y="42"
+      width="38.1"
+      height="38.1"
+      rx="5.3"
+      stroke="#030712"
+      stroke-opacity=".1"
       stroke-width=".4"
     />
   </g>
   <defs>
-    <radialGradient 
-      id="c97" 
-      cx="0" 
-      cy="0" 
-      r="1" 
-      gradientUnits="userSpaceOnUse" 
+    <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"
-      />
+      <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"
-      />
+      <path fill="#fff" d="M0 0h352v120H0z" />
     </clipPath>
-    <filter 
-      id="d96" 
-      x="124" 
-      y="8" 
-      width="104" 
-      height="106" 
-      filterUnits="userSpaceOnUse" 
+    <filter
+      id="d96"
+      x="124"
+      y="8"
+      width="104"
+      height="106"
+      filterUnits="userSpaceOnUse"
       color-interpolation-filters="sRGB"
     >
-      <feFlood 
-        flood-opacity="0" 
-        result="BackgroundImageFix"
-      />
-      <feColorMatrix 
-        in="SourceAlpha" 
-        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" 
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        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"/>
+      <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" />
     </filter>
   </defs>
 </svg>

package/dist/table/table-body.svelte

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

package/dist/table/table-cell.svelte

@@ -15,7 +15,7 @@
   bind:this={ref}
   data-slot="table-cell"
   class={cn(
-    'py-3 pl-3 pr-3 align-middle text-neutral-500 font-normal text-base [&:has([role=checkbox])]:pr-2 [&:has([role=menu])]:pl-1 relative z-1',
+    'py-3 pl-3 pr-3 align-middle text-foreground font-normal text-base [&:has([role=menu])]:pl-1 relative z-1',
     className
   )}
   onclick={bubble('click')}

package/dist/table/table-footer.svelte

@@ -11,7 +11,7 @@
 <tfoot
   bind:this={ref}
   data-slot="table-footer"
-  class={cn('bg-muted/50 text-primary-foreground font-medium', className)}
+  class={cn('bg-muted/50 text-foreground font-medium', className)}
 >
   {@render children?.()}
 </tfoot>

package/dist/table/table-head.svelte

@@ -12,7 +12,7 @@
   bind:this={ref}
   data-slot="table-head"
   class={cn(
-    'text-neutral-600 text-base font-normal p-3 text-left align-middle [&:has([role=checkbox])]:pr-0',
+    'text-foreground-default-secondary text-base font-normal text-left align-middle [&:has([role=checkbox])]:pr-0 px-3',
     className
   )}
 >

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-neutral-100 bg-white', className)}
+  class={cn('[&_tr]:border-b [&_tr]:border-border bg-white', 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-50 data-[state=checked]:bg-workspace-accent-50 transition-colors',
+    'data-[state=selected]:bg-neutral-5 data-[state=checked]:bg-workspace-accent-50 transition-colors border-b border-border h-10',
     className
   )}
   {oncontextmenu}

package/dist/tabs/tabs-list.svelte

@@ -1,14 +1,20 @@
 <script lang="ts">
   import { Tabs as TabsPrimitive } from 'bits-ui'
   import { cn } from '../utils.js'
-  let { ref = $bindable(null), class: className, children }: TabsPrimitive.ListProps = $props()
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    variant
+  }: TabsPrimitive.ListProps & { variant?: 'md' | 'lg' } = $props()
 </script>
 
 <TabsPrimitive.List
   bind:ref
   data-slot="tabs-list"
   class={cn(
-    'bg-neutral-100 border border-neutral-200 text-base text-neutral-800 inline-flex h-7 items-center justify-center rounded-md p-0.5 w-full',
+    'bg-background-default-tertiary text-base text-foreground inline-flex items-center justify-center p-0.5 w-full',
+    variant === 'lg' ? 'rounded-lg h-8' : 'rounded-md h-7',
     className
   )}
 >

package/dist/tabs/tabs-list.svelte.d.ts

@@ -1,4 +1,7 @@
 import { Tabs as TabsPrimitive } from 'bits-ui';
-declare const TabsList: import("svelte").Component<TabsPrimitive.ListProps, {}, "ref">;
+type $$ComponentProps = TabsPrimitive.ListProps & {
+    variant?: 'md' | 'lg';
+};
+declare const TabsList: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type TabsList = ReturnType<typeof TabsList>;
 export default TabsList;

package/dist/tabs/tabs-trigger.svelte

@@ -5,8 +5,9 @@
     ref = $bindable(null),
     class: className,
     children,
-    value
-  }: TabsPrimitive.TriggerProps = $props()
+    value,
+    variant
+  }: TabsPrimitive.TriggerProps & { variant?: 'md' | 'lg' } = $props()
 </script>
 
 <TabsPrimitive.Trigger
@@ -14,7 +15,8 @@
   {value}
   data-slot="tabs-trigger"
   class={cn(
-    'data-[state=active]:bg-white inline-flex items-center justify-center whitespace-nowrap rounded 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',
+    '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',
+    variant === 'lg' ? 'rounded-md' : 'rounded',
     className
   )}
 >