@getmicdrop/svelte-components 5.5.5 → 5.6.0

package/dist/primitives/Icons/IconGallery.stories.svelte

@@ -1,235 +1,235 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  const { Story } = defineMeta({
-    title: 'Components/Icons/Gallery',
-    tags: ['autodocs'],
-  });
-
-</script>
-
-<script>
-    import ArrowLeft from './ArrowLeft.svelte';
-  import ArrowRight from './ArrowRight.svelte';
-  import Availability from './Availability.svelte';
-  import Back from './Back.svelte';
-  import CheckCircle from './CheckCircle.svelte';
-  import CheckCircleOutline from './CheckCircleOutline.svelte';
-  import ChevronLeft from './ChevronLeft.svelte';
-  import ChevronRight from './ChevronRight.svelte';
-  import Copy from './Copy.svelte';
-  import Cross from './Cross.svelte';
-  import DownArrow from './DownArrow.svelte';
-  import ErrorCircle from './ErrorCircle.svelte';
-  import FacebookIcon from './FacebookIcon.svelte';
-  import Home from './Home.svelte';
-  import Icon from './Icon.svelte';
-  import Info from './Info.svelte';
-  import InstagramIcon from './InstagramIcon.svelte';
-  import Message from './Message.svelte';
-  import MoonIcon from './MoonIcon.svelte';
-  import More from './More.svelte';
-  import MoreHori from './MoreHori.svelte';
-  import Notification from './Notification.svelte';
-  import Payment from './Payment.svelte';
-  import Profile from './Profile.svelte';
-  import Reload from './Reload.svelte';
-  import Shows from './Shows.svelte';
-  import Signout from './Signout.svelte';
-  import SunIcon from './SunIcon.svelte';
-  import TiktokIcon from './TiktokIcon.svelte';
-  import TwitterIcon from './TwitterIcon.svelte';
-  import WarningIcon from './WarningIcon.svelte';
-
-  const icons = [
-    { name: 'ArrowLeft', component: ArrowLeft },
-    { name: 'ArrowRight', component: ArrowRight },
-    { name: 'Availability', component: Availability },
-    { name: 'Back', component: Back },
-    { name: 'CheckCircle', component: CheckCircle },
-    { name: 'CheckCircleOutline', component: CheckCircleOutline },
-    { name: 'ChevronLeft', component: ChevronLeft },
-    { name: 'ChevronRight', component: ChevronRight },
-    { name: 'Copy', component: Copy },
-    { name: 'Cross', component: Cross },
-    { name: 'DownArrow', component: DownArrow },
-    { name: 'ErrorCircle', component: ErrorCircle },
-    { name: 'FacebookIcon', component: FacebookIcon },
-    { name: 'Home', component: Home },
-    { name: 'Info', component: Info },
-    { name: 'InstagramIcon', component: InstagramIcon },
-    { name: 'Message', component: Message },
-    { name: 'MoonIcon', component: MoonIcon },
-    { name: 'More', component: More },
-    { name: 'MoreHori', component: MoreHori },
-    { name: 'Notification', component: Notification },
-    { name: 'Payment', component: Payment },
-    { name: 'Profile', component: Profile },
-    { name: 'Reload', component: Reload },
-    { name: 'Shows', component: Shows },
-    { name: 'Signout', component: Signout },
-    { name: 'SunIcon', component: SunIcon },
-    { name: 'TiktokIcon', component: TiktokIcon },
-    { name: 'TwitterIcon', component: TwitterIcon },
-    { name: 'WarningIcon', component: WarningIcon },
-  ];
-</script>
-
-<Story name="All Icons">
-  <div class="p-8">
-    <h1 class="text-3xl font-bold mb-6">Icon Gallery</h1>
-    <p class="text-gray-500 dark:text-gray-400 mb-8">All available icons in the component library</p>
-
-    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
-      {#each icons as { name, component }}
-        <div class="flex flex-col items-center p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <svelte:component this={component} />
-          </div>
-          <span class="text-sm text-center text-gray-500 dark:text-gray-400 font-medium">{name}</span>
-        </div>
-      {/each}
-    </div>
-  </div>
-</Story>
-
-<Story name="Icon Sizes">
-  <div class="p-8 space-y-8">
-    <div>
-      <h2 class="text-2xl font-bold mb-4">Navigation Icons</h2>
-      <div class="flex gap-6 items-end">
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <Home />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Home</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <Shows />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Shows</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <Availability />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Availability</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <Profile />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Profile</span>
-        </div>
-      </div>
-    </div>
-
-    <div>
-      <h2 class="text-2xl font-bold mb-4">Status Icons</h2>
-      <div class="flex gap-6 items-end">
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2 text-green-600 dark:text-green-400">
-            <CheckCircle />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Success</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2 text-red-600 dark:text-red-400">
-            <ErrorCircle />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Error</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2 text-amber-500 dark:text-amber-400">
-            <WarningIcon />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Warning</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2 text-blue-500">
-            <Info />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Info</span>
-        </div>
-      </div>
-    </div>
-
-    <div>
-      <h2 class="text-2xl font-bold mb-4">Social Media Icons</h2>
-      <div class="flex gap-6 items-end">
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <FacebookIcon />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Facebook</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <InstagramIcon />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Instagram</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <TwitterIcon />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Twitter</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <TiktokIcon />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">TikTok</span>
-        </div>
-      </div>
-    </div>
-
-    <div>
-      <h2 class="text-2xl font-bold mb-4">Action Icons</h2>
-      <div class="flex gap-6 items-end">
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <Copy />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Copy</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <Reload />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Reload</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <Cross />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Close</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <More />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">More</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="Dark Mode Icons">
-  <div class="bg-gray-900 p-8">
-    <h1 class="text-3xl font-bold mb-6 text-white">Icons in Dark Mode</h1>
-
-    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
-      {#each icons.slice(0, 12) as { name, component }}
-        <div class="flex flex-col items-center p-4 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors">
-          <div class="w-12 h-12 flex items-center justify-center mb-2 text-white">
-            <svelte:component this={component} />
-          </div>
-          <span class="text-sm text-center text-gray-300 font-medium">{name}</span>
-        </div>
-      {/each}
-    </div>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const { Story } = defineMeta({
+    title: 'Components/Icons/Gallery',
+    tags: ['autodocs'],
+  });
+
+</script>
+
+<script>
+    import ArrowLeft from './ArrowLeft.svelte';
+  import ArrowRight from './ArrowRight.svelte';
+  import Availability from './Availability.svelte';
+  import Back from './Back.svelte';
+  import CheckCircle from './CheckCircle.svelte';
+  import CheckCircleOutline from './CheckCircleOutline.svelte';
+  import ChevronLeft from './ChevronLeft.svelte';
+  import ChevronRight from './ChevronRight.svelte';
+  import Copy from './Copy.svelte';
+  import Cross from './Cross.svelte';
+  import DownArrow from './DownArrow.svelte';
+  import ErrorCircle from './ErrorCircle.svelte';
+  import FacebookIcon from './FacebookIcon.svelte';
+  import Home from './Home.svelte';
+  import Icon from './Icon.svelte';
+  import Info from './Info.svelte';
+  import InstagramIcon from './InstagramIcon.svelte';
+  import Message from './Message.svelte';
+  import MoonIcon from './MoonIcon.svelte';
+  import More from './More.svelte';
+  import MoreHori from './MoreHori.svelte';
+  import Notification from './Notification.svelte';
+  import Payment from './Payment.svelte';
+  import Profile from './Profile.svelte';
+  import Reload from './Reload.svelte';
+  import Shows from './Shows.svelte';
+  import Signout from './Signout.svelte';
+  import SunIcon from './SunIcon.svelte';
+  import TiktokIcon from './TiktokIcon.svelte';
+  import TwitterIcon from './TwitterIcon.svelte';
+  import WarningIcon from './WarningIcon.svelte';
+
+  const icons = [
+    { name: 'ArrowLeft', component: ArrowLeft },
+    { name: 'ArrowRight', component: ArrowRight },
+    { name: 'Availability', component: Availability },
+    { name: 'Back', component: Back },
+    { name: 'CheckCircle', component: CheckCircle },
+    { name: 'CheckCircleOutline', component: CheckCircleOutline },
+    { name: 'ChevronLeft', component: ChevronLeft },
+    { name: 'ChevronRight', component: ChevronRight },
+    { name: 'Copy', component: Copy },
+    { name: 'Cross', component: Cross },
+    { name: 'DownArrow', component: DownArrow },
+    { name: 'ErrorCircle', component: ErrorCircle },
+    { name: 'FacebookIcon', component: FacebookIcon },
+    { name: 'Home', component: Home },
+    { name: 'Info', component: Info },
+    { name: 'InstagramIcon', component: InstagramIcon },
+    { name: 'Message', component: Message },
+    { name: 'MoonIcon', component: MoonIcon },
+    { name: 'More', component: More },
+    { name: 'MoreHori', component: MoreHori },
+    { name: 'Notification', component: Notification },
+    { name: 'Payment', component: Payment },
+    { name: 'Profile', component: Profile },
+    { name: 'Reload', component: Reload },
+    { name: 'Shows', component: Shows },
+    { name: 'Signout', component: Signout },
+    { name: 'SunIcon', component: SunIcon },
+    { name: 'TiktokIcon', component: TiktokIcon },
+    { name: 'TwitterIcon', component: TwitterIcon },
+    { name: 'WarningIcon', component: WarningIcon },
+  ];
+</script>
+
+<Story name="All Icons">
+  <div class="p-8">
+    <h1 class="text-3xl font-bold mb-6">Icon Gallery</h1>
+    <p class="text-gray-500 dark:text-gray-400 mb-8">All available icons in the component library</p>
+
+    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
+      {#each icons as { name, component }}
+        <div class="flex flex-col items-center p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <svelte:component this={component} />
+          </div>
+          <span class="text-sm text-center text-gray-500 dark:text-gray-400 font-medium">{name}</span>
+        </div>
+      {/each}
+    </div>
+  </div>
+</Story>
+
+<Story name="Icon Sizes">
+  <div class="p-8 space-y-8">
+    <div>
+      <h2 class="text-2xl font-bold mb-4">Navigation Icons</h2>
+      <div class="flex gap-6 items-end">
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <Home />
+          </div>
+          <span class="text-xs text-gray-500 dark:text-gray-400">Home</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <Shows />
+          </div>
+          <span class="text-xs text-gray-500 dark:text-gray-400">Shows</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <Availability />
+          </div>
+          <span class="text-xs text-gray-500 dark:text-gray-400">Availability</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <Profile />
+          </div>
+          <span class="text-xs text-gray-500 dark:text-gray-400">Profile</span>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h2 class="text-2xl font-bold mb-4">Status Icons</h2>
+      <div class="flex gap-6 items-end">
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2 text-green-600 dark:text-green-400">
+            <CheckCircle />
+          </div>
+          <span class="text-xs text-gray-500 dark:text-gray-400">Success</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2 text-red-600 dark:text-red-400">
+            <ErrorCircle />
+          </div>
+          <span class="text-xs text-gray-500 dark:text-gray-400">Error</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2 text-amber-500 dark:text-amber-400">
+            <WarningIcon />
+          </div>
+          <span class="text-xs text-gray-500 dark:text-gray-400">Warning</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2 text-blue-500">
+            <Info />
+          </div>
+          <span class="text-xs text-gray-500 dark:text-gray-400">Info</span>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h2 class="text-2xl font-bold mb-4">Social Media Icons</h2>
+      <div class="flex gap-6 items-end">
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <FacebookIcon />
+          </div>
+          <span class="text-xs text-gray-500 dark:text-gray-400">Facebook</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <InstagramIcon />
+          </div>
+          <span class="text-xs text-gray-500 dark:text-gray-400">Instagram</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <TwitterIcon />
+          </div>
+          <span class="text-xs text-gray-500 dark:text-gray-400">Twitter</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <TiktokIcon />
+          </div>
+          <span class="text-xs text-gray-500 dark:text-gray-400">TikTok</span>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h2 class="text-2xl font-bold mb-4">Action Icons</h2>
+      <div class="flex gap-6 items-end">
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <Copy />
+          </div>
+          <span class="text-xs text-gray-500 dark:text-gray-400">Copy</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <Reload />
+          </div>
+          <span class="text-xs text-gray-500 dark:text-gray-400">Reload</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <Cross />
+          </div>
+          <span class="text-xs text-gray-500 dark:text-gray-400">Close</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <More />
+          </div>
+          <span class="text-xs text-gray-500 dark:text-gray-400">More</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Dark Mode Icons">
+  <div class="bg-gray-900 p-8">
+    <h1 class="text-3xl font-bold mb-6 text-white">Icons in Dark Mode</h1>
+
+    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
+      {#each icons.slice(0, 12) as { name, component }}
+        <div class="flex flex-col items-center p-4 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors">
+          <div class="w-12 h-12 flex items-center justify-center mb-2 text-white">
+            <svelte:component this={component} />
+          </div>
+          <span class="text-sm text-center text-gray-300 font-medium">{name}</span>
+        </div>
+      {/each}
+    </div>
+  </div>
+</Story>

package/dist/primitives/Icons/Info.svelte

@@ -11,10 +11,10 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M8.99935 2.33341C5.31745 2.33341 2.33268 5.31818 2.33268 9.00008C2.33268 12.682 5.31745 15.6667 8.99935 15.6667C12.6812 15.6667 15.666 12.682 15.666 9.00008C15.666 5.31818 12.6812 2.33341 8.99935 2.33341ZM0.666016 9.00008C0.666016 4.39771 4.39698 0.666748 8.99935 0.666748C13.6017 0.666748 17.3327 4.39771 17.3327 9.00008C17.3327 13.6025 13.6017 17.3334 8.99935 17.3334C4.39698 17.3334 0.666016 13.6025 0.666016 9.00008ZM7.6726 5.25008C7.6726 4.78984 8.04569 4.41675 8.50593 4.41675H8.51426C8.9745 4.41675 9.3476 4.78984 9.3476 5.25008C9.3476 5.71032 8.9745 6.08342 8.51426 6.08342H8.50593C8.04569 6.08342 7.6726 5.71032 7.6726 5.25008ZM6.49935 8.16675C6.49935 7.70651 6.87245 7.33342 7.33268 7.33342H8.99935C9.45959 7.33342 9.83268 7.70651 9.83268 8.16675V11.5001H10.666C11.1263 11.5001 11.4993 11.8732 11.4993 12.3334C11.4993 12.7937 11.1263 13.1667 10.666 13.1667H7.33268C6.87245 13.1667 6.49935 12.7937 6.49935 12.3334C6.49935 11.8732 6.87245 11.5001 7.33268 11.5001H8.16602V9.00008H7.33268C6.87245 9.00008 6.49935 8.62699 6.49935 8.16675Z"
-    fill={color}
-  />
-</svg>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8.99935 2.33341C5.31745 2.33341 2.33268 5.31818 2.33268 9.00008C2.33268 12.682 5.31745 15.6667 8.99935 15.6667C12.6812 15.6667 15.666 12.682 15.666 9.00008C15.666 5.31818 12.6812 2.33341 8.99935 2.33341ZM0.666016 9.00008C0.666016 4.39771 4.39698 0.666748 8.99935 0.666748C13.6017 0.666748 17.3327 4.39771 17.3327 9.00008C17.3327 13.6025 13.6017 17.3334 8.99935 17.3334C4.39698 17.3334 0.666016 13.6025 0.666016 9.00008ZM7.6726 5.25008C7.6726 4.78984 8.04569 4.41675 8.50593 4.41675H8.51426C8.9745 4.41675 9.3476 4.78984 9.3476 5.25008C9.3476 5.71032 8.9745 6.08342 8.51426 6.08342H8.50593C8.04569 6.08342 7.6726 5.71032 7.6726 5.25008ZM6.49935 8.16675C6.49935 7.70651 6.87245 7.33342 7.33268 7.33342H8.99935C9.45959 7.33342 9.83268 7.70651 9.83268 8.16675V11.5001H10.666C11.1263 11.5001 11.4993 11.8732 11.4993 12.3334C11.4993 12.7937 11.1263 13.1667 10.666 13.1667H7.33268C6.87245 13.1667 6.49935 12.7937 6.49935 12.3334C6.49935 11.8732 6.87245 11.5001 7.33268 11.5001H8.16602V9.00008H7.33268C6.87245 9.00008 6.49935 8.62699 6.49935 8.16675Z"
+    fill={color}
+  />
+</svg>

package/dist/primitives/Icons/InstagramIcon.svelte

@@ -15,7 +15,7 @@
   stroke-linejoin="round"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
-  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
-  <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
-</svg>
+  <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
+  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
+  <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
+</svg>

package/dist/primitives/Icons/LogoInstagram.svelte

@@ -11,5 +11,5 @@
   viewBox="0 0 24 24"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
-</svg>
+  <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
+</svg>

package/dist/primitives/Icons/Message.svelte

@@ -11,18 +11,18 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path
-    d="M10.1902 14.4577C10.2155 14.5208 10.2596 14.5747 10.3164 14.6121C10.3732 14.6494 10.4401 14.6685 10.5081 14.6668C10.5761 14.665 10.6419 14.6426 10.6968 14.6023C10.7516 14.5621 10.7928 14.506 10.8149 14.4417L15.1482 1.77503C15.1695 1.71596 15.1736 1.65203 15.16 1.59073C15.1463 1.52943 15.1154 1.47329 15.071 1.42888C15.0266 1.38447 14.9705 1.35363 14.9092 1.33996C14.8479 1.32629 14.7839 1.33036 14.7249 1.3517L2.05821 5.68503C1.99388 5.70709 1.93783 5.74831 1.89759 5.80314C1.85736 5.85798 1.83486 5.92381 1.83312 5.9918C1.83138 6.05979 1.85047 6.12669 1.88785 6.18351C1.92523 6.24034 1.97909 6.28437 2.04221 6.3097L7.32888 8.4297C7.496 8.49661 7.64785 8.59667 7.77526 8.72385C7.90266 8.85103 8.003 9.00269 8.07021 9.1697L10.1902 14.4577Z"
-    stroke={color}
-    stroke-width="1.33333"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M15.0697 1.43164L7.77637 8.72431"
-    stroke={color}
-    stroke-width="1.33333"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
+  <path
+    d="M10.1902 14.4577C10.2155 14.5208 10.2596 14.5747 10.3164 14.6121C10.3732 14.6494 10.4401 14.6685 10.5081 14.6668C10.5761 14.665 10.6419 14.6426 10.6968 14.6023C10.7516 14.5621 10.7928 14.506 10.8149 14.4417L15.1482 1.77503C15.1695 1.71596 15.1736 1.65203 15.16 1.59073C15.1463 1.52943 15.1154 1.47329 15.071 1.42888C15.0266 1.38447 14.9705 1.35363 14.9092 1.33996C14.8479 1.32629 14.7839 1.33036 14.7249 1.3517L2.05821 5.68503C1.99388 5.70709 1.93783 5.74831 1.89759 5.80314C1.85736 5.85798 1.83486 5.92381 1.83312 5.9918C1.83138 6.05979 1.85047 6.12669 1.88785 6.18351C1.92523 6.24034 1.97909 6.28437 2.04221 6.3097L7.32888 8.4297C7.496 8.49661 7.64785 8.59667 7.77526 8.72385C7.90266 8.85103 8.003 9.00269 8.07021 9.1697L10.1902 14.4577Z"
+    stroke={color}
+    stroke-width="1.33333"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M15.0697 1.43164L7.77637 8.72431"
+    stroke={color}
+    stroke-width="1.33333"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/primitives/Icons/MoonIcon.svelte

@@ -11,8 +11,8 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path
-    d="M21.0009 12.79C20.8436 14.4922 20.2047 16.1144 19.1591 17.4668C18.1135 18.8192 16.7044 19.8458 15.0966 20.4265C13.4888 21.0073 11.748 21.1181 10.0795 20.7461C8.41104 20.3741 6.88302 19.5345 5.67426 18.3258C4.46551 17.117 3.62596 15.589 3.25393 13.9205C2.8819 12.252 2.99274 10.5112 3.57348 8.9034C4.15423 7.29557 5.18085 5.88651 6.53324 4.84088C7.88562 3.79525 9.50782 3.15731 11.2101 3C10.2147 4.34827 9.73521 6.00945 9.85856 7.68141C9.98191 9.35338 10.7002 10.9251 11.8788 12.1037C13.0574 13.2823 14.6291 14.0006 16.3011 14.1239C17.973 14.2473 19.6342 13.7678 20.9825 12.7724L21.0009 12.79Z"
-    fill={color}
-  />
-</svg>
+  <path
+    d="M21.0009 12.79C20.8436 14.4922 20.2047 16.1144 19.1591 17.4668C18.1135 18.8192 16.7044 19.8458 15.0966 20.4265C13.4888 21.0073 11.748 21.1181 10.0795 20.7461C8.41104 20.3741 6.88302 19.5345 5.67426 18.3258C4.46551 17.117 3.62596 15.589 3.25393 13.9205C2.8819 12.252 2.99274 10.5112 3.57348 8.9034C4.15423 7.29557 5.18085 5.88651 6.53324 4.84088C7.88562 3.79525 9.50782 3.15731 11.2101 3C10.2147 4.34827 9.73521 6.00945 9.85856 7.68141C9.98191 9.35338 10.7002 10.9251 11.8788 12.1037C13.0574 13.2823 14.6291 14.0006 16.3011 14.1239C17.973 14.2473 19.6342 13.7678 20.9825 12.7724L21.0009 12.79Z"
+    fill={color}
+  />
+</svg>

package/dist/primitives/Icons/More.svelte

@@ -11,25 +11,25 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-    <path
-        d="M9.99935 10.8333C10.4596 10.8333 10.8327 10.4602 10.8327 9.99996C10.8327 9.53972 10.4596 9.16663 9.99935 9.16663C9.53911 9.16663 9.16602 9.53972 9.16602 9.99996C9.16602 10.4602 9.53911 10.8333 9.99935 10.8333Z"
-        stroke={color}
-        stroke-width="1.66667"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-    />
-    <path
-        d="M9.99935 5.00004C10.4596 5.00004 10.8327 4.62694 10.8327 4.16671C10.8327 3.70647 10.4596 3.33337 9.99935 3.33337C9.53911 3.33337 9.16602 3.70647 9.16602 4.16671C9.16602 4.62694 9.53911 5.00004 9.99935 5.00004Z"
-        stroke={color}
-        stroke-width="1.66667"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-    />
-    <path
-        d="M9.99935 16.6667C10.4596 16.6667 10.8327 16.2936 10.8327 15.8333C10.8327 15.3731 10.4596 15 9.99935 15C9.53911 15 9.16602 15.3731 9.16602 15.8333C9.16602 16.2936 9.53911 16.6667 9.99935 16.6667Z"
-        stroke={color}
-        stroke-width="1.66667"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-    />
+    <path
+        d="M9.99935 10.8333C10.4596 10.8333 10.8327 10.4602 10.8327 9.99996C10.8327 9.53972 10.4596 9.16663 9.99935 9.16663C9.53911 9.16663 9.16602 9.53972 9.16602 9.99996C9.16602 10.4602 9.53911 10.8333 9.99935 10.8333Z"
+        stroke={color}
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
+    <path
+        d="M9.99935 5.00004C10.4596 5.00004 10.8327 4.62694 10.8327 4.16671C10.8327 3.70647 10.4596 3.33337 9.99935 3.33337C9.53911 3.33337 9.16602 3.70647 9.16602 4.16671C9.16602 4.62694 9.53911 5.00004 9.99935 5.00004Z"
+        stroke={color}
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
+    <path
+        d="M9.99935 16.6667C10.4596 16.6667 10.8327 16.2936 10.8327 15.8333C10.8327 15.3731 10.4596 15 9.99935 15C9.53911 15 9.16602 15.3731 9.16602 15.8333C9.16602 16.2936 9.53911 16.6667 9.99935 16.6667Z"
+        stroke={color}
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
 </svg>