@getmicdrop/svelte-components 5.0.0 → 5.1.1

package/dist/primitives/Button/Button.stories.svelte

@@ -2,6 +2,7 @@
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import Button from "./Button.svelte";
   import ButtonSaveDemo from "./ButtonSaveDemo.svelte";
+  import ButtonVariantShowcase from "./ButtonVariantShowcase.svelte";
 
   import Add from "./../../assets/svg/add-main.svg";
   import ArrowLeft from "./../../assets/svg/arrow-left-02.svg";
@@ -10,100 +11,66 @@
   const { Story } = defineMeta({
     title: "Components/Button",
     component: Button,
+    tags: ['autodocs'],
     argTypes: {
       variant: {
         control: "select",
-        options: ["blue-solid", "blue-outline", "gray-outline", "red-solid", "red-outline", "red-text"],
+        options: ["default", "alternative", "outline", "red", "red-outline", "ghost", "ghost-red", "link", "toggle", "icon"],
       },
       size: {
         control: "select",
-        options: ["", "full", "lg", "md", "sm", "xs"],
+        options: ["xs", "sm", "md", "lg", "xl", "xl-medium", "full", "full-md-auto", "half"],
       },
       disabled: { control: "boolean" },
       loading: { control: "boolean" },
       success: { control: "boolean" },
-      className: { control: "text" },
+      successText: { control: "text" },
+      active: { control: "boolean" },
+    },
+    args: {
+      children: "Button",
     },
   });
-
-  function handleAlert() {
-    alert("Hii, This is Function Alert");
-  }
-
 </script>
 
-
-<!-- Primary (Blue Solid) Buttons -->
-<Story name="Blue Solid (Default)" args={{ label: "Primary Button" }} />
-
-<Story name="Blue Solid with Icon">
-  <Button on:click={handleAlert} beforeIcon={Add}>Add New</Button>
-</Story>
-
-<!-- Blue Outline Buttons -->
-<Story name="Blue Outline" args={{ label: "View Details", variant: "blue-outline" }} />
-
-<!-- Gray Outline Buttons -->
-<Story name="Gray Outline" args={{ label: "Cancel", variant: "gray-outline" }} />
-
-<!-- Red Solid Buttons -->
-<Story name="Red Solid" args={{ label: "Delete", variant: "red-solid" }} />
-
-<!-- Red Outline Buttons -->
-<Story name="Red Outline">
-  <Button variant="red-outline" on:click={handleAlert} beforeIcon={DeleteIcon}>
-    Delete Item
-  </Button>
+<!-- Full Showcase (uses dedicated component) -->
+<Story name="All Variants Showcase">
+  {#snippet template()}
+    <ButtonVariantShowcase />
+  {/snippet}
 </Story>
 
-<!-- Red Text Buttons -->
-<Story name="Red Text">
-  <Button variant="red-text" on:click={handleAlert}>
-    Sign out
-  </Button>
-</Story>
-
-<!-- Size Variants -->
-<Story name="Size: Full Width" args={{ label: "Full Width Button", size: "full" }} />
-<Story name="Size: Large" args={{ label: "Large Button", size: "lg" }} />
-<Story name="Size: Medium" args={{ label: "Medium Button", size: "md" }} />
-<Story name="Size: Small" args={{ label: "Small Button", size: "sm" }} />
-<Story name="Size: Extra Small" args={{ label: "XS Button", size: "xs" }} />
-
-<!-- States -->
-<Story name="Disabled State" args={{ label: "Disabled", disabled: true }} />
-
-<Story name="Loading State" args={{ label: "Save", loading: true }} />
-
-<Story name="Success State" args={{ label: "Save", success: true }} />
-
-<Story name="Save Button Flow">
+<!-- Interactive Playground -->
+<Story name="Playground" args={{ children: "Click me" }} />
+
+<!-- ========== VARIANTS ========== -->
+<Story name="default" args={{ variant: "default", children: "Primary Button" }} />
+<Story name="alternative" args={{ variant: "alternative", children: "Secondary" }} />
+<Story name="outline" args={{ variant: "outline", children: "Outline" }} />
+<Story name="ghost" args={{ variant: "ghost", children: "Ghost" }} />
+<Story name="link" args={{ variant: "link", children: "Link style" }} />
+<Story name="red" args={{ variant: "red", children: "Delete" }} />
+<Story name="red-outline" args={{ variant: "red-outline", children: "Remove" }} />
+<Story name="ghost-red" args={{ variant: "ghost-red", children: "Sign out" }} />
+<Story name="toggle" args={{ variant: "toggle", children: "Filter" }} />
+<Story name="toggle (active)" args={{ variant: "toggle", active: true, children: "Selected" }} />
+
+<!-- ========== SIZES ========== -->
+<Story name="Size: xs" args={{ size: "xs", children: "Extra Small" }} />
+<Story name="Size: sm" args={{ size: "sm", children: "Small" }} />
+<Story name="Size: md" args={{ size: "md", children: "Medium" }} />
+<Story name="Size: lg" args={{ size: "lg", children: "Large" }} />
+<Story name="Size: xl" args={{ size: "xl", children: "Extra Large" }} />
+<Story name="Size: full" args={{ size: "full", children: "Full Width" }} />
+<Story name="Size: xl-medium" args={{ size: "xl-medium", children: "Login Button" }} />
+<Story name="Size: half" args={{ size: "half", children: "Half Width" }} />
+
+<!-- ========== STATES ========== -->
+<Story name="Disabled" args={{ disabled: true, children: "Disabled" }} />
+<Story name="Loading" args={{ loading: true, children: "Saving..." }} />
+<Story name="Success" args={{ success: true, successText: "Saved!", children: "Save" }} />
+
+<!-- ========== INTERACTIVE DEMO ========== -->
+<Story name="Save Flow Demo" asChild>
   <ButtonSaveDemo />
 </Story>
-
-<!-- All Variants Grid -->
-<Story name="All Variants">
-  <div class="space-y-4 p-4">
-    <h3 class="text-lg font-semibold">All Button Variants</h3>
-    <div class="flex flex-wrap gap-4">
-      <Button>blue-solid (default)</Button>
-      <Button variant="blue-outline">blue-outline</Button>
-      <Button variant="gray-outline">gray-outline</Button>
-      <Button variant="red-solid">red-solid</Button>
-      <Button variant="red-outline">red-outline</Button>
-      <Button variant="red-text">red-text</Button>
-    </div>
-
-    <h3 class="text-lg font-semibold mt-6">All Sizes</h3>
-    <div class="space-y-2">
-      <div><Button size="full">size="full"</Button></div>
-      <div class="flex flex-wrap gap-2 items-end">
-        <Button size="lg">size="lg"</Button>
-        <Button size="md">size="md"</Button>
-        <Button>default</Button>
-        <Button size="sm">size="sm"</Button>
-        <Button size="xs">size="xs"</Button>
-      </div>
-    </div>
-  </div>
-</Story>

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA2HA;;;;mBAAkH;mBAvH7F,iBAAiB;6CA8GO,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":"Button.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA0FA;;;;mBAAkH;mBAtF7F,iBAAiB;6CA6EO,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/primitives/Button/Button.svelte

@@ -27,6 +27,8 @@
   export let successText = "";
   export let active = false;
   export let href = null;
+  /** @type {string} Text content (alternative to slot, for Storybook) */
+  export let children = "";
   /** @type {string} Additional CSS classes */
   let className = "";
   export { className as class };
@@ -50,9 +52,12 @@
     xs: "px-3 py-1.5 text-xs",
     sm: "px-3 py-2 text-sm",
     md: "px-4 py-2.5 text-sm",
-    lg: "px-5 py-3 text-base",
-    xl: "px-6 py-3.5 text-base",
-    full: "w-full px-5 py-3 text-base",
+    lg: "px-5 py-3 text-sm",
+    xl: "px-6 py-3.5 text-sm",
+    "xl-medium": "w-full px-6 py-3.5 text-sm",
+    full: "w-full px-5 py-3 text-sm",
+    "full-md-auto": "w-full px-5 py-3 text-sm md:w-auto",
+    half: "w-1/2 px-4 py-2.5 text-sm",
   };
 
   // Icon variant sizes
@@ -103,6 +108,7 @@
   })();
 
   $: buttonClasses = [
+    "relative",
     "inline-flex items-center justify-center",
     "rounded-lg",
     "font-medium leading-none",
@@ -124,7 +130,7 @@
     {...$$restProps}
   >
     <span class="inline-flex items-center gap-1.5" class:invisible={loading || success}>
-      <slot />
+      {#if children}{children}{:else}<slot />{/if}
     </span>
     {#if loading}
       <span class="absolute inset-0 flex items-center justify-center">
@@ -140,7 +146,7 @@
     {...$$restProps}
   >
     <span class="inline-flex items-center gap-1.5" class:invisible={loading || success}>
-      <slot />
+      {#if children}{children}{:else}<slot />{/if}
     </span>
     {#if loading}
       <span class="absolute inset-0 flex items-center justify-center">

package/dist/primitives/Button/Button.svelte.d.ts

@@ -10,6 +10,7 @@ type Button = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     successText?: string | undefined;
     active?: boolean | undefined;
     href?: null | undefined;
+    children?: string | undefined;
 }, {
     default: {};
 }>, {
@@ -32,6 +33,7 @@ declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
     successText?: string | undefined;
     active?: boolean | undefined;
     href?: null | undefined;
+    children?: string | undefined;
 }, {
     default: {};
 }>, {

package/dist/primitives/Button/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2KA;;;;;;;;;;;;;;;;;;;eAA0N;sCATpL,KAAK,EAAE,KAAK;;;;;6CALL,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"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkLA;;;;;;;;;;;;;;;;;;;;eAAqO;sCAT/L,KAAK,EAAE,KAAK;;;;;6CALL,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/primitives/Button/ButtonVariantShowcase.svelte

@@ -0,0 +1,137 @@
+<script>
+  import Button from './Button.svelte';
+
+  const variants = [
+    { name: 'default', label: 'Primary Blue', desc: 'Main action' },
+    { name: 'alternative', label: 'Gray Outline', desc: 'Secondary action' },
+    { name: 'outline', label: 'Blue Outline', desc: 'Tertiary action' },
+    { name: 'ghost', label: 'Ghost', desc: 'Subtle action' },
+    { name: 'link', label: 'Link', desc: 'Inline text action' },
+    { name: 'red', label: 'Red Solid', desc: 'Destructive' },
+    { name: 'red-outline', label: 'Red Outline', desc: 'Less intense destructive' },
+    { name: 'ghost-red', label: 'Ghost Red', desc: 'Subtle destructive' },
+    { name: 'toggle', label: 'Toggle', desc: 'Filter/tab pills' },
+    { name: 'icon', label: 'Icon', desc: 'Square icon buttons' },
+  ];
+
+  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
+  const widthSizes = ['full', 'xl-medium', 'full-md-auto', 'half'];
+
+  let isDark = false;
+
+  function toggleDark() {
+    isDark = !isDark;
+    document.documentElement.classList.toggle('dark', isDark);
+  }
+</script>
+
+<div class="min-h-screen p-6 space-y-8 {isDark ? 'bg-gray-900' : 'bg-gray-50'}">
+  <!-- Header -->
+  <div class="flex items-center justify-between">
+    <div>
+      <h1 class="text-2xl font-bold {isDark ? 'text-white' : 'text-gray-900'}">Button Variants</h1>
+      <p class="{isDark ? 'text-gray-400' : 'text-gray-600'}">All variants × all sizes</p>
+    </div>
+    <button
+      on:click={toggleDark}
+      class="px-4 py-2 rounded-lg font-medium {isDark ? 'bg-yellow-500 text-black' : 'bg-gray-800 text-white'}"
+    >
+      {isDark ? '☀️ Light' : '🌙 Dark'}
+    </button>
+  </div>
+
+  <!-- Variants Grid -->
+  {#each variants as v}
+    <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
+      <div class="mb-3">
+        <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">{v.name}</h2>
+        <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">{v.label} — {v.desc}</p>
+      </div>
+
+      {#if v.name === 'icon'}
+        <!-- Icon variant uses different sizing -->
+        <div class="flex flex-wrap gap-3 items-end">
+          <Button variant="icon" size="xs">×</Button>
+          <Button variant="icon" size="sm">×</Button>
+          <Button variant="icon" size="md">×</Button>
+          <Button variant="icon" size="lg">×</Button>
+        </div>
+      {:else if v.name === 'toggle'}
+        <!-- Toggle shows active state -->
+        <div class="flex flex-wrap gap-3 items-center">
+          {#each sizes as size}
+            <Button variant="toggle" {size}>{size}</Button>
+          {/each}
+          <Button variant="toggle" active={true}>active</Button>
+        </div>
+      {:else}
+        <div class="flex flex-wrap gap-3 items-end">
+          {#each sizes as size}
+            <Button variant={v.name} {size}>{size}</Button>
+          {/each}
+        </div>
+      {/if}
+    </section>
+  {/each}
+
+  <!-- Width Sizes -->
+  <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
+    <div class="mb-3">
+      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">Width Sizes</h2>
+      <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">Full-width and responsive options</p>
+    </div>
+    <div class="max-w-md space-y-3">
+      <Button size="full">full</Button>
+      <Button size="xl-medium">xl-medium</Button>
+      <Button size="full-md-auto">full-md-auto</Button>
+      <div class="flex gap-2">
+        <Button size="half" variant="alternative">half</Button>
+        <Button size="half">half</Button>
+      </div>
+    </div>
+  </section>
+
+  <!-- States -->
+  <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
+    <div class="mb-3">
+      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">States</h2>
+      <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">Loading, success, disabled</p>
+    </div>
+    <div class="flex flex-wrap gap-4 items-center">
+      <Button disabled>Disabled</Button>
+      <Button loading>Loading</Button>
+      <Button success successText="Saved!">Success</Button>
+    </div>
+  </section>
+
+  <!-- Common Patterns -->
+  <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
+    <div class="mb-3">
+      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">Common Patterns</h2>
+    </div>
+    <div class="space-y-4">
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Cancel / Save</p>
+        <div class="flex gap-2">
+          <Button variant="ghost">Cancel</Button>
+          <Button>Save</Button>
+        </div>
+      </div>
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Delete Confirmation</p>
+        <div class="flex gap-2">
+          <Button variant="alternative">Cancel</Button>
+          <Button variant="red">Delete</Button>
+        </div>
+      </div>
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Toggle Group</p>
+        <div class="flex gap-2">
+          <Button variant="toggle" active={true}>Active</Button>
+          <Button variant="toggle">Inactive</Button>
+          <Button variant="toggle">All</Button>
+        </div>
+      </div>
+    </div>
+  </section>
+</div>

package/dist/primitives/Button/ButtonVariantShowcase.svelte.d.ts

@@ -0,0 +1,27 @@
+export default ButtonVariantShowcase;
+type ButtonVariantShowcase = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ButtonVariantShowcase: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=ButtonVariantShowcase.svelte.d.ts.map

package/dist/primitives/Button/ButtonVariantShowcase.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonVariantShowcase.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/ButtonVariantShowcase.svelte.js"],"names":[],"mappings":";;;;;;;;AAuJA;;;;mBAAiI;6CATpF,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/recipes/SuperLogin/SuperLogin.svelte

@@ -749,7 +749,7 @@
 
               <div class="space-y-4">
                 <Button
-                  size="full"
+                  size="xl-medium"
                   type="submit"
                   loading={isLoading}
                   disabled={!isFormValid}
@@ -772,7 +772,7 @@
 
                 <Button
                   variant="gray-outline"
-                  size="full"
+                  size="xl-medium"
                   type="button"
                   onclick={() => {
                     view = "login-link";
@@ -924,7 +924,7 @@
 
               <div class="space-y-4">
                 <Button
-                  size="full"
+                  size="xl-medium"
                   type="submit"
                   loading={isLoading}
                   disabled={!isSetupValid}
@@ -994,7 +994,7 @@
 
               <div class="space-y-4">
                 <Button
-                  size="full"
+                  size="xl-medium"
                   type="submit"
                   loading={isLoading}
                   disabled={!email}
@@ -1075,7 +1075,7 @@
 
               <div class="space-y-4">
                 <Button
-                  size="full"
+                  size="xl-medium"
                   type="submit"
                   loading={isLoading}
                   disabled={!email}

package/dist/stories/ButtonAuditDashboard.stories.svelte

@@ -0,0 +1,14 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import ButtonAuditDashboard from "./ButtonAuditDashboard.svelte";
+
+  const { Story } = defineMeta({
+    title: "Design System/Button Audit Dashboard",
+    component: ButtonAuditDashboard,
+    parameters: {
+      layout: 'fullscreen',
+    }
+  });
+</script>
+
+<Story name="Full Audit" />

package/dist/stories/ButtonAuditDashboard.stories.svelte.d.ts

@@ -0,0 +1,28 @@
+export default ButtonAuditDashboard;
+type ButtonAuditDashboard = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ButtonAuditDashboard: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import ButtonAuditDashboard from "./ButtonAuditDashboard.svelte";
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=ButtonAuditDashboard.stories.svelte.d.ts.map

package/dist/stories/ButtonAuditDashboard.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonAuditDashboard.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/ButtonAuditDashboard.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA4BA;;;;mBAAgI;iCAxB7F,+BAA+B;6CAerB,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"}