@reshape-biotech/design-system 2.5.3 → 2.6.0

package/dist/components/button/Button.svelte

@@ -256,11 +256,19 @@
 
     border-color: #12192A1A;
 
-    background-color: transparent;
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 
     --tw-text-opacity: 1;
 
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1));
+
+    --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.02);
+
+    --tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
+
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
   .btn-outline:hover {
 

package/dist/components/card/Card.svelte

@@ -11,14 +11,18 @@
   const { Header, children, headerBorder = false, class: additionalClasses = '' }: Props = $props();
 </script>
 
-<div class="rounded-lg border border-static bg-surface shadow-sm {additionalClasses}">
+<div class="rounded-xl border border-static bg-surface shadow-container {additionalClasses}">
   {#if Header}
-    <header class="px-6 py-4" class:border-b={headerBorder} class:border-static={headerBorder}>
+    <header
+      class="flex h-12 items-center px-4"
+      class:border-b={headerBorder}
+      class:border-static={headerBorder}
+    >
       {@render Header()}
     </header>
   {/if}
   {#if children}
-    <div class="p-6">
+    <div class="p-4 pb-5">
       {@render children()}
     </div>
   {/if}

package/dist/components/dropdown/components/OutlinedButton.svelte

@@ -40,7 +40,7 @@
 
     color: rgb(18 25 42 / var(--tw-text-opacity, 1));
 
-    --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.04);
+    --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.02);
 
     --tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
 

package/dist/components/empty-content/EmptyContent.svelte

@@ -10,9 +10,9 @@
 </script>
 
 <div class="flex w-full justify-center">
-  <div class="flex max-w-[180px] flex-col items-center justify-center gap-5 py-5 text-tertiary">
+  <div class="flex max-w-96 flex-col items-center justify-center gap-5 py-5 text-tertiary">
     {@render icon()}
-    <div class="flex w-full flex-col items-center justify-center gap-2">
+    <div class="flex w-full flex-col items-center justify-center gap-2 text-center">
       {@render children()}
     </div>
   </div>

package/dist/components/icon-button/IconButton.svelte

@@ -7,6 +7,7 @@
     | 'primary'
     | 'secondary'
     | 'transparent'
+    | 'outline'
     | 'danger'
     | 'secondary-inverse'
     | 'transparent-inverse';
@@ -79,7 +80,7 @@
     cursor: pointer;
     align-items: center;
     justify-content: center;
-    border-radius: 0.375rem;
+    border-radius: 0.5rem;
     transition-duration: 150ms
 }
   .rounded {
@@ -96,7 +97,8 @@
 
   .size-xs {
     width: 1.5rem;
-    height: 1.5rem
+    height: 1.5rem;
+    border-radius: 0.375rem
 }
 
   .size-xs :global(svg) {
@@ -116,8 +118,8 @@
     height: 2.5rem
 }
   .size-md :global(svg) {
-    width: 1.25rem;
-    height: 1.25rem
+    width: 1rem;
+    height: 1rem
 }
 
   .size-lg {
@@ -126,8 +128,22 @@
 }
 
   .size-lg :global(svg) {
-    width: 1.5rem;
-    height: 1.5rem
+    width: 1.25rem;
+    height: 1.25rem
+}
+
+  .color-outline {
+    border-width: 1px;
+    border-color: #12192A1A;
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+    --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.02);
+    --tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
+  .color-outline:hover {
+    background-color: #12192a0A
 }
 
   .color-primary {

package/dist/components/icon-button/IconButton.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
-type Variant = 'primary' | 'secondary' | 'transparent' | 'danger' | 'secondary-inverse' | 'transparent-inverse';
+type Variant = 'primary' | 'secondary' | 'transparent' | 'outline' | 'danger' | 'secondary-inverse' | 'transparent-inverse';
 interface Props extends HTMLButtonAttributes {
     variant?: Variant;
     type?: 'button' | 'submit' | 'reset' | null | undefined;

package/dist/components/icons/index.d.ts

@@ -4,7 +4,7 @@ import type { textColor, backgroundColor } from './../../tokens';
 export * from './custom';
 import type { CustomIconName } from './custom';
 export type PhosphorIconProps = Component<IconComponentProps, object, ''>;
-export type IconName = 'Aperture' | 'Archive' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'CursorClick' | 'CraneTower' | 'Database' | 'Dna' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'EyeSlash' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'Link' | 'ListMagnifyingGlass' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'MicrosoftExcelLogo' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Ruler' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'TreeStructure' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
+export type IconName = 'Aperture' | 'Archive' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'CursorClick' | 'CraneTower' | 'Database' | 'Dna' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'EyeSlash' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'Link' | 'ListMagnifyingGlass' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'MicrosoftExcelLogo' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Ruler' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'TreeStructure' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X' | 'XCircle';
 export type AllIconName = IconName | CustomIconName;
 export declare const iconMap: Record<IconName, PhosphorIconProps>;
 export declare function renderIcon(iconName: keyof typeof iconMap): PhosphorIconProps;

package/dist/components/icons/index.js

@@ -118,6 +118,7 @@ import Warning from 'phosphor-svelte/lib/Warning';
 import WarningCircle from 'phosphor-svelte/lib/WarningCircle';
 import WifiSlash from 'phosphor-svelte/lib/WifiSlash';
 import X from 'phosphor-svelte/lib/X';
+import XCircle from 'phosphor-svelte/lib/XCircle';
 // Custom Icons
 export * from './custom';
 export const iconMap = {
@@ -241,6 +242,7 @@ export const iconMap = {
     WarningCircle,
     WifiSlash,
     X,
+    XCircle,
 };
 export function renderIcon(iconName) {
     const Icon = iconMap[iconName];

package/dist/components/input/Input.stories.svelte

@@ -1,5 +1,5 @@
-<script module>
-  import Input from './Input.svelte';
+<script module lang="ts">
+  import Input, { type InputVariant, type InputSize } from './Input.svelte';
 
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -20,13 +20,33 @@
   let password = 'wordpass';
 
   let textareaValue = '';
+
+  const variants = ['primary', 'secondary', 'transparent', 'borderless'];
+
+  const sizes = ['xs', 'sm', 'md', 'lg', 'dynamic'];
 </script>
 
 <Story name="Base" args={{ autofocus: true, value: 'Hello' }} />
 
-<Story name="XSmall" args={{ size: 'xs' }} />
+<Story name="Variants" asChild>
+  <div class="flex flex-col gap-4">
+    {#each variants as variant}
+      {#if variant === 'secondary-inverse'}
+        <Input label={variant} variant={variant as InputVariant} placeholder="Placeholder" />
+      {:else}
+        <Input label={variant} variant={variant as InputVariant} placeholder="Placeholder" />
+      {/if}
+    {/each}
+  </div>
+</Story>
 
-<Story name="Small" args={{ size: 'sm' }} />
+<Story name="Sizes" asChild>
+  <div class="flex flex-col gap-4">
+    {#each sizes as size}
+      <Input label={size} size={size as InputSize} placeholder="Placeholder" />
+    {/each}
+  </div>
+</Story>
 
 <Story name="Login" asChild>
   <div class="flex flex-col gap-2">

package/dist/components/input/Input.stories.svelte.d.ts

@@ -1,19 +1,6 @@
-export default Input;
-type Input = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Input: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 import Input from './Input.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
     (internal: unknown, props: {
@@ -25,3 +12,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const Input: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Input = InstanceType<typeof Input>;
+export default Input;

package/dist/components/input/Input.svelte

@@ -7,7 +7,7 @@
   interface InputProps extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
     label?: string | null;
     id?: string | undefined;
-    variant?: 'default' | 'transparent' | 'borderless';
+    variant?: 'primary' | 'secondary' | 'transparent' | 'borderless';
     validator?: (a: string | number) => boolean;
     prefix?: Snippet<[any]>;
     suffix?: Snippet;
@@ -23,7 +23,7 @@
 
   let {
     label = null,
-    variant = 'default',
+    variant = 'primary',
     value = $bindable(),
     type = 'text',
     validator = (_) => {
@@ -61,11 +61,15 @@
     valid = validator(value);
     onblur?.(event);
   }
+
+  export type InputVariant = 'primary' | 'secondary' | 'transparent' | 'borderless';
+
+  export type InputSize = 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
 </script>
 
-<div class="w-full">
+<div class="flex w-full flex-col gap-2">
   {#if label}
-    <label for={id ?? inputId} class="block px-1 py-2 text-sm text-secondary">
+    <label for={id ?? inputId} class="block px-1 text-sm capitalize text-secondary">
       {label}
       {#if rest.required}
         <span class="ml-0.5 text-danger">*</span>
@@ -74,10 +78,11 @@
   {/if}
 
   <div
-    class="flex w-full items-center gap-1 rounded-lg border border-input bg-surface shadow-input size-{size}"
-    class:border-transparent={variant === 'transparent'}
-    class:shadow-input={!(variant === 'transparent')}
+    class="flex w-full items-center gap-1 size-{size} transition-colors"
     class:!border-error={!valid}
+    class:primary={variant === 'primary'}
+    class:secondary={variant === 'secondary'}
+    class:transparent={variant === 'transparent'}
     class:borderless={variant === 'borderless'}
   >
     <div class="whitespace-nowrap text-secondary">
@@ -126,6 +131,8 @@
 
     resize: none;
 
+    background-color: transparent;
+
     padding: 0.25rem;
 
     outline: 2px solid transparent;
@@ -133,6 +140,20 @@
     outline-offset: 2px
 }
 
+input::-moz-placeholder {
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+
+input::placeholder {
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+
   div:not(:focus-within):hover {
 
     border-color: #5750ee40
@@ -145,17 +166,46 @@
     border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
 }
 
-  .borderless {
+  .primary {
 
-    border-style: none;
+    border-width: 1px;
+
+    border-color: #12192A1A;
 
-    --tw-shadow: 0 0 #0000;
+    --tw-bg-opacity: 1;
 
-    --tw-shadow-colored: 0 0 #0000;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+    --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.02);
+
+    --tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
 
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
 
+  .secondary {
+
+    border-width: 1px;
+
+    border-color: #12192A1A;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(251 251 251 / var(--tw-bg-opacity, 1))
+}
+
+  .transparent {
+
+    border-width: 1px;
+
+    border-color: transparent
+}
+
+  .borderless {
+
+    border-style: none
+}
+
   .borderless input {
 
     border-style: none;
@@ -175,6 +225,8 @@
 
     height: 1.5rem;
 
+    border-radius: 0.375rem;
+
     padding: 0.25rem;
 
     font-size: 0.75rem;
@@ -186,6 +238,8 @@
 
     height: 2rem;
 
+    border-radius: 0.375rem;
+
     padding: 0.25rem
 }
 
@@ -193,13 +247,17 @@
 
     height: 2.5rem;
 
-    padding: 0.5rem
+    border-radius: 0.5rem;
+
+    padding: 0.25rem
 }
 
   .size-lg {
 
     height: 3rem;
 
+    border-radius: 0.5rem;
+
     padding-left: 0.5rem;
 
     padding-right: 0.5rem;
@@ -217,6 +275,8 @@
 
     height: auto;
 
+    border-radius: 0.5rem;
+
     padding-left: 0.75rem;
 
     padding-right: 0.75rem;

package/dist/components/input/Input.svelte.d.ts

@@ -3,7 +3,7 @@ import type { HTMLInputAttributes } from 'svelte/elements';
 interface InputProps extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
     label?: string | null;
     id?: string | undefined;
-    variant?: 'default' | 'transparent' | 'borderless';
+    variant?: 'primary' | 'secondary' | 'transparent' | 'borderless';
     validator?: (a: string | number) => boolean;
     prefix?: Snippet<[any]>;
     suffix?: Snippet;
@@ -16,6 +16,8 @@ interface InputProps extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suff
     oninput?: (event: Event) => void;
     onblur?: (event: FocusEvent) => void;
 }
+export type InputVariant = 'primary' | 'secondary' | 'transparent' | 'borderless';
+export type InputSize = 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
 declare const Input: import("svelte").Component<InputProps, {
     focus: () => void;
 }, "value" | "input">;

package/dist/components/select/components/MultiSelectTrigger.svelte

@@ -30,19 +30,19 @@
 </script>
 
 <Select.Trigger
-  class={'flex h-fit min-h-10 w-full items-center justify-between rounded-lg border border-input bg-surface py-1 pl-1 text-sm placeholder:text-tertiary focus:outline-none disabled:cursor-not-allowed disabled:opacity-50' +
+  class={'flex h-fit min-h-10 w-full items-center justify-between rounded-lg border border-input bg-surface py-1 text-sm placeholder:text-tertiary focus:outline-none disabled:cursor-not-allowed disabled:border-transparent disabled:bg-neutral disabled:opacity-75' +
     (className || '')}
   {...restProps}
 >
   {#if selectedValues.length === 0}
-    <span class="flex-grow px-2 text-tertiary">{placeholder}</span>
+    <span class="flex-grow px-1 text-tertiary">{placeholder}</span>
   {:else}
     <div class="flex flex-grow flex-wrap items-center gap-1">
       {#each selectedValues as selectedVal (selectedVal)}
         {@const item = items.find((i) => i.value === selectedVal)}
         {#if item}
           <div
-            class="flex h-7 w-fit items-center gap-1 rounded bg-neutral py-0.5 pl-2 pr-0.5 text-sm"
+            class="flex h-7 w-fit items-center gap-1 rounded-md bg-neutral py-0.5 pl-2 pr-0.5 text-sm"
             aria-label={`Selected item ${item.label}`}
           >
             {#if item.iconName}

package/dist/components/select/components/SelectContent.svelte

@@ -21,13 +21,13 @@
 <SelectPrimitive.Portal>
   <SelectPrimitive.Content {...restProps} {sideOffset} class={baseClasses + ' ' + className}>
     <SelectPrimitive.ScrollUpButton class="flex justify-center">
-      <Icon iconName="CaretUp" />
+      <Icon iconName="CaretUp" color="tertiary" />
     </SelectPrimitive.ScrollUpButton>
     <SelectPrimitive.Viewport class="p-1 ">
       {@render children()}
     </SelectPrimitive.Viewport>
     <SelectPrimitive.ScrollDownButton class="flex justify-center">
-      <Icon iconName="CaretDown" />
+      <Icon iconName="CaretDown" color="tertiary" />
     </SelectPrimitive.ScrollDownButton>
   </SelectPrimitive.Content>
 </SelectPrimitive.Portal>

package/dist/components/select/components/SelectItem.svelte

@@ -13,7 +13,7 @@
   let { class: className = '', children, ...restProps }: Props = $props();
 
   const baseClasses = `
-        relative flex w-full h-auto gap-2 cursor-default select-none items-center justify-between rounded-lg p-3 text-sm outline-none
+        relative flex w-full h-auto gap-2 cursor-default select-none items-center justify-between rounded-md p-3 text-sm outline-none
         focus:bg-neutral focus:text-accent-foreground
         data-[disabled]:pointer-events-none data-[disabled]:opacity-50
         data-[highlighted]:bg-neutral data-[highlighted]:text-accent-foreground

package/dist/components/select/components/SelectTrigger.svelte

@@ -23,7 +23,7 @@
   }: Props = $props();
 
   const baseClasses =
-    'flex h-10 w-full items-center justify-between rounded-lg border border-input bg-surface p-2 text-sm placeholder:text-tertiary focus:outline-none hover:border-hover focus:border-accent disabled:cursor-not-allowed disabled:opacity-50 transition-colors shadow-input';
+    'flex h-10 w-full items-center justify-between !rounded-lg border border-input bg-surface p-2 text-sm placeholder:text-tertiary focus:outline-none hover:border-hover focus:border-accent focus:ring-0 disabled:cursor-not-allowed disabled:border-transparent disabled:bg-neutral disabled:opacity-75 transition-colors shadow-input';
 </script>
 
 <SelectPrimitive.Trigger

package/dist/components/slider/Slider.svelte

@@ -91,6 +91,7 @@
     display: inline-flex;
     height: 2rem;
     width: 2rem;
+    cursor: grab;
     align-items: center;
     justify-content: center;
     border-radius: 9999px;

package/dist/components/tooltip/Tooltip.svelte

@@ -11,6 +11,7 @@
     align?: 'start' | 'center' | 'end';
     trigger?: Snippet;
     content?: Snippet;
+    delayDuration?: number;
   }
 
   let {
@@ -21,6 +22,7 @@
     align = 'center',
     trigger,
     content,
+    delayDuration = 400,
   }: Props = $props();
 
   const sideMap = {
@@ -36,7 +38,7 @@
 </script>
 
 <Tooltip.Provider>
-  <Tooltip.Root open={forceOpen} delayDuration={400}>
+  <Tooltip.Root open={forceOpen} {delayDuration}>
     <Tooltip.Trigger>
       {#if trigger}
         {@render trigger()}

package/dist/components/tooltip/Tooltip.svelte.d.ts

@@ -8,6 +8,7 @@ interface Props {
     align?: 'start' | 'center' | 'end';
     trigger?: Snippet;
     content?: Snippet;
+    delayDuration?: number;
 }
 declare const Tooltip: import("svelte").Component<Props, {}, "">;
 type Tooltip = ReturnType<typeof Tooltip>;

package/dist/index.d.ts

@@ -44,7 +44,6 @@ export * from './components/textarea/index';
 export * from './components/tooltip/';
 export * from './components/toggle/';
 export * from './components/checkbox/';
-export * from './components/sjsf-wrappers/';
 export { tokens } from './tokens';
 export { notifications } from './notifications';
 export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor } from './tokens';

package/dist/index.js

@@ -45,7 +45,6 @@ export * from './components/textarea/index';
 export * from './components/tooltip/';
 export * from './components/toggle/';
 export * from './components/checkbox/';
-export * from './components/sjsf-wrappers/';
 // Styles and Tokens
 export { tokens } from './tokens';
 export { notifications } from './notifications';

package/dist/tokens.js

@@ -355,7 +355,7 @@ const outlineColor = {
     ...darkOutlineColor,
 };
 const boxShadow = {
-    input: `0 1px 4px 0 ${colors.shadow[4]}`,
+    input: `0 1px 4px 0 ${colors.shadow[2]}`,
     container: `0 2px 16px 0 ${colors.shadow[2]}`,
     menu: `0 4px 20px 0 ${colors.shadow[6]}, 0 0 0 1px ${colors.shadow[8]}`,
     hover: `0 0 0 1px ${colors.periwinkle[5][25]}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.5.3",
+  "version": "2.6.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -70,12 +70,6 @@
       "import": "./dist/components/datepicker/index.js",
       "default": "./dist/components/datepicker/index.js"
     },
-    "./components/sjsf-wrappers": {
-      "types": "./dist/components/sjsf-wrappers/index.d.ts",
-      "svelte": "./dist/components/sjsf-wrappers/index.js",
-      "import": "./dist/components/sjsf-wrappers/index.js",
-      "default": "./dist/components/sjsf-wrappers/index.js"
-    },
     "./components/empty-content": {
       "types": "./dist/components/empty-content/index.d.ts",
       "svelte": "./dist/components/empty-content/index.js",

package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte

@@ -1,107 +0,0 @@
-<script lang="ts">
-  import type { ComponentProps } from '@sjsf/form';
-  import { getFormContext, inputAttributes } from '@sjsf/form';
-  import Input from '../input/Input.svelte';
-  import type { FocusEventHandler } from 'svelte/elements';
-
-  type Props = ComponentProps['numberWidget'];
-
-  let { value = $bindable(), config, handlers, errors }: Props = $props();
-
-  const ctx = getFormContext();
-
-  const derivedAttrs = $derived(
-    inputAttributes(ctx, config, 'number', handlers, {
-      type: 'number',
-    })
-  );
-  const placeholder = $derived(
-    config?.uiSchema?.['ui:placeholder'] ||
-      config?.schema?.description ||
-      (Array.isArray(config?.schema?.examples) && config.schema.examples.length > 0
-        ? String(config.schema.examples[0]) // Ensure the example is also a string
-        : '') ||
-      ''
-  );
-
-  const readonly = $derived(config?.schema?.readOnly ?? false);
-  const currentClass = $derived(derivedAttrs?.class ?? 'w-full');
-
-  const onBlurHandler = $derived(
-    derivedAttrs.onblur
-      ? (event: FocusEvent) =>
-          (derivedAttrs.onblur as FocusEventHandler<HTMLInputElement>)(event as any)
-      : undefined
-  );
-
-  const onChangeHandler = $derived(
-    derivedAttrs.onchange
-      ? (event: Event) =>
-          (derivedAttrs.onchange as FocusEventHandler<HTMLInputElement>)(event as any)
-      : undefined
-  );
-
-  const onInputHandler = $derived(
-    derivedAttrs.oninput
-      ? (event: Event) =>
-          (derivedAttrs.oninput as FocusEventHandler<HTMLInputElement>)(event as any)
-      : undefined
-  );
-
-  let displayValue = $state('');
-
-  const getStringValue = () => {
-    if (displayValue !== '') {
-      return displayValue;
-    }
-
-    if (value === undefined || value === null || isNaN(value)) {
-      return '';
-    }
-    return String(value);
-  };
-
-  const setNumericValue = (newValueFromInput: unknown) => {
-    const stringifiedInput =
-      newValueFromInput === null || newValueFromInput === undefined
-        ? ''
-        : String(newValueFromInput);
-
-    const validNumberPattern = /^-?\d*\.?\d*$/;
-    if (stringifiedInput !== '' && !validNumberPattern.test(stringifiedInput)) {
-      return;
-    }
-
-    displayValue = stringifiedInput;
-
-    if (stringifiedInput.trim() === '') {
-      value = undefined;
-    } else {
-      const num = parseFloat(stringifiedInput);
-      value = isNaN(num) ? undefined : num;
-    }
-  };
-</script>
-
-<Input
-  bind:value={() => getStringValue(), (v) => setNumericValue(v)}
-  placeholder={String(placeholder)}
-  type={'text'}
-  inputmode={'decimal'}
-  pattern={config?.schema?.type === 'integer' ? '-?\\d*' : '-?\\d*\\.?\\d*'}
-  {readonly}
-  id={String(derivedAttrs.id)}
-  name={String(derivedAttrs.name)}
-  disabled={derivedAttrs.disabled}
-  required={derivedAttrs.required}
-  step={config?.schema?.multipleOf ?? (config?.schema?.type === 'integer' ? 1 : 'any')}
-  min={config?.schema?.minimum ?? config?.schema?.exclusiveMinimum}
-  max={config?.schema?.maximum ?? config?.schema?.exclusiveMaximum}
-  aria-invalid={errors && errors.length > 0 ? true : undefined}
-  aria-describedby={errors && errors.length > 0 ? `${String(derivedAttrs.id)}-errors` : undefined}
-  class={String(currentClass)}
-  autocomplete="off"
-  oninput={onInputHandler}
-  onchange={onChangeHandler}
-  onblur={onBlurHandler}
-/>

package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const SjsfNumberInputWrapper: import("svelte").Component<ComponentProps, {}, "value">;
-type SjsfNumberInputWrapper = ReturnType<typeof SjsfNumberInputWrapper>;
-export default SjsfNumberInputWrapper;

package/dist/components/sjsf-wrappers/SjsfSelectWidgetWrapper.svelte

@@ -1,77 +0,0 @@
-<script lang="ts">
-  import { getFormContext, selectAttributes } from '@sjsf/form';
-  import type { ComponentProps } from '@sjsf/form';
-  import * as Select from '../select';
-
-  type Props = ComponentProps['selectWidget'];
-  let { handlers, value = $bindable(), options = [], config }: Props = $props();
-
-  const ctx = getFormContext();
-  const attributes = $derived(
-    selectAttributes(ctx, config, 'select', handlers, { style: 'flex-grow: 1' })
-  );
-
-  const isPrimitive = (v: unknown): v is string | number | boolean =>
-    ['string', 'number', 'boolean'].includes(typeof v);
-
-  let domValue = $derived.by(() => {
-    const primitiveMatch = options.find((o) => isPrimitive(o.value) && o.value === value);
-    if (primitiveMatch) return String(primitiveMatch.value);
-    const idx = options.findIndex((o) => o.value === value);
-    return idx >= 0 ? String(idx) : '';
-  });
-
-  const onSelectChange = (v: string | undefined) => {
-    if (v === undefined || v === '') {
-      value = undefined;
-    } else {
-      const primitiveMatch = options.find((o) => isPrimitive(o.value) && String(o.value) === v);
-      if (primitiveMatch) {
-        value = primitiveMatch.value;
-      } else {
-        const idx = Number(v);
-        if (!Number.isNaN(idx) && options[idx]) {
-          value = options[idx].value;
-        }
-      }
-    }
-    if (typeof (attributes as any).onchange === 'function') {
-      (attributes as any).onchange(new Event('change'));
-    }
-  };
-</script>
-
-<input
-  type="hidden"
-  name={String(attributes.name)}
-  id={String(attributes.id)}
-  value={domValue}
-  disabled={attributes.disabled}
-/>
-
-<Select.Root value={domValue} type="single" items={[]} onValueChange={onSelectChange}>
-  <Select.Trigger
-    placeholder={attributes.placeholder ?? undefined}
-    displayValue={options.find((o) => isPrimitive(o.value) && String(o.value) === domValue)
-      ?.label || options.find((o, idx) => String(idx) === domValue && !isPrimitive(o.value))?.label}
-    disabled={attributes.disabled}
-  />
-  <Select.Portal>
-    <Select.Content>
-      {#if config.schema.default === undefined}
-        <Select.Item value="" label={attributes.placeholder ?? undefined} />
-      {/if}
-      {#each options as option, index (option.id)}
-        {#if isPrimitive(option.value)}
-          <Select.Item
-            value={String(option.value)}
-            label={option.label}
-            disabled={option.disabled}
-          />
-        {:else}
-          <Select.Item value={String(index)} label={option.label} disabled={option.disabled} />
-        {/if}
-      {/each}
-    </Select.Content>
-  </Select.Portal>
-</Select.Root>

package/dist/components/sjsf-wrappers/SjsfSelectWidgetWrapper.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const SjsfSelectWidgetWrapper: import("svelte").Component<ComponentProps, {}, "value">;
-type SjsfSelectWidgetWrapper = ReturnType<typeof SjsfSelectWidgetWrapper>;
-export default SjsfSelectWidgetWrapper;

package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte

@@ -1,65 +0,0 @@
-<script lang="ts">
-  import type { ComponentProps } from '@sjsf/form';
-  import { getFormContext, inputAttributes } from '@sjsf/form';
-  import Input from '../input/Input.svelte';
-  import type { FormEventHandler, FocusEventHandler } from 'svelte/elements';
-
-  type Props = ComponentProps['textWidget'];
-
-  let { value = $bindable(), config, handlers, errors }: Props = $props();
-
-  const ctx = getFormContext();
-
-  const derivedAttrs = $derived(
-    inputAttributes(ctx, config, 'text', handlers, {
-      type: 'text',
-    })
-  );
-
-  const placeholder = $derived(
-    config?.uiSchema?.['ui:placeholder'] ||
-      config?.schema?.description ||
-      (Array.isArray(config?.schema?.examples) && config.schema.examples.length > 0
-        ? String(config.schema.examples[0])
-        : '') ||
-      ''
-  );
-
-  const readonly = $derived(config?.schema?.readOnly ?? false);
-  const currentClass = $derived(derivedAttrs?.class ?? 'w-full');
-
-  const onInput = $derived(
-    derivedAttrs.oninput
-      ? (event: Event) => (derivedAttrs.oninput as FormEventHandler<HTMLInputElement>)(event as any)
-      : undefined
-  );
-  const onChange = $derived(
-    derivedAttrs.onchange
-      ? (event: Event) =>
-          (derivedAttrs.onchange as FormEventHandler<HTMLInputElement>)(event as any)
-      : undefined
-  );
-  const onBlur = $derived(
-    derivedAttrs.onblur
-      ? (event: FocusEvent) =>
-          (derivedAttrs.onblur as FocusEventHandler<HTMLInputElement>)(event as any)
-      : undefined
-  );
-</script>
-
-<Input
-  bind:value
-  placeholder={String(placeholder)}
-  type="text"
-  {readonly}
-  id={String(derivedAttrs.id)}
-  name={String(derivedAttrs.name)}
-  disabled={derivedAttrs.disabled}
-  required={derivedAttrs.required}
-  oninput={onInput}
-  onchange={onChange}
-  onblur={onBlur}
-  aria-invalid={errors && errors.length > 0 ? true : undefined}
-  aria-describedby={errors && errors.length > 0 ? `${String(derivedAttrs.id)}-errors` : undefined}
-  class={String(currentClass)}
-/>

package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const SjsfTextInputWrapper: import("svelte").Component<ComponentProps, {}, "value">;
-type SjsfTextInputWrapper = ReturnType<typeof SjsfTextInputWrapper>;
-export default SjsfTextInputWrapper;

package/dist/components/sjsf-wrappers/index.d.ts

@@ -1,2 +0,0 @@
-export { default as SjsfTextInputWrapper } from './SjsfTextInputWrapper.svelte';
-export { default as SjsfNumberInputWrapper } from './SjsfNumberInputWrapper.svelte';

package/dist/components/sjsf-wrappers/index.js

@@ -1,2 +0,0 @@
-export { default as SjsfTextInputWrapper } from './SjsfTextInputWrapper.svelte';
-export { default as SjsfNumberInputWrapper } from './SjsfNumberInputWrapper.svelte';

package/dist/components/sjsf-wrappers/sjsfCustomTheme.d.ts

@@ -1,2 +0,0 @@
-import type { Theme } from '@sjsf/form';
-export declare const sjsfCustomTheme: Theme;

package/dist/components/sjsf-wrappers/sjsfCustomTheme.js

@@ -1,12 +0,0 @@
-import { theme as BasicTheme } from '@sjsf/basic-theme';
-import { overrideByRecord } from '@sjsf/form/lib/resolver';
-import SjsfNumberInputWrapper from './SjsfNumberInputWrapper.svelte';
-import SjsfTextInputWrapper from './SjsfTextInputWrapper.svelte';
-import EnumField from '@sjsf/form/fields/extra-fields/enum.svelte';
-import SjsfSelectWidgetWrapper from './SjsfSelectWidgetWrapper.svelte';
-export const sjsfCustomTheme = overrideByRecord(BasicTheme, {
-    numberWidget: SjsfNumberInputWrapper,
-    textWidget: SjsfTextInputWrapper,
-    enumField: EnumField,
-    selectWidget: SjsfSelectWidgetWrapper,
-});