@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/primitives/Dropdown/DropdownItem.spec.js

@@ -0,0 +1,182 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi } from 'vitest';
+import DropdownItem from './DropdownItem.svelte';
+
+describe('DropdownItem Component', () => {
+  test('renders as button by default (no href)', () => {
+    const { container } = render(DropdownItem);
+    expect(container.querySelector('button')).toBeInTheDocument();
+    expect(container.querySelector('a')).not.toBeInTheDocument();
+  });
+
+  test('renders as anchor when href is provided', () => {
+    const { container } = render(DropdownItem, { props: { href: '/test' } });
+    expect(container.querySelector('a')).toBeInTheDocument();
+    expect(container.querySelector('button')).not.toBeInTheDocument();
+  });
+
+  test('anchor has correct href attribute', () => {
+    const { container } = render(DropdownItem, { props: { href: '/dashboard' } });
+    const anchor = container.querySelector('a');
+    expect(anchor).toHaveAttribute('href', '/dashboard');
+  });
+
+  test('has role="menuitem"', () => {
+    const { container } = render(DropdownItem);
+    expect(container.querySelector('[role="menuitem"]')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(DropdownItem, { props: { class: 'custom-item' } });
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('custom-item');
+  });
+
+  test('is wrapped in li element', () => {
+    const { container } = render(DropdownItem);
+    expect(container.querySelector('li')).toBeInTheDocument();
+    expect(container.querySelector('li button')).toBeInTheDocument();
+  });
+});
+
+describe('DropdownItem Disabled State', () => {
+  test('button is disabled when disabled prop is true', () => {
+    const { container } = render(DropdownItem, { props: { disabled: true } });
+    const button = container.querySelector('button');
+    expect(button).toBeDisabled();
+  });
+
+  test('has tabindex=-1 when disabled', () => {
+    const { container } = render(DropdownItem, { props: { disabled: true } });
+    const button = container.querySelector('button');
+    expect(button).toHaveAttribute('tabindex', '-1');
+  });
+
+  test('has tabindex=0 when not disabled', () => {
+    const { container } = render(DropdownItem, { props: { disabled: false } });
+    const button = container.querySelector('button');
+    expect(button).toHaveAttribute('tabindex', '0');
+  });
+
+  test('has opacity-50 class when disabled', () => {
+    const { container } = render(DropdownItem, { props: { disabled: true } });
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('opacity-50');
+  });
+
+  test('has cursor-not-allowed when disabled', () => {
+    const { container } = render(DropdownItem, { props: { disabled: true } });
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('cursor-not-allowed');
+  });
+
+  test('has cursor-pointer when not disabled', () => {
+    const { container } = render(DropdownItem, { props: { disabled: false } });
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('cursor-pointer');
+  });
+});
+
+describe('DropdownItem Click Handling', () => {
+  test('calls onclick when clicked', async () => {
+    const user = userEvent.setup();
+    const onclick = vi.fn();
+    const { container } = render(DropdownItem, { props: { onclick } });
+
+    const button = container.querySelector('button');
+    await user.click(button);
+    expect(onclick).toHaveBeenCalled();
+  });
+
+  test('does not call onclick when disabled', async () => {
+    const user = userEvent.setup();
+    const onclick = vi.fn();
+    const { container } = render(DropdownItem, { props: { onclick, disabled: true } });
+
+    const button = container.querySelector('button');
+    await user.click(button);
+    expect(onclick).not.toHaveBeenCalled();
+  });
+});
+
+describe('DropdownItem Styling', () => {
+  test('has block and w-full classes', () => {
+    const { container } = render(DropdownItem);
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('block');
+    expect(button).toHaveClass('w-full');
+  });
+
+  test('has text-left alignment', () => {
+    const { container } = render(DropdownItem);
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('text-left');
+  });
+
+  test('has correct padding', () => {
+    const { container } = render(DropdownItem);
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('px-4');
+    expect(button).toHaveClass('py-2');
+  });
+
+  test('has text-sm size', () => {
+    const { container } = render(DropdownItem);
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('text-sm');
+  });
+
+  test('has hover styles', () => {
+    const { container } = render(DropdownItem);
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('hover:bg-gray-100');
+  });
+
+  test('has dark mode hover styles', () => {
+    const { container } = render(DropdownItem);
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('dark:hover:bg-gray-600');
+    expect(button).toHaveClass('dark:hover:text-white');
+  });
+
+  test('has default text color', () => {
+    const { container } = render(DropdownItem);
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('text-gray-700');
+  });
+
+  test('has dark mode text color', () => {
+    const { container } = render(DropdownItem);
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('dark:text-gray-200');
+  });
+});
+
+describe('DropdownItem as Link', () => {
+  test('link has role="menuitem"', () => {
+    const { container } = render(DropdownItem, { props: { href: '/test' } });
+    const anchor = container.querySelector('a');
+    expect(anchor).toHaveAttribute('role', 'menuitem');
+  });
+
+  test('link has correct tabindex when not disabled', () => {
+    const { container } = render(DropdownItem, { props: { href: '/test' } });
+    const anchor = container.querySelector('a');
+    expect(anchor).toHaveAttribute('tabindex', '0');
+  });
+
+  test('link has tabindex=-1 when disabled', () => {
+    const { container } = render(DropdownItem, { props: { href: '/test', disabled: true } });
+    const anchor = container.querySelector('a');
+    expect(anchor).toHaveAttribute('tabindex', '-1');
+  });
+});
+
+describe('DropdownItem Button Type', () => {
+  test('button has type="button"', () => {
+    const { container } = render(DropdownItem);
+    const button = container.querySelector('button');
+    expect(button).toHaveAttribute('type', 'button');
+  });
+});

package/dist/primitives/Dropdown/DropdownItem.svelte

@@ -1,80 +1,80 @@
-<script lang="ts">
-  import { getContext } from "svelte";
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Optional href to make the item a link */
-    href?: string;
-    /** Whether the item is disabled */
-    disabled?: boolean;
-    /** Additional CSS classes */
-    class?: string;
-    /** Click handler callback (replaces dispatch('click')) */
-    onclick?: (event: MouseEvent | KeyboardEvent) => void;
-    /** Child content */
-    children?: Snippet;
-  }
-
-  let {
-    href = undefined,
-    disabled = false,
-    class: className = '',
-    onclick,
-    children
-  }: Props = $props();
-
-  const context = getContext<{ activeUrl?: string; close?: () => void }>("dropdown");
-
-  let isActive = $derived(context?.activeUrl && href && context.activeUrl === href);
-
-  function handleClick(event: MouseEvent | KeyboardEvent) {
-    if (disabled) {
-      event.preventDefault();
-      return;
-    }
-    onclick?.(event);
-    if (!href && context?.close) {
-      context.close();
-    }
-  }
-
-  function handleKeydown(event: KeyboardEvent) {
-    if (event.key === "Enter" || event.key === " ") {
-      handleClick(event);
-    }
-  }
-
-  const baseClasses = "block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white";
-  const activeClasses = "bg-blue-50 text-blue-700 dark:bg-gray-600 dark:text-white";
-  const disabledClasses = "opacity-50 cursor-not-allowed";
-  const defaultClasses = "text-gray-700 dark:text-gray-200";
-</script>
-
-{#if href}
-  <li>
-    <a
-      {href}
-      class="{baseClasses} {isActive ? activeClasses : defaultClasses} {disabled ? disabledClasses : 'cursor-pointer'} {className}"
-      role="menuitem"
-      tabindex={disabled ? -1 : 0}
-      onclick={handleClick}
-      onkeydown={handleKeydown}
-    >
-      {@render children?.()}
-    </a>
-  </li>
-{:else}
-  <li>
-    <button
-      type="button"
-      class="{baseClasses} {defaultClasses} {disabled ? disabledClasses : 'cursor-pointer'} {className}"
-      role="menuitem"
-      tabindex={disabled ? -1 : 0}
-      {disabled}
-      onclick={handleClick}
-      onkeydown={handleKeydown}
-    >
-      {@render children?.()}
-    </button>
-  </li>
-{/if}
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Optional href to make the item a link */
+    href?: string;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Click handler callback (replaces dispatch('click')) */
+    onclick?: (event: MouseEvent | KeyboardEvent) => void;
+    /** Child content */
+    children?: Snippet;
+  }
+
+  let {
+    href = undefined,
+    disabled = false,
+    class: className = '',
+    onclick,
+    children
+  }: Props = $props();
+
+  const context = getContext<{ activeUrl?: string; close?: () => void }>("dropdown");
+
+  let isActive = $derived(context?.activeUrl && href && context.activeUrl === href);
+
+  function handleClick(event: MouseEvent | KeyboardEvent) {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onclick?.(event);
+    if (!href && context?.close) {
+      context.close();
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Enter" || event.key === " ") {
+      handleClick(event);
+    }
+  }
+
+  const baseClasses = "block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white";
+  const activeClasses = "bg-blue-50 text-blue-700 dark:bg-gray-600 dark:text-white";
+  const disabledClasses = "opacity-50 cursor-not-allowed";
+  const defaultClasses = "text-gray-700 dark:text-gray-200";
+</script>
+
+{#if href}
+  <li>
+    <a
+      {href}
+      class="{baseClasses} {isActive ? activeClasses : defaultClasses} {disabled ? disabledClasses : 'cursor-pointer'} {className}"
+      role="menuitem"
+      tabindex={disabled ? -1 : 0}
+      onclick={handleClick}
+      onkeydown={handleKeydown}
+    >
+      {@render children?.()}
+    </a>
+  </li>
+{:else}
+  <li>
+    <button
+      type="button"
+      class="{baseClasses} {defaultClasses} {disabled ? disabledClasses : 'cursor-pointer'} {className}"
+      role="menuitem"
+      tabindex={disabled ? -1 : 0}
+      {disabled}
+      onclick={handleClick}
+      onkeydown={handleKeydown}
+    >
+      {@render children?.()}
+    </button>
+  </li>
+{/if}

package/dist/primitives/Icons/ArrowLeft.svelte

@@ -11,11 +11,11 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path
-    d="M10.5 12C10.5 12 6.50001 9.05407 6.5 8C6.49999 6.94587 10.5 4 10.5 4"
-    stroke={color}
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
+  <path
+    d="M10.5 12C10.5 12 6.50001 9.05407 6.5 8C6.49999 6.94587 10.5 4 10.5 4"
+    stroke={color}
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/primitives/Icons/ArrowRight.svelte

@@ -11,11 +11,11 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path
-    d="M9 18L15 12L9 6"
-    stroke={color}
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
+  <path
+    d="M9 18L15 12L9 6"
+    stroke={color}
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/primitives/Icons/Availability.svelte

@@ -11,18 +11,18 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-    <path
-        d="M10.0003 18.8327C14.6027 18.8327 18.3337 15.1017 18.3337 10.4993C18.3337 5.89698 14.6027 2.16602 10.0003 2.16602C5.39795 2.16602 1.66699 5.89698 1.66699 10.4993C1.66699 15.1017 5.39795 18.8327 10.0003 18.8327Z"
-        stroke={color}
-        stroke-width="1.66667"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-    />
-    <path
-        d="M10 5.5V10.5L13.3333 12.1667"
-        stroke={color}
-        stroke-width="1.66667"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-    />
+    <path
+        d="M10.0003 18.8327C14.6027 18.8327 18.3337 15.1017 18.3337 10.4993C18.3337 5.89698 14.6027 2.16602 10.0003 2.16602C5.39795 2.16602 1.66699 5.89698 1.66699 10.4993C1.66699 15.1017 5.39795 18.8327 10.0003 18.8327Z"
+        stroke={color}
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
+    <path
+        d="M10 5.5V10.5L13.3333 12.1667"
+        stroke={color}
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
 </svg>

package/dist/primitives/Icons/Back.svelte

@@ -11,18 +11,18 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-    <path
-        d="M12 19L5 12L12 5"
-        stroke={color}
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-    />
-    <path
-        d="M19 12H5"
-        stroke={color}
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-    />
+    <path
+        d="M12 19L5 12L12 5"
+        stroke={color}
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
+    <path
+        d="M19 12H5"
+        stroke={color}
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
 </svg>

package/dist/primitives/Icons/CheckCircle.svelte

@@ -11,10 +11,10 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-    <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M10 20C12.6522 20 15.1957 18.9464 17.0711 17.0711C18.9464 15.1957 20 12.6522 20 10C20 7.34784 18.9464 4.8043 17.0711 2.92893C15.1957 1.05357 12.6522 0 10 0C7.34784 0 4.8043 1.05357 2.92893 2.92893C1.05357 4.8043 0 7.34784 0 10C0 12.6522 1.05357 15.1957 2.92893 17.0711C4.8043 18.9464 7.34784 20 10 20ZM14.6338 8.38375C14.8614 8.148 14.9874 7.83224 14.9846 7.5045C14.9817 7.17675 14.8503 6.86324 14.6185 6.63148C14.3868 6.39972 14.0732 6.26826 13.7455 6.26541C13.4178 6.26256 13.102 6.38855 12.8663 6.61625L8.75 10.7325L7.13375 9.11625C6.898 8.88855 6.58224 8.76256 6.2545 8.76541C5.92675 8.76826 5.61324 8.89972 5.38148 9.13148C5.14972 9.36324 5.01826 9.67675 5.01541 10.0045C5.01256 10.3322 5.13855 10.648 5.36625 10.8837L7.86625 13.3838C8.10066 13.6181 8.41854 13.7497 8.75 13.7497C9.08146 13.7497 9.39934 13.6181 9.63375 13.3838L14.6338 8.38375Z"
-        fill={color}
-    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10 20C12.6522 20 15.1957 18.9464 17.0711 17.0711C18.9464 15.1957 20 12.6522 20 10C20 7.34784 18.9464 4.8043 17.0711 2.92893C15.1957 1.05357 12.6522 0 10 0C7.34784 0 4.8043 1.05357 2.92893 2.92893C1.05357 4.8043 0 7.34784 0 10C0 12.6522 1.05357 15.1957 2.92893 17.0711C4.8043 18.9464 7.34784 20 10 20ZM14.6338 8.38375C14.8614 8.148 14.9874 7.83224 14.9846 7.5045C14.9817 7.17675 14.8503 6.86324 14.6185 6.63148C14.3868 6.39972 14.0732 6.26826 13.7455 6.26541C13.4178 6.26256 13.102 6.38855 12.8663 6.61625L8.75 10.7325L7.13375 9.11625C6.898 8.88855 6.58224 8.76256 6.2545 8.76541C5.92675 8.76826 5.61324 8.89972 5.38148 9.13148C5.14972 9.36324 5.01826 9.67675 5.01541 10.0045C5.01256 10.3322 5.13855 10.648 5.36625 10.8837L7.86625 13.3838C8.10066 13.6181 8.41854 13.7497 8.75 13.7497C9.08146 13.7497 9.39934 13.6181 9.63375 13.3838L14.6338 8.38375Z"
+        fill={color}
+    />
 </svg>

package/dist/primitives/Icons/CheckCircleOutline.svelte

@@ -11,18 +11,18 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path
-    d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z"
-    stroke={color}
-    stroke-width="1.33333"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M6 8.00008L7.33333 9.33341L10 6.66675"
-    stroke={color}
-    stroke-width="1.33333"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
+  <path
+    d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z"
+    stroke={color}
+    stroke-width="1.33333"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M6 8.00008L7.33333 9.33341L10 6.66675"
+    stroke={color}
+    stroke-width="1.33333"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/primitives/Icons/ChevronLeft.svelte

@@ -11,8 +11,8 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-    <path
-        d="M18.2847 25.7735C17.6953 25.7734 17.1301 25.5202 16.7134 25.0697L7.82356 15.4612C7.40691 15.0107 7.17285 14.3998 7.17285 13.7628C7.17285 13.1259 7.40691 12.515 7.82356 12.0645L16.7134 2.456C16.9184 2.22657 17.1636 2.04357 17.4348 1.91768C17.7059 1.79178 17.9976 1.72552 18.2927 1.72275C18.5878 1.71998 18.8804 1.78075 19.1536 1.90153C19.4267 2.02232 19.6748 2.20068 19.8835 2.42622C20.0922 2.65177 20.2572 2.91997 20.3689 3.21518C20.4807 3.5104 20.5369 3.82671 20.5344 4.14566C20.5318 4.46462 20.4705 4.77983 20.354 5.0729C20.2375 5.36597 20.0682 5.63103 19.8559 5.85262L12.5374 13.7628L19.8559 21.6731C20.1667 22.009 20.3783 22.437 20.464 22.9029C20.5497 23.3688 20.5057 23.8517 20.3375 24.2906C20.1693 24.7294 19.8845 25.1046 19.5192 25.3685C19.1538 25.6325 18.7242 25.7734 18.2847 25.7735Z"
-        fill={color}
-    />
+    <path
+        d="M18.2847 25.7735C17.6953 25.7734 17.1301 25.5202 16.7134 25.0697L7.82356 15.4612C7.40691 15.0107 7.17285 14.3998 7.17285 13.7628C7.17285 13.1259 7.40691 12.515 7.82356 12.0645L16.7134 2.456C16.9184 2.22657 17.1636 2.04357 17.4348 1.91768C17.7059 1.79178 17.9976 1.72552 18.2927 1.72275C18.5878 1.71998 18.8804 1.78075 19.1536 1.90153C19.4267 2.02232 19.6748 2.20068 19.8835 2.42622C20.0922 2.65177 20.2572 2.91997 20.3689 3.21518C20.4807 3.5104 20.5369 3.82671 20.5344 4.14566C20.5318 4.46462 20.4705 4.77983 20.354 5.0729C20.2375 5.36597 20.0682 5.63103 19.8559 5.85262L12.5374 13.7628L19.8559 21.6731C20.1667 22.009 20.3783 22.437 20.464 22.9029C20.5497 23.3688 20.5057 23.8517 20.3375 24.2906C20.1693 24.7294 19.8845 25.1046 19.5192 25.3685C19.1538 25.6325 18.7242 25.7734 18.2847 25.7735Z"
+        fill={color}
+    />
 </svg>    

package/dist/primitives/Icons/ChevronRight.svelte

@@ -11,8 +11,8 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-    <path
-        d="M9.26149 25.7735C8.822 25.7734 8.3924 25.6325 8.02701 25.3685C7.66161 25.1046 7.37682 24.7294 7.20865 24.2906C7.04048 23.8517 6.99647 23.3688 7.08218 22.9029C7.1679 22.437 7.37949 22.009 7.69021 21.6731L15.0088 13.7628L7.69021 5.85262C7.47794 5.63103 7.30863 5.36597 7.19215 5.0729C7.07568 4.77983 7.01437 4.46462 7.0118 4.14566C7.00924 3.82671 7.06547 3.5104 7.17722 3.21518C7.28897 2.91997 7.45399 2.65177 7.66266 2.42622C7.87134 2.20068 8.11948 2.02232 8.39261 1.90153C8.66574 1.78075 8.95839 1.71998 9.25349 1.72275C9.54859 1.72552 9.84022 1.79178 10.1114 1.91768C10.3825 2.04357 10.6278 2.22657 10.8328 2.456L19.7226 12.0645C20.1392 12.515 20.3733 13.1259 20.3733 13.7628C20.3733 14.3998 20.1392 15.0107 19.7226 15.4612L10.8328 25.0697C10.4161 25.5202 9.85087 25.7734 9.26149 25.7735Z"
-        fill={color}
-    />
+    <path
+        d="M9.26149 25.7735C8.822 25.7734 8.3924 25.6325 8.02701 25.3685C7.66161 25.1046 7.37682 24.7294 7.20865 24.2906C7.04048 23.8517 6.99647 23.3688 7.08218 22.9029C7.1679 22.437 7.37949 22.009 7.69021 21.6731L15.0088 13.7628L7.69021 5.85262C7.47794 5.63103 7.30863 5.36597 7.19215 5.0729C7.07568 4.77983 7.01437 4.46462 7.0118 4.14566C7.00924 3.82671 7.06547 3.5104 7.17722 3.21518C7.28897 2.91997 7.45399 2.65177 7.66266 2.42622C7.87134 2.20068 8.11948 2.02232 8.39261 1.90153C8.66574 1.78075 8.95839 1.71998 9.25349 1.72275C9.54859 1.72552 9.84022 1.79178 10.1114 1.91768C10.3825 2.04357 10.6278 2.22657 10.8328 2.456L19.7226 12.0645C20.1392 12.515 20.3733 13.1259 20.3733 13.7628C20.3733 14.3998 20.1392 15.0107 19.7226 15.4612L10.8328 25.0697C10.4161 25.5202 9.85087 25.7734 9.26149 25.7735Z"
+        fill={color}
+    />
 </svg>    

package/dist/primitives/Icons/Copy.svelte

@@ -11,18 +11,18 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path
-    d="M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z"
-    stroke={color}
-    stroke-width="1.33333"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2"
-    stroke={color}
-    stroke-width="1.33333"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
+  <path
+    d="M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z"
+    stroke={color}
+    stroke-width="1.33333"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2"
+    stroke={color}
+    stroke-width="1.33333"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/primitives/Icons/Cross.svelte

@@ -11,8 +11,8 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path
-    d="M7.0885 5.99961L11.1645 1.92359C11.2381 1.85256 11.2967 1.76758 11.3371 1.67363C11.3774 1.57968 11.3987 1.47863 11.3996 1.37638C11.4005 1.27413 11.381 1.17272 11.3423 1.07808C11.3035 0.983445 11.2464 0.897464 11.1741 0.825159C11.1018 0.752855 11.0158 0.695674 10.9211 0.656954C10.8265 0.618234 10.7251 0.59875 10.6228 0.599638C10.5206 0.600527 10.4195 0.621771 10.3256 0.662129C10.2316 0.702488 10.1467 0.761155 10.0756 0.834705L5.99961 4.91072L1.92359 0.834705C1.77835 0.694429 1.58383 0.616809 1.38192 0.618564C1.18001 0.620319 0.986864 0.701307 0.844085 0.844085C0.701307 0.986864 0.620319 1.18001 0.618564 1.38192C0.616809 1.58383 0.694429 1.77835 0.834705 1.92359L4.91072 5.99961L0.834705 10.0756C0.761155 10.1467 0.702488 10.2316 0.662129 10.3256C0.621771 10.4195 0.600527 10.5206 0.599638 10.6228C0.59875 10.7251 0.618234 10.8265 0.656954 10.9211C0.695674 11.0158 0.752855 11.1018 0.825159 11.1741C0.897464 11.2464 0.983445 11.3035 1.07808 11.3423C1.17272 11.381 1.27413 11.4005 1.37638 11.3996C1.47863 11.3987 1.57968 11.3774 1.67363 11.3371C1.76758 11.2967 1.85256 11.2381 1.92359 11.1645L5.99961 7.0885L10.0756 11.1645C10.2209 11.3048 10.4154 11.3824 10.6173 11.3807C10.8192 11.3789 11.0124 11.2979 11.1551 11.1551C11.2979 11.0124 11.3789 10.8192 11.3807 10.6173C11.3824 10.4154 11.3048 10.2209 11.1645 10.0756L7.0885 5.99961Z"
-    fill={color}
-  />
-</svg>
+  <path
+    d="M7.0885 5.99961L11.1645 1.92359C11.2381 1.85256 11.2967 1.76758 11.3371 1.67363C11.3774 1.57968 11.3987 1.47863 11.3996 1.37638C11.4005 1.27413 11.381 1.17272 11.3423 1.07808C11.3035 0.983445 11.2464 0.897464 11.1741 0.825159C11.1018 0.752855 11.0158 0.695674 10.9211 0.656954C10.8265 0.618234 10.7251 0.59875 10.6228 0.599638C10.5206 0.600527 10.4195 0.621771 10.3256 0.662129C10.2316 0.702488 10.1467 0.761155 10.0756 0.834705L5.99961 4.91072L1.92359 0.834705C1.77835 0.694429 1.58383 0.616809 1.38192 0.618564C1.18001 0.620319 0.986864 0.701307 0.844085 0.844085C0.701307 0.986864 0.620319 1.18001 0.618564 1.38192C0.616809 1.58383 0.694429 1.77835 0.834705 1.92359L4.91072 5.99961L0.834705 10.0756C0.761155 10.1467 0.702488 10.2316 0.662129 10.3256C0.621771 10.4195 0.600527 10.5206 0.599638 10.6228C0.59875 10.7251 0.618234 10.8265 0.656954 10.9211C0.695674 11.0158 0.752855 11.1018 0.825159 11.1741C0.897464 11.2464 0.983445 11.3035 1.07808 11.3423C1.17272 11.381 1.27413 11.4005 1.37638 11.3996C1.47863 11.3987 1.57968 11.3774 1.67363 11.3371C1.76758 11.2967 1.85256 11.2381 1.92359 11.1645L5.99961 7.0885L10.0756 11.1645C10.2209 11.3048 10.4154 11.3824 10.6173 11.3807C10.8192 11.3789 11.0124 11.2979 11.1551 11.1551C11.2979 11.0124 11.3789 10.8192 11.3807 10.6173C11.3824 10.4154 11.3048 10.2209 11.1645 10.0756L7.0885 5.99961Z"
+    fill={color}
+  />
+</svg>

package/dist/primitives/Icons/DownArrow.svelte

@@ -11,11 +11,11 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path
-    d="M4 6L8 10L12 6"
-    stroke={color}
-    stroke-width="1.33333"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
+  <path
+    d="M4 6L8 10L12 6"
+    stroke={color}
+    stroke-width="1.33333"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/primitives/Icons/ErrorCircle.svelte

@@ -11,10 +11,10 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-    <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0ZM7.55055 5.78278C7.06239 5.29463 6.27094 5.29463 5.78278 5.78278C5.29463 6.27094 5.29463 7.06239 5.78278 7.55055L8.23223 10L5.78278 12.4495C5.29463 12.9376 5.29463 13.7291 5.78278 14.2172C6.27094 14.7054 7.06239 14.7054 7.55055 14.2172L10 11.7678L12.4495 14.2172C12.9376 14.7054 13.7291 14.7054 14.2172 14.2172C14.7054 13.7291 14.7054 12.9376 14.2172 12.4495L11.7678 10L14.2172 7.55055C14.7054 7.06239 14.7054 6.27094 14.2172 5.78278C13.7291 5.29463 12.9376 5.29463 12.4495 5.78278L10 8.23223L7.55055 5.78278Z"
-        fill={color}
-    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0ZM7.55055 5.78278C7.06239 5.29463 6.27094 5.29463 5.78278 5.78278C5.29463 6.27094 5.29463 7.06239 5.78278 7.55055L8.23223 10L5.78278 12.4495C5.29463 12.9376 5.29463 13.7291 5.78278 14.2172C6.27094 14.7054 7.06239 14.7054 7.55055 14.2172L10 11.7678L12.4495 14.2172C12.9376 14.7054 13.7291 14.7054 14.2172 14.2172C14.7054 13.7291 14.7054 12.9376 14.2172 12.4495L11.7678 10L14.2172 7.55055C14.7054 7.06239 14.7054 6.27094 14.2172 5.78278C13.7291 5.29463 12.9376 5.29463 12.4495 5.78278L10 8.23223L7.55055 5.78278Z"
+        fill={color}
+    />
 </svg>    

package/dist/primitives/Icons/FacebookIcon.svelte

@@ -11,5 +11,5 @@
   fill={color}
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
-</svg>
+  <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
+</svg>