@getmicdrop/svelte-components 3.0.0 → 3.1.0

package/dist/components/Icons/EyeSlashOutline.svelte

@@ -0,0 +1,17 @@
+<script>
+  /** @type {string} */
+  let className = "";
+  export { className as class };
+</script>
+
+<svg
+  class={className}
+  aria-hidden="true"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.5"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
+</svg>

package/dist/components/Icons/EyeSlashOutline.svelte.d.ts

@@ -0,0 +1,27 @@
+export default EyeSlashOutline;
+type EyeSlashOutline = SvelteComponent<{
+    class?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const EyeSlashOutline: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=EyeSlashOutline.svelte.d.ts.map

package/dist/components/Icons/EyeSlashOutline.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EyeSlashOutline.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Icons/EyeSlashOutline.svelte.js"],"names":[],"mappings":";;;;;;;;AAyBA;;;;mBAAsI;6CATzF,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,KAAK,GAAG;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;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Icons/FacebookIcon.svelte.d.ts

@@ -1,15 +1,15 @@
 export default FacebookIcon;
 type FacebookIcon = SvelteComponent<{
-    color?: string | undefined;
     size?: string | undefined;
+    color?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
 declare const FacebookIcon: $$__sveltets_2_IsomorphicComponent<{
-    color?: string | undefined;
     size?: string | undefined;
+    color?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/Icons/FileCopyOutline.svelte

@@ -0,0 +1,17 @@
+<script>
+  /** @type {string} */
+  let className = "";
+  export { className as class };
+</script>
+
+<svg
+  class={className}
+  aria-hidden="true"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.5"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
+</svg>

package/dist/components/Icons/FileCopyOutline.svelte.d.ts

@@ -0,0 +1,27 @@
+export default FileCopyOutline;
+type FileCopyOutline = SvelteComponent<{
+    class?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const FileCopyOutline: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=FileCopyOutline.svelte.d.ts.map

package/dist/components/Icons/FileCopyOutline.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileCopyOutline.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Icons/FileCopyOutline.svelte.js"],"names":[],"mappings":";;;;;;;;AAyBA;;;;mBAAsI;6CATzF,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,KAAK,GAAG;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;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Icons/Home.svelte.d.ts

@@ -1,15 +1,15 @@
 export default Home;
 type Home = SvelteComponent<{
-    color?: string | undefined;
     size?: string | undefined;
+    color?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
 declare const Home: $$__sveltets_2_IsomorphicComponent<{
-    color?: string | undefined;
     size?: string | undefined;
+    color?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/Icons/HomeSolid.svelte

@@ -0,0 +1,16 @@
+<script>
+  /** @type {string} */
+  let className = "";
+  export { className as class };
+</script>
+
+<svg
+  class={className}
+  aria-hidden="true"
+  fill="currentColor"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z" />
+  <path d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z" />
+</svg>

package/dist/components/Icons/HomeSolid.svelte.d.ts

@@ -0,0 +1,27 @@
+export default HomeSolid;
+type HomeSolid = SvelteComponent<{
+    class?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const HomeSolid: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=HomeSolid.svelte.d.ts.map

package/dist/components/Icons/HomeSolid.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HomeSolid.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Icons/HomeSolid.svelte.js"],"names":[],"mappings":";;;;;;;;AA0BA;;;;mBAAgI;6CATnF,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,KAAK,GAAG;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;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Icons/Icon.stories.svelte

@@ -1,8 +1,9 @@
-<script context="module">
-  import { Story, Template } from "@storybook/addon-svelte-csf";
-  import Icon from "./Icon.svelte";
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  export const meta = {
+    import Icon from "./Icon.svelte";
+
+  const { Story } = defineMeta({
     title: "Components/Icons",
     component: Icon,
     argTypes: {
@@ -10,7 +11,7 @@
       size: { control: "text" },
       color: { control: "color" },
     },
-  };
+  });
 
   const iconNames = [
     "Home",
@@ -37,18 +38,16 @@
     "Copy",
     "Cross",
   ];
+
 </script>
 
-<Template let:args>
-  <Icon {...args} />
-</Template>
 
 <Story name="All Icons">
   <div class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-6 p-4">
     {#each iconNames as iconName}
-      <div class="flex flex-col items-center gap-2 p-3 border rounded-lg hover:bg-gray-50">
+      <div class="flex flex-col items-center gap-2 p-3 border rounded-lg hover:bg-gray-50 dark:bg-gray-800">
         <Icon name={iconName} size="24" />
-        <span class="text-xs text-gray-600 text-center">{iconName}</span>
+        <span class="text-xs text-gray-500 dark:text-gray-400 text-center">{iconName}</span>
       </div>
     {/each}
   </div>
@@ -58,23 +57,23 @@
   <div class="flex items-end gap-6 p-4">
     <div class="flex flex-col items-center gap-2">
       <Icon name="Home" size="16" />
-      <span class="text-xs text-gray-600">16px</span>
+      <span class="text-xs text-gray-500 dark:text-gray-400">16px</span>
     </div>
     <div class="flex flex-col items-center gap-2">
       <Icon name="Home" size="20" />
-      <span class="text-xs text-gray-600">20px</span>
+      <span class="text-xs text-gray-500 dark:text-gray-400">20px</span>
     </div>
     <div class="flex flex-col items-center gap-2">
       <Icon name="Home" size="24" />
-      <span class="text-xs text-gray-600">24px</span>
+      <span class="text-xs text-gray-500 dark:text-gray-400">24px</span>
     </div>
     <div class="flex flex-col items-center gap-2">
       <Icon name="Home" size="32" />
-      <span class="text-xs text-gray-600">32px</span>
+      <span class="text-xs text-gray-500 dark:text-gray-400">32px</span>
     </div>
     <div class="flex flex-col items-center gap-2">
       <Icon name="Home" size="48" />
-      <span class="text-xs text-gray-600">48px</span>
+      <span class="text-xs text-gray-500 dark:text-gray-400">48px</span>
     </div>
   </div>
 </Story>
@@ -83,19 +82,19 @@
   <div class="flex items-center gap-6 p-4">
     <div class="flex flex-col items-center gap-2">
       <Icon name="CheckCircle" size="32" color="#22c55e" />
-      <span class="text-xs text-gray-600">Success</span>
+      <span class="text-xs text-gray-500 dark:text-gray-400">Success</span>
     </div>
     <div class="flex flex-col items-center gap-2">
       <Icon name="ErrorCircle" size="32" color="#ef4444" />
-      <span class="text-xs text-gray-600">Error</span>
+      <span class="text-xs text-gray-500 dark:text-gray-400">Error</span>
     </div>
     <div class="flex flex-col items-center gap-2">
       <Icon name="Info" size="32" color="#3b82f6" />
-      <span class="text-xs text-gray-600">Info</span>
+      <span class="text-xs text-gray-500 dark:text-gray-400">Info</span>
     </div>
     <div class="flex flex-col items-center gap-2">
       <Icon name="Notification" size="32" color="#f59e0b" />
-      <span class="text-xs text-gray-600">Warning</span>
+      <span class="text-xs text-gray-500 dark:text-gray-400">Warning</span>
     </div>
   </div>
 </Story>

package/dist/components/Icons/Icon.stories.svelte.d.ts

@@ -1,20 +1,3 @@
-export namespace meta {
-    export let title: string;
-    export { Icon as component };
-    export namespace argTypes {
-        namespace name {
-            let control: string;
-        }
-        namespace size {
-            let control_1: string;
-            export { control_1 as control };
-        }
-        namespace color {
-            let control_2: string;
-            export { control_2 as control };
-        }
-    }
-}
 export default Icon;
 type Icon = SvelteComponent<{
     [x: string]: never;

package/dist/components/Icons/Icon.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Icons/Icon.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmHA;;;;mBAAgH;iBA/G7F,eAAe;6CAsGW,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":"Icon.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Icons/Icon.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAkHA;;;;mBAAgH;iBA7G3F,eAAe;6CAoGS,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"}

package/dist/components/Icons/Icon.svelte.d.ts

@@ -1,8 +1,8 @@
 export default Icon;
 type Icon = SvelteComponent<{
     name: any;
-    color?: string | undefined;
     size?: string | undefined;
+    color?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
@@ -10,8 +10,8 @@ type Icon = SvelteComponent<{
 };
 declare const Icon: $$__sveltets_2_IsomorphicComponent<{
     name: any;
-    color?: string | undefined;
     size?: string | undefined;
+    color?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

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

@@ -1,13 +1,15 @@
-<script context="module">
-  export const meta = {
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const { Story } = defineMeta({
     title: 'Components/Icons/Gallery',
     tags: ['autodocs'],
-  };
+  });
+
 </script>
 
 <script>
-  import { Story } from '@storybook/addon-svelte-csf';
-  import ArrowLeft from './ArrowLeft.svelte';
+    import ArrowLeft from './ArrowLeft.svelte';
   import ArrowRight from './ArrowRight.svelte';
   import Availability from './Availability.svelte';
   import Back from './Back.svelte';
@@ -76,15 +78,15 @@
 <Story name="All Icons">
   <div class="p-8">
     <h1 class="text-3xl font-bold mb-6">Icon Gallery</h1>
-    <p class="text-gray-600 mb-8">All available icons in the component library</p>
+    <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 transition-colors">
+        <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-700 font-medium">{name}</span>
+          <span class="text-sm text-center text-gray-500 dark:text-gray-400 font-medium">{name}</span>
         </div>
       {/each}
     </div>
@@ -100,25 +102,25 @@
           <div class="w-12 h-12 flex items-center justify-center mb-2">
             <Home />
           </div>
-          <span class="text-xs text-gray-500">Home</span>
+          <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">Shows</span>
+          <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">Availability</span>
+          <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">Profile</span>
+          <span class="text-xs text-gray-500 dark:text-gray-400">Profile</span>
         </div>
       </div>
     </div>
@@ -127,28 +129,28 @@
       <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-500">
+          <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">Success</span>
+          <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-500">
+          <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">Error</span>
+          <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-yellow-500">
+          <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">Warning</span>
+          <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">Info</span>
+          <span class="text-xs text-gray-500 dark:text-gray-400">Info</span>
         </div>
       </div>
     </div>
@@ -160,25 +162,25 @@
           <div class="w-12 h-12 flex items-center justify-center mb-2">
             <FacebookIcon />
           </div>
-          <span class="text-xs text-gray-500">Facebook</span>
+          <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">Instagram</span>
+          <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">Twitter</span>
+          <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">TikTok</span>
+          <span class="text-xs text-gray-500 dark:text-gray-400">TikTok</span>
         </div>
       </div>
     </div>
@@ -190,25 +192,25 @@
           <div class="w-12 h-12 flex items-center justify-center mb-2">
             <Copy />
           </div>
-          <span class="text-xs text-gray-500">Copy</span>
+          <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">Reload</span>
+          <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">Close</span>
+          <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">More</span>
+          <span class="text-xs text-gray-500 dark:text-gray-400">More</span>
         </div>
       </div>
     </div>

package/dist/components/Icons/IconGallery.stories.svelte.d.ts

@@ -1,7 +1,3 @@
-export namespace meta {
-    let title: string;
-    let tags: string[];
-}
 export default IconGallery;
 type IconGallery = SvelteComponent<{
     [x: string]: never;

package/dist/components/Icons/IconGallery.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconGallery.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Icons/IconGallery.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;AA0RA;;;;mBAAuH;6CAT1E,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":"IconGallery.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Icons/IconGallery.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA2RA;;;;mBAAuH;6CAT1E,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"}

package/dist/components/Icons/Info.svelte.d.ts

@@ -1,15 +1,15 @@
 export default Info;
 type Info = SvelteComponent<{
-    color?: string | undefined;
     size?: string | undefined;
+    color?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
 declare const Info: $$__sveltets_2_IsomorphicComponent<{
-    color?: string | undefined;
     size?: string | undefined;
+    color?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/Icons/InfoCircleOutline.svelte

@@ -0,0 +1,17 @@
+<script>
+  /** @type {string} */
+  let className = "";
+  export { className as class };
+</script>
+
+<svg
+  class={className}
+  aria-hidden="true"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.5"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+</svg>

package/dist/components/Icons/InfoCircleOutline.svelte.d.ts

@@ -0,0 +1,27 @@
+export default InfoCircleOutline;
+type InfoCircleOutline = SvelteComponent<{
+    class?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const InfoCircleOutline: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=InfoCircleOutline.svelte.d.ts.map

package/dist/components/Icons/InfoCircleOutline.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoCircleOutline.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Icons/InfoCircleOutline.svelte.js"],"names":[],"mappings":";;;;;;;;AAyBA;;;;mBAAwI;6CAT3F,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,KAAK,GAAG;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;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Icons/InstagramIcon.svelte.d.ts

@@ -1,15 +1,15 @@
 export default InstagramIcon;
 type InstagramIcon = SvelteComponent<{
-    color?: string | undefined;
     size?: string | undefined;
+    color?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
 declare const InstagramIcon: $$__sveltets_2_IsomorphicComponent<{
-    color?: string | undefined;
     size?: string | undefined;
+    color?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/Icons/LogoInstagram.svelte

@@ -0,0 +1,18 @@
+<script>
+  /** @type {string} */
+  let className = "";
+  export { className as class };
+  export let size = 20;
+</script>
+
+<svg
+  class={className}
+  width={size}
+  height={size}
+  aria-hidden="true"
+  fill="currentColor"
+  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>