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

package/dist/components/statusbadge/StatusBadge.svelte.d.ts

@@ -1,32 +1,17 @@
-import type { StatusBadgeStyle } from './StatusBadge.types';
+/**
+ * A Status Badge is used to indicate the current status of an element, providing a clear and concise visual cue. The status can change dynamically based on updates, events, or conditions within the system. Status Badges help users quickly identify the state of an item, such as an order status, system health, or process completion. They are often color-coded to enhance readability and recognition.
+ */
 interface Props {
-    status: StatusBadgeStyle;
+    /**
+     * Content of the status badge.
+     */
+    label: string;
+    /**
+     * Allows to define the status badge type.
+     */
+    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
 }
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const StatusBadge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, "">;
-type StatusBadge = InstanceType<typeof StatusBadge>;
+declare const StatusBadge: import("svelte").Component<Props, {}, "">;
+type StatusBadge = ReturnType<typeof StatusBadge>;
 export default StatusBadge;
 //# sourceMappingURL=StatusBadge.svelte.d.ts.map

package/dist/components/statusbadge/StatusBadge.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusbadge/StatusBadge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAI1D,UAAU,KAAK;IACb,MAAM,EAAE,gBAAgB,CAAC;CAC1B;AAoBH,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,WAAW;;;;;;UAAqF,CAAC;AACrF,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"StatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusbadge/StatusBadge.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;CAC/D;AAmBH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/statusdot/README.md

@@ -0,0 +1,11 @@
+# `m-status-dot`
+
+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.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `status` | Allows to define the status dot type. | `'info'` `'success'` `'warning'` `'error'` `'neutral'` | `info` |
+| `size` | Determines the size of the status dot. | `'s'` `'m'` `'l'` | `m` |
+

package/dist/components/statusdot/StatusDot.js

@@ -1,4 +1,4 @@
-import{c as l,p as n,a as i,b as c,f as m,t as v,h as p,i as g,j as u,e as h}from"../../custom-element.js";var b=m("<div></div>");const f={hash:"svelte-14acsp3",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.
- */.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 k(o,a){n(a,!0),i(o,f);let t=c(a,"size",7,"m"),s=c(a,"status",7,"info");var d={get size(){return t()},set size(e="m"){t(e),u()},get status(){return s()},set status(e="info"){s(e),u()}},r=b();return v(()=>h(r,1,`mc-status-dot ${t()?`mc-status-dot--${t()}`:""}  ${s()?`mc-status-dot--${s()}`:""}`,"svelte-14acsp3")),p(o,r),g(d)}customElements.define("m-status-dot",l(k,{size:{},status:{}},[],[],!0));export{k 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":";;mwBAAA,gBAiBQ,IAAAA,eAAO,GAAG,EAAEC,iBAAS,MAAM,2CAApB,IAAG,iDAAW,OAAM,sDAIXD,IAAI,kBAAqBA,GAAI,GAAK,EAAE,KAAIC,IAAA,kBACxCA,MAClB,EAAE,GAAA,gBAAA,CAAA,aALR"}
+{"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 class={['mc-status-dot', `mc-status-dot--${size}`, `mc-status-dot--${status}`]}></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,wCAGtB,kCAAmCD,EAAI,CAAA,qBAAsBC,GAAM,mCAFhF"}

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

@@ -0,0 +1,36 @@
+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,21 +8,17 @@
     /**
      * 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}`
-    : ''}"
-></div>
+<div class={['mc-status-dot', `mc-status-dot--${size}`, `mc-status-dot--${status}`]}></div>
 
 <style>/**
  * Do not edit directly, this file was auto-generated.

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;AAeH,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,8 +1,4 @@
-import{F as y,G as X,H as J,I as vt,J as bt,K as gt,L as ht,N as _t,M as yt,O as zt,P as wt,Q as xt,R as Y,S as Z,T as kt,U as pt,V as Nt,W as Ct,c as B,p as F,b as o,q as G,t as N,h as m,i as P,j as i,e as C,u as I,n as Et,a as St,v as Mt,l as At,f as K,m as Lt,d as k,s as D,r as p,A,B as L,X as Tt,g as Bt}from"../../custom-element.js";import{s as $}from"../../snippet.js";import{i as T}from"../../if.js";import{s as tt}from"../../slot.js";import{c as Ft,C as Pt}from"../../Cross20.js";import"../../legacy.js";import{s as z,a as O}from"../../attributes.js";function Rt(v,e,l,r,n,d){let u=y;y&&X();var f,a,t=null;y&&J.nodeType===vt&&(t=J,X());var w=y?J:v,g;bt(()=>{const b=e()||null;var R=b==="svg"?_t:null;b!==f&&(g&&(b===null?pt(g,()=>{g=null,a=null}):b===a?Nt(g):Ct(g)),b&&b!==a&&(g=ht(()=>{if(t=y?t:R?document.createElementNS(R,b):document.createElement(b),yt(t,t),r){y&&zt(b)&&t.append(document.createComment(""));var E=y?wt(t):t.appendChild(xt());y&&(E===null?Y(!1):Z(E)),r(t,E)}kt.nodes_end=t,w.before(t)})),f=b,f&&(a=f))},gt),u&&(Y(!0),Z(w))}var jt=G('<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 et(v,e){F(e,!1);let l=o(e,"id",12,void 0),r=o(e,"style",12,void 0),n=o(e,"className",12,void 0),d=o(e,"fill",12,void 0),u=o(e,"size",12,"2rem");var f={get id(){return l()},set id(t){l(t),i()},get style(){return r()},set style(t){r(t),i()},get className(){return n()},set className(t){n(t),i()},get fill(){return d()},set fill(t){d(t),i()},get size(){return u()},set size(t){u(t),i()}},a=jt();return N(()=>{z(a,"id",l()),O(a,r()),C(a,0,I(n())),z(a,"fill",d())}),m(v,a),P(f)}customElements.define("info-circle-32",B(et,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var Dt=G('<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 st(v,e){F(e,!1);let l=o(e,"id",12,void 0),r=o(e,"style",12,void 0),n=o(e,"className",12,void 0),d=o(e,"fill",12,void 0),u=o(e,"size",12,"2rem");var f={get id(){return l()},set id(t){l(t),i()},get style(){return r()},set style(t){r(t),i()},get className(){return n()},set className(t){n(t),i()},get fill(){return d()},set fill(t){d(t),i()},get size(){return u()},set size(t){u(t),i()}},a=Dt();return N(()=>{z(a,"id",l()),O(a,r()),C(a,0,I(n())),z(a,"fill",d())}),m(v,a),P(f)}customElements.define("warning-circle-32",B(st,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var Gt=G('<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 at(v,e){F(e,!1);let l=o(e,"id",12,void 0),r=o(e,"style",12,void 0),n=o(e,"className",12,void 0),d=o(e,"fill",12,void 0),u=o(e,"size",12,"2rem");var f={get id(){return l()},set id(t){l(t),i()},get style(){return r()},set style(t){r(t),i()},get className(){return n()},set className(t){n(t),i()},get fill(){return d()},set fill(t){d(t),i()},get size(){return u()},set size(t){u(t),i()}},a=Gt();return N(()=>{z(a,"id",l()),O(a,r()),C(a,0,I(n())),z(a,"fill",d())}),m(v,a),P(f)}customElements.define("cross-circle-32",B(at,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var It=G('<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 ot(v,e){F(e,!1);let l=o(e,"id",12,void 0),r=o(e,"style",12,void 0),n=o(e,"className",12,void 0),d=o(e,"fill",12,void 0),u=o(e,"size",12,"2rem");var f={get id(){return l()},set id(t){l(t),i()},get style(){return r()},set style(t){r(t),i()},get className(){return n()},set className(t){n(t),i()},get fill(){return d()},set fill(t){d(t),i()},get size(){return u()},set size(t){u(t),i()}},a=It();return N(()=>{z(a,"id",l()),O(a,r()),C(a,0,I(n())),z(a,"fill",d())}),m(v,a),P(f)}customElements.define("check-circle-32",B(ot,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var Ot=K('<div class="mc-status-notification__footer svelte-18b6syz"><!></div>'),Vt=K('<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>'),Wt=K('<section role="status"><span class="mc-status-notification__icon svelte-18b6syz" aria-hidden="true"><!></span> <div class="mc-status-notification__content svelte-18b6syz"><!> <p class="mc-status-notification__message svelte-18b6syz"><!></p> <!></div> <!></section>');const qt={hash:"svelte-18b6syz",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.
- */.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.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--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--icon-button.svelte-18b6syz {border-radius:var(--radius-full, 100%);padding:0;}
-
-/* create columns */
-/* create columns */
-/* 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--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;}`};function Ht(v,e){F(e,!0),St(v,qt);let l=o(e,"title",7),r=o(e,"children",7),n=o(e,"status",7,"information"),d=o(e,"closable",7,!1),u=o(e,"hasfooter",7,!1),f=o(e,"footer",7),a=o(e,"closelabel",7,"Close"),t=o(e,"titletag",7,"h2"),w=o(e,"onclose",7);const g=[{status:"information",component:et},{status:"success",component:ot},{status:"warning",component:st},{status:"error",component:at}];function b(s){return g.find(c=>c.status===s)||g[0]}let R=Mt(At(b(n())));var E={get title(){return l()},set title(s){l(s),i()},get children(){return r()},set children(s){r(s),i()},get status(){return n()},set status(s="information"){n(s),i()},get closable(){return d()},set closable(s=!1){d(s),i()},get hasfooter(){return u()},set hasfooter(s=!1){u(s),i()},get footer(){return f()},set footer(s){f(s),i()},get closelabel(){return a()},set closelabel(s="Close"){a(s),i()},get titletag(){return t()},set titletag(s="h2"){t(s),i()},get onclose(){return w()},set onclose(s){w(s),i()}},j=Wt();let Q;var V=k(j),it=k(V);Ft(it,()=>Lt(R).component,(s,c)=>{c(s,{class:"mc-status-notification__icon","aria-hidden":"true"})}),p(V);var W=D(V,2),U=k(W);{var rt=s=>{var c=A(),h=L(c);Rt(h,t,!1,(S,x)=>{C(S,0,"mc-status-notification__title svelte-18b6syz");var _=Tt();N(()=>Bt(_,l())),m(x,_)}),m(s,c)};T(U,s=>{l()&&s(rt)})}var q=D(U,2),nt=k(q);{var lt=s=>{var c=A(),h=L(c);$(h,r),m(s,c)},ct=s=>{var c=A(),h=L(c);tt(h,e,"default",{}),m(s,c)};T(nt,s=>{r()?s(lt):s(ct,!1)})}p(q);var dt=D(q,2);{var ut=s=>{var c=Ot(),h=k(c);{var S=_=>{var M=A(),H=L(M);$(H,f),m(_,M)},x=_=>{var M=A(),H=L(M);tt(H,e,"footer",{}),m(_,M)};T(h,_=>{f()?_(S):_(x,!1)})}p(c),m(s,c)};T(dt,s=>{u()&&s(ut)})}p(W);var ft=D(W,2);{var mt=s=>{var c=Vt();c.__click=function(...S){var x;(x=w())==null||x.apply(this,S)};var h=k(c);Pt(h,{class:"mc-status-notification-closable__icon","aria-hidden":"true"}),p(c),m(s,c)};T(ft,s=>{d()&&s(mt)})}return p(j),N(s=>Q=C(j,1,"mc-status-notification svelte-18b6syz",null,Q,s),[()=>({"mc-status-notification--success":n()==="success","mc-status-notification--warning":n()==="warning","mc-status-notification--error":n()==="error"})]),m(v,j),P(E)}Et(["click"]);customElements.define("m-status-notification",B(Ht,{title:{},children:{},status:{},closable:{},hasfooter:{},footer:{},closelabel:{},titletag:{},onclose:{}},["default","footer"],[],!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;}.mc-status-notification.svelte-18b6syz {border-radius:var(--radius-m, 0.5rem);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);display:flex;flex-flow:row wrap;align-items:flex-start;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":"gjBAmCO,SAASA,GAAQC,EAAMC,EAASC,EAAQC,EAAWC,EAAeC,EAAU,CAClF,IAAIC,EAAgBC,EAEhBA,GACHC,EAAY,EAMb,IAAIC,EAGAC,EAGAX,EAAU,KAEVQ,GAAaI,EAAa,WAAaC,KAC1Cb,EAAkCY,EAClCH,EAAY,GAGb,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,IACf,CAAC,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,GAAW,CAAE,EAGrEpB,IACCkB,IAAiB,KACpBG,EAAc,EAAK,EAEnBC,EAAiBJ,CAAY,GAQ/BtB,EAAUJ,EAAS0B,CAAY,CAChC,CAGuBK,GAAe,UAAY/B,EAElDc,EAAO,OAAOd,CAAO,CACtB,CAAC,GAGFU,EAAMO,EACFP,IAAKC,EAAcD,GAIxB,EAAGsB,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,iRAGEJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,uhBCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,MAAM,iRAGEJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,slBCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,MAAM,iRAGEJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,0gBCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,MAAM,iRAGEJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E;;;;;;67ECPA,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,mJApB7B,cAAa,qDACX,GAAK,uDACJ,GAAK,0GAEJ,QAAO,qDACT,KAAI,+PAkCSK,EAAQ,GAAA,CAAAY,EAAAC,IAAA,6EAC5BtB,EAAK,CAAA,CAAA,2BAFJA,EAAK,GAAAuB,EAAAC,EAAA,0DAOGrB,CAAQ,wEADdA,EAAQ,EAAAoB,EAAAE,EAAA,EAAAF,EAAAG,GAAA,EAAA,qFAUAnB,CAAM,qEADZA,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,uBAPlD","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 class=\"mc-status-notification__icon\" aria-hidden=\"true\" />\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 class=\"mc-status-notification-closable__icon\" aria-hidden=\"true\" />\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":";;wgcAAA,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,0VAiD5BD,4GAJRZ,EAAQ,GAAAc,EAAAC,CAAA,gBAjBFC,GAAAC,EAAAC,GAAAjB,QAAAA,CAAO,kBAFV,oDAAqDF,GAAM,2BAStBJ,GAAK,MAE7CG,GAAW,eAdlB"}

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,IA0BX,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"}