@stubber/form-fields 1.0.5 → 1.0.8

package/dist/fields/components/Arraybuilder.svelte

@@ -75,7 +75,7 @@
 </script>
 
 {#if new_entry}
-  <div class="flex flex-col w-full text-surface-900">
+  <div class="flex flex-col w-full text-surface-900 my-2">
     <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
       {label}
     </Label>

package/dist/fields/components/Checkbox.svelte

@@ -76,11 +76,7 @@
 
 {#if $internal}
   <div class="flex flex-col w-full {!isValid ? `text-danger-500` : `text-surface-900`}">
-    <div class="flex space-x-3 relative mt-2 items-center">
-      <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
-        {label}
-      </Label>
-
+    <div class="flex space-x-3 relative my-1 items-center">
       <Checkbox
         on:keydown={(e) => {
           if (e.key === "Enter") {
@@ -93,6 +89,10 @@
         name={state_key}
         bind:checked={$internal.checked}
       />
+
+      <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
+        {label}
+      </Label>
     </div>
     {#if validationMessage}
       <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>

package/dist/fields/components/Contactselector.svelte

@@ -6,6 +6,7 @@
   import { writable } from "svelte/store";
   import { syncStoreToStore } from "../../utils/syncing";
 
+  import { scale } from "svelte/transition";
   import { Label } from "@stubber/ui/label";
   import { Button } from "@stubber/ui/button";
 
@@ -276,10 +277,10 @@
         placeholder={label}
         class="bg-gradient-to-b from-[#2727271F] to-[#27272719] shadow-select
                flex h-7 w-full items-center justify-between rounded px-3 py-2
-               text-sm
+               text-sm focus:outline-none
                [&>span]:line-clamp-1 aria-[invalid]:border-destructive
                placeholder:text-black
-               {!isValid ? 'ring-danger-500' : 'ring-surface-300 focus:ring-primary-400'}"
+               {!isValid ? 'ring-danger-500' : 'ring-surface-300 focus:ring-transparent'}"
         bind:value={filter_text}
         autocomplete="off"
       />
@@ -298,50 +299,52 @@
       {/if}
     </div>
     {#if is_focused}
-      <div use:teleport class="z-10 w-full absolute inset-y-[70px]">
-        {#if items?.length > 0}
-          <ul
-            class="bg-popover text-popover-foreground relative min-w-[8rem]
-                   overflow-hidden rounded-md border shadow-md outline-none
-                   max-h-[200px] overflow-y-auto w-full p-1"
-          >
-            {#each items as item, index (item?._value?._key)}
-              <li
-                class="group {$internal.focused_index === index
-                  ? 'bg-primary-400'
-                  : ''} hover:bg-primary-400 focus-within:bg-primary-400 text-field cursor-default"
-              >
-                <button
-                  on:click|preventDefault={() => setSelected(item)}
-                  class="selectitem relative flex w-full cursor-default
-                           select-none items-center rounded-sm py-1 pl-8 pr-2
-                           text-sm outline-none hover:bg-accent
-                           hover:text-accent-foreground
-                           data-[highlighted]:bg-accent
-                           data-[highlighted]:text-accent-foreground
-                           data-[disabled]:pointer-events-none
-                           data-[disabled]:opacity-50"
-                >
-                  {item._label}
-                  {#if item.is_personal}
-                    <div class="mx-2 bg-surface-300 rounded-full text-xs p-0.5 px-2 text-white">
-                      Import from personal
-                    </div>
-                  {/if}
-                  {#if item?._value?._key == $internal?.selected_item?._value?._key}
-                    <i class="absolute left-2 h-3.5 w-3.5 fa-regular fa-check" />
-                  {/if}
-                </button>
-              </li>
-            {/each}
-          </ul>
-        {:else}
-          <div
-            class="h-[100px] flex items-center justify-center w-full bg-white shadow-lg rounded-md ring-1 ring-surface-300"
-          >
-            <span class="text-paragraph text-surface-400">Start typing to search...</span>
-          </div>
-        {/if}
+      <div use:teleport class="z-10 w-full inset-y-[70px] mt-1">
+        <div
+          transition:scale={{
+            start: 0.95,
+            opacity: 0,
+            duration: 50,
+          }}
+          class="bg-popover text-popover-foreground relative min-w-[8rem]
+             overflow-hidden rounded-md border shadow-md outline-none
+             max-h-[200px] overflow-y-auto w-full p-1"
+        >
+          {#if items?.length > 0}
+            <ul>
+              {#each items as item, index (item?._value?._key)}
+                <li class="group {$internal.focused_index === index ? 'bg-primary-400' : ''}">
+                  <button
+                    type="button"
+                    on:click|preventDefault={() => setSelected(item)}
+                    class="selectitem relative flex w-full cursor-default
+                       select-none items-center rounded-sm py-1 pl-8 pr-2
+                       text-sm outline-none hover:bg-accent
+                       hover:text-accent-foreground
+                       data-[highlighted]:bg-accent
+                       data-[highlighted]:text-accent-foreground
+                       data-[disabled]:pointer-events-none
+                       data-[disabled]:opacity-50"
+                  >
+                    {item._label}
+                    {#if item.is_personal}
+                      <div class="mx-2 bg-surface-300 rounded-full text-xs p-0.5 px-2 text-white">
+                        Import from personal
+                      </div>
+                    {/if}
+                    {#if item?._value?._key == $internal?.selected_item?._value?._key}
+                      <i class="absolute left-2 h-3.5 w-3.5 fa-regular fa-check" />
+                    {/if}
+                  </button>
+                </li>
+              {/each}
+            </ul>
+          {:else}
+            <div class="flex items-center justify-center py-4">
+              <span class="text-sm text-surface-400">Start typing to search...</span>
+            </div>
+          {/if}
+        </div>
       </div>
     {/if}
     <div class="mt-1 ml-auto">

package/dist/fields/components/Currency.svelte

@@ -179,7 +179,7 @@
     }}
     class="flex flex-col w-full text-surface-900"
   >
-    <Label for="input_{state_key}" class={hide_label ? "hidden" : ""}>
+    <Label for="input_{state_key}" class="block py-2{hide_label ? 'hidden' : ''}">
       {label}
     </Label>
     <div

package/dist/fields/components/Dataindication.svelte

@@ -1,6 +1,8 @@
 <script>
   import _ from "lodash-es";
 
+  import { Label } from "@stubber/ui/label";
+
   export let field;
 
   $: state_key = $field.state?.state_key;
@@ -12,13 +14,13 @@
   $: value = !value_is_string ? JSON.stringify($field.data?.base, null, 2) : $field.data?.base;
 </script>
 
-<div class="flex flex-col w-full text-surface-900">
-  <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+<div class="flex flex-col w-full text-surface-900 my-2">
+  <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
     {label}
-  </label>
+  </Label>
   <div class="relative mt-2 rounded-md">
     <div
-      class="block bg-surface-50 w-full text-field rounded-md border-0 py-2 pl-3 text-surface-900 ring-1 ring-inset ring-surface-100 focus:ring-primary-400 focus:outline-none placeholder:text-surface-400 focus:ring-2 focus:ring-inset"
+      class="bg-gradient-to-b from-[#2727271F] to-[#27272719] shadow-select flex items-center h-7 w-full rounded px-3 py-2 text-sm focus:outline-none placeholder:text-black"
     >
       {#if value_is_string}
         {value}
@@ -27,9 +29,10 @@
       {/if}
     </div>
   </div>
+
   {#if validationMessage}
-    <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+    <Label class=" {!isValid ? `text-danger-500` : `text-success-500`}">
       {validationMessage}
-    </p>
+    </Label>
   {/if}
 </div>

package/dist/fields/components/Date.svelte

@@ -5,6 +5,8 @@
   import { onMount } from "svelte";
   import { writable } from "svelte/store";
 
+  import { Label } from "@stubber/ui/label";
+
   export let field;
 
   const internal = writable();
@@ -64,10 +66,10 @@
 </script>
 
 {#if $internal}
-  <div class="flex flex-col w-full text-surface-900">
-    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+  <div class="flex flex-col w-full text-surface-900 my-2">
+    <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
       {label}
-    </label>
+    </Label>
     <div class="relative mt-2 rounded-md">
       <input
         on:keydown={(e) => {
@@ -78,17 +80,17 @@
         type="date"
         id="input_{state_key}"
         placeholder={label}
-        class="block w-full rounded-md border-0 py-2 pl-3 pr-2 text-surface-900 ring-1 ring-inset {!isValid
-          ? 'ring-danger-500'
-          : 'ring-surface-300 focus:ring-primary-400'} focus:outline-none placeholder:text-surface-400 focus:ring-2 focus:ring-inset"
+        class="bg-gradient-to-b from-[#2727271F] to-[#27272719] shadow-select block h-7 w-full rounded px-3 py-2 text-sm focus:outline-none
+         placeholder:text-black
+         {!isValid ? 'ring-danger-500' : 'ring-surface-300 focus:ring-transparent'}"
         name={state_key}
         bind:value={$internal.raw}
       />
     </div>
     {#if validationMessage}
-      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+      <Label class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
         {validationMessage}
-      </p>
+      </Label>
     {/if}
   </div>
 {/if}

package/dist/fields/components/Datetime.svelte

@@ -5,6 +5,8 @@
   import { onMount } from "svelte";
   import { writable } from "svelte/store";
 
+  import { Label } from "@stubber/ui/label";
+
   export let field;
 
   const internal = writable();
@@ -64,10 +66,10 @@
 </script>
 
 {#if $internal}
-  <div class="flex flex-col w-full text-surface-900">
-    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+  <div class="flex flex-col w-full text-surface-900 my-2">
+    <Label for="input_{state_key}" class="block  {hide_label ? 'hidden' : ''}">
       {label}
-    </label>
+    </Label>
     <div class="relative mt-2 rounded-md">
       <input
         on:keydown={(e) => {
@@ -78,17 +80,17 @@
         type="datetime-local"
         id="input_{state_key}"
         placeholder={label}
-        class="block w-full text-field rounded-md border-0 py-2 pl-3 pr-2 text-surface-900 ring-1 ring-inset {!isValid
-          ? 'ring-danger-500'
-          : 'ring-surface-300 focus:ring-primary-400'} focus:outline-none placeholder:text-surface-400 focus:ring-2 focus:ring-inset"
+        class="bg-gradient-to-b from-[#2727271F] to-[#27272719] shadow-select block h-7 w-full rounded px-3 py-2 text-sm focus:outline-none
+         placeholder:text-black
+         {!isValid ? 'ring-danger-500' : 'ring-surface-300 focus:ring-transparent'}"
         name={state_key}
         bind:value={$internal.raw}
       />
     </div>
     {#if validationMessage}
-      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+      <Label class={!isValid ? `text-danger-500` : `text-success-500`}>
         {validationMessage}
-      </p>
+      </Label>
     {/if}
   </div>
 {/if}

package/dist/fields/components/Email.svelte

@@ -5,6 +5,9 @@
   import { onMount } from "svelte";
   import { writable } from "svelte/store";
 
+  import { Label } from "@stubber/ui/label";
+  import { Input } from "@stubber/ui/input";
+
   export let field;
 
   const internal = writable();
@@ -94,12 +97,12 @@
 </script>
 
 {#if $internal}
-  <div class="flex flex-col w-full text-surface-900">
-    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+  <div class="flex flex-col w-full text-surface-900 my-2">
+    <Label for="input_{state_key}" class="block py-2 {hide_label ? 'hidden' : ''}">
       {label}
-    </label>
+    </Label>
     <div class="relative rounded-md">
-      <input
+      <Input
         on:keydown={(e) => {
           if (e.key === "Enter") {
             e.preventDefault();
@@ -108,7 +111,7 @@
         type="text"
         id="input_{state_key}"
         placeholder={label}
-        class="block w-full text-field rounded-md border-0 py-2 pl-3 text-surface-900 ring-1 ring-inset {!isValid
+        class="block w-full  {!isValid
           ? 'ring-danger-500'
           : 'ring-surface-300 focus:ring-primary-400'} focus:outline-none placeholder:text-surface-400 focus:ring-2 focus:ring-inset"
         name={state_key}
@@ -116,9 +119,9 @@
       />
     </div>
     {#if validationMessage}
-      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+      <Label class=" {!isValid ? `text-danger-500` : `text-success-500`}">
         {validationMessage}
-      </p>
+      </Label>
     {/if}
   </div>
 {/if}

package/dist/fields/components/Fieldbuilder.svelte

@@ -213,7 +213,7 @@
   });
 </script>
 
-<div class="flex flex-col w-full text-surface-900">
+<div class="flex flex-col w-full text-surface-900 my-2">
   <Label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
     {label}
   </Label>

package/dist/fields/components/Fieldsbuilder.svelte

@@ -109,10 +109,10 @@
   });
 </script>
 
-<div class="flex flex-col w-full text-surface-900">
-  <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+<div class="flex flex-col w-full text-surface-900 my-2">
+  <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
     {label}
-  </label>
+  </Label>
   {#if initial_form}
     <Form bind:form={settings_form} {initial_form} {dependencies} />
   {/if}

package/dist/fields/components/File.svelte

@@ -166,10 +166,7 @@
 </script>
 
 {#if $internal}
-  <Label
-    for="input_{state_key}"
-    class="block text-label text-surface-900 {hide_label ? 'hidden' : ''}"
-  >
+  <Label for="input_{state_key}" class="block py-2 text-surface-900 {hide_label ? 'hidden' : ''}">
     {label}
   </Label>
   <div class="w-full flex flex-col {!isValid ? 'border-b border-warning-500' : ''}">

package/dist/fields/components/Jsoneditor.svelte

@@ -78,10 +78,10 @@
 </script>
 
 {#if $internal && $internal}
-  <div class="flex flex-col w-full text-surface-900 jse-theme-dark">
-    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+  <div class="flex flex-col w-full text-surface-900 my-2 jse-theme-dark">
+    <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
       {label}
-    </label>
+    </Label>
     <JSONEditor bind:content={$internal.content} {readOnly} bind:mode={$internal.mode} />
     {#if validationMessage}
       <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
@@ -127,11 +127,6 @@
     border-radius: 10px !important;
   }
 
-  :global(.jse-contents) {
-    background-color: #efeff0 !important;
-    border-radius: 0px !important;
-  }
-
   :global(.jse-navigation-bar) {
     border-radius: 0px !important;
   }

package/dist/fields/components/Map.svelte

@@ -127,7 +127,7 @@
 </script>
 
 {#if $internal}
-  <div class="flex flex-col w-full text-surface-900">
+  <div class="flex flex-col w-full text-surface-900 my-2">
     <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
       {label}
     </label>

package/dist/fields/components/Note.svelte

@@ -66,7 +66,7 @@
 </script>
 
 {#if $internal}
-  <div class="flex flex-col w-full text-surface-900">
+  <div class="flex flex-col w-full text-surface-900 my-2">
     <Label for="input_{state_key}" class=" {hide_label ? 'hidden' : ''}">
       {label}
     </Label>

package/dist/fields/components/Number.svelte

@@ -6,6 +6,7 @@
   import { writable } from "svelte/store";
 
   import { Label } from "@stubber/ui/label";
+  import { Input } from "@stubber/ui/input";
 
   export let field;
 
@@ -87,12 +88,12 @@
 </script>
 
 {#if $internal}
-  <div class="flex flex-col w-full text-surface-900">
-    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+  <div class="flex flex-col w-full text-surface-900 my-2">
+    <Label for="input_{state_key}" class="block py-2{hide_label ? 'hidden' : ''}">
       {label}
-    </label>
+    </Label>
     <div class="relative rounded-md">
-      <input
+      <Input
         on:keydown={(e) => {
           if (e.key === "Enter") {
             e.preventDefault();
@@ -101,9 +102,9 @@
         type="number"
         id="input_{state_key}"
         placeholder={label}
-        class="block w-full text-field rounded-md border-0 py-2 pl-3 text-surface-900 ring-1 ring-inset {!isValid
+        class="block w-full {!isValid
           ? 'ring-danger-500'
-          : 'ring-surface-300 focus:ring-primary-400'} focus:outline-none placeholder:text-surface-400 focus:ring-2 focus:ring-inset"
+          : 'ring-surface-300 focus:ring-primary-400'} "
         name={state_key}
         min={min_setting}
         max={max_setting}

package/dist/fields/components/Objectbuilder.svelte

@@ -6,6 +6,8 @@
   import { onMount } from "svelte";
   import { deepEqual } from "fast-equals";
 
+  import { Label } from "@stubber/ui/label";
+
   export let form;
   export let field;
 
@@ -137,16 +139,16 @@
   });
 </script>
 
-<div class="flex flex-col w-full text-surface-900">
-  <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+<div class="flex flex-col w-full text-surface-900 my-2">
+  <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
     {label}
-  </label>
+  </Label>
   {#if initial_form}
     <Form bind:form={settings_form} {initial_form} {dependencies} />
   {/if}
   {#if validationMessage}
-    <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+    <Label class=" {!isValid ? `text-danger-500` : `text-success-500`}">
       {validationMessage}
-    </p>
+    </Label>
   {/if}
 </div>

package/dist/fields/components/Qrcodescanner.svelte

@@ -8,6 +8,8 @@
   import { Html5Qrcode } from "html5-qrcode";
   import { Button } from "@stubber/ui/button";
 
+  import { Label } from "@stubber/ui/label";
+
   export let field;
 
   const internal = writable();
@@ -162,9 +164,9 @@
   {/if}
 
   <div class="flex flex-col w-full text-surface-900">
-    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+    <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
       {label}
-    </label>
+    </Label>
     <div class="relative mt-2 rounded-md">
       <div class="flex items-center space-x-3">
         {#if $internal.raw}

package/dist/fields/components/Radio.svelte

@@ -85,15 +85,15 @@
 </script>
 
 {#if $internal}
-  <div class="flex flex-col w-full text-surface-900">
-    <Label for="input_{state_key}" class=" {hide_label ? 'hidden' : ''}">
+  <div class="flex flex-col w-full text-surface-900 my-2">
+    <Label for="input_{state_key}" class=" block py-2 {hide_label ? 'hidden' : ''}">
       {label}
     </Label>
     {#if items?.length}
       <fieldset
         class="flex flex-col border {!isValid
           ? 'border-warning-500'
-          : 'border-surface-300'} rounded-md px-2 py-1"
+          : 'border-surface-100'} rounded-md px-2 py-1"
         id="input_{state_key}"
       >
         {#each items as item}

package/dist/fields/components/Screenrecorder.svelte

@@ -6,6 +6,8 @@
   import { writable } from "svelte/store";
   import { syncStoreToStore } from "../../utils/syncing";
 
+  import { Label } from "@stubber/ui/label";
+
   export let form;
   export let field;
 
@@ -210,9 +212,9 @@
 
 {#if $internal}
   <div class="flex flex-col w-full text-surface-900">
-    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+    <Label for="input_{state_key}" class="block py-2 {hide_label ? 'hidden' : ''}">
       {label}
-    </label>
+    </Label>
     <div>
       <Button variant={isRecording ? "destructive" : "default"} on:click={toggleRecording}>
         {#if isRecording}

package/dist/fields/components/Screenshot.svelte

@@ -6,6 +6,8 @@
   import { writable } from "svelte/store";
   import { syncStoreToStore } from "../../utils/syncing";
 
+  import { Label } from "@stubber/ui/label";
+
   export let form;
   export let field;
 
@@ -212,9 +214,9 @@
 
 {#if $internal}
   <div class="flex flex-col w-full text-surface-900">
-    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+    <Label for="input_{state_key}" class="block py-2 {hide_label ? 'hidden' : ''}">
       {label}
-    </label>
+    </Label>
     <div>
       <Button variant={isRecording ? "destructive" : "default"} on:click={toggleRecording}>
         {#if isRecording}

package/dist/fields/components/Scrollandreaddisplay.svelte

@@ -82,11 +82,11 @@
 </script>
 
 {#if $internal}
-  <div class="flex flex-col w-full text-surface-900">
+  <div class="flex flex-col w-full text-surface-900 my-2">
     <!-- div with inner shadow -->
     <div
       bind:this={outer}
-      class="border max-h-[300px] overflow-y-scroll shadow-inner"
+      class="border max-h-[300px] overflow-y-scroll shadow-inner rounded-md"
       on:scroll={handleScroll}
     >
       <div class="p-6 px-2">

package/dist/fields/components/Select.svelte

@@ -7,6 +7,7 @@
   import * as utils from "../../utils/index.js";
 
   import { Label } from "@stubber/ui/label";
+  import { scale } from "svelte/transition";
 
   export let field;
 
@@ -150,11 +151,11 @@
         filter_text = $field?.data?.base_label ?? "";
       }
     }}
-    class="relative flex flex-col w-full text-surface-900"
+    class="relative flex flex-col w-full text-surface-900 my-2"
   >
-    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+    <Label for="input_{state_key}" class="block py-2{hide_label ? 'hidden' : ''}">
       {label}
-    </label>
+    </Label>
     <div class="relative flex rounded-md">
       <input
         on:keydown={(e) => {
@@ -187,10 +188,10 @@
         placeholder={label}
         class="bg-gradient-to-b from-[#2727271F] to-[#27272719] shadow-select
                flex h-7 w-full items-center justify-between rounded px-3 py-2
-               text-sm
+               text-sm focus:outline-none
                [&>span]:line-clamp-1 aria-[invalid]:border-destructive
                placeholder:text-black
-               {!isValid ? 'ring-danger-500' : 'ring-surface-300 focus:ring-primary-400'}"
+               {!isValid ? 'ring-danger-500' : 'ring-surface-300 focus:ring-transparent'}"
         name={state_key}
         bind:value={filter_text}
         autocomplete="off"
@@ -200,34 +201,49 @@
       </div>
     </div>
     {#if is_focused}
-      <div use:teleport class="z-10 w-full inset-y-[70px]">
-        <ul
+      <div use:teleport class="z-10 w-full inset-y-[70px] mt-1">
+        <div
+          transition:scale={{
+            start: 0.95,
+            opacity: 0,
+            duration: 50,
+          }}
           class="bg-popover text-popover-foreground relative min-w-[8rem]
-                   overflow-hidden rounded-md border shadow-md outline-none
-                   max-h-[200px] overflow-y-auto w-full p-1"
+             overflow-hidden rounded-md border shadow-md outline-none
+             max-h-[200px] overflow-y-auto w-full p-1"
         >
-          {#each filteritems as item, index (item._key)}
-            <li class="group {$internal.focused_index === index ? 'bg-primary-400' : ''} ">
-              <button
-                type="button"
-                on:click|preventDefault={() => setSelected(item)}
-                class="selectitem relative flex w-full cursor-default
-                           select-none items-center rounded-sm py-1 pl-8 pr-2
-                           text-sm outline-none hover:bg-accent
-                           hover:text-accent-foreground
-                           data-[highlighted]:bg-accent
-                           data-[highlighted]:text-accent-foreground
-                           data-[disabled]:pointer-events-none
-                           data-[disabled]:opacity-50"
-              >
-                {item._label}
-                {#if item._key === $internal?.selected_item_key}
-                  <i class="absolute left-2 h-3.5 w-3.5 fa-regular fa-check" />
-                {/if}
-              </button>
-            </li>
-          {/each}
-        </ul>
+          {#if filteritems.length > 0}
+            <ul>
+              {#each filteritems as item, index (item._key)}
+                <li class="group {$internal.focused_index === index ? 'bg-primary-400' : ''} ">
+                  <button
+                    type="button"
+                    on:click|preventDefault={() => setSelected(item)}
+                    class="selectitem relative flex w-full cursor-default
+                       select-none items-center rounded-sm py-1 pl-8 pr-2
+                       text-sm outline-none hover:bg-accent
+                       hover:text-accent-foreground
+                       data-[highlighted]:bg-accent
+                       data-[highlighted]:text-accent-foreground
+                       data-[disabled]:pointer-events-none
+                       data-[disabled]:opacity-50"
+                  >
+                    {item._label}
+                    {#if item._key === $internal?.selected_item_key}
+                      <i class="absolute left-2 h-3.5 w-3.5 fa-regular fa-check" />
+                    {/if}
+                  </button>
+                </li>
+              {/each}
+            </ul>
+          {:else}
+            <div class="flex items-center justify-center py-4">
+              <span class="text-sm text-surface-400">
+                {filter_text ? "No results found" : "Start typing to search..."}
+              </span>
+            </div>
+          {/if}
+        </div>
       </div>
     {/if}
     {#if validationMessage}

package/dist/fields/components/Selectresource.svelte

@@ -6,6 +6,9 @@
   import { writable } from "svelte/store";
   import { syncStoreToStore } from "../../utils/syncing";
 
+  import { scale } from "svelte/transition";
+  import { Label } from "@stubber/ui/label";
+
   export let form;
   export let field;
 
@@ -196,9 +199,9 @@
     }}
     class="relative flex flex-col w-full text-surface-900"
   >
-    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+    <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
       {label}
-    </label>
+    </Label>
     <div class="relative flex mt-2 rounded-md">
       <input
         on:keydown={(e) => {
@@ -229,9 +232,12 @@
         type="select"
         id="input_mask{state_key}"
         placeholder={label}
-        class="block w-full rounded-md border-0 py-1.5 pl-3 pr-9 text-field text-surface-900 ring-1 ring-inset {!isValid
-          ? 'ring-danger-500'
-          : 'ring-surface-300 focus:ring-primary-400'} focus:outline-none placeholder:text-surface-400 focus:ring-2 focus:ring-inset"
+        class="bg-gradient-to-b from-[#2727271F] to-[#27272719] shadow-select
+               flex h-7 w-full items-center justify-between rounded px-3 py-2
+               text-sm focus:outline-none
+               [&>span]:line-clamp-1 aria-[invalid]:border-destructive
+               placeholder:text-black
+               {!isValid ? 'ring-danger-500' : 'ring-surface-300 focus:ring-transparent'}"
         bind:value={filter_text}
         autocomplete="off"
       />
@@ -250,42 +256,53 @@
       {/if}
     </div>
     {#if is_focused}
-      <div use:teleport class="z-10 w-full absolute inset-y-[70px]">
-        {#if items?.length > 0}
-          <ul
-            class="block max-h-[200px] overflow-y-auto w-full bg-white shadow-lg rounded-md ring-1 ring-surface-300"
-          >
-            {#each items as item, index (item?._value?._key)}
-              <li
-                class="group {$internal.focused_index === index
-                  ? 'bg-primary-400'
-                  : ''} hover:bg-primary-400 focus-within:bg-primary-400 text-field cursor-default"
-              >
-                <button
-                  on:click|preventDefault={() => setSelected(item)}
-                  class="selectitem text-surface-900 group-hover:text-white focus:text-white focus:outline-none px-4 py-1.5 w-full flex items-center"
-                >
-                  {item._label}
-                  {#if item?._value?._key == $internal?.selected_item?._value?._key}
-                    <i class="text-primary-400 ml-auto fa-regular fa-check" />
-                  {/if}
-                </button>
-              </li>
-            {/each}
-          </ul>
-        {:else}
-          <div
-            class="h-[100px] flex items-center justify-center w-full bg-white shadow-lg rounded-md ring-1 ring-surface-300"
-          >
-            <span class="text-paragraph text-surface-400">Start typing to search...</span>
-          </div>
-        {/if}
+      <div use:teleport class="z-10 w-full inset-y-[70px] mt-1">
+        <div
+          transition:scale={{
+            start: 0.95,
+            opacity: 0,
+            duration: 50,
+          }}
+          class="bg-popover text-popover-foreground relative min-w-[8rem]
+             overflow-hidden rounded-md border shadow-md outline-none
+             max-h-[200px] overflow-y-auto w-full p-1"
+        >
+          {#if items?.length > 0}
+            <ul>
+              {#each items as item, index (item?._value?._key)}
+                <li class="group {$internal.focused_index === index ? 'bg-primary-400' : ''}">
+                  <button
+                    type="button"
+                    on:click|preventDefault={() => setSelected(item)}
+                    class="selectitem relative flex w-full cursor-default
+                       select-none items-center rounded-sm py-1 pl-8 pr-2
+                       text-sm outline-none hover:bg-accent
+                       hover:text-accent-foreground
+                       data-[highlighted]:bg-accent
+                       data-[highlighted]:text-accent-foreground
+                       data-[disabled]:pointer-events-none
+                       data-[disabled]:opacity-50"
+                  >
+                    {item._label}
+                    {#if item?._value?._key == $internal?.selected_item?._value?._key}
+                      <i class="absolute left-2 h-3.5 w-3.5 fa-regular fa-check" />
+                    {/if}
+                  </button>
+                </li>
+              {/each}
+            </ul>
+          {:else}
+            <div class="flex items-center justify-center py-4">
+              <span class="text-sm text-surface-400">Start typing to search...</span>
+            </div>
+          {/if}
+        </div>
       </div>
     {/if}
     {#if validationMessage}
-      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+      <Label class=" {!isValid ? `text-danger-500` : `text-success-500`}">
         {validationMessage}
-      </p>
+      </Label>
     {/if}
   </div>
 {/if}

package/dist/fields/components/SmartText.svelte

@@ -248,13 +248,13 @@
 </script>
 
 {#if $internal && is_string}
-  <div class="flex flex-col w-full text-surface-900">
-    <Label for="input_{state_key}" class="block{hide_label ? 'hidden' : ''}">
+  <div class="flex flex-col w-full text-surface-900 my-2">
+    <Label for="input_{state_key}" class="block py-2 {hide_label ? 'hidden' : ''}">
       {label}
     </Label>
     <div
       bind:this={editor_parent}
-      class="stubber-cm text-field {isValid ? 'stubber-valid' : 'stubber-invalid'}"
+      class=" stubber-cm text-sm {isValid ? 'stubber-valid' : 'stubber-invalid'}"
     />
     {#if validationMessage}
       <Label class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
@@ -273,41 +273,32 @@
 
 <style>
   .stubber-cm :global(.cm-editor) {
-    /* @apply rounded-md border-0  text-surface-900 ring-1 ring-inset ring-surface-300; */
+    /* Base styles */
+    background-color: rgba(255, 255, 255, 0.85);
     border-radius: 0.375rem;
-    border-width: 0px;
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
+    border-width: 1px;
+    border-style: solid;
+    width: 100%;
     color: rgb(31 41 51);
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
-      var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width))
-      var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-    --tw-ring-inset: inset;
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(188 191 194 / var(--tw-ring-opacity));
-    background-color: white;
+
+    /* Top inset shadow only */
+    box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);
   }
 
   .stubber-cm :global(.cm-editor.cm-focused) {
     outline: none;
-    /* @apply ring-2; */
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
-      var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
-      var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+    border-width: 1px;
+    border-color: var(--ring);
   }
 
   .stubber-cm.stubber-valid :global(.cm-editor.cm-focused) {
-    /* @apply ring-primary-400; */
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(33 134 235 / var(--tw-ring-opacity));
+    border-color: rgb(170, 170, 170, 0.5);
   }
 
   .stubber-cm.stubber-invalid :global(.cm-editor) {
-    /* @apply ring-danger-500; */
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(225 45 57 / var(--tw-ring-opacity));
+    border-color: rgb(225 45 57);
   }
 
   .stubber-cm :global(.cm-editor .cm-scroller) {
@@ -317,26 +308,28 @@
 
   .stubber-cm :global(.cm-editor .cm-content) {
     padding: 0;
-    /* @apply py-2; */
-    padding-top: 8px;
-    padding-bottom: 8px;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
   }
 
   .stubber-cm :global(.cm-editor .cm-line) {
     padding: 0;
-    /* @apply pl-3; */
-    padding-left: 12px;
+    padding-left: 0.75rem;
   }
 
   .stubber-cm :global(.cm-editor .cm-placeholder) {
-    /* @apply text-surface-400; */
-    --tw-text-opacity: 1;
-    color: rgb(165 169 173 / var(--tw-text-opacity));
+    color: var(--muted-foreground, rgb(165 169 173));
   }
 
   .stubber-cm :global(.curly-braces-highlight) {
-    /* @apply text-primary-500; */
-    --tw-text-opacity: 1;
-    color: rgb(9 103 210 / var(--tw-text-opacity));
+    color: rgb(9 103 210);
+  }
+
+  /* CSS Custom Properties */
+  :root {
+    --ring: rgb(98, 98, 98);
+    --muted-foreground: rgb(165 169 173);
+    --input: 214.3 31.8% 91.4%;
+    --border: 214.3 31.8% 91.4%;
   }
 </style>

package/dist/fields/components/Telephone.svelte

@@ -129,7 +129,7 @@
 </script>
 
 {#if $internal}
-  <div class="flex flex-col w-full text-surface-900">
+  <div class="flex flex-col w-full text-surface-900 my-2">
     <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
       {label}
     </Label>

package/dist/fields/components/Text.svelte

@@ -79,7 +79,7 @@
 </script>
 
 {#if $internal}
-  <div class="flex flex-col w-full text-surface-900">
+  <div class="flex flex-col w-full text-surface-900 my-2">
     <Label for="input_{state_key}" class="block py-2 {hide_label ? 'hidden' : ''}">
       {label}
     </Label>

package/dist/fields/components/Voicenote.svelte

@@ -6,6 +6,8 @@
   import { writable } from "svelte/store";
   import { syncStoreToStore } from "../../utils/syncing";
 
+  import { Label } from "@stubber/ui/label";
+
   export let form;
   export let field;
 
@@ -204,9 +206,9 @@
 
 {#if $internal}
   <div class="flex flex-col w-full text-surface-900">
-    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+    <Label for="input_{state_key}" class="block py-2 {hide_label ? 'hidden' : ''}">
       {label}
-    </label>
+    </Label>
     <div>
       <Button variant={isRecording ? "destructive" : "default"} on:click={toggleRecording}>
         {#if isRecording}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "1.0.5",
+  "version": "1.0.8",
   "description": "An automatic form builder based on field specifications",
   "keywords": [
     "components",