@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/primitives/Alert/Alert.stories.svelte

@@ -1,88 +1,88 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Alert from './Alert.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Alert',
-    component: Alert,
-    tags: ['autodocs'],
-    argTypes: {
-      color: {
-        control: 'select',
-        options: ['info', 'success', 'warning', 'error'],
-      },
-      dismissible: { control: 'boolean' },
-    },
-    parameters: {
-      docs: {
-        description: {
-          component: 'Contextual feedback messages for user actions or system states.',
-        },
-      },
-    },
-  });
-</script>
-
-<Story name="Info" args={{ color: 'info' }}>
-  {#snippet template(args)}
-    <Alert {...args}>
-      <span class="font-medium">Info!</span> This is an informational alert with helpful information.
-    </Alert>
-  {/snippet}
-</Story>
-
-<Story name="Success" args={{ color: 'success' }}>
-  {#snippet template(args)}
-    <Alert {...args}>
-      <span class="font-medium">Success!</span> Your changes have been saved successfully.
-    </Alert>
-  {/snippet}
-</Story>
-
-<Story name="Warning" args={{ color: 'warning' }}>
-  {#snippet template(args)}
-    <Alert {...args}>
-      <span class="font-medium">Warning!</span> Please review this information before proceeding.
-    </Alert>
-  {/snippet}
-</Story>
-
-<Story name="Error" args={{ color: 'error' }}>
-  {#snippet template(args)}
-    <Alert {...args}>
-      <span class="font-medium">Error!</span> Something went wrong. Please try again.
-    </Alert>
-  {/snippet}
-</Story>
-
-<Story name="Dismissible">
-  {#snippet template()}
-    <div class="space-y-4">
-      <Alert color="info" dismissible>
-        Click the X to dismiss this alert.
-      </Alert>
-      <Alert color="success" dismissible>
-        This success alert can also be dismissed.
-      </Alert>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="All Variants">
-  {#snippet template()}
-    <div class="space-y-4">
-      <Alert color="info">
-        <span class="font-medium">Info:</span> Just letting you know about something.
-      </Alert>
-      <Alert color="success">
-        <span class="font-medium">Success:</span> Great job! Everything worked.
-      </Alert>
-      <Alert color="warning">
-        <span class="font-medium">Warning:</span> Be careful about this action.
-      </Alert>
-      <Alert color="error">
-        <span class="font-medium">Error:</span> Something went wrong.
-      </Alert>
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Alert from './Alert.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Alert',
+    component: Alert,
+    tags: ['autodocs'],
+    argTypes: {
+      color: {
+        control: 'select',
+        options: ['info', 'success', 'warning', 'error'],
+      },
+      dismissible: { control: 'boolean' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Contextual feedback messages for user actions or system states.',
+        },
+      },
+    },
+  });
+</script>
+
+<Story name="Info" args={{ color: 'info' }}>
+  {#snippet template(args)}
+    <Alert {...args}>
+      <span class="font-medium">Info!</span> This is an informational alert with helpful information.
+    </Alert>
+  {/snippet}
+</Story>
+
+<Story name="Success" args={{ color: 'success' }}>
+  {#snippet template(args)}
+    <Alert {...args}>
+      <span class="font-medium">Success!</span> Your changes have been saved successfully.
+    </Alert>
+  {/snippet}
+</Story>
+
+<Story name="Warning" args={{ color: 'warning' }}>
+  {#snippet template(args)}
+    <Alert {...args}>
+      <span class="font-medium">Warning!</span> Please review this information before proceeding.
+    </Alert>
+  {/snippet}
+</Story>
+
+<Story name="Error" args={{ color: 'error' }}>
+  {#snippet template(args)}
+    <Alert {...args}>
+      <span class="font-medium">Error!</span> Something went wrong. Please try again.
+    </Alert>
+  {/snippet}
+</Story>
+
+<Story name="Dismissible">
+  {#snippet template()}
+    <div class="space-y-4">
+      <Alert color="info" dismissible>
+        Click the X to dismiss this alert.
+      </Alert>
+      <Alert color="success" dismissible>
+        This success alert can also be dismissed.
+      </Alert>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="All Variants">
+  {#snippet template()}
+    <div class="space-y-4">
+      <Alert color="info">
+        <span class="font-medium">Info:</span> Just letting you know about something.
+      </Alert>
+      <Alert color="success">
+        <span class="font-medium">Success:</span> Great job! Everything worked.
+      </Alert>
+      <Alert color="warning">
+        <span class="font-medium">Warning:</span> Be careful about this action.
+      </Alert>
+      <Alert color="error">
+        <span class="font-medium">Error:</span> Something went wrong.
+      </Alert>
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Alert/Alert.svelte

@@ -1,72 +1,72 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { InfoCircleOutline, CloseOutline } from "../Icons";
-  import {
-    alertColorVariants,
-    alertCloseButtonVariants,
-    type AlertColorVariant,
-  } from '../../tokens/variants.js';
-
-  const defaultLabels = {
-    close: 'Close',
-  };
-
-  interface Props {
-    title?: string;
-    message?: string;
-    type?: AlertColorVariant;
-    onClose?: () => void;
-    onclose?: () => void;
-    children?: Snippet;
-    labels?: Partial<typeof defaultLabels>;
-    [key: string]: unknown;
-  }
-
-  let {
-    title = "",
-    message = "",
-    type = "info",
-    onClose,
-    onclose,
-    children,
-    labels: userLabels = {},
-    ...restProps
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  let alertClasses = $derived(alertColorVariants[type] || alertColorVariants.info);
-  let closeButtonClasses = $derived(alertCloseButtonVariants[type] || alertCloseButtonVariants.info);
-
-  function handleClose() {
-    onClose?.();
-    onclose?.();
-  }
-
-  let showCloseButton = $derived(onClose !== undefined || onclose !== undefined);
-</script>
-
-<div class="flex items-center p-4 mb-4 text-sm rounded-lg {alertClasses}" role="alert" {...restProps}>
-  <InfoCircleOutline class="shrink-0 w-4 h-4 me-3" />
-  <span class="sr-only">{type}</span>
-  <div class="flex-1">
-    {#if title}
-      <span class="font-medium">{title}</span>
-    {/if}
-    {#if message}
-      <span class:mt-1={title}>{message}</span>
-    {/if}
-    {#if children}{@render children()}{/if}
-  </div>
-  {#if showCloseButton}
-<button
-      type="button"
-      class="ms-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex items-center justify-center h-8 w-8 {closeButtonClasses}"
-      aria-label={labels.close}
-      onclick={handleClose}
-    >
-      <span class="sr-only">{labels.close}</span>
-      <CloseOutline class="w-3 h-3" />
-    </button>
-  {/if}
-</div>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { InfoCircleOutline, CloseOutline } from "../Icons";
+  import {
+    alertColorVariants,
+    alertCloseButtonVariants,
+    type AlertColorVariant,
+  } from '../../tokens/variants.js';
+
+  const defaultLabels = {
+    close: 'Close',
+  };
+
+  interface Props {
+    title?: string;
+    message?: string;
+    type?: AlertColorVariant;
+    onClose?: () => void;
+    onclose?: () => void;
+    children?: Snippet;
+    labels?: Partial<typeof defaultLabels>;
+    [key: string]: unknown;
+  }
+
+  let {
+    title = "",
+    message = "",
+    type = "info",
+    onClose,
+    onclose,
+    children,
+    labels: userLabels = {},
+    ...restProps
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  let alertClasses = $derived(alertColorVariants[type] || alertColorVariants.info);
+  let closeButtonClasses = $derived(alertCloseButtonVariants[type] || alertCloseButtonVariants.info);
+
+  function handleClose() {
+    onClose?.();
+    onclose?.();
+  }
+
+  let showCloseButton = $derived(onClose !== undefined || onclose !== undefined);
+</script>
+
+<div class="flex items-center p-4 mb-4 text-sm rounded-lg {alertClasses}" role="alert" {...restProps}>
+  <InfoCircleOutline class="shrink-0 w-4 h-4 me-3" />
+  <span class="sr-only">{type}</span>
+  <div class="flex-1">
+    {#if title}
+      <span class="font-medium">{title}</span>
+    {/if}
+    {#if message}
+      <span class:mt-1={title}>{message}</span>
+    {/if}
+    {#if children}{@render children()}{/if}
+  </div>
+  {#if showCloseButton}
+<button
+      type="button"
+      class="ms-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex items-center justify-center h-8 w-8 {closeButtonClasses}"
+      aria-label={labels.close}
+      onclick={handleClose}
+    >
+      <span class="sr-only">{labels.close}</span>
+      <CloseOutline class="w-3 h-3" />
+    </button>
+  {/if}
+</div>

package/dist/primitives/Avatar/Avatar.spec.js

@@ -63,15 +63,15 @@ describe('Avatar with Initials', () => {
   test('initials container has gray colors', () => {
     const { container } = render(Avatar, { props: { initials: 'EF' } });
     const div = container.querySelector('div');
-    expect(div).toHaveClass('text-gray-600');
-    expect(div).toHaveClass('bg-gray-200');
+    expect(div).toHaveClass('text-text-secondary');
+    expect(div).toHaveClass('bg-bg-tertiary');
   });
 
-  test('initials container has dark mode colors', () => {
+  test('initials container uses token-based colors', () => {
     const { container } = render(Avatar, { props: { initials: 'GH' } });
     const div = container.querySelector('div');
-    expect(div).toHaveClass('dark:bg-gray-700');
-    expect(div).toHaveClass('dark:text-gray-300');
+    expect(div).toHaveClass('text-text-secondary');
+    expect(div).toHaveClass('bg-bg-tertiary');
   });
 });
 
@@ -81,16 +81,16 @@ describe('Avatar Default Placeholder', () => {
     expect(container.querySelector('svg')).toBeInTheDocument();
   });
 
-  test('placeholder container has bg-gray-200', () => {
+  test('placeholder container has bg-bg-tertiary', () => {
     const { container } = render(Avatar);
     const div = container.querySelector('div');
-    expect(div).toHaveClass('bg-gray-200');
+    expect(div).toHaveClass('bg-bg-tertiary');
   });
 
-  test('placeholder container has dark mode bg', () => {
+  test('placeholder container uses token-based bg', () => {
     const { container } = render(Avatar);
     const div = container.querySelector('div');
-    expect(div).toHaveClass('dark:bg-gray-700');
+    expect(div).toHaveClass('bg-bg-tertiary');
   });
 
   test('svg has correct sizing classes', () => {
@@ -100,10 +100,10 @@ describe('Avatar Default Placeholder', () => {
     expect(svg).toHaveClass('h-1/2');
   });
 
-  test('svg has text-gray-400 color', () => {
+  test('svg has text-muted-foreground color', () => {
     const { container } = render(Avatar);
     const svg = container.querySelector('svg');
-    expect(svg).toHaveClass('text-gray-400');
+    expect(svg).toHaveClass('text-muted-foreground');
   });
 });
 

package/dist/primitives/Avatar/Avatar.stories.svelte

@@ -1,94 +1,95 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Avatar from './Avatar.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Avatar',
-    component: Avatar,
-    tags: ['autodocs'],
-    argTypes: {
-      size: {
-        control: 'select',
-        options: ['xs', 'sm', 'md', 'lg', 'xl'],
-      },
-      src: { control: 'text' },
-      alt: { control: 'text' },
-      initials: { control: 'text' },
-    },
-    parameters: {
-      docs: {
-        description: {
-          component: 'User profile picture component with fallback to initials.',
-        },
-      },
-    },
-  });
-</script>
-
-<Story name="Default">
-  {#snippet template()}
-    <Avatar />
-  {/snippet}
-</Story>
-
-<Story name="With Initials" args={{ initials: 'JD' }}>
-  {#snippet template(args)}
-    <Avatar {...args} />
-  {/snippet}
-</Story>
-
-<Story name="With Image" args={{ src: 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><rect width="150" height="150" fill="#6366f1"/><circle cx="75" cy="55" r="30" fill="#fff"/><ellipse cx="75" cy="130" rx="45" ry="35" fill="#fff"/></svg>'), alt: 'User avatar' }}>
-  {#snippet template(args)}
-    <Avatar {...args} />
-  {/snippet}
-</Story>
-
-<Story name="All Sizes">
-  {#snippet template()}
-    <div class="flex items-end gap-4">
-      <div class="text-center">
-        <Avatar size="xs" initials="XS" />
-        <p class="text-xs text-gray-500 mt-1">xs</p>
-      </div>
-      <div class="text-center">
-        <Avatar size="sm" initials="SM" />
-        <p class="text-xs text-gray-500 mt-1">sm</p>
-      </div>
-      <div class="text-center">
-        <Avatar size="md" initials="MD" />
-        <p class="text-xs text-gray-500 mt-1">md</p>
-      </div>
-      <div class="text-center">
-        <Avatar size="lg" initials="LG" />
-        <p class="text-xs text-gray-500 mt-1">lg</p>
-      </div>
-      <div class="text-center">
-        <Avatar size="xl" initials="XL" />
-        <p class="text-xs text-gray-500 mt-1">xl</p>
-      </div>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Image Sizes">
-  {#snippet template()}
-    <div class="flex items-end gap-4">
-      <Avatar size="xs" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=1" />
-      <Avatar size="sm" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=2" />
-      <Avatar size="md" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=3" />
-      <Avatar size="lg" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=4" />
-      <Avatar size="xl" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=5" />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Group">
-  {#snippet template()}
-    <div class="flex -space-x-4">
-      <Avatar src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=1" class="ring-2 ring-white" />
-      <Avatar src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=2" class="ring-2 ring-white" />
-      <Avatar src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=3" class="ring-2 ring-white" />
-      <Avatar initials="+5" class="ring-2 ring-white" />
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Avatar from './Avatar.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Avatar',
+    component: Avatar,
+    tags: ['autodocs'],
+    argTypes: {
+      size: {
+        control: 'select',
+        options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      },
+      src: { control: 'text' },
+      alt: { control: 'text' },
+      initials: { control: 'text' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'User profile picture component with fallback to initials.',
+        },
+      },
+    },
+  });
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <Avatar />
+  {/snippet}
+</Story>
+
+<Story name="With Initials" args={{ initials: 'JD' }}>
+  {#snippet template(args)}
+    <Avatar {...args} />
+  {/snippet}
+</Story>
+
+<!-- Note: fill colors in data URIs cannot use CSS custom properties; hardcoded hex values are required here -->
+<Story name="With Image" args={{ src: 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><rect width="150" height="150" fill="#6366f1"/><circle cx="75" cy="55" r="30" fill="#fff"/><ellipse cx="75" cy="130" rx="45" ry="35" fill="#fff"/></svg>'), alt: 'User avatar' }}>
+  {#snippet template(args)}
+    <Avatar {...args} />
+  {/snippet}
+</Story>
+
+<Story name="All Sizes">
+  {#snippet template()}
+    <div class="flex items-end gap-4">
+      <div class="text-center">
+        <Avatar size="xs" initials="XS" />
+        <p class="text-xs text-muted-foreground mt-1">xs</p>
+      </div>
+      <div class="text-center">
+        <Avatar size="sm" initials="SM" />
+        <p class="text-xs text-muted-foreground mt-1">sm</p>
+      </div>
+      <div class="text-center">
+        <Avatar size="md" initials="MD" />
+        <p class="text-xs text-muted-foreground mt-1">md</p>
+      </div>
+      <div class="text-center">
+        <Avatar size="lg" initials="LG" />
+        <p class="text-xs text-muted-foreground mt-1">lg</p>
+      </div>
+      <div class="text-center">
+        <Avatar size="xl" initials="XL" />
+        <p class="text-xs text-muted-foreground mt-1">xl</p>
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Image Sizes">
+  {#snippet template()}
+    <div class="flex items-end gap-4">
+      <Avatar size="xs" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=1" />
+      <Avatar size="sm" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=2" />
+      <Avatar size="md" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=3" />
+      <Avatar size="lg" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=4" />
+      <Avatar size="xl" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=5" />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Group">
+  {#snippet template()}
+    <div class="flex -space-x-4">
+      <Avatar src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=1" class="ring-2 ring-white" />
+      <Avatar src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=2" class="ring-2 ring-white" />
+      <Avatar src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=3" class="ring-2 ring-white" />
+      <Avatar initials="+5" class="ring-2 ring-white" />
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Avatar/Avatar.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Avatar/Avatar.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA4GA;;;;mBAAkH;mBAxG7F,iBAAiB;6CA+FO,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Avatar.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Avatar/Avatar.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA6GA;;;;mBAAkH;mBAzG7F,iBAAiB;6CAgGO,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}