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

package/dist/components/loadingoverlay/LoadingOverlay.svelte

@@ -0,0 +1,50 @@
+<svelte:options customElement={{ tag: 'm-loading-overlay' }} />
+
+<script lang="ts">
+  import Loader from '../loader/Loader.svelte';
+  /**
+   * A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.
+   */
+  interface Props {
+    /**
+     * Controls the visibility of the loading overlay.
+     */
+    isvisible?: boolean;
+    /**
+     * Text of the loading overlay.
+     */
+    text?: string;
+  }
+
+  let { isvisible, text }: Props = $props();
+</script>
+
+<div class={['mc-loading-loader', isvisible && 'is-visible']}>
+  <div role="dialog" tabindex="-1" aria-label={text}>
+    <Loader size="l" appearance="inverse" {text} />
+  </div>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-loading-loader {
+  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
+  inset: 0;
+  opacity: 0;
+  position: fixed;
+  pointer-events: none;
+  transition: opacity 0.4s ease, visibility 0ms 0.4s;
+  z-index: var(--overlay-z-index, 2);
+}
+.mc-loading-loader.is-visible {
+  opacity: 1;
+  pointer-events: all;
+  transition: opacity 0.4s ease, visibility 0ms;
+  visibility: visible;
+}
+.mc-loading-loader {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}</style>

package/dist/components/loadingoverlay/LoadingOverlay.svelte.d.ts

@@ -0,0 +1,17 @@
+/**
+ * A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.
+ */
+interface Props {
+    /**
+     * Controls the visibility of the loading overlay.
+     */
+    isvisible?: boolean;
+    /**
+     * Text of the loading overlay.
+     */
+    text?: string;
+}
+declare const LoadingOverlay: import("svelte").Component<Props, {}, "">;
+type LoadingOverlay = ReturnType<typeof LoadingOverlay>;
+export default LoadingOverlay;
+//# sourceMappingURL=LoadingOverlay.svelte.d.ts.map

package/dist/components/loadingoverlay/LoadingOverlay.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingOverlay.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/loadingoverlay/LoadingOverlay.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAoBH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/loadingoverlay/README.md

@@ -0,0 +1,11 @@
+# `m-loading-overlay`
+
+A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `isvisible` | Controls the visibility of the loading overlay. | `boolean` |   |
+| `text` | Text of the loading overlay. | `string` |   |
+

package/dist/components/modal/Modal.js

@@ -1,4 +1,4 @@
-import{n as Q,c as R,p as U,a as V,b as l,f as m,s as i,d as r,t as M,e as W,g as S,h as c,i as X,j as s,r as a}from"../../custom-element.js";import{i as b}from"../../if.js";import{s as f}from"../../slot.js";import{s as Z}from"../../attributes.js";import{C as $}from"../../Cross24.js";import{O as ee}from"../overlay/Overlay.js";import"../../legacy.js";function te(g,o){o(!1);const n=new CustomEvent("update:open",{detail:o(),bubbles:!0,composed:!0});this.dispatchEvent(n)}var oe=m('<span class="mc-modal__icon svelte-1tduk3b"><!></span>'),re=m('<button type="button" class="mc-modal__close mc-button mc-button--icon-button mc-button--ghost svelte-1tduk3b" aria-label="Close"><span class="mc-modal__icon svelte-1tduk3b"><!></span></button>'),ae=m('<p class="svelte-1tduk3b"> </p>'),de=m('<span class="mc-modal__link svelte-1tduk3b"><!></span>'),ne=m('<footer class="mc-modal__footer svelte-1tduk3b"><!> <!></footer>'),le=m('<section tabindex="-1" aria-labelledby="modalTitle"><div class="mc-modal__dialog svelte-1tduk3b" role="document"><header class="mc-modal__header svelte-1tduk3b"><!> <h2 class="mc-modal__title svelte-1tduk3b" id="modalTitle"> </h2> <!></header> <main class="mc-modal__body svelte-1tduk3b"><!> <!></main> <!></div> <!></section>');const ie={hash:"svelte-1tduk3b",code:`/**
+import{v as J,c as K,p as L,a as N,b as s,f as w,d as t,s as l,t as E,i as y,j as P,k as c,r as o,h as O,e as Q,g as R}from"../../custom-element.js";import{i as T}from"../../if.js";import{s as m}from"../../slot.js";import{s as U}from"../../attributes.js";import{b as V}from"../../this.js";import{C as W}from"../../Cross24.js";import{O as X}from"../overlay/Overlay.js";import"../../legacy.js";var Z=w('<button type="button" class="mc-modal__close mc-button mc-button--icon-button mc-button--ghost svelte-1tduk3b" aria-label="Close"><!></button>'),$=w('<p class="svelte-1tduk3b"> </p>'),ee=w('<section tabindex="-1" aria-labelledby="modalTitle"><div class="mc-modal__dialog svelte-1tduk3b" role="document"><header class="mc-modal__header svelte-1tduk3b"><span class="mc-modal__icon svelte-1tduk3b"><!></span> <h2 class="mc-modal__title svelte-1tduk3b" id="modalTitle"> </h2> <!></header> <main class="mc-modal__body svelte-1tduk3b"><!> <!></main> <footer class="mc-modal__footer svelte-1tduk3b"><span class="mc-modal__link svelte-1tduk3b"><!></span> <!></footer></div> <!></section>');const te={hash:"svelte-1tduk3b",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-modal.svelte-1tduk3b {box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 3);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto;}
 @media (width >= 680px) {.mc-modal.svelte-1tduk3b {align-items:center;}
@@ -12,5 +12,5 @@ import{n as Q,c as R,p as U,a as V,b as l,f as m,s as i,d as r,t as M,e as W,g a
 @media (width >= 680px) {.mc-modal__footer.svelte-1tduk3b {flex-direction:row;padding:0.5rem 1.5rem 1.5rem 1.5rem;}
 }.mc-modal__link.svelte-1tduk3b {order:1;}
 @media (width >= 680px) {.mc-modal__link.svelte-1tduk3b {margin-right:auto;order:0;}
-}.mc-button.svelte-1tduk3b {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1tduk3b:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1tduk3b:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1tduk3b {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1tduk3b {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-radius, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1tduk3b:focus-visible {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;}.mc-button--ghost.svelte-1tduk3b {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.svelte-1tduk3b:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1tduk3b:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-1tduk3b {border-radius:var(--radius-full, 100%);padding:0;}`};function se(g,o){U(o,!0),V(g,ie);let n=l(o,"open",7,!1),_=l(o,"title",7,""),v=l(o,"description",7,""),k=l(o,"closable",7,!0),p=l(o,"icon",7,void 0),h=l(o,"footer",7,void 0),x=l(o,"link",7,void 0);var q={get open(){return n()},set open(e=!1){n(e),s()},get title(){return _()},set title(e=""){_(e),s()},get description(){return v()},set description(e=""){v(e),s()},get closable(){return k()},set closable(e=!0){k(e),s()},get icon(){return p()},set icon(e=void 0){p(e),s()},get footer(){return h()},set footer(e=void 0){h(e),s()},get link(){return x()},set link(e=void 0){x(e),s()}},u=le();let T;var y=r(u),w=r(y),Y=r(w);{var A=e=>{var t=oe(),d=r(t);f(d,o,"icon",{}),a(t),c(e,t)};b(Y,e=>{p()&&e(A)})}var z=i(Y,2),B=r(z,!0);a(z);var F=i(z,2);{var G=e=>{var t=re();t.__click=[te,n];var d=r(t),j=r(d);$(j,{"aria-hidden":"true"}),a(d),a(t),c(e,t)};b(F,e=>{k()&&e(G)})}a(w);var C=i(w,2),D=r(C);{var H=e=>{var t=ae(),d=r(t,!0);a(t),M(()=>S(d,v())),c(e,t)};b(D,e=>{v()&&e(H)})}var I=i(D,2);f(I,o,"default",{}),a(C);var J=i(C,2);{var K=e=>{var t=ne(),d=r(t);{var j=E=>{var O=de(),P=r(O);f(P,o,"link",{}),a(O),c(E,O)};b(d,E=>{x()&&E(j)})}var N=i(d,2);f(N,o,"footer",{}),a(t),c(e,t)};b(J,e=>{h()&&e(K)})}a(y);var L=i(y,2);return ee(L,{get isvisible(){return n()},dialoglabel:"modal"}),a(u),M(e=>{T=W(u,1,"mc-modal svelte-1tduk3b",null,T,e),Z(u,"aria-hidden",!n()),S(B,_())},[()=>({"is-open":n()})]),c(g,u),X(q)}Q(["click"]);customElements.define("m-modal",R(se,{open:{},title:{},description:{},closable:{},icon:{},footer:{},link:{}},["icon","default","link","footer"],[],!0));
+}.mc-button.svelte-1tduk3b {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1tduk3b:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1tduk3b:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1tduk3b {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1tduk3b {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-radius, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1tduk3b:focus-visible {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;}.mc-button--ghost.svelte-1tduk3b {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.svelte-1tduk3b:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1tduk3b:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-1tduk3b {border-radius:var(--radius-full, 100%);padding:0;}.mc-modal__icon.svelte-1tduk3b:empty {display:none;}`};function oe(z,r){L(r,!0),N(z,te);let d=s(r,"open",7),b=s(r,"title",7),n=s(r,"description",7),u=s(r,"closable",7,!0),v;function Y(){d(!1);const e=new CustomEvent("update:open",{detail:d(),bubbles:!0,composed:!0});v.dispatchEvent(e)}var D={get open(){return d()},set open(e){d(e),c()},get title(){return b()},set title(e){b(e),c()},get description(){return n()},set description(e){n(e),c()},get closable(){return u()},set closable(e=!0){u(e),c()}},i=ee(),f=t(i),g=t(f),p=t(g),M=t(p);m(M,r,"icon",{}),o(p);var k=l(p,2),S=t(k,!0);o(k);var q=l(k,2);{var A=e=>{var a=Z();a.__click=Y;var x=t(a);W(x,{class:"mc-modal__close","aria-hidden":"true"}),o(a),y(e,a)};T(q,e=>{u()&&e(A)})}o(g);var _=l(g,2),C=t(_);{var B=e=>{var a=$(),x=t(a,!0);o(a),E(()=>O(x,n())),y(e,a)};T(C,e=>{n()&&e(B)})}var F=l(C,2);m(F,r,"default",{}),o(_);var j=l(_,2),h=t(j),G=t(h);m(G,r,"link",{}),o(h);var H=l(h,2);m(H,r,"footer",{}),o(j),o(f);var I=l(f,2);return X(I,{get isvisible(){return d()},dialoglabel:"modal"}),o(i),V(i,e=>v=e,()=>v),E(()=>{Q(i,1,R(["mc-modal",d()&&"is-open"]),"svelte-1tduk3b"),U(i,"aria-hidden",!d()),O(S,b())}),y(z,i),P(D)}J(["click"]);customElements.define("m-modal",K(oe,{open:{},title:{},description:{},closable:{}},["icon","default","link","footer"],[],!0));
 //# sourceMappingURL=Modal.js.map

package/dist/components/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-modal' }} />\n\n<script lang=\"ts\">\n  import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n\n  interface Props {\n    open?: boolean;\n    title?: string;\n    description?: string;\n    closable?: boolean;\n    icon?: any;\n    footer?: any;\n    link?: any;\n    [key: string]: any;\n  }\n\n  let {\n    open = false,\n    title = '',\n    description = '',\n    closable = true,\n    icon = undefined,\n    footer = undefined,\n    link = undefined,\n  }: Props = $props();\n\n  function onClose() {\n    open = false;\n    // Manually emit event from the custom element\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    // @ts-ignore: `this` is the custom element instance\n    this.dispatchEvent(event);\n  }\n  //   afterUpdate(() => {\n  //     dispatch('update:open', open);\n  //   });\n</script>\n\n<section\n  class=\"mc-modal\"\n  class:is-open={open}\n  tabindex=\"-1\"\n  aria-labelledby=\"modalTitle\"\n  aria-hidden={!open}\n>\n  <div class=\"mc-modal__dialog\" role=\"document\">\n    <header class=\"mc-modal__header\">\n      {#if icon}\n        <span class=\"mc-modal__icon\">\n          <slot name=\"icon\" />\n        </span>\n      {/if}\n      <h2 class=\"mc-modal__title\" id=\"modalTitle\">{title}</h2>\n      {#if closable}\n        <button\n          type=\"button\"\n          class=\"mc-modal__close mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Close\"\n          onclick={onClose}\n        >\n          <span class=\"mc-modal__icon\">\n            <Cross24 aria-hidden=\"true\" />\n          </span>\n        </button>\n      {/if}\n    </header>\n\n    <main class=\"mc-modal__body\">\n      {#if description}\n        <p>{description}</p>\n      {/if}\n      <slot />\n    </main>\n\n    {#if footer}\n      <footer class=\"mc-modal__footer\">\n        {#if link}\n          <span class=\"mc-modal__link\">\n            <slot name=\"link\" />\n          </span>\n        {/if}\n        <slot name=\"footer\" />\n      </footer>\n    {/if}\n  </div>\n\n  <MOverlay isvisible={open} dialoglabel=\"modal\" />\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/modal';\n  @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["onClose","_","open","event","title","description","closable","icon","footer","link","$$render","consequent","consequent_1","consequent_2","consequent_3","consequent_4"],"mappings":"gWA2BW,SAAAA,GAAOC,EAAAC,EAAG,CACjBA,EAAO,EAAK,EAEN,MAAAC,EAAK,IAAO,YAAY,eAC5B,OAAQD,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAGhB,KAAK,cAAcC,CAAK,CAC1B;;;;;;;;;;;;;;6vEArCF,iBAkBI,IAAAD,eAAO,EAAK,EACZE,gBAAQ,EAAE,EACVC,sBAAc,EAAE,EAChBC,mBAAW,EAAI,EACfC,eAAO,MAAS,EAChBC,iBAAS,MAAS,EAClBC,eAAO,MAAS,2CANT,GAAK,+CACJ,GAAE,2DACI,GAAE,qDACL,GAAI,6CACR,OAAS,iDACP,OAAS,6CACX,OAAS,qHA4BTF,EAAI,GAAAG,EAAAC,CAAA,8EAWIX,GAAOE,CAAA,0EALfI,EAAQ,GAAAI,EAAAE,CAAA,4EAgBPP,EAAW,CAAA,CAAA,kBADZA,EAAW,GAAAK,EAAAG,CAAA,uJAQTJ,EAAI,GAAAC,EAAAI,CAAA,yDAFRN,EAAM,GAAAE,EAAAK,CAAA,0DAYQb,EAAI,mGA3CXA,EAAI,CAAA,MAS+BE,GAAK,oBAZvCF,EAAI,GAAA,cAJrB"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-modal' }} />\n\n<script lang=\"ts\">\n  import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n  /**\n   * 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.\n   *\n   * @slot icon - Use this slot to insert an icon next to the title of the modal.\n   * @slot default - Use this slot to insert the content of the modal.\n   * @slot link - Use this slot to insert a link in the footer.\n   * @slot footer - Use this slot to insert buttons in the footer.\n   * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.\n   */\n  interface Props {\n    /**\n     * if `true`, display the modal.\n     */\n    open?: boolean;\n    /**\n     * Title of the modal.\n     */\n    title: string;\n    /**\n     * Description of the modal.\n     */\n    description?: string;\n    /**\n     * if `true`, display the close button.\n     */\n    closable?: boolean;\n  }\n\n  let { open, title, description, closable = true }: Props = $props();\n  let element: HTMLElement;\n\n  function onClose() {\n    open = false;\n\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  }\n</script>\n\n<section\n  class={['mc-modal', open && 'is-open']}\n  tabindex=\"-1\"\n  aria-labelledby=\"modalTitle\"\n  aria-hidden={!open}\n  bind:this={element}\n>\n  <div class=\"mc-modal__dialog\" role=\"document\">\n    <header class=\"mc-modal__header\">\n      <span class=\"mc-modal__icon\">\n        <slot name=\"icon\" />\n      </span>\n      <h2 class=\"mc-modal__title\" id=\"modalTitle\">{title}</h2>\n      {#if closable}\n        <button\n          type=\"button\"\n          class=\"mc-modal__close mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Close\"\n          onclick={onClose}\n        >\n          <Cross24 class=\"mc-modal__close\" aria-hidden=\"true\" />\n        </button>\n      {/if}\n    </header>\n\n    <main class=\"mc-modal__body\">\n      {#if description}\n        <p>{description}</p>\n      {/if}\n      <slot />\n    </main>\n\n    <footer class=\"mc-modal__footer\">\n      <span class=\"mc-modal__link\">\n        <slot name=\"link\" />\n      </span>\n      <slot name=\"footer\" />\n    </footer>\n  </div>\n\n  <MOverlay isvisible={open} dialoglabel=\"modal\" />\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/modal';\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-modal__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["open","$.prop","$$props","title","description","closable","element","onClose","event","$$render","consequent","consequent_1","$.bind_this","section","$$value"],"mappings":";;;;;;;;;;;;;;izEAAA,qBAiCQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EAAEG,mBAAW,EAAI,EAC3CC,EAEK,SAAAC,GAAU,CACjBP,EAAO,EAAK,EAEN,MAAAQ,EAAK,IAAO,YAAY,eAC5B,OAAQR,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBM,EAAQ,cAAcE,CAAK,CAC7B,yMAZ2C,GAAI,6IAiC9BD,sFALRF,EAAQ,GAAAI,EAAAC,CAAA,2EAcPN,EAAW,CAAA,CAAA,kBADZA,EAAW,GAAAK,EAAAE,CAAA,qLAcCX,EAAI,8BAnCdY,EAAAC,EAAAC,GAAAR,QAAAA,CAAO,kBAJV,WAAYN,KAAQ,SAAS,CAAA,EAAA,gBAAA,qBAGvBA,EAAI,CAAA,MAQ+BG,GAAK,eAdxD"}

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

@@ -0,0 +1,50 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Modal from './Modal.svelte';
+describe('m-modal component', () => {
+    const title = 'Test Modal';
+    const description = 'Modal description';
+    it('renders the title and description', () => {
+        const { getByText } = render(Modal, {
+            props: {
+                open: true,
+                title,
+                description,
+            },
+        });
+        expect(getByText(title)).toBeTruthy();
+        expect(getByText(description)).toBeTruthy();
+    });
+    it('applies is-open class when open is true', () => {
+        const { container } = render(Modal, {
+            props: { open: true, title },
+        });
+        expect(container.querySelector('.mc-modal')).toHaveClass('is-open');
+    });
+    it('does not show close button if closable is false', () => {
+        const { queryByRole } = render(Modal, {
+            props: { open: true, title, closable: false },
+        });
+        expect(queryByRole('button', { name: 'Close' })).toBeNull();
+    });
+    it('emits update:open event with false when close button is clicked', async () => {
+        const { container } = render(Modal, {
+            props: { open: true, title },
+        });
+        const closeButton = container.querySelector('button[aria-label="Close"]');
+        const handler = vi.fn();
+        container.addEventListener('update:open', handler);
+        await fireEvent.click(closeButton);
+        expect(handler).toHaveBeenCalledTimes(1);
+        expect(handler.mock.calls[0][0].detail).toBe(false);
+    });
+    it('sets aria-hidden to false when open and true when closed', async () => {
+        const { container, rerender } = render(Modal, {
+            props: { open: false, title },
+        });
+        const modal = container.querySelector('.mc-modal');
+        expect(modal.getAttribute('aria-hidden')).toBe('true');
+        await rerender({ open: true, title });
+        expect(modal.getAttribute('aria-hidden')).toBe('false');
+    });
+});

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

@@ -1,12 +1,39 @@
-import type { Meta, StoryObj } from '@storybook/html-vite';
-declare const _default: Meta;
-export default _default;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import '@mozaic-ds/icons-svelte/custom-elements/InfoCircle32/InfoCircle32.js';
+import '@mozaic-ds/icons-svelte/custom-elements/ExternalLink24/ExternalLink24.js';
+declare const meta: Meta;
+export default meta;
 type Story = StoryObj;
 export declare const Default: Story;
-export declare const Icon: Story;
-export declare const ValidationOnly: Story;
-export declare const TwoOptions: Story;
-export declare const Cancel: Story;
-export declare const Link: Story;
-export declare const Danger: Story;
+export declare const Icon: {
+    args: {
+        icon: string;
+    };
+};
+export declare const ValidationOnly: {
+    args: {
+        footer: string;
+    };
+};
+export declare const TwoOptions: {
+    args: {
+        footer: string;
+    };
+};
+export declare const Cancel: {
+    args: {
+        footer: string;
+    };
+};
+export declare const Link: {
+    args: {
+        link: string;
+        footer: string;
+    };
+};
+export declare const Danger: {
+    args: {
+        footer: string;
+    };
+};
 //# sourceMappingURL=Modal.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;wBA6BtD,IAAI;AAzBT,wBAyBU;AAEV,KAAK,KAAK,GAAG,QAAQ,CAAC;AAiEtB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAalB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC"}
+{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,sEAAsE,CAAC;AAC9E,OAAO,0EAA0E,CAAC;AAElF,QAAA,MAAM,IAAI,EAAE,IAkDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAOtB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAQlB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;CAahB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAOlB,CAAC"}

package/dist/components/modal/Modal.stories.js

@@ -1,138 +1,109 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { action } from 'storybook/actions';
-import HelpCircle32 from '@mozaic-ds/icons-svelte/custom-elements/HelpCircle32/HelpCircle32.js';
-export default {
+import '@mozaic-ds/icons-svelte/custom-elements/InfoCircle32/InfoCircle32.js';
+import '@mozaic-ds/icons-svelte/custom-elements/ExternalLink24/ExternalLink24.js';
+const meta = {
     title: 'Overlay/Modal',
-    tags: ['autodocs', 'beta'],
+    component: 'm-modal',
     parameters: {
         layout: 'fullscreen',
         docs: {
             story: { height: '400px' },
-            description: {
-                component: '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.',
-            },
         },
     },
     args: {
         open: true,
         title: 'Modal title',
-        description: 'A short description',
+        description: `A modal is a dialog window allowing you to focus the user's attention on a specific task, a piece of information or a mandatory action. It must be used for single action only and must have a call to action button in the bottom.`,
         footer: `
-      <m-button ghost="true">Cancel</m-button>
-      <m-button>Primary action</m-button>
+      <m-button ghost="true" slot="footer">Cancel</m-button>
+      <m-button slot="footer">Primary action</m-button>
     `,
     },
     argTypes: {
-        $slots: { table: { disable: true } },
+        'update:open': {
+            control: false,
+        },
+        '--modal-z-index': {
+            description: 'Customise the z-index of the modal',
+            control: false,
+            table: {
+                category: 'Custom Properties',
+                type: { summary: 'number' },
+                defaultValue: { summary: '3' },
+            },
+        },
+    },
+    render: (args) => {
+        const handleUpdateOpen = action('update:open');
+        return html `
+      <m-modal
+        open=${ifDefined(args.open)}
+        title=${ifDefined(args.title)}
+        description=${ifDefined(args.description)}
+        closable=${ifDefined(args.closable)}
+        @update:open=${handleUpdateOpen}
+      >
+        ${unsafeHTML(ifDefined(args.icon))}
+        ${unsafeHTML(ifDefined(args.default))}
+        ${unsafeHTML(ifDefined(args.link))}
+        ${unsafeHTML(ifDefined(args.footer))}
+      </m-modal>
+    `;
     },
 };
-const createModalTemplate = (args) => {
-    const wrapper = document.createElement('div');
-    const button = document.createElement('m-button');
-    button.textContent = 'Open Modal';
-    const modal = document.createElement('m-modal');
-    modal.setAttribute('title', args.title);
-    modal.setAttribute('description', args.description);
-    modal.setAttribute('open', 'true');
-    modal.addEventListener('update:open', (e) => {
-        if (!e.detail)
-            modal.removeAttribute('open');
-        action('update:open')(e.detail);
-    });
-    // Inject default slot content
-    const contentSlot = document.createElement('div');
-    contentSlot.innerHTML =
-        args.default ??
-            '<p>A modal is a dialog window allowing you to focus the users attention on a specific task, a piece of information or a mandatory action. It must be used for single action only and must have a call to action button in the bottom.</p>';
-    modal.appendChild(contentSlot);
-    // Inject icon
-    if (args.icon) {
-        const iconSlot = document.createElement('div');
-        iconSlot.slot = 'icon';
-        iconSlot.innerHTML = args.icon;
-        modal.appendChild(iconSlot);
-    }
-    // Inject footer
-    if (args.footer) {
-        modal.setAttribute('footer', 'true');
-        const footerSlot = document.createElement('div');
-        footerSlot.setAttribute('slot', 'footer');
-        footerSlot.innerHTML = args.footer;
-        modal.appendChild(footerSlot);
-    }
-    // Inject link
-    if (args.link) {
-        const linkSlot = document.createElement('div');
-        modal.setAttribute('link', 'true');
-        linkSlot.setAttribute('slot', 'link');
-        linkSlot.innerHTML = args.link;
-        modal.appendChild(linkSlot);
-    }
-    // Inject icon
-    if (args.icon) {
-        modal.setAttribute('icon', 'true');
-    }
-    // Open modal on button click
-    button.onclick = () => modal.setAttribute('open', 'true');
-    wrapper.appendChild(button);
-    wrapper.appendChild(modal);
-    return wrapper;
-};
-export const Default = {
-    render: (args) => createModalTemplate(args),
-};
+export default meta;
+export const Default = {};
 export const Icon = {
     args: {
-        icon: '<help-circle-32 />',
+        icon: '<info-circle-32 slot="icon"/>',
     },
-    render: (args) => createModalTemplate(args),
 };
 export const ValidationOnly = {
     args: {
         footer: `
-      <m-button>Primary action</m-button>
+      <m-button slot="footer">Primary action</m-button>
     `,
     },
-    render: (args) => createModalTemplate(args),
 };
 export const TwoOptions = {
     args: {
         footer: `
-      <m-button outlined="true">Secondary action</m-button>
-      <m-button>Primary action</m-button>
+      <m-button outlined="true" slot="footer">Secondary action</m-button>
+      <m-button slot="footer">Primary action</m-button>
     `,
     },
-    render: (args) => createModalTemplate(args),
 };
 export const Cancel = {
     args: {
         footer: `
-      <m-button ghost="true">Cancel</m-button>
-      <m-button outlined="true">Secondary action</m-button>
-      <m-button>Primary action</m-button>
+      <m-button ghost="true" slot="footer">Cancel</m-button>
+      <m-button outlined="true" slot="footer">Secondary action</m-button>
+      <m-button slot="footer">Primary action</m-button>
     `,
     },
-    render: (args) => createModalTemplate(args),
 };
 export const Link = {
     args: {
         link: `
-      <m-link href="#" size="m">
+      <m-link href="#" size="m" iconPosition="right" slot="link">
         Learn more
+        <external-link-24 slot="icon"></external-link-24>
       </m-link>
     `,
         footer: `
-      <m-button ghost="true">Cancel</m-button>
-      <m-button>Primary action</m-button>
+      <m-button ghost="true" slot="footer">Cancel</m-button>
+      <m-button slot="footer">Primary action</m-button>
     `,
     },
-    render: (args) => createModalTemplate(args),
 };
 export const Danger = {
     args: {
         footer: `
-      <m-button ghost="true">Cancel</m-button>
-      <m-button appearance="danger">Primary action</m-button>
+      <m-button ghost="true" slot="footer">Cancel</m-button>
+      <m-button appearance="danger" slot="footer">Primary action</m-button>
     `,
     },
-    render: (args) => createModalTemplate(args),
 };

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" />
@@ -547,4 +544,8 @@
   border-color: transparent;
   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"}