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

package/dist/components/modal/Modal.svelte

@@ -95,6 +95,9 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
 .mc-modal {
   box-sizing: border-box;
   inset: 0;
@@ -113,7 +116,7 @@
   }
 }
 .mc-modal__dialog {
-  background: var(--modal-color-background, #ffffff);
+  background: #ffffff;
   display: flex;
   flex-direction: column;
   opacity: 0;
@@ -122,13 +125,14 @@
   transition: visibility 0s linear 0.4s, transform 0.4s ease, opacity 0.4s ease;
   visibility: hidden;
   width: 100%;
-  border-radius: var(--radius-l, 1rem) var(--radius-l, 1rem) 0 0;
+  border-radius: 1rem 1rem 0 0;
   z-index: 3;
+  box-shadow: 0px 10px 20px -4px rgba(36, 41, 56, 0.2);
 }
 @media (width >= 680px) {
   .mc-modal__dialog {
     width: 38rem;
-    border-radius: var(--radius-l, 1rem);
+    border-radius: 1rem;
   }
 }
 .mc-modal.is-open .mc-modal__dialog {
@@ -156,9 +160,9 @@
   height: 2rem;
 }
 .mc-modal__title {
-  font-size: var(--font-title-m, 1.5rem);
-  font-weight: var(--font-weight-semi-bold, 600);
-  color: var(--modal-color-title, #000000);
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #000000;
   margin-bottom: 0.5rem;
   margin-top: 0.5rem;
   padding-right: 3rem;
@@ -169,8 +173,8 @@
   right: 0.75rem;
 }
 .mc-modal__body {
-  font-size: var(--font-size-150, 1rem);
-  color: var(--modal-color-paragraph, #404040);
+  font-size: 1rem;
+  color: #404040;
   padding: 0 1rem;
   margin-bottom: 1rem;
 }
@@ -181,7 +185,7 @@
 }
 .mc-modal__body p {
   margin: 0;
-  line-height: var(--line-height-s, 1.3);
+  line-height: 1.3;
 }
 .mc-modal__footer {
   align-items: stretch;
@@ -211,9 +215,9 @@
 }
 
 .mc-button {
-  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);
+  color: #ffffff;
+  background-color: #464e63;
+  font-weight: 600;
   padding: 0 calc(1rem - 0.125rem);
   min-height: 3rem;
   min-width: 3rem;
@@ -222,7 +226,7 @@
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: var(--button-radius, 0.25rem);
+  border-radius: 0.25rem;
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -233,22 +237,22 @@
   cursor: pointer;
 }
 .mc-button:hover {
-  background-color: var(--button-color-filled-standard-hover-background, #343b4c);
+  background-color: #343b4c;
 }
 .mc-button:active {
-  background-color: var(--button-color-filled-standard-active-background, #242938);
+  background-color: #242938;
 }
 .mc-button:disabled {
-  background-color: var(--button-state-disabled-background, #d9d9d9);
+  background-color: #d9d9d9;
   border-color: transparent;
-  color: var(--button-state-disabled-color, #737373);
+  color: #737373;
   cursor: not-allowed;
 }
 .mc-button .mc-button__label {
-  font-size: var(--font-size-150, 1rem);
+  font-size: 1rem;
 }
 .mc-button__label {
-  font-size: var(--font-size-150, 1rem);
+  font-size: 1rem;
 }
 .mc-button__icon {
   flex-shrink: 0;
@@ -256,13 +260,13 @@
   height: 1.5rem;
 }
 .mc-button:disabled {
-  background-color: var(--button-state-disabled-background, #d9d9d9);
+  background-color: #d9d9d9;
   border-color: transparent;
-  color: var(--button-state-disabled-color, #737373);
+  color: #737373;
   cursor: not-allowed;
 }
 .mc-button: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));
+  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;
 }
@@ -272,7 +276,7 @@
   min-width: 2rem;
 }
 .mc-button--s .mc-button__label {
-  font-size: var(--font-size-100, 0.875rem);
+  font-size: 0.875rem;
 }
 .mc-button--s .mc-button__icon {
   width: 1.25rem;
@@ -288,7 +292,7 @@
   min-width: 3rem;
 }
 .mc-button--m .mc-button__label {
-  font-size: var(--font-size-150, 1rem);
+  font-size: 1rem;
 }
 .mc-button--m .mc-button__icon {
   width: 1.5rem;
@@ -304,7 +308,7 @@
   min-width: 4rem;
 }
 .mc-button--l .mc-button__label {
-  font-size: var(--font-size-200, 1.125rem);
+  font-size: 1.125rem;
 }
 .mc-button--l .mc-button__icon {
   width: 2rem;
@@ -318,90 +322,90 @@
   padding: 0.25rem;
 }
 .mc-button--outlined {
-  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);
+  color: #242938;
+  border-color: #8891aa;
+  background-color: #ffffff;
 }
 .mc-button--outlined:hover {
-  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
+  background-color: #eff1f6;
 }
 .mc-button--outlined:active {
-  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
+  background-color: #c9d0de;
 }
 .mc-button--outlined:disabled {
-  background-color: var(--button-state-disabled-background, #d9d9d9);
+  background-color: #d9d9d9;
   border-color: transparent;
-  color: var(--button-state-disabled-color, #737373);
+  color: #737373;
   cursor: not-allowed;
 }
 .mc-button--ghost {
-  color: var(--button-color-ghost-standard-font, #242938);
-  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
+  color: #242938;
+  background-color: rgba(255, 255, 255, 0.01);
 }
 .mc-button--ghost:hover {
-  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
+  background-color: rgba(70, 78, 99, 0.1);
 }
 .mc-button--ghost:active {
-  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
+  background-color: rgba(70, 78, 99, 0.2);
 }
 .mc-button--ghost:disabled {
-  background-color: var(--button-state-disabled-background, #d9d9d9);
+  background-color: #d9d9d9;
   border-color: transparent;
-  color: var(--button-state-disabled-color, #737373);
+  color: #737373;
   cursor: not-allowed;
 }
 .mc-button--accent {
-  color: var(--button-color-filled-accent-font, #ffffff);
-  background-color: var(--button-color-filled-accent-background, #117f03);
+  color: #ffffff;
+  background-color: #117f03;
 }
 .mc-button--accent:hover {
-  background-color: var(--button-color-filled-accent-hover-background, #006902);
+  background-color: #006902;
 }
 .mc-button--accent:active {
-  background-color: var(--button-color-filled-accent-active-background, #035010);
+  background-color: #035010;
 }
 .mc-button--accent:disabled {
-  background-color: var(--button-state-disabled-background, #d9d9d9);
+  background-color: #d9d9d9;
   border-color: transparent;
-  color: var(--button-state-disabled-color, #737373);
+  color: #737373;
   cursor: not-allowed;
 }
 .mc-button--danger {
-  color: var(--button-color-filled-danger-font, #ffffff);
-  background-color: var(--button-color-filled-danger-background, #c61112);
+  color: #ffffff;
+  background-color: #c61112;
 }
 .mc-button--danger:hover {
-  background-color: var(--button-color-filled-danger-hover-background, #8c0003);
+  background-color: #8c0003;
 }
 .mc-button--danger:active {
-  background-color: var(--button-color-filled-danger-active-background, #530000);
+  background-color: #530000;
 }
 .mc-button--danger:disabled {
-  background-color: var(--button-state-disabled-background, #d9d9d9);
+  background-color: #d9d9d9;
   border-color: transparent;
-  color: var(--button-state-disabled-color, #737373);
+  color: #737373;
   cursor: not-allowed;
 }
 .mc-button--inverse {
-  --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);
+  --focus-color-mid: #000000;
+  --focus-color-outer: #ffffff;
+  color: #242938;
+  background-color: #ffffff;
 }
 .mc-button--inverse:hover {
-  background-color: var(--button-color-filled-inverse-hover-background, #e6e6e6);
+  background-color: #e6e6e6;
 }
 .mc-button--inverse:active {
-  background-color: var(--button-color-filled-inverse-active-background, #cccccc);
+  background-color: #cccccc;
 }
 .mc-button--inverse:disabled {
-  background-color: var(--button-state-disabled-background, #d9d9d9);
+  background-color: #d9d9d9;
   border-color: transparent;
-  color: var(--button-state-disabled-color, #737373);
+  color: #737373;
   cursor: not-allowed;
 }
 .mc-button--icon-button {
-  border-radius: var(--radius-full, 100%);
+  border-radius: 100%;
   padding: 0;
 }
 .mc-button--loading .mc-button__loader {
@@ -413,134 +417,134 @@
   visibility: hidden;
 }
 .mc-button--outlined.mc-button--standard {
-  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);
+  color: #242938;
+  border-color: #8891aa;
+  background-color: #ffffff;
 }
 .mc-button--outlined.mc-button--standard:hover {
-  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
+  background-color: #eff1f6;
 }
 .mc-button--outlined.mc-button--standard:active {
-  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
+  background-color: #c9d0de;
 }
 .mc-button--outlined.mc-button--standard:disabled {
-  background-color: var(--button-state-disabled-background, #d9d9d9);
+  background-color: #d9d9d9;
   border-color: transparent;
-  color: var(--button-state-disabled-color, #737373);
+  color: #737373;
   cursor: not-allowed;
 }
 .mc-button--outlined.mc-button--accent {
-  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);
+  color: #117f03;
+  border-color: #78be20;
+  background-color: #ffffff;
 }
 .mc-button--outlined.mc-button--accent:hover {
-  background-color: var(--button-color-outlined-accent-hover-background, #ebf5de);
+  background-color: #ebf5de;
 }
 .mc-button--outlined.mc-button--accent:active {
-  background-color: var(--button-color-outlined-accent-active-background, #c5e39e);
+  background-color: #c5e39e;
 }
 .mc-button--outlined.mc-button--accent:disabled {
-  background-color: var(--button-state-disabled-background, #d9d9d9);
+  background-color: #d9d9d9;
   border-color: transparent;
-  color: var(--button-state-disabled-color, #737373);
+  color: #737373;
   cursor: not-allowed;
 }
 .mc-button--outlined.mc-button--danger {
-  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);
+  color: #c61112;
+  border-color: #ef5f5c;
+  background-color: #ffffff;
 }
 .mc-button--outlined.mc-button--danger:hover {
-  background-color: var(--button-color-outlined-danger-hover-background, #fdeaea);
+  background-color: #fdeaea;
 }
 .mc-button--outlined.mc-button--danger:active {
-  background-color: var(--button-color-outlined-danger-active-background, #f8bcbb);
+  background-color: #f8bcbb;
 }
 .mc-button--outlined.mc-button--danger:disabled {
-  background-color: var(--button-state-disabled-background, #d9d9d9);
+  background-color: #d9d9d9;
   border-color: transparent;
-  color: var(--button-state-disabled-color, #737373);
+  color: #737373;
   cursor: not-allowed;
 }
 .mc-button--outlined.mc-button--inverse {
-  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));
+  color: #ffffff;
+  border-color: #ffffff;
+  background-color: rgba(255, 255, 255, 0.01);
 }
 .mc-button--outlined.mc-button--inverse:hover {
-  background-color: var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));
+  background-color: rgba(255, 255, 255, 0.1);
 }
 .mc-button--outlined.mc-button--inverse:active {
-  background-color: var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));
+  background-color: rgba(255, 255, 255, 0.2);
 }
 .mc-button--outlined.mc-button--inverse:disabled {
-  background-color: var(--button-state-disabled-background, #d9d9d9);
+  background-color: #d9d9d9;
   border-color: transparent;
-  color: var(--button-state-disabled-color, #737373);
+  color: #737373;
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--standard {
-  color: var(--button-color-ghost-standard-font, #242938);
-  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
+  color: #242938;
+  background-color: rgba(255, 255, 255, 0.01);
 }
 .mc-button--ghost.mc-button--standard:hover {
-  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
+  background-color: rgba(70, 78, 99, 0.1);
 }
 .mc-button--ghost.mc-button--standard:active {
-  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
+  background-color: rgba(70, 78, 99, 0.2);
 }
 .mc-button--ghost.mc-button--standard:disabled {
-  background-color: var(--button-state-disabled-background, #d9d9d9);
+  background-color: #d9d9d9;
   border-color: transparent;
-  color: var(--button-state-disabled-color, #737373);
+  color: #737373;
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--accent {
-  color: var(--button-color-ghost-accent-font, #117f03);
-  background-color: var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));
+  color: #117f03;
+  background-color: rgba(255, 255, 255, 0.01);
 }
 .mc-button--ghost.mc-button--accent:hover {
-  background-color: var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));
+  background-color: rgba(17, 127, 3, 0.1);
 }
 .mc-button--ghost.mc-button--accent:active {
-  background-color: var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));
+  background-color: rgba(17, 127, 3, 0.2);
 }
 .mc-button--ghost.mc-button--accent:disabled {
-  background-color: var(--button-state-disabled-background, #d9d9d9);
+  background-color: #d9d9d9;
   border-color: transparent;
-  color: var(--button-state-disabled-color, #737373);
+  color: #737373;
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--danger {
-  color: var(--button-color-ghost-danger-font, #c61112);
-  background-color: var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));
+  color: #c61112;
+  background-color: rgba(255, 255, 255, 0.01);
 }
 .mc-button--ghost.mc-button--danger:hover {
-  background-color: var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));
+  background-color: rgba(198, 17, 18, 0.1);
 }
 .mc-button--ghost.mc-button--danger:active {
-  background-color: var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));
+  background-color: rgba(198, 17, 18, 0.2);
 }
 .mc-button--ghost.mc-button--danger:disabled {
-  background-color: var(--button-state-disabled-background, #d9d9d9);
+  background-color: #d9d9d9;
   border-color: transparent;
-  color: var(--button-state-disabled-color, #737373);
+  color: #737373;
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--inverse {
-  color: var(--button-color-ghost-inverse-font, #ffffff);
-  background-color: var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));
+  color: #ffffff;
+  background-color: rgba(255, 255, 255, 0.01);
 }
 .mc-button--ghost.mc-button--inverse:hover {
-  background-color: var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));
+  background-color: rgba(255, 255, 255, 0.1);
 }
 .mc-button--ghost.mc-button--inverse:active {
-  background-color: var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));
+  background-color: rgba(255, 255, 255, 0.2);
 }
 .mc-button--ghost.mc-button--inverse:disabled {
-  background-color: var(--button-state-disabled-background, #d9d9d9);
+  background-color: #d9d9d9;
   border-color: transparent;
-  color: var(--button-state-disabled-color, #737373);
+  color: #737373;
   cursor: not-allowed;
 }</style>

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA8EH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;;;;;;;;UAAmF,CAAC;AAC7E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA8EH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;;;;;;;;UAAqF,CAAC;AAC/E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}

package/dist/components/numberbadge/NumberBadge.js

@@ -0,0 +1,7 @@
+import{c as u,p as m,a as b,b as o,f as g,t as p,u as v,e as h,g as j,h as z,i as x,j as i,d as y,r as _}from"../../custom-element.js";var w=g("<div> </div>");const k={hash:"svelte-1o1cjvu",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-number-badge.svelte-1o1cjvu {color:#ffffff;background-color:#464e63;height:1rem;min-width:1rem;padding-inline:0.125rem;font-size:0.625rem;border-radius:1rem;font-weight:600;display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;line-height:1;}.mc-number-badge--m.svelte-1o1cjvu {height:1.5rem;min-width:1.5rem;padding-inline:0.25rem;font-size:0.75rem;}.mc-number-badge--accent.svelte-1o1cjvu {color:#ffffff;background-color:#117f03;}.mc-number-badge--danger.svelte-1o1cjvu {color:#ffffff;background-color:#c61112;}.mc-number-badge--inverse.svelte-1o1cjvu {color:#464e63;background-color:#ffffff;}`};function D(l,a){m(a,!0),b(l,k);let n=o(a,"label",7,""),t=o(a,"appearance",7,"standard"),r=o(a,"size",7,"s");function d(e){const c=["mc-number-badge"];return t()&&c.push(`mc-number-badge--${t()}`),r()&&c.push(`mc-number-badge--${r()}`),c.join(" ")}var s=w(),f=y(s,!0);return _(s),p(e=>{h(s,1,e,"svelte-1o1cjvu"),j(f,n())},[()=>v(d(t()))]),z(l,s),x({get label(){return n()},set label(e=""){n(e),i()},get appearance(){return t()},set appearance(e="standard"){t(e),i()},get size(){return r()},set size(e="s"){r(e),i()}})}customElements.define("m-number-badge",u(D,{label:{},appearance:{},size:{}},[],[],!0));export{D as N};
+//# sourceMappingURL=NumberBadge.js.map

package/dist/components/numberbadge/NumberBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberBadge.js","sources":["../../../src/components/numberbadge/NumberBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-number-badge' }} />\n\n<script lang=\"ts\">\n  import type { BadgeStyle, BadgeSize } from './NumberBadge.types';\n  interface Props {\n    label: string;\n    appearance: BadgeStyle;\n    size: BadgeSize;\n  }\n\n  let { label = '', appearance = 'standard', size = 's' }: Props = $props();\n\n  function setClasses(style: BadgeStyle) {\n    const classes = ['mc-number-badge'];\n\n    if (appearance) {\n      classes.push(`mc-number-badge--${appearance}`);\n    }\n\n    if (size) {\n      classes.push(`mc-number-badge--${size}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<div class={setClasses(appearance)}>\n  {label}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/number-badge';\n</style>\n"],"names":["label","appearance","size","setClasses","style","classes","$.clsx"],"mappings":";;;;;0oBAAA,gBAUQ,IAAAA,gBAAQ,EAAE,EAAEC,qBAAa,UAAU,EAAEC,eAAO,GAAG,WAE5CC,EAAWC,EAAmB,CAC/B,MAAAC,GAAW,iBAAiB,EAE9B,OAAAJ,EAAU,GACZI,EAAQ,KAAI,oBAAqBJ,EAAU,CAAA,EAAA,EAGzCC,EAAI,GACNG,EAAQ,KAAI,oBAAqBH,EAAI,CAAA,EAAA,EAGhCG,EAAQ,KAAK,GAAG,CACzB,qEAICL,GAAK,GADI,CAAA,IAAAM,EAAAH,EAAWF,EAAU,CAAA,CAAA,CAAA,iDAjBjB,GAAE,yDAAe,WAAU,6CAAS,IAAG,YAevD"}

package/dist/{stories/number-badge → components/numberbadge}/NumberBadge.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/html-vite';
+import type { Meta } from '@storybook/html-vite';
 /**
  * A Number badge indicates the status of an entity and can evolve at any time.
  *
@@ -7,8 +7,8 @@ import type { StoryFn, Meta } from '@storybook/html-vite';
  */
 declare const _default: Meta;
 export default _default;
-export declare const Default: StoryFn;
-export declare const CustomLabel: StoryFn;
-export declare const AccentStyle: StoryFn;
-export declare const SmallSize: StoryFn;
+export declare const Default: any;
+export declare const CustomLabel: any;
+export declare const AccentStyle: any;
+export declare const SmallSize: any;
 //# sourceMappingURL=NumberBadge.stories.d.ts.map

package/dist/components/numberbadge/NumberBadge.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberBadge.stories.d.ts","sourceRoot":"","sources":["../../../src/components/numberbadge/NumberBadge.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBA6BE,IAAI;AA3BT,wBA2BU;AAWV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAOzC,eAAO,MAAM,WAAW,KAAoB,CAAC;AAO7C,eAAO,MAAM,WAAW,KAAoB,CAAC;AAO7C,eAAO,MAAM,SAAS,KAAoB,CAAC"}

package/dist/components/{number-badge → numberbadge}/NumberBadge.svelte

@@ -1,7 +1,7 @@
 <svelte:options customElement={{ tag: 'm-number-badge' }} />
 
 <script lang="ts">
-  import type { BadgeStyle, BadgeSize } from './number-badge.types';
+  import type { BadgeStyle, BadgeSize } from './NumberBadge.types';
   interface Props {
     label: string;
     appearance: BadgeStyle;
@@ -32,15 +32,18 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
 .mc-number-badge {
-  color: var(--number-badge-color-text-standard, #ffffff);
-  background-color: var(--number-badge-color-background-standard, #464e63);
+  color: #ffffff;
+  background-color: #464e63;
   height: 1rem;
   min-width: 1rem;
   padding-inline: 0.125rem;
-  font-size: var(--font-size-25, 0.625rem);
-  border-radius: var(--radius-l, 1rem);
-  font-weight: var(--font-weight-semi-bold, 600);
+  font-size: 0.625rem;
+  border-radius: 1rem;
+  font-weight: 600;
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
@@ -51,17 +54,17 @@
   height: 1.5rem;
   min-width: 1.5rem;
   padding-inline: 0.25rem;
-  font-size: var(--font-size-50, 0.75rem);
+  font-size: 0.75rem;
 }
 .mc-number-badge--accent {
-  color: var(--number-badge-color-text-accent, #ffffff);
-  background-color: var(--number-badge-color-background-accent, #117f03);
+  color: #ffffff;
+  background-color: #117f03;
 }
 .mc-number-badge--danger {
-  color: var(--number-badge-color-text-danger, #ffffff);
-  background-color: var(--number-badge-color-background-danger, #c61112);
+  color: #ffffff;
+  background-color: #c61112;
 }
 .mc-number-badge--inverse {
-  color: var(--number-badge-color-text-inverse, #464e63);
-  background-color: var(--number-badge-color-background-inverse, #ffffff);
+  color: #464e63;
+  background-color: #ffffff;
 }</style>

package/dist/components/{number-badge → numberbadge}/NumberBadge.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { BadgeStyle, BadgeSize } from './number-badge.types';
+import type { BadgeStyle, BadgeSize } from './NumberBadge.types';
 interface Props {
     label: string;
     appearance: BadgeStyle;

package/dist/components/numberbadge/NumberBadge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/numberbadge/NumberBadge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE/D,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,UAAU,CAAC;IACvB,IAAI,EAAE,SAAS,CAAC;CACjB;AAgCH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/{number-badge/number-badge.types.d.ts → numberbadge/NumberBadge.types.d.ts}

@@ -1,3 +1,3 @@
 export type BadgeStyle = 'error' | 'accent' | 'inverse' | 'standard';
 export type BadgeSize = 's' | 'm';
-//# sourceMappingURL=number-badge.types.d.ts.map
+//# sourceMappingURL=NumberBadge.types.d.ts.map

package/dist/components/numberbadge/NumberBadge.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberBadge.types.d.ts","sourceRoot":"","sources":["../../../src/components/numberbadge/NumberBadge.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AACrE,MAAM,MAAM,SAAS,GAAG,GAAG,GAAG,GAAG,CAAC"}

package/dist/components/overlay/Overlay.js

@@ -1,4 +1,7 @@
-import{c as y,a as m,b as u,d as v,f,g as n,t as p,i as g,j as _,l as h,m as d,r as b}from"../../custom-element.js";import{s as x}from"../../slot.js";import{s as q}from"../../attributes.js";var k=f('<div><div role="dialog" tabindex="-1"><!></div></div>');const z={hash:"svelte-1q5sy97",code:`/**
+import{c as y,p as m,a as f,b as n,f as u,d as v,t as p,e as g,h,i as _,j as d,r as b}from"../../custom-element.js";import{s as x}from"../../slot.js";import{s as w}from"../../attributes.js";var z=u('<div><div role="dialog" tabindex="-1"><!></div></div>');const D={hash:"svelte-178bhy7",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-overlay.svelte-1q5sy97 {background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:var(--overlay-z-index, 2);}.mc-overlay.is-visible.svelte-1q5sy97 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}`};function O(o,s){m(s,!0),u(o,z);let a=v(s,"isvisible",7,!1),l=v(s,"dialoglabel",7);var i=k();let r;var t=n(i),c=n(t);return x(c,s,"default",{}),b(t),b(i),p(e=>{r=g(i,1,"mc-overlay svelte-1q5sy97",null,r,e),q(t,"aria-labelledby",l())},[()=>({"is-visible":a()})]),_(o,i),h({get isvisible(){return a()},set isvisible(e=!1){a(e),d()},get dialoglabel(){return l()},set dialoglabel(e){l(e),d()}})}customElements.define("m-overlay",y(O,{isvisible:{},dialoglabel:{}},["default"],[],!0));export{O};
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-overlay.svelte-178bhy7 {background-color:rgba(0, 0, 0, 0.5);inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:var(--overlay-z-index, 2);}.mc-overlay.is-visible.svelte-178bhy7 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}`};function O(o,i){m(i,!0),f(o,D);let t=n(i,"isvisible",7,!1),a=n(i,"dialoglabel",7);var s=z();let r;var l=v(s),c=v(l);return x(c,i,"default",{}),b(l),b(s),p(e=>{r=g(s,1,"mc-overlay svelte-178bhy7",null,r,e),w(l,"aria-labelledby",a())},[()=>({"is-visible":t()})]),h(o,s),_({get isvisible(){return t()},set isvisible(e=!1){t(e),d()},get dialoglabel(){return a()},set dialoglabel(e){a(e),d()}})}customElements.define("m-overlay",y(O,{isvisible:{},dialoglabel:{}},["default"],[],!0));export{O};
 //# sourceMappingURL=Overlay.js.map

package/dist/components/overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.svelte"],"sourcesContent":["<svelte:options customElement=\"m-overlay\" />\n\n<script lang=\"ts\">\n  interface Props {\n    isvisible?: boolean;\n    dialoglabel: string;\n  }\n\n  let { isvisible = false, dialoglabel }: Props = $props();\n</script>\n\n<div class=\"mc-overlay\" class:is-visible={isvisible}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-labelledby={dialoglabel}>\n    <!-- @slot Use this slot to insert a centered content inside the overlay -->\n    <slot />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/overlay';\n</style>\n"],"names":["isvisible","dialoglabel","$.prop","$$props"],"mappings":";;qYAAA,gBAQQ,IAAAA,oBAAY,EAAK,EAAEC,EAAWC,EAAAC,EAAA,cAAA,CAAA,mJAIcF,GAAW,uBADrBD,EAAS,GAAA,yDAH/B,GAAK,uEACzB"}
+{"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.svelte"],"sourcesContent":["<svelte:options customElement=\"m-overlay\" />\n\n<script lang=\"ts\">\n  interface Props {\n    isvisible?: boolean;\n    dialoglabel: string;\n  }\n\n  let { isvisible = false, dialoglabel }: Props = $props();\n</script>\n\n<div class=\"mc-overlay\" class:is-visible={isvisible}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-labelledby={dialoglabel}>\n    <!-- @slot Use this slot to insert a centered content inside the overlay -->\n    <slot />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/overlay';\n</style>\n"],"names":["isvisible","dialoglabel","$.prop","$$props"],"mappings":";;;;;oWAAA,gBAQQ,IAAAA,oBAAY,EAAK,EAAEC,EAAWC,EAAAC,EAAA,cAAA,CAAA,mJAIcF,GAAW,uBADrBD,EAAS,GAAA,yDAH/B,GAAK,uEACzB"}

package/dist/{stories → components}/overlay/Overlay.stories.d.ts

@@ -1,8 +1,8 @@
-import type { StoryFn, Meta } from '@storybook/html-vite';
+import type { Meta } from '@storybook/html-vite';
 /**
  * The `MOverlay` component is the **Svelte / WebComponent** implementation of the **Overlay** component of Mozaic Design System.
  */
 declare const _default: Meta;
 export default _default;
-export declare const Default: StoryFn;
+export declare const Default: any;
 //# sourceMappingURL=Overlay.stories.d.ts.map

package/dist/components/overlay/Overlay.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.stories.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/Overlay.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;GAEG;wBAWE,IAAI;AATT,wBASU;AA2BV,eAAO,MAAM,OAAO,KAAoB,CAAC"}