@reshape-biotech/design-system 2.7.34 → 2.7.36

package/dist/components/select/Select.stories.svelte

@@ -2,6 +2,11 @@
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import * as Select from './index';
   import { Icon } from '../icons';
+  import Hash from 'phosphor-svelte/lib/Hash';
+  import Ruler from 'phosphor-svelte/lib/Ruler';
+  import Timer from 'phosphor-svelte/lib/Timer';
+  import ChartLine from 'phosphor-svelte/lib/ChartLine';
+  import Database from 'phosphor-svelte/lib/Database';
 
   const { Story } = defineMeta({
     title: 'Design System/Select(New)',
@@ -33,6 +38,8 @@
   let selectedValueMultiple = $state<string[]>([]);
   let selectedValueSinglePreselected = $state<string | undefined>('vegetables');
   let selectedValueMultiplePreselected = $state<string[]>(['fruits', 'grains']);
+  let selectedValueSm = $state<string | undefined>(undefined);
+  let selectedValueMd = $state<string | undefined>(undefined);
 
   const customIconItems = [
     { value: 'insect_count', label: 'Insect count', iconName: 'Hash' },
@@ -42,6 +49,15 @@
   ];
   let selectedCustomItems = $state<string[]>(['insect_count', 'leaf_area']);
 
+  const itemsWithIcons = [
+    { value: 'analytics', label: 'Analytics', icon: Hash },
+    { value: 'measurements', label: 'Measurements', icon: Ruler },
+    { value: 'tracking', label: 'Time Tracking', icon: Timer },
+    { value: 'charts', label: 'Charts', icon: ChartLine },
+    { value: 'database', label: 'Database', icon: Database },
+  ];
+  let selectedValueWithIcons = $state<string | undefined>(undefined);
+
   const handleRemoveCustomItem = (itemValue: string) => {
     selectedCustomItems = selectedCustomItems.filter((v) => v !== itemValue);
   };
@@ -53,8 +69,102 @@
       (v) => v !== itemValue
     );
   };
+
+  // Generate a long list of countries to test scrolling
+  const countries = [
+    { value: 'us', label: 'United States' },
+    { value: 'uk', label: 'United Kingdom' },
+    { value: 'ca', label: 'Canada' },
+    { value: 'au', label: 'Australia' },
+    { value: 'de', label: 'Germany' },
+    { value: 'fr', label: 'France' },
+    { value: 'it', label: 'Italy' },
+    { value: 'es', label: 'Spain' },
+    { value: 'jp', label: 'Japan' },
+    { value: 'cn', label: 'China' },
+    { value: 'in', label: 'India' },
+    { value: 'br', label: 'Brazil' },
+    { value: 'mx', label: 'Mexico' },
+    { value: 'za', label: 'South Africa' },
+    { value: 'eg', label: 'Egypt' },
+    { value: 'ng', label: 'Nigeria' },
+    { value: 'ar', label: 'Argentina' },
+    { value: 'cl', label: 'Chile' },
+    { value: 'co', label: 'Colombia' },
+    { value: 'pe', label: 'Peru' },
+    { value: 'se', label: 'Sweden' },
+    { value: 'no', label: 'Norway' },
+    { value: 'dk', label: 'Denmark' },
+    { value: 'fi', label: 'Finland' },
+    { value: 'pl', label: 'Poland' },
+    { value: 'nl', label: 'Netherlands' },
+    { value: 'be', label: 'Belgium' },
+    { value: 'ch', label: 'Switzerland' },
+    { value: 'at', label: 'Austria' },
+    { value: 'gr', label: 'Greece' },
+    { value: 'pt', label: 'Portugal' },
+    { value: 'ie', label: 'Ireland' },
+    { value: 'nz', label: 'New Zealand' },
+    { value: 'sg', label: 'Singapore' },
+    { value: 'my', label: 'Malaysia' },
+    { value: 'th', label: 'Thailand' },
+    { value: 'id', label: 'Indonesia' },
+    { value: 'ph', label: 'Philippines' },
+    { value: 'vn', label: 'Vietnam' },
+    { value: 'kr', label: 'South Korea' },
+  ];
+  let selectedCountry = $state<string | undefined>(undefined);
 </script>
 
+<Story name="Size Variants" asChild>
+  <div class="p-4">
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col gap-2">
+        <p class="text-sm font-medium text-secondary">Small (sm)</p>
+        <Select.Root bind:value={selectedValueSm} items={foodGroups} type="single">
+          <Select.Trigger
+            class="w-[250px]"
+            size="sm"
+            placeholder={'Select a food group'}
+            displayValue={foodGroups.find((f) => f.value === selectedValueSm)?.label}
+          />
+          <Select.Portal>
+            <Select.Content>
+              {#each foodGroups as item (item.value)}
+                <Select.Item value={item.value} label={item.label} />
+              {/each}
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+        <div class="text-xs text-tertiary">
+          Selected: {selectedValueSm ?? 'Nothing'}
+        </div>
+      </div>
+      <div class="flex flex-col gap-2">
+        <p class="text-sm font-medium text-secondary">Medium (md) - Default</p>
+        <Select.Root bind:value={selectedValueMd} items={foodGroups} type="single">
+          <Select.Trigger
+            class="w-[250px]"
+            size="md"
+            placeholder={'Select a food group'}
+            displayValue={foodGroups.find((f) => f.value === selectedValueMd)?.label}
+          />
+          <Select.Portal>
+            <Select.Content>
+              {#each foodGroups as item (item.value)}
+                <Select.Item value={item.value} label={item.label} />
+              {/each}
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+        <div class="text-xs text-tertiary">
+          Selected: {selectedValueMd ?? 'Nothing'}
+        </div>
+      </div>
+    </div>
+  </div>
+</Story>
+
 <Story name="Default (Single Select)" asChild>
   <div class="p-4">
     <Select.Root bind:value={selectedValueSingle} items={foodGroups} type="single" open>
@@ -187,23 +297,33 @@
   </div>
 </Story>
 
-<Story name="Multiple Select with Custom Icons and Dismissible Tags" asChild>
+<Story name="With Icons (Single Select)" asChild>
   <div class="p-4">
-    <Select.Root bind:value={selectedCustomItems} items={customIconItems} type="multiple">
-      <Select.MultiSelectTrigger
-        class="w-[350px]"
-        selectedValues={selectedCustomItems}
-        items={customIconItems}
-        placeholder="Select metrics..."
-        onRemoveItem={handleRemoveCustomItem}
-      />
+    <Select.Root bind:value={selectedValueWithIcons} items={itemsWithIcons} type="single">
+      <Select.Trigger class="w-[250px]" placeholder={'Select an option'}>
+        {#snippet children()}
+          {#if selectedValueWithIcons}
+            {@const selectedItem = itemsWithIcons.find((item) => item.value === selectedValueWithIcons)}
+            {#if selectedItem}
+              <div class="flex items-center gap-2 pl-1">
+                <Icon icon={selectedItem.icon} color="secondary" />
+                <span>{selectedItem.label}</span>
+              </div>
+            {:else}
+              <span class="text-tertiary pl-1">Select an option</span>
+            {/if}
+          {:else}
+            <span class="text-tertiary pl-1">Select an option</span>
+          {/if}
+        {/snippet}
+      </Select.Trigger>
       <Select.Portal>
         <Select.Content>
-          {#each customIconItems as item (item.value)}
+          {#each itemsWithIcons as item (item.value)}
             <Select.Item value={item.value} label={item.label}>
               {#snippet children()}
                 <div class="flex items-center gap-2">
-                  <Icon icon={item.iconName as any} class="h-4 w-4" />
+                  <Icon icon={item.icon} color="secondary" />
                   <span>{item.label}</span>
                 </div>
               {/snippet}
@@ -212,8 +332,33 @@
         </Select.Content>
       </Select.Portal>
     </Select.Root>
-    <div class="mt-2 rounded bg-neutral p-2 text-sm">
-      Selected Values: {selectedCustomItems.join(', ') || 'Nothing'}
+    <div class="mt-2 rounded bg-gray-100 p-2 text-sm">
+      Selected: {selectedValueWithIcons ?? 'Nothing'}
+    </div>
+  </div>
+</Story>
+
+<Story name="Long List with Scrolling" asChild>
+  <div class="p-4">
+    <Select.Root bind:value={selectedCountry} items={countries} type="single">
+      <Select.Trigger
+        class="w-[250px]"
+        placeholder={'Select a country'}
+        displayValue={countries.find((c) => c.value === selectedCountry)?.label}
+      />
+      <Select.Portal>
+        <Select.Content>
+          {#each countries as item (item.value)}
+            <Select.Item value={item.value} label={item.label} />
+          {/each}
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+    <div class="mt-2 rounded bg-gray-100 p-2 text-sm">
+      Selected: {selectedCountry ?? 'Nothing'}
+    </div>
+    <div class="mt-2 rounded bg-blue-50 p-2 text-xs text-blue-700">
+      This story demonstrates the 80vh max-height with overflow scrolling for long lists (40 items).
     </div>
   </div>
 </Story>

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

@@ -21,14 +21,14 @@
   {...restProps}
   {sideOffset}
   class={twMerge(
-    'relative z-50 w-[var(--bits-select-anchor-width)] min-w-[8rem] overflow-hidden rounded-lg bg-surface text-primary shadow-menu',
+    'relative z-50 w-[var(--bits-select-anchor-width)] min-w-[8rem] max-h-[min(calc(var(--bits-select-content-available-height)-40px),800px)] overflow-hidden rounded-lg bg-surface text-primary shadow-menu',
     className
   )}
 >
   <SelectPrimitive.ScrollUpButton class="flex justify-center">
     <Icon color="tertiary" icon={CaretUp} />
   </SelectPrimitive.ScrollUpButton>
-  <SelectPrimitive.Viewport class="p-1 ">
+  <SelectPrimitive.Viewport class="p-1 overflow-y-auto">
     {@render children()}
   </SelectPrimitive.Viewport>
   <SelectPrimitive.ScrollDownButton class="flex justify-center">

package/dist/components/select/components/SelectGroupHeading.svelte

@@ -11,7 +11,7 @@
 
   let { class: className = '', children, ...restProps }: Props = $props();
 
-  const baseClasses = 'py-1.5 pl-2 pr-2 text-sm font-semibold text-muted-foreground';
+  const baseClasses = 'py-1.5 pl-2 pr-2 text-label font-medium text-tertiary';
 </script>
 
 <SelectPrimitive.GroupHeading {...restProps} class="{baseClasses} {className}">

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

@@ -14,7 +14,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-md p-3 text-sm outline-none
+        relative flex w-full h-auto min-h-10 gap-2 cursor-default select-none items-center justify-between rounded-md px-3 py-2 text-sm outline-none cursor-pointer
         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

@@ -12,6 +12,7 @@
     class?: string;
     placeholder?: string;
     displayValue?: string;
+    size?: 'sm' | 'md';
   }
 
   let {
@@ -20,25 +21,32 @@
     children,
     placeholder = 'Select an option',
     displayValue = undefined,
+    size = 'md',
     ...restProps
   }: 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 focus:ring-0 disabled:cursor-not-allowed disabled:border-transparent disabled:bg-neutral disabled:opacity-75 transition-colors shadow-input';
+  const sizeClasses = {
+    sm: 'h-8 p-1',
+    md: 'h-10 p-1.5',
+  };
+
+  const baseClasses = $derived(
+    `flex w-full items-center justify-between !rounded-lg border border-input bg-surface 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 ${sizeClasses[size]}`
+  );
 </script>
 
 <SelectPrimitive.Trigger
   {...restProps}
-  class={baseClasses + ' ' + className}
+  class={`${baseClasses} ${className}`}
   aria-label={placeholder}
 >
   <div class="flex-1 truncate text-left">
     {#if children}
       {@render children()}
     {:else if displayValue !== undefined}
-      {displayValue}
+      <span class="pl-1">{displayValue}</span>
     {:else}
-      <span class="text-tertiary">{placeholder}</span>
+      <span class="text-tertiary pl-1">{placeholder}</span>
     {/if}
   </div>
   {#if TriggerIcon}

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

@@ -6,6 +6,7 @@ interface Props extends TriggerProps {
     class?: string;
     placeholder?: string;
     displayValue?: string;
+    size?: 'sm' | 'md';
 }
 declare const SelectTrigger: import("svelte").Component<Props, {}, "">;
 type SelectTrigger = ReturnType<typeof SelectTrigger>;

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

@@ -1,6 +1,12 @@
 <script module>
   import StatCard from './StatCard.svelte';
   import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Circle from 'phosphor-svelte/lib/Circle';
+  import TrendUp from 'phosphor-svelte/lib/TrendUp';
+  import TrendDown from 'phosphor-svelte/lib/TrendDown';
+  import CheckCircle from 'phosphor-svelte/lib/CheckCircle';
+  import WarningCircle from 'phosphor-svelte/lib/WarningCircle';
+  import { Icon } from '../icons';
 
   const { Story } = defineMeta({
     component: StatCard,
@@ -9,55 +15,115 @@
   });
 </script>
 
-<Story
-  name="Default"
-  args={{ title: 'Title', value: 'Value', unit: 'unit', titleTooltip: 'Title tooltip' }}
-/>
-
-<Story
-  name="Germination Rate"
-  args={{
-    title: 'Germination Rate',
-    value: '2',
-    unit: '%',
-    titleTooltip: 'Something that explains what this is...',
-    showTitleTooltip: true,
-  }}
-/>
-
-<Story name="Home Page" args={{ title: 'Current jobs', value: '3', unit: 'of 5' }} />
-
-<Story
-  name="Editable"
-  args={{
-    title: 'Germination Rate',
-    value: '2',
-    unit: '%',
-    titleTooltip: 'Something that explains what this is...',
-    showTitleTooltip: true,
-    editable: true,
-  }}
-/>
-
-<Story
-  name="Primary Variant"
-  args={{
-    title: 'Primary Stat',
-    value: '42',
-    unit: 'units',
-    variant: 'primary',
-  }}
-/>
-
-<Story name="Size Variants" asChild>
+<Story name="Basic" args={{ title: 'Total Users', value: '1,234', unit: 'users' }} />
+
+<Story name="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 class="flex flex-col gap-2">
+      <p class="text-sm font-medium text-secondary">Secondary (default)</p>
+      <StatCard title="Total Revenue" value="42,500" unit="$" />
+    </div>
+    <div class="flex flex-col gap-2">
+      <p class="text-sm font-medium text-secondary">Primary</p>
+      <StatCard title="Total Revenue" value="42,500" unit="$" variant="primary" />
+    </div>
+  </div>
+</Story>
+
+<Story name="Sizes" asChild>
+  <div class="flex flex-col gap-6">
+    <div class="flex flex-col gap-2">
+      <p class="text-sm font-medium text-secondary">Small (sm)</p>
+      <StatCard title="Active Jobs" value="12" unit="jobs" 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 class="flex flex-col gap-2">
+      <p class="text-sm font-medium text-secondary">Medium (md)</p>
+      <StatCard title="Active Jobs" value="12" unit="jobs" size="md" />
+    </div>
+  </div>
+</Story>
+
+
+<Story name="With Icons and Subtitles" asChild>
+  <div class="flex flex-col gap-4">
+    <StatCard title="Growth" value="23.4" unit="%" variant="primary" size="sm" border>
+      {#snippet titleIcon()}
+        <Icon icon={Circle} weight="fill" color="icon-accent" size={12} />
+      {/snippet}
+      {#snippet subtitle()}
+        15% increase from last quarter
+      {/snippet}
+    </StatCard>
+    <StatCard title="Warning" value="3" unit="alerts" size="md">
+      {#snippet titleIcon()}
+        <Icon icon={WarningCircle} weight="fill" color="icon-warning" size={16} />
+      {/snippet}
+      {#snippet subtitle()}
+        Requires immediate attention
+      {/snippet}
+    </StatCard>
+  </div>
+</Story>
+
+<Story name="With Borders" asChild>
+  <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-2">
+      <p class="text-sm font-medium text-secondary">Secondary with border</p>
+      <StatCard title="Total Items" value="456" unit="items" border />
     </div>
+    <div class="flex flex-col gap-2">
+      <p class="text-sm font-medium text-secondary">Primary with border</p>
+      <StatCard title="Total Items" value="456" unit="items" variant="primary" border />
+    </div>
+  </div>
+</Story>
+
+<Story name="With Tooltips" asChild>
+  <div class="flex flex-col gap-4">
+    <StatCard
+      title="Germination Rate"
+      value="87.5"
+      unit="%"
+      titleTooltip="The percentage of seeds that successfully germinated in the current batch"
+      showTitleTooltip={true}
+    />
+    <StatCard
+      title="Success Rate"
+      value="92"
+      unit="%"
+      variant="primary"
+      titleTooltip="Overall success rate across all operations"
+      showTitleTooltip={true}
+      size="sm"
+    />
+  </div>
+</Story>
+
+<Story name="Editable" asChild>
+  <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-2">
+      <p class="text-sm font-medium text-secondary">Click to edit</p>
+      <StatCard title="Target Value" value="1,000" unit="units" editable />
+    </div>
+    <div class="flex flex-col gap-2">
+      <p class="text-sm font-medium text-secondary">Editable with tooltip</p>
+      <StatCard
+        title="Threshold"
+        variant="primary"
+        border={true}
+        value="500"
+        unit="units"
+        editable
+        titleTooltip="Click to edit the threshold value"
+        showTitleTooltip={true}
+      />
+    </div>
+  </div>
+</Story>
+
+<Story name="Loading State" asChild>
+  <div class="flex flex-col gap-4">
+    <StatCard title="Loading Data" value={null} unit="items" />
+    <StatCard title="Fetching Results" value={null} variant="primary" size="sm" />
   </div>
 </Story>

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

@@ -3,13 +3,14 @@
   import PencilSimple from 'phosphor-svelte/lib/PencilSimple';
   import { Icon } from '../icons/index.js';
   import IconButton from '../icon-button/IconButton.svelte';
-  import Spinner from '../spinner/Spinner.svelte';
   import Tooltip from '../tooltip/Tooltip.svelte';
   import { Input } from '../input';
   import { tick } from 'svelte';
-
+  import type { Snippet } from 'svelte';
+  import SkeletonLoader from '../skeleton-loader/SkeletonLoader.svelte';
   interface Props {
     title: string;
+    titleIcon?: Snippet;
     value?: string | number | null;
     unit?: string | null;
     titleTooltip?: string;
@@ -18,11 +19,14 @@
     onsubmit?: (value: string | number) => void;
     inputType?: 'text' | 'number';
     variant?: 'primary' | 'secondary';
+    border?: boolean;
     size?: 'sm' | 'md';
+    subtitle?: Snippet;
   }
 
   let {
     title,
+    titleIcon,
     value = null,
     unit = '',
     titleTooltip = '',
@@ -30,7 +34,9 @@
     editable = false,
     inputType = 'text',
     variant = 'secondary',
+    border = false,
     onsubmit,
+    subtitle,
     size = 'md',
   }: Props = $props();
   const formattedValue = $derived(typeof value === 'number' ? value.toLocaleString() : value);
@@ -98,12 +104,15 @@
 <!-- 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 text-left transition-colors"
+  class="flex w-full flex-shrink-0 flex-grow basis-0 flex-col items-start 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:gap-2={size === 'md'}
+  class:gap-1={size === 'sm'}
+  class:border={border}
+  class:border-static={border}
   class:hover:bg-neutral-hover={editable && !isEditing && value !== null}
   class:cursor-pointer={editable && !isEditing && value !== null}
   onclick={handleCardClick}
@@ -115,11 +124,14 @@
     class:text-label={size === 'sm'}
     class:text-sm={size === 'md'}
   >
+    {#if titleIcon}
+      {@render titleIcon()}
+    {/if}
     {title}
     {#if titleTooltip && showTitleTooltip}
       <Tooltip>
         {#snippet trigger()}
-          <Icon color="icon-tertiary" icon={Info} />
+          <Icon color="icon-tertiary" icon={Info} class="cursor-help" />
         {/snippet}
         {#snippet content()}
           <span>
@@ -163,7 +175,16 @@
         {/if}
       {/if}
     {:else}
-      <Spinner />
+      <SkeletonLoader class="flex items-center">
+        {#snippet children({ Skeleton })}
+          <Skeleton class="h-7 w-20 rounded-md" />
+        {/snippet}
+      </SkeletonLoader>
     {/if}
   </div>
+  {#if subtitle}
+    <p class="text-xs text-tertiary">
+      {@render subtitle()}
+    </p>
+  {/if}
 </div>

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

@@ -1,5 +1,7 @@
+import type { Snippet } from 'svelte';
 interface Props {
     title: string;
+    titleIcon?: Snippet;
     value?: string | number | null;
     unit?: string | null;
     titleTooltip?: string;
@@ -8,7 +10,9 @@ interface Props {
     onsubmit?: (value: string | number) => void;
     inputType?: 'text' | 'number';
     variant?: 'primary' | 'secondary';
+    border?: boolean;
     size?: 'sm' | 'md';
+    subtitle?: Snippet;
 }
 declare const StatCard: import("svelte").Component<Props, {}, "">;
 type StatCard = ReturnType<typeof StatCard>;

package/dist/components/status-badge/StatusBadge.svelte

@@ -64,10 +64,11 @@
 }
 
   .badge-sm {
-    height: 1.5rem;
-    gap: 0.25rem;
+    height: 1.75rem;
+    gap: 0.5rem;
     padding-left: 0.25rem;
-    padding-right: 0.5rem
+    padding-right: 0.5rem;
+    font-size: 13px
 }
 
   .badge-sm .icon {

package/dist/components/stepper/components/stepper-step.svelte

@@ -37,14 +37,14 @@
   const stateVariants = {
     completed: {
       container: 'bg-transparent text-primary-inverse',
-      iconContainer: 'bg-primary ',
+      iconContainer: 'bg-accent-inverse',
       iconColor: 'text-surface',
       labelColor: 'text-primary',
       showIcon: true,
     },
     active: {
       container: 'bg-accent text-primary-inverse',
-      iconContainer: 'bg-primary ',
+      iconContainer: 'bg-accent-inverse',
       iconColor: 'text-surface',
       labelColor: 'text-primary',
       showIcon: false,
@@ -75,7 +75,7 @@
     aria-hidden="true"
   >
     {#if variant.showIcon}
-      <Icon class="h-3 w-3 {variant.iconColor}" icon={Check} />
+      <Icon class={variant.iconColor} icon={Check} />
     {:else}
       <span class="text-xs font-medium leading-none {variant.iconColor}">
         {stepNumber}