@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/primitives/Icons/Icon.svelte

@@ -1,55 +1,55 @@
-<script lang="ts">
-  import Home from "./Home.svelte";
-  import Shows from "./Shows.svelte";
-  import Availability from "./Availability.svelte";
-  import Profile from "./Profile.svelte";
-  import Payment from "./Payment.svelte";
-  import Notification from "./Notification.svelte";
-  import Signout from "./Signout.svelte";
-  import More from "./More.svelte";
-  import Info from "./Info.svelte";
-
-  import ChevronLeft from "./ChevronLeft.svelte";
-  import ChevronRight from "./ChevronRight.svelte";
-  import CheckCircle from "./CheckCircle.svelte";
-  import ErrorCircle from "./ErrorCircle.svelte";
-  import ArrowLeft from "./ArrowLeft.svelte";
-  import Back from "./Back.svelte";
-  import DownArrow from "./DownArrow.svelte";
-  import Message from "./Message.svelte";
-  import ArrowRight from "./ArrowRight.svelte";
-  import Reload from "./Reload.svelte";
-  import CheckCircleOutline from "./CheckCircleOutline.svelte";
-  import Copy from "./Copy.svelte";
-  import Cross from "./Cross.svelte";
-  import MoreHori from "./MoreHori.svelte";
-
-  const iconMap = {
-    Home,
-    Shows,
-    Availability,
-    Profile,
-    Payment,
-    Notification,
-    More,
-    MoreHori,
-    Info,
-    ChevronLeft,
-    ChevronRight,
-    Signout,
-    CheckCircle,
-    CheckCircleOutline,
-    ErrorCircle,
-    ArrowLeft,
-    ArrowRight,
-    Back,
-    DownArrow,
-    Message,
-    Reload,
-    Copy,
-    Cross,
-  };
-
+<script lang="ts">
+  import Home from "./Home.svelte";
+  import Shows from "./Shows.svelte";
+  import Availability from "./Availability.svelte";
+  import Profile from "./Profile.svelte";
+  import Payment from "./Payment.svelte";
+  import Notification from "./Notification.svelte";
+  import Signout from "./Signout.svelte";
+  import More from "./More.svelte";
+  import Info from "./Info.svelte";
+
+  import ChevronLeft from "./ChevronLeft.svelte";
+  import ChevronRight from "./ChevronRight.svelte";
+  import CheckCircle from "./CheckCircle.svelte";
+  import ErrorCircle from "./ErrorCircle.svelte";
+  import ArrowLeft from "./ArrowLeft.svelte";
+  import Back from "./Back.svelte";
+  import DownArrow from "./DownArrow.svelte";
+  import Message from "./Message.svelte";
+  import ArrowRight from "./ArrowRight.svelte";
+  import Reload from "./Reload.svelte";
+  import CheckCircleOutline from "./CheckCircleOutline.svelte";
+  import Copy from "./Copy.svelte";
+  import Cross from "./Cross.svelte";
+  import MoreHori from "./MoreHori.svelte";
+
+  const iconMap = {
+    Home,
+    Shows,
+    Availability,
+    Profile,
+    Payment,
+    Notification,
+    More,
+    MoreHori,
+    Info,
+    ChevronLeft,
+    ChevronRight,
+    Signout,
+    CheckCircle,
+    CheckCircleOutline,
+    ErrorCircle,
+    ArrowLeft,
+    ArrowRight,
+    Back,
+    DownArrow,
+    Message,
+    Reload,
+    Copy,
+    Cross,
+  };
+
   type IconName = keyof typeof iconMap;
   
   let { name, size = "24", color = "currentColor", class: className = "" }: { name: string; size?: string; color?: string; class?: string } = $props();

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>