@mozaic-ds/web-components 1.4.0 → 1.5.1

package/dist/components/checklistmenu/CheckListMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckListMenu.js","sources":["../../../src/components/checklistmenu/CheckListMenu.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-check-list-menu',\n    props: {\n      selected: { reflect: true, type: 'Number', attribute: 'selected' },\n      outlined: { reflect: true, type: 'Boolean', attribute: 'outlined' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { CheckCircleFilled24 } from '@mozaic-ds/icons-svelte';\n  import MBuiltInMenu from '../builtinmenu/BuiltInMenu.svelte';\n  import MBuiltInMenuItem from '../builtinmenuitem/BuiltInMenuItem.svelte';\n\n  type CheckListMenuItem = {\n    label: string;\n    href?: string;\n    target?: '_self' | '_blank' | '_parent' | '_top';\n    checked: boolean;\n  };\n\n  /**\n   * A check-list menu is a structured vertical list where each item represents a distinct section of content. It enables users to navigate through and validate different parts of an interface in any order. Unlike linear steppers, this component offers flexibility by allowing non-sequential completion, making it ideal for user profile setup, application settings, or flexible onboarding processes where users can choose their own path through the experience.\n   */\n  interface Props {\n    /**\n     * Defines the menu items, each of which sets a checked state and act as a button, link, or router-link.\n     */\n    items: CheckListMenuItem[];\n    /**\n     * Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use.\n     */\n    selected?: number;\n    /**\n     * When enabled, adds a visible border around the wrapper to highlight or separate its content.\n     */\n    outlined?: boolean;\n  }\n\n  let { selected = $bindable(), items, outlined }: Props = $props();\n</script>\n\n<MBuiltInMenu {selected} {outlined}>\n  {#each items as item, index (index)}\n    {@const tag = item.href ? 'a' : 'button'}\n    <MBuiltInMenuItem\n      label={item.label}\n      href={item.href}\n      target={item.target}\n      selected={selected === index}\n      role={tag === 'button' ? 'menuitem' : undefined}\n      onclick={() => (selected = index)}\n    >\n      {#snippet icon()}\n        {#if item.checked}\n          <span\n            class={{\n              'mc-check-list-menu__icon': true,\n              'mc-check-list-menu__icon--selected': selected === index,\n            }}\n          >\n            <CheckCircleFilled24 />\n          </span>\n        {/if}\n      {/snippet}\n    </MBuiltInMenuItem>\n  {/each}\n</MBuiltInMenu>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/built-in-menu/t.built-in-menu' as menu;\n\n  .mc-check-list-menu__icon {\n    @include menu.set-default-icon();\n\n    &--selected {\n      @include menu.set-selected-icon();\n    }\n  }\n</style>\n"],"names":["selected","$.prop","$$props","items","outlined","MBuiltInMenu","$$anchor","$.each","node","item","index","tag","icon","span","root_4","node_2","$.child","CheckCircleFilled24","$.reset","$.append","$.get","$$render","consequent","$0","$.derived","$1","MBuiltInMenuItem"],"mappings":";;kOAUA,oBA8BQA,EAAQC,EAAAC,EAAA,WAAA,EAAA,EAAgBC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAQH,EAAAC,EAAA,WAAA,CAAA,mKAG9CG,OAAAA,EAAYC,EAAA,uBAAEN,EAAQ,yBAAGI,EAAQ,qCACzBG,EAAAC,EAAA,GAAAL,OAASM,EAAIC,IAAA,CACV,MAAAC,UAAMF,CAAI,EAAC,KAAO,IAAM,QAAQ,SAS5BG,EAAIN,GAAA,6BAET,IAAAO,EAAAC,EAAA,EAAAC,EAAAC,EAAAH,CAAA,EAMEI,EAAmBF,EAAA,EAAA,EANrBG,EAAAL,CAAA,UAAAA,OAEG,2BAA4B,GAC5B,qCAAsCb,EAAQ,IAAKU,uBAHtDS,EAAAb,EAAAO,CAAA,WADEO,EAAAX,CAAI,EAAC,SAAOY,EAAAC,CAAA,YALT,IAAAC,EAAAC,EAAA,IAAAxB,EAAQ,IAAKU,CAAK,EACtBe,EAAAD,EAAA,IAAAJ,EAAAT,CAAG,IAAK,SAAW,WAAa,MAAS,EALhDe,EAAApB,EAAA,aACQ,OAAAc,EAAAX,CAAI,EAAC,kBACN,OAAAW,EAAAX,CAAI,EAAC,mBACH,OAAAW,EAAAX,CAAI,EAAC,4DAGG,QAAA,IAAAT,EAAWU,CAAK,EAEtB,KAAAE,4DAbR"}
+{"version":3,"file":"CheckListMenu.js","sources":["../../../src/components/checklistmenu/CheckListMenu.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-check-list-menu',\n    props: {\n      selected: { reflect: true, type: 'Number', attribute: 'selected' },\n      outlined: { reflect: true, type: 'Boolean', attribute: 'outlined' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { CheckCircleFilled24 } from '@mozaic-ds/icons-svelte';\n  import '../builtinmenu/BuiltInMenu.svelte';\n  import '../builtinmenuitem/BuiltInMenuItem.svelte';\n\n  type CheckListMenuItem = {\n    label: string;\n    href?: string;\n    target?: '_self' | '_blank' | '_parent' | '_top';\n    checked: boolean;\n  };\n\n  /**\n   * A check-list menu is a structured vertical list where each item represents a distinct section of content. It enables users to navigate through and validate different parts of an interface in any order. Unlike linear steppers, this component offers flexibility by allowing non-sequential completion, making it ideal for user profile setup, application settings, or flexible onboarding processes where users can choose their own path through the experience.\n   */\n  interface Props {\n    /**\n     * Defines the menu items, each of which sets a checked state and act as a button, link, or router-link.\n     */\n    items: CheckListMenuItem[];\n    /**\n     * Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use.\n     */\n    selected?: number;\n    /**\n     * When enabled, adds a visible border around the wrapper to highlight or separate its content.\n     */\n    outlined?: boolean;\n  }\n\n  let { selected = $bindable(), items, outlined }: Props = $props();\n</script>\n\n<m-built-in-menu {selected} {outlined}>\n  {#each items as item, index (index)}\n    {@const tag = item.href ? 'a' : 'button'}\n    <m-built-in-menu-item\n      slot=\"item\"\n      label={item.label}\n      href={item.href}\n      target={item.target}\n      selected={selected === index}\n      role={tag === 'button' ? 'menuitem' : undefined}\n      onclick={() => (selected = index)}\n    >\n      {#if item.checked}\n        <span\n          slot=\"icon\"\n          class={{\n            'mc-check-list-menu__icon': true,\n            'mc-check-list-menu__icon--selected': selected === index,\n          }}\n        >\n          <CheckCircleFilled24 />\n        </span>\n      {/if}\n    </m-built-in-menu-item>\n  {/each}\n</m-built-in-menu>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/built-in-menu/t.built-in-menu' as menu;\n\n  .mc-check-list-menu__icon {\n    @include menu.set-default-icon();\n\n    &--selected {\n      @include menu.set-selected-icon();\n    }\n  }\n</style>\n"],"names":["selected","$.prop","$$props","items","outlined","m_built_in_menu","root","$.template_effect","$.set_custom_element_data","$.index","$$anchor","item","index","tag","m_built_in_menu_item","root_1","$.get","span","root_2","node_1","$.child","CheckCircleFilled24","$.reset","$.append","$$render","consequent"],"mappings":";;kOAUA,oBA8BQA,EAAQC,EAAAC,EAAA,WAAA,EAAA,EAAgBC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAQH,EAAAC,EAAA,WAAA,CAAA,mKAG9CG,EAAeC,EAAA,EAAfC,OAAAA,EAAA,IAAAC,EAAAH,aAAiBL,EAAQ,CAAA,CAAA,EAAzBO,EAAA,IAAAC,EAAAH,aAA4BD,EAAQ,CAAA,CAAA,IAApCC,EAAe,GACPF,EAAKM,EAAA,CAAAC,EAAIC,EAAIC,IAAA,CACV,MAAAC,UAAMF,CAAI,EAAC,KAAO,IAAM,QAAQ,MACvCG,EAAgBC,EAAA,IAAhBD,EAAgB,OAAA,MAAA,UAAhBA,EAAgB,QAAAE,EAERL,CAAI,EAAC,KAAK,CAAA,UAFlBG,EAAgB,OAAAE,EAGTL,CAAI,EAAC,IAAI,CAAA,UAHhBG,EAAgB,SAAAE,EAIPL,CAAI,EAAC,MAAM,CAAA,UAJpBG,EAAgB,WAKLd,EAAQ,IAAKY,CAAK,CAAA,EAL7BL,EAAA,IAAAC,EAAAM,WAMOD,CAAG,IAAK,SAAW,WAAa,MAAS,CAAA,EANhDC,EAOC,QAAO,IAASd,EAAWY,CAAK,UAPjCE,CAAgB,aAUZ,IAAAG,EAAAC,EAAA,EAAAC,EAAAC,EAAAH,CAAA,EAOEI,EAAmBF,EAAA,EAAA,EAPrBG,EAAAL,CAAA,UAAAA,OAGG,2BAA4B,GAC5B,qCAAsCjB,EAAQ,IAAKY,uBAJtDW,EAAAb,EAAAO,CAAA,WADED,EAAAL,CAAI,EAAC,SAAOa,EAAAC,CAAA,MATlBX,CAAgB,MAAhBA,CAAgB,MAHpBT,CAAe,MAAfA,CAAe,MAFR"}

package/dist/components/checklistmenu/CheckListMenu.spec.js

@@ -9,12 +9,12 @@ const items = [
 describe('CheckListMenu component', () => {
     it('renders the correct number of menu items', () => {
         const { container } = render(CheckListMenu, { props: { items, selected: 0 } });
-        const menuItems = container.querySelectorAll('.mc-built-in-menu__item');
+        const menuItems = container.querySelectorAll('m-built-in-menu-item');
         expect(menuItems.length).toBe(items.length);
     });
     it('passes href attributes to items with links', () => {
         const { container } = render(CheckListMenu, { props: { items, selected: undefined } });
-        const linked = container.querySelector('.mc-built-in-menu__item a[href="/two"]');
+        const linked = container.querySelector('m-built-in-menu-item[href="/two"]');
         expect(linked).not.toBe(undefined);
     });
     it('renders icons for checked items and marks the selected one', () => {
@@ -25,7 +25,7 @@ describe('CheckListMenu component', () => {
     });
     it('updates selected state when an item is clicked', async () => {
         const { container } = render(CheckListMenu, { props: { items, selected: 0 } });
-        const menuItems = container.querySelectorAll('.mc-built-in-menu__item');
+        const menuItems = container.querySelectorAll('m-built-in-menu-item');
         expect(menuItems[0].getAttribute('selected')).not.toBe(undefined);
         await fireEvent.click(menuItems[1]);
         expect(menuItems[1].getAttribute('selected')).not.toBe(undefined);

package/dist/components/checklistmenu/CheckListMenu.svelte

@@ -10,8 +10,8 @@
 
 <script lang="ts">
   import { CheckCircleFilled24 } from '@mozaic-ds/icons-svelte';
-  import MBuiltInMenu from '../builtinmenu/BuiltInMenu.svelte';
-  import MBuiltInMenuItem from '../builtinmenuitem/BuiltInMenuItem.svelte';
+  import '../builtinmenu/BuiltInMenu.svelte';
+  import '../builtinmenuitem/BuiltInMenuItem.svelte';
 
   type CheckListMenuItem = {
     label: string;
@@ -41,10 +41,11 @@
   let { selected = $bindable(), items, outlined }: Props = $props();
 </script>
 
-<MBuiltInMenu {selected} {outlined}>
+<m-built-in-menu {selected} {outlined}>
   {#each items as item, index (index)}
     {@const tag = item.href ? 'a' : 'button'}
-    <MBuiltInMenuItem
+    <m-built-in-menu-item
+      slot="item"
       label={item.label}
       href={item.href}
       target={item.target}
@@ -52,21 +53,20 @@
       role={tag === 'button' ? 'menuitem' : undefined}
       onclick={() => (selected = index)}
     >
-      {#snippet icon()}
-        {#if item.checked}
-          <span
-            class={{
-              'mc-check-list-menu__icon': true,
-              'mc-check-list-menu__icon--selected': selected === index,
-            }}
-          >
-            <CheckCircleFilled24 />
-          </span>
-        {/if}
-      {/snippet}
-    </MBuiltInMenuItem>
+      {#if item.checked}
+        <span
+          slot="icon"
+          class={{
+            'mc-check-list-menu__icon': true,
+            'mc-check-list-menu__icon--selected': selected === index,
+          }}
+        >
+          <CheckCircleFilled24 />
+        </span>
+      {/if}
+    </m-built-in-menu-item>
   {/each}
-</MBuiltInMenu>
+</m-built-in-menu>
 
 <style>/**
  * Do not edit directly, this file was auto-generated.

package/dist/components/checklistmenu/CheckListMenu.svelte.d.ts

@@ -1,3 +1,5 @@
+import '../builtinmenu/BuiltInMenu.svelte';
+import '../builtinmenuitem/BuiltInMenuItem.svelte';
 type CheckListMenuItem = {
     label: string;
     href?: string;

package/dist/components/checklistmenu/CheckListMenu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckListMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/checklistmenu/CheckListMenu.svelte.ts"],"names":[],"mappings":"AAQE,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAyCH,QAAA,MAAM,aAAa,mDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CheckListMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/checklistmenu/CheckListMenu.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,mCAAmC,CAAC;AAC3C,OAAO,2CAA2C,CAAC;AAGjD,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuCH,QAAA,MAAM,aAAa,mDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/circularprogressbar/CircularProgressbar.js

@@ -1,6 +1,6 @@
-import{c as S,p as q,a as A,b as l,s as z,d as a,f as g,g as F,h as m,i as G,j as i,t as f,r as t,aC as H,e as h}from"../../custom-element.js";import{i as w}from"../../if.js";import{a as I}from"../../attributes.js";var J=m('<div class="mc-circular-progressbar__percentage svelte-oy9ecz"><p class="mc-circular-progressbar__value svelte-oy9ecz"> </p> <p class="mc-circular-progressbar__unit svelte-oy9ecz">%</p></div>'),K=m('<p class="mc-circular-progressbar__text svelte-oy9ecz"> </p>'),N=m('<div class="mc-circular-progressbar__content svelte-oy9ecz"><p class="mc-circular-progressbar__number svelte-oy9ecz"> </p> <!></div>'),O=m('<div><svg class="mc-circular-progressbar__line svelte-oy9ecz" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 100 100"><circle class="mc-circular-progressbar__track svelte-oy9ecz" cx="50" cy="50" r="46"></circle><circle class="mc-circular-progressbar__indicator svelte-oy9ecz" cx="50" cy="50" r="46"></circle></svg> <!> <!></div>');const Q={hash:"svelte-oy9ecz",code:`/**
+import{c as P,p as S,a as q,b as i,s as z,d as a,f as g,g as A,h as m,i as F,j as l,t as f,r as t,aH as G,e as h}from"../../custom-element.js";import{i as w}from"../../if.js";import{a as I}from"../../attributes.js";import"../../branches.js";var J=m('<div class="mc-circular-progressbar__percentage svelte-oy9ecz"><p class="mc-circular-progressbar__value svelte-oy9ecz"> </p> <p class="mc-circular-progressbar__unit svelte-oy9ecz">%</p></div>'),K=m('<p class="mc-circular-progressbar__text svelte-oy9ecz"> </p>'),N=m('<div class="mc-circular-progressbar__content svelte-oy9ecz"><p class="mc-circular-progressbar__number svelte-oy9ecz"> </p> <!></div>'),O=m('<div><svg class="mc-circular-progressbar__line svelte-oy9ecz" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 100 100"><circle class="mc-circular-progressbar__track svelte-oy9ecz" cx="50" cy="50" r="46"></circle><circle class="mc-circular-progressbar__indicator svelte-oy9ecz" cx="50" cy="50" r="46"></circle></svg> <!> <!></div>');const Q={hash:"svelte-oy9ecz",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-circular-progressbar.svelte-oy9ecz {--progress-value: 40;font-family:var(--font-family, LeroyMerlin), sans-serif;color:var(--progressbar-color-text, #000000);position:relative;display:inline-block;width:9rem;height:9rem;border-radius:50%;}.mc-circular-progressbar__line.svelte-oy9ecz {transform:rotate(270deg);}.mc-circular-progressbar__track.svelte-oy9ecz, .mc-circular-progressbar__indicator.svelte-oy9ecz {stroke-width:calc(8 / (144 / 100));fill:none;stroke-linecap:round;}.mc-circular-progressbar__track.svelte-oy9ecz {stroke:var(--progressbar-color-background, #c9d0de);}.mc-circular-progressbar__indicator.svelte-oy9ecz {stroke:var(--progressbar-color-indicator, #464e63);stroke-dasharray:289.1428571429;stroke-dashoffset:calc((100 - var(--progress-value)) / 100 * 289.1428571429);transition:stroke-dashoffset 0.3s ease;}.mc-circular-progressbar__content.svelte-oy9ecz {display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;margin:0;top:50%;left:50%;transform:translate(-50%, -50%);}.mc-circular-progressbar__number.svelte-oy9ecz, .mc-circular-progressbar__text.svelte-oy9ecz {white-space:nowrap;text-align:center;line-height:var(--line-height-s, 1.3);margin:0;color:var(--progressbar-color-text, #000000);}.mc-circular-progressbar__number.svelte-oy9ecz {font-size:var(--font-size-300, 1.5rem);}.mc-circular-progressbar__text.svelte-oy9ecz {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);}.mc-circular-progressbar__percentage.svelte-oy9ecz {display:flex;justify-content:center;align-items:center;position:absolute;margin:0;top:50%;left:50%;transform:translate(-50%, -50%);}.mc-circular-progressbar__value.svelte-oy9ecz, .mc-circular-progressbar__unit.svelte-oy9ecz {font-weight:var(--font-weight-semi-bold, 600);line-height:var(--line-height-s, 1.3);color:var(--progressbar-color-text, #000000);}.mc-circular-progressbar__value.svelte-oy9ecz {font-size:var(--font-size-600, 2.5rem);}.mc-circular-progressbar__unit.svelte-oy9ecz {font-size:var(--font-size-300, 1.5rem);}.mc-circular-progressbar--m.svelte-oy9ecz .mc-circular-progressbar__content:where(.svelte-oy9ecz), .mc-circular-progressbar--s.svelte-oy9ecz .mc-circular-progressbar__content:where(.svelte-oy9ecz) {display:none;}.mc-circular-progressbar--m.svelte-oy9ecz .mc-circular-progressbar__percentage:where(.svelte-oy9ecz), .mc-circular-progressbar--s.svelte-oy9ecz .mc-circular-progressbar__percentage:where(.svelte-oy9ecz) {display:none;}.mc-circular-progressbar--m.svelte-oy9ecz::after, .mc-circular-progressbar--s.svelte-oy9ecz::after {display:none;}.mc-circular-progressbar--m.svelte-oy9ecz .mc-circular-progressbar__track:where(.svelte-oy9ecz),
 .mc-circular-progressbar--m.svelte-oy9ecz .mc-circular-progressbar__indicator:where(.svelte-oy9ecz) {stroke-width:calc(4 / (48 / 100));}.mc-circular-progressbar--m.svelte-oy9ecz {width:3rem;height:3rem;}.mc-circular-progressbar--s.svelte-oy9ecz .mc-circular-progressbar__track:where(.svelte-oy9ecz),
-.mc-circular-progressbar--s.svelte-oy9ecz .mc-circular-progressbar__indicator:where(.svelte-oy9ecz) {stroke-width:calc(4 / (32 / 100));transform-origin:center;transform:scale(0.95);}.mc-circular-progressbar--s.svelte-oy9ecz {width:2rem;height:2rem;}`};function R(x,r){q(r,!0),A(x,Q);let n=l(r,"size",7),o=l(r,"value",7,0),v=l(r,"type",7,"percentage"),_=l(r,"contentvalue",7),u=l(r,"additionalinfo",7),j=G(r,["$$slots","$$events","$$legacy","$$host","size","value","type","contentvalue","additionalinfo"]);var C={get size(){return n()},set size(e){n(e),i()},get value(){return o()},set value(e=0){o(e),i()},get type(){return v()},set type(e="percentage"){v(e),i()},get contentvalue(){return _()},set contentvalue(e){_(e),i()},get additionalinfo(){return u()},set additionalinfo(e){u(e),i()}},p=O();I(p,()=>({class:["mc-circular-progressbar",n()&&`mc-circular-progressbar--${n()}`],role:"progressbar","aria-valuenow":o(),"aria-valuemin":"0","aria-valuemax":"100",style:`--progress-value: ${o()};`,...j}),void 0,void 0,void 0,"svelte-oy9ecz");var k=z(a(p),2);{var B=e=>{var s=J(),c=a(s),y=a(c,!0);t(c),H(2),t(s),f(()=>h(y,o())),g(e,s)};w(k,e=>{v()==="percentage"&&e(B)})}var D=z(k,2);{var E=e=>{var s=N(),c=a(s),y=a(c,!0);t(c);var L=z(c,2);{var M=b=>{var d=K(),P=a(d,!0);t(d),f(()=>h(P,u())),g(b,d)};w(L,b=>{u()&&b(M)})}t(s),f(()=>h(y,_())),g(e,s)};w(D,e=>{v()==="content"&&e(E)})}return t(p),g(x,p),F(C)}customElements.define("m-circular-progressbar",S(R,{size:{},value:{},type:{},contentvalue:{},additionalinfo:{}},[],[],!0));export{R as C};
+.mc-circular-progressbar--s.svelte-oy9ecz .mc-circular-progressbar__indicator:where(.svelte-oy9ecz) {stroke-width:calc(4 / (32 / 100));transform-origin:center;transform:scale(0.95);}.mc-circular-progressbar--s.svelte-oy9ecz {width:2rem;height:2rem;}`};function R(x,r){S(r,!0),q(x,Q);let n=i(r,"size",7),o=i(r,"value",7,0),v=i(r,"type",7,"percentage"),_=i(r,"contentvalue",7),p=i(r,"additionalinfo",7),j=F(r,["$$slots","$$events","$$legacy","$$host","size","value","type","contentvalue","additionalinfo"]);var C={get size(){return n()},set size(e){n(e),l()},get value(){return o()},set value(e=0){o(e),l()},get type(){return v()},set type(e="percentage"){v(e),l()},get contentvalue(){return _()},set contentvalue(e){_(e),l()},get additionalinfo(){return p()},set additionalinfo(e){p(e),l()}},u=O();I(u,()=>({class:["mc-circular-progressbar",n()&&`mc-circular-progressbar--${n()}`],role:"progressbar","aria-valuenow":o(),"aria-valuemin":"0","aria-valuemax":"100",style:`--progress-value: ${o()};`,...j}),void 0,void 0,void 0,"svelte-oy9ecz");var k=z(a(u),2);{var B=e=>{var s=J(),c=a(s),y=a(c,!0);t(c),G(2),t(s),f(()=>h(y,o())),g(e,s)};w(k,e=>{v()==="percentage"&&e(B)})}var D=z(k,2);{var E=e=>{var s=N(),c=a(s),y=a(c,!0);t(c);var H=z(c,2);{var L=b=>{var d=K(),M=a(d,!0);t(d),f(()=>h(M,p())),g(b,d)};w(H,b=>{p()&&b(L)})}t(s),f(()=>h(y,_())),g(e,s)};w(D,e=>{v()==="content"&&e(E)})}return t(u),g(x,u),A(C)}customElements.define("m-circular-progressbar",P(R,{size:{},value:{},type:{},contentvalue:{},additionalinfo:{}},[],[],!0));export{R as C};
 //# sourceMappingURL=CircularProgressbar.js.map

package/dist/components/container/Container.js

@@ -1,4 +1,4 @@
-import{c as x,p as b,a as y,b as o,t as g,f as d,g as w,h as _,d as k,j as m,k as c,l as f,r as j,n as z,o as B}from"../../custom-element.js";import{s as C}from"../../snippet.js";import{i as D}from"../../if.js";import{s as E}from"../../slot.js";var S=_("<div><!></div>");const q={hash:"svelte-1oy286b",code:`/**
+import{c as o,p as s,a as r,b as m,t as u,f as c,g as p,h as f,d as h,j as v,r as x,l as b,m as y}from"../../custom-element.js";import{s as w}from"../../slot.js";var g=f("<div><!></div>");const _={hash:"svelte-1oy286b",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.ml-container.svelte-1oy286b {padding-inline:1rem;width:100%;box-sizing:border-box;margin-inline:auto;}
 @media (width >= 680px) {.ml-container.svelte-1oy286b {padding-inline:1.5rem;}
@@ -10,5 +10,5 @@ import{c as x,p as b,a as y,b as o,t as g,f as d,g as w,h as _,d as k,j as m,k a
 @media (width >= 1920px) {.ml-container.svelte-1oy286b {max-width:1480px;}
 }.ml-container--fluid.svelte-1oy286b {max-width:none;}
 @media (width >= 1024px) {.ml-container--fluid.svelte-1oy286b {padding-inline:2.5rem;}
-}`};function A(s,i){b(i,!0),y(s,q);let l=o(i,"fluid",7),n=o(i,"children",7);var u={get fluid(){return l()},set fluid(e){l(e),m()},get children(){return n()},set children(e){n(e),m()}},a=S(),p=k(a);{var h=e=>{var t=c(),r=f(t);C(r,n),d(e,t)},v=e=>{var t=c(),r=f(t);E(r,i,"default",{},null),d(e,t)};D(p,e=>{n()?e(h):e(v,!1)})}return j(a),g(()=>z(a,1,B(["ml-container",l()&&"ml-container--fluid"]),"svelte-1oy286b")),d(s,a),w(u)}customElements.define("m-container",x(A,{fluid:{attribute:"fluid",reflect:!0,type:"Boolean"},children:{}},["default"],[],!0));
+}`};function j(n,t){s(t,!0),r(n,_);let i=m(t,"fluid",7);var a={get fluid(){return i()},set fluid(d){i(d),v()}},e=g(),l=h(e);return w(l,t,"default",{},null),x(e),u(()=>b(e,1,y(["ml-container",i()&&"ml-container--fluid"]),"svelte-1oy286b")),c(n,e),p(a)}customElements.define("m-container",o(j,{fluid:{attribute:"fluid",reflect:!0,type:"Boolean"}},["default"],[],!0));
 //# sourceMappingURL=Container.js.map

package/dist/components/container/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","sources":["../../../src/components/container/Container.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-container',\n    props: {\n      fluid: { reflect: true, type: 'Boolean', attribute: 'fluid' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  /**\n   * The Container component is designed to wrap your page or section content, typically grids or other layout elements. By default, it centers the content with a maximum width to ensure consistent alignment and spacing.\n   *\n   * @slot default - Use this slot to insert the content of the container.\n   */\n  interface Props {\n    /**\n     * If `true`, the container will take the full width.\n     */\n    fluid?: boolean;\n    /**\n     * Use this snippet to insert the content of the container.\n     */\n    children?: Snippet;\n  }\n\n  let { fluid, children }: Props = $props();\n</script>\n\n<div class={['ml-container', fluid && 'ml-container--fluid']}>\n  {#if children}\n    {@render children()}\n  {:else}\n    <slot />\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/layouts/container';\n</style>\n"],"names":["fluid","$.prop","$$props","children","div","root","$$render","consequent","alternate","$.template_effect","$.set_class","$.clsx"],"mappings":";;;;;;;;;;;;mBASA,oBAkBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAQF,EAAAC,EAAA,WAAA,CAAA,8GAGtBE,EAAGC,EAAA,MAAHD,CAAG,kCAESD,CAAQ,0EADdA,EAAQ,EAAAG,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,aADdJ,CAAG,EAAHK,EAAA,IAAAC,EAAAN,EAAG,EAAAO,EAAA,CAAS,eAAgBX,EAAK,GAAI,qBAAqB,CAAA,EAAA,gBAAA,CAAA,MAA1DI,CAAG,MAFI"}
+{"version":3,"file":"Container.js","sources":["../../../src/components/container/Container.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-container',\n    props: {\n      fluid: { reflect: true, type: 'Boolean', attribute: 'fluid' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  /**\n   * The Container component is designed to wrap your page or section content, typically grids or other layout elements. By default, it centers the content with a maximum width to ensure consistent alignment and spacing.\n   *\n   * @slot default - Use this slot to insert the content of the container.\n   */\n  interface Props {\n    /**\n     * If `true`, the container will take the full width.\n     */\n    fluid?: boolean;\n  }\n\n  let { fluid }: Props = $props();\n</script>\n\n<div class={['ml-container', fluid && 'ml-container--fluid']}>\n  <slot />\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/layouts/container';\n</style>\n"],"names":["fluid","$.prop","$$props","div","root","$.template_effect","$.set_class","$.clsx"],"mappings":";;;;;;;;;;;;mBASA,oBAaQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,yDAGZC,EAAGC,EAAA,MAAHD,CAAG,oCAAHA,CAAG,EAAHE,EAAA,IAAAC,EAAAH,EAAG,EAAAI,EAAA,CAAS,eAAgBP,EAAK,GAAI,qBAAqB,CAAA,EAAA,gBAAA,CAAA,MAA1DG,CAAG,MAFI"}

package/dist/components/container/Container.svelte

@@ -8,7 +8,6 @@
 />
 
 <script lang="ts">
-  import type { Snippet } from 'svelte';
   /**
    * The Container component is designed to wrap your page or section content, typically grids or other layout elements. By default, it centers the content with a maximum width to ensure consistent alignment and spacing.
    *
@@ -19,21 +18,13 @@
      * If `true`, the container will take the full width.
      */
     fluid?: boolean;
-    /**
-     * Use this snippet to insert the content of the container.
-     */
-    children?: Snippet;
   }
 
-  let { fluid, children }: Props = $props();
+  let { fluid }: Props = $props();
 </script>
 
 <div class={['ml-container', fluid && 'ml-container--fluid']}>
-  {#if children}
-    {@render children()}
-  {:else}
-    <slot />
-  {/if}
+  <slot />
 </div>
 
 <style>/**

package/dist/components/container/Container.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { Snippet } from 'svelte';
 /**
  * The Container component is designed to wrap your page or section content, typically grids or other layout elements. By default, it centers the content with a maximum width to ensure consistent alignment and spacing.
  *
@@ -9,10 +8,6 @@ interface Props {
      * If `true`, the container will take the full width.
      */
     fluid?: boolean;
-    /**
-     * Use this snippet to insert the content of the container.
-     */
-    children?: Snippet;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/components/container/Container.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/container/Container.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEpC;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2BH,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,SAAS;;;;;;UAAqF,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Container.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/container/Container.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAsBH,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,SAAS;;;;;;UAAqF,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}

package/dist/components/container/README.md

@@ -7,7 +7,6 @@ The Container component is designed to wrap your page or section content, typica
 | Name | Description | Type | Default |
 |------|-------------|------|---------|
 | `fluid` | If `true`, the container will take the full width. | `boolean` |   |
-| `children` | Use this snippet to insert the content of the container. | `Snippet` |   |
 
 ## Slots
 

package/dist/components/datepicker/Datepicker.js

@@ -1,4 +1,4 @@
-import{u as Z,c as D,p as F,a as L,b as o,s as j,t as k,f as y,g as N,h as V,i as S,d as n,j as t,r as c,e as q,n as A,o as G}from"../../custom-element.js";import{i as I}from"../../if.js";import{a as J}from"../../attributes.js";import{c as K}from"../../input.js";import{c as O}from"../../custom-element-forward-events.js";import{d as P}from"../../Condition20.js";var Q=V('<div class="mc-datepicker__controls-options mc-controls-options svelte-xj4ivh"><button type="button" class="mc-controls-options__button svelte-xj4ivh"><!> <span class="mc-controls-options__label svelte-xj4ivh"> </span></button></div>'),R=V("<div><input/> <!></div>");const T={hash:"svelte-xj4ivh",code:`/**
+import{o as Z,c as D,p as F,a as L,b as o,s as j,t as k,f as y,g as N,h as V,i as S,d as n,j as t,r as c,e as q,l as A,m as G}from"../../custom-element.js";import{i as I}from"../../if.js";import{a as J}from"../../attributes.js";import{c as K}from"../../input.js";import{c as O}from"../../custom-element-forward-events.js";import{d as P}from"../../Condition20.js";import"../../branches.js";var Q=V('<div class="mc-datepicker__controls-options mc-controls-options svelte-xj4ivh"><button type="button" class="mc-controls-options__button svelte-xj4ivh"><!> <span class="mc-controls-options__label svelte-xj4ivh"> </span></button></div>'),R=V("<div><input/> <!></div>");const T={hash:"svelte-xj4ivh",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */.mc-text-input.svelte-xj4ivh {transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:0.5rem;}.mc-text-input__control.svelte-xj4ivh {background-color:transparent;border-width:0;font-family:inherit;outline:none;}.mc-text-input__control.svelte-xj4ivh {padding:0.75rem 0.6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);flex-grow:1;}.mc-text-input__control.svelte-xj4ivh::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input__icon.svelte-xj4ivh {fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0;}.mc-text-input.svelte-xj4ivh:focus-within {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-text-input.svelte-xj4ivh:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);}.mc-text-input.svelte-xj4ivh:has(input:where(.svelte-xj4ivh):disabled) {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none;}.mc-text-input.svelte-xj4ivh:has(input[readonly]:where(.svelte-xj4ivh)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-text-input.svelte-xj4ivh:has(.mc-text-input__icon:where(.svelte-xj4ivh)) {padding-inline-start:0.6875rem;}.mc-text-input.svelte-xj4ivh:has(.mc-text-input__icon:where(.svelte-xj4ivh)) .mc-text-input__control:where(.svelte-xj4ivh) {padding-inline-start:0;}.mc-text-input.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) .mc-text-input__control:where(.svelte-xj4ivh) {padding-inline-end:0;}.mc-text-input--s.svelte-xj4ivh {height:2rem;}.mc-text-input--s.svelte-xj4ivh .mc-text-input__control:where(.svelte-xj4ivh) {padding:0.375rem 0.6875rem;font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);}.mc-text-input--s.svelte-xj4ivh:has(.mc-text-input__icon:where(.svelte-xj4ivh)) {padding-inline-start:0.4375rem;}.mc-text-input--s.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) {padding-inline-end:0.4375rem;}.mc-text-input.is-invalid.svelte-xj4ivh {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);}.mc-text-input.is-invalid.svelte-xj4ivh:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}.mc-text-input.svelte-xj4ivh :where(.svelte-xj4ivh) {box-sizing:border-box;}

package/dist/components/datepicker/Datepicker.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.stories.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/Datepicker.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IA6CX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
+{"version":3,"file":"Datepicker.stories.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/Datepicker.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IA8CX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/datepicker/Datepicker.stories.js

@@ -5,6 +5,7 @@ import './Datepicker.svelte';
 const meta = {
     title: 'Form Elements/Datepicker',
     component: 'm-datepicker',
+    subcomponents: { 'Field': 'm-field' },
     tags: ['v2'],
     argTypes: {
         size: {

package/dist/components/divider/Divider.js

@@ -1,4 +1,4 @@
-import{c as _,p as k,a as x,b as s,s as D,t as w,f as l,g as j,h as E,i as S,d as Y,j as o,k as h,l as p,r as q,n as A,o as B}from"../../custom-element.js";import{s as C}from"../../snippet.js";import{i as F}from"../../if.js";import{s as G}from"../../slot.js";import{a as H}from"../../attributes.js";var I=E("<div><div></div> <!></div>");const J={hash:"svelte-a5fs23",code:`/**
+import{c as f,p as h,a as p,b as o,s as u,t as g,f as y,g as z,h as b,i as k,d as _,j as d,r as x,l as D,m as $}from"../../custom-element.js";import{s as w}from"../../slot.js";import{a as j}from"../../attributes.js";var E=b("<div><div></div> <!></div>");const S={hash:"svelte-a5fs23",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-divider.svelte-a5fs23 {position:relative;}.mc-divider-horizontal.svelte-a5fs23 {background:var(--divider-color-primary, #cccccc);height:0.0625rem;}.mc-divider-horizontal--secondary.svelte-a5fs23 {background:var(--divider-color-secondary, #999999);}.mc-divider-horizontal--tertiary.svelte-a5fs23 {background:var(--divider-color-tertiary, #333333);}.mc-divider-horizontal--inverse.svelte-a5fs23 {background:var(--divider-color-inverse, #ffffff);}.mc-divider-horizontal--m.svelte-a5fs23 {height:0.25rem;}.mc-divider-horizontal--l.svelte-a5fs23 {height:0.5rem;}.mc-divider-vertical.svelte-a5fs23 {background:var(--divider-color-primary, #cccccc);width:0.0625rem;}.mc-divider-vertical--secondary.svelte-a5fs23 {background:var(--divider-color-secondary, #999999);}.mc-divider-vertical--tertiary.svelte-a5fs23 {background:var(--divider-color-tertiary, #333333);}.mc-divider-vertical--inverse.svelte-a5fs23 {background:var(--divider-color-inverse, #ffffff);}.mc-divider-vertical--m.svelte-a5fs23 {height:0.25rem;}.mc-divider-vertical--l.svelte-a5fs23 {height:0.5rem;}.mc-divider-vertical.svelte-a5fs23 {content:"";display:block;height:100%;position:absolute;top:50%;transform:translateY(-50%);}`};function K(f,r){k(r,!0),x(f,J);let d=s(r,"orientation",7,"horizontal"),c=s(r,"appearance",7,"primary"),v=s(r,"size",7,"s"),a=s(r,"children",7),u=S(r,["$$slots","$$events","$$legacy","$$host","orientation","appearance","size","children"]);var g={get orientation(){return d()},set orientation(e="horizontal"){d(e),o()},get appearance(){return c()},set appearance(e="primary"){c(e),o()},get size(){return v()},set size(e="s"){v(e),o()},get children(){return a()},set children(e){a(e),o()}},t=I();H(t,()=>({class:"mc-divider",...u}),void 0,void 0,void 0,"svelte-a5fs23");var m=Y(t),y=D(m,2);{var z=e=>{var i=h(),n=p(i);C(n,a),l(e,i)},b=e=>{var i=h(),n=p(i);G(n,r,"default",{},null),l(e,i)};F(y,e=>{a()?e(z):e(b,!1)})}return q(t),w(()=>A(m,1,B([`mc-divider-${d()}`,`mc-divider-horizontal--${c()}`,`mc-divider-horizontal--${v()}`]),"svelte-a5fs23")),l(f,t),j(g)}customElements.define("m-divider",_(K,{orientation:{},appearance:{},size:{},children:{}},["default"],[],!0));export{K as D};
+ */.mc-divider.svelte-a5fs23 {position:relative;}.mc-divider-horizontal.svelte-a5fs23 {background:var(--divider-color-primary, #cccccc);height:0.0625rem;}.mc-divider-horizontal--secondary.svelte-a5fs23 {background:var(--divider-color-secondary, #999999);}.mc-divider-horizontal--tertiary.svelte-a5fs23 {background:var(--divider-color-tertiary, #333333);}.mc-divider-horizontal--inverse.svelte-a5fs23 {background:var(--divider-color-inverse, #ffffff);}.mc-divider-horizontal--m.svelte-a5fs23 {height:0.25rem;}.mc-divider-horizontal--l.svelte-a5fs23 {height:0.5rem;}.mc-divider-vertical.svelte-a5fs23 {background:var(--divider-color-primary, #cccccc);width:0.0625rem;}.mc-divider-vertical--secondary.svelte-a5fs23 {background:var(--divider-color-secondary, #999999);}.mc-divider-vertical--tertiary.svelte-a5fs23 {background:var(--divider-color-tertiary, #333333);}.mc-divider-vertical--inverse.svelte-a5fs23 {background:var(--divider-color-inverse, #ffffff);}.mc-divider-vertical--m.svelte-a5fs23 {height:0.25rem;}.mc-divider-vertical--l.svelte-a5fs23 {height:0.5rem;}.mc-divider-vertical.svelte-a5fs23 {content:"";display:block;height:100%;position:absolute;top:50%;transform:translateY(-50%);}`};function Y(c,e){h(e,!0),p(c,S);let a=o(e,"orientation",7,"horizontal"),t=o(e,"appearance",7,"primary"),s=o(e,"size",7,"s"),l=k(e,["$$slots","$$events","$$legacy","$$host","orientation","appearance","size"]);var n={get orientation(){return a()},set orientation(r="horizontal"){a(r),d()},get appearance(){return t()},set appearance(r="primary"){t(r),d()},get size(){return s()},set size(r="s"){s(r),d()}},i=E();j(i,()=>({class:"mc-divider",...l}),void 0,void 0,void 0,"svelte-a5fs23");var v=_(i),m=u(v,2);return w(m,e,"default",{},null),x(i),g(()=>D(v,1,$([`mc-divider-${a()}`,`mc-divider-horizontal--${t()}`,`mc-divider-horizontal--${s()}`]),"svelte-a5fs23")),y(c,i),z(n)}customElements.define("m-divider",f(Y,{orientation:{},appearance:{},size:{}},["default"],[],!0));export{Y as D};
 //# sourceMappingURL=Divider.js.map

package/dist/components/divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../../../src/components/divider/Divider.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-divider' }} />\n\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  /**\n   * A divider is a visual element used to separate content or sections within an interface. It helps improve readability and organization by creating clear distinctions between groups of information. Dividers can be thin lines, thick separators, or even styled with spacing variations, adapting to different layouts. They are commonly used in menus, lists, forms, and content blocks to create a structured visual hierarchy.\n   *\n   * @slot default - Use this slot to insert the content who need a vertical divider\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Determines the orientation of the divider.\n     */\n    orientation?: 'vertical' | 'horizontal';\n    /**\n     * Determines the appearance of the divider.\n     */\n    appearance?: 'primary' | 'secondary' | 'tertiary' | 'inverse';\n    /**\n     * Determines the size of the divider.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * Use this snippet to insert the content who need a vertical divider\n     */\n    children?: Snippet;\n  }\n\n  let {\n    orientation = 'horizontal',\n    appearance = 'primary',\n    size = 's',\n    children,\n    ...attrs\n  }: Props = $props();\n</script>\n\n<div class=\"mc-divider\" {...attrs}>\n  <div\n    class={[\n      `mc-divider-${orientation}`,\n      `mc-divider-horizontal--${appearance}`,\n      `mc-divider-horizontal--${size}`,\n    ]}\n  ></div>\n  {#if children}\n    {@render children()}\n  {:else}\n    <slot />\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/divider';\n\n  .mc-divider-vertical {\n    content: '';\n    display: block;\n    height: 100%;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n</style>\n"],"names":["orientation","appearance","size","children","$.prop","$$props","attrs","$.rest_props","div","root","$.attribute_effect","div_1","$.child","node","$.sibling","$$render","consequent","alternate"],"mappings":";;2rCAEA,gBA4BI,IAAAA,sBAAc,YAAY,EAC1BC,qBAAa,SAAS,EACtBC,eAAO,GAAG,EACVC,EAAQC,EAAAC,EAAA,WAAA,CAAA,EACLC,EAAAC,EAAAF,EAAA,gJAJW,aAAY,yDACb,UAAS,6CACf,IAAG,iEAMbG,EAAGC,EAAA,EAAHC,EAAAF,8BAA2BF,CAAK,GAAA,OAAA,OAAA,OAAA,eAAA,EAC9B,IAAAK,EAAAC,EADFJ,CAAG,EACDK,EAAAC,EAAAH,EAAA,CAAA,kCAQUR,CAAQ,0EADdA,EAAQ,EAAAY,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,aARdT,CAAG,UACDG,qBAEiBX,EAAW,CAAA,6BACCC,EAAU,CAAA,6BACVC,GAAI,2BALnCM,CAAG,MAFI"}
+{"version":3,"file":"Divider.js","sources":["../../../src/components/divider/Divider.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-divider' }} />\n\n<script lang=\"ts\">\n  /**\n   * A divider is a visual element used to separate content or sections within an interface. It helps improve readability and organization by creating clear distinctions between groups of information. Dividers can be thin lines, thick separators, or even styled with spacing variations, adapting to different layouts. They are commonly used in menus, lists, forms, and content blocks to create a structured visual hierarchy.\n   *\n   * @slot default - Use this slot to insert the content who need a vertical divider\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Determines the orientation of the divider.\n     */\n    orientation?: 'vertical' | 'horizontal';\n    /**\n     * Determines the appearance of the divider.\n     */\n    appearance?: 'primary' | 'secondary' | 'tertiary' | 'inverse';\n    /**\n     * Determines the size of the divider.\n     */\n    size?: 's' | 'm' | 'l';\n  }\n\n  let { orientation = 'horizontal', appearance = 'primary', size = 's', ...attrs }: Props = $props();\n</script>\n\n<div class=\"mc-divider\" {...attrs}>\n  <div\n    class={[\n      `mc-divider-${orientation}`,\n      `mc-divider-horizontal--${appearance}`,\n      `mc-divider-horizontal--${size}`,\n    ]}\n  ></div>\n  <slot />\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/divider';\n\n  .mc-divider-vertical {\n    content: '';\n    display: block;\n    height: 100%;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n</style>\n"],"names":["orientation","appearance","size","attrs","$.rest_props","$$props","div","root","$.attribute_effect","div_1","$.child","node","$.sibling"],"mappings":";;2rCAEA,gBAsBQ,IAAAA,sBAAc,YAAY,EAAEC,qBAAa,SAAS,EAAEC,eAAO,GAAG,EAAKC,EAAKC,EAAAC,EAAA,qIAA1D,aAAY,yDAAe,UAAS,6CAAS,IAAG,YAGrEC,EAAGC,EAAA,EAAHC,EAAAF,8BAA2BH,CAAK,GAAA,OAAA,OAAA,OAAA,eAAA,EAC9B,IAAAM,EAAAC,EADFJ,CAAG,EACDK,EAAAC,EAAAH,EAAA,CAAA,oCADFH,CAAG,UACDG,qBAEiBT,EAAW,CAAA,6BACCC,EAAU,CAAA,6BACVC,GAAI,2BALnCI,CAAG,MAFI"}

package/dist/components/divider/Divider.svelte

@@ -1,7 +1,6 @@
 <svelte:options customElement={{ tag: 'm-divider' }} />
 
 <script lang="ts">
-  import type { Snippet } from 'svelte';
   /**
    * A divider is a visual element used to separate content or sections within an interface. It helps improve readability and organization by creating clear distinctions between groups of information. Dividers can be thin lines, thick separators, or even styled with spacing variations, adapting to different layouts. They are commonly used in menus, lists, forms, and content blocks to create a structured visual hierarchy.
    *
@@ -21,19 +20,9 @@
      * Determines the size of the divider.
      */
     size?: 's' | 'm' | 'l';
-    /**
-     * Use this snippet to insert the content who need a vertical divider
-     */
-    children?: Snippet;
   }
 
-  let {
-    orientation = 'horizontal',
-    appearance = 'primary',
-    size = 's',
-    children,
-    ...attrs
-  }: Props = $props();
+  let { orientation = 'horizontal', appearance = 'primary', size = 's', ...attrs }: Props = $props();
 </script>
 
 <div class="mc-divider" {...attrs}>
@@ -44,11 +33,7 @@
       `mc-divider-horizontal--${size}`,
     ]}
   ></div>
-  {#if children}
-    {@render children()}
-  {:else}
-    <slot />
-  {/if}
+  <slot />
 </div>
 
 <style>/**

package/dist/components/divider/Divider.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { Snippet } from 'svelte';
 /**
  * A divider is a visual element used to separate content or sections within an interface. It helps improve readability and organization by creating clear distinctions between groups of information. Dividers can be thin lines, thick separators, or even styled with spacing variations, adapting to different layouts. They are commonly used in menus, lists, forms, and content blocks to create a structured visual hierarchy.
  *
@@ -18,10 +17,6 @@ interface Props {
      * Determines the size of the divider.
      */
     size?: 's' | 'm' | 'l';
-    /**
-     * Use this snippet to insert the content who need a vertical divider
-     */
-    children?: Snippet;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/components/divider/Divider.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/divider/Divider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEpC;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IAC9D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiCH,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,OAAO;;;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Divider.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/divider/Divider.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IAC9D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AAsBH,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,OAAO;;;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

package/dist/components/divider/README.md

@@ -9,7 +9,6 @@ A divider is a visual element used to separate content or sections within an int
 | `orientation` | Determines the orientation of the divider. | `'vertical'` `'horizontal'` | `horizontal` |
 | `appearance` | Determines the appearance of the divider. | `'primary'` `'secondary'` `'tertiary'` `'inverse'` | `primary` |
 | `size` | Determines the size of the divider. | `'s'` `'m'` `'l'` | `s` |
-| `children` | Use this snippet to insert the content who need a vertical divider | `Snippet` |   |
 
 ## Slots
 

package/dist/components/drawer/Drawer.js

@@ -1,4 +1,4 @@
-import{u as eo,c as ro,p as no,a as ao,b as n,s as b,t as G,f as s,g as co,h as E,i as lo,d as a,j as d,r as c,e as H,k as g,l as h}from"../../custom-element.js";import{s as I}from"../../snippet.js";import{i as k}from"../../if.js";import{s as J}from"../../slot.js";import{a as so}from"../../attributes.js";import{b as bo}from"../../this.js";import{n as uo,r as io}from"../../Condition20.js";import{O as vo}from"../overlay/Overlay.js";var fo=E('<button class="mc-drawer__back mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Back"><!></button>'),mo=E('<h2 class="mc-drawer__content__title svelte-1d2fooj"> </h2>'),go=E('<div><div class="mc-drawer__dialog svelte-1d2fooj" role="document"><div class="mc-drawer__header svelte-1d2fooj"><!> <h2 class="mc-drawer__title svelte-1d2fooj" id="drawerTitle"> </h2> <button class="mc-drawer__close mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Close"><!></button></div> <div class="mc-drawer__body svelte-1d2fooj"><div class="mc-drawer__content svelte-1d2fooj"><!> <!></div></div> <div class="mc-drawer__footer svelte-1d2fooj"><!></div></div> <!></div>');const ho={hash:"svelte-1d2fooj",code:`/**
+import{o as W,c as X,p as Y,a as Z,b as a,A as $,aC as oo,s as l,t as D,f as B,g as to,h as T,i as eo,d as r,j as c,r as n,e as I}from"../../custom-element.js";import{i as S}from"../../if.js";import{s as q}from"../../slot.js";import{a as ro}from"../../attributes.js";import{b as F}from"../../this.js";import{n as no,r as ao}from"../../Condition20.js";import{O as co}from"../overlay/Overlay.js";import"../../branches.js";var lo=T('<button class="mc-drawer__back mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Back"><!></button>'),so=T('<h2 class="mc-drawer__content__title svelte-1d2fooj"> </h2>'),bo=T('<div><div class="mc-drawer__dialog svelte-1d2fooj" role="document"><div class="mc-drawer__header svelte-1d2fooj"><!> <h2 class="mc-drawer__title svelte-1d2fooj" id="drawerTitle" tabIndex="-1"> </h2> <button class="mc-drawer__close mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Close"><!></button></div> <div class="mc-drawer__body svelte-1d2fooj"><div class="mc-drawer__content svelte-1d2fooj"><!> <!></div></div> <div class="mc-drawer__footer svelte-1d2fooj"><!></div></div> <!></div>');const uo={hash:"svelte-1d2fooj",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-drawer.svelte-1d2fooj {box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:0.5rem;justify-content:flex-end;}
 @media (width >= 680px) {.mc-drawer.svelte-1d2fooj {padding:1rem;}
@@ -10,5 +10,5 @@ import{u as eo,c as ro,p as no,a as ao,b as n,s as b,t as G,f as s,g as co,h as
 @media (width >= 680px) {.mc-drawer__content.svelte-1d2fooj {padding:1.5rem;}
 }.mc-drawer__content__title.svelte-1d2fooj {font-size:var(--font-title-m, 1.5rem);margin:0 0 0.5rem;}.mc-drawer__footer.svelte-1d2fooj {display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, 0.0625rem) solid var(--divider-color-primary, #cccccc);}
 @media (width >= 680px) {.mc-drawer__footer.svelte-1d2fooj {justify-content:center;flex-direction:row;}
-}.mc-drawer-open.svelte-1d2fooj {overflow:hidden;}.mc-drawer.is-open.svelte-1d2fooj .mc-drawer__dialog:where(.svelte-1d2fooj) {pointer-events:all;transform:translate3d(0, 0, 0);transition:visibility 0s linear 0s, transform 0.4s;visibility:visible;}.mc-button.svelte-1d2fooj {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1d2fooj:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1d2fooj:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1d2fooj: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-1d2fooj {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1d2fooj {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 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-1d2fooj {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-1d2fooj {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-1d2fooj: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-1d2fooj: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-1d2fooj {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-1d2fooj {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-1d2fooj {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-1d2fooj {padding:0.25rem;}.mc-button--outlined.svelte-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1d2fooj:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1d2fooj:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1d2fooj: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-1d2fooj {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-1d2fooj:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-1d2fooj: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-1d2fooj {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-1d2fooj:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-1d2fooj: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-1d2fooj {--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-1d2fooj:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-1d2fooj: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-1d2fooj {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-1d2fooj:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-1d2fooj:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}`};function ko(U,e){no(e,!0),ao(U,ho);let l=n(e,"open",7),j=n(e,"position",7),_=n(e,"extended",7),w=n(e,"back",7),p=n(e,"title",7),i=n(e,"contentTitle",7),v=n(e,"children",7),f=n(e,"footer",7),x=n(e,"onUpdateOpen",7),y=n(e,"onBack",7),K=lo(e,["$$slots","$$events","$$legacy","$$host","open","position","extended","back","title","contentTitle","children","footer","onUpdateOpen","onBack"]),m;const D=()=>{l(!1),x()?.(l());const o=new CustomEvent("update:open",{detail:l(),bubbles:!0,composed:!0});m.dispatchEvent(o)},L=()=>{y()?.();const o=new CustomEvent("back",{bubbles:!0,composed:!0});m.dispatchEvent(o)};var M={get open(){return l()},set open(o){l(o),d()},get position(){return j()},set position(o){j(o),d()},get extended(){return _()},set extended(o){_(o),d()},get back(){return w()},set back(o){w(o),d()},get title(){return p()},set title(o){p(o),d()},get contentTitle(){return i()},set contentTitle(o){i(o),d()},get children(){return v()},set children(o){v(o),d()},get footer(){return f()},set footer(o){f(o),d()},get onUpdateOpen(){return x()},set onUpdateOpen(o){x(o),d()},get onBack(){return y()},set onBack(o){y(o),d()}},u=go(),N=o=>o.key==="Escape"&&D();so(u,()=>({class:["mc-drawer",`mc-drawer--${j()}`,l()&&"is-open",_()&&"mc-drawer--extend"],role:"dialog","aria-labelledby":"drawerTitle","aria-modal":l()?"true":"false",tabindex:"-1","aria-hidden":!l(),onkeydown:N,...K}),void 0,void 0,void 0,"svelte-1d2fooj");var B=a(u),T=a(B),A=a(T);{var P=o=>{var t=fo();t.__click=L;var r=a(t);io(r,{}),c(t),s(o,t)};k(A,o=>{w()&&o(P)})}var z=b(A,2),Q=a(z,!0);c(z);var O=b(z,2);O.__click=D;var R=a(O);uo(R,{}),c(O),c(T);var C=b(T,2),S=a(C),q=a(S);{var V=o=>{var t=mo(),r=a(t,!0);c(t),G(()=>H(r,i())),s(o,t)};k(q,o=>{i()&&o(V)})}var W=b(q,2);{var X=o=>{var t=g(),r=h(t);I(r,v),s(o,t)},Y=o=>{var t=g(),r=h(t);J(r,e,"default",{},null),s(o,t)};k(W,o=>{v()?o(X):o(Y,!1)})}c(S),c(C);var F=b(C,2),Z=a(F);{var $=o=>{var t=g(),r=h(t);I(r,f),s(o,t)},oo=o=>{var t=g(),r=h(t);J(r,e,"footer",{},null),s(o,t)};k(Z,o=>{f()?o($):o(oo,!1)})}c(F),c(B);var to=b(B,2);return vo(to,{get isvisible(){return l()},dialoglabel:"drawerTitle"}),c(u),bo(u,o=>m=o,()=>m),G(()=>H(Q,p())),s(U,u),co(M)}eo(["click"]);customElements.define("m-drawer",ro(ko,{open:{attribute:"open",reflect:!0,type:"Boolean"},extended:{attribute:"extended",reflect:!0,type:"Boolean"},back:{attribute:"back",reflect:!0,type:"Boolean"},position:{},title:{},contentTitle:{},children:{},footer:{},onUpdateOpen:{},onBack:{}},["default","footer"],[],!0));
+}.mc-drawer-open.svelte-1d2fooj {overflow:hidden;}.mc-drawer.is-open.svelte-1d2fooj .mc-drawer__dialog:where(.svelte-1d2fooj) {pointer-events:all;transform:translate3d(0, 0, 0);transition:visibility 0s linear 0s, transform 0.4s;visibility:visible;}.mc-button.svelte-1d2fooj {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1d2fooj:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1d2fooj:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1d2fooj: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-1d2fooj {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1d2fooj {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 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-1d2fooj {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-1d2fooj {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-1d2fooj: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-1d2fooj: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-1d2fooj {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-1d2fooj {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-1d2fooj {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-1d2fooj {padding:0.25rem;}.mc-button--outlined.svelte-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1d2fooj:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1d2fooj:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1d2fooj: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-1d2fooj {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-1d2fooj:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-1d2fooj: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-1d2fooj {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-1d2fooj:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-1d2fooj: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-1d2fooj {--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-1d2fooj:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-1d2fooj: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-1d2fooj {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--loading.svelte-1d2fooj {pointer-events:none;}.mc-button--outlined.mc-button--standard.svelte-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-1d2fooj:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-1d2fooj:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-1d2fooj: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-1d2fooj {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-1d2fooj:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}`};function io(z,t){Y(t,!0),Z(z,uo);let e=a(t,"open",7),v=a(t,"position",7),f=a(t,"extended",7),m=a(t,"back",7),g=a(t,"title",7),b=a(t,"contentTitle",7),h=a(t,"onUpdateOpen",7),k=a(t,"onBack",7),G=eo(t,["$$slots","$$events","$$legacy","$$host","open","position","extended","back","title","contentTitle","onUpdateOpen","onBack"]),u,j;$(()=>{e()&&(async()=>(await oo(),j?.focus()))()});const O=()=>{e(!1),h()?.(e());const o=new CustomEvent("update:open",{detail:e(),bubbles:!0,composed:!0});u.dispatchEvent(o)},H=()=>{k()?.();const o=new CustomEvent("back",{bubbles:!0,composed:!0});u.dispatchEvent(o)};var J={get open(){return e()},set open(o){e(o),c()},get position(){return v()},set position(o){v(o),c()},get extended(){return f()},set extended(o){f(o),c()},get back(){return m()},set back(o){m(o),c()},get title(){return g()},set title(o){g(o),c()},get contentTitle(){return b()},set contentTitle(o){b(o),c()},get onUpdateOpen(){return h()},set onUpdateOpen(o){h(o),c()},get onBack(){return k()},set onBack(o){k(o),c()}},s=bo(),K=o=>o.key==="Escape"&&O();ro(s,()=>({class:["mc-drawer",`mc-drawer--${v()}`,e()&&"is-open",f()&&"mc-drawer--extend"],role:"dialog","aria-labelledby":"drawerTitle","aria-modal":e()?"true":"false","aria-hidden":!e(),onkeydown:K,...G}),void 0,void 0,void 0,"svelte-1d2fooj");var w=r(s),_=r(w),C=r(_);{var L=o=>{var d=lo();d.__click=H;var y=r(d);ao(y,{}),n(d),B(o,d)};S(C,o=>{m()&&o(L)})}var i=l(C,2),M=r(i,!0);n(i),F(i,o=>j=o,()=>j);var p=l(i,2);p.__click=O;var N=r(p);no(N,{}),n(p),n(_);var x=l(_,2),E=r(x),U=r(E);{var P=o=>{var d=so(),y=r(d,!0);n(d),D(()=>I(y,b())),B(o,d)};S(U,o=>{b()&&o(P)})}var Q=l(U,2);q(Q,t,"default",{},null),n(E),n(x);var A=l(x,2),R=r(A);q(R,t,"footer",{},null),n(A),n(w);var V=l(w,2);return co(V,{get isvisible(){return e()},dialoglabel:"drawerTitle"}),n(s),F(s,o=>u=o,()=>u),D(()=>I(M,g())),B(z,s),to(J)}W(["click"]);customElements.define("m-drawer",X(io,{open:{attribute:"open",reflect:!0,type:"Boolean"},extended:{attribute:"extended",reflect:!0,type:"Boolean"},back:{attribute:"back",reflect:!0,type:"Boolean"},position:{},title:{},contentTitle:{},onUpdateOpen:{},onBack:{}},["default","footer"],[],!0));
 //# sourceMappingURL=Drawer.js.map

package/dist/components/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../src/components/drawer/Drawer.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-drawer',\n    props: {\n      open: { reflect: true, type: 'Boolean', attribute: 'open' },\n      extended: { reflect: true, type: 'Boolean', attribute: 'extended' },\n      back: { reflect: true, type: 'Boolean', attribute: 'back' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  import { ArrowBack24, Cross24 } from '@mozaic-ds/icons-svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n  /**\n   * A drawer is a sliding panel that appears from the side of the screen, providing additional content, settings, or actions without disrupting the main view. It is often used for filtering options, or contextual details. It enhances usability by keeping interfaces clean while offering expandable functionality.\n   *\n   * @slot default - Use this slot to insert the content of the drawer\n   * @slot footer - Use this slot to insert buttons in the footer\n   * @event update:open {CustomEvent<boolean>} - Emits when the drawer open state changes.\n   * @event back {CustomEvent<void>} - Emits when click back button of the drawer.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * If `true`, display the drawer.\n     */\n    open?: boolean;\n    /**\n     * Position of the drawer.\n     */\n    position?: 'left' | 'right';\n    /**\n     * If `true`, the drawer have a bigger width.\n     */\n    extended?: boolean;\n    /**\n     * If `true`, display the back button.\n     */\n    back?: boolean;\n    /**\n     * Title of the drawer.\n     */\n    title: string;\n    /**\n     * Title of the content of the drawer.\n     */\n    contentTitle?: string;\n    /**\n     * Use this snippet to insert the content of the drawer\n     */\n    children?: Snippet;\n    /**\n     * Use this snippet to insert buttons in the footer\n     */\n    footer?: Snippet;\n    /**\n     * Callback fired when the drawer open state changes.\n     */\n    onUpdateOpen?: (open: boolean) => void;\n    /**\n     * Callback fired when the back button is clicked.\n     */\n    onBack?: () => void;\n  }\n\n  let {\n    open,\n    position,\n    extended,\n    back,\n    title,\n    contentTitle,\n    children,\n    footer,\n    onUpdateOpen,\n    onBack,\n    ...attrs\n  }: Props = $props();\n  let element: HTMLElement;\n\n  const onClose = () => {\n    open = false;\n\n    onUpdateOpen?.(open);\n\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n\n  const onClickBack = () => {\n    onBack?.();\n\n    const event = new CustomEvent('back', {\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n</script>\n\n<div\n  class={[\n    'mc-drawer',\n    `mc-drawer--${position}`,\n    open && 'is-open',\n    extended && 'mc-drawer--extend',\n  ]}\n  role=\"dialog\"\n  aria-labelledby=\"drawerTitle\"\n  aria-modal={open ? 'true' : 'false'}\n  tabindex=\"-1\"\n  aria-hidden={!open}\n  onkeydown={(e) => e.key === 'Escape' && onClose()}\n  bind:this={element}\n  {...attrs}\n>\n  <div class=\"mc-drawer__dialog\" role=\"document\">\n    <div class=\"mc-drawer__header\">\n      {#if back}\n        <button\n          class=\"mc-drawer__back mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Back\"\n          onclick={onClickBack}\n        >\n          <ArrowBack24 />\n        </button>\n      {/if}\n      <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{title}</h2>\n      <button\n        class=\"mc-drawer__close mc-button mc-button--icon-button mc-button--ghost\"\n        aria-label=\"Close\"\n        onclick={onClose}\n      >\n        <Cross24 />\n      </button>\n    </div>\n\n    <div class=\"mc-drawer__body\">\n      <div class=\"mc-drawer__content\">\n        {#if contentTitle}\n          <h2 class=\"mc-drawer__content__title\">{contentTitle}</h2>\n        {/if}\n        {#if children}\n          {@render children()}\n        {:else}\n          <slot />\n        {/if}\n      </div>\n    </div>\n\n    <div class=\"mc-drawer__footer\">\n      {#if footer}\n        {@render footer()}\n      {:else}\n        <slot name=\"footer\" />\n      {/if}\n    </div>\n  </div>\n  <MOverlay isvisible={open} dialoglabel=\"drawerTitle\" />\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/drawer';\n  @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["open","$.prop","$$props","position","extended","back","title","contentTitle","children","footer","onUpdateOpen","onBack","attrs","$.rest_props","element","onClose","event","onClickBack","div","root","event_handler","e","div_1","$.child","div_2","button","root_1","node_1","ArrowBack24","$.reset","$.append","$$anchor","$$render","consequent","h2","$.sibling","node","button_1","node_2","Cross24","div_3","div_4","h2_1","root_2","consequent_1","consequent_2","alternate","div_5","consequent_3","alternate_1","MOverlay","node_10","$$value"],"mappings":";;;;;;;;;;;;87WAWA,uBAyDIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,EAAQH,EAAAC,EAAA,WAAA,CAAA,EACRG,EAAIJ,EAAAC,EAAA,OAAA,CAAA,EACJI,EAAKL,EAAAC,EAAA,QAAA,CAAA,EACLK,EAAYN,EAAAC,EAAA,eAAA,CAAA,EACZM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAMR,EAAAC,EAAA,SAAA,CAAA,EACNQ,EAAYT,EAAAC,EAAA,eAAA,CAAA,EACZS,EAAMV,EAAAC,EAAA,SAAA,CAAA,EACHU,EAAAC,GAAAX,EAAA,mJAEDY,EAEE,MAAAC,EAAO,IAAS,CACpBf,EAAO,EAAK,EAEZU,EAAY,IAAGV,GAAI,EAEb,MAAAgB,EAAK,IAAO,YAAY,eAC5B,OAAQhB,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBc,EAAQ,cAAcE,CAAK,CAC7B,EAEMC,EAAW,IAAS,CACxBN,MAAM,QAEAK,EAAK,IAAO,YAAY,OAAM,CAClC,QAAS,GACT,SAAU,GAAI,EAEhBF,EAAQ,cAAcE,CAAK,CAC7B,8gBAGDE,EAAAC,GAAA,EAYaC,EAAAC,GAAMA,EAAE,MAAQ,UAAYN,EAAO,KAZhDG,eAEG,0BACcf,EAAQ,CAAA,GACtBH,EAAI,GAAI,UACRI,KAAY,gFAIFJ,IAAO,OAAS,qCAEdA,EAAI,iBAGdY,2CAEH,IAAAU,EAAGC,EAhBLL,CAAA,EAiBIM,IADFF,CAAG,MACDE,CAAG,aAEC,IAAAC,EAAAC,GAAA,EAAAD,EAGC,QAASR,EAHV,IAAAU,EAAAJ,EAAAE,CAAA,EAKEG,GAAWD,EAAA,EAAA,EALbE,EAAAJ,CAAA,EAAAK,EAAAC,EAAAN,CAAA,WADEpB,EAAI,GAAA2B,EAAAC,CAAA,QASRC,EAAEC,EAAAC,EAAA,CAAA,MAAFF,EAAE,EAAA,IAAFA,CAAE,EACF,IAAAG,EAAAF,EADAD,EAAE,CAAA,EACFG,EAGC,QAAStB,EAHV,IAAAuB,EAAAf,EAAAc,CAAA,EAKEE,GAAOD,EAAA,EAAA,EALTT,EAAAQ,CAAA,IAXFb,CAAG,EAoBH,IAAAgB,IApBAhB,EAAG,CAAA,EAqBDiB,IADFD,CAAG,MACDC,CAAG,iBAECC,EAAEC,GAAA,MAAFD,EAAE,EAAA,IAAFA,CAAE,YAAoCnC,EAAY,CAAA,CAAA,MAAlDmC,CAAE,WADAnC,EAAY,GAAAyB,EAAAY,CAAA,iDAINpC,CAAQ,0EADdA,EAAQ,EAAAwB,EAAAa,CAAA,EAAAb,EAAAc,EAAA,EAAA,MAJdL,CAAG,IADLD,CAAG,EAaH,IAAAO,IAbAP,EAAG,CAAA,MAaHO,CAAG,kCAEStC,CAAM,0EADZA,EAAM,EAAAuB,EAAAgB,CAAA,EAAAhB,EAAAiB,GAAA,EAAA,MADZF,CAAG,IAlCLzB,CAAG,WAAHA,EAAG,CAAA,EA0CH4B,OAAAA,GAAQC,GAAA,wBAAYnD,EAAI,+BA1D1B6B,EAAAX,CAAA,KAAAA,EAAAkC,GAaYtC,QAAAA,CAAO,YAciCR,EAAK,CAAA,CAAA,EA3BzDwB,EAAAC,EAAAb,CAAA,OAFO"}
+{"version":3,"file":"Drawer.js","sources":["../../../src/components/drawer/Drawer.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-drawer',\n    props: {\n      open: { reflect: true, type: 'Boolean', attribute: 'open' },\n      extended: { reflect: true, type: 'Boolean', attribute: 'extended' },\n      back: { reflect: true, type: 'Boolean', attribute: 'back' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { ArrowBack24, Cross24 } from '@mozaic-ds/icons-svelte';\n  import { tick } from 'svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n  /**\n   * A drawer is a sliding panel that appears from the side of the screen, providing additional content, settings, or actions without disrupting the main view. It is often used for filtering options, or contextual details. It enhances usability by keeping interfaces clean while offering expandable functionality.\n   *\n   * @slot default - Use this slot to insert the content of the drawer\n   * @slot footer - Use this slot to insert buttons in the footer\n   * @event update:open {CustomEvent<boolean>} - Emits when the drawer open state changes.\n   * @event back {CustomEvent<void>} - Emits when click back button of the drawer.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * If `true`, display the drawer.\n     */\n    open?: boolean;\n    /**\n     * Position of the drawer.\n     */\n    position?: 'left' | 'right';\n    /**\n     * If `true`, the drawer have a bigger width.\n     */\n    extended?: boolean;\n    /**\n     * If `true`, display the back button.\n     */\n    back?: boolean;\n    /**\n     * Title of the drawer.\n     */\n    title: string;\n    /**\n     * Title of the content of the drawer.\n     */\n    contentTitle?: string;\n    /**\n     * Callback fired when the drawer open state changes.\n     */\n    onUpdateOpen?: (open: boolean) => void;\n    /**\n     * Callback fired when the back button is clicked.\n     */\n    onBack?: () => void;\n  }\n\n  let {\n    open,\n    position,\n    extended,\n    back,\n    title,\n    contentTitle,\n    onUpdateOpen,\n    onBack,\n    ...attrs\n  }: Props = $props();\n  let element: HTMLElement;\n  let titleEl: HTMLHeadingElement | undefined = undefined;\n\n  $effect(() => {\n    if (!open) return;\n\n    (async () => {\n      await tick();\n      titleEl?.focus();\n    })();\n  });\n\n  const onClose = () => {\n    open = false;\n\n    onUpdateOpen?.(open);\n\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n\n  const onClickBack = () => {\n    onBack?.();\n\n    const event = new CustomEvent('back', {\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n</script>\n\n<div\n  class={[\n    'mc-drawer',\n    `mc-drawer--${position}`,\n    open && 'is-open',\n    extended && 'mc-drawer--extend',\n  ]}\n  role=\"dialog\"\n  aria-labelledby=\"drawerTitle\"\n  aria-modal={open ? 'true' : 'false'}\n  aria-hidden={!open}\n  onkeydown={(e) => e.key === 'Escape' && onClose()}\n  bind:this={element}\n  {...attrs}\n>\n  <div class=\"mc-drawer__dialog\" role=\"document\">\n    <div class=\"mc-drawer__header\">\n      {#if back}\n        <button\n          class=\"mc-drawer__back mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Back\"\n          onclick={onClickBack}\n        >\n          <ArrowBack24 />\n        </button>\n      {/if}\n      <h2 class=\"mc-drawer__title\" id=\"drawerTitle\" tabIndex=\"-1\" bind:this={titleEl}>{title}</h2>\n      <button\n        class=\"mc-drawer__close mc-button mc-button--icon-button mc-button--ghost\"\n        aria-label=\"Close\"\n        onclick={onClose}\n      >\n        <Cross24 />\n      </button>\n    </div>\n\n    <div class=\"mc-drawer__body\">\n      <div class=\"mc-drawer__content\">\n        {#if contentTitle}\n          <h2 class=\"mc-drawer__content__title\">{contentTitle}</h2>\n        {/if}\n        <slot />\n      </div>\n    </div>\n\n    <div class=\"mc-drawer__footer\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n  <MOverlay isvisible={open} dialoglabel=\"drawerTitle\" />\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/drawer';\n  @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["open","$.prop","$$props","position","extended","back","title","contentTitle","onUpdateOpen","onBack","attrs","$.rest_props","element","titleEl","$.user_effect","tick","onClose","event","onClickBack","div","root","event_handler","e","div_1","$.child","div_2","button","root_1","node_1","ArrowBack24","$.reset","$.append","$$anchor","$$render","consequent","h2","$.sibling","node","$$value","button_1","node_2","Cross24","div_3","div_4","h2_1","root_2","consequent_1","div_5","MOverlay","node_6"],"mappings":";;;;;;;;;;;;u/WAWA,qBAiDIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,EAAQH,EAAAC,EAAA,WAAA,CAAA,EACRG,EAAIJ,EAAAC,EAAA,OAAA,CAAA,EACJI,EAAKL,EAAAC,EAAA,QAAA,CAAA,EACLK,EAAYN,EAAAC,EAAA,eAAA,CAAA,EACZM,EAAYP,EAAAC,EAAA,eAAA,CAAA,EACZO,EAAMR,EAAAC,EAAA,SAAA,CAAA,EACHQ,EAAAC,GAAAT,EAAA,+HAEDU,EACAC,EAEJC,EAAO,IAAO,CACPd,EAAI,IAEI,gBACLe,GAAI,EACVF,GAAS,MAAK,KAElB,CAAC,EAEK,MAAAG,EAAO,IAAS,CACpBhB,EAAO,EAAK,EAEZQ,EAAY,IAAGR,GAAI,EAEb,MAAAiB,EAAK,IAAO,YAAY,eAC5B,OAAQjB,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBY,EAAQ,cAAcK,CAAK,CAC7B,EAEMC,EAAW,IAAS,CACxBT,MAAM,QAEAQ,EAAK,IAAO,YAAY,OAAM,CAClC,QAAS,GACT,SAAU,GAAI,EAEhBL,EAAQ,cAAcK,CAAK,CAC7B,waAGDE,EAAAC,GAAA,EAWaC,EAAAC,GAAMA,EAAE,MAAQ,UAAYN,EAAO,KAXhDG,eAEG,0BACchB,EAAQ,CAAA,GACtBH,EAAI,GAAI,UACRI,KAAY,gFAIFJ,IAAO,OAAS,uBACdA,EAAI,iBAGdU,2CAEH,IAAAa,EAAGC,EAfLL,CAAA,EAgBIM,IADFF,CAAG,MACDE,CAAG,aAEC,IAAAC,EAAAC,GAAA,EAAAD,EAGC,QAASR,EAHV,IAAAU,EAAAJ,EAAAE,CAAA,EAKEG,GAAWD,EAAA,EAAA,EALbE,EAAAJ,CAAA,EAAAK,EAAAC,EAAAN,CAAA,WADErB,EAAI,GAAA4B,EAAAC,CAAA,QASRC,EAAEC,EAAAC,EAAA,CAAA,MAAFF,EAAE,EAAA,IAAFA,CAAE,IAAFA,EAAEG,GAAoEzB,EAAOyB,EAAA,IAAPzB,CAAO,EAC7E,IAAA0B,EAAAH,EADAD,EAAE,CAAA,EACFI,EAGC,QAASvB,EAHV,IAAAwB,EAAAhB,EAAAe,CAAA,EAKEE,GAAOD,EAAA,EAAA,EALTV,EAAAS,CAAA,IAXFd,CAAG,EAoBH,IAAAiB,IApBAjB,EAAG,CAAA,EAqBDkB,IADFD,CAAG,MACDC,CAAG,iBAECC,EAAEC,GAAA,MAAFD,EAAE,EAAA,IAAFA,CAAE,YAAoCrC,EAAY,CAAA,CAAA,MAAlDqC,CAAE,WADArC,EAAY,GAAA0B,EAAAa,CAAA,4CADlBH,CAAG,IADLD,CAAG,EASH,IAAAK,IATAL,EAAG,CAAA,MASHK,CAAG,4BAAHA,CAAG,IA9BLxB,CAAG,UAAHA,EAAG,CAAA,EAkCHyB,OAAAA,GAAQC,EAAA,wBAAYjD,EAAI,+BAjD1B8B,EAAAX,CAAA,IAAAA,EAAAmB,GAYY1B,QAAAA,CAAO,YAcmEN,EAAK,CAAA,CAAA,EA1B3FyB,EAAAC,EAAAb,CAAA,OAFO"}