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

package/dist/components/statusdot/StatusDot.js

@@ -1,7 +1,4 @@
-import{c as r,p as c,a as n,b as d,f as l,t as m,h,i as v,j as i,e as f}from"../../custom-element.js";var g=l("<div></div>");const p={hash:"svelte-1di8xou",code:`/**
+import{c as l,p as n,a as i,b as c,f as m,t as v,i as p,j as g,k as u,e as b,g as f}from"../../custom-element.js";var h=m("<div></div>");const k={hash:"svelte-14acsp3",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-status-dot.svelte-1di8xou {background-color:#0b96cc;height:0.5rem;width:0.5rem;border-radius:100%;display:inline-block;}.mc-status-dot--s.svelte-1di8xou {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-1di8xou {height:1rem;width:1rem;}.mc-status-dot--success.svelte-1di8xou {background-color:#3f9e10;}.mc-status-dot--error.svelte-1di8xou {background-color:#ea302d;}.mc-status-dot--warning.svelte-1di8xou {background-color:#ea7315;}.mc-status-dot--neutral.svelte-1di8xou {background-color:#808080;}`};function x(a,s){c(s,!0),n(a,p);let t=d(s,"size",7,"m"),e=d(s,"status",7,"info");var u=g();return m(()=>f(u,1,`mc-status-dot ${t()?`mc-status-dot--${t()}`:""}  ${e()?`mc-status-dot--${e()}`:""}`,"svelte-1di8xou")),h(a,u),v({get size(){return t()},set size(o="m"){t(o),i()},get status(){return e()},set status(o="info"){e(o),i()}})}customElements.define("m-status-dot",r(x,{size:{},status:{}},[],[],!0));export{x as S};
+ */.mc-status-dot.svelte-14acsp3 {background-color:var(--status-dot-color-background-information, #0b96cc);height:0.5rem;width:0.5rem;border-radius:var(--radius-full, 100%);display:inline-block;}.mc-status-dot--s.svelte-14acsp3 {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-14acsp3 {height:1rem;width:1rem;}.mc-status-dot--success.svelte-14acsp3 {background-color:var(--status-dot-color-background-success, #3f9e10);}.mc-status-dot--error.svelte-14acsp3 {background-color:var(--status-dot-color-background-error, #ea302d);}.mc-status-dot--warning.svelte-14acsp3 {background-color:var(--status-dot-color-background-warning, #ea7315);}.mc-status-dot--neutral.svelte-14acsp3 {background-color:var(--status-dot-color-background-neutral, #808080);}`};function w(o,t){n(t,!0),i(o,k);let s=c(t,"size",7,"m"),a=c(t,"status",7,"info");var d={get size(){return s()},set size(e="m"){s(e),u()},get status(){return a()},set status(e="info"){a(e),u()}},r=h();return v(()=>b(r,1,f(["mc-status-dot",`mc-status-dot--${s()}`,`mc-status-dot--${a()}`]),"svelte-14acsp3")),p(o,r),g(d)}customElements.define("m-status-dot",l(w,{size:{},status:{}},[],[],!0));export{w as S};
 //# sourceMappingURL=StatusDot.js.map

package/dist/components/statusdot/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","sources":["../../../src/components/statusdot/StatusDot.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-dot' }} />\n\n<script lang=\"ts\">\n  /**\n   * A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.\n   */\n  interface Props {\n    /**\n     * Allows to define the status dot type.\n     */\n    status: 'info' | 'success' | 'warning' | 'error' | 'neutral';\n    /**\n     * Determines the size of the status dot.\n     */\n\t\tsize: 's' | 'm' | 'l'\n\t}\n\n  let { size = 'm', status = 'info'}: Props = $props();\n</script>\n\n<div\n  class=\"mc-status-dot {size ? `mc-status-dot--${size}` : ''}  {status\n    ? `mc-status-dot--${status}`\n    : ''}\"\n></div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["size","status"],"mappings":";;;;;ihBAAA,gBAiBQ,IAAAA,eAAO,GAAG,EAAEC,iBAAS,MAAM,gDAIXD,IAAI,kBAAqBA,GAAS,GAAA,EAAE,KAAIC,IACxC,kBAAAA,MAClB,EAAE,GAAA,gBAAA,CAAA,8CANO,IAAG,iDAAW,OAAM,YACnC"}
+{"version":3,"file":"StatusDot.js","sources":["../../../src/components/statusdot/StatusDot.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-dot' }} />\n\n<script lang=\"ts\">\n  /**\n   * A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.\n   */\n  interface Props {\n    /**\n     * Allows to define the status dot type.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';\n    /**\n     * Determines the size of the status dot.\n     */\n    size?: 's' | 'm' | 'l';\n  }\n\n  let { size = 'm', status = 'info' }: Props = $props();\n</script>\n\n<div\n  class={[\n    'mc-status-dot',\n    `mc-status-dot--${size}`,\n    `mc-status-dot--${status}`,\n  ]}\n></div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["size","status"],"mappings":";;mwBAAA,gBAiBQ,IAAAA,eAAO,GAAG,EAAEC,iBAAS,MAAM,2CAApB,IAAG,iDAAW,OAAM,wCAK/B,kCACkBD,EAAI,CAAA,qBACJC,GAAM,mCAN5B"}

package/dist/components/statusdot/StatusDot.spec.js

@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import StatusDot from './StatusDot.svelte';
+describe('m-status-dot component', () => {
+    it('renders with default props', () => {
+        const { container } = render(StatusDot);
+        const dot = container.querySelector('.mc-status-dot');
+        expect(dot).toBeTruthy();
+        expect(dot?.classList.contains('mc-status-dot--m')).toBe(true);
+        expect(dot?.classList.contains('mc-status-dot--info')).toBe(true);
+    });
+    it('applies correct size class', () => {
+        const sizes = ['s', 'm', 'l'];
+        sizes.forEach((size) => {
+            const { container } = render(StatusDot, { props: { size } });
+            const dot = container.querySelector('.mc-status-dot');
+            expect(dot?.classList.contains(`mc-status-dot--${size}`)).toBe(true);
+        });
+    });
+    it('applies correct status class', () => {
+        const statuses = [
+            'info',
+            'success',
+            'warning',
+            'error',
+            'neutral',
+        ];
+        statuses.forEach((status) => {
+            const { container } = render(StatusDot, { props: { status } });
+            const dot = container.querySelector('.mc-status-dot');
+            expect(dot?.classList.contains(`mc-status-dot--${status}`)).toBe(true);
+        });
+    });
+    it('applies both size and status classes correctly', () => {
+        const { container } = render(StatusDot, {
+            props: { size: 'l', status: 'error' },
+        });
+        const dot = container.querySelector('.mc-status-dot');
+        expect(dot?.classList.contains('mc-status-dot--l')).toBe(true);
+        expect(dot?.classList.contains('mc-status-dot--error')).toBe(true);
+    });
+});

package/dist/components/statusdot/StatusDot.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.stories.d.ts","sourceRoot":"","sources":["../../../src/components/statusdot/StatusDot.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAgDX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,IAAI,EAAE,KAAU,CAAC;AAE9B,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC"}
+{"version":3,"file":"StatusDot.stories.d.ts","sourceRoot":"","sources":["../../../src/components/statusdot/StatusDot.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAmBX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,IAAI,EAAE,KAAU,CAAC;AAE9B,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC"}

package/dist/components/statusdot/StatusDot.stories.js

@@ -1,51 +1,23 @@
 import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 const meta = {
     title: 'Status/Status Dot',
     component: 'm-status-dot',
-    parameters: {
-        docs: {
-            description: {
-                component: 'A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.',
-            },
-        },
-    },
+    tags: ['v2'],
     argTypes: {
         status: {
-            description: 'Allows to define the status dot type.',
-            control: { type: 'radio' },
-            options: ['neutral', 'warning', 'error', 'success', 'info'],
-            table: {
-                type: {
-                    summary: 'neutral | warning | error | success | info',
-                },
-                defaultValue: {
-                    summary: 'info',
-                },
-                category: 'attributes',
-            },
+            control: 'radio',
+            options: ['info', 'success', 'warning', 'error'],
         },
         size: {
-            description: 'Determines the size of the status dot.',
-            control: { type: 'radio' },
+            control: 'radio',
             options: ['s', 'm', 'l'],
-            table: {
-                type: {
-                    summary: 's | m | l',
-                },
-                defaultValue: {
-                    summary: 'm',
-                },
-                category: 'attributes',
-            },
         },
     },
-    render: (args) => {
-        const attributes = Object.entries(args)
-            .map(([key, value]) => `${key}="${value}"`)
-            .join(' ');
-        return html `${unsafeHTML(`<m-status-dot ${attributes}></m-status-dot>`)}`;
-    },
+    render: (args) => html ` <m-status-dot
+      size=${ifDefined(args.size)}
+      status=${ifDefined(args.status)}
+    ></m-status-dot>`,
 };
 export default meta;
 export const Info = {};

package/dist/components/statusdot/StatusDot.svelte

@@ -8,33 +8,32 @@
     /**
      * Allows to define the status dot type.
      */
-    status: 'info' | 'success' | 'warning' | 'error' | 'neutral';
+    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
     /**
      * Determines the size of the status dot.
      */
-		size: 's' | 'm' | 'l'
-	}
+    size?: 's' | 'm' | 'l';
+  }
 
-  let { size = 'm', status = 'info'}: Props = $props();
+  let { size = 'm', status = 'info' }: Props = $props();
 </script>
 
 <div
-  class="mc-status-dot {size ? `mc-status-dot--${size}` : ''}  {status
-    ? `mc-status-dot--${status}`
-    : ''}"
+  class={[
+    'mc-status-dot',
+    `mc-status-dot--${size}`,
+    `mc-status-dot--${status}`,
+  ]}
 ></div>
 
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-status-dot {
-  background-color: #0b96cc;
+  background-color: var(--status-dot-color-background-information, #0b96cc);
   height: 0.5rem;
   width: 0.5rem;
-  border-radius: 100%;
+  border-radius: var(--radius-full, 100%);
   display: inline-block;
 }
 .mc-status-dot--s {
@@ -46,14 +45,14 @@
   width: 1rem;
 }
 .mc-status-dot--success {
-  background-color: #3f9e10;
+  background-color: var(--status-dot-color-background-success, #3f9e10);
 }
 .mc-status-dot--error {
-  background-color: #ea302d;
+  background-color: var(--status-dot-color-background-error, #ea302d);
 }
 .mc-status-dot--warning {
-  background-color: #ea7315;
+  background-color: var(--status-dot-color-background-warning, #ea7315);
 }
 .mc-status-dot--neutral {
-  background-color: #808080;
+  background-color: var(--status-dot-color-background-neutral, #808080);
 }</style>

package/dist/components/statusdot/StatusDot.svelte.d.ts

@@ -5,11 +5,11 @@ interface Props {
     /**
      * Allows to define the status dot type.
      */
-    status: 'info' | 'success' | 'warning' | 'error' | 'neutral';
+    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
     /**
      * Determines the size of the status dot.
      */
-    size: 's' | 'm' | 'l';
+    size?: 's' | 'm' | 'l';
 }
 declare const StatusDot: import("svelte").Component<Props, {}, "">;
 type StatusDot = ReturnType<typeof StatusDot>;

package/dist/components/statusdot/StatusDot.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusdot/StatusDot.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC7D;;OAEG;IACL,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;CACrB;AAiBF,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"StatusDot.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusdot/StatusDot.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC9D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AAmBH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/statusnotification/README.md

@@ -0,0 +1,25 @@
+# `m-status-notification`
+
+A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `title*` | Title of the status notification. | `string` |   |
+| `description*` | Description of the status notification. | `string` |   |
+| `status` | Allows to define the status notification type. | `'info'` `'success'` `'warning'` `'error'` | `info` |
+| `closable` | if `true`, display the close button. | `boolean` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `footer` | Use this slot to insert a button or a link in the footer |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `close` | Emits when closing the notification. | `CustomEvent<void>` |
+

package/dist/components/statusnotification/StatusNotification.js

@@ -1,11 +1,8 @@
-import{F as w,G as U,H,I as me,J as ge,K as ve,L as he,N as _e,M as be,O as ze,P as we,Q as xe,R as X,S as Y,T as ye,U as Ne,V as pe,W as Ce,c as B,p as D,b as i,q as j,t as k,h as m,i as F,j as n,e as E,u as G,n as ke,a as Ee,v as Se,l as Me,f as J,m as Ae,d as p,s as R,r as C,A,B as L,X as Le,g as Te}from"../../custom-element.js";import{s as Z}from"../../snippet.js";import{i as T}from"../../if.js";import{s as $}from"../../slot.js";import{c as Be,C as De}from"../../Cross20.js";import"../../legacy.js";import{s as x,a as I}from"../../attributes.js";function Fe(g,t,r,l,o,f){let d=w;w&&U();var a,e,u=null;w&&H.nodeType===me&&(u=H,U());var y=w?H:g,h;ge(()=>{const v=t()||null;var P=v==="svg"?_e:null;v!==a&&(h&&(v===null?Ne(h,()=>{h=null,e=null}):v===e?pe(h):Ce(h)),v&&v!==e&&(h=he(()=>{if(u=w?u:P?document.createElementNS(P,v):document.createElement(v),be(u,u),l){w&&ze(v)&&u.append(document.createComment(""));var z=w?we(u):u.appendChild(xe());w&&(z===null?X(!1):Y(z)),l(u,z)}ye.nodes_end=u,y.before(u)})),a=v,a&&(e=a))},ve),d&&(X(!0),Y(y))}var Pe=j('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M16 5C9.925 5 5 9.925 5 16s4.925 11 11 11 11-4.925 11-11S22.075 5 16 5M3 16C3 8.82 8.82 3 16 3s13 5.82 13 13-5.82 13-13 13S3 23.18 3 16m13-2.333a1 1 0 0 1 1 1v6.666a1 1 0 1 1-2 0v-6.666a1 1 0 0 1 1-1M16 12a1.333 1.333 0 1 0 0-2.667A1.333 1.333 0 0 0 16 12"></path></svg>');function ee(g,t){D(t,!1);let r=i(t,"id",12,void 0),l=i(t,"style",12,void 0),o=i(t,"className",12,void 0),f=i(t,"fill",12,void 0),d=i(t,"size",12,"2rem");var a=Pe();return k(()=>{x(a,"id",r()),I(a,l()),E(a,0,G(o())),x(a,"fill",f())}),m(g,a),F({get id(){return r()},set id(e){r(e),n()},get style(){return l()},set style(e){l(e),n()},get className(){return o()},set className(e){o(e),n()},get fill(){return f()},set fill(e){f(e),n()},get size(){return d()},set size(e){d(e),n()}})}customElements.define("info-circle-32",B(ee,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var Re=j('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M16 5C9.925 5 5 9.925 5 16s4.925 11 11 11 11-4.925 11-11S22.075 5 16 5M3 16C3 8.82 8.82 3 16 3s13 5.82 13 13-5.82 13-13 13S3 23.18 3 16m13-6.333a1 1 0 0 1 1 1v6.666a1 1 0 1 1-2 0v-6.666a1 1 0 0 1 1-1m0 13A1.333 1.333 0 1 0 16 20a1.333 1.333 0 0 0 0 2.667"></path></svg>');function te(g,t){D(t,!1);let r=i(t,"id",12,void 0),l=i(t,"style",12,void 0),o=i(t,"className",12,void 0),f=i(t,"fill",12,void 0),d=i(t,"size",12,"2rem");var a=Re();return k(()=>{x(a,"id",r()),I(a,l()),E(a,0,G(o())),x(a,"fill",f())}),m(g,a),F({get id(){return r()},set id(e){r(e),n()},get style(){return l()},set style(e){l(e),n()},get className(){return o()},set className(e){o(e),n()},get fill(){return f()},set fill(e){f(e),n()},get size(){return d()},set size(e){d(e),n()}})}customElements.define("warning-circle-32",B(te,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var je=j('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M5 16C5 9.925 9.925 5 16 5s11 4.925 11 11-4.925 11-11 11S5 22.075 5 16M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m-3.293 8.293a1 1 0 0 0-1.414 1.414L14.586 16l-3.293 3.293a1 1 0 0 0 1.414 1.414L16 17.414l3.293 3.293a1 1 0 0 0 1.414-1.414L17.414 16l3.293-3.293a1 1 0 0 0-1.414-1.414L16 14.586z"></path></svg>');function se(g,t){D(t,!1);let r=i(t,"id",12,void 0),l=i(t,"style",12,void 0),o=i(t,"className",12,void 0),f=i(t,"fill",12,void 0),d=i(t,"size",12,"2rem");var a=je();return k(()=>{x(a,"id",r()),I(a,l()),E(a,0,G(o())),x(a,"fill",f())}),m(g,a),F({get id(){return r()},set id(e){r(e),n()},get style(){return l()},set style(e){l(e),n()},get className(){return o()},set className(e){o(e),n()},get fill(){return f()},set fill(e){f(e),n()},get size(){return d()},set size(e){d(e),n()}})}customElements.define("cross-circle-32",B(se,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var Ge=j('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M5 16C5 9.925 9.925 5 16 5s11 4.925 11 11-4.925 11-11 11S5 22.075 5 16M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m6.707 10.374a1 1 0 0 0-1.414-1.414l-6.626 6.626-3.293-3.293a1 1 0 0 0-1.414 1.414l4 4a1 1 0 0 0 1.414 0z"></path></svg>');function ae(g,t){D(t,!1);let r=i(t,"id",12,void 0),l=i(t,"style",12,void 0),o=i(t,"className",12,void 0),f=i(t,"fill",12,void 0),d=i(t,"size",12,"2rem");var a=Ge();return k(()=>{x(a,"id",r()),I(a,l()),E(a,0,G(o())),x(a,"fill",f())}),m(g,a),F({get id(){return r()},set id(e){r(e),n()},get style(){return l()},set style(e){l(e),n()},get className(){return o()},set className(e){o(e),n()},get fill(){return f()},set fill(e){f(e),n()},get size(){return d()},set size(e){d(e),n()}})}customElements.define("check-circle-32",B(ae,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var Ie=J('<div class="mc-status-notification__footer svelte-11acz86"><!></div>'),Oe=J('<button class="mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost svelte-11acz86" aria-label="Close"><!></button>'),Ve=J('<section role="status"><span class="mc-status-notification__icon svelte-11acz86" aria-hidden="true"><!></span> <div class="mc-status-notification__content svelte-11acz86"><!> <p class="mc-status-notification__message svelte-11acz86"><!></p> <!></div> <!></section>');const We={hash:"svelte-11acz86",code:`/**
+import{v as q,c as A,p as B,a as G,b as s,w as H,l as J,f as w,m as K,d as r,s as l,t as L,i as p,j as O,k as b,r as e,e as P,g as Q,h as _}from"../../custom-element.js";import{i as R}from"../../if.js";import{s as T}from"../../slot.js";import{c as U,I as V,C as X,W as Y,a as Z,b as $}from"../../Cross20.js";import{b as oo}from"../../this.js";import"../../legacy.js";import"../../attributes.js";var to=w('<button class="mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost svelte-18b6syz" aria-label="Close"><!></button>'),ro=w('<section role="status"><span class="mc-status-notification__icon svelte-18b6syz" aria-hidden="true"><!></span> <div class="mc-status-notification__content svelte-18b6syz"><h2 class="mc-status-notification__title svelte-18b6syz"> </h2> <p class="mc-status-notification__message svelte-18b6syz"> </p> <div class="mc-status-notification__footer svelte-18b6syz"><!></div></div> <!></section>');const eo={hash:"svelte-18b6syz",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-button.svelte-11acz86 {color:#ffffff;background-color:#464e63;font-weight:600;padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-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-11acz86:hover {background-color:#343b4c;}.mc-button.svelte-11acz86:active {background-color:#242938;}.mc-button.svelte-11acz86:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button.svelte-11acz86:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button.svelte-11acz86:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-button--s.svelte-11acz86 {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--ghost.svelte-11acz86 {color:#242938;background-color:rgba(255, 255, 255, 0.01);}.mc-button--ghost.svelte-11acz86:hover {background-color:rgba(70, 78, 99, 0.1);}.mc-button--ghost.svelte-11acz86:active {background-color:rgba(70, 78, 99, 0.2);}.mc-button--ghost.svelte-11acz86:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--icon-button.svelte-11acz86 {border-radius:100%;padding:0;}
+ */.mc-button.svelte-18b6syz {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-18b6syz:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-18b6syz:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-18b6syz: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-18b6syz {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-18b6syz {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__label.svelte-18b6syz {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-18b6syz {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-18b6syz: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-18b6syz: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--s.svelte-18b6syz {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-18b6syz {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-18b6syz {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-18b6syz {padding:0.25rem;}.mc-button--outlined.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-18b6syz:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-18b6syz {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-18b6syz:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-18b6syz:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-18b6syz {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-18b6syz:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-18b6syz {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-18b6syz:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-18b6syz {--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.svelte-18b6syz:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-18b6syz: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-18b6syz {border-radius:var(--radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}
 
 /* create columns */
 /* create columns */
-/* create custom named columns with custom content */.mc-status-notification.svelte-11acz86 {border-radius:0.5rem;display:flex;flex-flow:row wrap;align-items:flex-start;background:#e1f3f9;box-shadow:inset 0 0 0 1px #3facd7;position:relative;box-sizing:border-box;color:#000000;}.mc-status-notification__icon.svelte-11acz86 {width:2rem;height:2rem;margin:0.75rem;fill:#0b96cc;}.mc-status-notification__content.svelte-11acz86 {flex:1 1 0;padding:0.75rem 1rem 0.75rem 0;}.mc-status-notification__title.svelte-11acz86, .mc-status-notification__message.svelte-11acz86 {line-height:1.3;margin-block:0;}.mc-status-notification__title.svelte-11acz86 {font-weight:600;font-size:1rem;margin-block-end:0.25rem;}.mc-status-notification__message.svelte-11acz86 {font-size:0.875rem;}.mc-status-notification__footer.svelte-11acz86 {align-items:flex-start;display:flex;flex-flow:row wrap;gap:0.5rem;margin-top:0.75rem;margin-bottom:0.5rem;}.mc-status-notification--success.svelte-11acz86 {background:#ebf5de;box-shadow:inset 0 0 0 1px #78be20;}.mc-status-notification--success.svelte-11acz86 .mc-status-notification__icon:where(.svelte-11acz86) {fill:#3f9e10;}.mc-status-notification--warning.svelte-11acz86 {background:#fdf1e8;box-shadow:inset 0 0 0 1px #ef934a;}.mc-status-notification--warning.svelte-11acz86 .mc-status-notification__icon:where(.svelte-11acz86) {fill:#ea7315;}.mc-status-notification--error.svelte-11acz86 {background:#fdeaea;box-shadow:inset 0 0 0 1px #ef5f5c;}.mc-status-notification--error.svelte-11acz86 .mc-status-notification__icon:where(.svelte-11acz86) {fill:#ea302d;}.mc-status-notification-closable__close.svelte-11acz86 {margin:0.25rem;}`};function qe(g,t){D(t,!0),Ee(g,We);let r=i(t,"title",7),l=i(t,"children",7),o=i(t,"status",7,"information"),f=i(t,"closable",7,!1),d=i(t,"hasfooter",7,!1),a=i(t,"footer",7),e=i(t,"closelabel",7,"Close"),u=i(t,"titletag",7,"h2"),y=i(t,"onclose",7);const h=[{status:"information",component:ee},{status:"success",component:ae},{status:"warning",component:te},{status:"error",component:se}];function v(s){return h.find(c=>c.status===s)||h[0]}let P=Se(Me(v(o())));var z=Ve();let K;var O=p(z),ie=p(O);Be(ie,()=>Ae(P).component,(s,c)=>{c(s,{class:"mc-status-notification__icon","aria-hidden":"true"})}),C(O);var V=R(O,2),Q=p(V);{var ne=s=>{var c=A(),_=L(c);Fe(_,u,!1,(S,N)=>{E(S,0,"mc-status-notification__title svelte-11acz86");var b=Le();k(()=>Te(b,r())),m(N,b)}),m(s,c)};T(Q,s=>{r()&&s(ne)})}var W=R(Q,2),le=p(W);{var oe=s=>{var c=A(),_=L(c);Z(_,l),m(s,c)},re=s=>{var c=A(),_=L(c);$(_,t,"default",{}),m(s,c)};T(le,s=>{l()?s(oe):s(re,!1)})}C(W);var ce=R(W,2);{var fe=s=>{var c=Ie(),_=p(c);{var S=b=>{var M=A(),q=L(M);Z(q,a),m(b,M)},N=b=>{var M=A(),q=L(M);$(q,t,"footer",{}),m(b,M)};T(_,b=>{a()?b(S):b(N,!1)})}C(c),m(s,c)};T(ce,s=>{d()&&s(fe)})}C(V);var de=R(V,2);{var ue=s=>{var c=Oe();c.__click=function(...S){var N;(N=y())==null||N.apply(this,S)};var _=p(c);De(_,{class:"mc-status-notification-closable__icon","aria-hidden":"true"}),C(c),m(s,c)};T(de,s=>{f()&&s(ue)})}return C(z),k(s=>K=E(z,1,"mc-status-notification svelte-11acz86",null,K,s),[()=>({"mc-status-notification--success":o()==="success","mc-status-notification--warning":o()==="warning","mc-status-notification--error":o()==="error"})]),m(g,z),F({get title(){return r()},set title(s){r(s),n()},get children(){return l()},set children(s){l(s),n()},get status(){return o()},set status(s="information"){o(s),n()},get closable(){return f()},set closable(s=!1){f(s),n()},get hasfooter(){return d()},set hasfooter(s=!1){d(s),n()},get footer(){return a()},set footer(s){a(s),n()},get closelabel(){return e()},set closelabel(s="Close"){e(s),n()},get titletag(){return u()},set titletag(s="h2"){u(s),n()},get onclose(){return y()},set onclose(s){y(s),n()}})}ke(["click"]);customElements.define("m-status-notification",B(qe,{title:{},children:{},status:{},closable:{},hasfooter:{},footer:{},closelabel:{},titletag:{},onclose:{}},["default","footer"],[],!0));
+/* create custom named columns with custom content */.mc-status-notification.svelte-18b6syz {border-radius:var(--radius-m, 0.5rem);display:flex;flex-flow:row wrap;align-items:flex-start;background:var(--status-notification-color-background-information, #e1f3f9);box-shadow:inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-information, #3facd7);position:relative;box-sizing:border-box;color:var(--status-notification-color-text, #000000);}.mc-status-notification__icon.svelte-18b6syz {width:2rem;height:2rem;margin:0.75rem;fill:var(--status-notification-color-icon-information, #0b96cc);}.mc-status-notification__content.svelte-18b6syz {flex:1 1 0;padding:0.75rem 1rem 0.75rem 0;}.mc-status-notification__title.svelte-18b6syz, .mc-status-notification__message.svelte-18b6syz {line-height:var(--line-height-s, 1.3);margin-block:0;}.mc-status-notification__title.svelte-18b6syz {font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:0.25rem;}.mc-status-notification__message.svelte-18b6syz {font-size:var(--font-size-100, 0.875rem);}.mc-status-notification__footer.svelte-18b6syz {align-items:flex-start;display:flex;flex-flow:row wrap;gap:0.5rem;margin-top:0.75rem;margin-bottom:0.5rem;}.mc-status-notification--information.svelte-18b6syz {background:var(--status-notification-color-background-information, #e1f3f9);box-shadow:inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-information, #3facd7);}.mc-status-notification--information.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-information, #0b96cc);}.mc-status-notification--success.svelte-18b6syz {background:var(--status-notification-color-background-success, #ebf5de);box-shadow:inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-success, #78be20);}.mc-status-notification--success.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-success, #3f9e10);}.mc-status-notification--warning.svelte-18b6syz {background:var(--status-notification-color-background-warning, #fdf1e8);box-shadow:inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-warning, #ef934a);}.mc-status-notification--warning.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-warning, #ea7315);}.mc-status-notification--error.svelte-18b6syz {background:var(--status-notification-color-background-error, #fdeaea);box-shadow:inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-error, #ef5f5c);}.mc-status-notification--error.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-error, #ea302d);}.mc-status-notification-closable__close.svelte-18b6syz {margin:0.25rem;}.mc-status-notification__footer.svelte-18b6syz:empty {display:none;}`};function no(h,n){B(n,!0),G(h,eo);let d=s(n,"title",7),i=s(n,"description",7),c=s(n,"status",7,"info"),u=s(n,"closable",7),v;const y=[{status:"info",component:V},{status:"success",component:X},{status:"warning",component:Y},{status:"error",component:Z}];function x(o){return y.find(t=>t.status===o)||y[0]}let C=H(J(x(c())));const F=()=>{const o=new CustomEvent("close",{bubbles:!0,composed:!0});v.dispatchEvent(o)};var E={get title(){return d()},set title(o){d(o),b()},get description(){return i()},set description(o){i(o),b()},get status(){return c()},set status(o="info"){c(o),b()},get closable(){return u()},set closable(o){u(o),b()}},a=ro(),f=r(a),S=r(f);U(S,()=>K(C).component,(o,t)=>{t(o,{class:"mc-status-notification__icon","aria-hidden":"true"})}),e(f);var g=l(f,2),m=r(g),j=r(m,!0);e(m);var k=l(m,2),I=r(k,!0);e(k);var z=l(k,2),W=r(z);T(W,n,"footer",{}),e(z),e(g);var D=l(g,2);{var M=o=>{var t=to();t.__click=F;var N=r(t);$(N,{class:"mc-status-notification-closable__icon","aria-hidden":"true"}),e(t),p(o,t)};R(D,o=>{u()&&o(M)})}return e(a),oo(a,o=>v=o,()=>v),L(()=>{P(a,1,Q(["mc-status-notification",`mc-status-notification--${c()}`]),"svelte-18b6syz"),_(j,d()),_(I,i())}),p(h,a),O(E)}q(["click"]);customElements.define("m-status-notification",A(no,{title:{},description:{},status:{},closable:{}},["footer"],[],!0));
 //# sourceMappingURL=StatusNotification.js.map

package/dist/components/statusnotification/StatusNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusNotification.js","sources":["../../../node_modules/svelte/src/internal/client/dom/blocks/svelte-element.js","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/InfoCircle32/InfoCircle32.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/WarningCircle32/WarningCircle32.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/CrossCircle32/CrossCircle32.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/CheckCircle32/CheckCircle32.svelte","../../../src/components/statusnotification/StatusNotification.svelte"],"sourcesContent":["/** @import { Effect, TemplateNode } from '#client' */\nimport { FILENAME, NAMESPACE_SVG } from '../../../../constants.js';\nimport {\n\thydrate_next,\n\thydrate_node,\n\thydrating,\n\tset_hydrate_node,\n\tset_hydrating\n} from '../hydration.js';\nimport { create_text, get_first_child } from '../operations.js';\nimport {\n\tblock,\n\tbranch,\n\tdestroy_effect,\n\tpause_effect,\n\tresume_effect\n} from '../../reactivity/effects.js';\nimport { set_should_intro } from '../../render.js';\nimport { current_each_item, set_current_each_item } from './each.js';\nimport { active_effect } from '../../runtime.js';\nimport { component_context, dev_stack } from '../../context.js';\nimport { DEV } from 'esm-env';\nimport { EFFECT_TRANSPARENT, ELEMENT_NODE } from '#client/constants';\nimport { assign_nodes } from '../template.js';\nimport { is_raw_text_element } from '../../../../utils.js';\n\n/**\n * @param {Comment | Element} node\n * @param {() => string} get_tag\n * @param {boolean} is_svg\n * @param {undefined | ((element: Element, anchor: Node | null) => void)} render_fn,\n * @param {undefined | (() => string)} get_namespace\n * @param {undefined | [number, number]} location\n * @returns {void}\n */\nexport function element(node, get_tag, is_svg, render_fn, get_namespace, location) {\n\tlet was_hydrating = hydrating;\n\n\tif (hydrating) {\n\t\thydrate_next();\n\t}\n\n\tvar filename = DEV && location && component_context?.function[FILENAME];\n\n\t/** @type {string | null} */\n\tvar tag;\n\n\t/** @type {string | null} */\n\tvar current_tag;\n\n\t/** @type {null | Element} */\n\tvar element = null;\n\n\tif (hydrating && hydrate_node.nodeType === ELEMENT_NODE) {\n\t\telement = /** @type {Element} */ (hydrate_node);\n\t\thydrate_next();\n\t}\n\n\tvar anchor = /** @type {TemplateNode} */ (hydrating ? hydrate_node : node);\n\n\t/** @type {Effect | null} */\n\tvar effect;\n\n\t/**\n\t * The keyed `{#each ...}` item block, if any, that this element is inside.\n\t * We track this so we can set it when changing the element, allowing any\n\t * `animate:` directive to bind itself to the correct block\n\t */\n\tvar each_item_block = current_each_item;\n\n\tblock(() => {\n\t\tconst next_tag = get_tag() || null;\n\t\tvar ns = get_namespace ? get_namespace() : is_svg || next_tag === 'svg' ? NAMESPACE_SVG : null;\n\n\t\t// Assumption: Noone changes the namespace but not the tag (what would that even mean?)\n\t\tif (next_tag === tag) return;\n\n\t\t// See explanation of `each_item_block` above\n\t\tvar previous_each_item = current_each_item;\n\t\tset_current_each_item(each_item_block);\n\n\t\tif (effect) {\n\t\t\tif (next_tag === null) {\n\t\t\t\t// start outro\n\t\t\t\tpause_effect(effect, () => {\n\t\t\t\t\teffect = null;\n\t\t\t\t\tcurrent_tag = null;\n\t\t\t\t});\n\t\t\t} else if (next_tag === current_tag) {\n\t\t\t\t// same tag as is currently rendered — abort outro\n\t\t\t\tresume_effect(effect);\n\t\t\t} else {\n\t\t\t\t// tag is changing — destroy immediately, render contents without intro transitions\n\t\t\t\tdestroy_effect(effect);\n\t\t\t\tset_should_intro(false);\n\t\t\t}\n\t\t}\n\n\t\tif (next_tag && next_tag !== current_tag) {\n\t\t\teffect = branch(() => {\n\t\t\t\telement = hydrating\n\t\t\t\t\t? /** @type {Element} */ (element)\n\t\t\t\t\t: ns\n\t\t\t\t\t\t? document.createElementNS(ns, next_tag)\n\t\t\t\t\t\t: document.createElement(next_tag);\n\n\t\t\t\tif (DEV && location) {\n\t\t\t\t\t// @ts-expect-error\n\t\t\t\t\telement.__svelte_meta = {\n\t\t\t\t\t\tparent: dev_stack,\n\t\t\t\t\t\tloc: {\n\t\t\t\t\t\t\tfile: filename,\n\t\t\t\t\t\t\tline: location[0],\n\t\t\t\t\t\t\tcolumn: location[1]\n\t\t\t\t\t\t}\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tassign_nodes(element, element);\n\n\t\t\t\tif (render_fn) {\n\t\t\t\t\tif (hydrating && is_raw_text_element(next_tag)) {\n\t\t\t\t\t\t// prevent hydration glitches\n\t\t\t\t\t\telement.append(document.createComment(''));\n\t\t\t\t\t}\n\n\t\t\t\t\t// If hydrating, use the existing ssr comment as the anchor so that the\n\t\t\t\t\t// inner open and close methods can pick up the existing nodes correctly\n\t\t\t\t\tvar child_anchor = /** @type {TemplateNode} */ (\n\t\t\t\t\t\thydrating ? get_first_child(element) : element.appendChild(create_text())\n\t\t\t\t\t);\n\n\t\t\t\t\tif (hydrating) {\n\t\t\t\t\t\tif (child_anchor === null) {\n\t\t\t\t\t\t\tset_hydrating(false);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tset_hydrate_node(child_anchor);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// `child_anchor` is undefined if this is a void element, but we still\n\t\t\t\t\t// need to call `render_fn` in order to run actions etc. If the element\n\t\t\t\t\t// contains children, it's a user error (which is warned on elsewhere)\n\t\t\t\t\t// and the DOM will be silently discarded\n\t\t\t\t\trender_fn(element, child_anchor);\n\t\t\t\t}\n\n\t\t\t\t// we do this after calling `render_fn` so that child effects don't override `nodes.end`\n\t\t\t\t/** @type {Effect} */ (active_effect).nodes_end = element;\n\n\t\t\t\tanchor.before(element);\n\t\t\t});\n\t\t}\n\n\t\ttag = next_tag;\n\t\tif (tag) current_tag = tag;\n\t\tset_should_intro(true);\n\n\t\tset_current_each_item(previous_each_item);\n\t}, EFFECT_TRANSPARENT);\n\n\tif (was_hydrating) {\n\t\tset_hydrating(true);\n\t\tset_hydrate_node(anchor);\n\t}\n}\n","<svelte:options customElement={{ tag: 'info-circle-32', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"2rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" width=\"32px\" height=\"32px\"><path fill-rule=\"evenodd\" d=\"M16 5C9.925 5 5 9.925 5 16s4.925 11 11 11 11-4.925 11-11S22.075 5 16 5M3 16C3 8.82 8.82 3 16 3s13 5.82 13 13-5.82 13-13 13S3 23.18 3 16m13-2.333a1 1 0 0 1 1 1v6.666a1 1 0 1 1-2 0v-6.666a1 1 0 0 1 1-1M16 12a1.333 1.333 0 1 0 0-2.667A1.333 1.333 0 0 0 16 12\"/></svg>","<svelte:options customElement={{ tag: 'warning-circle-32', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"2rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" width=\"32px\" height=\"32px\"><path fill-rule=\"evenodd\" d=\"M16 5C9.925 5 5 9.925 5 16s4.925 11 11 11 11-4.925 11-11S22.075 5 16 5M3 16C3 8.82 8.82 3 16 3s13 5.82 13 13-5.82 13-13 13S3 23.18 3 16m13-6.333a1 1 0 0 1 1 1v6.666a1 1 0 1 1-2 0v-6.666a1 1 0 0 1 1-1m0 13A1.333 1.333 0 1 0 16 20a1.333 1.333 0 0 0 0 2.667\"/></svg>","<svelte:options customElement={{ tag: 'cross-circle-32', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"2rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" width=\"32px\" height=\"32px\"><path fill-rule=\"evenodd\" d=\"M5 16C5 9.925 9.925 5 16 5s11 4.925 11 11-4.925 11-11 11S5 22.075 5 16M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m-3.293 8.293a1 1 0 0 0-1.414 1.414L14.586 16l-3.293 3.293a1 1 0 0 0 1.414 1.414L16 17.414l3.293 3.293a1 1 0 0 0 1.414-1.414L17.414 16l3.293-3.293a1 1 0 0 0-1.414-1.414L16 14.586z\"/></svg>","<svelte:options customElement={{ tag: 'check-circle-32', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"2rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" width=\"32px\" height=\"32px\"><path fill-rule=\"evenodd\" d=\"M5 16C5 9.925 9.925 5 16 5s11 4.925 11 11-4.925 11-11 11S5 22.075 5 16M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m6.707 10.374a1 1 0 0 0-1.414-1.414l-6.626 6.626-3.293-3.293a1 1 0 0 0-1.414 1.414l4 4a1 1 0 0 0 1.414 0z\"/></svg>","<svelte:options customElement={{ tag: 'm-status-notification' }} />\n\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  import Cross20 from '@mozaic-ds/icons-svelte/svelte/Cross20/Cross20.svelte';\n  import InfoCircle32 from '@mozaic-ds/icons-svelte/svelte/InfoCircle32/InfoCircle32.svelte';\n  import WarningCircle32 from '@mozaic-ds/icons-svelte/svelte/WarningCircle32/WarningCircle32.svelte';\n  import CrossCircle32 from '@mozaic-ds/icons-svelte/svelte/CrossCircle32/CrossCircle32.svelte';\n  import CheckCircle32 from '@mozaic-ds/icons-svelte/svelte/CheckCircle32/CheckCircle32.svelte';\n\n  interface Props {\n    title: string;\n    children?: Snippet;\n    status?: 'information' | 'success' | 'warning' | 'error';\n    closable?: boolean;\n    hasfooter?: boolean;\n    footer?: Snippet;\n    closelabel?: string;\n    titletag?: string;\n    onclose?: (event: MouseEvent) => void;\n  }\n\n  let {\n    title,\n    children,\n    status = 'information',\n    closable = false,\n    hasfooter = false,\n    footer,\n    closelabel = 'Close',\n    titletag = 'h2',\n    onclose,\n  }: Props = $props();\n\n  const iconMap = [\n    { status: 'information', component: InfoCircle32 },\n    { status: 'success', component: CheckCircle32 },\n    { status: 'warning', component: WarningCircle32 },\n    { status: 'error', component: CrossCircle32 },\n  ];\n\n  function getSelected(status: string) {\n    return iconMap.find((icon) => icon.status === status) || iconMap[0];\n  }\n\n  let selected = $state(getSelected(status));\n</script>\n\n<section\n  class=\"mc-status-notification\"\n  role=\"status\"\n  class:mc-status-notification--success={status === 'success'}\n  class:mc-status-notification--warning={status === 'warning'}\n  class:mc-status-notification--error={status === 'error'}\n>\n  <span class=\"mc-status-notification__icon\" aria-hidden=\"true\">\n    <selected.component\n      class=\"mc-status-notification__icon\"\n      aria-hidden=\"true\"\n    />\n  </span>\n\n  <div class=\"mc-status-notification__content\">\n    {#if title}\n      <svelte:element this={titletag} class=\"mc-status-notification__title\"\n      >{title}</svelte:element\n      >\n    {/if}\n    <p class=\"mc-status-notification__message\">\n      {#if children}\n        {@render children()}\n      {:else}\n        <slot />\n      {/if}\n    </p>\n\n    {#if hasfooter}\n      <div class=\"mc-status-notification__footer\">\n        {#if footer}\n          {@render footer()}\n        {:else}\n          <slot name=\"footer\" />\n        {/if}\n      </div>\n    {/if}\n  </div>\n\n  {#if closable}\n    <button \n      class=\"mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost\" \n      aria-label=\"Close\"\n      onclick={onclose}\n    >\n      <Cross20\n        class=\"mc-status-notification-closable__icon\"\n        aria-hidden=\"true\"\n      />\n    </button>\n  {/if}\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n  @use '@mozaic-ds/styles/components/status-notification';\n</style>\n"],"names":["element","node","get_tag","is_svg","render_fn","get_namespace","location","was_hydrating","hydrating","hydrate_next","tag","current_tag","hydrate_node","ELEMENT_NODE","anchor","effect","block","next_tag","ns","NAMESPACE_SVG","pause_effect","resume_effect","destroy_effect","branch","assign_nodes","is_raw_text_element","child_anchor","get_first_child","create_text","set_hydrating","set_hydrate_node","active_effect","EFFECT_TRANSPARENT","id","style","className","fill","size","title","$.prop","$$props","children","status","closable","hasfooter","footer","closelabel","titletag","onclose","iconMap","InfoCircle32","CheckCircle32","WarningCircle32","CrossCircle32","getSelected","icon","selected","$.state","$.proxy","$$element","$$anchor","$$render","consequent","consequent_1","alternate","consequent_2","alternate_1","consequent_3","_a","$$args","consequent_4"],"mappings":"0iBAmCO,SAASA,GAAQC,EAAMC,EAASC,EAAQC,EAAWC,EAAeC,EAAU,CAClF,IAAIC,EAAgBC,EAEhBA,GACHC,EAAc,EAMf,IAAIC,EAGAC,EAGAX,EAAU,KAEVQ,GAAaI,EAAa,WAAaC,KAC1Cb,EAAkCY,EAClCH,EAAc,GAGf,IAAIK,EAAsCN,EAAYI,EAAeX,EAGjEc,EASJC,GAAM,IAAM,CACX,MAAMC,EAAWf,EAAO,GAAM,KAC9B,IAAIgB,EAAiDD,IAAa,MAAQE,GAAgB,KAGtFF,IAAaP,IAMbK,IACCE,IAAa,KAEhBG,GAAaL,EAAQ,IAAM,CAC1BA,EAAS,KACTJ,EAAc,IACnB,CAAK,EACSM,IAAaN,EAEvBU,GAAcN,CAAM,EAGpBO,GAAeP,CAAM,GAKnBE,GAAYA,IAAaN,IAC5BI,EAASQ,GAAO,IAAM,CAqBrB,GApBAvB,EAAUQ,EACiBR,EACxBkB,EACC,SAAS,gBAAgBA,EAAID,CAAQ,EACrC,SAAS,cAAcA,CAAQ,EAcnCO,GAAaxB,EAASA,CAAO,EAEzBI,EAAW,CACVI,GAAaiB,GAAoBR,CAAQ,GAE5CjB,EAAQ,OAAO,SAAS,cAAc,EAAE,CAAC,EAK1C,IAAI0B,EACHlB,EAAYmB,GAAgB3B,CAAO,EAAIA,EAAQ,YAAY4B,GAAa,CAAA,EAGrEpB,IACCkB,IAAiB,KACpBG,EAAc,EAAK,EAEnBC,EAAiBJ,CAAY,GAQ/BtB,EAAUJ,EAAS0B,CAAY,CACpC,CAG2BK,GAAe,UAAY/B,EAElDc,EAAO,OAAOd,CAAO,CACzB,CAAI,GAGFU,EAAMO,EACFP,IAAKC,EAAcD,GAIvB,EAAEsB,EAAkB,EAEjBzB,IACHsB,EAAc,EAAI,EAClBC,EAAiBhB,CAAM,EAEzB,mbCrKA,SAEa,IAAAmB,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,MAAM,oCAGEJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,uhBCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,MAAM,oCAGEJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,slBCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,MAAM,oCAGEJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,0gBCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,MAAM,oCAGEJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E;;;;;;;;;uoDCPA,sBAuBIE,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,iBAAS,aAAa,EACtBC,mBAAW,EAAK,EAChBC,oBAAY,EAAK,EACjBC,EAAMN,EAAAC,EAAA,SAAA,CAAA,EACNM,qBAAa,OAAO,EACpBC,mBAAW,IAAI,EACfC,EAAOT,EAAAC,EAAA,UAAA,CAAA,QAGHS,EAAO,CACT,CAAA,OAAQ,cAAe,UAAWC,EAAY,EAC9C,CAAA,OAAQ,UAAW,UAAWC,EAAa,EAC3C,CAAA,OAAQ,UAAW,UAAWC,EAAe,EAC7C,CAAA,OAAQ,QAAS,UAAWC,EAAa,YAGpCC,EAAYZ,EAAgB,CAC5B,OAAAO,EAAQ,KAAMM,GAASA,EAAK,SAAWb,CAAM,GAAKO,EAAQ,CAAC,CACpE,KAEIO,EAAQC,GAAAC,GAAUJ,EAAYZ,EAAM,CAAA,CAAA,CAAA,sMAmBdK,EAAQ,GAAA,CAAAY,EAAAC,IAAA,6EAC5BtB,EAAK,CAAA,CAAA,2BAFJA,EAAK,GAAAuB,EAAAC,EAAA,0DAOGrB,CAAQ,uEADdA,EAAQ,EAAAoB,EAAAE,EAAA,EAAAF,EAAAG,GAAA,EAAA,qFAUAnB,CAAM,oEADZA,EAAM,EAAAgB,EAAAI,CAAA,EAAAJ,EAAAK,EAAA,EAAA,0BAFVtB,EAAS,GAAAiB,EAAAM,EAAA,8EAeHC,EAAApB,MAAA,MAAAoB,EAAO,MAAA,KAAAC,gHAJf1B,EAAQ,GAAAkB,EAAAS,EAAA,sFApC0B,kCAAA5B,EAAM,IAAK,UACX,kCAAAA,EAAM,IAAK,UACb,gCAAAA,EAAM,IAAK,gKA5BrC,cAAa,qDACX,GAAK,uDACJ,GAAK,0GAEJ,QAAO,qDACT,KAAI,+DAgBnB","x_google_ignoreList":[0,1,2,3,4]}
+{"version":3,"file":"StatusNotification.js","sources":["../../../src/components/statusnotification/StatusNotification.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-notification' }} />\n\n<script lang=\"ts\">\n  import Cross20 from '@mozaic-ds/icons-svelte/svelte/Cross20/Cross20.svelte';\n  import InfoCircle32 from '@mozaic-ds/icons-svelte/svelte/InfoCircleFilled32/InfoCircleFilled32.svelte';\n  import WarningCircle32 from '@mozaic-ds/icons-svelte/svelte/WarningCircleFilled32/WarningCircleFilled32.svelte';\n  import CrossCircle32 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled32/CrossCircleFilled32.svelte';\n  import CheckCircle32 from '@mozaic-ds/icons-svelte/svelte/CheckCircleFilled32/CheckCircleFilled32.svelte';\n  /**\n   * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.\n   *\n   * @slot footer - Use this slot to insert a button or a link in the footer\n   * @event close {CustomEvent<void>} - Emits when closing the notification.\n   */\n  interface Props {\n    /**\n     * Title of the status notification.\n     */\n    title: string;\n    /**\n     * Description of the status notification.\n     */\n    description: string;\n    /**\n     * Allows to define the status notification type.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error';\n    /**\n     * if `true`, display the close button.\n     */\n    closable?: boolean;\n  }\n\n  let { title, description, status = 'info', closable }: Props = $props();\n  let element: HTMLElement;\n\n  const iconMap = [\n    { status: 'info', component: InfoCircle32 },\n    { status: 'success', component: CheckCircle32 },\n    { status: 'warning', component: WarningCircle32 },\n    { status: 'error', component: CrossCircle32 },\n  ];\n\n  function getSelected(status: string) {\n    return iconMap.find((icon) => icon.status === status) || iconMap[0];\n  }\n\n  let selected = $state(getSelected(status));\n\n  const onClose = () => {\n    const event = new CustomEvent('close', {\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n</script>\n\n<section\n  class={['mc-status-notification', `mc-status-notification--${status}`]}\n  role=\"status\"\n  bind:this={element}\n>\n  <span class=\"mc-status-notification__icon\" aria-hidden=\"true\">\n    <selected.component\n      class=\"mc-status-notification__icon\"\n      aria-hidden=\"true\"\n    />\n  </span>\n\n  <div class=\"mc-status-notification__content\">\n    <h2 class=\"mc-status-notification__title\">{title}</h2>\n    <p class=\"mc-status-notification__message\">\n      {description}\n    </p>\n\n    <div class=\"mc-status-notification__footer\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n\n  {#if closable}\n    <button\n      class=\"mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost\"\n      aria-label=\"Close\"\n      onclick={onClose}\n    >\n      <Cross20\n        class=\"mc-status-notification-closable__icon\"\n        aria-hidden=\"true\"\n      />\n    </button>\n  {/if}\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n  @use '@mozaic-ds/styles/components/status-notification';\n\n  .mc-status-notification__footer:empty {\n    display: none;\n  }\n</style>\n"],"names":["title","$.prop","$$props","description","status","closable","element","iconMap","InfoCircle32","CheckCircle32","WarningCircle32","CrossCircle32","getSelected","icon","selected","$.state","$.proxy","onClose","event","$$render","consequent","$.bind_this","section","$$value"],"mappings":";;;;;;u5FAAA,qBAiCQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EAAEE,iBAAS,MAAM,EAAEC,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EAC/CI,QAEEC,EAAO,CACT,CAAA,OAAQ,OAAQ,UAAWC,CAAY,EACvC,CAAA,OAAQ,UAAW,UAAWC,CAAa,EAC3C,CAAA,OAAQ,UAAW,UAAWC,CAAe,EAC7C,CAAA,OAAQ,QAAS,UAAWC,CAAa,YAGpCC,EAAYR,EAAgB,CAC5B,OAAAG,EAAQ,KAAMM,GAASA,EAAK,SAAWT,CAAM,GAAKG,EAAQ,CAAC,CACpE,KAEIO,EAAQC,EAAAC,EAAUJ,EAAYR,EAAM,CAAA,CAAA,CAAA,EAElC,MAAAa,EAAO,IAAS,OACdC,EAAK,IAAO,YAAY,QAAO,CACnC,QAAS,GACT,SAAU,GAAI,EAEhBZ,EAAQ,cAAcY,CAAK,CAC7B,yJAtBmC,OAAM,0VAoD5BD,4GAJRZ,EAAQ,GAAAc,EAAAC,CAAA,gBApBFC,GAAAC,EAAAC,GAAAjB,QAAAA,CAAO,kBAFV,oDAAqDF,GAAM,2BAYtBJ,GAAK,MAE7CG,GAAW,eAjBlB"}

package/dist/components/statusnotification/StatusNotification.spec.js

@@ -0,0 +1,54 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import StatusNotification from './StatusNotification.svelte';
+describe('m-status-notification component', () => {
+    const baseProps = {
+        title: 'Test Title',
+        description: 'Test description',
+    };
+    it('renders with default status "info" and displays title and description', () => {
+        const { container, getByText } = render(StatusNotification, {
+            props: baseProps,
+        });
+        const section = container.querySelector('section.mc-status-notification');
+        expect(section).toBeTruthy();
+        expect(section?.classList.contains('mc-status-notification--info')).toBe(true);
+        expect(getByText(baseProps.title)).toBeTruthy();
+        expect(getByText(baseProps.description)).toBeTruthy();
+        const icon = container.querySelector('.mc-status-notification__icon > svg');
+        expect(icon).toBeTruthy();
+    });
+    it('renders correct icon based on status prop', () => {
+        const statuses = ['info', 'success', 'warning', 'error'];
+        statuses.forEach((status) => {
+            const { container } = render(StatusNotification, {
+                props: { ...baseProps, status },
+            });
+            const section = container.querySelector('section.mc-status-notification');
+            expect(section?.classList.contains(`mc-status-notification--${status}`)).toBe(true);
+            const icon = container.querySelector('.mc-status-notification__icon > svg');
+            expect(icon).toBeTruthy();
+        });
+    });
+    it('renders close button when closable is true and emits close event on click', async () => {
+        const { container } = render(StatusNotification, {
+            props: { ...baseProps, closable: true },
+        });
+        const section = container.querySelector('section.mc-status-notification');
+        const closeBtn = container.querySelector('button.mc-status-notification-closable__close');
+        expect(closeBtn).toBeTruthy();
+        const closeHandler = vi.fn();
+        section.addEventListener('close', closeHandler);
+        await fireEvent.click(closeBtn);
+        expect(closeHandler).toHaveBeenCalledTimes(1);
+        section.removeEventListener('close', closeHandler);
+    });
+    it('does not render close button when closable is false or undefined', () => {
+        const { container: c1 } = render(StatusNotification, {
+            props: { ...baseProps, closable: false },
+        });
+        expect(c1.querySelector('button.mc-status-notification-closable__close')).toBeNull();
+        const { container: c2 } = render(StatusNotification, { props: baseProps });
+        expect(c2.querySelector('button.mc-status-notification-closable__close')).toBeNull();
+    });
+});

package/dist/components/statusnotification/StatusNotification.stories.d.ts

@@ -1,15 +1,17 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged.
- * It often provides feedback on a process, highlights a status update, or alerts users about an issue.
- * Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.
- * The `StatusNotification` component is the **Svelte / WebComponent** implementation of the **Status Notification** component of Mozaic Design System.
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const Warning: any;
-export declare const Danger: any;
-export declare const Success: any;
-export declare const WithFooter: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Info: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Error: Story;
+export declare const Closable: Story;
+export declare const WithButton: Story;
+export declare const WithButtons: Story;
+export declare const WithLink: {
+    args: {
+        footer: string;
+    };
+};
 //# sourceMappingURL=StatusNotification.stories.d.ts.map

package/dist/components/statusnotification/StatusNotification.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusNotification.stories.d.ts","sourceRoot":"","sources":["../../../src/components/statusnotification/StatusNotification.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAI1D;;;;;GAKG;wBAgCE,IAAI;AA9BT,wBA8BU;AA0BV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAOzC,eAAO,MAAM,OAAO,KAAoB,CAAC;AAQzC,eAAO,MAAM,MAAM,KAAoB,CAAC;AAQxC,eAAO,MAAM,OAAO,KAAoB,CAAC;AAQzC,eAAO,MAAM,UAAU,KAAoB,CAAC"}
+{"version":3,"file":"StatusNotification.stories.d.ts","sourceRoot":"","sources":["../../../src/components/statusnotification/StatusNotification.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAMrE,QAAA,MAAM,IAAI,EAAE,IA2BX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,IAAI,EAAE,KAAU,CAAC;AAE9B,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAUpB,CAAC"}