@getmicdrop/svelte-components 2.8.1 → 3.1.0

package/dist/components/Modal/ConfirmationModal.svelte

@@ -37,7 +37,7 @@
     if (secondaryButtonText) {
       result.push({
         label: secondaryButtonText,
-        variant: "gray-outline",
+        variant: "alternative",
         onClick: () => dispatch("cancel")
       });
     }
@@ -45,7 +45,7 @@
     if (primaryButtonText) {
       result.push({
         label: primaryButtonText,
-        variant: variant === "danger" ? "red-solid" : "blue-solid",
+        variant: variant === "danger" ? "red" : "default",
         onClick: () => dispatch("confirm"),
         primary: true
       });
@@ -74,11 +74,11 @@
     const { strokebtn, deemphasized, btnDanger, danger, textBtn } = action;
 
     // Map old props to new variants
-    if (strokebtn && deemphasized) return "gray-outline";
+    if (strokebtn && deemphasized) return "alternative";
     if ((strokebtn && danger) || (btnDanger && strokebtn)) return "red-outline";
-    if (strokebtn) return "blue-outline";
-    if (textBtn && danger) return "red-text";
-    if (danger || btnDanger || action.label === "Delete") return "red-solid";
+    if (strokebtn) return "outline";
+    if (textBtn && danger) return "ghost-red";
+    if (danger || btnDanger || action.label === "Delete") return "red";
 
     // Default variant
     return undefined;

package/dist/components/Modal/ConfirmationModal.svelte.d.ts

@@ -1,13 +1,13 @@
 export default ConfirmationModal;
 type ConfirmationModal = SvelteComponent<{
-    title?: string | undefined;
     size?: string | undefined;
+    title?: string | undefined;
     variant?: string | undefined;
     actions?: any[] | undefined;
     show?: boolean | undefined;
+    icon?: null | undefined;
     disabled?: boolean | undefined;
     loading?: boolean | undefined;
-    icon?: null | undefined;
     description?: string | undefined;
     warningText?: string | undefined;
     customIcon?: null | undefined;
@@ -24,14 +24,14 @@ type ConfirmationModal = SvelteComponent<{
     $$bindings?: string | undefined;
 };
 declare const ConfirmationModal: $$__sveltets_2_IsomorphicComponent<{
-    title?: string | undefined;
     size?: string | undefined;
+    title?: string | undefined;
     variant?: string | undefined;
     actions?: any[] | undefined;
     show?: boolean | undefined;
+    icon?: null | undefined;
     disabled?: boolean | undefined;
     loading?: boolean | undefined;
-    icon?: null | undefined;
     description?: string | undefined;
     warningText?: string | undefined;
     customIcon?: null | undefined;

package/dist/components/Modal/InputModal.svelte

@@ -1,5 +1,6 @@
 <script>
   import { createEventDispatcher } from "svelte";
+  import { ExclamationTriangleOutline } from "../Icons";
   import Button from "../Button/Button.svelte";
   import Cancel from "../../assets/svg/cancel.svg";
   import Modal from "./Modal.svelte";
@@ -142,9 +143,7 @@
 
       {#if hasError && (errorMessage || emailError)}
         <p class="mt-2 text-sm text-red-600 dark:text-red-400 font-medium flex items-center gap-1">
-          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-          </svg>
+          <ExclamationTriangleOutline class="w-4 h-4" />
           {emailError ? "Please enter a valid email address" : errorMessage}
         </p>
       {:else if helpText && !hasError}
@@ -159,7 +158,7 @@
     {#if secondaryButtonText}
       <Button
         size="full"
-        variant="gray-outline"
+        variant="alternative"
         on:click={handleSecondaryAction}
         disabled={disabled || loading}
       >

package/dist/components/Modal/InputModal.svelte.d.ts

@@ -1,7 +1,7 @@
 export default InputModal;
 type InputModal = SvelteComponent<{
-    title?: string | undefined;
     size?: string | undefined;
+    title?: string | undefined;
     show?: boolean | undefined;
     disabled?: boolean | undefined;
     loading?: boolean | undefined;
@@ -32,8 +32,8 @@ type InputModal = SvelteComponent<{
     $$bindings?: string | undefined;
 };
 declare const InputModal: $$__sveltets_2_IsomorphicComponent<{
-    title?: string | undefined;
     size?: string | undefined;
+    title?: string | undefined;
     show?: boolean | undefined;
     disabled?: boolean | undefined;
     loading?: boolean | undefined;

package/dist/components/Modal/Modal.stories.svelte

@@ -1,21 +1,23 @@
-<script context="module">
-  import { Story } from "@storybook/addon-svelte-csf";
-  import ModalProgress from "./Modal.svelte";
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  export const meta = {
+    import ModalProgress from "./Modal.svelte";
+
+  const { Story } = defineMeta({
     title: "Components/Modal/ModalProgress",
     component: ModalProgress,
-  };
+  });
 
   let show1 = false;
   let show2 = false;
   let show3 = false;
+
 </script>
 
 <Story name="Basic Modal">
   <button
     on:click={() => (show1 = true)}
-    class="px-4 py-2 bg-blue-600 text-white rounded-lg"
+    class="px-4 py-2 bg-primary text-white rounded-lg"
   >
     Open Basic Modal
   </button>
@@ -24,7 +26,7 @@
       <h2 class="text-xl font-semibold mb-2">Modal Title</h2>
     </div>
     <div slot="body">
-      <p class="text-gray-600">This is the modal body content.</p>
+      <p class="text-gray-500 dark:text-gray-400">This is the modal body content.</p>
     </div>
     <div slot="footer">
       <button
@@ -40,7 +42,7 @@
 <Story name="Processing State">
   <button
     on:click={() => (show2 = true)}
-    class="px-4 py-2 bg-blue-600 text-white rounded-lg"
+    class="px-4 py-2 bg-primary text-white rounded-lg"
   >
     Open Processing Modal
   </button>
@@ -50,7 +52,7 @@
         <div
           class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"
         ></div>
-        <p class="text-gray-600">Processing your request...</p>
+        <p class="text-gray-500 dark:text-gray-400">Processing your request...</p>
       </div>
     </div>
   </ModalProgress>
@@ -66,9 +68,9 @@
   <ModalProgress bind:show={show3} isSuccess={true}>
     <div slot="body">
       <div class="flex flex-col items-center gap-4 text-center">
-        <div class="text-green-600 text-5xl">✓</div>
+        <div class="text-green-600 dark:text-green-400 text-5xl">✓</div>
         <h3 class="text-xl font-semibold">Success!</h3>
-        <p class="text-gray-600">Your action was completed successfully.</p>
+        <p class="text-gray-500 dark:text-gray-400">Your action was completed successfully.</p>
       </div>
     </div>
     <div slot="footer">

package/dist/components/Modal/Modal.stories.svelte.d.ts

@@ -1,9 +1,4 @@
-export namespace meta {
-    export let title: string;
-    export { ModalProgress as component };
-}
 export default Modal;
-import ModalProgress from "./Modal.svelte";
 type Modal = SvelteComponent<{
     [x: string]: never;
 }, {

package/dist/components/Modal/Modal.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/Modal.stories.svelte.js"],"names":[],"mappings":";;;;;0BAI4B,gBAAgB;;;;;;;;AA4E5C;;;;mBAAiH;6CATpE,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":"Modal.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/Modal.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAkFA;;;;mBAAiH;6CATpE,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/Modal/Modal.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { createEventDispatcher, onMount, onDestroy } from "svelte";
+  import { createEventDispatcher, onDestroy } from "svelte";
   import { fade, fly } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
   import { portal } from "../../utils/portal.js";
@@ -7,8 +7,9 @@
   export let show = false;
   export let isProcessing = false;
   export let isSuccess = false;
-  export let size = "default"; // "default" | "small" | "large" | "xlarge"
-  export let persistent = false; // When true, prevents closing by clicking backdrop or pressing Escape
+  /** @type {'default' | 'small' | 'large' | 'xlarge'} */
+  export let size = "default";
+  export let persistent = false;
 
   const dispatch = createEventDispatcher();
 
@@ -27,23 +28,26 @@
     show = false;
   };
 
-  // Determine size class - don't auto-shrink during processing/success to prevent drawer resize
-  $: sizeClass = size;
+  // Size classes for desktop modal (Tailwind scale)
+  const sizeClasses = {
+    default: "max-w-md",
+    small: "max-w-sm",
+    large: "max-w-xl",
+    xlarge: "max-w-2xl"
+  };
+
+  $: modalSizeClass = sizeClasses[size] || sizeClasses.default;
 
   // iOS-compatible scroll lock using position:fixed approach
-  // Reference: https://www.jayfreestone.com/writing/locking-body-scroll-ios/
   $: if (typeof document !== "undefined") {
     if (show) {
-      // Save current scroll position
       scrollY = window.scrollY;
-      // Apply fixed positioning to lock scroll (works on iOS)
       document.body.style.position = "fixed";
       document.body.style.top = `-${scrollY}px`;
       document.body.style.left = "0";
       document.body.style.right = "0";
       document.body.style.overflow = "hidden";
     } else {
-      // Restore scroll position
       document.body.style.position = "";
       document.body.style.top = "";
       document.body.style.left = "";
@@ -67,12 +71,10 @@
 <svelte:window on:keydown={handleKeydown} />
 
 {#if show}
-  <!-- Portal moves modal to document.body, outside all stacking contexts -->
-  <!-- This fixes iOS Safari/Chrome z-index issues with CSS Grid -->
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    class="modal-backdrop"
+    class="fixed inset-0 flex bg-black/50 z-50 items-end justify-center md:items-center md:p-4 touch-none overscroll-none"
     on:click={persistent ? null : resetModal}
     transition:fade={{ duration: 300 }}
     role="dialog"
@@ -83,22 +85,19 @@
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
-      class="modal-sheet"
-      class:small={sizeClass === "small"}
-      class:large={sizeClass === "large"}
-      class:xlarge={sizeClass === "xlarge"}
+      class="md:hidden bg-white dark:bg-gray-800 rounded-t-3xl w-full max-h-[90vh] max-h-[90dvh] overflow-hidden flex flex-col shadow-[0_-10px_40px_rgba(0,0,0,0.15)] touch-pan-y overscroll-contain"
       on:click|stopPropagation
       transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
     >
-      <!-- Handle bar (mobile only) -->
-      <div class="sheet-handle-wrapper">
-        <div class="sheet-handle"></div>
+      <!-- Handle bar -->
+      <div class="flex justify-center pt-3 pb-1 shrink-0">
+        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-sm"></div>
       </div>
 
-      <div class="modal-inner">
+      <div class="p-6 pb-[calc(5rem+env(safe-area-inset-bottom,0px))] overflow-y-auto flex-1">
         <slot name="header"></slot>
         <slot name="body"></slot>
-        <div class="modal-footer">
+        <div class="w-full flex flex-col gap-3 mt-6 empty:hidden empty:mt-0">
           <slot name="footer"></slot>
         </div>
       </div>
@@ -108,159 +107,15 @@
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
-      class="modal-centered"
-      class:small={sizeClass === "small"}
-      class:large={sizeClass === "large"}
-      class:xlarge={sizeClass === "xlarge"}
+      class="hidden md:block bg-white dark:bg-gray-800 p-6 rounded-lg {modalSizeClass} w-full max-h-[calc(100vh-4rem)] overflow-y-auto shadow-2xl"
       on:click|stopPropagation
       transition:fly={{ y: 20, duration: 200 }}
     >
       <slot name="header"></slot>
       <slot name="body"></slot>
-      <div class="modal-footer">
+      <div class="w-full flex flex-col md:flex-row md:justify-end gap-3 mt-6 empty:hidden empty:mt-0">
         <slot name="footer"></slot>
       </div>
     </div>
   </div>
 {/if}
-
-<style>
-  /*
-   * Modal uses Tailwind-compatible colors with dark mode support.
-   * Works across projects without requiring CSS variable synchronization.
-   */
-
-  .modal-backdrop {
-    position: fixed;
-    inset: 0;
-    display: flex;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 50;
-
-    /* iOS scroll lock - prevent scroll bleed-through */
-    touch-action: none;
-    -webkit-overflow-scrolling: none;
-    overscroll-behavior: none;
-
-    /* Mobile: align to bottom for sheet */
-    align-items: flex-end;
-    justify-content: center;
-  }
-
-  @media (min-width: 768px) {
-    .modal-backdrop {
-      /* Desktop: center the modal */
-      align-items: center;
-      padding: 1rem;
-    }
-  }
-
-  /* Mobile: Bottom sheet style */
-  .modal-sheet {
-    background-color: #ffffff;
-    border-radius: 1.5rem 1.5rem 0 0;
-    width: 100%;
-    max-height: 90vh;
-    max-height: 90dvh;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
-
-    /* Allow touch interactions within sheet, contain scroll */
-    touch-action: pan-y;
-    overscroll-behavior: contain;
-  }
-
-  :global(.dark) .modal-sheet {
-    background-color: #1f2937; /* gray-800 */
-  }
-
-  /* Hide sheet on desktop */
-  @media (min-width: 768px) {
-    .modal-sheet {
-      display: none;
-    }
-  }
-
-  .sheet-handle-wrapper {
-    display: flex;
-    justify-content: center;
-    padding: 0.75rem 0 0.25rem;
-    flex-shrink: 0;
-  }
-
-  .sheet-handle {
-    width: 2.5rem;
-    height: 0.25rem;
-    background-color: #d1d5db; /* gray-300 */
-    border-radius: 0.125rem;
-  }
-
-  :global(.dark) .sheet-handle {
-    background-color: #4b5563; /* gray-600 */
-  }
-
-  .modal-inner {
-    padding: 1.5rem;
-    /* Account for bottom nav bars (~70px) plus safe area */
-    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
-    overflow-y: auto;
-    flex: 1;
-  }
-
-  /* Desktop: Centered modal style */
-  .modal-centered {
-    display: none;
-    background-color: #ffffff;
-    padding: 1.5rem;
-    border-radius: 1rem;
-    max-width: 420px;
-    width: 100%;
-    max-height: calc(100vh - 4rem);
-    overflow-y: auto;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  }
-
-  :global(.dark) .modal-centered {
-    background-color: #1f2937; /* gray-800 */
-  }
-
-  @media (min-width: 768px) {
-    .modal-centered {
-      display: block;
-    }
-  }
-
-  .modal-centered.small {
-    max-width: 350px;
-  }
-
-  .modal-centered.large {
-    max-width: 560px;
-  }
-
-  .modal-centered.xlarge {
-    max-width: 700px;
-  }
-
-  .modal-footer {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    margin-top: 1.5rem; /* 24px - consistent gap before buttons */
-  }
-
-  .modal-footer:empty {
-    display: none;
-    margin-top: 0;
-  }
-
-  @media (min-width: 768px) {
-    .modal-footer {
-      flex-direction: row;
-      justify-content: flex-end;
-    }
-  }
-</style>

package/dist/components/Modal/Modal.svelte.d.ts

@@ -1,6 +1,6 @@
 export default Modal;
 type Modal = SvelteComponent<{
-    size?: string | undefined;
+    size?: "default" | "large" | "small" | "xlarge" | undefined;
     show?: boolean | undefined;
     isSuccess?: boolean | undefined;
     isProcessing?: boolean | undefined;
@@ -18,7 +18,7 @@ type Modal = SvelteComponent<{
     $$bindings?: string | undefined;
 };
 declare const Modal: $$__sveltets_2_IsomorphicComponent<{
-    size?: string | undefined;
+    size?: "default" | "large" | "small" | "xlarge" | undefined;
     show?: boolean | undefined;
     isSuccess?: boolean | undefined;
     isProcessing?: boolean | undefined;

package/dist/components/Modal/Modal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/Modal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAmIA;;;;;;;;;;;;;;;eAAgL;6CAdnI,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":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/Modal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAoIA;;;;;;;;;;;;;;;eAAgL;6CAdnI,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/Modal/ModalStateManager.svelte

@@ -27,7 +27,7 @@
   export let onSuccessClose = () => {};
 
   /** Custom success icon color class */
-  export let successIconColor = "text-accent-success";
+  export let successIconColor = "text-green-600";
 
   /** Custom processing icon color class */
   export let processingIconBgColor = "bg-orange-300";
@@ -43,7 +43,7 @@
         <Icon name="Reload" size="20" />
       </span>
     </div>
-    <p class="text-Text-Primary text-center font-medium">{processingMessage}</p>
+    <p class="text-gray-900 dark:text-white text-center font-medium">{processingMessage}</p>
   </div>
 {:else if isSuccess}
   <!-- Success State -->
@@ -51,13 +51,13 @@
     <div class={successIconColor}>
       <Icon name={successIcon} size="48" />
     </div>
-    <h2 class="text-xl font-semibold text-Text-Primary text-center">
+    <h2 class="text-xl font-semibold text-gray-900 dark:text-white text-center">
       {successTitle}
     </h2>
     {#if successMessage}
-      <p class="text-Text-Tartiary text-center text-sm">{successMessage}</p>
+      <p class="text-gray-500 dark:text-gray-400 text-center text-sm">{successMessage}</p>
     {/if}
-    <Button variant="blue-solid" size="full" on:click={onSuccessClose}>
+    <Button variant="default" size="full" on:click={onSuccessClose}>
       {successButtonText}
     </Button>
   </div>

package/dist/components/Modal/StatusModal.svelte

@@ -1,5 +1,6 @@
 <script>
   import { createEventDispatcher } from "svelte";
+  import { CheckOutline, CloseOutline, ExclamationTriangleOutline, InfoCircleOutline } from "../Icons";
   import Button from "../Button/Button.svelte";
   import Cancel from "../../assets/svg/cancel.svg";
   import Modal from "./Modal.svelte";
@@ -59,12 +60,12 @@
     if (action.variant) return action.variant;
     const label = action.label.toLowerCase();
     if (label.startsWith('delete') || label.startsWith('archive') || action.danger) {
-      return 'red-solid';
+      return 'red';
     }
     if (label === 'continue' || label === 'finish' || label === 'done' || label === 'save & notify') {
-      return 'blue-solid';
+      return 'default';
     }
-    return 'gray-outline';
+    return 'alternative';
   };
 
   // Icon colors based on variant
@@ -102,11 +103,11 @@
   const getButtonVariant = (type) => {
     switch (type) {
       case "error":
-        return "red-solid";
+        return "red";
       case "warning":
-        return "blue-solid";
+        return "default";
       default:
-        return "blue-solid";
+        return "default";
     }
   };
 
@@ -154,21 +155,13 @@
         {:else}
           <div class="w-14 h-14 rounded-full {colors.bg} flex items-center justify-center">
             {#if effectiveVariant === "success"}
-              <svg class="w-7 h-7 {colors.icon}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-              </svg>
+              <CheckOutline class="w-7 h-7 {colors.icon}" />
             {:else if effectiveVariant === "error"}
-              <svg class="w-7 h-7 {colors.icon}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-              </svg>
+              <CloseOutline class="w-7 h-7 {colors.icon}" />
             {:else if effectiveVariant === "warning"}
-              <svg class="w-7 h-7 {colors.icon}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-              </svg>
+              <ExclamationTriangleOutline class="w-7 h-7 {colors.icon}" />
             {:else if effectiveVariant === "info"}
-              <svg class="w-7 h-7 {colors.icon}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
+              <InfoCircleOutline class="w-7 h-7 {colors.icon}" />
             {/if}
           </div>
         {/if}

package/dist/components/Modal/StatusModal.svelte.d.ts

@@ -1,7 +1,7 @@
 export default StatusModal;
 type StatusModal = SvelteComponent<{
-    title?: string | undefined;
     size?: string | undefined;
+    title?: string | undefined;
     variant?: null | undefined;
     actions?: any[] | undefined;
     show?: boolean | undefined;
@@ -23,8 +23,8 @@ type StatusModal = SvelteComponent<{
     $$bindings?: string | undefined;
 };
 declare const StatusModal: $$__sveltets_2_IsomorphicComponent<{
-    title?: string | undefined;
     size?: string | undefined;
+    title?: string | undefined;
     variant?: null | undefined;
     actions?: any[] | undefined;
     show?: boolean | undefined;

package/dist/components/Modal/StatusModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/StatusModal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2NA;;;;;;;;;;;;;;;;;;;;mBAA0Q;6CAT7N,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":"StatusModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/StatusModal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqNA;;;;;;;;;;;;;;;;;;;;mBAA0Q;6CAT7N,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"}