@invopop/popui 0.1.14 → 0.1.15

package/dist/Notification.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import clsx from 'clsx'
-  import { Warning, Failure, Success } from '@invopop/ui-icons'
+  import { Warning, Failure, Success, InfoBold } from '@invopop/ui-icons'
   import { Icon } from '@steeze-ui/svelte-icon'
-  import type { NotificationProps, Status } from './types'
+  import type { NotificationProps } from './types'
 
-  let { message = '', type = 'success', children }: NotificationProps = $props()
+  let { title = '', description = '', type = 'neutral', children }: NotificationProps = $props()
 
-  function getIcon(type: Status) {
+  let icon = $derived.by(() => {
     switch (type) {
       case 'success':
         return Success
@@ -14,31 +14,62 @@
         return Failure
       case 'warning':
         return Warning
+      case 'info':
+        return InfoBold
+      case 'neutral':
+        return InfoBold
       default:
-        return null
+        return InfoBold
     }
-  }
-  let icon = $derived(getIcon(type))
-  let styles = $derived(
-    clsx(
-      { 'bg-positive-50': type === 'success' },
-      { 'bg-danger-50': type === 'error' },
-      { 'bg-yellow-50': type === 'warning' }
-    )
+  })
+
+  let containerStyles = $derived(
+    clsx('flex items-center gap-1.5 px-3 py-2 rounded-xl', {
+      'bg-background border border-border': type === 'neutral',
+      'bg-background-info': type === 'info',
+      'bg-background-success': type === 'success',
+      'bg-background-warning': type === 'warning',
+      'bg-background-critical': type === 'error',
+      'min-h-9 rounded-[10px] pl-3 pr-1.5 py-1.5': !description
+    })
+  )
+
+  let titleStyles = $derived(
+    clsx('text-base font-medium leading-5 tracking-tight', {
+      'text-foreground': type === 'neutral',
+      'text-foreground-info': type === 'info',
+      'text-foreground-success': type === 'success',
+      'text-foreground-warning': type === 'warning',
+      'text-foreground-critical': type === 'error'
+    })
   )
-  let textStyles = $derived(
-    clsx(
-      { 'text-positive-500': type === 'success' },
-      { 'text-danger-500': type === 'error' },
-      { 'text-yellow-500': type === 'warning' }
-    )
+
+  let iconStyles = $derived(
+    clsx('size-4 mt-0.5', {
+      'text-icon': type === 'neutral',
+      'text-icon-info': type === 'info',
+      'text-icon-success': type === 'success',
+      'text-icon-warning': type === 'warning',
+      'text-icon-critical': type === 'error'
+    })
   )
 </script>
 
-<div class="{styles} pl-3 pr-2 py-2 text-base font-medium rounded-lg flex items-center space-x-1">
-  {#if icon}
-    <Icon src={icon} class="h-4 w-4" />
-  {/if}
-  <span class="{textStyles} flex-1">{message}</span>
+<div class={containerStyles}>
+  <div class="flex items-start self-stretch">
+    <div class="relative size-4 shrink-0">
+      {#if icon}
+        <Icon src={icon} class={iconStyles} />
+      {/if}
+    </div>
+  </div>
+  <div class="flex flex-col gap-0.5 grow justify-center min-w-0">
+    <p class={titleStyles}>{title}</p>
+    {#if description}
+      <p class="text-sm text-foreground-default-secondary leading-5 tracking-tight">
+        {description}
+      </p>
+    {/if}
+  </div>
   {@render children?.()}
 </div>

package/dist/ProfileAvatar.svelte

@@ -1,43 +1,70 @@
 <script lang="ts">
   import clsx from 'clsx'
   import BaseFlag from './BaseFlag.svelte'
+  import { Icon } from '@steeze-ui/svelte-icon'
   import type { ProfileAvatarProps } from './types'
 
   let {
     name = '',
-    small = false,
-    large = false,
+    variant = 'sm',
     dark = false,
     picture = $bindable(''),
-    country = ''
+    country = '',
+    icon
   }: ProfileAvatarProps = $props()
 
-  let avatarStyles = $derived(
+  let containerStyles = $derived(
     clsx(
-      { 'text-sm': !large },
-      { 'h-4 w-4': small },
-      { 'h-5 w-5': !large && !small },
-      { 'h-8 w-8': large },
-      { 'bg-neutral-50 border-neutral-100 text-neutral-500': !dark },
-      { 'bg-white-5 border-white-10 text-white-70': dark },
-      { border: !picture }
+      'border overflow-clip relative flex items-center justify-center',
+      { 'size-4 rounded': variant === 'xs' },
+      { 'size-5 rounded-md': variant === 'sm' },
+      { 'size-7 rounded-md': variant === 'md' },
+      { 'size-8 rounded-lg': variant === 'lg' },
+      { 'size-10 rounded-lg': variant === 'xl' },
+      { 'bg-background-default-default border-border-default-default': !dark },
+      { 'border-border-inverse-default': dark }
+    )
+  )
+
+  let textStyles = $derived(
+    clsx(
+      'font-sans font-medium tracking-tight',
+      { 'text-sm leading-4': variant === 'xs' || variant === 'sm' },
+      { 'text-base leading-5': variant === 'md' },
+      { 'text-lg leading-6': variant === 'lg' },
+      { 'text-xl leading-7': variant === 'xl' },
+      { 'text-foreground-default-secondary': !dark },
+      { 'text-foreground-inverse-secondary': dark }
+    )
+  )
+
+  let iconStyles = $derived(
+    clsx(
+      { 'size-3': variant === 'xs' || variant === 'sm' },
+      { 'size-4': variant === 'md' },
+      { 'size-[25px]': variant === 'lg' || variant === 'xl' },
+      { 'text-icon-default-default': !dark },
+      { 'text-icon-inverse-default': dark }
     )
   )
 </script>
 
-<div class="{avatarStyles} rounded flex items-center justify-center font-semibold relative">
+<div class={containerStyles}>
   {#if picture}
     <img
-      class="h-full w-full rounded object-cover"
       src={picture}
       alt={name}
+      class="absolute inset-0 size-full object-cover bg-background-default-bold"
       onerror={() => {
         picture = ''
       }}
     />
+  {:else if icon}
+    <Icon src={icon} class={iconStyles} />
   {:else}
-    <span>{name?.charAt(0)}</span>
+    <span class={textStyles}>{name?.charAt(0)?.toUpperCase()}</span>
   {/if}
+
   {#if country}
     <div class="absolute -bottom-0.5 -right-0.5">
       <BaseFlag {country} />

package/dist/SeparatorHorizontal.svelte

@@ -4,8 +4,8 @@
   .hr-separator {
     border-image: repeating-linear-gradient(
       90deg,
-      rgba(209, 213, 219, 1),
-      rgba(209, 213, 219, 1) 3px,
+      var(--color-border-default-default),
+      var(--color-border-default-default) 3px,
       transparent 3px,
       transparent 7px
     );

package/dist/ShortcutWrapper.svelte

@@ -1,12 +1,21 @@
 <script lang="ts">
   import type { ShortcutWrapperProps } from './types'
+  import clsx from 'clsx'
 
-  let { children }: ShortcutWrapperProps = $props()
+  let { size = 'sm', theme = 'light', children }: ShortcutWrapperProps = $props()
+
+  const styles = $derived(
+    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_rgba(0,0,0,0.06)] text-foreground-default-secondary':
+        theme === 'light',
+      'bg-background-inverse-secondary border-border-inverse-secondary shadow-[0px_1px_0px_rgba(255,255,255,0.25)] text-foreground-inverse-secondary':
+        theme === 'navigation'
+    })
+  )
 </script>
 
-<div
-  class="h-4 w-4 bg-white-5 rounded border border-white-20 inline-flex items-center justify-center"
-  style="box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);"
->
+<div class={styles}>
   {@render children?.()}
 </div>

package/dist/StatusLabel.svelte

@@ -7,11 +7,10 @@
 
   let styles = $derived(
     clsx({
-      'text-positive-500': status === 'success',
-      'text-neutral-500': status === 'queued',
-      'text-warning-500': status === 'alert',
-      'text-danger-500': status === 'failure',
-      'text-yellow-500': status === 'run'
+      'text-foreground-success': status === 'success',
+      'text-foreground-critical': status === 'failure',
+      'text-foreground-attention': ['run', 'alert'].includes(status),
+      'text-foreground-default-secondary': status === 'queued'
     })
   )
 </script>

package/dist/StepIconList.svelte

@@ -13,27 +13,25 @@
   <div class="flex flex-col space-y-2 sm:flex-row sm:space-y-0 items-center">
     {#each mainIcons as icon, i (i)}
       <Tooltip>
-        <TooltipTrigger class="flex-shrink-0">
+        <TooltipTrigger class="shrink-0">
           <div
-            class="p-1.5 border rounded-md border-neutral-200 flex items-center space-x-1 bg-white text-neutral-800"
+            class="p-1.5 border rounded-md border-border flex items-center space-x-1 bg-background text-icon"
           >
-            <img src={icon.url} alt={icon.name} class="w-4 h-4" />
+            <img src={icon.url} alt={icon.name} class="size-4" />
           </div>
         </TooltipTrigger>
         <TooltipContent>{icon.name}</TooltipContent>
       </Tooltip>
 
       {#if i < mainIcons.length - 1}
-        <div class="hidden sm:block h-px w-3 border border-neutral-200 mx-px flex-shrink-0"></div>
+        <div class="hidden sm:block h-px w-3 border border-border mx-px shrink-0"></div>
       {/if}
     {/each}
     {#if restIcons.length}
-      <div class="hidden sm:block h-px w-3 border border-neutral-200 mx-px flex-shrink-0"></div>
+      <div class="hidden sm:block h-px w-3 border border-border mx-px shrink-0"></div>
       <Tooltip>
-        <TooltipTrigger class="flex-shrink-0">
-          <div
-            class="flex items-center justify-center text-neutral-500 font-medium text-base h-7 w-7"
-          >
+        <TooltipTrigger class="shrink-0">
+          <div class="flex items-center justify-center text-icon font-medium text-base size-7">
             +{restIcons.length}
           </div>
         </TooltipTrigger>

package/dist/TagBeta.svelte

@@ -1,23 +1,35 @@
-<div class="rounded p-px beta-tag relative">
-  <svg viewBox="0 0 37 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="absolute">
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M4 4L4 7.5H0V8H4L4 11.5H0V12H4V15.5H0V16H4V20H4.5V16H8V20H8.5V16H12V20H12.5V16H16V20H16.5V16H20V20H20.5V16H24V20H24.5V16H28V20H28.5V16H32V20H32.5V16H37V15.5H32.5V12H37V11.5H32.5V8H37V7.5H32.5V4H37V3.5H32.5V0H32V3.5H28.5V0H28V3.5H24.5V0H24V3.5H20.5V0H20V3.5H16.5V0H16V3.5H12.5V0H12V3.5H8.5V0H8V3.5H4.5V0H4L4 3.5H0V4H4ZM32 4H28.5V7.5H32V4ZM32 8H28.5V11.5H32V8ZM32 12H28.5V15.5H32V12ZM28 12V15.5H24.5V12H28ZM28 8V11.5H24.5V8H28ZM28 4V7.5H24.5V4H28ZM24 4H20.5V7.5H24V4ZM24 8H20.5V11.5H24V8ZM24 12H20.5V15.5H24V12ZM20 12V15.5H16.5V12H20ZM20 8V11.5H16.5V8H20ZM20 4V7.5H16.5V4H20ZM16 4H12.5V7.5H16V4ZM16 8H12.5L12.5 11.5H16L16 8ZM16 12H12.5V15.5H16V12ZM12 12V15.5H8.5V12H12ZM12 8L12 11.5H8.5L8.5 8H12ZM12 4V7.5H8.5V4H12ZM8 4H4.5V7.5H8L8 4ZM8 8H4.5L4.5 11.5H8V8ZM8 12H4.5V15.5H8L8 12Z"
-      fill="white"
-      fill-opacity="0.05"
-    />
-  </svg>
+<div class="flex gap-2 items-start">
   <div
-    class="rounded-[3px] py-px px-1 text-white font-mono"
-    style="border: 0.5px solid var(--white-60, rgba(255, 255, 255, 0.60));"
+    class="beta-tag flex flex-col gap-2 items-start overflow-hidden p-px rounded relative shrink-0"
   >
-    Beta
+    <div class="border-[0.5px] border-white-60 rounded-[3px] relative shrink-0">
+      <div class="flex gap-2 items-start overflow-hidden px-1 py-px rounded-[inherit]">
+        <span class="font-medium text-xs leading-4 text-white whitespace-nowrap">Beta</span>
+      </div>
+    </div>
+    <div class="absolute h-5 left-0 right-0 top-0 pointer-events-none">
+      <svg
+        viewBox="0 0 37 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        class="block max-w-none size-full"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M4 4L4 7.5H0V8H4L4 11.5H0V12H4V15.5H0V16H4V20H4.5V16H8V20H8.5V16H12V20H12.5V16H16V20H16.5V16H20V20H20.5V16H24V20H24.5V16H28V20H28.5V16H32V20H32.5V16H37V15.5H32.5V12H37V11.5H32.5V8H37V7.5H32.5V4H37V3.5H32.5V0H32V3.5H28.5V0H28V3.5H24.5V0H24V3.5H20.5V0H20V3.5H16.5V0H16V3.5H12.5V0H12V3.5H8.5V0H8V3.5H4.5V0H4L4 3.5H0V4H4ZM32 4H28.5V7.5H32V4ZM32 8H28.5V11.5H32V8ZM32 12H28.5V15.5H32V12ZM28 12V15.5H24.5V12H28ZM28 8V11.5H24.5V8H28ZM28 4V7.5H24.5V4H28ZM24 4H20.5V7.5H24V4ZM24 8H20.5V11.5H24V8ZM24 12H20.5V15.5H24V12ZM20 12V15.5H16.5V12H20ZM20 8V11.5H16.5V8H20ZM20 4V7.5H16.5V4H20ZM16 4H12.5V7.5H16V4ZM16 8H12.5L12.5 11.5H16L16 8ZM16 12H12.5V15.5H16V12ZM12 12V15.5H8.5V12H12ZM12 8L12 11.5H8.5L8.5 8H12ZM12 4V7.5H8.5V4H12ZM8 4H4.5V7.5H8L8 4ZM8 8H4.5L4.5 11.5H8V8ZM8 12H4.5V15.5H8L8 12Z"
+          fill="white"
+          fill-opacity="0.05"
+        />
+      </svg>
+    </div>
   </div>
 </div>
 
 <style>
   .beta-tag {
-    background: linear-gradient(180deg, #0072f5 0%, rgba(0, 77, 164, 0.4) 100%), #0072f5;
+    background-image:
+      linear-gradient(rgb(0, 114, 245) 0%, rgba(0, 77, 164, 0.4) 100%),
+      linear-gradient(90deg, rgb(0, 114, 245) 0%, rgb(0, 114, 245) 100%);
   }
 </style>

package/dist/TagStatus.svelte

@@ -5,64 +5,49 @@
   let { label = '', status = 'grey', dot = false }: TagStatusProps = $props()
 
   let tagStyles = $derived(
-    clsx({
-      'bg-positive-100 text-positive-500': status === 'green',
-      'border border-positive-200': status === 'green' && dot,
-      'bg-yellow-100 text-yellow-500': status === 'yellow',
-      'border border-yellow-200': status === 'yellow' && dot,
-      'bg-danger-100 text-danger-500': status === 'red',
-      'border border-danger-200': status === 'red' && dot,
-      'bg-warning-100 text-warning-500': status === 'orange',
-      'border border-warning-200': status === 'orange' && dot,
-      'bg-blue-100 text-blue-500': status === 'blue',
-      '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,
-      'pl-1.5 pr-[5px] py-0.5': dot && label,
-      'p-0.5': dot && !label,
-      'px-1 py-0.5': !dot
+    clsx('rounded inline-flex items-center text-xs font-medium gap-1 box-border leading-4 py-0.5', {
+      'bg-background-status-paid text-foreground-status-paid': status === 'green',
+      'bg-background-status-processing text-foreground-status-processing': status === 'yellow',
+      'bg-background-status-error text-foreground-status-error': status === 'red',
+      'bg-background-status-draft text-foreground-status-draft': status === 'orange',
+      'bg-background-status-sent text-foreground-status-sent': status === 'blue',
+      'bg-background-status-registered text-foreground-status-registered': status === 'purple',
+      'bg-background-status-completed text-foreground-status-completed': status === 'teal',
+      'bg-background-status-received text-foreground-status-received': status === 'steelBlue',
+      'bg-background-status-rejected text-foreground-status-rejected': status === 'crimson',
+      'bg-sherwood-alpha-10 text-sherwood-60': status === 'olive',
+      'bg-background-status-void text-foreground-default-secondary': status === 'grey',
+      'border border-dashed border-border-default-secondary text-foreground-default-secondary':
+        status === 'empty',
+      'px-1.5': dot,
+      'p-1!': dot && !label,
+      'px-1': !dot
     })
   )
 
   let dotStyles = $derived(
-    clsx({
-      'bg-positive-500': status === 'green',
-      'bg-yellow-500': status === 'yellow',
-      'bg-danger-500': status === 'red',
-      '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'
+    clsx('rounded-[2px] shrink-0', {
+      'bg-icon-status-paid': status === 'green',
+      'bg-icon-status-processing': status === 'yellow',
+      'bg-icon-status-error': status === 'red',
+      'bg-icon-status-draft': status === 'orange',
+      'bg-icon-status-sent': status === 'blue',
+      'bg-icon-status-registered': status === 'purple',
+      'bg-icon-status-completed': status === 'teal',
+      'bg-icon-status-received': status === 'steelBlue',
+      'bg-icon-status-rejected': status === 'crimson',
+      'bg-sherwood-50': status === 'olive',
+      'bg-icon-status-void': status === 'grey',
+      'bg-icon-default-secondary': status === 'empty'
     })
   )
 </script>
 
-<span
-  class:h-5={Boolean(label)}
-  class="{tagStyles} rounded text-sm inline-flex items-center font-medium gap-1 box-border"
->
+<span class={tagStyles}>
   {#if dot}
-    <span class="{dotStyles} w-2 h-2 rounded-sm"></span>
+    <span class="{dotStyles} size-2"></span>
   {/if}
   {#if label}
-    <span>{label}</span>
+    <span class="whitespace-nowrap">{label}</span>
   {/if}
 </span>

package/dist/TitleMain.svelte

@@ -4,7 +4,7 @@
   let { title = '', children }: TitleMainProps = $props()
 </script>
 
-<h1 class="text-neutral-800 font-medium text-lg font-sans tracking-tightest">
+<h1 class="text-foreground font-medium text-lg">
   {#if children}
     {@render children()}
   {:else}

package/dist/TitleSection.svelte

@@ -4,7 +4,7 @@
   let { title = '', children }: TitleSectionProps = $props()
 </script>
 
-<h1 class="text-neutral-800 font-medium text-lg font-sans tracking-tighter">
+<h1 class="text-foreground font-medium text-lg">
   {#if children}
     {@render children()}
   {:else}

package/dist/UuidCopy.svelte

@@ -35,11 +35,11 @@
       'justify-end': rightAlign,
       'text-sm': small,
       'text-base': !small,
-      'text-neutral-800': dark,
-      'text-neutral-500': !dark,
+      'text-foreground': dark,
+      'text-foreground-default-secondary': !dark,
       'justify-between': !compact,
       'w-full': full,
-      'border border-neutral-800/10 rounded-md pl-2.5 pr-2 py-[5px]': !full
+      'border border-border rounded-md pl-2.5 pr-2 py-[5px]': !full
     })
   )
 
@@ -65,6 +65,6 @@
     {formattedUuid}
   </button>
   <button class="p-1 cursor-pointer" onclick={handleIconClick}>
-    <Icon src={link ? ExternalLink : Duplicate} class="w-4 h-4 text-neutral-500" />
+    <Icon src={link ? ExternalLink : Duplicate} class="w-4 h-4 text-foreground-default-secondary" />
   </button>
 </div>

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

@@ -10,14 +10,16 @@
     ...restProps
   }: AlertDialogPrimitive.ActionProps & { destructive: boolean } = $props()
 
-  let variant = $derived((destructive ? 'destructive' : 'primary') as ButtonVariant)
+  let variant = $derived((destructive ? 'danger' : 'primary') as ButtonVariant)
 </script>
 
 <AlertDialogPrimitive.Action
   bind:ref
   data-slot="alert-dialog-action"
-  class={cn(buttonVariants({ variant }), className)}
+  class={cn(buttonVariants({ variant }), 'group', className)}
   {...restProps}
 >
-  {@render children?.()}
+  <div class="inline-flex items-center transition-transform group-active:translate-y-px">
+    {@render children?.()}
+  </div>
 </AlertDialogPrimitive.Action>

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

@@ -13,9 +13,11 @@
 <AlertDialogPrimitive.Cancel
   bind:ref
   data-slot="alert-dialog-cancel"
-  class={cn(buttonVariants({ variant: 'secondary' }), 'mt-2 sm:mt-0', className)}
+  class={cn(buttonVariants({ variant: 'secondary' }), 'group mt-2 sm:mt-0', className)}
   {onkeydown}
   {...restProps}
 >
-  {@render children?.()}
+  <div class="inline-flex items-center transition-transform group-active:translate-y-px">
+    {@render children?.()}
+  </div>
 </AlertDialogPrimitive.Cancel>

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

@@ -18,7 +18,7 @@
     bind:ref
     data-slot="alert-dialog-content"
     class={cn(
-      'bg-white fixed left-[50%] top-[50%] z-[1002] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-5 pt-3 px-4 pb-4 sm:rounded-lg md:w-full',
+      'bg-background fixed left-1/2 top-1/2 z-[1002] flex flex-col w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-xl overflow-clip',
       className
     )}
   >

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

@@ -12,7 +12,7 @@
   bind:ref
   data-slot="alert-dialog-description"
   class={cn(
-    'text-neutral-500 text-base flex flex-col space-y-2 justify-start items-start !mt-2',
+    'text-base font-normal leading-5 tracking-tight text-foreground-default-secondary',
     className
   )}
 >

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

@@ -11,7 +11,7 @@
 <div
   bind:this={ref}
   data-slot="alert-dialog-footer"
-  class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3', className)}
+  class={cn('flex gap-3 justify-end px-3 pb-3', className)}
 >
   {@render children?.()}
 </div>

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

@@ -11,7 +11,7 @@
 <div
   bind:this={ref}
   data-slot="alert-dialog-header"
-  class={cn('flex flex-col space-y-1 text-center sm:text-left', className)}
+  class={cn('flex flex-col gap-1 px-4 py-3', className)}
 >
   {@render children?.()}
 </div>

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

@@ -11,7 +11,7 @@
 <AlertDialogPrimitive.Title
   bind:ref
   data-slot="alert-dialog-title"
-  class={cn('text-lg font-semibold text-neutral-800', className)}
+  class={cn('text-lg font-semibold leading-6 tracking-tight text-foreground', className)}
 >
   {@render children?.()}
 </AlertDialogPrimitive.Title>