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

package/dist/components/drawer/Drawer.svelte

@@ -90,6 +90,9 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
 .mc-drawer {
   box-sizing: border-box;
   inset: 0;
@@ -118,7 +121,7 @@
   }
 }
 .mc-drawer__dialog {
-  background: var(--drawer-color-background, #ffffff);
+  background: #ffffff;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -128,7 +131,7 @@
   visibility: hidden;
   width: 100%;
   z-index: var(--drawer-z-index, 3);
-  border-radius: var(--radius-l, 1rem);
+  border-radius: 1rem;
 }
 @media (width >= 680px) {
   .mc-drawer__dialog {
@@ -147,9 +150,9 @@
   width: 1.5rem;
 }
 .mc-drawer__title {
-  font-size: var(--font-body-s, 0.875rem);
-  font-weight: var(--font-weight-semi-bold, 600);
-  color: var(--drawer-color-title, #666666);
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #666666;
   margin-bottom: 0;
   margin-top: 0;
   text-align: center;
@@ -173,7 +176,7 @@
   max-height: 100%;
   overflow: hidden auto;
   padding: 0.5rem 1rem 0;
-  color: var(--drawer-color-paragraph, #000000);
+  color: #000000;
 }
 @media (width >= 680px) {
   .mc-drawer__content {
@@ -181,7 +184,7 @@
   }
 }
 .mc-drawer__content__title {
-  font-size: var(--font-title-m, 1.5rem);
+  font-size: 1.5rem;
   margin: 0 0 0.5rem;
 }
 .mc-drawer__footer {
@@ -189,7 +192,7 @@
   flex-direction: column;
   gap: 1rem;
   padding: 1rem 1.5rem;
-  border-top: var(--border-s, 1px) solid var(--divider-color-primary, #cccccc);
+  border-top: 1px solid #cccccc;
 }
 @media (width >= 680px) {
   .mc-drawer__footer {
@@ -208,9 +211,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;
@@ -219,7 +222,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;
@@ -230,22 +233,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;
@@ -253,13 +256,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;
 }
@@ -269,7 +272,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;
@@ -285,7 +288,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;
@@ -301,7 +304,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;
@@ -315,90 +318,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 {
@@ -410,135 +413,135 @@
   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;
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAQE,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAkEH,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,MAAM;;;;;;;;UAAmF,CAAC;AAC9E,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAQE,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAkEH,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,MAAM;;;;;;;;UAAqF,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}

package/dist/components/field/Field.js

@@ -1,7 +1,10 @@
-import{c as G,a as H,b as I,d as l,f as p,s as c,g as n,t as _,j as h,l as J,m as t,r,k as u,i as K}from"../../custom-element.js";import{i as Z}from"../../if.js";import{s as N}from"../../slot.js";import{s as z}from"../../attributes.js";var O=p('<span class="mc-field__requirement svelte-af7nn5" aria-hidden="true"> </span>'),P=p('<span class="mc-field__help svelte-af7nn5"> </span>'),Q=p("<span> </span>"),R=p('<div class="mc-field"><label class="mc-field__label svelte-af7nn5"> <!></label> <!> <div class="mc-field__content svelte-af7nn5"><!></div> <!></div>');const T={hash:"svelte-af7nn5",code:`/**
+import{c as G,p as H,a as I,b as i,f as p,s as f,d as r,t as _,h,i as J,j as a,r as d,g as u,e as K}from"../../custom-element.js";import{i as Z}from"../../if.js";import{s as N}from"../../slot.js";import{s as C}from"../../attributes.js";var O=p('<span class="mc-field__requirement svelte-7mv9l6" aria-hidden="true"> </span>'),P=p('<span class="mc-field__help svelte-7mv9l6"> </span>'),Q=p("<span> </span>"),R=p('<div class="mc-field"><label class="mc-field__label svelte-7mv9l6"> <!></label> <!> <div class="mc-field__content svelte-7mv9l6"><!></div> <!></div>');const T={hash:"svelte-7mv9l6",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
-/* stylelint-disable string-no-newline */.mc-field__label.svelte-af7nn5 {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000);}.mc-field__requirement.svelte-af7nn5, .mc-field__help.svelte-af7nn5 {font-size:var(--font-size-50, 0.75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666);}.mc-field__help.svelte-af7nn5 {display:block;margin-top:0.125rem;}.mc-field__content.svelte-af7nn5 {margin-top:0.5rem;}.mc-field__validation-message.svelte-af7nn5 {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:0.25rem;margin-top:0.25rem;}.mc-field__validation-message.is-valid.svelte-af7nn5::before, .mc-field__validation-message.is-invalid.svelte-af7nn5::before {content:"";height:1.25rem;width:1.25rem;}.mc-field__validation-message.is-valid.svelte-af7nn5 {color:var(--field-color-validation-valid, #117f03);}.mc-field__validation-message.is-valid.svelte-af7nn5::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");}.mc-field__validation-message.is-invalid.svelte-af7nn5 {color:var(--field-color-validation-invalid, #c61112);}.mc-field__validation-message.is-invalid.svelte-af7nn5::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/* stylelint-disable string-no-newline */.mc-field__label.svelte-7mv9l6 {font-size:0.875rem;line-height:1.3;font-weight:400;color:#000000;}.mc-field__requirement.svelte-7mv9l6, .mc-field__help.svelte-7mv9l6 {font-size:0.75rem;line-height:1.5;font-weight:400;vertical-align:top;color:#666666;}.mc-field__help.svelte-7mv9l6 {display:block;margin-top:0.125rem;}.mc-field__content.svelte-7mv9l6 {margin-top:0.5rem;}.mc-field__validation-message.svelte-7mv9l6 {font-size:0.875rem;line-height:1.5;display:inline-flex;gap:0.25rem;margin-top:0.25rem;}.mc-field__validation-message.is-valid.svelte-7mv9l6::before, .mc-field__validation-message.is-invalid.svelte-7mv9l6::before {content:"";height:1.25rem;width:1.25rem;}.mc-field__validation-message.is-valid.svelte-7mv9l6 {color:#117f03;}.mc-field__validation-message.is-valid.svelte-7mv9l6::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='%23117f03' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");}.mc-field__validation-message.is-invalid.svelte-7mv9l6 {color:#c61112;}.mc-field__validation-message.is-invalid.svelte-7mv9l6::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='%23c61112' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");}
 
-/* stylelint-enable string-no-newline */`};function U(C,a){H(a,!0),I(C,T);let b=l(a,"id",7),x=l(a,"label",7),d=l(a,"requirementtext",7),v=l(a,"helpid",7),m=l(a,"helptext",7),w=l(a,"messageid",7),q=l(a,"message",7),f=l(a,"isinvalid",7,!1),o=l(a,"isvalid",7,!1);var y=R(),g=n(y),k=n(g),B=c(k);{var j=e=>{var i=O(),s=n(i,!0);r(i),_(()=>u(s,d())),h(e,i)};Z(B,e=>{d()&&e(j)})}r(g);var M=c(g,2);{var D=e=>{var i=P(),s=n(i,!0);r(i),_(()=>{z(i,"id",v()),u(s,m())}),h(e,i)};Z(M,e=>{v()&&m()&&e(D)})}var E=c(M,2),F=n(E);N(F,a,"default",{}),r(E);var L=c(E,2);{var S=e=>{var i=Q();let s;var V=n(i,!0);r(i),_(A=>{z(i,"id",w()),s=K(i,1,"mc-field__validation-message svelte-af7nn5",null,s,A),u(V,q())},[()=>({"is-valid":o(),"is-invalid":f()})]),h(e,i)};Z(L,e=>{(f()||o())&&e(S)})}return r(y),_(()=>{z(g,"for",b()),u(k,`${x()??""} `)}),h(C,y),J({get id(){return b()},set id(e){b(e),t()},get label(){return x()},set label(e){x(e),t()},get requirementtext(){return d()},set requirementtext(e){d(e),t()},get helpid(){return v()},set helpid(e){v(e),t()},get helptext(){return m()},set helptext(e){m(e),t()},get messageid(){return w()},set messageid(e){w(e),t()},get message(){return q()},set message(e){q(e),t()},get isinvalid(){return f()},set isinvalid(e=!1){f(e),t()},get isvalid(){return o()},set isvalid(e=!1){o(e),t()}})}customElements.define("m-field",G(U,{id:{},label:{},requirementtext:{},helpid:{},helptext:{},messageid:{},message:{},isinvalid:{},isvalid:{}},["default"],[],!0));
+/* stylelint-enable string-no-newline */`};function U(M,t){H(t,!0),I(M,T);let b=i(t,"id",7),x=i(t,"label",7),n=i(t,"requirementtext",7),m=i(t,"helpid",7),v=i(t,"helptext",7),w=i(t,"messageid",7),y=i(t,"message",7),o=i(t,"isinvalid",7,!1),c=i(t,"isvalid",7,!1);var q=R(),g=r(q),k=r(g),B=f(k);{var D=e=>{var l=O(),s=r(l,!0);d(l),_(()=>u(s,n())),h(e,l)};Z(B,e=>{n()&&e(D)})}d(g);var z=f(g,2);{var j=e=>{var l=P(),s=r(l,!0);d(l),_(()=>{C(l,"id",m()),u(s,v())}),h(e,l)};Z(z,e=>{m()&&v()&&e(j)})}var E=f(z,2),F=r(E);N(F,t,"default",{}),d(E);var L=f(E,2);{var S=e=>{var l=Q();let s;var V=r(l,!0);d(l),_(A=>{C(l,"id",w()),s=K(l,1,"mc-field__validation-message svelte-7mv9l6",null,s,A),u(V,y())},[()=>({"is-valid":c(),"is-invalid":o()})]),h(e,l)};Z(L,e=>{(o()||c())&&e(S)})}return d(q),_(()=>{C(g,"for",b()),u(k,`${x()??""} `)}),h(M,q),J({get id(){return b()},set id(e){b(e),a()},get label(){return x()},set label(e){x(e),a()},get requirementtext(){return n()},set requirementtext(e){n(e),a()},get helpid(){return m()},set helpid(e){m(e),a()},get helptext(){return v()},set helptext(e){v(e),a()},get messageid(){return w()},set messageid(e){w(e),a()},get message(){return y()},set message(e){y(e),a()},get isinvalid(){return o()},set isinvalid(e=!1){o(e),a()},get isvalid(){return c()},set isvalid(e=!1){c(e),a()}})}customElements.define("m-field",G(U,{id:{},label:{},requirementtext:{},helpid:{},helptext:{},messageid:{},message:{},isinvalid:{},isvalid:{}},["default"],[],!0));
 //# sourceMappingURL=Field.js.map

package/dist/components/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../src/components/field/Field.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-field',\n  }}\n/>\n\n<script lang=\"ts\">\n  interface Props {\n    id: string;\n    label: string;\n    requirementtext: string;\n    helpid: string;\n    helptext: string;\n    messageid: string;\n    message: string;\n    isinvalid?: boolean;\n    isvalid?: boolean;\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    label,\n    requirementtext,\n    helpid,\n    helptext,\n    messageid,\n    message,\n    isinvalid = false,\n    isvalid = false,\n  }: Props = $props();\n</script>\n\n<div class=\"mc-field\">\n  <label for={id} class=\"mc-field__label\">\n    {label}\n    {#if requirementtext}\n      <span class=\"mc-field__requirement\" aria-hidden=\"true\">\n        {requirementtext}\n      </span>\n    {/if}\n  </label>\n  {#if helpid && helptext}\n    <span id={helpid} class=\"mc-field__help\">\n      {helptext}\n    </span>\n  {/if}\n  <div class=\"mc-field__content\">\n    <slot />\n  </div>\n  {#if isinvalid || isvalid}\n    <span\n      id={messageid}\n      class=\"mc-field__validation-message\"\n      class:is-valid={isvalid}\n      class:is-invalid={isinvalid}\n    >\n      {message}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["id","$.prop","$$props","label","requirementtext","helpid","helptext","messageid","message","isinvalid","isvalid","$$render","consequent","consequent_1","consequent_2"],"mappings":";;;;;0DAAA,oBAqBIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EACLE,EAAeH,EAAAC,EAAA,kBAAA,CAAA,EACfG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAOP,EAAAC,EAAA,UAAA,CAAA,EACPO,oBAAY,EAAK,EACjBC,kBAAU,EAAK,+EASVN,EAAe,CAAA,CAAA,kBAFfA,EAAe,GAAAO,EAAAC,CAAA,0EAOVP,GAAM,MACbC,GAAQ,oBAFRD,EAAM,GAAIC,KAAQK,EAAAE,CAAA,2HAUfN,GAAS,qEAKZC,GAAO,GAHQ,CAAA,KAAA,CAAA,WAAAE,iBACED,EAAS,GAAA,oBAL1BA,EAAS,GAAIC,MAAOC,EAAAG,CAAA,iCAhBbd,GAAE,SACXG,EAAK,GAAA,EAAA,GAAA,qaAPM,GAAK,mDACP,GAAK,YAEnB"}
+{"version":3,"file":"Field.js","sources":["../../../src/components/field/Field.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-field',\n  }}\n/>\n\n<script lang=\"ts\">\n  interface Props {\n    id: string;\n    label: string;\n    requirementtext: string;\n    helpid: string;\n    helptext: string;\n    messageid: string;\n    message: string;\n    isinvalid?: boolean;\n    isvalid?: boolean;\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    label,\n    requirementtext,\n    helpid,\n    helptext,\n    messageid,\n    message,\n    isinvalid = false,\n    isvalid = false,\n  }: Props = $props();\n</script>\n\n<div class=\"mc-field\">\n  <label for={id} class=\"mc-field__label\">\n    {label}\n    {#if requirementtext}\n      <span class=\"mc-field__requirement\" aria-hidden=\"true\">\n        {requirementtext}\n      </span>\n    {/if}\n  </label>\n  {#if helpid && helptext}\n    <span id={helpid} class=\"mc-field__help\">\n      {helptext}\n    </span>\n  {/if}\n  <div class=\"mc-field__content\">\n    <slot />\n  </div>\n  {#if isinvalid || isvalid}\n    <span\n      id={messageid}\n      class=\"mc-field__validation-message\"\n      class:is-valid={isvalid}\n      class:is-invalid={isinvalid}\n    >\n      {message}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["id","$.prop","$$props","label","requirementtext","helpid","helptext","messageid","message","isinvalid","isvalid","$$render","consequent","consequent_1","consequent_2"],"mappings":";;;;;;;;0DAAA,oBAqBIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EACLE,EAAeH,EAAAC,EAAA,kBAAA,CAAA,EACfG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAOP,EAAAC,EAAA,UAAA,CAAA,EACPO,oBAAY,EAAK,EACjBC,kBAAU,EAAK,+EASVN,EAAe,CAAA,CAAA,kBAFfA,EAAe,GAAAO,EAAAC,CAAA,0EAOVP,GAAM,MACbC,GAAQ,oBAFRD,EAAM,GAAIC,KAAQK,EAAAE,CAAA,2HAUfN,GAAS,qEAKZC,GAAO,GAHQ,CAAA,KAAA,CAAA,WAAAE,iBACED,EAAS,GAAA,oBAL1BA,EAAS,GAAIC,MAAOC,EAAAG,CAAA,iCAhBbd,GAAE,SACXG,EAAK,GAAA,EAAA,GAAA,qaAPM,GAAK,mDACP,GAAK,YAEnB"}

package/dist/{stories → components}/field/Field.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/html-vite';
+import type { Meta } from '@storybook/html-vite';
 /**
  * > Fields enable the user to input content in a form. It displays a label, useful informations, an input and gives validation feedback.
  *
@@ -7,10 +7,10 @@ import type { StoryFn, Meta } from '@storybook/html-vite';
  */
 declare const _default: Meta<unknown>;
 export default _default;
-export declare const Default: StoryFn;
-export declare const Requierement: StoryFn;
-export declare const Helper: StoryFn;
-export declare const FullExample: StoryFn;
-export declare const Valid: StoryFn;
-export declare const Invalid: StoryFn;
+export declare const Default: any;
+export declare const Requierement: any;
+export declare const Helper: any;
+export declare const FullExample: any;
+export declare const Valid: any;
+export declare const Invalid: any;
 //# sourceMappingURL=Field.stories.d.ts.map

package/dist/components/field/Field.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.stories.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE1D;;;;;GAKG;wBAoDE,IAAI,CAAC,OAAO,CAAC;AAlDlB,wBAkDmB;AAqBnB,eAAO,MAAM,OAAO,KAA2B,CAAC;AAuChD,eAAO,MAAM,YAAY,KAAoB,CAAC;AAQ9C,eAAO,MAAM,MAAM,KAAoB,CAAC;AAQxC,eAAO,MAAM,WAAW,KAAoB,CAAC;AAU7C,eAAO,MAAM,KAAK,KAAoB,CAAC;AASvC,eAAO,MAAM,OAAO,KAAoB,CAAC"}

package/dist/components/field/Field.svelte

@@ -63,22 +63,25 @@
 <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-field__label, .mc-field__legend {
-  font-size: var(--font-size-100, 0.875rem);
-  line-height: var(--line-height-s, 1.3);
-  font-weight: var(--font-weight-regular, 400);
-  color: var(--field-color-label, #000000);
+  font-size: 0.875rem;
+  line-height: 1.3;
+  font-weight: 400;
+  color: #000000;
 }
 .mc-field__legend {
   padding-inline: 0;
 }
 .mc-field__requirement, .mc-field__help {
-  font-size: var(--font-size-50, 0.75rem);
-  line-height: var(--line-height-m, 1.5);
-  font-weight: var(--font-weight-regular, 400);
+  font-size: 0.75rem;
+  line-height: 1.5;
+  font-weight: 400;
   vertical-align: top;
-  color: var(--field-color-requirement, #666666);
+  color: #666666;
 }
 .mc-field__help {
   display: block;
@@ -88,8 +91,8 @@
   margin-top: 0.5rem;
 }
 .mc-field__validation-message {
-  font-size: var(--font-size-100, 0.875rem);
-  line-height: var(--line-height-m, 1.5);
+  font-size: 0.875rem;
+  line-height: 1.5;
   display: inline-flex;
   gap: 0.25rem;
   margin-top: 0.25rem;
@@ -100,19 +103,19 @@
   width: 1.25rem;
 }
 .mc-field__validation-message.is-valid {
-  color: var(--field-color-validation-valid, #117f03);
+  color: #117f03;
 }
 .mc-field__validation-message.is-valid::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='%23117f03' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");
 }
 .mc-field__validation-message.is-invalid {
-  color: var(--field-color-validation-invalid, #c61112);
+  color: #c61112;
 }
 .mc-field__validation-message.is-invalid::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='%23c61112' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");
 }
 .mc-field__validation-message.is-loading {
-  color: var(--field-color-validation-loading, #666666);
+  color: #666666;
 }
 .mc-field--group {
   border-width: 0;

package/dist/components/field/Field.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAiDH,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":"Field.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAiDH,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"}