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

package/dist/components/drawer/README.md

@@ -0,0 +1,29 @@
+# `m-drawer`
+
+A drawer is a sliding panel that appears from the side of the screen, providing additional content, settings, or actions without disrupting the main view. It is often used for filtering options, or contextual details. It enhances usability by keeping interfaces clean while offering expandable functionality.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `open` | If `true`, display the drawer. | `boolean` |   |
+| `position` | Position of the drawer. | `'left'` `'right'` |   |
+| `extended` | If `true`, the drawer have a bigger width. | `boolean` |   |
+| `back` | If `true`, display the back button. | `boolean` |   |
+| `title*` | Title of the drawer. | `string` |   |
+| `contentTitle` | Title of the content of the drawer. | `string` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `default` | Use this slot to insert the content of the drawer |
+| `footer` | Use this slot to insert buttons in the footer |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `update:open` | Emits when the drawer open state changes. | `CustomEvent<boolean>` |
+| `back` | Emits when click back button of the drawer. | `CustomEvent<void>` |
+

package/dist/components/field/Field.js

@@ -1,10 +1,7 @@
-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:`/**
+import{c as A,p as G,a as H,b as t,f as w,s as f,d as s,t as _,i as h,j as I,k as a,r,h as u,e as J,g 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=w('<span class="mc-field__requirement svelte-19i2lwv" aria-hidden="true"> </span>'),P=w('<span class="mc-field__help svelte-19i2lwv"> </span>'),Q=w("<span> </span>"),R=w('<div class="mc-field"><label class="mc-field__label svelte-19i2lwv"> <!></label> <!> <div class="mc-field__content svelte-19i2lwv"><!></div> <!></div>');const T={hash:"svelte-19i2lwv",code:`/**
  * 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.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-disable string-no-newline */.mc-field__label.svelte-19i2lwv {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-19i2lwv, .mc-field__help.svelte-19i2lwv {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-19i2lwv {display:block;margin-top:0.125rem;}.mc-field__content.svelte-19i2lwv {margin-top:0.5rem;}.mc-field__validation-message.svelte-19i2lwv {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-19i2lwv::before, .mc-field__validation-message.is-invalid.svelte-19i2lwv::before {content:"";height:1.25rem;width:1.25rem;}.mc-field__validation-message.is-valid.svelte-19i2lwv {color:var(--field-color-validation-valid, #117f03);}.mc-field__validation-message.is-valid.svelte-19i2lwv::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-19i2lwv {color:var(--field-color-validation-invalid, #c61112);}.mc-field__validation-message.is-invalid.svelte-19i2lwv::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");}
 
-/* 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));
+/* stylelint-enable string-no-newline */`};function U(C,l){G(l,!0),H(C,T);let p=t(l,"id",7),b=t(l,"label",7),d=t(l,"requirementtext",7),n=t(l,"helpid",7),m=t(l,"helptext",7),x=t(l,"messageid",7),q=t(l,"message",7),o=t(l,"isinvalid",7),g=t(l,"isvalid",7);var B={get id(){return p()},set id(e){p(e),a()},get label(){return b()},set label(e){b(e),a()},get requirementtext(){return d()},set requirementtext(e){d(e),a()},get helpid(){return n()},set helpid(e){n(e),a()},get helptext(){return m()},set helptext(e){m(e),a()},get messageid(){return x()},set messageid(e){x(e),a()},get message(){return q()},set message(e){q(e),a()},get isinvalid(){return o()},set isinvalid(e){o(e),a()},get isvalid(){return g()},set isvalid(e){g(e),a()}},y=R(),c=s(y),k=s(c),j=f(k);{var D=e=>{var i=O(),v=s(i,!0);r(i),_(()=>u(v,d())),h(e,i)};Z(j,e=>{d()&&e(D)})}r(c);var M=f(c,2);{var F=e=>{var i=P(),v=s(i,!0);r(i),_(()=>{z(i,"id",n()),u(v,m())}),h(e,i)};Z(M,e=>{n()&&m()&&e(F)})}var E=f(M,2),L=s(E);N(L,l,"default",{}),r(E);var S=f(E,2);{var V=e=>{var i=Q(),v=s(i,!0);r(i),_(()=>{z(i,"id",x()),J(i,1,K(["mc-field__validation-message",g()&&"is-valid",o()&&"is-invalid"]),"svelte-19i2lwv"),u(v,q())}),h(e,i)};Z(S,e=>{(o()||g())&&e(V)})}return r(y),_(()=>{z(c,"for",p()),u(k,`${b()??""} `)}),h(C,y),I(B)}customElements.define("m-field",A(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  /**\n   * A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.\n   *\n   * @slot default - Use this slot to insert the form element of your choice\n   */\n  interface Props {\n    /**\n     * A unique identifier for the form field, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The text displayed as the label for the form field.\n     */\n    label: string;\n    /**\n     * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional\n     */\n    requirementtext?: string;\n    /**\n     * Text shown below the form field to provide additional context or instructions for the user.\n     */\n    helptext?: string;\n    /**\n     * The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._\n     */\n    helpid?: string;\n    /**\n     * If `true`, applies a valid state to the form field.\n     */\n    isvalid?: boolean;\n    /**\n     * If `true`, applies an invalid state to the form field.\n     */\n    isinvalid?: boolean;\n    /**\n     * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._\n     */\n    messageid?: string;\n    /**\n     * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.\n     */\n    message?: string;\n  }\n\n  let {\n    id,\n    label,\n    requirementtext,\n    helpid,\n    helptext,\n    messageid,\n    message,\n    isinvalid,\n    isvalid,\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\n  {#if helpid && helptext}\n    <span id={helpid} class=\"mc-field__help\">\n      {helptext}\n    </span>\n  {/if}\n\n  <div class=\"mc-field__content\">\n    <slot />\n  </div>\n\n  {#if isinvalid || isvalid}\n    <span\n      id={messageid}\n      class={[\n        'mc-field__validation-message',\n        isvalid && 'is-valid',\n        isinvalid && 'is-invalid',\n      ]}\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,oBAoDIA,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,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAOT,EAAAC,EAAA,UAAA,CAAA,wiBASFE,EAAe,CAAA,CAAA,kBAFfA,EAAe,GAAAO,EAAAC,CAAA,0EAQVP,GAAM,MACbC,GAAQ,oBAFRD,EAAM,GAAIC,KAAQK,EAAAE,CAAA,kHAYfN,GAAS,WAEX,+BACAG,EAAO,GAAI,WACXD,KAAa,qCAGdD,GAAO,qBATPC,EAAS,GAAIC,MAAOC,EAAAG,CAAA,iCAnBbd,GAAE,SACXG,EAAK,GAAA,EAAA,GAAA,eAJV"}

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

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Field from './Field.svelte';
+describe('m-field component', () => {
+    const baseProps = {
+        id: 'email',
+        label: 'Email Address',
+    };
+    it('renders label with for attribute', () => {
+        const { getByText } = render(Field, {
+            props: baseProps,
+        });
+        const label = getByText('Email Address');
+        expect(label).toBeInTheDocument();
+    });
+    it('renders requirement text when provided', () => {
+        const { getByText } = render(Field, {
+            props: {
+                ...baseProps,
+                requirementtext: '(required)',
+            },
+        });
+        expect(getByText('(required)')).toBeInTheDocument();
+    });
+    it('renders help text when helpid and helptext are provided', () => {
+        const { getByText } = render(Field, {
+            props: {
+                ...baseProps,
+                helpid: 'email-help',
+                helptext: 'We will not share your email.',
+            },
+        });
+        const helpText = getByText('We will not share your email.');
+        expect(helpText).toBeInTheDocument();
+        expect(helpText.id).toBe('email-help');
+    });
+    it('shows validation message with correct state', () => {
+        const { getByText } = render(Field, {
+            props: {
+                ...baseProps,
+                message: 'This field is required',
+                messageid: 'validation-msg',
+                isinvalid: true,
+            },
+        });
+        const validation = getByText('This field is required');
+        expect(validation).toBeInTheDocument();
+        expect(validation.id).toBe('validation-msg');
+        expect(validation.classList.contains('is-invalid')).toBe(true);
+    });
+});

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

@@ -1,16 +1,10 @@
-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.
- *
- * The `MField` component is the **Svelte / WebComponent** implementation of the **Field** component of Mozaic Design System.<br/>
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/field/).
- */
-declare const _default: Meta<unknown>;
-export default _default;
-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;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Input: Story;
+export declare const InputFull: Story;
+export declare const InputValid: Story;
+export declare const InputInvalid: Story;
 //# sourceMappingURL=Field.stories.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"Field.stories.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IA4BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAWnB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAexB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAC"}

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

@@ -1,149 +1,93 @@
-/**
- * > Fields enable the user to input content in a form. It displays a label, useful informations, an input and gives validation feedback.
- *
- * The `MField` component is the **Svelte / WebComponent** implementation of the **Field** component of Mozaic Design System.<br/>
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/field/).
- */
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+const meta = {
     title: 'Form Elements/Field',
-    tags: ['autodocs', 'beta'],
-    argTypes: {
-        id: {
-            description: 'Specify the id of the label & the form element used inside the field',
-            control: 'text',
-        },
-        label: {
-            description: 'Specify the field label text',
-            control: 'text',
-        },
-        requirementtext: {
-            description: 'Specify the requirement text when the field is required',
-            control: 'text',
-        },
-        helpid: {
-            description: 'Specify the id of the span element containing the help text',
-            control: 'text',
-        },
-        helptext: {
-            description: 'Specify the help text',
-            control: 'text',
-        },
-        messageid: {
-            description: 'Specify the id of the span element containing the rerror message when the field is invalid',
-            control: 'text',
-        },
-        message: {
-            description: 'Specify the error message',
-            control: 'text',
-        },
-        isinvalid: {
-            description: 'If `true`, applies an invalid state to the form field.',
-            control: 'boolean',
-        },
-        isvalid: {
-            description: 'If `true`, applies a valid state to the form field',
-            control: 'boolean',
-        },
-        default: {
-            description: 'Use this slot to insert the form element of your choice',
-            table: {
-                category: 'Slots',
-            },
-        },
+    component: 'm-field',
+    args: {
+        label: 'Label',
+        id: 'ReplaceByInputId',
+        default: `
+      <!-- All the code below must be replaced by a form element. -->
+      <div class="content-slot">
+        Insert a form element here to replace this slot.
+      </div>
+    `,
     },
+    render: (args) => html `
+    <m-field
+      id=${ifDefined(args.id)}
+      label=${ifDefined(args.label)}
+      requirementtext=${ifDefined(args.requirementtext)}
+      helptext=${ifDefined(args.helptext)}
+      helpid=${ifDefined(args.helpid)}
+      isvalid=${ifDefined(args.isvalid)}
+      isinvalid=${ifDefined(args.isinvalid)}
+      messageid=${ifDefined(args.messageid)}
+      message=${ifDefined(args.message)}
+    >
+      ${unsafeHTML(ifDefined(args.default))}
+    </m-field>
+  `,
 };
-const TemplateDefault = (args) => {
-    const MField = document.createElement('m-field');
-    if (args.label)
-        MField.setAttribute('label', args.label || 'Label');
-    if (args.requirementtext)
-        MField.setAttribute('requirementtext', args.requirementtext);
-    if (args.helpid)
-        MField.setAttribute('helpid', args.helpid);
-    if (args.helptext)
-        MField.setAttribute('helptext', args.helptext);
-    if (args.messageid)
-        MField.setAttribute('messageid', args.messageid);
-    if (args.message)
-        MField.setAttribute('message', args.message);
-    const Slot = document.createElement('div');
-    Slot.classList.add('content-slot');
-    Slot.innerHTML = 'Insert a form element here to replace this slot.';
-    MField.appendChild(Slot);
-    return MField;
-};
-export const Default = TemplateDefault.bind({});
-Default.args = {
-    id: 'defaultfield',
-    label: 'Label',
-};
-const Template = (args) => {
-    const MField = document.createElement('m-field');
-    if (args.label)
-        MField.setAttribute('label', args.label);
-    if (args.requirementtext)
-        MField.setAttribute('requirementtext', args.requirementtext);
-    if (args.helpid)
-        MField.setAttribute('helpid', args.helpid);
-    if (args.helptext)
-        MField.setAttribute('helptext', args.helptext);
-    if (args.messageid)
-        MField.setAttribute('messageid', args.messageid);
-    if (args.message)
-        MField.setAttribute('message', args.message);
-    const MTextInput = document.createElement('m-textinput');
-    MTextInput.classList.add('mc-field__element');
-    if (args.id) {
-        MField.setAttribute('id', args.id);
-        MTextInput.setAttribute('name', args.id);
-    }
-    if (args.isinvalid) {
-        MField.setAttribute('isinvalid', args.isinvalid);
-        MTextInput.setAttribute('isinvalid', args.isinvalid);
-    }
-    if (args.isvalid) {
-        MField.setAttribute('isvalid', args.isvalid);
-        MTextInput.setAttribute('isvalid', args.isvalid);
-    }
-    MField.appendChild(MTextInput);
-    return MField;
-};
-export const Requierement = Template.bind({});
-Requierement.args = {
-    id: 'requiredfield',
-    label: 'Label',
-    requirementtext: '(required / optionnal)',
-    required: true,
-};
-export const Helper = Template.bind({});
-Helper.args = {
-    id: 'helpfield',
-    label: 'Label',
-    helpid: 'helptext',
-    helptext: 'Help text',
+export default meta;
+export const Default = {};
+export const Input = {
+    args: {
+        label: 'Label',
+        id: 'inputId',
+        default: `
+      <m-textinput
+        id="inputId"
+        placeholder="Placeholder"
+      ></m-textinput>
+    `,
+    },
 };
-export const FullExample = Template.bind({});
-FullExample.args = {
-    id: 'helpfield',
-    label: 'Label',
-    helpid: 'helptext',
-    helptext: 'Help text',
-    requirementtext: '(required / optionnal)',
-    required: true,
+export const InputFull = {
+    args: {
+        label: 'Label',
+        requirementtext: 'optional',
+        helptext: 'Help text',
+        id: 'inputFullId',
+        default: `
+      <m-textinput
+        id="inputFullId"
+        placeholder="Placeholder"
+      ></m-textinput>
+    `,
+    },
 };
-export const Valid = Template.bind({});
-Valid.args = {
-    id: 'validfield',
-    label: 'Label',
-    messageid: 'error1',
-    message: 'Validation message (Be concise and use comprehensive words).',
-    isvalid: true,
+export const InputValid = {
+    args: {
+        label: 'Label',
+        requirementtext: 'required',
+        helptext: 'Help text',
+        id: 'inputvalidId',
+        isvalid: true,
+        message: 'Validation message (Be concise and use comprehensive words).',
+        default: `
+      <m-textinput
+        id="inputvalidId"
+        placeholder="Placeholder"
+      ></m-textinput>
+    `,
+    },
 };
-export const Invalid = Template.bind({});
-Invalid.args = {
-    id: 'invalidfield',
-    label: 'Label',
-    messageid: 'error1',
-    message: 'Error message (Be concise and use comprehensive words)',
-    isinvalid: true,
+export const InputInvalid = {
+    args: {
+        label: 'Label',
+        requirementtext: 'required',
+        helptext: 'Help text',
+        id: 'inputInvalidId',
+        isinvalid: true,
+        message: 'Error message (Be concise and use comprehensive words)',
+        default: `
+      <m-textinput
+        id="inputInvalidId"
+        placeholder="Placeholder"
+        isInvalid
+      ></m-textinput>
+    `,
+    },
 };

package/dist/components/field/Field.svelte

@@ -5,17 +5,48 @@
 />
 
 <script lang="ts">
+  /**
+   * A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.
+   *
+   * @slot default - Use this slot to insert the form element of your choice
+   */
   interface Props {
+    /**
+     * A unique identifier for the form field, used to associate the label with the form element.
+     */
     id: string;
+    /**
+     * The text displayed as the label for the form field.
+     */
     label: string;
-    requirementtext: string;
-    helpid: string;
-    helptext: string;
-    messageid: string;
-    message: string;
-    isinvalid?: boolean;
+    /**
+     * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional
+     */
+    requirementtext?: string;
+    /**
+     * Text shown below the form field to provide additional context or instructions for the user.
+     */
+    helptext?: string;
+    /**
+     * The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._
+     */
+    helpid?: string;
+    /**
+     * If `true`, applies a valid state to the form field.
+     */
     isvalid?: boolean;
-    [key: string]: any;
+    /**
+     * If `true`, applies an invalid state to the form field.
+     */
+    isinvalid?: boolean;
+    /**
+     * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._
+     */
+    messageid?: string;
+    /**
+     * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.
+     */
+    message?: string;
   }
 
   let {
@@ -26,8 +57,8 @@
     helptext,
     messageid,
     message,
-    isinvalid = false,
-    isvalid = false,
+    isinvalid,
+    isvalid,
   }: Props = $props();
 </script>
 
@@ -40,20 +71,25 @@
       </span>
     {/if}
   </label>
+
   {#if helpid && helptext}
     <span id={helpid} class="mc-field__help">
       {helptext}
     </span>
   {/if}
+
   <div class="mc-field__content">
     <slot />
   </div>
+
   {#if isinvalid || isvalid}
     <span
       id={messageid}
-      class="mc-field__validation-message"
-      class:is-valid={isvalid}
-      class:is-invalid={isinvalid}
+      class={[
+        'mc-field__validation-message',
+        isvalid && 'is-valid',
+        isinvalid && 'is-invalid',
+      ]}
     >
       {message}
     </span>
@@ -63,25 +99,22 @@
 <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: 0.875rem;
-  line-height: 1.3;
-  font-weight: 400;
-  color: #000000;
+  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__legend {
   padding-inline: 0;
 }
 .mc-field__requirement, .mc-field__help {
-  font-size: 0.75rem;
-  line-height: 1.5;
-  font-weight: 400;
+  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: #666666;
+  color: var(--field-color-requirement, #666666);
 }
 .mc-field__help {
   display: block;
@@ -91,8 +124,8 @@
   margin-top: 0.5rem;
 }
 .mc-field__validation-message {
-  font-size: 0.875rem;
-  line-height: 1.5;
+  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;
@@ -103,19 +136,19 @@
   width: 1.25rem;
 }
 .mc-field__validation-message.is-valid {
-  color: #117f03;
+  color: var(--field-color-validation-valid, #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='%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='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 {
-  color: #c61112;
+  color: var(--field-color-validation-invalid, #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='%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='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");
 }
 .mc-field__validation-message.is-loading {
-  color: #666666;
+  color: var(--field-color-validation-loading, #666666);
 }
 .mc-field--group {
   border-width: 0;

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

@@ -1,14 +1,45 @@
+/**
+ * A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.
+ *
+ * @slot default - Use this slot to insert the form element of your choice
+ */
 interface Props {
+    /**
+     * A unique identifier for the form field, used to associate the label with the form element.
+     */
     id: string;
+    /**
+     * The text displayed as the label for the form field.
+     */
     label: string;
-    requirementtext: string;
-    helpid: string;
-    helptext: string;
-    messageid: string;
-    message: string;
-    isinvalid?: boolean;
+    /**
+     * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional
+     */
+    requirementtext?: string;
+    /**
+     * Text shown below the form field to provide additional context or instructions for the user.
+     */
+    helptext?: string;
+    /**
+     * The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._
+     */
+    helpid?: string;
+    /**
+     * If `true`, applies a valid state to the form field.
+     */
     isvalid?: boolean;
-    [key: string]: any;
+    /**
+     * If `true`, applies an invalid state to the form field.
+     */
+    isinvalid?: boolean;
+    /**
+     * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._
+     */
+    messageid?: string;
+    /**
+     * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.
+     */
+    message?: string;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/components/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;;;;;;UAAqF,CAAC;AAC/E,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;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAwDH,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"}