@invopop/popui 0.1.14 → 0.1.16

package/dist/DrawerContextWorkspace.svelte

@@ -4,7 +4,7 @@
   import { Icon } from '@steeze-ui/svelte-icon'
   import { AddCircle, ExternalLink, Workspace } from '@invopop/ui-icons'
   import BaseCounter from './BaseCounter.svelte'
-  import EmptyStateIcon from './EmptyStateIcon.svelte'
+  import EmptyState from './EmptyState.svelte'
   import { slide } from 'svelte/transition'
   import { ChevronRight } from '@steeze-ui/heroicons'
 
@@ -44,15 +44,15 @@
         <span>Live</span>
       </div>
       {#if liveItems.length}
-        <BaseCounter content={liveItems.length} />
+        <BaseCounter value={liveItems.length} />
       {/if}
     </button>
     {#if liveOpen}
       <div transition:slide class="max-h-[475px] overflow-auto">
         {#if !liveItems.length}
           <div class="h-[182px] overflow-x-hidden">
-            <EmptyStateIcon
-              icon={Workspace}
+            <EmptyState
+              iconSource={Workspace}
               title="No workspaces here"
               description="Create a workspace to start"
             />
@@ -82,15 +82,15 @@
         <span>Sandbox</span>
       </div>
       {#if sandboxItems.length}
-        <BaseCounter content={sandboxItems.length} />
+        <BaseCounter value={sandboxItems.length} />
       {/if}
     </button>
     {#if sandboxOpen}
       <div transition:slide class="max-h-[475px] overflow-auto">
         {#if !sandboxItems.length}
           <div class="h-[182px] overflow-x-hidden">
-            <EmptyStateIcon
-              icon={Workspace}
+            <EmptyState
+              iconSource={Workspace}
               title="No workspaces here"
               description="Create a workspace to start"
             />

package/dist/DropdownSelect.svelte

@@ -44,14 +44,14 @@
     (!multiple && items.find((i) => i.selected)?.iconClass) || 'text-neutral-500'
   )
   let selectedLabel = $derived(
-    `${selectedItems[0]?.label || ''}${selectedItems.length > 1 ? ' and more...' : ''}` ||
+    `${selectedItems[0]?.label || ''}${selectedItems.length > 1 ? ' and more and more and more and more and more and more' : ''}` ||
       placeholder
   )
 
   let styles = $derived(
-    clsx({
-      'shadow-active border-workspace-accent hover:border-workspace-accent': isOpen,
-      'border-neutral-100': !isOpen
+    clsx('border backdrop-blur-sm backdrop-filter', {
+      'border-border-selected-bold shadow-active': isOpen,
+      'border-border hover:border-border-default-secondary-hover': !isOpen
     })
   )
 
@@ -75,22 +75,44 @@
   }
 </script>
 
-<BaseDropdown bind:isOpen placement="bottom-start" {fullWidth} bind:this={selectDropdown}>
+{#snippet label()}
+  <span
+    class="flex-1 text-base truncate {selectedItems.length
+      ? 'text-foreground'
+      : 'text-foreground-default-secondary'}"
+  >
+    {selectedLabel}
+  </span>
+{/snippet}
+
+<BaseDropdown
+  bind:isOpen
+  placement="bottom-start"
+  {fullWidth}
+  bind:this={selectDropdown}
+  class={fullWidth ? '' : widthClass}
+>
   {#snippet trigger()}
     <div
-      class="{styles} dropdown-select max-w-[420px] flex items-center border hover:border-neutral-300 rounded-md py-1.25 pl-2 gap-1 bg-white whitespace-nowrap"
+      class="{styles} dropdown-select flex items-center rounded-lg py-1.5 pl-2 pr-[28px] bg-background overflow-hidden w-full h-8"
     >
       {#if selectedColor}
-        <TagStatus dot status={selectedColor} />
-      {:else if selectedIcon}
-        <Icon src={selectedIcon} {iconTheme} class="{selectedIconColor} h-4 w-4 flex-shrink-0" />
-      {:else if resolvedIcon}
-        <Icon src={resolvedIcon} {iconTheme} class="h-4 w-4 text-neutral-500 flex-shrink-0" />
+        <div class="flex items-center gap-1 flex-1 min-w-0">
+          <TagStatus dot status={selectedColor} />
+          {@render label()}
+        </div>
+      {:else if selectedIcon || resolvedIcon}
+        <div class="flex items-center gap-1 flex-1 min-w-0">
+          {#if selectedIcon}
+            <Icon src={selectedIcon} {iconTheme} class="{selectedIconColor} size-4 flex-shrink-0" />
+          {:else if resolvedIcon}
+            <Icon src={resolvedIcon} {iconTheme} class="text-icon size-4 flex-shrink-0" />
+          {/if}
+          {@render label()}
+        </div>
+      {:else}
+        {@render label()}
       {/if}
-
-      <span class="w-full pr-8 text-neutral-800 placeholder-neutral-800 text-base truncate">
-        {selectedLabel}
-      </span>
     </div>
   {/snippet}
   <DrawerContext {widthClass} {multiple} {items} onclick={handleClick} onselect={handleSelected} />
@@ -98,7 +120,7 @@
 
 <style>
   .dropdown-select {
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMiIgeT0iMiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiByeD0iNCIgZmlsbD0iI0YzRjRGNiIvPgo8cGF0aCBkPSJNNi41IDguMjUwMDRMMTAgMTEuNzVMMTMuNSA4LjI1IiBzdHJva2U9IiMwMzA3MTIiIHN0cm9rZS13aWR0aD0iMS4xIi8+Cjwvc3ZnPg==');
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiByeD0iNCIgZmlsbD0icmdiYSg1LCA1LCAzNiwgMC4wNikiLz4KPHBhdGggZD0iTTQuNSA2LjVMOCAxMEwxMS41IDYuNSIgc3Ryb2tlPSIjMGIwYjEwIiBzdHJva2Utd2lkdGg9IjEuMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==');
     background-repeat: no-repeat;
     background-position: center right 8px;
   }

package/dist/EmptyState.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import IconEmpty from './svg/IconEmpty.svelte'
+  import CheckBadge from './svg/CheckBadge.svelte'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import type { EmptyStateProps } from './types'
+
+  let {
+    icon,
+    iconSource,
+    title = '',
+    description = '',
+    check = false,
+    children
+  }: EmptyStateProps = $props()
+</script>
+
+<div class="flex flex-col items-center justify-center">
+  {#if icon}
+    <div class="relative h-[120px] w-[352px] max-w-sm flex items-center justify-center">
+      {@render icon()}
+    </div>
+  {:else if iconSource}
+    <div class="relative h-[120px] w-[352px] max-w-sm">
+      <IconEmpty />
+      <div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2">
+        <Icon src={iconSource} class="h-12 w-12 text-foreground-accent" />
+        {#if check}
+          <CheckBadge />
+        {/if}
+      </div>
+    </div>
+  {/if}
+  <div class="flex flex-col items-center gap-0.5 text-center">
+    <h4 class="font-medium text-foreground text-base">{title}</h4>
+    <p class="text-foreground-default-secondary text-base">{description}</p>
+  </div>
+  {#if children}
+    <div class="mt-4">
+      {@render children()}
+    </div>
+  {/if}
+</div>

package/dist/EmptyState.svelte.d.ts

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

package/dist/EmptyStateIllustration.svelte.d.ts

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

package/dist/FeedEvents.svelte

@@ -1,28 +1,32 @@
 <script lang="ts">
+  import SeparatorHorizontal from './SeparatorHorizontal.svelte'
   import TagStatus from './TagStatus.svelte'
   import type { FeedEventsProps } from './types.js'
 
   let { events = [] }: FeedEventsProps = $props()
 </script>
 
-<div class="border border-neutral-100 bg-neutral-50 rounded">
+<div class="border border-border bg-background-default-secondary rounded">
   {#each events as event, i (i)}
-    <div class:border-t={i > 0} class="border-neutral-100 py-2 px-3">
+    {#if i > 0}
+      <SeparatorHorizontal />
+    {/if}
+    <div class="py-2 px-3">
       <div class="flex items-center justify-between">
         <div class="flex items-center space-x-2">
           <TagStatus status={event.status.type} label={event.status.label} />
           {#if event.code}
-            <p class="text-sm text-neutral-500 font-mono tracking-wide">
+            <p class="text-sm text-foreground-default-secondary font-mono">
               {event.code}
             </p>
           {/if}
         </div>
-        <p class="text-sm text-neutral-500 font-mono tracking-wide">
+        <p class="text-sm text-foreground-default-secondary font-mono">
           {event.date.toISOString()}
         </p>
       </div>
       {#if event.message}
-        <p class="text-neutral-800 text-sm pt-2 tracking-normal break-words">{event.message}</p>
+        <p class="text-foreground text-sm pt-2 break-words">{event.message}</p>
       {/if}
     </div>
   {/each}

package/dist/FeedIconEvent.svelte

@@ -7,6 +7,6 @@
 
 <div class="relative py-0.5 mt-2">
   {#if icon}
-    <Icon src={icon} theme={iconTheme} class="h-4 w-4 text-neutral-500" />
+    <Icon src={icon} theme={iconTheme} class="size-4 text-icon-default-bold" />
   {/if}
 </div>

package/dist/FeedIconStatus.svelte

@@ -24,7 +24,7 @@
 
 {#if iconStatus}
   <div title={status}>
-    <Icon src={iconStatus} class="h-4 w-4 shrink-0" />
+    <Icon src={iconStatus} class="h-4 w-4 shrink-0 text-icon" />
   </div>
 {:else}
   <div class="w-4 h-4 shrink-0 bg-neutral-200 rounded-full"></div>

package/dist/FeedItem.svelte

@@ -31,7 +31,7 @@
 
 <div id={`feed-item-${slug}`} class="relative text-left w-full min-w-[344px]">
   {#if hasNext && icon}
-    <span class="absolute bottom-[-20px] left-2 border-l border-neutral-100 w-px h-[58px]"></span>
+    <span class="absolute bottom-[-20px] left-2 border-l border-border w-px h-[58px]"></span>
   {/if}
   <div class="flex items-start justify-between space-x-2 py-3">
     <div class="relative">
@@ -39,17 +39,15 @@
         <FeedIconEvent {icon} />
       {/if}
     </div>
-    <div
-      class="flex-1 items-center justify-start pl-2.5 py-2 pr-2 rounded-lg border border-neutral-100"
-    >
+    <div class="flex-1 items-center justify-start pl-2.5 py-2 pr-2 rounded-lg">
       <div
-        class="text-base text-neutral-800 whitespace-nowrap tracking-normal font-medium flex items-center gap-1 {viewable
+        class="text-base text-foreground whitespace-nowrap tracking-normal font-medium flex items-center gap-1 {viewable
           ? 'max-w-[260px]'
           : 'max-w-[320px]'}"
       >
         {#if user}
           <div class="mr-0.5">
-            <ProfileAvatar small {...user} />
+            <ProfileAvatar variant="sm" {...user} />
           </div>
         {/if}
         <p class="truncate" {title}>{title}</p>
@@ -59,7 +57,9 @@
         {/if}
       </div>
       <p
-        class="mt-0.5 flex items-center space-x-2 text-sm text-neutral-500 whitespace-nowrap tabular-nums slashed-zero lining-nums tracking-normal"
+        class="mt-0.5 flex items-center space-x-2 text-sm text-foreground-default-secondary whitespace-nowrap tabular-nums slashed-zero lining-nums tracking-normal {user
+          ? 'ml-[26px]'
+          : ''}"
       >
         {#if date}
           <span>
@@ -78,7 +78,7 @@
   {#if viewable}
     <span class="absolute top-5 right-2">
       <BaseButton
-        small
+        size="sm"
         variant="secondary"
         onclick={() => {
           onView?.(slug)

package/dist/FeedItemDetail.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import clsx from 'clsx'
   import type { FeedItemDetailProps } from './types.ts'
   import FeedIconStatus from './FeedIconStatus.svelte'
   import UuidCopy from './UuidCopy.svelte'
@@ -20,17 +21,23 @@
   }: FeedItemDetailProps = $props()
 
   let open = $state(false)
+  let styles = $derived(
+    clsx('pl-3 flex items-center space-x-1.5', {
+      'pr-3 py-2.5': !cancelable,
+      'py-2 pr-2': cancelable
+    })
+  )
 </script>
 
-<div class="w-full rounded-lg border border-neutral-100">
-  <div class="px-3 py-2.5 flex items-center space-x-1.5">
+<div class="w-full rounded-lg border border-border">
+  <div class={styles}>
     {#if status}
       <FeedIconStatus {status} />
     {/if}
-    <span class="flex-1 truncate font-medium text-neutral-800 text-base">{title}</span>
+    <span class="flex-1 truncate font-medium text-foreground text-base">{title}</span>
     {#if cancelable}
       <BaseButton
-        small
+        size="sm"
         icon={Close}
         variant="secondary"
         onclick={() => {
@@ -43,14 +50,16 @@
   </div>
   <SeparatorHorizontal />
   <div class="pl-3 py-1 pr-2.5 flex items-center space-x-0.5">
-    <span class="text-sm text-neutral-500 whitespace-nowrap">{idLabel}</span>
+    <span class="text-sm text-foreground-default-secondary whitespace-nowrap">{idLabel}</span>
     {#if uuid}
       <UuidCopy {uuid} full small {onCopied} />
     {/if}
   </div>
   {#if events.length}
     <SeparatorHorizontal />
-    <div class="px-3 py-2 text-sm text-neutral-500 flex items-center justify-between">
+    <div
+      class="px-3 py-2 text-sm text-foreground-default-secondary flex items-center justify-between"
+    >
       <span>Logs</span>
       <button
         class="cursor-pointer"

package/dist/GlobalSearch.svelte

@@ -10,10 +10,14 @@
 
   let { collapsed = false, onOpen }: GlobalSearchProps = $props()
 
-  let styles = $derived(
-    clsx({
-      'space-x-1 w-full': !collapsed
-    })
+  const styles = $derived(
+    clsx(
+      'cursor-pointer flex items-center border border-border-inverse-default rounded-lg backdrop-blur-[20px]',
+      {
+        'gap-1 px-2 py-1.5 w-full hover:bg-background-selected-inverse': !collapsed,
+        'p-1.5': collapsed
+      }
+    )
   )
 
   function onKeyDown(event: KeyboardEvent) {
@@ -38,15 +42,12 @@
   })
 </script>
 
-<button
-  class="cursor-pointer {styles} flex items-center border pl-1.5 py-1.5 pr-2 border-white-10 bg-neutral-800/10 rounded-md"
-  onclick={() => onOpen?.()}
->
-  <Icon src={Search} class="w-4 h-4 text-white-70" />
+<button class={styles} onclick={() => onOpen?.()}>
+  <Icon src={Search} class="size-4 text-foreground-inverse shrink-0" />
   {#if !collapsed}
-    <span class="text-white-40 text-sm flex-1 text-left tracking-normal">Search</span>
-    <ShortcutWrapper>
-      <Icon src={Slash} class="w-3 h-3 text-white-70" />
+    <span class="text-foreground-inverse-secondary text-base flex-1 text-left">Search</span>
+    <ShortcutWrapper theme="navigation">
+      <Icon src={Slash} class="size-3" />
     </ShortcutWrapper>
   {/if}
 </button>

package/dist/InputCheckbox.svelte

@@ -20,16 +20,13 @@
   }
 </script>
 
-<label
-  for={id}
-  class="inline-flex items-center space-x-2 cursor-pointer group text-base text-neutral-800"
->
+<label for={id} class="inline-flex items-center gap-2 cursor-pointer text-base text-foreground">
   <input
     {id}
     type="checkbox"
     {checked}
     {indeterminate}
-    class="form-checkbox w-4 h-4 text-workspace-accent focus:text-workspace-accent rounded border border-neutral-200 hover:border-neutral-300 group-hover:border-neutral-300 focus:ring-0 focus:ring-offset-0"
+    class="form-checkbox size-4 text-background-accent rounded border border-border-default-secondary hover:border-border-default-primary focus:ring-0 focus:ring-offset-0"
     {...rest}
     onchange={updateInput}
     {onclick}

package/dist/InputError.svelte

@@ -1,17 +1,12 @@
 <script lang="ts">
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { Alert } from '@invopop/ui-icons'
   import type { InputErrorProps } from './types'
 
   let { errorText = '' }: InputErrorProps = $props()
 </script>
 
-<p class="mt-2 text-sm text-danger-500 flex items-center space-x-1">
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5ZM7.99999 9.35C7.66862 9.35 7.39999 9.08137 7.39999 8.75V4.75C7.39999 4.41863 7.66862 4.15 7.99999 4.15C8.33137 4.15 8.59999 4.41863 8.59999 4.75L8.59999 8.75C8.59999 9.08137 8.33136 9.35 7.99999 9.35ZM8.75 11C8.75 11.4142 8.41421 11.75 8 11.75C7.58579 11.75 7.25 11.4142 7.25 11C7.25 10.5858 7.58579 10.25 8 10.25C8.41421 10.25 8.75 10.5858 8.75 11Z"
-      fill="currentColor"
-    />
-  </svg>
+<p class="flex items-center gap-1 text-xs text-foreground-critical">
+  <Icon src={Alert} class="size-3 shrink-0" />
   <span>{errorText}</span>
 </p>

package/dist/InputLabel.svelte

@@ -4,4 +4,6 @@
   let { id = '', label = '', ...rest }: InputLabelProps = $props()
 </script>
 
-<label for={id} class="text-sm font-medium text-neutral-500 mb-2" {...rest}>{label}</label>
+<label for={id} class="text-sm font-medium text-foreground-default-secondary" {...rest}>
+  {label}
+</label>

package/dist/InputRadio.svelte

@@ -3,8 +3,10 @@
 
   let {
     checked = false,
+    disabled = false,
     id = Math.random().toString(36).slice(2, 7),
     name = '',
+    label,
     onchange,
     ...rest
   }: InputRadioProps = $props()
@@ -19,18 +21,31 @@
 
   function updateInput(event: Event) {
     const target = event.target as HTMLInputElement
-
     onchange?.(target.checked)
   }
 </script>
 
-<input
-  bind:this={el}
-  type="radio"
-  {id}
-  {name}
-  {checked}
-  class="form-radio h-5 w-5 border-neutral-200 text-workspace-accent focus:ring-0 focus:ring-offset-0 cursor-pointer"
-  {...rest}
-  onchange={updateInput}
-/>
+{#snippet radioInput()}
+  <input
+    bind:this={el}
+    type="radio"
+    {id}
+    {name}
+    {checked}
+    {disabled}
+    class="appearance-none size-4 rounded-full border checked:border-0 checked:bg-background-accent checked:border-0 checked:bg-background-accent cursor-pointer focus:outline-none focus:ring-0 shrink-0 disabled:cursor-not-allowed border-border-default-secondary disabled:checked:bg-border-default-secondary disabled:checked:border"
+    {...rest}
+    onchange={updateInput}
+  />
+{/snippet}
+
+{#if label}
+  <label class="flex items-center gap-2 cursor-pointer">
+    {@render radioInput()}
+    <span class="text-base text-foreground whitespace-nowrap">
+      {label}
+    </span>
+  </label>
+{:else}
+  {@render radioInput()}
+{/if}

package/dist/InputSearch.svelte

@@ -2,6 +2,7 @@
   import { onMount } from 'svelte'
   import { Icon } from '@steeze-ui/svelte-icon'
   import { Search } from '@invopop/ui-icons'
+  import ShortcutWrapper from './ShortcutWrapper.svelte'
   import type { InputSearchProps } from './types.js'
 
   const debounce = (target: HTMLInputElement) => {
@@ -66,8 +67,8 @@
     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 bg-white"
-    style:padding-right={`${shortcutKeys.length * 15 + 12}px`}
+    class="flex items-center gap-1 h-8 w-full px-2 py-1.5 pl-7 rounded-lg border bg-background-default-default text-base text-foreground-default-default placeholder:text-foreground-default-tertiary outline-none caret-foreground-accent focus:ring-0 border-border-default-secondary hover:border-border-default-secondary-hover focus:border-border-selected-bold focus:shadow-active"
+    style:padding-right={shortcut ? `${shortcutKeys.length * 20 + 12}px` : undefined}
     {placeholder}
     {...rest}
     oninput={handleInput}
@@ -75,15 +76,14 @@
     {onblur}
     {onclick}
   />
-  <Icon src={icon} class="absolute text-neutral-500 w-4 h-4 left-2" />
+  <Icon src={icon} class="absolute left-2 size-4 text-foreground-default-tertiary" />
 
   {#if shortcut}
-    <div class="absolute top-1 right-0 flex py-1.5 pr-1.5 space-x-1">
+    <div class="absolute right-2 flex items-center gap-1">
       {#each shortcutKeys as key}
-        <kbd
-          class="w-4 h-4 flex justify-center items-center rounded-md border border-neutral-200 bg-neutral-100 font-sans text-sm text-neutral-500 font-semibold"
-          >{key}</kbd
-        >
+        <ShortcutWrapper>
+          <span class="text-xs font-semibold">{key}</span>
+        </ShortcutWrapper>
       {/each}
     </div>
   {/if}

package/dist/InputSelect.svelte

@@ -29,43 +29,44 @@
 
   function handleChange(event: Event) {
     const target = (event as PointerEvent).target as HTMLSelectElement
-
     onchange?.(target.value)
   }
 </script>
 
-{#if label}
-  <InputLabel {id} {label} />
-{/if}
-<div class="relative">
-  <select
-    {id}
-    {name}
-    bind:value
-    {disabled}
-    class:pl-7={icon}
-    class:pl-2={!icon}
-    class="py-1.5 border border-neutral-200 hover:border-neutral-300 w-full rounded-md text-neutral-800 text-base pr-9 outline-none tracking-tight ui-select focus:border-workspace-accent focus:shadow-active"
-    {...rest}
-    onchange={handleChange}
-  >
-    <option value="" disabled={disablePlaceholder}>{placeholder}</option>
-    {#each options as option}
-      <option value={option.value}>{option.label}</option>
-    {/each}
-  </select>
-  {#if resolvedIcon}
-    <Icon
-      src={resolvedIcon}
-      theme={iconTheme}
-      class="h-4 w-4 absolute top-2 left-2 text-neutral-500"
-    />
+<div class="flex flex-col gap-2">
+  {#if label}
+    <InputLabel {id} {label} />
   {/if}
-</div>
+  <div class="relative">
+    <select
+      {id}
+      {name}
+      bind:value
+      {disabled}
+      class="h-8 w-full px-2 py-1.5 rounded-lg border bg-background text-base outline-none focus:ring-0 border-border hover:border-border-default-secondary-hover focus:border-border-selected-bold focus:shadow-active text-foreground ui-select"
+      class:pl-7={resolvedIcon}
+      class:text-foreground-default-secondary={!value}
+      {...rest}
+      onchange={handleChange}
+    >
+      <option value="" disabled={disablePlaceholder}>{placeholder}</option>
+      {#each options as option}
+        <option value={option.value}>{option.label}</option>
+      {/each}
+    </select>
+    {#if resolvedIcon}
+      <Icon
+        src={resolvedIcon}
+        theme={iconTheme}
+        class="absolute left-2 top-2 size-4 text-icon pointer-events-none"
+      />
+    {/if}
+  </div>
 
-{#if errorText}
-  <InputError {errorText} />
-{/if}
+  {#if errorText}
+    <InputError {errorText} />
+  {/if}
+</div>
 
 <style>
   .ui-select {