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

package/dist/components/datepicker/Datepicker.svelte

@@ -0,0 +1,315 @@
+<svelte:options customElement={{ tag: 'm-datepicker' }} />
+
+<script lang="ts">
+  import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';
+
+  interface Props {
+    id: string;
+    name?: string;
+    value?: string | number;
+    isinvalid?: boolean;
+    disabled?: boolean;
+    size?: 's' | 'm';
+    readonly?: boolean;
+    isclearable?: boolean;
+    clearlabel?: string;
+    [events: string]: string;
+  }
+
+  let {
+    id,
+    name = '',
+    value = '',
+    isinvalid = false,
+    disabled = false,
+    size = 'm',
+    readonly = false,
+    isclearable = false,
+    clearlabel = 'clear content',
+    ...events
+  }: Props = $props();
+
+  function onInput(event: Event) {
+    const target = event.target as HTMLInputElement;
+    value = target.value;
+  }
+
+  function clearValue() {
+    value = '';
+  }
+</script>
+
+<div
+  class="mc-datepicker mc-text-input"
+  class:is-invalid={isinvalid}
+  class:mc-text-input--s={size === 's'}
+  class:mc-datepicker--s={size === 's'}
+>
+  <input
+    class="mc-datepicker__control mc-text-input__control"
+    type="date"
+    bind:value
+    {id}
+    {name}
+    {disabled}
+    {readonly}
+    aria-invalid={isinvalid}
+    oninput={onInput}
+    {...events}
+  />
+
+  {#if isclearable && value}
+    <div class="mc-datepicker__controls-options mc-controls-options">
+      <button
+        type="button"
+        class="mc-controls-options__button"
+        onclick={clearValue}
+      >
+        <CrossCircleFilled24
+          class="mc-controls-options__icon"
+          aria-hidden="true"
+        />
+        <span class="mc-controls-options__label">{clearlabel}</span>
+      </button>
+    </div>
+  {/if}
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/* stylelint-disable string-no-newline */
+.mc-text-input {
+  transition: box-shadow 200ms ease;
+  background-color: #ffffff;
+  border: 1px solid #666666;
+  border-radius: 0.25rem;
+  transition: all ease 200ms;
+  color: #000000;
+  display: block;
+  width: 100%;
+  height: 3rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.mc-text-input__control {
+  background-color: transparent;
+  border-width: 0;
+  font-family: inherit;
+  outline: none;
+  padding: 0.75rem 0.6875rem;
+  font-size: 1rem;
+  line-height: 1.3;
+  font-weight: 400;
+  flex-grow: 1;
+}
+.mc-text-input__control[type=number] {
+  /* For Blink & WebKit rendering engines */
+  /* For Gecko rendering engine */
+  appearance: textfield;
+}
+.mc-text-input__control[type=number]::-webkit-inner-spin-button, .mc-text-input__control[type=number]::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+.mc-text-input__control[type=search]::-webkit-search-decoration, .mc-text-input__control[type=search]::-webkit-search-cancel-button {
+  appearance: none;
+}
+.mc-text-input__control::placeholder {
+  color: #666666;
+}
+.mc-text-input__icon {
+  fill: #666666;
+  height: 1.5rem;
+  width: 1.5rem;
+  flex-shrink: 0;
+}
+.mc-text-input:focus-within {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-text-input:hover:not(:focus-within) {
+  border-color: #4d4d4d;
+  box-shadow: 0 0 0 1px #4d4d4d;
+}
+.mc-text-input:has(input:disabled) {
+  background-color: #d9d9d9;
+  cursor: not-allowed;
+  border-color: transparent;
+  box-shadow: none;
+  color: #737373;
+  pointer-events: none;
+}
+.mc-text-input:has(input[readonly]) {
+  border-color: #cccccc;
+  pointer-events: none;
+}
+.mc-text-input:has(.mc-text-input__icon) {
+  padding-inline-start: 0.6875rem;
+}
+.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control {
+  padding-inline-start: 0;
+}
+.mc-text-input:has(.mc-controls-options) {
+  padding-inline-end: 0.6875rem;
+}
+.mc-text-input:has(.mc-controls-options) .mc-text-input__control {
+  padding-inline-end: 0;
+}
+.mc-text-input--s {
+  height: 2rem;
+}
+.mc-text-input--s .mc-text-input__control {
+  padding: 0.375rem 0.6875rem;
+  font-size: 0.875rem;
+  line-height: 1.3;
+}
+.mc-text-input--s:has(.mc-text-input__icon) {
+  padding-inline-start: 0.4375rem;
+}
+.mc-text-input--s:has(.mc-controls-options) {
+  padding-inline-end: 0.4375rem;
+}
+.mc-text-input.is-invalid {
+  border-color: #ea302d;
+  box-shadow: 0 0 0 1px #ea302d;
+}
+.mc-text-input.is-invalid:hover:not(:focus-within) {
+  border-color: #c61112;
+  box-shadow: 0 0 0 1px #c61112;
+}
+.mc-text-input * {
+  box-sizing: border-box;
+}
+
+/* stylelint-enable string-no-newline */
+.mc-datepicker {
+  border-radius: 0.25rem;
+  position: relative;
+}
+.mc-datepicker__control {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='%23000000' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E");
+  font-family: LeroyMerlin, sans-serif;
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  display: block;
+  padding: 0 0.75rem;
+}
+.mc-datepicker__control::-webkit-calendar-picker-indicator {
+  padding-right: 1rem;
+  opacity: 0;
+  transform: scale(2);
+}
+.mc-datepicker__control::-moz-calendar-picker-indicator {
+  padding-right: 1rem;
+  opacity: 0;
+  transform: scale(2);
+}
+.mc-datepicker__control.is-invalid {
+  border-color: #ea302d;
+  box-shadow: 0 0 0 1px #ea302d;
+}
+.mc-datepicker__control.is-invalid:hover:not(:focus-within) {
+  border-color: #c61112;
+  box-shadow: 0 0 0 1px #c61112;
+}
+.mc-datepicker__control:disabled {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='%23737373' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E");
+  background-color: #d9d9d9;
+  cursor: not-allowed;
+  border-color: transparent;
+  box-shadow: none;
+  color: #737373;
+}
+.mc-datepicker__control:disabled:hover:not(:focus-within) {
+  background-color: #d9d9d9;
+  cursor: not-allowed;
+  border-color: transparent;
+  box-shadow: none;
+  color: #737373;
+}
+.mc-datepicker:has(.mc-controls-options) {
+  padding-inline-end: 0;
+}
+.mc-datepicker:has(input:disabled) {
+  background-color: #d9d9d9;
+  cursor: not-allowed;
+  border-color: transparent;
+  box-shadow: none;
+  color: #737373;
+  pointer-events: all;
+  cursor: not-allowed;
+}
+.mc-datepicker:has(input:disabled):hover {
+  background-color: #d9d9d9;
+  cursor: not-allowed;
+  border-color: transparent;
+  box-shadow: none;
+  color: #737373;
+}
+.mc-datepicker--s .mc-datepicker__control {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' fill='%23000000' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E");
+}
+.mc-datepicker--s .mc-datepicker__control:disabled {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' fill='%23737373' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E");
+}
+.mc-datepicker__controls-options {
+  position: absolute;
+  right: 2.75rem;
+  top: 0.75rem;
+}
+
+.mc-controls-options {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.mc-controls-options__button {
+  background-color: transparent;
+  border-width: 0;
+  color: initial;
+  font-family: inherit;
+  outline: none;
+  appearance: none;
+  cursor: pointer;
+  padding: 0;
+  border-radius: 100%;
+}
+.mc-controls-options__button:hover .mc-controls-options__icon {
+  fill: #4d4d4d;
+}
+.mc-controls-options__button:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-controls-options__icon {
+  fill: #666666;
+}
+.mc-controls-options__button, .mc-controls-options__icon {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.mc-controls-options__label {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  padding: 0;
+  width: 1px;
+}
+.mc-controls-options__unit {
+  font-size: 1rem;
+  line-height: 1.3;
+  font-weight: 600;
+  color: #000000;
+}</style>

package/dist/components/datepicker/Datepicker.svelte.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    id: string;
+    name?: string;
+    value?: string | number;
+    isinvalid?: boolean;
+    disabled?: boolean;
+    size?: 's' | 'm';
+    readonly?: boolean;
+    isclearable?: boolean;
+    clearlabel?: string;
+    [events: string]: string;
+}
+declare const Datepicker: import("svelte").Component<Props, {}, "">;
+type Datepicker = ReturnType<typeof Datepicker>;
+export default Datepicker;
+//# sourceMappingURL=Datepicker.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Datepicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/Datepicker.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AA+CH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/drawer/Drawer.js

@@ -1,14 +1,17 @@
-import{c as q,a as F,d as r,A as Z,t as E,j as h,l as G,m as a,i as I,B as $,b as ee,f as _,s as v,g as d,k as M,a0 as N,r as c}from"../../custom-element.js";import{i as C}from"../../if.js";import{a as te,s as S}from"../../slot.js";import{s as w,c as oe}from"../../attributes.js";import"../../legacy.js";import{C as re}from"../../Cross24.js";import{O as ae}from"../overlay/Overlay.js";var ne=Z('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M8.707 6.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l3.293 3.293a1 1 0 1 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"></path></svg>');function J(k,t){F(t,!1);let g=r(t,"id",12,void 0),l=r(t,"style",12,void 0),s=r(t,"className",12,void 0),b=r(t,"fill",12,void 0),m=r(t,"size",12,"1.5rem");var i=ne();return E(()=>{w(i,"id",g()),oe(i,l()),I(i,0,$(s())),w(i,"fill",b())}),h(k,i),G({get id(){return g()},set id(o){g(o),a()},get style(){return l()},set style(o){l(o),a()},get className(){return s()},set className(o){s(o),a()},get fill(){return b()},set fill(o){b(o),a()},get size(){return m()},set size(o){m(o),a()}})}customElements.define("arrow-back-24",q(J,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var le=_('<button class="mc-drawer__back mc-button mc-button--icon-button mc-button--ghost svelte-1lmi8ae" aria-label="Back"><!></button>'),de=_('<h2 class="mc-drawer__content__title svelte-1lmi8ae"> </h2>'),ce=_('<div class="mc-drawer__footer svelte-1lmi8ae"><!></div>'),ie=_('<section aria-labelledby="drawerTitle" tabindex="-1"><div class="mc-drawer__dialog svelte-1lmi8ae" role="document"><div class="mc-drawer__header svelte-1lmi8ae"><!> <h2 class="mc-drawer__title svelte-1lmi8ae" id="drawerTitle"> </h2> <button class="mc-drawer__close mc-button mc-button--icon-button mc-button--ghost svelte-1lmi8ae" aria-label="Close"><!></button></div> <div class="mc-drawer__body svelte-1lmi8ae"><div class="mc-drawer__content svelte-1lmi8ae" tabindex="0"><!> <!></div></div> <!></div> <!></section>');const se={hash:"svelte-1lmi8ae",code:`/**
+import{c as S,p as F,b as r,q as Z,t as D,h as g,i as G,j as a,e as I,u as $,a as ee,f as k,s as v,d as l,g as L,o as B,r as d}from"../../custom-element.js";import{i as C}from"../../if.js";import{a as te,s as M}from"../../slot.js";import{s as _,a as oe}from"../../attributes.js";import"../../legacy.js";import{C as re}from"../../Cross24.js";import{O as ae}from"../overlay/Overlay.js";var ne=Z('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M8.707 6.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l3.293 3.293a1 1 0 1 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"></path></svg>');function J(h,t){F(t,!1);let f=r(t,"id",12,void 0),c=r(t,"style",12,void 0),i=r(t,"className",12,void 0),b=r(t,"fill",12,void 0),m=r(t,"size",12,"1.5rem");var s=ne();return D(()=>{_(s,"id",f()),oe(s,c()),I(s,0,$(i())),_(s,"fill",b())}),g(h,s),G({get id(){return f()},set id(o){f(o),a()},get style(){return c()},set style(o){c(o),a()},get className(){return i()},set className(o){i(o),a()},get fill(){return b()},set fill(o){b(o),a()},get size(){return m()},set size(o){m(o),a()}})}customElements.define("arrow-back-24",S(J,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var ce=k('<button class="mc-drawer__back mc-button mc-button--icon-button mc-button--ghost svelte-132ae2w" aria-label="Back"><!></button>'),le=k('<h2 class="mc-drawer__content__title svelte-132ae2w"> </h2>'),de=k('<div class="mc-drawer__footer svelte-132ae2w"><!></div>'),se=k('<section aria-labelledby="drawerTitle" tabindex="-1"><div class="mc-drawer__dialog svelte-132ae2w" role="document"><div class="mc-drawer__header svelte-132ae2w"><!> <h2 class="mc-drawer__title svelte-132ae2w" id="drawerTitle"> </h2> <button class="mc-drawer__close mc-button mc-button--icon-button mc-button--ghost svelte-132ae2w" aria-label="Close"><!></button></div> <div class="mc-drawer__body svelte-132ae2w"><div class="mc-drawer__content svelte-132ae2w" tabindex="0"><!> <!></div></div> <!></div> <!></section>');const ie={hash:"svelte-132ae2w",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-drawer.svelte-1lmi8ae {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-1lmi8ae {padding:1rem;}
-}.mc-drawer--left.svelte-1lmi8ae {justify-content:flex-start;}.mc-drawer--left.svelte-1lmi8ae .mc-drawer__dialog:where(.svelte-1lmi8ae) {transform:translate3d(-100%, 0, 0);}
-@media (width >= 680px) {.mc-drawer--extend.svelte-1lmi8ae .mc-drawer__dialog:where(.svelte-1lmi8ae) {max-width:39rem;}
-}.mc-drawer__dialog.svelte-1lmi8ae {background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%, 0, 0);transition:visibility 0s linear 0.4s, transform 0.4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 3);border-radius:var(--radius-l, 1rem);}
-@media (width >= 680px) {.mc-drawer__dialog.svelte-1lmi8ae {max-width:25rem;}
-}.mc-drawer__header.svelte-1lmi8ae {display:flex;align-items:center;justify-content:center;height:4rem;}.mc-drawer__icon.svelte-1lmi8ae {height:1.5rem;margin-right:0.75rem;width:1.5rem;}.mc-drawer__title.svelte-1lmi8ae {font-size:var(--font-body-s, 0.875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;}.mc-drawer__title.svelte-1lmi8ae:first-child {padding-left:4rem;}.mc-drawer__back.svelte-1lmi8ae, .mc-drawer__close.svelte-1lmi8ae {margin:0.5rem;}.mc-drawer__body.svelte-1lmi8ae {flex:1 1;overflow:hidden;}.mc-drawer__body.svelte-1lmi8ae:last-child {margin-bottom:1.5rem;padding-bottom:1.5rem;}.mc-drawer__content.svelte-1lmi8ae {max-height:100%;overflow:hidden auto;padding:0.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000);}
-@media (width >= 680px) {.mc-drawer__content.svelte-1lmi8ae {padding:1.5rem;}
-}.mc-drawer__content__title.svelte-1lmi8ae {font-size:var(--font-title-m, 1.5rem);margin:0 0 0.5rem;}.mc-drawer__footer.svelte-1lmi8ae {display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-s, 1px) solid var(--divider-color-primary, #cccccc);}
-@media (width >= 680px) {.mc-drawer__footer.svelte-1lmi8ae {justify-content:center;flex-direction:row;}
-}.mc-drawer-open.svelte-1lmi8ae {overflow:hidden;}.mc-drawer.is-open.svelte-1lmi8ae .mc-drawer__dialog:where(.svelte-1lmi8ae) {pointer-events:all;transform:translate3d(0, 0, 0);transition:visibility 0s linear 0s, transform 0.4s;visibility:visible;}.mc-button.svelte-1lmi8ae {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-radius, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button.svelte-1lmi8ae:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1lmi8ae:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1lmi8ae:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button__label.svelte-1lmi8ae {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-1lmi8ae {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-1lmi8ae: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-1lmi8ae: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-1lmi8ae {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-1lmi8ae {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-1lmi8ae {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-1lmi8ae {padding:0.25rem;}.mc-button--outlined.svelte-1lmi8ae {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-1lmi8ae:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1lmi8ae:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1lmi8ae: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-1lmi8ae {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-1lmi8ae:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1lmi8ae:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1lmi8ae: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-1lmi8ae {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-1lmi8ae:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-1lmi8ae:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-1lmi8ae: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-1lmi8ae {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-1lmi8ae:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-1lmi8ae:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-1lmi8ae: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-1lmi8ae {--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-1lmi8ae:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-1lmi8ae:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-1lmi8ae: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-1lmi8ae {border-radius:var(--radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-1lmi8ae {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-1lmi8ae:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-1lmi8ae:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-1lmi8ae: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-1lmi8ae {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-1lmi8ae:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-1lmi8ae:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-1lmi8ae: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-1lmi8ae {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-1lmi8ae:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-1lmi8ae:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-1lmi8ae: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-1lmi8ae {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-1lmi8ae:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-1lmi8ae:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-1lmi8ae: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-1lmi8ae {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-1lmi8ae:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-1lmi8ae:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-1lmi8ae: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-1lmi8ae {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-1lmi8ae:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-1lmi8ae:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-1lmi8ae: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-1lmi8ae {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-1lmi8ae:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-1lmi8ae:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-1lmi8ae: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-1lmi8ae {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-1lmi8ae:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-1lmi8ae:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-1lmi8ae:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-overlay.svelte-1lmi8ae {filter:none;}`};function be(k,t){const g=te(t);F(t,!0),ee(k,se);let l=r(t,"open",7,!1),s=r(t,"position",7,"right"),b=r(t,"extended",7,!1),m=r(t,"back",7,!1),i=r(t,"title",7,""),o=r(t,"contentTitle",7,""),p=r(t,"updateopen",7,()=>{}),x=r(t,"backfn",7,()=>{});function A(){l(!1),p()(!1)}function K(){x()()}var u=ie();let D;var y=d(u),z=d(y),H=d(z);{var P=e=>{var n=le(),f=d(n);J(f,{"aria-hidden":"true"}),c(n),N("click",n,K),h(e,n)};C(H,e=>{m()&&e(P)})}var T=v(H,2),Q=d(T,!0);c(T);var j=v(T,2),R=d(j);re(R,{"aria-hidden":"true"}),c(j),c(z);var B=v(z,2),O=d(B),L=d(O);{var U=e=>{var n=de(),f=d(n,!0);c(n),E(()=>M(f,o())),h(e,n)};C(L,e=>{o()&&e(U)})}var V=v(L,2);S(V,t,"default",{}),c(O),c(B);var W=v(B,2);{var X=e=>{var n=ce(),f=d(n);S(f,t,"footer",{}),c(n),h(e,n)};C(W,e=>{g.footer&&e(X)})}c(y);var Y=v(y,2);return ae(Y,{get isvisible(){return l()},dialoglabel:"drawerTitle"}),c(u),E(e=>{D=I(u,1,`mc-drawer mc-drawer--${s()}`,"svelte-1lmi8ae",D,e),w(u,"aria-modal",l()?"true":"false"),w(u,"aria-hidden",!l()),M(Q,i())},[()=>({"is-open":l(),"mc-drawer--extend":b()})]),N("click",j,A),N("keydown",u,e=>e.key==="Escape"&&A()),h(k,u),G({get open(){return l()},set open(e=!1){l(e),a()},get position(){return s()},set position(e="right"){s(e),a()},get extended(){return b()},set extended(e=!1){b(e),a()},get back(){return m()},set back(e=!1){m(e),a()},get title(){return i()},set title(e=""){i(e),a()},get contentTitle(){return o()},set contentTitle(e=""){o(e),a()},get updateopen(){return p()},set updateopen(e=()=>{}){p(e),a()},get backfn(){return x()},set backfn(e=()=>{}){x(e),a()}})}customElements.define("m-drawer",q(be,{open:{},position:{},extended:{},back:{},title:{},contentTitle:{},updateopen:{},backfn:{}},["default","footer"],[],!0));
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-drawer.svelte-132ae2w {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-132ae2w {padding:1rem;}
+}.mc-drawer--left.svelte-132ae2w {justify-content:flex-start;}.mc-drawer--left.svelte-132ae2w .mc-drawer__dialog:where(.svelte-132ae2w) {transform:translate3d(-100%, 0, 0);}
+@media (width >= 680px) {.mc-drawer--extend.svelte-132ae2w .mc-drawer__dialog:where(.svelte-132ae2w) {max-width:39rem;}
+}.mc-drawer__dialog.svelte-132ae2w {background:#ffffff;display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%, 0, 0);transition:visibility 0s linear 0.4s, transform 0.4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 3);border-radius:1rem;}
+@media (width >= 680px) {.mc-drawer__dialog.svelte-132ae2w {max-width:25rem;}
+}.mc-drawer__header.svelte-132ae2w {display:flex;align-items:center;justify-content:center;height:4rem;}.mc-drawer__icon.svelte-132ae2w {height:1.5rem;margin-right:0.75rem;width:1.5rem;}.mc-drawer__title.svelte-132ae2w {font-size:0.875rem;font-weight:600;color:#666666;margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;}.mc-drawer__title.svelte-132ae2w:first-child {padding-left:4rem;}.mc-drawer__back.svelte-132ae2w, .mc-drawer__close.svelte-132ae2w {margin:0.5rem;}.mc-drawer__body.svelte-132ae2w {flex:1 1;overflow:hidden;}.mc-drawer__body.svelte-132ae2w:last-child {margin-bottom:1.5rem;padding-bottom:1.5rem;}.mc-drawer__content.svelte-132ae2w {max-height:100%;overflow:hidden auto;padding:0.5rem 1rem 0;color:#000000;}
+@media (width >= 680px) {.mc-drawer__content.svelte-132ae2w {padding:1.5rem;}
+}.mc-drawer__content__title.svelte-132ae2w {font-size:1.5rem;margin:0 0 0.5rem;}.mc-drawer__footer.svelte-132ae2w {display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:1px solid #cccccc;}
+@media (width >= 680px) {.mc-drawer__footer.svelte-132ae2w {justify-content:center;flex-direction:row;}
+}.mc-drawer-open.svelte-132ae2w {overflow:hidden;}.mc-drawer.is-open.svelte-132ae2w .mc-drawer__dialog:where(.svelte-132ae2w) {pointer-events:all;transform:translate3d(0, 0, 0);transition:visibility 0s linear 0s, transform 0.4s;visibility:visible;}.mc-button.svelte-132ae2w {color:#ffffff;background-color:#464e63;font-weight:600;padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:0.25rem;transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button.svelte-132ae2w:hover {background-color:#343b4c;}.mc-button.svelte-132ae2w:active {background-color:#242938;}.mc-button.svelte-132ae2w:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button__label.svelte-132ae2w {font-size:1rem;}.mc-button__icon.svelte-132ae2w {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-132ae2w:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button.svelte-132ae2w:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-button--s.svelte-132ae2w {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-132ae2w {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-132ae2w {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-132ae2w {padding:0.25rem;}.mc-button--outlined.svelte-132ae2w {color:#242938;border-color:#8891aa;background-color:#ffffff;}.mc-button--outlined.svelte-132ae2w:hover {background-color:#eff1f6;}.mc-button--outlined.svelte-132ae2w:active {background-color:#c9d0de;}.mc-button--outlined.svelte-132ae2w:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--ghost.svelte-132ae2w {color:#242938;background-color:rgba(255, 255, 255, 0.01);}.mc-button--ghost.svelte-132ae2w:hover {background-color:rgba(70, 78, 99, 0.1);}.mc-button--ghost.svelte-132ae2w:active {background-color:rgba(70, 78, 99, 0.2);}.mc-button--ghost.svelte-132ae2w:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--accent.svelte-132ae2w {color:#ffffff;background-color:#117f03;}.mc-button--accent.svelte-132ae2w:hover {background-color:#006902;}.mc-button--accent.svelte-132ae2w:active {background-color:#035010;}.mc-button--accent.svelte-132ae2w:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--danger.svelte-132ae2w {color:#ffffff;background-color:#c61112;}.mc-button--danger.svelte-132ae2w:hover {background-color:#8c0003;}.mc-button--danger.svelte-132ae2w:active {background-color:#530000;}.mc-button--danger.svelte-132ae2w:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--inverse.svelte-132ae2w {--focus-color-mid: #000000;--focus-color-outer: #ffffff;color:#242938;background-color:#ffffff;}.mc-button--inverse.svelte-132ae2w:hover {background-color:#e6e6e6;}.mc-button--inverse.svelte-132ae2w:active {background-color:#cccccc;}.mc-button--inverse.svelte-132ae2w:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--icon-button.svelte-132ae2w {border-radius:100%;padding:0;}.mc-button--outlined.mc-button--standard.svelte-132ae2w {color:#242938;border-color:#8891aa;background-color:#ffffff;}.mc-button--outlined.mc-button--standard.svelte-132ae2w:hover {background-color:#eff1f6;}.mc-button--outlined.mc-button--standard.svelte-132ae2w:active {background-color:#c9d0de;}.mc-button--outlined.mc-button--standard.svelte-132ae2w:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-132ae2w {color:#117f03;border-color:#78be20;background-color:#ffffff;}.mc-button--outlined.mc-button--accent.svelte-132ae2w:hover {background-color:#ebf5de;}.mc-button--outlined.mc-button--accent.svelte-132ae2w:active {background-color:#c5e39e;}.mc-button--outlined.mc-button--accent.svelte-132ae2w:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-132ae2w {color:#c61112;border-color:#ef5f5c;background-color:#ffffff;}.mc-button--outlined.mc-button--danger.svelte-132ae2w:hover {background-color:#fdeaea;}.mc-button--outlined.mc-button--danger.svelte-132ae2w:active {background-color:#f8bcbb;}.mc-button--outlined.mc-button--danger.svelte-132ae2w:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-132ae2w {color:#ffffff;border-color:#ffffff;background-color:rgba(255, 255, 255, 0.01);}.mc-button--outlined.mc-button--inverse.svelte-132ae2w:hover {background-color:rgba(255, 255, 255, 0.1);}.mc-button--outlined.mc-button--inverse.svelte-132ae2w:active {background-color:rgba(255, 255, 255, 0.2);}.mc-button--outlined.mc-button--inverse.svelte-132ae2w:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-132ae2w {color:#242938;background-color:rgba(255, 255, 255, 0.01);}.mc-button--ghost.mc-button--standard.svelte-132ae2w:hover {background-color:rgba(70, 78, 99, 0.1);}.mc-button--ghost.mc-button--standard.svelte-132ae2w:active {background-color:rgba(70, 78, 99, 0.2);}.mc-button--ghost.mc-button--standard.svelte-132ae2w:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-132ae2w {color:#117f03;background-color:rgba(255, 255, 255, 0.01);}.mc-button--ghost.mc-button--accent.svelte-132ae2w:hover {background-color:rgba(17, 127, 3, 0.1);}.mc-button--ghost.mc-button--accent.svelte-132ae2w:active {background-color:rgba(17, 127, 3, 0.2);}.mc-button--ghost.mc-button--accent.svelte-132ae2w:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-132ae2w {color:#c61112;background-color:rgba(255, 255, 255, 0.01);}.mc-button--ghost.mc-button--danger.svelte-132ae2w:hover {background-color:rgba(198, 17, 18, 0.1);}.mc-button--ghost.mc-button--danger.svelte-132ae2w:active {background-color:rgba(198, 17, 18, 0.2);}.mc-button--ghost.mc-button--danger.svelte-132ae2w:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-132ae2w {color:#ffffff;background-color:rgba(255, 255, 255, 0.01);}.mc-button--ghost.mc-button--inverse.svelte-132ae2w:hover {background-color:rgba(255, 255, 255, 0.1);}.mc-button--ghost.mc-button--inverse.svelte-132ae2w:active {background-color:rgba(255, 255, 255, 0.2);}.mc-button--ghost.mc-button--inverse.svelte-132ae2w:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-overlay.svelte-132ae2w {filter:none;}`};function be(h,t){const f=te(t);F(t,!0),ee(h,ie);let c=r(t,"open",7,!1),i=r(t,"position",7,"right"),b=r(t,"extended",7,!1),m=r(t,"back",7,!1),s=r(t,"title",7,""),o=r(t,"contentTitle",7,""),p=r(t,"updateopen",7,()=>{}),x=r(t,"backfn",7,()=>{});function E(){c(!1),p()(!1)}function K(){x()()}var u=se();let H;var y=l(u),z=l(y),O=l(z);{var P=e=>{var n=ce(),w=l(n);J(w,{"aria-hidden":"true"}),d(n),B("click",n,K),g(e,n)};C(O,e=>{m()&&e(P)})}var T=v(O,2),Q=l(T,!0);d(T);var j=v(T,2),R=l(j);re(R,{"aria-hidden":"true"}),d(j),d(z);var N=v(z,2),q=l(N),A=l(q);{var U=e=>{var n=le(),w=l(n,!0);d(n),D(()=>L(w,o())),g(e,n)};C(A,e=>{o()&&e(U)})}var V=v(A,2);M(V,t,"default",{}),d(q),d(N);var W=v(N,2);{var X=e=>{var n=de(),w=l(n);M(w,t,"footer",{}),d(n),g(e,n)};C(W,e=>{f.footer&&e(X)})}d(y);var Y=v(y,2);return ae(Y,{get isvisible(){return c()},dialoglabel:"drawerTitle"}),d(u),D(e=>{H=I(u,1,`mc-drawer mc-drawer--${i()}`,"svelte-132ae2w",H,e),_(u,"aria-modal",c()?"true":"false"),_(u,"aria-hidden",!c()),L(Q,s())},[()=>({"is-open":c(),"mc-drawer--extend":b()})]),B("click",j,E),B("keydown",u,e=>e.key==="Escape"&&E()),g(h,u),G({get open(){return c()},set open(e=!1){c(e),a()},get position(){return i()},set position(e="right"){i(e),a()},get extended(){return b()},set extended(e=!1){b(e),a()},get back(){return m()},set back(e=!1){m(e),a()},get title(){return s()},set title(e=""){s(e),a()},get contentTitle(){return o()},set contentTitle(e=""){o(e),a()},get updateopen(){return p()},set updateopen(e=()=>{}){p(e),a()},get backfn(){return x()},set backfn(e=()=>{}){x(e),a()}})}customElements.define("m-drawer",S(be,{open:{},position:{},extended:{},back:{},title:{},contentTitle:{},updateopen:{},backfn:{}},["default","footer"],[],!0));
 //# sourceMappingURL=Drawer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ArrowBack24/ArrowBack24.svelte","../../../src/components/drawer/Drawer.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'arrow-back-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M8.707 6.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l3.293 3.293a1 1 0 1 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'm-drawer' }} />\n\n<script lang=\"ts\">\n  import ArrowBack24 from '@mozaic-ds/icons-svelte/svelte/ArrowBack24/ArrowBack24.svelte';\n  import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n\n  interface Props {\n    open?: boolean;\n    position?: 'left' | 'right';\n    extended?: boolean;\n    back?: boolean;\n    title: string;\n    contentTitle?: string;\n    updateopen?: (value: boolean) => void;\n    backfn?: () => void;\n    [key: string]: any;\n  }\n\n  let {\n    open = false,\n    position = 'right',\n    extended = false,\n    back = false,\n    title = '',\n    contentTitle = '',\n    updateopen = () => {},\n    backfn = () => {},\n  }: Props = $props();\n\n  function onClose() {\n    open = false;\n    updateopen(false);\n  }\n\n  function onBack() {\n    backfn();\n  }\n</script>\n\n<section\n  class={`mc-drawer mc-drawer--${position}`}\n  class:is-open={open}\n  class:mc-drawer--extend={extended}\n  aria-labelledby=\"drawerTitle\"\n  aria-modal={open ? 'true' : 'false'}\n  tabindex=\"-1\"\n  aria-hidden={!open}\n  on:keydown={(e) => e.key === 'Escape' && onClose()}\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          on:click={onBack}\n        >\n          <ArrowBack24 aria-hidden=\"true\" />\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        on:click={onClose}\n      >\n        <Cross24 aria-hidden=\"true\" />\n      </button>\n    </div>\n\n    <div class=\"mc-drawer__body\">\n      <div class=\"mc-drawer__content\" tabindex=\"0\">\n        {#if contentTitle}\n          <h2 class=\"mc-drawer__content__title\">{contentTitle}</h2>\n        {/if}\n        <slot />\n      </div>\n    </div>\n\n    {#if $$slots.footer}\n      <div class=\"mc-drawer__footer\">\n        <slot name=\"footer\" />\n      </div>\n    {/if}\n  </div>\n  <MOverlay isvisible={open} dialoglabel=\"drawerTitle\" />\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/drawer';\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-overlay {\n    filter: none;\n  }\n</style>\n"],"names":["id","style","className","fill","size","open","position","extended","back","title","contentTitle","updateopen","$.prop","$$props","backfn","onClose","onBack","$$render","consequent","consequent_1","$$slots","consequent_2","classes","$0","$.event","section","$$value"],"mappings":"gsBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,oCAGAJ,GAAE,OAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E;;;;;;;;;;;;+5WCPA,gCAoBI,IAAAE,eAAO,EAAK,EACZC,mBAAW,OAAO,EAClBC,mBAAW,EAAK,EAChBC,eAAO,EAAK,EACZC,gBAAQ,EAAE,EACVC,uBAAe,EAAE,EACjBC,EAAUC,EAAAC,EAAA,aAAA,EAAA,IAAS,CAAA,CAAE,EACrBC,EAAMF,EAAAC,EAAA,SAAA,EAAA,IAAS,CAAA,CAAE,EAGV,SAAAE,GAAU,CACjBV,EAAO,EAAK,EACZM,EAAU,EAAC,EAAK,CAClB,CAES,SAAAK,GAAS,CAChBF,IAAM,CACR,qHAmBkBE,CAAM,kBAJfR,EAAI,GAAAS,EAAAC,CAAA,qKAsBkCR,EAAY,CAAA,CAAA,kBADhDA,EAAY,GAAAO,EAAAE,CAAA,iIAOhBC,EAAQ,QAAMH,EAAAI,CAAA,0DAMAhB,EAAI,0EA7CMC,EAAQ,CAAA,GAAA,iBAAAgB,EAAAC,CAAA,mBAI3BlB,EAAI,EAAG,OAAS,OAAO,qBAErBA,EAAI,CAAA,MAciCI,GAAK,IAnBzC,KAAA,CAAA,UAAAJ,wBACUE,EAAQ,CAAA,iBAsBjBQ,CAAO,EAjBVS,EAAA,UAAAC,EAAA,GAAM,EAAE,MAAQ,UAAYV,GAAO,8CA5BvC,GAAK,qDACD,QAAO,qDACP,GAAK,6CACT,GAAK,+CACJ,GAAE,6DACK,GAAE,wCACE,IAAA,WAAAW,EAAA,IAAA,GAAE,oCACN,IAAA,OAAAA,EAAA,IAAA,GAAE,YAWrB","x_google_ignoreList":[0]}
+{"version":3,"file":"Drawer.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ArrowBack24/ArrowBack24.svelte","../../../src/components/drawer/Drawer.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'arrow-back-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M8.707 6.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l3.293 3.293a1 1 0 1 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'm-drawer' }} />\n\n<script lang=\"ts\">\n  import ArrowBack24 from '@mozaic-ds/icons-svelte/svelte/ArrowBack24/ArrowBack24.svelte';\n  import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n\n  interface Props {\n    open?: boolean;\n    position?: 'left' | 'right';\n    extended?: boolean;\n    back?: boolean;\n    title: string;\n    contentTitle?: string;\n    updateopen?: (value: boolean) => void;\n    backfn?: () => void;\n    [key: string]: any;\n  }\n\n  let {\n    open = false,\n    position = 'right',\n    extended = false,\n    back = false,\n    title = '',\n    contentTitle = '',\n    updateopen = () => {},\n    backfn = () => {},\n  }: Props = $props();\n\n  function onClose() {\n    open = false;\n    updateopen(false);\n  }\n\n  function onBack() {\n    backfn();\n  }\n</script>\n\n<section\n  class={`mc-drawer mc-drawer--${position}`}\n  class:is-open={open}\n  class:mc-drawer--extend={extended}\n  aria-labelledby=\"drawerTitle\"\n  aria-modal={open ? 'true' : 'false'}\n  tabindex=\"-1\"\n  aria-hidden={!open}\n  on:keydown={(e) => e.key === 'Escape' && onClose()}\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          on:click={onBack}\n        >\n          <ArrowBack24 aria-hidden=\"true\" />\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        on:click={onClose}\n      >\n        <Cross24 aria-hidden=\"true\" />\n      </button>\n    </div>\n\n    <div class=\"mc-drawer__body\">\n      <div class=\"mc-drawer__content\" tabindex=\"0\">\n        {#if contentTitle}\n          <h2 class=\"mc-drawer__content__title\">{contentTitle}</h2>\n        {/if}\n        <slot />\n      </div>\n    </div>\n\n    {#if $$slots.footer}\n      <div class=\"mc-drawer__footer\">\n        <slot name=\"footer\" />\n      </div>\n    {/if}\n  </div>\n  <MOverlay isvisible={open} dialoglabel=\"drawerTitle\" />\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/drawer';\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-overlay {\n    filter: none;\n  }\n</style>\n"],"names":["id","style","className","fill","size","open","position","extended","back","title","contentTitle","updateopen","$.prop","$$props","backfn","onClose","onBack","$$render","consequent","consequent_1","$$slots","consequent_2","classes","$0","$.event","section","$$value"],"mappings":"+rBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,oCAGAJ,GAAE,OAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E;;;;;;;;;;;;;;;+pOCPA,gCAoBI,IAAAE,eAAO,EAAK,EACZC,mBAAW,OAAO,EAClBC,mBAAW,EAAK,EAChBC,eAAO,EAAK,EACZC,gBAAQ,EAAE,EACVC,uBAAe,EAAE,EACjBC,EAAUC,EAAAC,EAAA,aAAA,EAAA,IAAS,CAAA,CAAE,EACrBC,EAAMF,EAAAC,EAAA,SAAA,EAAA,IAAS,CAAA,CAAE,EAGV,SAAAE,GAAU,CACjBV,EAAO,EAAK,EACZM,EAAU,EAAC,EAAK,CAClB,CAES,SAAAK,GAAS,CAChBF,IAAM,CACR,qHAmBkBE,CAAM,kBAJfR,EAAI,GAAAS,EAAAC,CAAA,qKAsBkCR,EAAY,CAAA,CAAA,kBADhDA,EAAY,GAAAO,EAAAE,CAAA,iIAOhBC,EAAQ,QAAMH,EAAAI,CAAA,0DAMAhB,EAAI,0EA7CMC,EAAQ,CAAA,GAAA,iBAAAgB,EAAAC,CAAA,mBAI3BlB,EAAI,EAAG,OAAS,OAAO,qBAErBA,EAAI,CAAA,MAciCI,GAAK,IAnBzC,KAAA,CAAA,UAAAJ,wBACUE,EAAQ,CAAA,iBAsBjBQ,CAAO,EAjBVS,EAAA,UAAAC,EAAA,GAAM,EAAE,MAAQ,UAAYV,GAAO,8CA5BvC,GAAK,qDACD,QAAO,qDACP,GAAK,6CACT,GAAK,+CACJ,GAAE,6DACK,GAAE,wCACE,IAAA,WAAAW,EAAA,IAAA,GAAE,oCACN,IAAA,OAAAA,EAAA,IAAA,GAAE,YAWrB","x_google_ignoreList":[0]}

package/dist/components/drawer/Drawer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.stories.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;wBA6BtD,IAAI;AAzBT,wBAyBU;AAEV,KAAK,KAAK,GAAG,QAAQ,CAAC;AAsDtB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAWF,eAAO,MAAM,IAAI,EAAE,KASlB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC"}