@invopop/popui 0.1.3 → 0.1.4-beta.1

package/dist/InputTextarea.svelte

@@ -18,13 +18,16 @@
 
   let inputStyles = $derived(
     clsx(
-      { 'pointer-events-none bg-neutral-50': disabled },
+      'w-full rounded-lg border px-2 py-1.5 text-base tracking-tight bg-background backdrop-blur-[2px] placeholder:text-foreground-default-tertiary outline-none focus:ring-0 caret-foreground-accent',
       {
-        'text-danger-500 border-danger-400 outline-danger-400': errorText
+        'pointer-events-none bg-background-default-secondary border-border': disabled
       },
       {
-        'border-neutral-200 hover:border-neutral-300 text-neutral-800 outline-none caret-workspace-accent focus:border-workspace-accent focus:shadow-active':
-          !errorText
+        'text-foreground-critical border-border-critical-bold caret-foreground-critical': errorText
+      },
+      {
+        'text-foreground border-border hover:border-border-default-secondary-hover focus:border-border-selected-bold focus:shadow-active':
+          !errorText && !disabled
       }
     )
   )
@@ -35,18 +38,21 @@
   }
 </script>
 
-<InputLabel {id} {label} />
-<textarea
-  {id}
-  {placeholder}
-  {value}
-  class="{inputStyles} py-1.5 px-3 border w-full rounded placeholder-neutral-500 text-base tracking-tight"
-  {disabled}
-  {rows}
-  {...rest}
-  oninput={handleInput}
-></textarea>
-
-{#if errorText}
-  <InputError {errorText} />
-{/if}
+<div class="flex flex-col gap-2">
+  {#if label}
+    <InputLabel {id} {label} />
+  {/if}
+  <textarea
+    {id}
+    {placeholder}
+    {value}
+    class={inputStyles}
+    {disabled}
+    {rows}
+    {...rest}
+    oninput={handleInput}
+  ></textarea>
+  {#if errorText}
+    <InputError {errorText} />
+  {/if}
+</div>

package/dist/InputToggle.svelte

@@ -15,8 +15,24 @@
     $sw.checked = checked
   })
 
-  let togleStyles = $derived(
-    clsx({ 'bg-gray-200': !$sw.checked }, { 'bg-workspace-accent': $sw.checked })
+  let toggleStyles = $derived(
+    clsx(
+      'relative inline-flex h-5 w-[30px] shrink-0 cursor-pointer items-center rounded-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-0',
+      {
+        'bg-background-default-tertiary': !$sw.checked,
+        'bg-background-accent': $sw.checked
+      }
+    )
+  )
+
+  let circleStyles = $derived(
+    clsx(
+      'pointer-events-none inline-block size-4 transform rounded bg-icon-inverse-bold transition duration-200 ease-in-out',
+      {
+        'translate-x-[2px]': !$sw.checked,
+        'translate-x-[12px]': $sw.checked
+      }
+    )
   )
 
   function handleChange() {
@@ -25,22 +41,12 @@
   }
 </script>
 
-<label for={id} class="flex w-full items-center justify-between space-x-2">
-  {#if label}
-    <span class="text-base text-neutral-500">{label}</span>
-  {/if}
-  <button
-    {id}
-    class="{togleStyles} relative inline-flex h-5 w-8 flex-shrink-0 cursor-pointer rounded-md border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-0 focus:ring-offset-0"
-    use:sw.toggle
-    onclick={handleChange}
-  >
+<label for={id} class="inline-flex items-center gap-2 cursor-pointer">
+  <button {id} class={toggleStyles} use:sw.toggle onclick={handleChange}>
     <span class="sr-only">Use setting</span>
-    <span
-      aria-hidden="true"
-      class="{$sw.checked
-        ? 'translate-x-3'
-        : 'translate-x-0'} pointer-events-none inline-block h-4 w-4 transform rounded bg-white shadow ring-0 transition duration-200 ease-in-out"
-    ></span>
+    <span aria-hidden="true" class={circleStyles}></span>
   </button>
+  {#if label}
+    <span class="text-base text-foreground">{label}</span>
+  {/if}
 </label>

package/dist/MenuItem.svelte

@@ -36,18 +36,22 @@
   let leaveHoverTimeout: ReturnType<typeof setTimeout> | null = null
   let itemStyles = $derived(
     clsx(
-      { 'text-white font-medium': !isFolderItem },
-      { 'text-white-40': isFolderItem && !active },
-      { 'bg-white-10': active },
-      { 'border border-transparent hover:border-white-5 group p-2': collapsedSidebar },
-      { 'w-full px-2 py-1.5': !collapsedSidebar },
+      { 'text-foreground-inverse font-medium': !isFolderItem },
+      { 'text-foreground-inverse-secondary': isFolderItem && !active },
       {
-        'bg-white-10 border-white-5 text-white': active
+        'border border-transparent hover:bg-background-selected-inverse group p-[7px] size-8':
+          collapsedSidebar
       },
-      { 'hover:bg-white-5 focus:bg-white-10': !active }
+      { 'w-full px-2 py-1.5 h-8': !collapsedSidebar },
+      {
+        'bg-background-selected-inverse text-white': active
+      },
+      { 'hover:bg-background-selected-inverse': !active }
     )
   )
-  let iconStyles = $derived(clsx({ 'group-hover:text-white': collapsedSidebar }))
+  let iconStyles = $derived(
+    clsx({ 'group-hover:text-white text-icon-inverse-bold!': collapsedSidebar })
+  )
   let wrapperStyles = $derived(
     clsx({
       'ml-4 border-l border-white-10 pl-2 pt-0.5 relative': isFolderItem
@@ -106,11 +110,11 @@
     onmouseleave={handleBlur}
     onclick={handleClick}
     title={label}
-    class="{itemStyles} text-base border border-transparent flex items-center justify-between hover:text-white focus:text-white rounded-md"
+    class="cursor-pointer {itemStyles} text-base border border-transparent flex items-center justify-between hover:text-white focus:text-white rounded-lg"
   >
-    <span class="flex items-center space-x-2">
+    <span class="flex items-center space-x-1.5">
       {#if resolvedIcon}
-        <Icon src={resolvedIcon} theme={iconTheme} class="{iconStyles} h-4 w-4 text-white-70" />
+        <Icon src={resolvedIcon} theme={iconTheme} class="{iconStyles} h-4 w-4 text-icon-inverse" />
       {/if}
       {#if !collapsedSidebar}
         <span class="whitespace-nowrap tracking-normal">{label}</span>
@@ -118,6 +122,7 @@
     </span>
     {#if collapsable && !collapsedSidebar}
       <button
+        class="cursor-pointer"
         onclick={(e) => {
           e.stopPropagation()
           open = !open

package/dist/MenuItemCollapsible.svelte

@@ -17,29 +17,29 @@
     clsx(
       { 'p-1': collapsed },
       { 'space-x-2 w-full p-[7px]': !collapsed },
-      { 'border-white-30 bg-white-10': active },
-      { 'border-transparent hover:bg-white-5': !active },
-      { 'font-semibold': bold }
+      { 'bg-selected-inverse': active },
+      { 'hover:bg-background-selected-inverse': !active },
+      { 'font-medium': bold }
     )
   )
 </script>
 
 <span
   {title}
-  class="{styles} text-white text-base flex items-center justify-between border rounded"
+  class="{styles} text-foreground-inverse text-base flex items-center justify-between rounded-lg h-8 font-medium"
 >
   <span class:space-x-2={!collapsed} class="flex items-center">
     {@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>
+          <div class="text-sm text-foreground-inverse-secondary">{subtitle}</div>
         {/if}
       </div>
     {/if}
   </span>
   {#if icon}
-    <Icon src={icon} class="h-4 w-4 text-white-40 mt-px" />
+    <Icon src={icon} class="h-4 w-4 text-icon-inverse" />
   {/if}
 </span>

package/dist/Notification.svelte

@@ -1,44 +1,79 @@
 <script lang="ts">
   import clsx from 'clsx'
-  import { Alert, 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
       case 'error':
         return Failure
       case 'warning':
-        return Alert
+        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 pl-3 rounded-xl', {
+      'py-1.5': children,
+      'py-2': !children,
+      'bg-background border border-border shadow-sm': type === 'neutral',
+      'bg-background-info': type === 'info',
+      'bg-background-success': type === 'success',
+      'bg-background-warning': type === 'warning',
+      'bg-background-critical': type === 'error',
+      'pr-3': description,
+      'min-h-9 rounded-[10px] pl-3 py-1.5 pr-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': description,
+      '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:items-start={description} class:items-center={!description} class="flex 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,72 @@
 <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 }
+      'overflow-clip relative flex items-center justify-center after:content-[""] after:absolute after:inset-0 after:pointer-events-none after:rounded-[inherit]',
+      { '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 after:shadow-avatar': !dark
+      },
+      { 'bg-background-inverse after:shadow-avatar-inverse': 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"
       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/ProgressBar.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import clsx from 'clsx'
+  import type { ProgressBarProps } from './types'
+
+  let {
+    percentage = 0,
+    current = 0,
+    total = 0,
+    allowOverage = true,
+    warningPercentage = 80
+  }: ProgressBarProps = $props()
+
+  let isOverage = $derived(current > total && allowOverage)
+  let overagePercentage = $derived(isOverage && total > 0 ? ((current - total) / current) * 100 : 0)
+  let usedPercentage = $derived(isOverage ? 100 - overagePercentage : percentage)
+  let isCritical = $derived(percentage >= 100 || (current > total && !allowOverage))
+  let isWarning = $derived(percentage >= warningPercentage && percentage < 100)
+
+  let barColor = $derived(
+    clsx({
+      'bg-background-critical-inverse': isCritical,
+      'bg-background-warning-inverse': isWarning || isOverage,
+      'bg-icon-inverse-bold': !isCritical && !isWarning && !isOverage
+    })
+  )
+
+  let barWidth = $derived(isOverage ? usedPercentage : Math.min(percentage, 100))
+</script>
+
+<div class="flex gap-0.5 w-full h-1">
+  {#if isOverage}
+    <div class="h-1 rounded-full bg-icon-inverse-bold" style="width: {barWidth}%"></div>
+    <div class="h-1 rounded-full bg-background-warning-inverse flex-1"></div>
+  {:else if percentage >= 100}
+    <div class="h-1 rounded-full {barColor} w-full"></div>
+  {:else}
+    {#if barWidth > 0}
+      <div class="h-1 rounded-full {barColor}" style="width: {barWidth}%"></div>
+    {/if}
+    <div class="h-1 rounded-full bg-background-selected-inverse flex-1"></div>
+  {/if}
+</div>

package/dist/ProgressBar.svelte.d.ts

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

package/dist/ProgressBarCircle.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { ProgressBarCircleProps } from './types'
+
+  let { progress, size, variant = 'default' }: ProgressBarCircleProps = $props()
+
+  let angle = $derived(360 * progress)
+  let filledColor = $derived(
+    variant === 'dark' ? 'var(--color-icon-inverse-bold)' : 'var(--color-icon-selected-default)'
+  )
+  let restColor = $derived(
+    variant === 'dark'
+      ? 'var(--color-background-selected-inverse-hover)'
+      : 'var(--color-background-default-tertiary)'
+  )
+  let background = $derived(
+    `conic-gradient(${filledColor} 0deg ${angle}deg, ${restColor} ${angle}deg 360deg)`
+  )
+  let cssVarStyles = $derived(`--background:${background}; --size: ${size}px; --ring: 1.5px;`)
+</script>
+
+<div id="progress-circle" style={cssVarStyles}></div>
+
+<style>
+  #progress-circle {
+    background: var(--background);
+    -webkit-mask: radial-gradient(
+      circle,
+      transparent 0,
+      transparent calc(50% - var(--ring)),
+      black calc(50% - var(--ring)),
+      black 100%
+    );
+    mask: radial-gradient(
+      circle,
+      transparent 0,
+      transparent calc(50% - var(--ring)),
+      black calc(50% - var(--ring)),
+      black 100%
+    );
+    border-radius: 50%;
+    width: var(--size);
+    height: var(--size);
+    transition: all 500ms ease-in;
+    will-change: transform;
+  }
+</style>

package/dist/ProgressBarCircle.svelte.d.ts

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

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-secondary),
+      var(--color-border-default-secondary) 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-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'
+    })
+  )
 </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

@@ -9,31 +9,33 @@
   let restIcons = $derived(icons.slice(maxItems, icons.length))
 </script>
 
+{#snippet separator()}
+  <div class="hidden sm:block h-px w-3 bg-border shrink-0"></div>
+{/snippet}
+
 <TooltipProvider>
   <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 rounded-md border 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>
+        {@render separator()}
       {/if}
     {/each}
     {#if restIcons.length}
-      <div class="hidden sm:block h-px w-3 border border-neutral-200 mx-px flex-shrink-0"></div>
+      {@render separator()}
       <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-sm 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>