@getmicdrop/svelte-components 1.0.2 → 1.0.4

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

@@ -0,0 +1,329 @@
+<script context="module">
+  import Modal from "./Modal.svelte";
+  import ConfirmationModal from "./ConfirmationModal.svelte";
+  import Button from "../Button/Button.svelte";
+
+  export const meta = {
+    title: "Audit/Modal Variants",
+    component: Modal,
+  };
+</script>
+
+<script>
+  import { Story } from "@storybook/addon-svelte-csf";
+
+  let showBasicModal = false;
+  let showProcessingModal = false;
+  let showSuccessModal = false;
+  let showConfirmDelete = false;
+  let showConfirmLeave = false;
+  let showConfirmCancel = false;
+  let showWithIcon = false;
+  let showWithWarning = false;
+</script>
+
+<Story name="All Modal Variants">
+  <div class="performer-portal p-6 space-y-8 bg-BG-Primary min-h-screen">
+    <div class="max-w-4xl mx-auto">
+      <h1 class="text-2xl font-bold text-Text-Primary mb-2">Modal Component Audit</h1>
+      <p class="text-Text-Tartiary mb-8">All modal variants as they appear across the performers portal</p>
+
+      <!-- SECTION: Base Modal Component -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Base Modal Component
+        </h2>
+        <p class="text-sm text-Text-Tartiary mb-4">
+          The base Modal uses slots (header, body, footer) and is wrapped by other components.
+        </p>
+
+        <div class="space-y-4">
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              Modal with header, body, footer slots
+            </div>
+            <Button variant="blue-solid" on:click={() => showBasicModal = true}>
+              Open Basic Modal
+            </Button>
+            <div class="mt-2 text-xs text-Text-Tartiary">
+              <strong>Props:</strong> show, isProcessing, isSuccess
+            </div>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              Modal with isProcessing=true (smaller width)
+            </div>
+            <Button variant="blue-outline" on:click={() => showProcessingModal = true}>
+              Open Processing Modal
+            </Button>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              Modal with isSuccess=true (smaller width)
+            </div>
+            <Button variant="blue-outline" on:click={() => showSuccessModal = true}>
+              Open Success Modal
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      <!-- SECTION: ConfirmationModal Component -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          ConfirmationModal Component
+        </h2>
+        <p class="text-sm text-Text-Tartiary mb-4">
+          Higher-level wrapper with title, description, and action buttons.
+        </p>
+
+        <div class="space-y-4">
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              Delete confirmation (red-solid action)
+            </div>
+            <Button variant="red-solid" on:click={() => showConfirmDelete = true}>
+              Show Delete Confirmation
+            </Button>
+            <div class="mt-2 text-xs text-Text-Tartiary">
+              <strong>Used in:</strong> payment-settings (delete payment method)
+            </div>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              Leave venue confirmation (gray-outline + red-solid)
+            </div>
+            <Button variant="red-outline" on:click={() => showConfirmLeave = true}>
+              Show Leave Venue Modal
+            </Button>
+            <div class="mt-2 text-xs text-Text-Tartiary">
+              <strong>Used in:</strong> ShowItemCard, VenueItemCard (duplicated!)
+            </div>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              Cancel booking confirmation
+            </div>
+            <Button variant="gray-outline" on:click={() => showConfirmCancel = true}>
+              Show Cancel Booking Modal
+            </Button>
+            <div class="mt-2 text-xs text-Text-Tartiary">
+              <strong>Used in:</strong> ShowItemCard
+            </div>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              With icon prop
+            </div>
+            <Button variant="blue-outline" on:click={() => showWithIcon = true}>
+              Show Modal with Icon
+            </Button>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              With warningText prop
+            </div>
+            <Button variant="red-outline" on:click={() => showWithWarning = true}>
+              Show Modal with Warning
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      <!-- SECTION: Props Summary -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Props Summary
+        </h2>
+
+        <div class="bg-BG-Secondary rounded-lg p-4 text-sm">
+          <h3 class="font-semibold text-Text-Primary mb-2">Base Modal</h3>
+          <table class="w-full text-left mb-4">
+            <thead>
+              <tr class="border-b border-stroke-Primary">
+                <th class="py-2 text-Text-Primary">Prop</th>
+                <th class="py-2 text-Text-Primary">Type</th>
+                <th class="py-2 text-Text-Primary">Description</th>
+              </tr>
+            </thead>
+            <tbody class="text-Text-Tartiary">
+              <tr class="border-b border-stroke-Secondary">
+                <td class="py-2 font-mono text-xs">show</td>
+                <td class="py-2 text-xs">boolean</td>
+                <td class="py-2 text-xs">Controls visibility</td>
+              </tr>
+              <tr class="border-b border-stroke-Secondary">
+                <td class="py-2 font-mono text-xs">isProcessing</td>
+                <td class="py-2 text-xs">boolean</td>
+                <td class="py-2 text-xs">Shows smaller modal (350px)</td>
+              </tr>
+              <tr>
+                <td class="py-2 font-mono text-xs">isSuccess</td>
+                <td class="py-2 text-xs">boolean</td>
+                <td class="py-2 text-xs">Shows smaller modal (350px)</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <h3 class="font-semibold text-Text-Primary mb-2 mt-4">ConfirmationModal</h3>
+          <table class="w-full text-left">
+            <thead>
+              <tr class="border-b border-stroke-Primary">
+                <th class="py-2 text-Text-Primary">Prop</th>
+                <th class="py-2 text-Text-Primary">Type</th>
+                <th class="py-2 text-Text-Primary">Description</th>
+              </tr>
+            </thead>
+            <tbody class="text-Text-Tartiary">
+              <tr class="border-b border-stroke-Secondary">
+                <td class="py-2 font-mono text-xs">title</td>
+                <td class="py-2 text-xs">string</td>
+                <td class="py-2 text-xs">Modal heading</td>
+              </tr>
+              <tr class="border-b border-stroke-Secondary">
+                <td class="py-2 font-mono text-xs">description</td>
+                <td class="py-2 text-xs">string</td>
+                <td class="py-2 text-xs">Body text</td>
+              </tr>
+              <tr class="border-b border-stroke-Secondary">
+                <td class="py-2 font-mono text-xs">warningText</td>
+                <td class="py-2 text-xs">string</td>
+                <td class="py-2 text-xs">Red warning message</td>
+              </tr>
+              <tr class="border-b border-stroke-Secondary">
+                <td class="py-2 font-mono text-xs">icon</td>
+                <td class="py-2 text-xs">string (src)</td>
+                <td class="py-2 text-xs">Header icon image</td>
+              </tr>
+              <tr class="border-b border-stroke-Secondary">
+                <td class="py-2 font-mono text-xs">closeBtn</td>
+                <td class="py-2 text-xs">boolean</td>
+                <td class="py-2 text-xs">Show X button</td>
+              </tr>
+              <tr>
+                <td class="py-2 font-mono text-xs">actions</td>
+                <td class="py-2 text-xs">array</td>
+                <td class="py-2 text-xs">Button configs with label, onClick, variant</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <!-- SECTION: Consolidation Recommendations -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Consolidation Recommendations
+        </h2>
+
+        <div class="space-y-4 text-sm text-Text-Tartiary">
+          <div class="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
+            <h3 class="font-semibold text-red-700 dark:text-red-400 mb-2">Issues Found</h3>
+            <ul class="list-disc list-inside space-y-1">
+              <li><strong>"Leave Venue" modal is duplicated</strong> in ShowItemCard and VenueItemCard - exact same code!</li>
+              <li>Base Modal has <strong>no dark mode support</strong> - uses hardcoded bg-BG-Primary</li>
+              <li>Modal lacks <strong>accessibility features</strong> - no focus trap, no escape key handling</li>
+              <li>isProcessing and isSuccess props both do the same thing (smaller width)</li>
+            </ul>
+          </div>
+
+          <div class="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
+            <h3 class="font-semibold text-yellow-700 dark:text-yellow-400 mb-2">Suggested Changes</h3>
+            <ul class="list-disc list-inside space-y-1">
+              <li>Extract "Leave Venue" modal into shared LeaveVenueModal component</li>
+              <li>Add dark mode CSS variables to base Modal</li>
+              <li>Combine isProcessing/isSuccess into single "size" prop (normal, small)</li>
+              <li>Add escape key and focus trap for accessibility</li>
+              <li>Consider adding transition animations</li>
+            </ul>
+          </div>
+
+          <div class="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
+            <h3 class="font-semibold text-green-700 dark:text-green-400 mb-2">Keep As-Is</h3>
+            <ul class="list-disc list-inside space-y-1">
+              <li>Slot-based architecture is flexible and works well</li>
+              <li>ConfirmationModal abstraction is useful for common patterns</li>
+              <li>Action button variant mapping (legacy props to new) is helpful</li>
+            </ul>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+
+  <!-- Actual Modals -->
+  <Modal bind:show={showBasicModal}>
+    <div slot="header">
+      <h3 class="text-lg font-semibold text-Text-Primary">Basic Modal</h3>
+    </div>
+    <div slot="body" class="py-4">
+      <p class="text-Text-Tartiary">This is the base modal with custom slot content.</p>
+    </div>
+    <div slot="footer" class="flex gap-2">
+      <Button variant="gray-outline" on:click={() => showBasicModal = false}>Cancel</Button>
+      <Button variant="blue-solid" on:click={() => showBasicModal = false}>Confirm</Button>
+    </div>
+  </Modal>
+
+  <Modal bind:show={showProcessingModal} isProcessing={true}>
+    <div slot="body" class="py-8 text-center">
+      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-4"></div>
+      <p class="text-Text-Tartiary">Processing...</p>
+    </div>
+  </Modal>
+
+  <Modal bind:show={showSuccessModal} isSuccess={true}>
+    <div slot="body" class="py-8 text-center">
+      <div class="text-green-500 text-4xl mb-4">✓</div>
+      <p class="text-Text-Primary font-semibold">Success!</p>
+    </div>
+  </Modal>
+
+  <ConfirmationModal
+    bind:show={showConfirmDelete}
+    title="Delete Payment Method"
+    description="Are you sure you want to delete this payment method? This action cannot be undone."
+    actions={[
+      { label: "Cancel", onClick: () => {}, variant: "gray-outline" },
+      { label: "Delete", onClick: () => {}, variant: "red-solid" }
+    ]}
+  />
+
+  <ConfirmationModal
+    bind:show={showConfirmLeave}
+    title="Leave Venue"
+    description="Are you sure you want to leave this venue? You will need to be re-invited to perform here again."
+    warningText="This action cannot be undone."
+    actions={[
+      { label: "Cancel", onClick: () => {}, variant: "gray-outline" },
+      { label: "Leave Venue", onClick: () => {}, variant: "red-solid" }
+    ]}
+  />
+
+  <ConfirmationModal
+    bind:show={showConfirmCancel}
+    title="Cancel Booking"
+    description="Are you sure you want to cancel this booking?"
+    actions={[
+      { label: "Close", onClick: () => {}, variant: "gray-outline" },
+      { label: "Yes, cancel", onClick: () => {}, variant: "red-solid" }
+    ]}
+  />
+
+  <ConfirmationModal
+    bind:show={showWithWarning}
+    title="Danger Zone"
+    description="This action has serious consequences."
+    warningText="Warning: This cannot be reversed!"
+    actions={[
+      { label: "Go Back", onClick: () => {}, variant: "gray-outline" },
+      { label: "Proceed", onClick: () => {}, variant: "red-solid" }
+    ]}
+  />
+</Story>

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

@@ -0,0 +1,31 @@
+export namespace meta {
+    export let title: string;
+    export { Modal as component };
+}
+/** @typedef {typeof __propDef.props}  ModalAuditProps */
+/** @typedef {typeof __propDef.events}  ModalAuditEvents */
+/** @typedef {typeof __propDef.slots}  ModalAuditSlots */
+export default class ModalAudit extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ModalAuditProps = typeof __propDef.props;
+export type ModalAuditEvents = typeof __propDef.events;
+export type ModalAuditSlots = typeof __propDef.slots;
+import Modal from "./Modal.svelte";
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=ModalAudit.stories.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalAudit.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/ModalAudit.stories.svelte.js"],"names":[],"mappings":";;;;AA6TA,yDAAyD;AACzD,2DAA2D;AAC3D,yDAAyD;AAEzD;;;;;CACC;8BALa,OAAO,SAAS,CAAC,KAAK;+BACtB,OAAO,SAAS,CAAC,MAAM;8BACvB,OAAO,SAAS,CAAC,KAAK;kBA5ThB,gBAAgB;gCAHJ,QAAQ;AA4TxC;;;;;;;;;;EAAgF"}

package/dist/components/Modal/ModalStateManager.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ModalStateManager.spec.d.ts.map

package/dist/components/Modal/ModalStateManager.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalStateManager.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/ModalStateManager.spec.js"],"names":[],"mappings":""}

package/dist/components/Modal/ModalStateManager.spec.js

@@ -0,0 +1,100 @@
+import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import ModalStateManager from "./ModalStateManager.svelte";
+
+describe("ModalStateManager Component Tests", () => {
+  test("Shows processing state when isProcessing is true", () => {
+    render(ModalStateManager, {
+      props: { isProcessing: true, isSuccess: false },
+    });
+    expect(screen.getByText("Processing your request")).toBeInTheDocument();
+  });
+
+  test("Shows custom processing message", () => {
+    render(ModalStateManager, {
+      props: {
+        isProcessing: true,
+        isSuccess: false,
+        processingMessage: "Please wait...",
+      },
+    });
+    expect(screen.getByText("Please wait...")).toBeInTheDocument();
+  });
+
+  test("Shows success state when isSuccess is true", () => {
+    render(ModalStateManager, {
+      props: { isProcessing: false, isSuccess: true, successTitle: "Done!" },
+    });
+    expect(screen.getByText("Done!")).toBeInTheDocument();
+  });
+
+  test("Shows success message when provided", () => {
+    render(ModalStateManager, {
+      props: {
+        isProcessing: false,
+        isSuccess: true,
+        successTitle: "Success",
+        successMessage: "Your action was completed.",
+      },
+    });
+    expect(screen.getByText("Your action was completed.")).toBeInTheDocument();
+  });
+
+  test("Shows continue button in success state", () => {
+    render(ModalStateManager, {
+      props: { isProcessing: false, isSuccess: true },
+    });
+    expect(screen.getByText("Continue")).toBeInTheDocument();
+  });
+
+  test("Uses custom success button text", () => {
+    render(ModalStateManager, {
+      props: {
+        isProcessing: false,
+        isSuccess: true,
+        successButtonText: "Close",
+      },
+    });
+    expect(screen.getByText("Close")).toBeInTheDocument();
+  });
+
+  test("Calls onSuccessClose when success button clicked", async () => {
+    const user = userEvent.setup();
+    const onSuccessClose = vi.fn();
+
+    render(ModalStateManager, {
+      props: { isProcessing: false, isSuccess: true, onSuccessClose },
+    });
+
+    await user.click(screen.getByText("Continue"));
+    expect(onSuccessClose).toHaveBeenCalledTimes(1);
+  });
+
+  test("Processing state shows spinner animation", () => {
+    const { container } = render(ModalStateManager, {
+      props: { isProcessing: true, isSuccess: false },
+    });
+    const spinner = container.querySelector(".animate-spin");
+    expect(spinner).toBeInTheDocument();
+  });
+
+  test("Processing state has orange background", () => {
+    const { container } = render(ModalStateManager, {
+      props: { isProcessing: true, isSuccess: false },
+    });
+    const spinnerBg = container.querySelector(".bg-orange-300");
+    expect(spinnerBg).toBeInTheDocument();
+  });
+
+  test("Success state priority over processing", () => {
+    // When both are true, success should show
+    render(ModalStateManager, {
+      props: { isProcessing: true, isSuccess: true, successTitle: "Complete" },
+    });
+    expect(screen.getByText("Complete")).toBeInTheDocument();
+    expect(
+      screen.queryByText("Processing your request")
+    ).not.toBeInTheDocument();
+  });
+});

package/dist/components/Modal/ModalStateManager.svelte

@@ -0,0 +1,67 @@
+<script>
+  import Icon from "../Icons/Icon.svelte";
+  import Button from "../Button/Button.svelte";
+
+  /** Whether the modal is currently processing an action */
+  export let isProcessing = false;
+
+  /** Whether the action completed successfully */
+  export let isSuccess = false;
+
+  /** Icon to show on success (from Icon component) */
+  export let successIcon = "CheckCircle";
+
+  /** Title to show on success */
+  export let successTitle = "Success";
+
+  /** Optional message to show on success */
+  export let successMessage = "";
+
+  /** Text to show while processing */
+  export let processingMessage = "Processing your request";
+
+  /** Button text for the success state */
+  export let successButtonText = "Continue";
+
+  /** Callback when success button is clicked */
+  export let onSuccessClose = () => {};
+
+  /** Custom success icon color class */
+  export let successIconColor = "text-accent-success";
+
+  /** Custom processing icon color class */
+  export let processingIconBgColor = "bg-orange-300";
+</script>
+
+{#if isProcessing && !isSuccess}
+  <!-- Processing State -->
+  <div class="py-6 px-4 flex flex-col items-center justify-center gap-4">
+    <div
+      class="w-12 h-12 {processingIconBgColor} rounded-full flex items-center justify-center"
+    >
+      <span class="animate-spin">
+        <Icon name="Reload" size="20" />
+      </span>
+    </div>
+    <p class="text-Text-Primary text-center font-medium">{processingMessage}</p>
+  </div>
+{:else if isSuccess}
+  <!-- Success State -->
+  <div class="py-6 px-4 flex flex-col items-center justify-center gap-4">
+    <div class={successIconColor}>
+      <Icon name={successIcon} size="48" />
+    </div>
+    <h2 class="text-xl font-semibold text-Text-Primary text-center">
+      {successTitle}
+    </h2>
+    {#if successMessage}
+      <p class="text-Text-Tartiary text-center text-sm">{successMessage}</p>
+    {/if}
+    <Button variant="blue-solid" size="full" on:click={onSuccessClose}>
+      {successButtonText}
+    </Button>
+  </div>
+{:else}
+  <!-- Normal State - render children -->
+  <slot />
+{/if}

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

@@ -0,0 +1,48 @@
+/** @typedef {typeof __propDef.props}  ModalStateManagerProps */
+/** @typedef {typeof __propDef.events}  ModalStateManagerEvents */
+/** @typedef {typeof __propDef.slots}  ModalStateManagerSlots */
+export default class ModalStateManager extends SvelteComponent<{
+    isSuccess?: boolean | undefined;
+    isProcessing?: boolean | undefined;
+    successIcon?: string | undefined;
+    successTitle?: string | undefined;
+    successMessage?: string | undefined;
+    processingMessage?: string | undefined;
+    successButtonText?: string | undefined;
+    onSuccessClose?: (() => void) | undefined;
+    successIconColor?: string | undefined;
+    processingIconBgColor?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ModalStateManagerProps = typeof __propDef.props;
+export type ModalStateManagerEvents = typeof __propDef.events;
+export type ModalStateManagerSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        isSuccess?: boolean | undefined;
+        isProcessing?: boolean | undefined;
+        successIcon?: string | undefined;
+        successTitle?: string | undefined;
+        successMessage?: string | undefined;
+        processingMessage?: string | undefined;
+        successButtonText?: string | undefined;
+        onSuccessClose?: (() => void) | undefined;
+        successIconColor?: string | undefined;
+        processingIconBgColor?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=ModalStateManager.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalStateManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/ModalStateManager.svelte.js"],"names":[],"mappings":"AAqFA,gEAAgE;AAChE,kEAAkE;AAClE,gEAAgE;AAEhE;;;;;;;;;;;;;;;;CACC;qCALa,OAAO,SAAS,CAAC,KAAK;sCACtB,OAAO,SAAS,CAAC,MAAM;qCACvB,OAAO,SAAS,CAAC,KAAK;gCAvFJ,QAAQ;AAoFxC;;;;;;;;;;;;;;;;;;;;;EAAgQ"}

package/dist/components/Modal/ModalTestWrapper.svelte

@@ -0,0 +1,21 @@
+<script>
+    import Modal from "./Modal.svelte";
+    export let show = false;
+    export let title = "";
+    export let description = "";
+    export let warningText = "";
+</script>
+
+<Modal bind:show on:cancel>
+    <div slot="header">{title}</div>
+    <div slot="body">
+        {description}
+        {#if warningText}
+            <br /> {warningText}
+        {/if}
+    </div>
+    <div slot="footer">
+        <button>Cancel</button>
+        <button>Confirm</button>
+    </div>
+</Modal>

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

@@ -0,0 +1,36 @@
+/** @typedef {typeof __propDef.props}  ModalTestWrapperProps */
+/** @typedef {typeof __propDef.events}  ModalTestWrapperEvents */
+/** @typedef {typeof __propDef.slots}  ModalTestWrapperSlots */
+export default class ModalTestWrapper extends SvelteComponent<{
+    title?: string | undefined;
+    show?: boolean | undefined;
+    description?: string | undefined;
+    warningText?: string | undefined;
+}, {
+    cancel: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ModalTestWrapperProps = typeof __propDef.props;
+export type ModalTestWrapperEvents = typeof __propDef.events;
+export type ModalTestWrapperSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        show?: boolean | undefined;
+        description?: string | undefined;
+        warningText?: string | undefined;
+    };
+    events: {
+        cancel: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=ModalTestWrapper.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalTestWrapper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/ModalTestWrapper.svelte.js"],"names":[],"mappings":"AA8BA,+DAA+D;AAC/D,iEAAiE;AACjE,+DAA+D;AAE/D;;;;;;;;;;CACC;oCALa,OAAO,SAAS,CAAC,KAAK;qCACtB,OAAO,SAAS,CAAC,MAAM;oCACvB,OAAO,SAAS,CAAC,KAAK;gCAhCJ,QAAQ;AA6BxC;;;;;;;;;;;;;;;EAA8H"}

package/dist/components/PageLoader.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PageLoader.spec.d.ts.map

package/dist/components/PageLoader.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLoader.spec.d.ts","sourceRoot":"","sources":["../../src/lib/components/PageLoader.spec.js"],"names":[],"mappings":""}