@invopop/popui 0.1.8 → 0.1.10

package/dist/BaseButton.svelte

@@ -41,8 +41,8 @@
       { 'px-2': !big && children && !icon },
       { 'pl-2 pr-2.5': big && children && icon && iconPosition === 'left' },
       { 'pl-2.5 pr-2': big && children && icon && iconPosition === 'right' },
-      { 'pl-1.5 pr-2': !small && !big && children && icon && iconPosition === 'left' },
-      { 'pl-2 pr-1.5': !small && !big && children && icon && iconPosition === 'right' },
+      { 'pl-1.5 pr-2': !big && children && icon && iconPosition === 'left' },
+      { 'pl-2 pr-1.5': !big && children && icon && iconPosition === 'right' },
       { 'py-1.5': big && children },
       { 'py-1': !big && children },
       { 'text-white': ['primary', 'danger', 'dark', 'warning'].includes(variant) },

package/dist/BaseTable.svelte

@@ -127,7 +127,10 @@
       return
     }
 
-    selectionMode = 'keyboard'
+    // Only set keyboard mode if it's not just the Shift key alone
+    if (event.key !== 'Shift') {
+      selectionMode = 'keyboard'
+    }
 
     if (event.key === 'Escape' || event.key === 'Esc') {
       event.preventDefault()

package/dist/BaseTableCellContent.svelte

@@ -4,13 +4,12 @@
   import FeedIconStatus from './FeedIconStatus.svelte'
   import BaseFlag from './BaseFlag.svelte'
   import { getCountryName } from './helpers.js'
-  import UuidCopy from './UuidCopy.svelte'
   import { Icon } from '@steeze-ui/svelte-icon'
+  import ButtonUuidCopy from './ButtonUuidCopy.svelte'
 
   let {
     field,
     data = '',
-    isMobile = false,
     badge = null,
     status = null,
     icons = null,
@@ -29,16 +28,7 @@
         <span>{getCountryName(String(data))}</span>
       </span>
     {:else if field.copy && data}
-      <UuidCopy
-        rightAlign={isMobile ? false : field.rightAlign}
-        uuid={String(data)}
-        prefixLength={4}
-        suffixLength={4}
-        full
-        compact
-        dark={isMobile}
-        {onCopied}
-      />
+      <ButtonUuidCopy uuid={String(data)} full oncopied={onCopied} />
     {:else}
       <span class="hidden md:inline">{data}</span>
       <span class="md:hidden">{data ? data : badge || status ? '' : '-'}</span>
@@ -54,7 +44,7 @@
       </span>
     {/if}
     {#if icons}
-      <span class:ml-2={!!data} class="flex items-center gap-1 flex-shrink-0">
+      <span class:ml-2={!!data} class="flex items-center gap-1 shrink-0">
         {#each icons as icon}
           <div class="border border-neutral-200 rounded-md p-px">
             {#if typeof icon === 'string'}

package/dist/DrawerContext.svelte

@@ -1,16 +1,15 @@
 <script lang="ts">
   import type { DrawerContextProps, DrawerOption } from './types.ts'
   import DrawerContextItem from './DrawerContextItem.svelte'
-  import InputSearch from './InputSearch.svelte'
   import DrawerContextSeparator from './DrawerContextSeparator.svelte'
 
   let {
     items = $bindable([]),
     multiple = false,
-    searchable = false,
     widthClass = 'w-60',
     onclick,
-    onselect
+    onselect,
+    children
   }: DrawerContextProps = $props()
 
   let selectedItems = $derived(items.filter((i) => i.selected))
@@ -27,13 +26,9 @@
 </script>
 
 <div
-  class="{widthClass} border border-neutral-200 py-1 rounded-md shadow-lg space-y-0.5 bg-white max-h-80 overflow-y-auto"
+  class="{widthClass} border border-neutral-200 py-0.5 rounded-2xl shadow-lg space-y-0.5 bg-white max-h-80 overflow-y-auto"
 >
-  {#if searchable}
-    <div class="px-2 mt-2 mb-1">
-      <InputSearch placeholder="Search" />
-    </div>
-  {/if}
+  {@render children?.()}
   <ul class="space-y-0.5 max-h-80 overflow-y-auto">
     {#each items as item}
       {#if item.separator}

package/dist/DrawerContextItem.svelte

@@ -90,9 +90,9 @@
       {#if item.country}
         <span class="flex space-x-1 items-center">
           <BaseFlag country={item.country} width={10} />
-          <span class="text-sm text-neutral-500 tracking-normal"
-            >{getCountryName(item.country)}</span
-          >
+          <span class="text-sm text-neutral-500 tracking-normal">
+            {getCountryName(item.country)}
+          </span>
         </span>
       {/if}
     </div>

package/dist/EmptyStateIllustration.svelte

@@ -8,6 +8,9 @@
   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,
@@ -22,7 +25,11 @@
     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

package/dist/FeedIconStatus.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Icon } from '@steeze-ui/svelte-icon'
   import type { FeddIconStatusProps, FeedItemStatus } from './types.ts'
-  import { Alert, Failure, Queue, Running, Success, CheckBadge, Skip } from '@invopop/ui-icons'
+  import { Warning, Failure, Queue, Running, Success, CheckBadge, Skip } from '@invopop/ui-icons'
   import type { IconSource } from '@steeze-ui/heroicons'
 
   let { status }: FeddIconStatusProps = $props()
@@ -12,7 +12,7 @@
       success: Success,
       run: Running,
       queued: Queue,
-      alert: Alert,
+      alert: Warning,
       skip: Skip,
       signed: CheckBadge
     }
@@ -24,8 +24,8 @@
 
 {#if iconStatus}
   <div title={status}>
-    <Icon src={iconStatus} class="h-4 w-4 flex-shrink-0" />
+    <Icon src={iconStatus} class="h-4 w-4 shrink-0" />
   </div>
 {:else}
-  <div class="w-4 h-4 flex-shrink-0 bg-neutral-200 rounded-full"></div>
+  <div class="w-4 h-4 shrink-0 bg-neutral-200 rounded-full"></div>
 {/if}

package/dist/FeedItemDetail.svelte

@@ -23,7 +23,7 @@
     {#if status}
       <FeedIconStatus {status} />
     {/if}
-    <span class="truncate font-medium text-neutral-800 text-base">{title}</span>
+    <span class="flex-1 truncate font-medium text-neutral-800 text-base">{title}</span>
   </div>
   <SeparatorHorizontal />
   <div class="pl-3 py-1 pr-2.5 flex items-center space-x-0.5">

package/dist/InputSearch.svelte

@@ -66,7 +66,7 @@
     bind:this={input}
     bind:value
     type="search"
-    class="py-[5px] pl-7 border border-neutral-200 hover:border-neutral-300 w-full rounded-md text-neutral-800 placeholder-neutral-500 text-base outline-none tracking-tight caret-workspace-accent focus:border-workspace-accent focus:shadow-active"
+    class="py-[5px] pl-7 border border-neutral-200 hover:border-neutral-300 w-full rounded-md text-neutral-800 placeholder-neutral-500 text-base outline-none tracking-tight caret-workspace-accent focus:border-workspace-accent focus:shadow-active bg-white"
     style:padding-right={`${shortcutKeys.length * 15 + 12}px`}
     {placeholder}
     {...rest}

package/dist/InputText.svelte

@@ -67,7 +67,7 @@
   bind:this={inputEl}
   bind:value
   type="text"
-  class="{inputStyles} py-1.5 px-2.5 border w-full rounded-md placeholder:text-neutral-500 text-base tracking-tight"
+  class="{inputStyles} py-1.5 px-2.5 border w-full rounded-md placeholder:text-neutral-500 text-base tracking-tight bg-white"
   {placeholder}
   readonly={disabled}
   {...rest}

package/dist/InputTextarea.svelte

@@ -40,7 +40,7 @@
   {id}
   {placeholder}
   {value}
-  class="{inputStyles} py-1.5 px-3 border w-full rounded placeholder-neutral-500 text-base tracking-tight"
+  class="{inputStyles} py-1.5 px-3 border w-full rounded placeholder-neutral-500 text-base tracking-tight bg-white"
   {disabled}
   {rows}
   {...rest}

package/dist/MenuItemCollapsible.svelte

@@ -32,7 +32,7 @@
     {@render children?.()}
     {#if !collapsed}
       <div>
-        <div class="whitespace-nowrap max-w-[140px] truncate tracking-tight">{title}</div>
+        <div class="whitespace-nowrap max-w-[118px] truncate tracking-tight">{title}</div>
         {#if subtitle}
           <div class="text-sm font-medium text-yellow-600">{subtitle}</div>
         {/if}

package/dist/Notification.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import clsx from 'clsx'
-  import { Alert, Failure, Success } from '@invopop/ui-icons'
+  import { Warning, Failure, Success } from '@invopop/ui-icons'
   import { Icon } from '@steeze-ui/svelte-icon'
   import type { NotificationProps, Status } from './types'
 
@@ -13,7 +13,7 @@
       case 'error':
         return Failure
       case 'warning':
-        return Alert
+        return Warning
       default:
         return null
     }

package/dist/ProgressBar.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  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>

package/dist/ProgressBar.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    percentage?: number;
+};
+declare const ProgressBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/TagStatus.svelte

@@ -18,6 +18,16 @@
       'border border-blue-200': status === 'blue' && dot,
       'bg-purple-100 text-purple-500': status === 'purple',
       'border border-purple-200': status === 'purple' && dot,
+      'bg-olive-100 text-olive-500': status === 'olive',
+      'border border-olive-200': status === 'olive' && dot,
+      'bg-teal-100 text-teal-500': status === 'teal',
+      'border border-teal-200': status === 'teal' && dot,
+      'bg-crimson-100 text-crimson-500': status === 'crimson',
+      'border border-crimson-200': status === 'crimson' && dot,
+      'bg-blue-violet-100 text-blue-violet-500': status === 'blueViolet',
+      'border border-blue-violet-200': status === 'blueViolet' && dot,
+      'bg-steel-blue-100 text-steel-blue-500': status === 'steelBlue',
+      'border border-steel-blue-200': status === 'steelBlue' && dot,
       'border border-dashed border-neutral-200 text-neutral-400': status === 'empty',
       'bg-neutral-100 text-neutral-500': status === 'grey',
       'border border-neutral-200': status === 'grey' && dot,
@@ -35,6 +45,10 @@
       'bg-warning-500': status === 'orange',
       'bg-blue-500': status === 'blue',
       'bg-purple-500': status === 'purple',
+      'bg-olive-500': status === 'olive',
+      'bg-teal-500': status === 'teal',
+      'bg-crimson-500': status === 'crimson',
+      'bg-blue-violet-500': status === 'blueViolet',
       'bg-neutral-300': status === 'empty',
       'bg-neutral-500': status === 'grey'
     })

package/dist/index.d.ts

@@ -43,6 +43,7 @@ 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';
@@ -74,4 +75,4 @@ 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, 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 };
+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 };

package/dist/index.js

@@ -43,6 +43,7 @@ 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'
@@ -116,6 +117,7 @@ export {
   Notification,
   ProfileAvatar,
   ProfileSelector,
+  ProgressBar,
   SectionLayout,
   SeparatorHorizontal,
   ShortcutWrapper,

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

@@ -11,7 +11,7 @@
 <RangeCalendarPrimitive.Cell
   bind:ref
   class={cn(
-    'size-(--cell-size) dark:[&:has([data-range-start])]:hover:bg-accent dark:[&:has([data-range-end])]:hover:bg-accent [&:has([data-range-middle])]:bg-accent dark:[&:has([data-range-middle])]:hover:bg-accent/50 [&: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])]: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',
     className
   )}
   {...restProps}

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

@@ -28,9 +28,6 @@
     'data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
     // Unavailable
     'data-[unavailable]:line-through',
-    'dark:data-[range-middle]:hover:bg-accent/0',
-    // hover
-    'dark:hover:text-accent-foreground',
     // focus
     'focus:border-ring focus:ring-ring/50 focus:relative',
     // inner spans

package/dist/sonner/sonner.svelte

@@ -1,12 +1,46 @@
 <script lang="ts">
   import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner'
   import { mode } from 'mode-watcher'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { Success, Failure, Info } from '@invopop/ui-icons'
+
   let { ...restProps }: SonnerProps = $props()
 </script>
 
 <Sonner
   theme={mode.current}
   class="toaster group"
-  style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
+  toastOptions={{
+    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',
+      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',
+      closeButton: 'hidden'
+    }
+  }}
   {...restProps}
-/>
+>
+  {#snippet successIcon()}
+    <Icon src={Success} class="w-4 h-4 text-positive-500" />
+  {/snippet}
+
+  {#snippet errorIcon()}
+    <Icon src={Failure} class="w-4 h-4 text-danger-500" />
+  {/snippet}
+
+  {#snippet infoIcon()}
+    <Icon src={Info} class="w-4 h-4 text-white" />
+  {/snippet}
+</Sonner>
+
+<style>
+  :global(.toaster) {
+    --width: 336px;
+  }
+</style>

package/dist/svg/IconDelivery.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  export let classes = ''
+</script>
+
+<svg class={classes} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 97 117">
+  <g filter="url(#a)">
+    <foreignObject width="97" height="119" x="0" y="-2">
+      <div style="backdrop-filter:blur(10px);clip-path:url(#b);height:100%;width:100%" />
+    </foreignObject>
+    <g data-figma-bg-blur-radius="20">
+      <rect width="57" height="79" x="20" y="18" fill="#fff" rx="6" />
+      <rect width="57" height="79" x="20" y="18" fill="#169958" fill-opacity=".02" rx="6" />
+      <rect
+        width="56.2"
+        height="78.2"
+        x="20.4"
+        y="18.4"
+        stroke="#169958"
+        stroke-opacity=".6"
+        stroke-width=".8"
+        rx="5.6"
+      />
+    </g>
+    <rect
+      width="50.4"
+      height="72.4"
+      x="23.3"
+      y="21.3"
+      stroke="#018551"
+      stroke-opacity=".2"
+      stroke-width=".6"
+      rx="3.7"
+    />
+    <rect width="19" height="2" x="28" y="45" fill="#018551" rx="1" />
+    <rect width="15" height="2" x="28" y="68" fill="#018551" rx="1" />
+    <rect width="10" height="2" x="59" y="50" fill="#018551" rx="1" />
+    <rect width="12" height="2" x="57" y="73" fill="#018551" rx="1" />
+    <rect width="14" height="2" x="55" y="54" fill="#018551" rx="1" />
+    <rect width="14" height="2" x="55" y="77" fill="#018551" rx="1" />
+    <rect width="10" height="2" x="59" y="58" fill="#018551" rx="1" />
+    <rect width="12" height="2" x="57" y="62" fill="#018551" rx="1" />
+    <rect width="8" height="2" x="61" y="81" fill="#018551" rx="1" />
+    <rect width="16" height="2" x="28" y="50" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="12" height="2" x="28" y="73" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="11" height="2" x="28" y="54" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="16" height="2" x="28" y="77" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="14" height="2" x="28" y="58" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="18" height="2" x="28" y="81" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="16" height="2" x="28" y="62" fill="#018551" fill-opacity=".2" rx="1" />
+    <g clip-path="url(#c)">
+      <path
+        fill="#018551"
+        d="M34.973 26.556a2.14 2.14 0 0 1 2.138 2.138v.195h1.131c.465 0 .894.235 1.145.626l1.397 2.171c.142.22.217.476.217.737v1.716a2.14 2.14 0 0 1-2.139 2.138h-.43a1.948 1.948 0 0 1-1.905 1.556c-.938 0-1.723-.67-1.904-1.556h-2.218a1.948 1.948 0 0 1-1.905 1.556 1.947 1.947 0 0 1-1.918-1.63A2.14 2.14 0 0 1 27 34.138v-5.445a2.14 2.14 0 0 1 2.139-2.138h5.834ZM30.5 35.11a.778.778 0 0 0 0 1.556.778.778 0 0 0 0-1.556Zm6.027 0a.779.779 0 0 0 0 1.556.78.78 0 0 0 .779-.778.78.78 0 0 0-.779-.778Zm.584-3.5h2.237l-.943-1.466a.193.193 0 0 0-.163-.09h-1.13v1.556Z"
+      />
+    </g>
+  </g>
+  <defs>
+    <clipPath id="b" transform="translate(0 2)">
+      <rect width="57" height="79" x="20" y="18" rx="6" />
+    </clipPath>
+    <clipPath id="c">
+      <path fill="#fff" d="M27 25h14v14H27z" />
+    </clipPath>
+    <filter
+      id="a"
+      width="97"
+      height="119"
+      x="0"
+      y="0"
+      color-interpolation-filters="sRGB"
+      filterUnits="userSpaceOnUse"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        result="hardAlpha"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+      />
+      <feOffset dy="2" />
+      <feGaussianBlur stdDeviation="10" />
+      <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_9631_17687" />
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow_9631_17687" result="shape" />
+    </filter>
+  </defs>
+</svg>

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

@@ -0,0 +1,20 @@
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const IconDelivery: $$__sveltets_2_IsomorphicComponent<{
+    classes?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IconDelivery = InstanceType<typeof IconDelivery>;
+export default IconDelivery;

package/dist/svg/IconOrder.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  export let classes = ''
+</script>
+
+<svg class={classes} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 97 117">
+  <g filter="url(#a)">
+    <foreignObject width="97" height="119" x="0" y="-2">
+      <div style="backdrop-filter:blur(10px);clip-path:url(#b);height:100%;width:100%" />
+    </foreignObject>
+    <g data-figma-bg-blur-radius="20">
+      <rect width="57" height="79" x="20" y="18" fill="#fff" rx="6" />
+      <rect width="57" height="79" x="20" y="18" fill="#169958" fill-opacity=".02" rx="6" />
+      <rect
+        width="56.2"
+        height="78.2"
+        x="20.4"
+        y="18.4"
+        stroke="#169958"
+        stroke-opacity=".6"
+        stroke-width=".8"
+        rx="5.6"
+      />
+    </g>
+    <rect
+      width="50.4"
+      height="72.4"
+      x="23.3"
+      y="21.3"
+      stroke="#018551"
+      stroke-opacity=".2"
+      stroke-width=".6"
+      rx="3.7"
+    />
+    <rect width="19" height="2" x="28" y="45" fill="#018551" rx="1" />
+    <rect width="15" height="2" x="28" y="68" fill="#018551" rx="1" />
+    <rect width="10" height="2" x="59" y="50" fill="#018551" rx="1" />
+    <rect width="12" height="2" x="57" y="73" fill="#018551" rx="1" />
+    <rect width="14" height="2" x="55" y="54" fill="#018551" rx="1" />
+    <rect width="14" height="2" x="55" y="77" fill="#018551" rx="1" />
+    <rect width="10" height="2" x="59" y="58" fill="#018551" rx="1" />
+    <rect width="12" height="2" x="57" y="62" fill="#018551" rx="1" />
+    <rect width="8" height="2" x="61" y="81" fill="#018551" rx="1" />
+    <rect width="16" height="2" x="28" y="50" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="12" height="2" x="28" y="73" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="11" height="2" x="28" y="54" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="16" height="2" x="28" y="77" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="14" height="2" x="28" y="58" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="18" height="2" x="28" y="81" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="16" height="2" x="28" y="62" fill="#018551" fill-opacity=".2" rx="1" />
+    <path
+      fill="#018551"
+      d="M37.306 26.555h-6.612c-1.18 0-2.139.96-2.139 2.14v6.61c0 1.18.96 2.14 2.14 2.14h4.022c.571 0 1.108-.223 1.512-.627l2.589-2.589c.404-.404.626-.94.626-1.512v-4.023c0-1.18-.959-2.139-2.139-2.139Zm-4.667 8.167h-1.167a.583.583 0 0 1 0-1.166h1.167a.583.583 0 0 1 0 1.166Zm.583-2.139h-1.75a.583.583 0 0 1 0-1.166h1.75a.583.583 0 0 1 0 1.166Zm-1.75-2.139a.583.583 0 0 1 0-1.166h5.056a.583.583 0 0 1 0 1.166h-5.056Zm6.52 2.96-2.588 2.589c-.068.068-.153.113-.237.158v-2.79c0-.107.087-.194.194-.194h2.791a.962.962 0 0 1-.16.237Z"
+    />
+  </g>
+  <defs>
+    <clipPath id="b" transform="translate(0 2)">
+      <rect width="57" height="79" x="20" y="18" rx="6" />
+    </clipPath>
+    <filter
+      id="a"
+      width="97"
+      height="119"
+      x="0"
+      y="0"
+      color-interpolation-filters="sRGB"
+      filterUnits="userSpaceOnUse"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        result="hardAlpha"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+      />
+      <feOffset dy="2" />
+      <feGaussianBlur stdDeviation="10" />
+      <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_9631_18422" />
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow_9631_18422" result="shape" />
+    </filter>
+  </defs>
+</svg>

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

@@ -0,0 +1,20 @@
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const IconOrder: $$__sveltets_2_IsomorphicComponent<{
+    classes?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IconOrder = InstanceType<typeof IconOrder>;
+export default IconOrder;

package/dist/svg/IconPayment.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  export let classes = ''
+</script>
+
+<svg class={classes} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 97 117">
+  <g filter="url(#a)">
+    <foreignObject width="97" height="119" x="0" y="-2">
+      <div style="backdrop-filter:blur(10px);clip-path:url(#b);height:100%;width:100%" />
+    </foreignObject>
+    <g data-figma-bg-blur-radius="20">
+      <rect width="57" height="79" x="20" y="18" fill="#fff" rx="6" />
+      <rect width="57" height="79" x="20" y="18" fill="#169958" fill-opacity=".02" rx="6" />
+      <rect
+        width="56.2"
+        height="78.2"
+        x="20.4"
+        y="18.4"
+        stroke="#169958"
+        stroke-opacity=".6"
+        stroke-width=".8"
+        rx="5.6"
+      />
+    </g>
+    <rect
+      width="50.4"
+      height="72.4"
+      x="23.3"
+      y="21.3"
+      stroke="#018551"
+      stroke-opacity=".2"
+      stroke-width=".6"
+      rx="3.7"
+    />
+    <rect width="19" height="2" x="28" y="45" fill="#018551" rx="1" />
+    <rect width="15" height="2" x="28" y="68" fill="#018551" rx="1" />
+    <rect width="10" height="2" x="59" y="50" fill="#018551" rx="1" />
+    <rect width="12" height="2" x="57" y="73" fill="#018551" rx="1" />
+    <rect width="14" height="2" x="55" y="54" fill="#018551" rx="1" />
+    <rect width="14" height="2" x="55" y="77" fill="#018551" rx="1" />
+    <rect width="10" height="2" x="59" y="58" fill="#018551" rx="1" />
+    <rect width="12" height="2" x="57" y="62" fill="#018551" rx="1" />
+    <rect width="8" height="2" x="61" y="81" fill="#018551" rx="1" />
+    <rect width="16" height="2" x="28" y="50" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="12" height="2" x="28" y="73" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="11" height="2" x="28" y="54" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="16" height="2" x="28" y="77" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="14" height="2" x="28" y="58" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="18" height="2" x="28" y="81" fill="#018551" fill-opacity=".2" rx="1" />
+    <rect width="16" height="2" x="28" y="62" fill="#018551" fill-opacity=".2" rx="1" />
+    <g clip-path="url(#c)">
+      <path
+        fill="#018551"
+        d="M30.44 31.605c.83-.426 1.794-.433 2.715-.023l2.164.99c.408.184.721.518.88.939.049.132.076.268.091.404l2.335-1.054a1.684 1.684 0 0 1 2.226.842 1.685 1.685 0 0 1-.842 2.226l-5.282 2.383a2.902 2.902 0 0 1-2.088.12l-2.76-.882a1.362 1.362 0 0 1-1.323 1.06h-.195C27.611 38.61 27 38 27 37.25V33.36c0-.75.61-1.361 1.361-1.361h.195c.363 0 .692.145.936.378.267-.312.58-.583.947-.772Zm2.235 1.042c-.596-.265-1.185-.267-1.703-.002a2.1 2.1 0 0 0-1.055 1.381v2.313l3.077.983c.413.133.857.107 1.252-.071l5.282-2.384a.512.512 0 0 0 .27-.288.518.518 0 0 0-.695-.654c-.027.013-3.848 1.74-3.89 1.755a1.686 1.686 0 0 1-1.288-.043l-1.531-.697a.583.583 0 1 1 .481-1.062l1.532.696a.516.516 0 1 0 .428-.94l-2.16-.987ZM35.75 25a2.92 2.92 0 0 1 2.917 2.917 2.92 2.92 0 0 1-2.917 2.916 2.92 2.92 0 0 1-2.917-2.916A2.92 2.92 0 0 1 35.75 25Zm0 1.75a.583.583 0 0 0-.583.583V28.5a.583.583 0 1 0 1.166 0v-1.167a.583.583 0 0 0-.583-.583Z"
+      />
+    </g>
+  </g>
+  <defs>
+    <clipPath id="b" transform="translate(0 2)">
+      <rect width="57" height="79" x="20" y="18" rx="6" />
+    </clipPath>
+    <clipPath id="c">
+      <path fill="#fff" d="M27 25h14v14H27z" />
+    </clipPath>
+    <filter
+      id="a"
+      width="97"
+      height="119"
+      x="0"
+      y="0"
+      color-interpolation-filters="sRGB"
+      filterUnits="userSpaceOnUse"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        result="hardAlpha"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+      />
+      <feOffset dy="2" />
+      <feGaussianBlur stdDeviation="10" />
+      <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_9631_18244" />
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow_9631_18244" result="shape" />
+    </filter>
+  </defs>
+</svg>

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

@@ -0,0 +1,20 @@
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const IconPayment: $$__sveltets_2_IsomorphicComponent<{
+    classes?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IconPayment = InstanceType<typeof IconPayment>;
+export default IconPayment;

package/dist/types.d.ts

@@ -4,7 +4,7 @@ import type { Snippet } from 'svelte';
 export type IconTheme = 'default' | 'solid' | 'mini';
 export type IconPosition = 'right' | 'left';
 export type ButtonVariant = 'default' | 'primary' | 'secondary' | 'warning' | 'danger' | 'dark' | 'outline';
-export type StatusType = 'grey' | 'green' | 'yellow' | 'red' | 'orange' | 'blue' | 'purple' | 'empty';
+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 = {
     path: string;
@@ -102,7 +102,7 @@ export type TabItem = {
     check?: boolean;
     warning?: boolean;
 };
-export type EmptyStateIcon = 'invoices' | 'contacts' | 'products' | 'pdf' | 'file' | 'no-results';
+export type EmptyStateIcon = 'invoices' | 'contacts' | 'parties' | 'products' | 'deliveries' | 'orders' | 'payments' | 'pdf' | 'file' | 'no-results' | 'no-results';
 export type DataListItem = {
     label: string;
     value: string;
@@ -342,10 +342,10 @@ export interface DatePickerProps {
 export interface DrawerContextProps {
     items?: DrawerOption[];
     multiple?: boolean;
-    searchable?: boolean;
     widthClass?: string;
     onclick?: (value: AnyProp) => void;
     onselect?: (selected: DrawerOption[]) => void;
+    children?: Snippet;
 }
 export interface DrawerContextItemProps {
     multiple?: boolean;
@@ -415,6 +415,8 @@ export interface FeedItemDetailProps {
     events?: FeedEvent[];
     idLabel?: string;
     onCopied?: (uuid: string) => void;
+    cancelable?: boolean;
+    onCancel?: () => void;
 }
 export interface FeedViewerProps {
     items?: FeedItemProps[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
@@ -79,7 +79,7 @@
   "type": "module",
   "dependencies": {
     "@floating-ui/core": "^1.5.1",
-    "@invopop/ui-icons": "0.0.67",
+    "@invopop/ui-icons": "0.0.71",
     "@steeze-ui/heroicons": "^2.2.3",
     "@steeze-ui/svelte-icon": "^1.6.2",
     "@tailwindcss/vite": "^4.1.12",