@reshape-biotech/design-system 2.6.3 → 2.6.5

package/dist/components/button/Button.svelte

@@ -175,17 +175,24 @@
 
     height: 3rem;
 
-    padding-left: 1.5rem;
+    border-radius: 0.75rem;
 
-    padding-right: 1.5rem;
+    padding-left: 1.25rem;
+
+    padding-right: 1.25rem;
 
     padding-top: 1rem;
 
-    padding-bottom: 1rem;
+    padding-bottom: 1rem
+}
+  @media (min-width: 1280px) {
+
+    .btn-size-lg {
 
-    font-size: 1rem;
+        font-size: 1rem;
 
-    line-height: 1.5rem
+        line-height: 1.5rem
+    }
 }
 
   /* Button variants */
@@ -272,7 +279,7 @@
 }
   .btn-outline:hover {
 
-    border-color: #12192A26;
+    border-color: #12192A1A;
 
     background-color: #12192a0A;
 

package/dist/components/card/Card.stories.svelte

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import Card from './Card.svelte';
+  import CardWrapper from './CardWrapper.svelte';
   import RequiredStatusIndicator from '../required-status-indicator/RequiredStatusIndicator.svelte';
 
   const { Story } = defineMeta({
@@ -13,6 +14,9 @@
       headerBorder: { control: 'boolean', description: 'Show a border below the header' },
       class: { control: 'text', description: 'Additional CSS classes for the card' },
     },
+    parameters: {
+      layout: 'centered',
+    },
   });
 </script>
 
@@ -30,21 +34,11 @@
   </Card>
 </Story>
 
-<Story name="Header Only" args={{ class: 'w-96' }} asChild>
-  <Card class="w-96">
-    {#snippet Header()}
-      <p class="text-primary">Card with Header Only</p>
-      <p class="text-sm text-tertiary">No main content here, just a header.</p>
-    {/snippet}
-    {#snippet children()}{/snippet}
-  </Card>
-</Story>
-
 <Story name="Header and Content" args={{ class: 'w-96' }} asChild>
   <Card class="w-96">
     {#snippet Header()}
-      <div class="flex items-center justify-between">
-        <p class="text-primary">Insect Health</p>
+      <div class="flex w-full items-center justify-between">
+        <h5>Insect Health</h5>
         <span class="text-sm text-success">Target</span>
       </div>
     {/snippet}
@@ -78,8 +72,8 @@
 <Story name="Header, Content, and Border" args={{ headerBorder: true, class: 'w-96' }} asChild>
   <Card headerBorder={true} class="w-96">
     {#snippet Header()}
-      <div class="flex items-center justify-between">
-        <p class="text-primary">Insect Count</p>
+      <div class="flex w-full items-center justify-between">
+        <h6>Insect Count</h6>
         <RequiredStatusIndicator requiredCount={2} currentCount={2} />
       </div>
     {/snippet}
@@ -111,18 +105,99 @@
   </Card>
 </Story>
 
+<Story name="Card nested in CardWrapper" args={{ class: 'w-96' }} asChild>
+  <CardWrapper class="w-96" variant="compact">
+    {#snippet Header()}
+      <h5>Overview</h5>
+      <span class="text-sm text-success">Active</span>
+    {/snippet}
+    {#snippet children()}
+      <Card>
+        {#snippet children()}
+          <h3 class="mb-2 text-lg font-semibold text-primary">Nested Card Content</h3>
+          <p class="text-secondary">
+            This demonstrates a Card nested in a compact CardWrapper. The wrapper provides the outer
+            container with header and footer, while the Card provides the inner styling with
+            content.
+          </p>
+        {/snippet}
+      </Card>
+    {/snippet}
+    {#snippet Footer()}
+      <p class="py-2 text-xs text-secondary">Last updated 2 hours ago</p>
+    {/snippet}
+  </CardWrapper>
+</Story>
+
+<Story name="CardWrapper with Multiple Cards" args={{ class: 'w-[600px]' }} asChild>
+  <CardWrapper class="w-[600px]">
+    {#snippet Header()}
+      <h6>Project Dashboard</h6>
+      <span class="text-sm text-success">3 Active</span>
+    {/snippet}
+    {#snippet children()}
+      <Card headerBorder>
+        {#snippet Header()}
+          <div class="flex items-center gap-2">
+            <div class="h-3 w-3 rounded-full bg-success-inverse"></div>
+            <h6>Analysis Model</h6>
+          </div>
+        {/snippet}
+        {#snippet children()}
+          <p class="mb-2 text-sm text-secondary">Cell Count Analysis</p>
+          <div class="flex justify-between text-xs text-tertiary">
+            <span>Status: Active</span>
+            <span>Last run: 2h ago</span>
+          </div>
+        {/snippet}
+      </Card>
+
+      <Card headerBorder>
+        {#snippet Header()}
+          <div class="flex items-center gap-2">
+            <div class="h-3 w-3 rounded-full bg-warning-inverse"></div>
+            <h6>Validation</h6>
+          </div>
+        {/snippet}
+        {#snippet children()}
+          <p class="mb-2 text-sm text-secondary">Quality Check</p>
+          <div class="flex justify-between text-xs text-tertiary">
+            <span>Status: Pending</span>
+            <span>Next run: 1d</span>
+          </div>
+        {/snippet}
+      </Card>
+
+      <Card headerBorder>
+        {#snippet Header()}
+          <div class="flex items-center gap-2">
+            <div class="h-3 w-3 rounded-full bg-danger-inverse"></div>
+            <h6>Export</h6>
+          </div>
+        {/snippet}
+        {#snippet children()}
+          <p class="mb-2 text-sm text-secondary">Data Export</p>
+          <div class="flex justify-between text-xs text-tertiary">
+            <span>Status: Failed</span>
+            <span>Last run: 5h ago</span>
+          </div>
+        {/snippet}
+      </Card>
+    {/snippet}
+  </CardWrapper>
+</Story>
+
 <Story name="With Custom Styling" args={{}} asChild>
-  <Card class="w-1/2 bg-accent text-primary-inverse shadow-lg">
+  <Card class="w-72 text-accent shadow-lg" headerBorder>
     {#snippet Header()}
-      <p class="">Custom Styled Card</p>
+      <h6>Custom Styled Card</h6>
     {/snippet}
     {#snippet children()}
       <p>
-        This card uses the <code class="rounded bg-black/20 px-1">class</code> prop to apply a
-        different background (<code class="rounded bg-black/20 px-1">bg-accent</code>), text color (<code
-          class="rounded bg-black/20 px-1">text-primary-inverse</code
-        >), width (<code class="rounded bg-black/20 px-1">w-1/2</code>), and a larger shadow (<code
-          class="rounded bg-black/20 px-1">shadow-lg</code
+        This card uses the <code class="rounded bg-accent px-1">class</code> prop to apply a
+        different background text color (<code class="rounded bg-accent px-1">text-accent</code>),
+        width (<code class="rounded bg-accent px-1">w-72</code>), and a larger shadow (<code
+          class="rounded bg-accent px-1">shadow-lg</code
         >).
       </p>
     {/snippet}

package/dist/components/card/Card.svelte

@@ -6,7 +6,7 @@
     children: Snippet;
     headerBorder?: boolean;
     class?: string;
-    variant?: 'full-width' | 'content-width';
+    padding?: number;
   };
 
   const {
@@ -14,16 +14,16 @@
     children,
     headerBorder = false,
     class: additionalClasses = '',
-    variant = 'content-width',
+    padding = 4,
   }: Props = $props();
 </script>
 
 <div
-  class="overflow-hidden rounded-xl border border-static bg-surface shadow-container {additionalClasses}"
+  class="overflow-hidden rounded-lg border border-static bg-surface shadow-container {additionalClasses}"
 >
   {#if Header}
     <header
-      class="flex h-12 items-center px-4"
+      class="flex min-h-12 items-center px-4"
       class:border-b={headerBorder}
       class:border-static={headerBorder}
     >
@@ -31,7 +31,7 @@
     </header>
   {/if}
   {#if children}
-    <div class={variant === 'full-width' ? '' : 'p-4 pb-5'}>
+    <div class={`p-${padding}`}>
       {@render children()}
     </div>
   {/if}

package/dist/components/card/Card.svelte.d.ts

@@ -4,7 +4,7 @@ type Props = {
     children: Snippet;
     headerBorder?: boolean;
     class?: string;
-    variant?: 'full-width' | 'content-width';
+    padding?: number;
 };
 declare const Card: import("svelte").Component<Props, {}, "">;
 type Card = ReturnType<typeof Card>;

package/dist/components/card/CardWrapper.svelte

@@ -20,15 +20,23 @@
 
 <div class="wrapper {variant} {additionalClasses}">
   {#if Header}
-    <header class="wrapper-header">
+    <header
+      class="flex w-full items-center justify-between {variant === 'default'
+        ? 'min-h-10 px-4'
+        : 'min-h-8 px-3'}"
+    >
       {@render Header()}
     </header>
   {/if}
-  <div class="flex w-full !overflow-hidden [&>*]:w-full [&>*]:rounded-xl">
+  <div
+    class="flex w-full !overflow-hidden [&>*]:w-full {variant === 'default'
+      ? '[&>*]:rounded-xl'
+      : '[&>*]:rounded-[10px]'}"
+  >
     {@render children()}
   </div>
   {#if Footer}
-    <footer class="wrapper-footer">
+    <footer class="flex min-h-8 w-full items-center {variant === 'default' ? 'px-4' : 'px-3'}">
       {@render Footer()}
     </footer>
   {/if}
@@ -41,17 +49,17 @@
 
     flex-direction: column;
 
-    border-radius: 1rem;
-
     --tw-bg-opacity: 1;
 
-    background-color: rgb(251 251 251 / var(--tw-bg-opacity, 1))
+    background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1))
 }
 
   .wrapper.default {
 
     gap: 0.25rem;
 
+    border-radius: 1rem;
+
     padding: 0.25rem
 }
 
@@ -59,31 +67,16 @@
 
     gap: 0.125rem;
 
-    padding: 0.125rem
-}
-
-  .wrapper-header {
-
-    display: flex;
-
-    min-height: 2rem;
+    border-radius: 0.75rem;
 
-    width: 100%;
-
-    align-items: center;
-
-    justify-content: space-between;
-
-    padding-left: 1rem;
-
-    padding-right: 1rem
+    padding: 0.125rem
 }
 
   .wrapper-footer {
 
     display: flex;
 
-    min-height: 2.5rem;
+    min-height: 2rem;
 
     width: 100%;
 

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

@@ -1 +1,2 @@
 export { default as Card } from './Card.svelte';
+export { default as CardWrapper } from './CardWrapper.svelte';

package/dist/components/card/index.js

@@ -1 +1,2 @@
 export { default as Card } from './Card.svelte';
+export { default as CardWrapper } from './CardWrapper.svelte';

package/dist/components/graphs/scatterplot/Scatterplot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { backgroundColor } from '../../../tokens';
+  import { backgroundColor, textColor } from '../../../tokens';
   import Icon from '../../icons/Icon.svelte';
   import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
   import type {
@@ -11,7 +11,13 @@
   import Tooltip from '../../tooltip/Tooltip.svelte';
   import type { Snippet } from 'svelte';
 
-  export type DataPoint = { value: [number, number]; metadata: any; error_value?: number };
+  export type DataPoint = {
+    value: [number, number];
+    metadata: any;
+    error_value?: number;
+    disagreement?: boolean | null;
+    highlighted?: boolean | null;
+  };
 
   export type ScatterPlotEchartsEvent = echarts.ECElementEvent & {
     data: DataPoint;
@@ -29,6 +35,7 @@
     showConfidenceBand?: boolean;
     showLegend?: boolean;
     legendItems?: LegendItem[];
+    highlightIndex?: number | null;
     children?: Snippet;
   } & Omit<GenericChartProps, 'timeIndex'>;
 
@@ -46,6 +53,7 @@
       { label: 'Count', color: backgroundColor['blue-inverse'], type: 'point' },
       { label: 'Perfect agreement', color: backgroundColor['lilac-inverse'], type: 'line' },
     ],
+    highlightIndex = null,
     children,
     ...props
   }: ScatterPlotProps = $props();
@@ -85,6 +93,7 @@
     const xValue = api.value(0) as number;
     const yValue = api.value(1) as number;
     const error = api.value(2) as number;
+    const disagreement = api.value(3) as number;
 
     const highPoint = api.coord([xValue, yValue + error]);
     const lowPoint = api.coord([xValue, yValue - error]);
@@ -98,8 +107,7 @@
     const baseWidth = Array.isArray(sizeValue) ? sizeValue[0] : 10;
     const halfWidth = Math.min((baseWidth ?? 10) * 1.5, 3);
     const style = {
-      stroke: api.visual('color') as string,
-      fill: undefined,
+      stroke: disagreement ? textColor['icon-tertiary'] : backgroundColor['blue-inverse'],
     };
 
     return {
@@ -148,7 +156,7 @@
     const series: SeriesOption[] = [];
     const errorBarData = data
       .filter((d) => d.error_value != 0)
-      .map((d) => [...d.value, d.error_value]);
+      .map((d) => [...d.value, d.error_value, d.disagreement ? 1 : 0]);
 
     if (props.lineData && props.lineData.length > 0) {
       const extendedLineData = [
@@ -170,7 +178,6 @@
           disabled: true,
         },
         silent: true,
-        zlevel: 0,
       });
 
       if (showConfidenceBand && props.lineData && props.lineData.length > 0) {
@@ -205,7 +212,6 @@
             disabled: true,
           },
           silent: true,
-          zlevel: 0,
         });
       }
     }
@@ -215,17 +221,43 @@
       data,
       type: 'scatter',
       itemStyle: {
-        color: backgroundColor['blue-inverse'],
-        opacity: 0.8,
+        color: (params: any) =>
+          params?.data?.disagreement ? textColor['icon-tertiary'] : backgroundColor['blue-inverse'],
+        opacity: 1,
       },
       emphasis: {
         itemStyle: {
-          color: backgroundColor['blue-inverse'],
+          color: (params: any) => {
+            const point = params?.data as DataPoint;
+            return point?.disagreement
+              ? textColor['icon-tertiary']
+              : backgroundColor['blue-inverse'];
+          },
           opacity: 1,
         },
       },
       animation: false,
-      zlevel: 1,
+    });
+
+    const p =
+      highlightIndex !== null && highlightIndex >= 0 && highlightIndex < data.length
+        ? data[highlightIndex]
+        : null;
+    series.push({
+      id: 'highlight-overlay',
+      type: 'scatter',
+      data: [p],
+      symbolSize: 16,
+      itemStyle: {
+        color: (params: any) => {
+          const point = params?.data as DataPoint;
+          return point?.disagreement
+            ? backgroundColor['neutral-hover']
+            : backgroundColor['blue-hover'];
+        },
+      },
+      z: -1,
+      silent: true,
     });
 
     if (errorBarData.length > 0) {
@@ -233,16 +265,11 @@
         type: 'custom',
         name: 'error',
         silent: true,
-        itemStyle: {
-          borderWidth: 1.5,
-          color: backgroundColor['blue-inverse'],
-        },
+        itemStyle: { borderWidth: 1.5 },
         renderItem: renderErrorBarItem,
         data: errorBarData,
-        zlevel: 0,
       });
     }
-
     return {
       xAxis: {
         type: 'value',

package/dist/components/graphs/scatterplot/Scatterplot.svelte.d.ts

@@ -4,6 +4,8 @@ export type DataPoint = {
     value: [number, number];
     metadata: any;
     error_value?: number;
+    disagreement?: boolean | null;
+    highlighted?: boolean | null;
 };
 export type ScatterPlotEchartsEvent = echarts.ECElementEvent & {
     data: DataPoint;
@@ -19,6 +21,7 @@ type ScatterPlotProps = {
     showConfidenceBand?: boolean;
     showLegend?: boolean;
     legendItems?: LegendItem[];
+    highlightIndex?: number | null;
     children?: Snippet;
 } & Omit<GenericChartProps, 'timeIndex'>;
 declare const Scatterplot: import("svelte").Component<ScatterPlotProps, {}, "">;

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

@@ -8,6 +8,7 @@
     | 'secondary'
     | 'transparent'
     | 'outline'
+    | 'accent'
     | 'danger'
     | 'secondary-inverse'
     | 'transparent-inverse';
@@ -164,6 +165,14 @@
 }
   .color-secondary:hover {
     background-color: #12192A1A
+}
+  .color-accent {
+    background-color: #5750ee1A;
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+  .color-accent:hover {
+    background-color: #5750ee40
 }
   .color-transparent {
     background-color: transparent;

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' | 'outline' | 'danger' | 'secondary-inverse' | 'transparent-inverse';
+type Variant = 'primary' | 'secondary' | 'transparent' | 'outline' | 'accent' | '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' | 'IntersectThree' | '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 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' | 'IntersectThree' | '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' | 'Users' | '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

@@ -115,6 +115,7 @@ import TrashSimple from 'phosphor-svelte/lib/TrashSimple';
 import TreeStructure from 'phosphor-svelte/lib/TreeStructure';
 import UserCircle from 'phosphor-svelte/lib/UserCircle';
 import UserPlus from 'phosphor-svelte/lib/UserPlus';
+import Users from 'phosphor-svelte/lib/Users';
 import Video from 'phosphor-svelte/lib/Video';
 import Warning from 'phosphor-svelte/lib/Warning';
 import WarningCircle from 'phosphor-svelte/lib/WarningCircle';
@@ -240,6 +241,7 @@ export const iconMap = {
     TreeStructure,
     UserCircle,
     UserPlus,
+    Users,
     Video,
     Warning,
     WarningCircle,

package/dist/components/input/Input.svelte

@@ -6,6 +6,7 @@
 
   interface InputProps extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
     label?: string | null;
+    labelPlacement?: 'top' | 'left';
     id?: string | undefined;
     variant?: 'primary' | 'secondary' | 'transparent' | 'borderless';
     validator?: (a: string | number) => boolean;
@@ -23,6 +24,7 @@
 
   let {
     label = null,
+    labelPlacement = 'top',
     variant = 'primary',
     value = $bindable(),
     type = 'text',
@@ -67,9 +69,18 @@
   export type InputSize = 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
 </script>
 
-<div class="flex w-full flex-col gap-2">
+<div
+  class="flex w-full gap-2"
+  class:flex-col={labelPlacement === 'top'}
+  class:items-center={labelPlacement === 'left'}
+>
   {#if label}
-    <label for={id ?? inputId} class="block px-1 text-sm capitalize text-secondary">
+    <label
+      for={id ?? inputId}
+      class="flex text-sm capitalize text-secondary {labelPlacement === 'left'
+        ? 'w-1/4'
+        : 'w-full'}"
+    >
       {label}
       {#if rest.required}
         <span class="ml-0.5 text-danger">*</span>
@@ -77,51 +88,53 @@
     </label>
   {/if}
 
-  <div
-    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">
-      {@render prefix?.({ valid })}
-    </div>
-    <input
-      {id}
-      class="inline leading-none"
-      class:has-text={value}
-      class:has-placeholder={rest.placeholder}
-      aria-label={label}
-      {type}
-      oninput={handleInput}
-      onblur={handleBlur}
-      bind:this={input}
-      bind:value
-      {...rest}
-    />
-    <div class="whitespace-nowrap text-secondary">
-      {@render suffix?.()}
+  <div class="flex-1">
+    <div
+      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">
+        {@render prefix?.({ valid })}
+      </div>
+      <input
+        {id}
+        class="inline leading-none"
+        class:has-text={value}
+        class:has-placeholder={rest.placeholder}
+        aria-label={label}
+        {type}
+        oninput={handleInput}
+        onblur={handleBlur}
+        bind:this={input}
+        bind:value
+        {...rest}
+      />
+      <div class="whitespace-nowrap text-secondary">
+        {@render suffix?.()}
+      </div>
+
+      {#if clearable && value}
+        <IconButton
+          variant="transparent"
+          rounded={false}
+          size="xs"
+          onclick={() => {
+            value = '';
+            input?.focus();
+            onclear();
+          }}
+        >
+          <Icon iconName="X" />
+        </IconButton>
+      {/if}
     </div>
 
-    {#if clearable && value}
-      <IconButton
-        variant="transparent"
-        rounded={false}
-        size="xs"
-        onclick={() => {
-          value = '';
-          input?.focus();
-          onclear();
-        }}
-      >
-        <Icon iconName="X" />
-      </IconButton>
-    {/if}
+    {@render error?.()}
   </div>
-
-  {@render error?.()}
 </div>
 
 <style>
@@ -191,7 +204,7 @@ input::placeholder {
 
     --tw-bg-opacity: 1;
 
-    background-color: rgb(251 251 251 / var(--tw-bg-opacity, 1))
+    background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1))
 }
 
   .transparent {

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

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
 interface InputProps extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
     label?: string | null;
+    labelPlacement?: 'top' | 'left';
     id?: string | undefined;
     variant?: 'primary' | 'secondary' | 'transparent' | 'borderless';
     validator?: (a: string | number) => boolean;

package/dist/components/legend/components/legend-item.svelte

@@ -19,7 +19,7 @@
 >
   <div class="flex h-2 w-2 flex-shrink-0 rounded-sm" style="background-color: {color}"></div>
   <div
-    class="flex max-w-24 select-none truncate text-xs"
+    class="flex max-w-40 select-none truncate text-xs"
     class:text-secondary={!selected}
     class:text-primary={selected}
   >

package/dist/components/legend/components/legend-root.svelte

@@ -9,14 +9,14 @@
   let { children, items }: Props = $props();
 </script>
 
-<div class="inline-flex w-full flex-col items-center rounded-[10px] bg-neutral">
+<div class="inline-flex w-full flex-col items-center rounded-[10px] bg-base">
   <div
     class="flex w-full px-0.5 pt-0.5 [&>*]:rounded-lg [&>*]:border [&>*]:border-static [&>*]:p-1"
   >
     {@render children()}
   </div>
 
-  <div class="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 overflow-clip py-1">
+  <div class="flex flex-wrap items-center justify-center gap-1 overflow-clip p-1">
     {#if items}
       {@render items()}
     {/if}

package/dist/components/stat-card/StatCard.stories.svelte

@@ -38,3 +38,26 @@
     editable: true,
   }}
 />
+
+<Story
+  name="Primary Variant"
+  args={{
+    title: 'Primary Stat',
+    value: '42',
+    unit: 'units',
+    variant: 'primary',
+  }}
+/>
+
+<Story name="Size Variants" asChild>
+  <div class="flex flex-col gap-4">
+    <div class="flex flex-col items-center gap-2">
+      <p class="text-sm text-secondary">Small</p>
+      <StatCard title="Small Size" value="123" unit="units" size="sm" />
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <p class="text-sm text-secondary">Medium</p>
+      <StatCard title="Medium Size" value="123" unit="units" size="md" />
+    </div>
+  </div>
+</Story>

package/dist/components/stat-card/StatCard.svelte

@@ -15,7 +15,8 @@
     editable?: boolean;
     onsubmit?: (value: string | number) => void;
     inputType?: 'text' | 'number';
-    variant?: 'default' | 'light';
+    variant?: 'primary' | 'secondary';
+    size?: 'sm' | 'md';
   }
 
   let {
@@ -26,8 +27,9 @@
     showTitleTooltip = false,
     editable = false,
     inputType = 'text',
-    variant = 'default',
+    variant = 'secondary',
     onsubmit,
+    size = 'md',
   }: Props = $props();
   const formattedValue = $derived(typeof value === 'number' ? value.toLocaleString() : value);
   let isEditing = $state(false);
@@ -94,16 +96,23 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
   data-testid="stat-card-body"
-  class="flex w-full flex-shrink-0 flex-grow basis-0 flex-col items-start gap-2 overflow-clip rounded-lg p-4 text-left transition-colors"
-  class:bg-neutral={variant === 'default'}
-  class:bg-surface={variant === 'light'}
+  class="flex w-full flex-shrink-0 flex-grow basis-0 flex-col items-start gap-2 overflow-clip rounded-lg text-left transition-colors"
+  class:bg-neutral={variant === 'secondary'}
+  class:bg-surface={variant === 'primary'}
+  class:shadow-container={variant === 'primary'}
+  class:p-4={size === 'md'}
+  class:p-3={size === 'sm'}
   class:hover:bg-neutral-hover={editable && !isEditing && value !== null}
   class:cursor-pointer={editable && !isEditing && value !== null}
   onclick={handleCardClick}
   onkeydown={editable && !isEditing && value !== null ? handleInputKeydown : undefined}
   aria-label={editable && !isEditing && value !== null ? `Edit ${title}` : undefined}
 >
-  <p class="flex items-center justify-start gap-2 truncate font-medium text-secondary">
+  <p
+    class="flex items-center justify-start gap-2 truncate font-medium text-secondary"
+    class:text-label={size === 'sm'}
+    class:text-sm={size === 'md'}
+  >
     {title}
     {#if titleTooltip && showTitleTooltip}
       <Tooltip>
@@ -118,7 +127,7 @@
       </Tooltip>
     {/if}
   </p>
-  <div class="flex h-8 w-full items-center gap-1">
+  <div class="flex w-full items-center gap-1" class:h-8={size === 'md'} class:h-7={size === 'sm'}>
     {#if value !== null}
       {#if isEditing}
         <div class="flex-1">
@@ -132,13 +141,21 @@
         </div>
       {:else}
         <div class="flex flex-1 flex-nowrap items-baseline gap-1">
-          <p class="text-2xl font-medium">{formattedValue}</p>
+          <p class="font-medium" class:text-2xl={size === 'md'} class:text-xl={size === 'sm'}>
+            {formattedValue}
+          </p>
           {#if unit}
-            <p class="flex-1 truncate text-2xl font-medium text-tertiary">{unit}</p>
+            <p
+              class="flex-1 truncate font-medium text-tertiary"
+              class:text-2xl={size === 'md'}
+              class:text-xl={size === 'sm'}
+            >
+              {unit}
+            </p>
           {/if}
         </div>
         {#if editable}
-          <IconButton onclick={(e) => startEditing(e)}>
+          <IconButton onclick={(e) => startEditing(e)} rounded={false}>
             <Icon iconName="PencilSimple" />
           </IconButton>
         {/if}

package/dist/components/stat-card/StatCard.svelte.d.ts

@@ -7,7 +7,8 @@ interface Props {
     editable?: boolean;
     onsubmit?: (value: string | number) => void;
     inputType?: 'text' | 'number';
-    variant?: 'default' | 'light';
+    variant?: 'primary' | 'secondary';
+    size?: 'sm' | 'md';
 }
 declare const StatCard: import("svelte").Component<Props, {}, "">;
 type StatCard = ReturnType<typeof StatCard>;

package/dist/components/textarea/Textarea.svelte

@@ -9,6 +9,7 @@
     input?: HTMLTextAreaElement;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
     label?: string;
+    labelPlacement?: 'top' | 'left';
     error?: Snippet;
     placeholder?: string;
   }
@@ -20,6 +21,7 @@
     onkeydown = () => {},
     input = $bindable(),
     label,
+    labelPlacement = 'top',
     placeholder,
     error,
     id,
@@ -66,29 +68,42 @@
   });
 </script>
 
-{#if label}
-  <label for={inputId} class="block px-1 py-2 text-sm text-secondary">
-    {label}
-    {#if rest.required}
-      <span class="ml-0.5 text-danger">*</span>
-    {/if}
-  </label>
-{/if}
+<div
+  class="flex w-full gap-2"
+  class:flex-col={labelPlacement === 'top'}
+  class:items-start={labelPlacement === 'left'}
+>
+  {#if label}
+    <label
+      for={inputId}
+      class="flex text-sm capitalize text-secondary {labelPlacement === 'left'
+        ? 'w-1/4'
+        : 'w-full'}"
+    >
+      {label}
+      {#if rest.required}
+        <span class="ml-0.5 text-danger">*</span>
+      {/if}
+    </label>
+  {/if}
 
-<textarea
-  id={inputId}
-  class="flex w-full items-center gap-1 rounded-lg border border-input bg-surface px-3 py-2 shadow-input focus-within:border-focus hover:border-hover {className ??
-    ''}"
-  class:!border-error={error}
-  class:has-text={value}
-  class:has-placeholder={placeholder}
-  {placeholder}
-  oninput={handleInputInternal}
-  onblur={handleBlurInternal}
-  bind:this={input}
-  {value}
-  {...rest}
-  {onkeydown}
-></textarea>
+  <div class="flex-1">
+    <textarea
+      id={inputId}
+      class="flex min-h-10 w-full items-center gap-1 rounded-lg border border-input bg-surface px-3 py-2 shadow-input transition-colors hover:border-hover focus:border-focus focus:outline-none {className ??
+        ''}"
+      class:!border-error={error}
+      class:has-text={value}
+      class:has-placeholder={placeholder}
+      {placeholder}
+      oninput={handleInputInternal}
+      onblur={handleBlurInternal}
+      bind:this={input}
+      {value}
+      {...rest}
+      {onkeydown}
+    ></textarea>
 
-{@render error?.()}
+    {@render error?.()}
+  </div>
+</div>

package/dist/components/textarea/Textarea.svelte.d.ts

@@ -7,6 +7,7 @@ interface TextareaProps extends HTMLTextareaAttributes {
     input?: HTMLTextAreaElement;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
     label?: string;
+    labelPlacement?: 'top' | 'left';
     error?: Snippet;
     placeholder?: string;
 }

package/dist/tokens/colors.js

@@ -1,6 +1,6 @@
 export const colors = {
     base: {
-        mist: '#fbfbfb',
+        mist: '#fafafa',
         snow: '#f6f7f7',
         white: {
             default: '#FFFFFF',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.6.3",
+  "version": "2.6.5",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",