@mozaic-ds/web-components 1.0.0-beta.6 → 1.0.0

package/dist/components/modal/Modal.svelte

@@ -3,58 +3,61 @@
 <script lang="ts">
   import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';
   import MOverlay from '../overlay/Overlay.svelte';
-
+  /**
+   * A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.
+   *
+   * @slot icon - Use this slot to insert an icon next to the title of the modal.
+   * @slot default - Use this slot to insert the content of the modal.
+   * @slot link - Use this slot to insert a link in the footer.
+   * @slot footer - Use this slot to insert buttons in the footer.
+   * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.
+   */
   interface Props {
+    /**
+     * if `true`, display the modal.
+     */
     open?: boolean;
-    title?: string;
+    /**
+     * Title of the modal.
+     */
+    title: string;
+    /**
+     * Description of the modal.
+     */
     description?: string;
+    /**
+     * if `true`, display the close button.
+     */
     closable?: boolean;
-    icon?: any;
-    footer?: any;
-    link?: any;
-    [key: string]: any;
   }
 
-  let {
-    open = false,
-    title = '',
-    description = '',
-    closable = true,
-    icon = undefined,
-    footer = undefined,
-    link = undefined,
-  }: Props = $props();
+  let { open, title, description, closable = true }: Props = $props();
+  let element: HTMLElement;
 
   function onClose() {
     open = false;
-    // Manually emit event from the custom element
+
     const event = new CustomEvent('update:open', {
       detail: open,
       bubbles: true,
       composed: true,
     });
-    // @ts-ignore: `this` is the custom element instance
-    this.dispatchEvent(event);
+    element.dispatchEvent(event);
   }
-  //   afterUpdate(() => {
-  //     dispatch('update:open', open);
-  //   });
 </script>
 
 <section
-  class="mc-modal"
-  class:is-open={open}
+  class={['mc-modal', open && 'is-open']}
   tabindex="-1"
   aria-labelledby="modalTitle"
   aria-hidden={!open}
+  bind:this={element}
 >
   <div class="mc-modal__dialog" role="document">
     <header class="mc-modal__header">
-      {#if icon}
-        <span class="mc-modal__icon">
-          <slot name="icon" />
-        </span>
-      {/if}
+      <span class="mc-modal__icon">
+        <slot name="icon" />
+      </span>
       <h2 class="mc-modal__title" id="modalTitle">{title}</h2>
       {#if closable}
         <button
@@ -63,9 +66,7 @@
           aria-label="Close"
           onclick={onClose}
         >
-          <span class="mc-modal__icon">
-            <Cross24 aria-hidden="true" />
-          </span>
+          <Cross24 class="mc-modal__close" aria-hidden="true" />
         </button>
       {/if}
     </header>
@@ -77,16 +78,12 @@
       <slot />
     </main>
 
-    {#if footer}
-      <footer class="mc-modal__footer">
-        {#if link}
-          <span class="mc-modal__link">
-            <slot name="link" />
-          </span>
-        {/if}
-        <slot name="footer" />
-      </footer>
-    {/if}
+    <footer class="mc-modal__footer">
+      <span class="mc-modal__link">
+        <slot name="link" />
+      </span>
+      <slot name="footer" />
+    </footer>
   </div>
 
   <MOverlay isvisible={open} dialoglabel="modal" />
@@ -95,9 +92,6 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-modal {
   box-sizing: border-box;
   inset: 0;
@@ -116,7 +110,7 @@
   }
 }
 .mc-modal__dialog {
-  background: #ffffff;
+  background: var(--modal-color-background, #ffffff);
   display: flex;
   flex-direction: column;
   opacity: 0;
@@ -125,14 +119,13 @@
   transition: visibility 0s linear 0.4s, transform 0.4s ease, opacity 0.4s ease;
   visibility: hidden;
   width: 100%;
-  border-radius: 1rem 1rem 0 0;
+  border-radius: var(--radius-l, 1rem) var(--radius-l, 1rem) 0 0;
   z-index: 3;
-  box-shadow: 0px 10px 20px -4px rgba(36, 41, 56, 0.2);
 }
 @media (width >= 680px) {
   .mc-modal__dialog {
     width: 38rem;
-    border-radius: 1rem;
+    border-radius: var(--radius-l, 1rem);
   }
 }
 .mc-modal.is-open .mc-modal__dialog {
@@ -160,9 +153,9 @@
   height: 2rem;
 }
 .mc-modal__title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: #000000;
+  font-size: var(--font-title-m, 1.5rem);
+  font-weight: var(--font-weight-semi-bold, 600);
+  color: var(--modal-color-title, #000000);
   margin-bottom: 0.5rem;
   margin-top: 0.5rem;
   padding-right: 3rem;
@@ -173,8 +166,8 @@
   right: 0.75rem;
 }
 .mc-modal__body {
-  font-size: 1rem;
-  color: #404040;
+  font-size: var(--font-size-150, 1rem);
+  color: var(--modal-color-paragraph, #404040);
   padding: 0 1rem;
   margin-bottom: 1rem;
 }
@@ -185,7 +178,7 @@
 }
 .mc-modal__body p {
   margin: 0;
-  line-height: 1.3;
+  line-height: var(--line-height-s, 1.3);
 }
 .mc-modal__footer {
   align-items: stretch;
@@ -215,18 +208,37 @@
 }
 
 .mc-button {
-  color: #ffffff;
-  background-color: #464e63;
-  font-weight: 600;
+  color: var(--button-color-filled-standard-font, #ffffff);
+  background-color: var(--button-color-filled-standard-background, #464e63);
+}
+.mc-button:hover {
+  background-color: var(--button-color-filled-standard-hover-background, #343b4c);
+}
+.mc-button:active {
+  background-color: var(--button-color-filled-standard-active-background, #242938);
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button {
+  font-weight: var(--font-weight-semi-bold, 600);
   padding: 0 calc(1rem - 0.125rem);
   min-height: 3rem;
   min-width: 3rem;
+}
+.mc-button .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button {
   display: inline-flex;
   justify-content: center;
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: 0.25rem;
+  border-radius: var(--button-radius, 0.25rem);
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -236,23 +248,8 @@
   gap: 0.25rem;
   cursor: pointer;
 }
-.mc-button:hover {
-  background-color: #343b4c;
-}
-.mc-button:active {
-  background-color: #242938;
-}
-.mc-button:disabled {
-  background-color: #d9d9d9;
-  border-color: transparent;
-  color: #737373;
-  cursor: not-allowed;
-}
-.mc-button .mc-button__label {
-  font-size: 1rem;
-}
 .mc-button__label {
-  font-size: 1rem;
+  font-size: var(--font-size-150, 1rem);
 }
 .mc-button__icon {
   flex-shrink: 0;
@@ -260,13 +257,13 @@
   height: 1.5rem;
 }
 .mc-button:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
   outline: 0.125rem solid transparent;
   outline-offset: 0.125rem;
 }
@@ -276,7 +273,7 @@
   min-width: 2rem;
 }
 .mc-button--s .mc-button__label {
-  font-size: 0.875rem;
+  font-size: var(--font-size-100, 0.875rem);
 }
 .mc-button--s .mc-button__icon {
   width: 1.25rem;
@@ -292,7 +289,7 @@
   min-width: 3rem;
 }
 .mc-button--m .mc-button__label {
-  font-size: 1rem;
+  font-size: var(--font-size-150, 1rem);
 }
 .mc-button--m .mc-button__icon {
   width: 1.5rem;
@@ -308,7 +305,7 @@
   min-width: 4rem;
 }
 .mc-button--l .mc-button__label {
-  font-size: 1.125rem;
+  font-size: var(--font-size-200, 1.125rem);
 }
 .mc-button--l .mc-button__icon {
   width: 2rem;
@@ -322,90 +319,90 @@
   padding: 0.25rem;
 }
 .mc-button--outlined {
-  color: #242938;
-  border-color: #8891aa;
-  background-color: #ffffff;
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
 }
 .mc-button--outlined:hover {
-  background-color: #eff1f6;
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
 }
 .mc-button--outlined:active {
-  background-color: #c9d0de;
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
 }
 .mc-button--outlined:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost {
-  color: #242938;
-  background-color: rgba(255, 255, 255, 0.01);
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
 }
 .mc-button--ghost:hover {
-  background-color: rgba(70, 78, 99, 0.1);
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
 }
 .mc-button--ghost:active {
-  background-color: rgba(70, 78, 99, 0.2);
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
 }
 .mc-button--ghost:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--accent {
-  color: #ffffff;
-  background-color: #117f03;
+  color: var(--button-color-filled-accent-font, #ffffff);
+  background-color: var(--button-color-filled-accent-background, #117f03);
 }
 .mc-button--accent:hover {
-  background-color: #006902;
+  background-color: var(--button-color-filled-accent-hover-background, #006902);
 }
 .mc-button--accent:active {
-  background-color: #035010;
+  background-color: var(--button-color-filled-accent-active-background, #035010);
 }
 .mc-button--accent:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--danger {
-  color: #ffffff;
-  background-color: #c61112;
+  color: var(--button-color-filled-danger-font, #ffffff);
+  background-color: var(--button-color-filled-danger-background, #c61112);
 }
 .mc-button--danger:hover {
-  background-color: #8c0003;
+  background-color: var(--button-color-filled-danger-hover-background, #8c0003);
 }
 .mc-button--danger:active {
-  background-color: #530000;
+  background-color: var(--button-color-filled-danger-active-background, #530000);
 }
 .mc-button--danger:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--inverse {
-  --focus-color-mid: #000000;
-  --focus-color-outer: #ffffff;
-  color: #242938;
-  background-color: #ffffff;
+  --focus-color-mid: var(--focus-color-outline-outer, #000000);
+  --focus-color-outer: var(--focus-color-outline-mid, #ffffff);
+  color: var(--button-color-filled-inverse-font, #242938);
+  background-color: var(--button-color-filled-inverse-background, #ffffff);
 }
 .mc-button--inverse:hover {
-  background-color: #e6e6e6;
+  background-color: var(--button-color-filled-inverse-hover-background, #e6e6e6);
 }
 .mc-button--inverse:active {
-  background-color: #cccccc;
+  background-color: var(--button-color-filled-inverse-active-background, #cccccc);
 }
 .mc-button--inverse:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--icon-button {
-  border-radius: 100%;
+  border-radius: var(--radius-full, 100%);
   padding: 0;
 }
 .mc-button--loading .mc-button__loader {
@@ -417,134 +414,138 @@
   visibility: hidden;
 }
 .mc-button--outlined.mc-button--standard {
-  color: #242938;
-  border-color: #8891aa;
-  background-color: #ffffff;
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
 }
 .mc-button--outlined.mc-button--standard:hover {
-  background-color: #eff1f6;
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
 }
 .mc-button--outlined.mc-button--standard:active {
-  background-color: #c9d0de;
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
 }
 .mc-button--outlined.mc-button--standard:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--outlined.mc-button--accent {
-  color: #117f03;
-  border-color: #78be20;
-  background-color: #ffffff;
+  color: var(--button-color-outlined-accent-font, #117f03);
+  border-color: var(--button-color-outlined-accent-border, #78be20);
+  background-color: var(--button-color-outlined-accent-background, #ffffff);
 }
 .mc-button--outlined.mc-button--accent:hover {
-  background-color: #ebf5de;
+  background-color: var(--button-color-outlined-accent-hover-background, #ebf5de);
 }
 .mc-button--outlined.mc-button--accent:active {
-  background-color: #c5e39e;
+  background-color: var(--button-color-outlined-accent-active-background, #c5e39e);
 }
 .mc-button--outlined.mc-button--accent:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--outlined.mc-button--danger {
-  color: #c61112;
-  border-color: #ef5f5c;
-  background-color: #ffffff;
+  color: var(--button-color-outlined-danger-font, #c61112);
+  border-color: var(--button-color-outlined-danger-border, #ef5f5c);
+  background-color: var(--button-color-outlined-danger-background, #ffffff);
 }
 .mc-button--outlined.mc-button--danger:hover {
-  background-color: #fdeaea;
+  background-color: var(--button-color-outlined-danger-hover-background, #fdeaea);
 }
 .mc-button--outlined.mc-button--danger:active {
-  background-color: #f8bcbb;
+  background-color: var(--button-color-outlined-danger-active-background, #f8bcbb);
 }
 .mc-button--outlined.mc-button--danger:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--outlined.mc-button--inverse {
-  color: #ffffff;
-  border-color: #ffffff;
-  background-color: rgba(255, 255, 255, 0.01);
+  color: var(--button-color-outlined-inverse-font, #ffffff);
+  border-color: var(--button-color-outlined-inverse-border, #ffffff);
+  background-color: var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));
 }
 .mc-button--outlined.mc-button--inverse:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));
 }
 .mc-button--outlined.mc-button--inverse:active {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));
 }
 .mc-button--outlined.mc-button--inverse:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--standard {
-  color: #242938;
-  background-color: rgba(255, 255, 255, 0.01);
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
 }
 .mc-button--ghost.mc-button--standard:hover {
-  background-color: rgba(70, 78, 99, 0.1);
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
 }
 .mc-button--ghost.mc-button--standard:active {
-  background-color: rgba(70, 78, 99, 0.2);
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
 }
 .mc-button--ghost.mc-button--standard:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--accent {
-  color: #117f03;
-  background-color: rgba(255, 255, 255, 0.01);
+  color: var(--button-color-ghost-accent-font, #117f03);
+  background-color: var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));
 }
 .mc-button--ghost.mc-button--accent:hover {
-  background-color: rgba(17, 127, 3, 0.1);
+  background-color: var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));
 }
 .mc-button--ghost.mc-button--accent:active {
-  background-color: rgba(17, 127, 3, 0.2);
+  background-color: var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));
 }
 .mc-button--ghost.mc-button--accent:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--danger {
-  color: #c61112;
-  background-color: rgba(255, 255, 255, 0.01);
+  color: var(--button-color-ghost-danger-font, #c61112);
+  background-color: var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));
 }
 .mc-button--ghost.mc-button--danger:hover {
-  background-color: rgba(198, 17, 18, 0.1);
+  background-color: var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));
 }
 .mc-button--ghost.mc-button--danger:active {
-  background-color: rgba(198, 17, 18, 0.2);
+  background-color: var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));
 }
 .mc-button--ghost.mc-button--danger:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--inverse {
-  color: #ffffff;
-  background-color: rgba(255, 255, 255, 0.01);
+  color: var(--button-color-ghost-inverse-font, #ffffff);
+  background-color: var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));
 }
 .mc-button--ghost.mc-button--inverse:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));
 }
 .mc-button--ghost.mc-button--inverse:active {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));
 }
 .mc-button--ghost.mc-button--inverse:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
+}
+
+.mc-modal__icon:empty {
+  display: none;
 }</style>

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

@@ -1,12 +1,29 @@
+/**
+ * A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.
+ *
+ * @slot icon - Use this slot to insert an icon next to the title of the modal.
+ * @slot default - Use this slot to insert the content of the modal.
+ * @slot link - Use this slot to insert a link in the footer.
+ * @slot footer - Use this slot to insert buttons in the footer.
+ * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.
+ */
 interface Props {
+    /**
+     * if `true`, display the modal.
+     */
     open?: boolean;
-    title?: string;
+    /**
+     * Title of the modal.
+     */
+    title: string;
+    /**
+     * Description of the modal.
+     */
     description?: string;
+    /**
+     * if `true`, display the close button.
+     */
     closable?: boolean;
-    icon?: any;
-    footer?: any;
-    link?: any;
-    [key: string]: any;
 }
 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> & {

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA8EH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,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,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,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,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;;;;;;;;UAAqF,CAAC;AAC/E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.svelte.ts"],"names":[],"mappings":"AAME;;;;;;;;GAQG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2DH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,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,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,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,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;;;;;;;;UAAqF,CAAC;AAC/E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}