npm - @mgdis/mg-components - Versions diffs - 3.2.0 → 4.0.1 - Mend

@mgdis/mg-components 3.2.0 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (228) hide show

package/dist/cjs/mg-badge_21.cjs.entry.js CHANGED Viewed

@@ -2,20 +2,25 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-bead7dbd.js');
-const index$1 = require('./index-369388eb.js');
-const popper = require('./popper-0c3964e7.js');
+const index = require('./index-88560a66.js');
+const index$1 = require('./index-a39c5567.js');
+const popper = require('./popper-71bf3058.js');
 /**
  * List of all possibles variants
  */
 const variants$4 = ['info', 'primary', 'secondary', 'success', 'warning', 'danger'];
-const mgBadgeCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}.mg-badge{padding:0 0.4rem;height:var(--mg-badge-size);min-width:var(--mg-badge-size);-webkit-box-sizing:border-box;box-sizing:border-box;border:0.1rem solid;border-radius:50%;border-radius:calc(var(--mg-badge-size) / 2);font-size:var(--mg-badge-font-size);font-weight:600;text-align:center;line-height:var(--mg-badge-size)}.mg-badge.mg-badge--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-badge.mg-badge--primary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-badge.mg-badge--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-badge.mg-badge--success.mg-badge--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-badge.mg-badge--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-badge.mg-badge--warning.mg-badge--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-badge.mg-badge--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-badge.mg-badge--danger.mg-badge--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-badge.mg-badge--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-badge.mg-badge--info.mg-badge--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-badge,mg-badge{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}";
+const mgBadgeCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}.mg-badge{padding:0 0.4rem;height:var(--mg-badge-size);min-width:var(--mg-badge-size);box-sizing:border-box;border:0.1rem solid;border-radius:calc(var(--mg-badge-size) / 2);font-size:var(--mg-badge-font-size);font-weight:600;text-align:center;line-height:var(--mg-badge-size)}.mg-badge.mg-badge--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-badge.mg-badge--primary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-badge.mg-badge--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-badge.mg-badge--success.mg-badge--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-badge.mg-badge--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-badge.mg-badge--warning.mg-badge--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-badge.mg-badge--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-badge.mg-badge--danger.mg-badge--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-badge.mg-badge--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-badge.mg-badge--info.mg-badge--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}";
 const MgBadge = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /************
+     * Internal *
+     ************/
+    // classes
+    this.classOutline = `mg-badge--outline`;
     /**
      * Define button variant
      */
@@ -30,15 +35,22 @@ const MgBadge = class {
       throw new Error('<mg-badge> prop "value" must be interger or ponctuation character.');
     }
   }
-  validateVariant(newValue) {
+  validateVariant(newValue, oldValue) {
     if (!variants$4.includes(newValue)) {
       throw new Error(`<mg-badge> prop "variant" must be one of : ${variants$4.join(', ')}.`);
     }
-    this.classList.add(`mg-badge--${this.variant}`);
+    else {
+      if (oldValue !== undefined) {
+        this.classList.delete(`mg-badge--${oldValue}`);
+      }
+      this.classList.add(`mg-badge--${newValue}`);
+    }
   }
   validateOutline(newValue) {
     if (newValue)
-      this.classList.add(`mg-badge--outline`);
+      this.classList.add(this.classOutline);
+    else
+      this.classList.delete(this.classOutline);
   }
   /**
    * Check if props are well configured on init
@@ -69,9 +81,9 @@ MgBadge.style = mgBadgeCss;
 /**
  * List of all possibles variants
  */
-const variants$3 = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat'];
+const variants$3 = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success'];
-const mgButtonCss = ".mg-button.sc-mg-button{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:0.6rem;-moz-column-gap:0.6rem;column-gap:0.6rem;padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;min-height:var(--default-size);-webkit-box-sizing:border-box;box-sizing:border-box;border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));cursor:pointer;background-image:none;border-top-width:var(--mg-button-border-top-width, 0.1rem);border-right-width:var(--mg-button-border-right-width, 0.1rem);border-bottom-width:var(--mg-button-border-bottom-width, 0.1rem);border-left-width:var(--mg-button-border-left-width, 0.1rem);border-style:solid;font-family:inherit;text-decoration:none;font-weight:normal;text-align:left;-ms-touch-action:manipulation;touch-action:manipulation}.mg-button[disabled].sc-mg-button,.mg-button[aria-disabled].sc-mg-button,.mg-button.disabled.sc-mg-button{opacity:var(--mg-button-disabled-opacity);cursor:default}.mg-button.mg-button--icon.sc-mg-button{padding:0;-ms-flex-pack:center;justify-content:center;width:var(--default-size);height:var(--default-size);border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-button.mg-button--primary.sc-mg-button{border-color:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));border-color:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - 10%));color:hsl(var(--mg-button-primary-font-color));background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))), to(hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%))));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--primary.sc-mg-button:hover:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--primary.sc-mg-button:focus:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--primary.sc-mg-button:active:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-button.mg-button--secondary.sc-mg-button{border-color:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));border-color:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - 10%));color:hsl(var(--mg-button-secondary-font-color));background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))), to(hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%))));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--secondary.sc-mg-button:hover:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--secondary.sc-mg-button:focus:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--secondary.sc-mg-button:active:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-button.mg-button--danger.sc-mg-button{border-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));border-color:hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - 10%));color:hsl(var(--color-neutral));background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))), to(hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%))));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--danger.sc-mg-button:hover:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger.sc-mg-button:focus:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger.sc-mg-button:active:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-button.mg-button--danger-alt.sc-mg-button{border-color:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));border-color:hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - 10%));color:hsl(var(--color-danger));background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))), to(hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%))));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--danger-alt.sc-mg-button:hover:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger-alt.sc-mg-button:focus:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger-alt.sc-mg-button:active:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-button.mg-button--info.sc-mg-button{border-color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));border-color:hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - 10%));color:hsl(var(--color-neutral));background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))), to(hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%))));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--info.sc-mg-button:hover:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--info.sc-mg-button:focus:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--info.sc-mg-button:active:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-button.mg-button--flat.sc-mg-button{background:none;border:none}.mg-button.mg-button--flat.sc-mg-button:hover:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--flat.sc-mg-button:focus:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--flat.sc-mg-button:active:not([disabled],[aria-disabled].sc-mg-button,.disabled).sc-mg-button{background:hsla(var(--color-dark), 0.1)}.mg-button.sc-mg-button mg-icon.sc-mg-button:only-child,.mg-button .sc-mg-button-s>mg-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;line-height:1;margin:auto 0}.mg-button.mg-button--loading.sc-mg-button>mg-icon.sc-mg-button{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.mg-button.mg-button--loading.sc-mg-button .mg-button__content.sc-mg-button{opacity:0}.mg-button__content.sc-mg-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:0.6rem;-moz-column-gap:0.6rem;column-gap:0.6rem}mg-button.sc-mg-button{display:inline-block}.mg-button.sc-mg-button,mg-button.sc-mg-button{vertical-align:middle;max-width:100%}";
+const mgButtonCss = ".mg-button.sc-mg-button{position:relative;display:inline-flex;align-items:center;column-gap:0.6rem;padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;min-height:var(--default-size);box-sizing:border-box;border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));cursor:pointer;background-image:none;border-top-width:var(--mg-button-border-top-width, 0.1rem);border-right-width:var(--mg-button-border-right-width, 0.1rem);border-bottom-width:var(--mg-button-border-bottom-width, 0.1rem);border-left-width:var(--mg-button-border-left-width, 0.1rem);border-style:solid;font-family:inherit;text-decoration:none;font-weight:normal;text-align:left;touch-action:manipulation}.mg-button[disabled].sc-mg-button,.mg-button[aria-disabled=true].sc-mg-button,.mg-button.disabled.sc-mg-button{opacity:var(--mg-button-disabled-opacity);cursor:default}.mg-button.mg-button--icon.sc-mg-button{padding:0;justify-content:center;width:var(--default-size);height:var(--default-size);border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-button.mg-button--primary.sc-mg-button{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-primary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--primary.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--primary.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--primary.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-button.mg-button--secondary.sc-mg-button{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-secondary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--secondary.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--secondary.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--secondary.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-button.mg-button--danger.sc-mg-button{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--danger.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-button.mg-button--danger-alt.sc-mg-button{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-danger));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--danger-alt.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger-alt.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger-alt.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-button.mg-button--info.sc-mg-button{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--info.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--info.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--info.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-button.mg-button--success.sc-mg-button{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-dark));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--success.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--success.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--success.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-button.mg-button--flat.sc-mg-button{background:none;border:none}.mg-button.mg-button--flat.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--flat.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--flat.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsla(var(--color-dark), 0.1)}.mg-button.sc-mg-button mg-icon.sc-mg-button:only-child,.mg-button .sc-mg-button-s>mg-icon{display:inline-flex;flex-shrink:0;line-height:1;margin:auto 0}.mg-button.mg-button--loading.sc-mg-button>mg-icon.sc-mg-button{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.mg-button.mg-button--loading.sc-mg-button .mg-button__content.sc-mg-button{opacity:0}.mg-button__content.sc-mg-button{display:flex;align-items:center;column-gap:0.6rem}mg-button.sc-mg-button{display:inline-block}.mg-button.sc-mg-button,mg-button.sc-mg-button{vertical-align:middle;max-width:100%}";
 const MgButton = class {
   constructor(hostRef) {
@@ -138,11 +150,16 @@ const MgButton = class {
       }
     };
   }
-  validateVariant(newValue) {
+  validateVariant(newValue, oldValue) {
     if (!variants$3.includes(newValue)) {
       throw new Error(`<mg-button> prop "variant" must be one of : ${variants$3.join(', ')}`);
     }
-    this.classList.add(`mg-button--${this.variant}`);
+    else {
+      if (oldValue !== undefined) {
+        this.classList.delete(`mg-button--${oldValue}`);
+      }
+      this.classList.add(`mg-button--${newValue}`);
+    }
   }
   disabledHandler(isDisabled) {
     // Remove loading when enable
@@ -185,7 +202,7 @@ const MgButton = class {
    * @returns {HTMLElement} html element
    */
   render() {
-    return (index.h("button", { id: this.identifier, class: this.classList.join(), "aria-label": this.label, "aria-disabled": this.disabled, "aria-expanded": this.expanded, "aria-controls": this.controls, "aria-haspopup": this.haspopup, onClick: this.handleClick }, this.loading && index.h("mg-icon", { icon: "loader", spin: true }), index.h("div", { class: "mg-button__content" }, index.h("slot", null))));
+    return (index.h("button", { id: this.identifier, class: this.classList.join(), "aria-label": this.label, "aria-disabled": this.disabled.toString(), "aria-expanded": this.expanded, "aria-controls": this.controls, "aria-haspopup": this.haspopup, onClick: this.handleClick }, this.loading && index.h("mg-icon", { icon: "loader", spin: true }), index.h("div", { class: "mg-button__content" }, index.h("slot", null))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -201,32 +218,10 @@ const mgCharacterLeftCss = "mg-character-left.sc-mg-character-left{display:block
 const MgCharacterLeft = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /************
-     * Internal *
-     ************/
-    this.mustacheCounter = '{counter}';
-    /**
-     * Template to display remaining characters.
-     * Must have {counter} inside
-     */
-    this.template = index$1.messages.nbCharLeft;
     /**
      * Sets the characters to count
      */
     this.characters = '';
-    /**
-     * Calculate number character left
-     *
-     * @returns {string} message
-     */
-    this.getMessage = () => {
-      return this.template.replace(this.mustacheCounter, `<strong>${this.maxlength - this.characters.length}</strong>`);
-    };
-  }
-  validateTemplate(newValue) {
-    if (typeof newValue !== 'string' || newValue === '' || newValue.indexOf(this.mustacheCounter) === -1) {
-      throw new Error(`<mg-character-left> prop "template" must contain "${this.mustacheCounter}".`);
-    }
   }
   validateMaxlength(newValue) {
     if (typeof newValue !== 'number') {
@@ -242,8 +237,8 @@ const MgCharacterLeft = class {
    * @returns {void}
    */
   componentWillLoad() {
-    this.validateTemplate(this.template);
     this.validateMaxlength(this.maxlength);
+    this.messages = index$1.initLocales(this.element).messages;
   }
   /**
    * Render component
@@ -251,16 +246,16 @@ const MgCharacterLeft = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return index.h("span", { id: this.identifier, innerHTML: this.getMessage(), "aria-live": "polite" });
+    return (index.h("span", { id: this.identifier, "aria-live": "polite" }, index.h("span", { "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), index.h("span", { class: "sr-only" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
   }
+  get element() { return index.getElement(this); }
   static get watchers() { return {
-    "template": ["validateTemplate"],
     "maxlength": ["validateMaxlength"]
   }; }
 };
 MgCharacterLeft.style = mgCharacterLeftCss;
-const mgFormCss = ".is-asterisk{color:hsl(var(--color-danger))}.mg-form,.mg-form-group{--mg-inputs-margin-bottom:1.5rem;--mg-inputs-title-horizontal-space:3rem;--mg-inputs-title-width:15rem;--mg-inputs-shrink:0}.mg-form.mg-form--all-required,.mg-form-group.mg-form--all-required{--mg-input-title-display:none}";
+const mgFormCss = ".is-asterisk{color:hsl(var(--color-danger))}.mg-form,.mg-form-group{--mg-inputs-margin-bottom:1.5rem;--mg-inputs-title-horizontal-space:3rem;--mg-inputs-title-width:15rem;--mg-inputs-shrink:0}.mg-form.mg-form--all-required,.mg-form-group.mg-form--all-required{--mg-input-title-display:none}.mg-form>p,.mg-form-group>p{font-size:1.2rem}";
 const MgForm = class {
   constructor(hostRef) {
@@ -300,12 +295,12 @@ const MgForm = class {
       // All fields are required
       // mg-input-toggle can not be required
       if (requiredInputs.length > 0 && requiredInputs.length === this.mgInputs.filter(input => input.nodeName !== 'MG-INPUT-TOGGLE').length) {
-        this.requiredMessage = index$1.messages.form.allRequired;
+        this.requiredMessage = this.messages.form.allRequired;
         this.classList.add('mg-form--all-required');
       }
       // Some fields are required
       else if (requiredInputs.length > 0) {
-        this.requiredMessage = index$1.messages.form.required;
+        this.requiredMessage = this.messages.form.required;
       }
     };
     /**
@@ -342,6 +337,8 @@ const MgForm = class {
    * @returns {void}
    */
   componentWillLoad() {
+    // Get locales
+    this.messages = index$1.initLocales(this.element).messages;
     // Get slotted mgIputs
     this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-INPUT-'));
     // Define required message
@@ -377,65 +374,152 @@ MgForm.style = mgFormCss;
  * Icon SVG paths
  */
 const icons = {
+  'address-card': () => (index.h("path", { fill: "currentColor", d: "M14.21 2.67H1.79c-.63 0-1.14.51-1.14 1.14v8.38c0 .63.51 1.14 1.14 1.14h12.42c.63 0 1.14-.51 1.14-1.14V3.81c0-.63-.51-1.14-1.14-1.14ZM5.35 5c.84 0 1.53.69 1.53 1.53 0 .84-.69 1.53-1.53 1.53-.84 0-1.53-.69-1.53-1.53v-.05c.02-.83.7-1.49 1.53-1.48ZM8 10.59a.5.5 0 0 1-.53.46H3.21a.5.5 0 0 1-.53-.46v-.46c.07-.81.78-1.42 1.6-1.37h.12c.61.26 1.29.26 1.9 0h.12c.81-.04 1.51.56 1.58 1.37v.46Zm5.34-1.26c0 .1-.09.19-.19.19H9.73c-.1 0-.18-.07-.19-.17V9c0-.1.09-.19.19-.19h3.43c.1 0 .18.09.19.19v.33Zm0-1.52c0 .1-.09.18-.19.19H9.73c-.1 0-.19-.09-.19-.19v-.38c0-.1.07-.18.17-.19h3.45c.1 0 .19.09.19.19v.38Zm0-1.52c0 .1-.09.18-.19.19H9.73c-.1 0-.19-.09-.19-.19V5.9c0-.1.09-.19.19-.19h3.43c.11 0 .19.09.19.2v.38Z" })),
+  'align-center': () => (index.h("path", { fill: "currentColor", d: "M13.88 5.29H2.12c-.25 0-.45.2-.45.45v.9c0 .25.2.45.45.45h11.76c.25 0 .45-.2.45-.45v-.9c0-.25-.2-.45-.45-.45Zm0 7.24H2.12c-.25 0-.45.2-.45.45v.9c0 .25.2.45.45.45h11.76c.25 0 .45-.2.45-.45v-.9c0-.25-.2-.45-.45-.45ZM4.72 3.48h6.55c.19 0 .34-.15.34-.34V2.01c0-.19-.15-.34-.34-.34H4.72c-.19 0-.34.15-.34.34v1.13c0 .19.15.34.34.34Zm6.55 7.24c.19 0 .34-.15.34-.34V9.25c0-.19-.15-.34-.34-.34H4.72c-.19 0-.34.15-.34.34v1.13c0 .19.15.34.34.34h6.55Z" })),
+  'align-justify': () => (index.h("path", { fill: "currentColor", d: "M13.88 12.52H2.12c-.25 0-.45.21-.45.46v.9c0 .25.2.45.45.45h11.76c.25 0 .45-.2.45-.45V13a.466.466 0 0 0-.44-.48h-.01Zm0-3.62H2.12c-.25 0-.45.21-.45.46v.9c0 .25.2.45.45.45h11.76c.25 0 .45-.2.45-.45v-.9c0-.25-.2-.45-.45-.46Zm0-3.61H2.12c-.25 0-.45.2-.45.45v.9c0 .25.2.45.45.46h11.76c.25 0 .45-.21.45-.46v-.9c0-.25-.2-.45-.45-.45Zm0-3.62H2.12c-.25 0-.45.2-.45.45V3c0 .25.2.45.45.46h11.76c.25 0 .45-.21.45-.46v-.9a.45.45 0 0 0-.45-.43Z" })),
+  'align-left': () => (index.h("path", { fill: "currentColor", d: "M2 10.71h7.45c.2 0 .36-.16.36-.36V9.27c0-.2-.16-.36-.36-.37H2c-.2 0-.36.17-.36.37v1.08c0 .2.16.36.36.36Zm0-7.23h7.45c.2 0 .36-.17.36-.37V2c0-.2-.16-.36-.36-.36H2a.36.36 0 0 0-.33.36v1.11c0 .19.14.35.33.37Zm11.88 1.81H2.12c-.25 0-.45.2-.45.45v.9c0 .25.2.45.45.46h11.76c.25 0 .45-.21.45-.46v-.9c0-.25-.2-.45-.45-.45Zm0 7.23H2.12c-.25 0-.45.21-.45.46v.9c0 .25.2.45.45.45h11.76c.25 0 .45-.2.45-.45V13c0-.25-.2-.45-.45-.46v-.02Z" })),
+  'align-right': () => (index.h("path", { fill: "currentColor", d: "M2.12 7.1h11.76c.25 0 .45-.21.45-.46v-.9c0-.25-.2-.45-.45-.45H2.12c-.25 0-.45.2-.45.45v.9c0 .25.2.45.45.46Zm11.76 5.42H2.12c-.25 0-.45.21-.45.46v.9c0 .25.2.45.45.45h11.76c.25 0 .45-.2.45-.45V13a.466.466 0 0 0-.44-.48h-.01ZM14 1.67H6.55a.36.36 0 0 0-.36.33v1.11c0 .2.16.36.36.37H14c.2 0 .36-.17.36-.37V2a.36.36 0 0 0-.36-.33Zm0 7.23H6.55c-.2 0-.36.17-.36.37v1.08c0 .2.16.36.36.36H14c.2 0 .36-.16.36-.36V9.27c0-.2-.16-.36-.36-.37Z" })),
+  'api': () => (index.h("path", { fill: "currentColor", d: "M14.44 11.47h-.02l-.66-.1-.02-.08c-.03-.11-.08-.21-.13-.31l-.04-.07.4-.54v-.02l-.52-.52h-.02l-.54.41-.07-.04c-.1-.05-.2-.09-.31-.13l-.08-.02-.1-.67v-.01h-.73v.02l-.1.66-.08.02c-.11.03-.21.08-.31.13l-.07.04-.55-.41-.52.52v.02l.41.54-.04.07c-.05.1-.09.2-.13.31l-.02.08-.67.1h-.01v.73h.02l.66.1.02.08c.03.1.08.21.13.3l.04.07-.41.55.52.52h.02l.54-.41.07.04c.1.05.2.09.31.13l.08.02.1.67v.01h.73v-.02l.1-.66.08-.02c.11-.03.21-.08.31-.13l.07-.04.55.41.52-.52v-.02l-.4-.54.04-.07c.05-.1.09-.2.13-.31l.02-.08.67-.1h.01v-.73Zm-2.46 1.38c-.56 0-1.01-.45-1.01-1.01s.45-1.01 1.01-1.01 1.01.45 1.01 1.01-.45 1.01-1.01 1.01ZM8.51 5.81c-.11-.09-.27-.14-.5-.14h-.38v1.17h.27c.26 0 .45-.05.58-.15.13-.1.19-.25.19-.44s-.05-.34-.16-.43Zm1.57 5.13-.3-.4c-.1-.1-.09-.27 0-.37l.52-.52c.1-.1.26-.1.37 0l.4.29c.06-.03.13-.06.2-.08l.07-.49c0-.14.12-.25.26-.25h.45a5.44 5.44 0 1 0-10.5-1.99 5.44 5.44 0 0 0 5.44 5.44c.78 0 1.54-.17 2.25-.49v-.6c0-.14.11-.26.26-.26l.49-.07c.02-.07.05-.13.08-.2Zm.18-5.96h.84v3.94h-.84V4.98ZM5.4 8.92l-.29-.94H3.67l-.29.94h-.9l1.39-3.96h1.02l1.4 3.96h-.9Zm3.72-1.74c-.26.23-.64.34-1.13.34h-.36v1.4h-.84V4.98h1.26c.48 0 .84.1 1.09.31.25.21.37.51.37.92 0 .42-.13.75-.4.97ZM4.4 5.57c-.06.23-.23.8-.51 1.71h1.03c-.26-.85-.41-1.33-.45-1.44-.03-.11-.06-.2-.07-.26Z" })),
   'arrow-down': () => (index.h("path", { fill: "currentColor", d: "M13,10.1H10.23a.31.31,0,0,1-.32-.28h0V.94A.3.3,0,0,0,9.59.65H6.37A.32.32,0,0,0,6,.94H6V9.81a.29.29,0,0,1-.31.29H3a.3.3,0,0,0-.31.29.27.27,0,0,0,.08.22l5.06,4.58a.36.36,0,0,0,.46,0l5-4.58a.29.29,0,0,0,0-.42C13.22,10.1,13.12,10.1,13,10.1Z" })),
   'arrow-left': () => (index.h("path", { fill: "currentColor", d: "M5.88,12.93V10.18a.3.3,0,0,1,.28-.32H15a.31.31,0,0,0,.29-.33h0V6.32A.31.31,0,0,0,15,6H6.17a.32.32,0,0,1-.29-.31h0V2.93a.3.3,0,0,0-.28-.32.32.32,0,0,0-.23.09L.79,7.76a.36.36,0,0,0,0,.46l4.58,5a.31.31,0,0,0,.43,0A.4.4,0,0,0,5.88,12.93Z" })),
   'arrow-right': () => (index.h("path", { fill: "currentColor", d: "M10.16,3V5.75a.3.3,0,0,1-.28.32H1a.31.31,0,0,0-.29.33h0V9.61A.31.31,0,0,0,1,9.94H9.87a.29.29,0,0,1,.29.31h0V13a.3.3,0,0,0,.28.32.32.32,0,0,0,.23-.09l4.58-5.06a.36.36,0,0,0,0-.46l-4.58-5a.3.3,0,0,0-.42,0C10.16,2.76,10.16,2.87,10.16,3Z" })),
+  'arrow-rotate': () => (index.h("path", { fill: "currentColor", d: "M8.02 1.67c-1.6 0-3.15.59-4.33 1.67a6.316 6.316 0 0 0-.38 8.94 6.324 6.324 0 0 0 8.94.37.29.29 0 0 0 0-.42l-1-1a.296.296 0 0 0-.41 0 4.302 4.302 0 0 1-5.76-.09 4.276 4.276 0 0 1-.21-6.06 4.276 4.276 0 0 1 6.06-.21L9.86 5.95c-.11.12-.18.27-.18.43 0 .34.28.62.62.62h3.44c.34-.01.6-.29.59-.63V2.94a.62.62 0 0 0-.18-.44.61.61 0 0 0-.85 0l-.91.91a6.37 6.37 0 0 0-4.38-1.75h.02Z" })),
+  'arrow-rotate-backward': () => (index.h("path", { fill: "currentColor", d: "M8 1.67c-1.63 0-3.2.63-4.38 1.75l-.91-.91a.6.6 0 0 0-.85-.01h-.01a.62.62 0 0 0-.18.44v3.43c-.01.34.25.62.59.63H5.7c.34 0 .62-.28.62-.62 0-.16-.07-.31-.18-.43L5.07 4.87a4.276 4.276 0 0 1 6.06.21 4.276 4.276 0 0 1-.21 6.06 4.302 4.302 0 0 1-5.76.09.296.296 0 0 0-.41 0l-1 1a.29.29 0 0 0 0 .42 6.324 6.324 0 0 0 8.94-.37 6.316 6.316 0 0 0-.38-8.94 6.365 6.365 0 0 0-4.33-1.67Z" })),
   'arrow-up': () => (index.h("path", { fill: "currentColor", d: "M3.06,5.82H5.81a.31.31,0,0,1,.32.28h0V15a.31.31,0,0,0,.33.29H9.67A.3.3,0,0,0,10,15h0V6.11a.3.3,0,0,1,.31-.29h2.75a.3.3,0,0,0,.23-.51L8.23.73a.36.36,0,0,0-.46,0l-5,4.58a.3.3,0,0,0,0,.43C2.82,5.83,2.92,5.82,3.06,5.82Z" })),
   'arrow-up-right-square': () => (index.h("path", { fill: "currentColor", d: "M14.33 3v10A1.34 1.34 0 0 1 13 14.33H3A1.34 1.34 0 0 1 1.67 13V3A1.34 1.34 0 0 1 3 1.67h10A1.34 1.34 0 0 1 14.33 3Zm-2.48.46H8.68a.67.67 0 0 0-.68.7.63.63 0 0 0 .2.47l.91.91-5.53 5.53a.33.33 0 0 0 0 .48l.87.87a.33.33 0 0 0 .48 0l5.53-5.52.91.9a.69.69 0 0 0 1 0 .71.71 0 0 0 .19-.48V4.15a.67.67 0 0 0-.67-.67Z" })),
-  'arrows-rotate': () => (index.h("path", { fill: "currentColor", d: "M2.3,7h3.4c0.3,0,0.6-0.3,0.6-0.6c0-0.1-0.1-0.3-0.2-0.4L5.1,4.9c1.7-1.6,4.4-1.5,6,0.2c0,0,0,0,0,0  c0.5,0.5,0.8,1.2,1,1.9h2.1C13.7,3.5,10.4,1.2,7,1.8C5.7,2,4.6,2.6,3.6,3.4L2.7,2.5c-0.2-0.2-0.6-0.2-0.8,0c0,0,0,0,0,0l0,0  C1.8,2.6,1.7,2.8,1.7,2.9v3.4C1.7,6.7,1.9,7,2.3,7z M13.7,9h-3.4C9.9,9,9.7,9.3,9.7,9.6c0,0.2,0.1,0.3,0.2,0.4l1.1,1.1  c-1.7,1.6-4.4,1.5-6-0.2C4.4,10.4,4,9.7,3.8,9H1.7c0.6,3.5,3.9,5.8,7.3,5.2c1.3-0.2,2.4-0.8,3.3-1.7l0.9,0.9c0.2,0.2,0.6,0.2,0.8,0  c0,0,0,0,0,0l0,0c0.1-0.1,0.2-0.3,0.2-0.4V9.6C14.3,9.3,14.1,9,13.7,9z" })),
+  'arrows-right-left': () => (index.h("path", { fill: "currentColor", d: "M.73,5.65V5.23a.64.64,0,0,1,.64-.64H12V3.31a.64.64,0,0,1,.64-.64.63.63,0,0,1,.45.18L15.19,5a.63.63,0,0,1,0,.9L13.05,8A.65.65,0,0,1,12,7.57V6.29H1.37a.64.64,0,0,1-.64-.64Zm14,4.06H4.09V8.43A.64.64,0,0,0,3,8L.87,10.11a.63.63,0,0,0,0,.9L3,13.15a.64.64,0,0,0,.91,0,.61.61,0,0,0,.18-.45V11.41H14.73a.63.63,0,0,0,.64-.64h0v-.42a.63.63,0,0,0-.64-.64Z" })),
+  'arrows-rotate': () => (index.h("path", { fill: "currentColor", d: "M14.3 6.37V2.94c0-.16-.06-.32-.18-.43a.6.6 0 0 0-.85 0l-.91.91a6.354 6.354 0 0 0-3.31-1.65 6.365 6.365 0 0 0-7.33 5.22h2.14c.16-.72.5-1.38 1-1.92v-.02a4.281 4.281 0 0 1 6.05-.18L9.84 6c-.1.1-.16.24-.18.38 0 .34.28.62.62.62h3.44c.33-.02.59-.3.58-.63ZM1.71 9.63v3.43c0 .16.06.32.18.43a.6.6 0 0 0 .85 0l.91-.91c.92.88 2.09 1.46 3.35 1.66 3.47.57 6.74-1.77 7.31-5.24h-2.14c-.17.74-.54 1.42-1.06 1.97a4.254 4.254 0 0 1-6.02.16l1.07-1.08c.11-.11.17-.27.17-.42A.63.63 0 0 0 5.72 9H2.28c-.33.03-.58.3-.57.63Z" })),
+  'arrows-rotate-backward': () => (index.h("path", { fill: "currentColor", d: "M2.3,7h3.4c0.3,0,0.6-0.3,0.6-0.6c0-0.1-0.1-0.3-0.2-0.4L5.1,4.9c1.7-1.6,4.4-1.5,6,0.2c0,0,0,0,0,0  c0.5,0.5,0.8,1.2,1,1.9h2.1C13.7,3.5,10.4,1.2,7,1.8C5.7,2,4.6,2.6,3.6,3.4L2.7,2.5c-0.2-0.2-0.6-0.2-0.8,0c0,0,0,0,0,0l0,0  C1.8,2.6,1.7,2.8,1.7,2.9v3.4C1.7,6.7,1.9,7,2.3,7z M13.7,9h-3.4C9.9,9,9.7,9.3,9.7,9.6c0,0.2,0.1,0.3,0.2,0.4l1.1,1.1  c-1.7,1.6-4.4,1.5-6-0.2C4.4,10.4,4,9.7,3.8,9H1.7c0.6,3.5,3.9,5.8,7.3,5.2c1.3-0.2,2.4-0.8,3.3-1.7l0.9,0.9c0.2,0.2,0.6,0.2,0.8,0  c0,0,0,0,0,0l0,0c0.1-0.1,0.2-0.3,0.2-0.4V9.6C14.3,9.3,14.1,9,13.7,9z" })),
   'ban': () => (index.h("path", { fill: "currentColor", d: "M8 .67A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Zm3.85 3.48a5.46 5.46 0 0 1 .61 7L4.88 3.54a5.46 5.46 0 0 1 6.97.61Zm-7.7 7.7a5.45 5.45 0 0 1-.61-7l7.58 7.58a5.46 5.46 0 0 1-7-.61Z" })),
+  'bell': () => (index.h("path", { fill: "currentColor", d: "M8 15.33a1.7 1.7 0 0 0 1.52-1.83h-3A1.7 1.7 0 0 0 8 15.33ZM13.13 11c-.46-.59-1.32-1.48-1.32-4.42a4.4 4.4 0 0 0-3.05-4.4v-.6A.85.85 0 0 0 8 .67a.85.85 0 0 0-.76.91v.6a4.4 4.4 0 0 0-3 4.44c0 2.94-.86 3.83-1.32 4.42a1 1 0 0 0-.2.63.85.85 0 0 0 .76.91h9.14a.85.85 0 0 0 .76-.91 1.05 1.05 0 0 0-.25-.67Z" })),
+  'briefcase': () => (index.h("path", { fill: "currentColor", d: "M13.93 4.33H11V2.07c0-.22-.18-.4-.4-.4H5.4c-.22 0-.4.18-.4.4v2.26H2.07c-.22 0-.4.18-.4.4v8.2c0 .22.18.4.4.4h11.86c.22 0 .4-.18.4-.4v-8.2c0-.22-.18-.4-.4-.4Zm-7.6 0V3h3.34v1.33H6.33Z" })),
   'calculator': () => (index.h("path", { fill: "currentColor", d: "M12.83.67H3.17a.5.5 0 0 0-.5.5v13.66a.5.5 0 0 0 .5.5h9.66a.5.5 0 0 0 .5-.5V1.17a.5.5 0 0 0-.5-.5ZM5.58 13.39a.29.29 0 0 1-.28.3H4.1a.29.29 0 0 1-.3-.28v-1.2a.29.29 0 0 1 .28-.3h1.2a.29.29 0 0 1 .3.28v1.2Zm0-3.28a.29.29 0 0 1-.3.3H4.1a.29.29 0 0 1-.3-.3V8.93a.29.29 0 0 1 .28-.3h1.2a.29.29 0 0 1 .3.28v1.2Zm3.29 3.28a.29.29 0 0 1-.3.3H7.38a.29.29 0 0 1-.3-.3v-1.18a.29.29 0 0 1 .3-.3h1.19a.29.29 0 0 1 .3.3Zm0-3.28a.32.32 0 0 1-.3.3H7.38a.32.32 0 0 1-.3-.3V8.93a.29.29 0 0 1 .3-.3h1.19a.29.29 0 0 1 .3.3Zm3.33 3.28a.29.29 0 0 1-.28.3h-1.25a.29.29 0 0 1-.3-.28V8.93a.29.29 0 0 1 .28-.3h1.25a.29.29 0 0 1 .3.28v4.48Zm0-7.15a.29.29 0 0 1-.3.3H4.1a.29.29 0 0 1-.3-.3V2.61a.29.29 0 0 1 .28-.3h7.82a.29.29 0 0 1 .3.28v3.65Z" })),
-  'check': () => (index.h("path", { fill: "currentColor", d: "M15.3,4.2L14.2,3c-0.1-0.1-0.3-0.1-0.4,0L6,10.4l-3.8-4C2.2,6.3,2.1,6.3,2,6.4L0.7,7.6c-0.1,0.1-0.1,0.2,0,0.3l5.1,5.4c0.1,0.1,0.2,0.1,0.3,0c0,0,0,0,0,0L7.4,12l0,0l7.9-7.4C15.4,4.5,15.4,4.3,15.3,4.2C15.3,4.2,15.3,4.2,15.3,4.2z" })),
+  'calendar': () => (index.h("path", { fill: "currentColor", d: "M14.52 4.43h-13V2.92a1.28 1.28 0 0 1 1.25-1.28h10.36A1.39 1.39 0 0 1 14.52 3Zm0 .93v7.91a1.41 1.41 0 0 1-1.4 1.4H2.88a1.41 1.41 0 0 1-1.4-1.4V5.36Zm-3.73 3.37a.35.35 0 0 0 .35.35h1.16a.34.34 0 0 0 .35-.35V7.57a.35.35 0 0 0-.35-.35h-1.16a.35.35 0 0 0-.35.35Zm-5.58 2.56a.35.35 0 0 0-.35-.35H3.7a.35.35 0 0 0-.35.35v1.17a.35.35 0 0 0 .35.35h1.16a.35.35 0 0 0 .35-.35Zm0-3.72a.35.35 0 0 0-.35-.35H3.7a.35.35 0 0 0-.35.35v1.16a.34.34 0 0 0 .35.35h1.16a.35.35 0 0 0 .35-.35Zm3.72 3.72a.35.35 0 0 0-.35-.35H7.42a.35.35 0 0 0-.35.35v1.17a.35.35 0 0 0 .35.35h1.16a.35.35 0 0 0 .35-.35Zm0-3.72a.35.35 0 0 0-.35-.35H7.42a.35.35 0 0 0-.35.35v1.16a.35.35 0 0 0 .35.35h1.16a.35.35 0 0 0 .35-.35Z" })),
+  'calendar-euro': () => (index.h("path", { fill: "currentColor", d: "M11.06 3.51h-1.04v.62a.2.2 0 0 1-.2.2H9.4c-.11 0-.21-.09-.21-.2v-.62H4.23v.62c0 .11-.09.2-.21.2h-.41c-.11 0-.21-.09-.21-.2v-.62H2.37c-.57 0-1.03.47-1.03 1.03v7.03c0 .57.47 1.03 1.03 1.03h5.3c-.25-.25-.46-.52-.63-.83H2.68a.53.53 0 0 1-.52-.52V6.61c0-.11.09-.21.21-.21h5.29a4.4 4.4 0 0 1 3.19-1.36c.43 0 .85.06 1.24.18v-.69c0-.57-.46-1.03-1.03-1.03Zm-6.83-.62c0-.11-.09-.21-.21-.21h-.41c-.11 0-.21.09-.21.21v.62h.83v-.62Zm5.79 0c0-.11-.09-.21-.21-.21H9.4c-.11 0-.21.09-.21.21v.62h.83v-.62Zm2.07 3c-.39-.13-.81-.21-1.24-.21-.83 0-1.6.26-2.23.73-.96.69-1.59 1.82-1.59 3.09 0 .86.28 1.65.77 2.29.23.32.52.6.85.83.62.45 1.38.71 2.2.71 2.11 0 3.82-1.72 3.82-3.82 0-1.67-1.08-3.09-2.58-3.61Zm.12 6.18c.01.07-.04.15-.11.16-.09.03-.2.04-.3.05-.14.03-.28.04-.43.04-.61.02-1.18-.18-1.63-.54-.41-.32-.73-.77-.88-1.29h-.37c-.08 0-.15-.06-.15-.15V10c0-.08.07-.14.15-.14h.26v-.5h-.26c-.08 0-.15-.06-.15-.14v-.37c0-.08.07-.14.15-.14h.4a2.576 2.576 0 0 1 2.37-1.7h.1c.22 0 .44.02.64.06.04.01.07.03.08.06.02.03.03.07.02.11l-.02.07-.13.46a.14.14 0 0 1-.17.1c-.15-.03-.3-.04-.45-.05h-.08c-.58.01-1.1.35-1.34.88h1.71c.08.02.12.09.11.17l-.08.36a.15.15 0 0 1-.15.11H9.73c-.01.16-.01.33 0 .5h1.66c.08.02.13.09.11.17l-.07.33c-.02.06-.08.11-.14.11H9.91c.21.56.72.94 1.3 1 .05 0 .1.01.15.01.19 0 .37-.03.55-.06.07-.02.14.03.16.09v.02l.11.52Z" })),
+  'check': () => (index.h("path", { fill: "currentColor", d: "m15.27 4.23-1.11-1.18c-.11-.1-.27-.1-.38 0L6 10.36l-3.76-4a.187.187 0 0 0-.26 0L.71 7.6c-.07.07-.07.19 0 .26l5.12 5.41c.07.07.18.07.25 0l1.3-1.23 7.87-7.45c.1-.1.11-.26.01-.37h.01Z" })),
   'check-circle': () => (index.h("path", { fill: "currentColor", d: "M15.33 8A7.33 7.33 0 1 1 8 .67 7.33 7.33 0 0 1 15.33 8Zm-8.18 3.88 5.44-5.44a.46.46 0 0 0 0-.65l-.67-.67a.48.48 0 0 0-.67 0L6.82 9.54 4.75 7.47a.46.46 0 0 0-.65 0l-.67.67a.46.46 0 0 0 0 .65l3.07 3.07a.46.46 0 0 0 .65 0Z" })),
   'chevron-down': () => (index.h("path", { fill: "currentColor", d: "M7.43,12.21.9,5.69a.81.81,0,0,1,0-1.14h0l.76-.77a.81.81,0,0,1,1.14,0L8,9l5.2-5.18a.81.81,0,0,1,1.14,0l.76.77a.8.8,0,0,1,0,1.13h0L8.57,12.21a.79.79,0,0,1-1.13,0Z" })),
+  'chevron-down-circle': () => (index.h("path", { fill: "currentColor", d: "M15.33 8A7.33 7.33 0 1 1 8 .67 7.33 7.33 0 0 1 15.33 8ZM8.5 11.37l4-4a.7.7 0 0 0 0-1l-.5-.52a.72.72 0 0 0-1 0l-3 3-3-3a.72.72 0 0 0-1 0l-.5.51a.7.7 0 0 0 0 1l4 4a.7.7 0 0 0 1 0Z" })),
   'chevron-left': () => (index.h("path", { fill: "currentColor", d: "M3.79,7.43,10.31.9a.81.81,0,0,1,1.14,0h0l.77.76a.81.81,0,0,1,0,1.14L7,8l5.18,5.2a.81.81,0,0,1,0,1.14l-.77.76a.8.8,0,0,1-1.13,0h0L3.79,8.57a.79.79,0,0,1,0-1.13Z" })),
+  'chevron-left-circle': () => (index.h("path", { fill: "currentColor", d: "M8 15.33C3.95 15.33.67 12.05.67 8S3.95.67 8 .67 15.33 3.95 15.33 8c0 4.05-3.28 7.33-7.33 7.33ZM4.63 8.5l4 4c.27.28.71.28.99.01h.01l.52-.51c.27-.28.27-.72 0-1l-3-3 3-3c.27-.28.27-.72 0-1l-.51-.5a.697.697 0 0 0-.99-.01h-.01l-4 4.01c-.28.27-.28.71-.01.99Z" })),
   'chevron-right': () => (index.h("path", { fill: "currentColor", d: "M12.21,8.57,5.69,15.1a.81.81,0,0,1-1.14,0h0l-.77-.76a.81.81,0,0,1,0-1.14L9,8,3.78,2.8a.81.81,0,0,1,0-1.14L4.55.9A.8.8,0,0,1,5.68.9h0l6.53,6.53a.79.79,0,0,1,0,1.13Z" })),
+  'chevron-right-circle': () => (index.h("path", { fill: "currentColor", d: "M8 .67c4.05 0 7.33 3.28 7.33 7.33S12.05 15.33 8 15.33.67 12.05.67 8C.67 3.95 3.95.67 8 .67Zm3.37 6.83-4-4a.697.697 0 0 0-.99-.01h-.01L5.85 4c-.27.28-.27.72 0 1l3 3-3 3c-.27.28-.27.72 0 1l.51.5c.27.28.71.28.99.01h.01l4-4.01c.28-.27.28-.71.01-.99Z" })),
   'chevron-up': () => (index.h("path", { fill: "currentColor", d: "M8.57,3.79l6.53,6.52a.81.81,0,0,1,0,1.14h0l-.76.77a.81.81,0,0,1-1.14,0L8,7,2.8,12.22a.81.81,0,0,1-1.14,0L.9,11.45a.8.8,0,0,1,0-1.13h0L7.43,3.79a.79.79,0,0,1,1.13,0Z" })),
+  'chevron-up-circle': () => (index.h("path", { fill: "currentColor", d: "M.67 8C.67 3.95 3.95.67 8 .67S15.33 3.95 15.33 8 12.05 15.33 8 15.33C3.95 15.33.67 12.05.67 8ZM7.5 4.63l-4 4c-.28.27-.28.71-.01.99h.01l.5.53c.28.27.72.27 1 0l3-3 3 3c.28.27.72.27 1 0l.5-.51c.28-.27.28-.71.01-.99h-.01l-4-4.01a.697.697 0 0 0-.99-.01H7.5Z" })),
+  'clock': () => (index.h("path", { fill: "currentColor", d: "M8,.67C3.95,.67,.67,3.95,.67,8s3.28,7.33,7.33,7.33,7.33-3.28,7.33-7.33h0C15.33,3.95,12.05,.67,8,.67h0Zm1.69,10.33l-2.61-1.88c-.09-.07-.14-.17-.14-.28V3.84c0-.19,.16-.35,.35-.36h1.42c.2,0,.35,.16,.36,.36V7.93l1.87,1.37c.16,.1,.2,.32,.09,.47v.02h-.01l-.83,1.15c-.12,.15-.34,.18-.5,.06Z" })),
+  'conversation': () => (index.h("path", { fill: "currentColor", d: "M11.22,6.48c0-2.11-2.36-3.81-5.28-3.81S.67,4.37.67,6.48a3.15,3.15,0,0,0,1,2.19A5.17,5.17,0,0,1,.72,10a.2.2,0,0,0,0,.21.23.23,0,0,0,.19.12,4.79,4.79,0,0,0,2.25-.6,6.84,6.84,0,0,0,2.82.6C8.86,10.29,11.22,8.58,11.22,6.48Zm3.1,5.23a3.08,3.08,0,0,0,1-2.19C15.28,7.93,14,6.57,12,6a3.84,3.84,0,0,1,0,.48C12,9,9.3,11.05,6,11.05a7.16,7.16,0,0,1-.8-.05A5.6,5.6,0,0,0,10,13.33a6.7,6.7,0,0,0,2.82-.59,4.66,4.66,0,0,0,2.25.59.21.21,0,0,0,.19-.11.2.2,0,0,0,0-.21,5.15,5.15,0,0,1-.91-1.3Z" })),
+  'cog': () => (index.h("path", { fill: "currentColor", d: "M14.82 9.76 13.56 9a5.54 5.54 0 0 0 0-2.07l1.26-.72a.36.36 0 0 0 .18-.38A7.5 7.5 0 0 0 13.37 3a.35.35 0 0 0-.44 0l-1.26.72a5.51 5.51 0 0 0-1.79-1V1.21a.34.34 0 0 0-.27-.34 7.29 7.29 0 0 0-3.22 0 .34.34 0 0 0-.28.34v1.45a5.83 5.83 0 0 0-1.79 1L3.06 3a.35.35 0 0 0-.43 0A7.24 7.24 0 0 0 1 5.83a.34.34 0 0 0 .16.41L2.44 7a5.49 5.49 0 0 0 0 2l-1.26.73a.35.35 0 0 0-.16.41A7.24 7.24 0 0 0 2.63 13a.35.35 0 0 0 .43.07l1.26-.73a5.56 5.56 0 0 0 1.79 1v1.45a.35.35 0 0 0 .28.34 7.29 7.29 0 0 0 3.22 0 .35.35 0 0 0 .28-.34v-1.45a6 6 0 0 0 1.79-1l1.26.73a.35.35 0 0 0 .43-.07A7.39 7.39 0 0 0 15 10.17a.37.37 0 0 0-.17-.41Zm-6.82.6A2.36 2.36 0 1 1 10.35 8 2.36 2.36 0 0 1 8 10.36Z" })),
+  'comment': () => (index.h("path", { fill: "currentColor", d: "M8 1.67c-3.37-.12-6.21 2.51-6.33 5.88 0 1.36.5 2.68 1.41 3.69-.26 1-.72 1.94-1.36 2.76-.04.08-.04.17 0 .25.03.08.1.13.18.13 1.3-.03 2.54-.55 3.48-1.45.83.34 1.72.51 2.62.5 3.37.12 6.21-2.51 6.33-5.88-.12-3.37-2.96-6-6.33-5.88Zm2.53 8.43c0 .14-.11.25-.25.25H5.73c-.14 0-.25-.1-.26-.24V9.2c0-.17.13-.3.3-.31h4.5c.14 0 .26.12.26.26v.95Zm.92-3.29c0 .17-.13.3-.3.3h-6.3c-.17 0-.3-.13-.3-.3V6c0-.16.12-.29.28-.3H11.15c.16 0 .29.12.3.28V6.81Z" })),
+  'credit-card': () => (index.h("path", { fill: "currentColor", d: "M14 2.67H2A1.33 1.33 0 0 0 .67 4v8A1.32 1.32 0 0 0 2 13.33h12A1.32 1.32 0 0 0 15.33 12V4A1.32 1.32 0 0 0 14 2.67M14 12H2V8h12Zm0-6.67H2V4h12Z" })),
   'cross': () => (index.h("path", { fill: "currentColor", d: "M14.26 12.74 9.52 8l4.7-4.7a.29.29 0 0 0 0-.41l-1.1-1.1a.29.29 0 0 0-.41 0L8 6.48 3.26 1.74a.24.24 0 0 0-.34 0L1.74 2.91a.24.24 0 0 0 0 .34L6.48 8l-4.7 4.7a.29.29 0 0 0 0 .41l1.1 1.1a.29.29 0 0 0 .41 0L8 9.52l4.74 4.74a.24.24 0 0 0 .34 0l1.17-1.17a.24.24 0 0 0 0-.34Z" })),
   'cross-circle': () => (index.h("path", { fill: "currentColor", d: "M8.06.67H8A7.33 7.33 0 0 0 .68 8v.1a7.42 7.42 0 0 0 7.23 7.23A7.33 7.33 0 1 0 8.06.67Zm3.6 9.57a.28.28 0 0 1 0 .4l-.19.2-.61.61-.2.19a.27.27 0 0 1-.39 0L8 9.41l-2.23 2.24a.27.27 0 0 1-.39 0l-.2-.2-.6-.6-.19-.2a.28.28 0 0 1 0-.4L6.6 8 4.36 5.76a.28.28 0 0 1 0-.4l1-1a.28.28 0 0 1 .4 0L8 6.59l2.24-2.24a.28.28 0 0 1 .4 0l.2.2.6.6.2.2a.28.28 0 0 1 0 .4L9.42 8Z" })),
-  'download': () => (index.h("path", { fill: "currentColor", d: "M6.44,2V6.09a.31.31,0,0,1-.31.31H4a.31.31,0,0,0-.31.29.33.33,0,0,0,.1.23l4,4a.29.29,0,0,0,.41,0h0l4-4a.3.3,0,0,0,0-.42A.29.29,0,0,0,12,6.4H9.91a.31.31,0,0,1-.31-.31h0V2a.29.29,0,0,0-.28-.3H6.74a.29.29,0,0,0-.3.28ZM1.69,13v1a.29.29,0,0,0,.29.29H14a.29.29,0,0,0,.29-.29V13a.29.29,0,0,0-.28-.3H2a.29.29,0,0,0-.33.25Z" })),
-  'exclamation-circle': () => (index.h("path", { fill: "currentColor", d: "M8 15.33A7.33 7.33 0 1 0 .67 8 7.33 7.33 0 0 0 8 15.33ZM7 4a.29.29 0 0 1 .3-.3h1.35A.29.29 0 0 1 9 4v4.68a.29.29 0 0 1-.28.3H7.35a.29.29 0 0 1-.3-.28Zm0 6.78a.29.29 0 0 1 .3-.3h1.35a.29.29 0 0 1 .3.3H9V12a.29.29 0 0 1-.28.3H7.35a.29.29 0 0 1-.3-.28Z" })),
-  'exclamation-triangle': () => (index.h("path", { fill: "currentColor", d: "m14.28 13.87-6-12a.32.32 0 0 0-.41-.15.36.36 0 0 0-.15.15l-6 12a.31.31 0 0 0 .14.42.33.33 0 0 0 .14 0h12a.3.3 0 0 0 .33-.28.31.31 0 0 0-.05-.14ZM7 6a.29.29 0 0 1 .28-.28h1.44A.28.28 0 0 1 9 6v4a.28.28 0 0 1-.28.29H7.28A.29.29 0 0 1 7 10Zm2 7a.31.31 0 0 1-.3.32H7.32A.32.32 0 0 1 7 13v-1.38a.31.31 0 0 1 .31-.31h1.4a.31.31 0 0 1 .31.31H9Z" })),
+  'download': () => (index.h("path", { fill: "currentColor", d: "M6.4 2v4.1c0 .2-.1.3-.3.3H4c-.2 0-.3.1-.3.3 0 .1 0 .2.1.2l4 4c.1.1.3.1.4 0l4-4c.1-.1.1-.3 0-.4-.1-.1-.1-.1-.2-.1H9.9c-.2 0-.3-.1-.3-.3V2c0-.2-.1-.3-.3-.3H6.7c-.1 0-.3.1-.3.3zm7.9 11v1c0 .2-.1.3-.3.3H2c-.2 0-.3-.1-.3-.3v-1c0-.2.1-.3.3-.3h12c.2 0 .3.1.3.3z" })),
+  'euro': () => (index.h("path", { fill: "currentColor", d: "M13 13.14a.4.4 0 0 0-.47-.31A7.79 7.79 0 0 1 11 13a4.31 4.31 0 0 1-4-2.79h3.8a.41.41 0 0 0 .39-.31l.19-.9a.39.39 0 0 0-.3-.47H6.51a7.07 7.07 0 0 1 0-1.38h4.89a.4.4 0 0 0 .39-.31l.22-1a.4.4 0 0 0-.3-.47H7a4.2 4.2 0 0 1 3.92-2.45 6.57 6.57 0 0 1 1.26.14.41.41 0 0 0 .47-.29l.4-1.45a.4.4 0 0 0-.28-.48A9.43 9.43 0 0 0 11 .67a7.12 7.12 0 0 0-6.83 4.7h-1.1a.4.4 0 0 0-.4.39v1a.4.4 0 0 0 .4.39h.72a9.08 9.08 0 0 0 0 1.38h-.72a.39.39 0 0 0-.4.39v.93a.4.4 0 0 0 .4.39h1A7 7 0 0 0 11 15.3a8.7 8.7 0 0 0 2-.25.39.39 0 0 0 .3-.46l-.3-1.45Z" })),
+  'exclamation-circle': () => (index.h("path", { fill: "currentColor", d: "M8 15.33c4.05 0 7.33-3.28 7.33-7.33S12.05.67 8 .67.67 3.95.67 8 3.95 15.33 8 15.33Zm.95-3.3c0 .15-.12.27-.28.27h-1.4c-.15 0-.28-.12-.28-.27v-1.31c0-.15.12-.28.28-.28h1.4c.15 0 .28.12.28.28v1.31ZM7 3.96c0-.14.11-.25.25-.25H8.7c.14 0 .25.11.25.25v4.8c0 .14-.11.25-.25.25H7.25c-.14 0-.25-.11-.25-.25V3.95Z" })),
+  'exclamation-triangle': () => (index.h("path", { fill: "currentColor", d: "m14.3 13.88-6-12a.32.32 0 0 0-.41-.15.31.31 0 0 0-.15.15l-6 12a.31.31 0 0 0 .14.42.32.32 0 0 0 .14 0H14a.31.31 0 0 0 .33-.29.23.23 0 0 0-.03-.13ZM7 6a.28.28 0 0 1 .28-.28h1.46A.28.28 0 0 1 9 6v4a.29.29 0 0 1-.28.29H7.3A.29.29 0 0 1 7 10Zm2 7a.31.31 0 0 1-.31.32H7.34A.32.32 0 0 1 7 13v-1.37a.31.31 0 0 1 .32-.31h1.39a.31.31 0 0 1 .31.31Z" })),
+  'eye': () => [
+    index.h("circle", { fill: "currentColor", cx: "8.01", cy: "7.96", r: "2.44" }),
+    index.h("path", { fill: "currentColor", d: "M15.24 7.59A8.12 8.12 0 0 0 8 2.67 8.12 8.12 0 0 0 .76 7.59a1 1 0 0 0 0 .82A8.12 8.12 0 0 0 8 13.33a8.12 8.12 0 0 0 7.24-4.92 1 1 0 0 0 0-.82ZM8 11.62A3.66 3.66 0 1 1 11.67 8 3.66 3.66 0 0 1 8 11.62Z" }),
+  ],
+  'eye-slash': () => [
+    index.h("path", { fill: "currentColor", d: "M10.25 7a2.43 2.43 0 0 0-2.08-1.46ZM6.45 6.1a2.43 2.43 0 1 0 3.85 2.69Z" }),
+    index.h("path", { fill: "currentColor", d: "M15.24 7.59A8.13 8.13 0 0 0 8 2.67a8.06 8.06 0 0 0-2.89.64l1.72 1.2A3.58 3.58 0 0 1 8 4.3a3.65 3.65 0 0 1 3.64 3.6l2.77 1.93a7.91 7.91 0 0 0 .81-1.42 1 1 0 0 0 .02-.82ZM.81 3.84 2.51 5A8.16 8.16 0 0 0 .76 7.59a1 1 0 0 0 0 .82A8.13 8.13 0 0 0 8 13.33a8 8 0 0 0 4.32-1.4l2 1.38.81-1.17-13.5-9.47ZM8 11.62A3.66 3.66 0 0 1 4.35 8a3.75 3.75 0 0 1 .29-1.42l5.85 4.11a3.65 3.65 0 0 1-2.49.93Z" }),
+  ],
+  'file': () => [
+    index.h("path", { fill: "currentColor", d: "M8.89 4.56V.67H3.35a.66.66 0 0 0-.66.68v13.3a.67.67 0 0 0 .66.68h9.3a.66.66 0 0 0 .66-.68v-9.4H9.55a.67.67 0 0 1-.66-.69Z" }),
+    index.h("path", { fill: "currentColor", d: "M13.12 3.67 10.41.87a.63.63 0 0 0-.47-.2h-.17v3.66h3.54v-.17a.69.69 0 0 0-.19-.49Z" }),
+  ],
   'file-cog': () => (index.h("path", { fill: "currentColor", d: "M9,10.1C9,10.6,8.5,11,8,11l0,0c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1C8.6,9,9,9.4,9,10.1C9,10,9,10,9,10.1z   M13.2,3.7l-2.8-2.8c-0.1-0.1-0.3-0.2-0.5-0.2H9.8v3.7h3.5V4.2C13.3,4,13.2,3.8,13.2,3.7L13.2,3.7z M9.6,5.3h3.8v9.4  c0,0.4-0.3,0.6-0.7,0.7H3.3c-0.4,0-0.7-0.3-0.7-0.7c0,0,0,0,0,0V1.3C2.7,1,3,0.7,3.3,0.7h5.5v3.9l0,0C8.9,4.9,9.2,5.2,9.6,5.3  C9.5,5.2,9.5,5.2,9.6,5.3z M10,8L9.5,8.3C9.3,8.1,9,8,8.8,7.9V7.3c0-0.1,0-0.1-0.1-0.1c-0.4-0.1-0.9-0.1-1.3,0  c-0.1,0-0.1,0.1-0.1,0.1v0.6C7,8,6.7,8.1,6.5,8.3L6,8C5.9,8,5.9,8,5.8,8C5.5,8.3,5.3,8.7,5.2,9.1c0,0.1,0,0.1,0.1,0.2l0.5,0.3  c-0.1,0.3-0.1,0.6,0,0.8l-0.5,0.3c-0.1,0-0.1,0.1-0.1,0.2c0.1,0.4,0.4,0.8,0.7,1.1c0.1,0,0.1,0,0.2,0l0.5-0.3  C6.7,11.9,7,12,7.2,12.1v0.6c0,0.1,0,0.1,0.1,0.1c0.4,0.1,0.9,0.1,1.3,0c0.1,0,0.1-0.1,0.1-0.1v-0.5C9,12.1,9.3,12,9.5,11.8l0.5,0.3  c0.1,0,0.1,0,0.2,0c0.3-0.3,0.5-0.7,0.6-1.1c0-0.1,0-0.1-0.1-0.2l0,0l-0.5-0.3c0-0.3,0-0.6,0-0.8l0.5-0.3c0.1,0,0.1-0.1,0.1-0.2  c-0.1-0.4-0.4-0.8-0.6-1.1C10.1,8,10.1,8,10,8z" })),
-  'file-text': () => (index.h("path", { fill: "currentColor", d: "M8.9 4.6V.7H3.3c-.3 0-.6.3-.6.6v13.3c0 .4.3.7.7.7h9.3c.4 0 .7-.3.7-.7V5.3H9.6c-.4-.1-.7-.4-.7-.7zm1.8 6.7c0 .2-.2.3-.3.4H5.7c-.2 0-.3-.2-.3-.4v-.2c0-.2.2-.3.3-.3h4.6c.2 0 .3.2.3.3v.2zm0-1.8c0 .2-.2.3-.3.3H5.7c-.2 0-.3-.2-.3-.3v-.2c0-.2.2-.3.3-.3h4.6c.2 0 .3.2.3.3v.2zm0-2.1v.2c0 .2-.2.3-.3.3H5.7c-.2.1-.4-.1-.4-.2v-.3c0-.2.2-.3.3-.3h4.6c.3 0 .5.1.5.3zm2.6-3.2v.2H9.8V.7h.2c.2 0 .3.1.5.2l2.7 2.8c0 .1.1.3.1.5z" })),
+  'file-download': () => [
+    index.h("path", { fill: "currentColor", d: "M13.12 3.67 10.41.87a.63.63 0 0 0-.47-.2h-.17v3.66h3.54v-.17a.69.69 0 0 0-.19-.49Z" }),
+    index.h("path", { fill: "currentColor", d: "M13.31 14.65v-9.4H9.55a.67.67 0 0 1-.66-.68V.67H3.35a.67.67 0 0 0-.66.66v13.32a.67.67 0 0 0 .66.68h9.3a.67.67 0 0 0 .66-.66Zm-2.91-4.24-2.54 2.53a.18.18 0 0 1-.26 0l-2.54-2.53a.2.2 0 0 1-.06-.15.18.18 0 0 1 .19-.18h1.34a.2.2 0 0 0 .2-.2V7.27a.19.19 0 0 1 .19-.18h1.63a.18.18 0 0 1 .18.19v2.6a.2.2 0 0 0 .2.2h1.34a.16.16 0 0 1 .14.06.19.19 0 0 1-.01.27Z" }),
+  ],
+  'file-excel': () => (index.h("path", { fill: "currentColor", d: "M8.89 4.43V.67H3.35a.65.65 0 0 0-.66.66v13.34a.65.65 0 0 0 .66.66h9.3a.65.65 0 0 0 .66-.66V5.09H9.55a.65.65 0 0 1-.66-.66Zm1.66 3.2-1.66 2.58 1.66 2.59a.34.34 0 0 1-.1.46.31.31 0 0 1-.18.05h-1a.32.32 0 0 1-.27-.17c-.54-1-1-1.9-1-1.9-.18.41-.28.55-1 1.9a.33.33 0 0 1-.29.18h-1A.34.34 0 0 1 5.4 13a.41.41 0 0 1 0-.18l1.67-2.58-1.62-2.61a.34.34 0 0 1 .1-.46.37.37 0 0 1 .18 0h1a.33.33 0 0 1 .3.17c.72 1.35.55.93 1 1.9 0 0 .17-.33 1-1.9a.33.33 0 0 1 .3-.17h1a.33.33 0 0 1 .33.33.41.41 0 0 1-.11.13ZM13.31 4v.17H9.77V.67h.17a.67.67 0 0 1 .47.19l2.71 2.71a.66.66 0 0 1 .19.43Z" })),
+  'file-pdf': () => (index.h("path", { fill: "currentColor", d: "M7.74 8a2.68 2.68 0 0 1-.06-1.3c.24 0 .21 1.02.06 1.3Zm0 1.31a12.5 12.5 0 0 1-.79 1.75 9.8 9.8 0 0 1 1.75-.61 3.63 3.63 0 0 1-1.01-1.14Zm-2.66 3.47s.36-.15 1-1.12a3.71 3.71 0 0 0-1 1.12Zm4.49-7.67h3.78v9.56a.65.65 0 0 1-.66.66H3.31a.66.66 0 0 1-.66-.66V1.33a.65.65 0 0 1 .7-.66h5.56v3.77a.67.67 0 0 0 .66.67Zm-.22 5a2.78 2.78 0 0 1-1.18-1.5 4 4 0 0 0 .17-1.78.7.7 0 0 0-.78-.6.69.69 0 0 0-.56.41 4.58 4.58 0 0 0 .23 2.14 26 26 0 0 1-1.13 2.38c-.76.39-2 1.24-1.52 1.89a.87.87 0 0 0 .6.28c.5 0 1-.5 1.7-1.72A15.24 15.24 0 0 1 9.07 11a4.34 4.34 0 0 0 1.78.54.72.72 0 0 0 .74-.7.78.78 0 0 0-.19-.51c-.4-.4-1.51-.33-2.05-.23Zm3.81-6.53L10.44.86A.71.71 0 0 0 10 .67h-.2v3.55h3.55v-.17a.7.7 0 0 0-.19-.47ZM11.1 10.9c.11-.08-.07-.33-1.19-.25 1.03.44 1.19.25 1.19.25Z" })),
+  'file-text': () => (index.h("path", { fill: "currentColor", d: "M8.89 4.56V.67H3.35c-.36 0-.66.3-.66.66v13.32c0 .37.29.67.66.68h9.3c.36 0 .66-.3.66-.66V5.25H9.55c-.37 0-.67-.31-.66-.68Zm1.77 6.75c0 .19-.15.34-.34.35H5.68c-.19 0-.34-.16-.34-.35v-.23c0-.19.15-.34.34-.34h4.64c.19 0 .34.15.34.34v.23Zm0-1.83c0 .19-.15.34-.34.34H5.68c-.19 0-.34-.15-.34-.34v-.23c0-.19.15-.34.34-.34h4.64c.19 0 .34.15.34.34v.23Zm0-2.06v.23c0 .19-.15.34-.34.34H5.68c-.19 0-.34-.15-.34-.34v-.23c0-.19.15-.34.34-.35h4.64c.19 0 .34.16.34.35Zm2.65-3.27v.17H9.77V.67h.17c.18 0 .35.07.47.2l2.71 2.8c.13.13.19.31.19.49Z" })),
+  'file-text-outline': () => (index.h("path", { fill: "currentColor", d: "M10.31 10.74H5.69c-.2 0-.36.16-.36.35v.22c0 .19.16.35.36.35h4.62c.2 0 .36-.16.36-.35v-.22c0-.19-.16-.35-.36-.35Zm0-1.84H5.69c-.2 0-.36.16-.36.36v.21c0 .2.16.35.36.35h4.62c.2 0 .36-.15.36-.35v-.21c0-.2-.16-.36-.36-.36Zm0-1.83H5.69c-.2 0-.36.16-.36.35v.22c0 .19.16.35.36.35h4.62c.2 0 .36-.16.36-.35v-.22c0-.19-.16-.35-.36-.35Zm0 3.67H5.69c-.2 0-.36.16-.36.35v.22c0 .19.16.35.36.35h4.62c.2 0 .36-.16.36-.35v-.22c0-.19-.16-.35-.36-.35Zm0-1.84H5.69c-.2 0-.36.16-.36.36v.21c0 .2.16.35.36.35h4.62c.2 0 .36-.15.36-.35v-.21c0-.2-.16-.36-.36-.36Zm0-1.83H5.69c-.2 0-.36.16-.36.35v.22c0 .19.16.35.36.35h4.62c.2 0 .36-.16.36-.35v-.22c0-.19-.16-.35-.36-.35Zm2.76-2.64L9.69.92A.8.8 0 0 0 9.1.67H3.35c-.36 0-.66.3-.66.66v13.32c0 .37.29.67.66.68h9.3c.36 0 .66-.3.66-.66V5.05c0-.23-.07-.45-.24-.62Zm-.76 9.9H3.69V1.67h5.2v2.75c0 .46.37.83.83.83h2.59v9.08Z" })),
   'file-upload': () => [
     index.h("path", { fill: "currentColor", d: "M13.1 3.7 10.4.9c-.1-.1-.3-.2-.5-.2h-.1v3.7h3.5v-.2c0-.2-.1-.4-.2-.5z" }),
     index.h("path", { fill: "currentColor", d: "M13.3 14.6V5.3H9.6c-.4 0-.7-.3-.7-.7V.7H3.3c-.3 0-.6.3-.6.6v13.3c0 .4.3.7.7.7h9.3c.3 0 .6-.3.6-.7zm-3-4.6H8.9c-.1 0-.2.1-.2.2v2.6c0 .1-.1.2-.2.2H6.9c-.1 0-.2-.1-.2-.2v-2.6c0-.1-.1-.2-.2-.2H5.1C5 9.9 5 9.8 5 9.7l2.5-2.6c.1-.1.2-.1.3 0l2.5 2.5.1.1c.1.2 0 .3-.1.3z" }),
   ],
-  'floppy-disk': () => (index.h("path", { fill: "currentColor", d: "m13.94 4.44-2.38-2.38a1.39 1.39 0 0 0-1-.39H3A1.35 1.35 0 0 0 1.67 3v10A1.35 1.35 0 0 0 3 14.33h10A1.35 1.35 0 0 0 14.33 13V5.4a1.39 1.39 0 0 0-.39-1ZM8 12.52a1.81 1.81 0 1 1 1.81-1.81A1.81 1.81 0 0 1 8 12.52Zm2.71-8.6v2.84a.34.34 0 0 1-.34.34H3.82a.34.34 0 0 1-.34-.34V3.82a.34.34 0 0 1 .34-.34h6.46a.35.35 0 0 1 .24.1l.1.1a.35.35 0 0 1 .1.24Z" })),
+  'filter': () => (index.h("path", { fill: "currentColor", d: "M13.74 1.66H2.26a.6.6 0 0 0-.59.6.59.59 0 0 0 .17.42l4.58 4.58v5.1a.58.58 0 0 0 .25.48l2 1.39a.6.6 0 0 0 .83-.15.59.59 0 0 0 .1-.34V7.26l4.58-4.58a.6.6 0 0 0 0-.84.64.64 0 0 0-.44-.18Z" })),
+  'floppy-disk': () => (index.h("path", { fill: "currentColor", d: "m13.93 4.44-2.37-2.37c-.25-.25-.6-.4-.96-.4H3.03c-.75 0-1.36.61-1.36 1.36v9.94c0 .75.61 1.36 1.36 1.36h9.94c.75 0 1.36-.61 1.36-1.36V5.4c0-.36-.14-.7-.4-.96ZM8 12.52A1.81 1.81 0 1 1 8 8.9a1.81 1.81 0 0 1 0 3.62Zm2.71-5.77c0 .09-.04.18-.1.24a.35.35 0 0 1-.24.1H3.82c-.19 0-.34-.15-.34-.34V3.82c0-.19.15-.34.34-.34h6.55c.19 0 .34.15.34.34v2.93Z" })),
+  'folder': () => (index.h("path", { fill: "currentColor", d: "M14 4.44H8.46L6.62 2.67H2C1.27 2.67.68 3.27.67 4v8c0 .73.6 1.32 1.33 1.33h12c.73 0 1.32-.6 1.33-1.33V5.78c0-.73-.6-1.33-1.33-1.34Z" })),
+  'folder-lines': () => (index.h("path", { fill: "currentColor", d: "M14 4.44H8.46L6.62 2.67H2A1.35 1.35 0 0 0 .67 4v8A1.35 1.35 0 0 0 2 13.33h12A1.35 1.35 0 0 0 15.33 12V5.78A1.36 1.36 0 0 0 14 4.44Zm-4.57 6.38a.2.2 0 0 1-.2.2H3.41a.2.2 0 0 1-.2-.2v-.9a.2.2 0 0 1 .2-.2h5.82a.2.2 0 0 1 .2.2Zm3.36-2.95a.2.2 0 0 1-.2.2H3.42a.2.2 0 0 1-.2-.2V7a.2.2 0 0 1 .2-.2h9.17a.2.2 0 0 1 .2.2Z" })),
+  'folder-link': () => (index.h("path", { fill: "currentColor", d: "M14 4.44H8.46L6.62 2.67H2C1.27 2.67.68 3.27.67 4v8c0 .73.6 1.32 1.33 1.33h12c.73 0 1.32-.6 1.33-1.33V5.78c0-.73-.6-1.33-1.33-1.34Zm-6.82 6.88H5.65c-1.34 0-2.42-1.08-2.42-2.42 0-1.34 1.08-2.42 2.42-2.42h.84c.14 0 .25.11.25.25 0 .06-.02.13-.06.17-.2.21-.36.45-.49.71-.04.07-.11.13-.19.14h-.33c-.62-.15-1.24.22-1.39.84-.15.62.22 1.24.84 1.39.15.04.31.04.47.02h1.58c.62 0 1.12-.48 1.15-1.1v-.22c-.02-.08 0-.16.06-.22.12-.13.29-.2.47-.2h.45c.12 0 .23.09.25.21.02.14.02.29 0 .43 0 1.32-1.05 2.39-2.37 2.42Zm3.17 0h-.84c-.06 0-.13-.02-.17-.07-.1-.1-.1-.25 0-.35.2-.21.36-.45.49-.71.02-.09.08-.16.17-.19h.36c.63.04 1.18-.43 1.23-1.07.04-.63-.43-1.18-1.07-1.23H8.83c-.64 0-1.15.51-1.15 1.15v.25c.02.08 0 .16-.06.22-.12.13-.29.21-.47.21H6.7c-.13 0-.24-.09-.26-.22-.01-.14-.01-.27 0-.41a2.41 2.41 0 0 1 2.38-2.43h1.52c1.34 0 2.42 1.07 2.43 2.41 0 1.34-1.09 2.42-2.42 2.43Z" })),
+  'folder-star': () => (index.h("path", { fill: "currentColor", d: "M14 4.44H8.46L6.62 2.67H2A1.35 1.35 0 0 0 .67 4v8A1.35 1.35 0 0 0 2 13.33h12A1.35 1.35 0 0 0 15.33 12V5.78A1.36 1.36 0 0 0 14 4.44Zm-.2 3.89L12 9.66l.69 2a.22.22 0 0 1-.08.27.26.26 0 0 1-.13.06.39.39 0 0 1-.15-.06l-1.77-1.26L8.75 12a.34.34 0 0 1-.15 0 .31.31 0 0 1-.13 0 .23.23 0 0 1-.08-.27l.69-2-1.81-1.35a.23.23 0 0 1-.1-.17.24.24 0 0 1 .24-.24h2.21l.67-2a.26.26 0 0 1 .15-.14.24.24 0 0 1 .31.14l.67 2h2.2a.26.26 0 0 1 .26.24.3.3 0 0 1-.08.12Z" })),
+  'graduation-cap': () => (index.h("path", { fill: "currentColor", d: "M14.93 5.14 8.54 2.76c-.35-.13-.73-.13-1.08 0L1.07 5.14c-.31.13-.48.47-.39.8.04.22.19.39.39.47l1.12.42c-.26.38-.4.84-.41 1.3-.35.28-.47.75-.3 1.16.06.12.14.23.24.31l-.59 3.19c-.06.22.07.45.28.53h1.37c.22-.02.38-.22.36-.44v-.1L2.55 9.6c.32-.31.4-.79.2-1.18a.814.814 0 0 0-.24-.28c0-.38.18-.75.47-1l4.48 1.65c.35.13.73.13 1.08 0l6.39-2.38c.31-.13.48-.47.39-.8a.625.625 0 0 0-.39-.47Zm-6.18 4.5c-.48.18-1.02.18-1.5 0L3.93 8.4l-.33 3.15c0 1 2 1.78 4.4 1.78s4.4-.79 4.4-1.78l-.33-3.15-3.32 1.24Z" })),
+  'history': () => [
+    index.h("path", { fill: "currentColor", d: "M8,1.67A6.37,6.37,0,0,0,3.6,3.42l-.91-.91a.6.6,0,0,0-.85,0h0a.58.58,0,0,0-.18.43V6.37A.61.61,0,0,0,2.24,7H5.68a.62.62,0,0,0,.62-.62A.69.69,0,0,0,6.12,6L5.05,4.87a4.29,4.29,0,1,1,.1,6.36.3.3,0,0,0-.41,0l-1,1a.3.3,0,0,0,0,.42h0A6.33,6.33,0,1,0,8,1.67Z" }),
+    index.h("path", { fill: "currentColor", d: "M9.85,9.3l-.36.36a.3.3,0,0,1-.43,0L7.45,8V5.15a.3.3,0,0,1,.3-.3h.5a.3.3,0,0,1,.3.3V7.58l1.3,1.3A.31.31,0,0,1,9.85,9.3Z" }),
+  ],
+  'home': () => index.h("path", { fill: "currentColor", d: "M6.75 14.33V9.86h2.5v4.47h3.13v-6h1.88L8 1.67l-6.26 6.7h1.88v6Z" }),
   'info-circle': () => (index.h("path", { fill: "currentColor", d: "M8 .67A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67ZM9 12a.29.29 0 0 1-.3.3H7.35a.29.29 0 0 1-.3-.3V7.32A.29.29 0 0 1 7.33 7h1.32a.29.29 0 0 1 .35.3Zm0-6.74a.29.29 0 0 1-.3.3H7.35a.29.29 0 0 1-.3-.3V4a.29.29 0 0 1 .28-.3h1.32a.29.29 0 0 1 .3.28V4Z" })),
+  'key': () => (index.h("path", { fill: "currentColor", d: "M8.44 6.67a3.994 3.994 0 0 0-5.1-2.44A3.986 3.986 0 0 0 .9 9.33 3.994 3.994 0 0 0 6 11.77c1.14-.4 2.04-1.3 2.44-2.44h2.89V12H14V9.33h1.33V6.67H8.44ZM4.67 9.33c-.73 0-1.33-.6-1.33-1.33s.6-1.33 1.33-1.33C5.4 6.67 6 7.27 6 8c0 .73-.58 1.32-1.31 1.33h-.02Z" })),
+  'laptop': () => (index.h("path", { fill: "currentColor", d: "M12.89 12.08c.68-.02 1.23-.58 1.22-1.26v-6.9c0-.68-.54-1.24-1.22-1.25H3.11c-.68.01-1.23.57-1.22 1.25v6.9c-.01.68.53 1.25 1.22 1.26H.67c-.01.68.53 1.24 1.21 1.25h12.23c.68 0 1.23-.56 1.22-1.24h-2.44ZM3.11 3.92h9.78v6.9H3.11v-6.9ZM8 12.71c-.34 0-.62-.29-.61-.63 0-.34.27-.61.61-.61.34 0 .61.27.61.61 0 .34-.27.63-.61.63Z" })),
+  'lines-rectangle': () => (index.h("path", { fill: "currentColor", d: "M12.32.67H3.68c-.56 0-1.01.45-1.01 1.01v12.64c0 .56.45 1.01 1.01 1.01h8.64c.56 0 1.01-.45 1.01-1.01V1.68c0-.56-.45-1.01-1.01-1.01ZM9 11.25H4.67v-2H9v2Zm2.33-4.49H4.67v-2h6.67v2Z" })),
+  'life-ring': () => (index.h("path", { fill: "currentColor", d: "M8 .67A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Zm5.14 3.53-1.88 1.88a3.91 3.91 0 0 0-1.34-1.34l1.88-1.88a6.55 6.55 0 0 1 1.34 1.34ZM8 10.84A2.84 2.84 0 1 1 10.84 8 2.84 2.84 0 0 1 8 10.84Zm-3.8-8 1.88 1.9a3.91 3.91 0 0 0-1.34 1.34L2.86 4.2A6.55 6.55 0 0 1 4.2 2.86ZM2.86 11.8l1.88-1.88a3.91 3.91 0 0 0 1.34 1.34L4.2 13.14a6.55 6.55 0 0 1-1.34-1.34Zm8.94 1.34-1.88-1.88a3.91 3.91 0 0 0 1.34-1.34l1.88 1.88a6.55 6.55 0 0 1-1.34 1.34Z" })),
+  'link': () => (index.h("path", { fill: "currentColor", d: "M9.75 6.25a3.748 3.748 0 0 1 0 5.31l-1.66 1.67a3.76 3.76 0 0 1-5.32 0 3.76 3.76 0 0 1 0-5.32l.92-.92c.15-.15.4-.16.56 0 .07.07.11.16.12.26.02.44.1.88.24 1.3.05.14.01.3-.09.41l-.32.32c-.72.67-.76 1.8-.09 2.52s1.8.76 2.52.09c.03-.02.05-.05.07-.07l1.66-1.66c.7-.7.7-1.82 0-2.52-.08-.08-.16-.15-.26-.21a.394.394 0 0 1-.17-.31.98.98 0 0 1 .29-.74l.52-.52c.14-.14.35-.15.51-.04.18.13.35.27.51.43Zm3.49-3.48a3.76 3.76 0 0 0-5.32 0L6.26 4.43a3.772 3.772 0 0 0 .52 5.75c.16.11.37.09.51-.04l.52-.52c.2-.19.3-.46.29-.74a.38.38 0 0 0-.17-.31 1.775 1.775 0 0 1-.26-2.73l1.66-1.66c.68-.71 1.81-.74 2.52-.06.71.68.74 1.81.06 2.52-.02.03-.05.05-.07.07l-.32.32c-.11.11-.14.27-.09.41.14.42.22.86.24 1.3 0 .22.19.39.41.38.1 0 .19-.05.26-.12l.92-.92a3.76 3.76 0 0 0 0-5.32Z" })),
+  'list': () => (index.h("path", { fill: "currentColor", d: "M1.9 2.68c-.67 0-1.22.56-1.21 1.23 0 .67.56 1.22 1.23 1.21.67 0 1.22-.56 1.21-1.23 0-.32-.13-.63-.36-.86-.23-.23-.54-.36-.87-.35Zm0 4.09a1.23 1.23 0 1 0 0 2.46 1.23 1.23 0 1 0 0-2.46Zm0 4.09a1.23 1.23 0 1 0 0 2.46 1.23 1.23 0 1 0 0-2.46Zm13 .41H5.18c-.23 0-.41.18-.41.41v.82c0 .23.18.41.41.41h9.75c.23 0 .41-.18.41-.41v-.82c0-.23-.18-.41-.41-.41h-.03Zm0-8.18H5.18c-.23 0-.41.18-.41.41v.81c0 .23.18.41.41.41h9.75c.23 0 .41-.18.41-.41V3.5c0-.23-.18-.41-.41-.41h-.03Zm0 4.09H5.18c-.23 0-.41.18-.41.41v.82c0 .23.18.41.41.41h9.75c.23 0 .41-.18.41-.41v-.82c0-.23-.18-.41-.41-.41h-.03Z" })),
   'loader': () => [
     index.h("path", { fill: "currentColor", class: "loader__full-circle", d: "M8 2.67A5.33 5.33 0 1 1 2.67 8 5.33 5.33 0 0 1 8 2.67m0-2A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Z" }),
     index.h("path", { fill: "currentColor", d: "M8 2.67v-2A7.33 7.33 0 0 0 .67 8h2A5.33 5.33 0 0 1 8 2.67Z" }),
   ],
+  'lock': () => (index.h("path", { fill: "currentColor", d: "M12 5.56h-.67v-1.4C11.37 2.28 9.88.71 8 .67 6.12.71 4.63 2.28 4.67 4.16v1.4H4c-.75.02-1.35.64-1.33 1.39V14c.02.73.6 1.31 1.33 1.33h8c.75-.02 1.35-.64 1.33-1.39V7a1.37 1.37 0 0 0-1.28-1.44H12Zm-4 6.28c-.77.04-1.43-.56-1.47-1.33-.04-.77.56-1.43 1.33-1.47.77-.04 1.43.56 1.47 1.33v.07c.02.75-.57 1.38-1.32 1.4H8Zm2.07-6.28H5.93v-1.4A2.12 2.12 0 0 1 8 2c1.17.03 2.1 1 2.07 2.17v1.39Z" })),
+  'location': () => (index.h("path", { fill: "currentColor", d: "M8 .67A5.1 5.1 0 0 0 2.67 5.5c0 3.06 3.51 7.88 4.83 9.59a.64.64 0 0 0 1 0c1.32-1.71 4.83-6.53 4.83-9.59A5.1 5.1 0 0 0 8 .67Zm0 6.94a1.74 1.74 0 1 1 1.74-1.73A1.73 1.73 0 0 1 8 7.61Z" })),
   'log-in': () => (index.h("path", { fill: "currentColor", d: "M10.97,7.78h0L6.97,3.78c-.12-.12-.31-.12-.42,0h0c-.07,.06-.12,.15-.13,.24v2.07c0,.17-.13,.3-.3,.32H1.97c-.16,0-.29,.12-.3,.28h0v2.58c0,.16,.12,.29,.28,.3H6.11c.17,0,.3,.14,.3,.31v2.14c0,.16,.12,.29,.28,.3h0c.11,.01,.21-.03,.28-.11l4-4c.11-.12,.11-.3,0-.42Zm3.37,5.26h0v1c0,.16-.13,.28-.28,.28h-4.77c-.16,0-.28-.13-.28-.28v-1c0-.16,.13-.28,.28-.28h3.43V3.3h-3.42c-.16,0-.29-.13-.29-.29V1.97c0-.16,.13-.29,.29-.29h4.76c.16,0,.29,.13,.29,.29v.68h0V13.04Z" })),
   'log-out': () => [
     index.h("path", { fill: "currentColor", d: "M14.25,7.77h0l-4-4a.31.31,0,0,0-.43,0A.34.34,0,0,0,9.7,4V6.07a.32.32,0,0,1-.3.32H5.23a.3.3,0,0,0-.3.3V9.25a.3.3,0,0,0,.3.3H9.4a.31.31,0,0,1,.3.31V12a.3.3,0,0,0,.3.3.33.33,0,0,0,.23-.09l4-4A.29.29,0,0,0,14.25,7.77Z" }),
     index.h("path", { fill: "currentColor", d: "M6.71,12.72H3.27V3.26H6.69A.31.31,0,0,0,7,3V2a.3.3,0,0,0-.31-.3H2A.29.29,0,0,0,1.67,2h0V3h0V14a.27.27,0,0,0,.1.24h0a.32.32,0,0,0,.14.08H6.71A.3.3,0,0,0,7,14V13A.3.3,0,0,0,6.71,12.72Z" }),
   ],
-  'magnifying-glass': () => (index.h("path", { fill: "currentColor", d: "M11.24,9.52A5.17,5.17,0,0,0,9.51,2.41l-.17-.09A5.18,5.18,0,0,0,4,11.18a5.16,5.16,0,0,0,5.54.11L12.3,14a1,1,0,0,0,1.41,0l.33-.33a1,1,0,0,0,0-1.41Zm-4.4.5A3.19,3.19,0,1,1,10,6.8v.06A3.19,3.19,0,0,1,6.84,10Z" })),
+  'magnifying-glass': () => (index.h("path", { fill: "currentColor", d: "M11.24 9.5c1.48-2.44.71-5.62-1.73-7.1-.05-.03-.11-.07-.17-.1A5.232 5.232 0 0 0 2.52 4C.94 6.38 1.6 9.59 3.98 11.17a5.142 5.142 0 0 0 5.54.1L12.3 14c.39.39 1.02.39 1.41 0l.33-.33a.996.996 0 0 0 0-1.41l-2.8-2.76Zm-4.4.5c-1.76.02-3.2-1.4-3.22-3.16-.02-1.76 1.4-3.2 3.16-3.22 1.76-.02 3.2 1.4 3.22 3.16v.06A3.193 3.193 0 0 1 6.84 10Z" })),
+  'mail': () => (index.h("path", { fill: "currentColor", d: "M13.87 2.67H2.13C1.36 2.64.71 3.23.67 4v8c.03.77.68 1.36 1.45 1.33h11.75c.77.04 1.42-.55 1.46-1.32V4c-.03-.77-.68-1.36-1.45-1.33h-.01Zm0 2.66L8 8.67 2.13 5.33V4L8 7.33 13.87 4v1.33Z" })),
+  'notes-outline': () => (index.h("path", { fill: "currentColor", d: "M13.11 4.74v5.38h-3v3H4.73V4.74h8.38m0-1.2H4.73a1.2 1.2 0 0 0-1.2 1.2v8.38a1.2 1.2 0 0 0 1.2 1.19h6l3.59-3.59v-6a1.2 1.2 0 0 0-1.21-1.18Zm-4.19 6.58h-3V8.93h3Zm3-2.39h-6v-1.2h6ZM3.8 11.19h-1V2.81h8.38v1h1.2v-1a1.2 1.2 0 0 0-1.2-1.2H2.81a1.2 1.2 0 0 0-1.2 1.2v8.38a1.2 1.2 0 0 0 1.2 1.2h1Z" })),
   'paper-plane': () => (index.h("path", { fill: "currentColor", d: "M14 1.69 1.84 7a.28.28 0 0 0-.15.36.29.29 0 0 0 .16.15l3.27 1.82a.57.57 0 0 0 .61-.06l6.45-5.57c.05 0 .15-.1.19-.06s0 .14-.06.18l-5.59 6.29a.52.52 0 0 0 0 .63l2.09 3.44a.28.28 0 0 0 .37.12.3.3 0 0 0 .13-.12l5-12.11a.3.3 0 0 0-.14-.37.28.28 0 0 0-.17-.01Z" })),
   'paper-plane-slash': () => (index.h("path", { fill: "currentColor", d: "M2.67,1.69,14.26,13.28l-1,1-2.79-2.8-1.1,2.67a.3.3,0,0,1-.13.12.28.28,0,0,1-.37-.12L6.75,10.74a.52.52,0,0,1,0-.63L7.82,8.9l-.76-.76L5.76,9.27a.57.57,0,0,1-.61.06L1.88,7.51a.29.29,0,0,1-.16-.15A.28.28,0,0,1,1.87,7L4.68,5.76l-3-3Zm11.53,0a.28.28,0,0,0-.22,0L7.53,4.51,9.26,6.24l3-2.54s.15-.1.19-.06,0,.14-.06.18L9.75,6.73l1.88,1.88,2.71-6.54A.3.3,0,0,0,14.2,1.7Z" })),
   'pen': () => (index.h("path", { fill: "currentColor", d: "M1.67,11.69v2.64h2.64l7.78-7.78-2.64-2.64L1.67,11.69ZM14.13,4.51c.27-.28,.27-.72,0-1h0l-1.65-1.64c-.28-.27-.72-.27-1,0h0l-1.28,1.29,2.64,2.64,1.29-1.29Z" })),
   'pen-fancy': () => (index.h("path", { fill: "currentColor", d: "M3.63,8.65c-.24,.07-.43,.26-.5,.5l-1.46,4.37,.11,.12,2.3-2.3c0-.06,0-.13,0-.19,0-.44,.35-.8,.79-.81,.44,0,.8,.35,.81,.79,0,.44-.35,.8-.79,.81,0,0-.01,0-.02,0h-.19l-2.3,2.3,.12,.11,4.37-1.46c.24-.07,.43-.26,.5-.5l.82-2.08-2.49-2.48-2.07,.82ZM10.8,2.35L6.27,7.28l2.42,2.42,4.94-4.52c2.1-1.86-.99-4.92-2.83-2.83Z" })),
+  'picture': () => (index.h("path", { fill: "currentColor", d: "M14.33 12.93V3.07a1.4 1.4 0 0 0-1.4-1.4H3.07a1.4 1.4 0 0 0-1.4 1.4v9.86a1.4 1.4 0 0 0 1.4 1.4h9.86a1.4 1.4 0 0 0 1.4-1.4ZM5.54 9.06l1.76 2.11L9.76 8l3.17 4.22H3.07Z" })),
+  'play-circle': () => (index.h("path", { fill: "currentColor", d: "M8 .67A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Zm3.42 8-5.2 3a.72.72 0 0 1-1-.28.73.73 0 0 1-.09-.35V4.92a.71.71 0 0 1 .71-.71 1.06 1.06 0 0 1 .35.09l5.2 3.17a.71.71 0 0 1 .27 1 .64.64 0 0 1-.24.24Z" })),
+  'plus': () => (index.h("path", { fill: "currentColor", d: "M9.41 6.59V1.92a.24.24 0 0 0-.24-.25H6.84a.24.24 0 0 0-.25.24v4.68H1.92a.24.24 0 0 0-.25.24v2.33a.24.24 0 0 0 .24.25h4.68v4.67a.24.24 0 0 0 .24.25h2.33a.24.24 0 0 0 .25-.24V9.41h4.67a.24.24 0 0 0 .25-.24V6.84a.24.24 0 0 0-.24-.25H9.41Z" })),
   'plus-circle': () => (index.h("path", { fill: "currentColor", d: "M8,0.7C4,0.7,0.7,4,0.7,8S4,15.3,8,15.3S15.3,12,15.3,8l0,0C15.3,4,12,0.7,8,0.7  C8,0.7,8,0.7,8,0.7z M12.3,8.8c0,0.2-0.2,0.4-0.4,0.4H9.2v2.7c0,0.2-0.2,0.4-0.4,0.4H7.2c-0.2,0-0.4-0.2-0.3-0.4V9.2H4.1  C3.9,9.2,3.7,9,3.7,8.8V7.2c0-0.2,0.2-0.4,0.4-0.3h2.7V4.1c0-0.2,0.2-0.4,0.3-0.4h1.7c0.2,0,0.4,0.2,0.4,0.4v2.7h2.7  c0.2,0,0.4,0.2,0.4,0.3L12.3,8.8z" })),
+  'question-circle': () => (index.h("path", { fill: "currentColor", d: "M15.33 8A7.33 7.33 0 1 1 8 .67 7.33 7.33 0 0 1 15.33 8ZM8.2 3.09A3.83 3.83 0 0 0 4.75 5a.35.35 0 0 0 .08.48l1 .78a.36.36 0 0 0 .49-.07c.55-.69.92-1.08 1.68-1.08.61 0 1.35.39 1.35 1s-.36.67-1 1S6.82 8 6.82 9.18v.12a.35.35 0 0 0 .35.35h1.66a.35.35 0 0 0 .35-.35c0-.84 2.46-.88 2.46-3.15A3.37 3.37 0 0 0 8.2 3.09ZM8 10.42a1.37 1.37 0 1 0 1.36 1.37A1.36 1.36 0 0 0 8 10.42Z" })),
+  'share': () => (index.h("path", { fill: "currentColor", d: "M13.43,10.67a2,2,0,0,0-2.42.18L5.64,8.28a2.11,2.11,0,0,0,0-.56L11,5.15a2,2,0,0,0,2.42.18,2,2,0,1,0-3.08-1.57L4.83,6.4l-.11-.09a2,2,0,1,0,.12,3.3l5.51,2.63a2,2,0,1,0,3.08-1.57Z" })),
+  'shuffle': () => (index.h("path", { fill: "currentColor", d: "M15.13 10.45a.51.51 0 0 1 0 .81l-2.29 1.91c-.29.24-.71.24-1 0-.12-.1-.2-.24-.2-.4v-.95H10c-.09 0-.18-.03-.25-.09l-2-1.8 1.49-1.37 1.51 1.35h.92V9c.04-.35.34-.6.69-.57.18 0 .35.06.48.17l2.29 1.9v-.05ZM1 6.09h2.42l1.51 1.35 1.53-1.36-2-1.8a.41.41 0 0 0-.26-.09H1a.328.328 0 0 0-.34.29v1.33c.02.17.17.3.34.28Zm10.66 0v1c.04.35.34.6.69.57.18 0 .35-.06.48-.17l2.29-1.9a.51.51 0 0 0 0-.81l-2.28-1.95a.81.81 0 0 0-1 0c-.12.1-.2.25-.2.41v1H10c-.09 0-.18.03-.25.09L3.42 9.91H1a.313.313 0 0 0-.34.28v1.33c.02.17.17.3.34.29h3.18c.09 0 .19-.03.26-.09l6.31-5.62h.91Z" })),
+  'sitemap': () => (index.h("path", { fill: "currentColor", d: "M3.33 10h-2c-.37 0-.66.3-.66.67v2c0 .36.3.65.66.66h2c.37 0 .66-.29.67-.66v-2c0-.37-.3-.67-.67-.67Zm-.5-1.67H7.5v1h1v-1h4.67v1h1v-1.2c0-.44-.36-.8-.8-.8H8.5V6h.83c.37 0 .67-.3.67-.67v-2c0-.37-.3-.66-.67-.66H6.67c-.37 0-.66.29-.67.66v2c0 .37.3.67.67.67h.83v1.33H2.63c-.44 0-.8.36-.8.8v1.2h1v-1ZM9 10H7c-.37 0-.67.3-.67.67v2c0 .37.3.66.67.66h2c.37 0 .66-.29.67-.66v-2c0-.37-.3-.67-.67-.67Zm5.67 0h-2c-.37 0-.67.3-.67.67v2c0 .37.3.66.67.66h2c.36 0 .65-.3.66-.66v-2c0-.37-.29-.66-.66-.67Z" })),
+  'squares': () => (index.h("path", { fill: "currentColor", d: "M2.27 1.67h4.47c.33 0 .6.27.6.6v4.47c0 .33-.27.6-.6.6H2.27c-.33 0-.6-.27-.6-.6V2.27c0-.33.27-.6.6-.6Zm7 0h4.47c.33 0 .6.27.6.6v4.47c0 .33-.27.6-.6.6H9.27c-.33 0-.6-.27-.6-.6V2.27c0-.33.27-.6.6-.6Zm0 7h4.47c.33 0 .6.27.6.6v4.47c0 .33-.27.6-.6.6H9.27c-.33 0-.6-.27-.6-.6V9.27c0-.33.27-.6.6-.6Zm-7 0h4.47c.33 0 .6.27.6.6v4.47c0 .33-.27.6-.6.6H2.27c-.33 0-.6-.27-.6-.6V9.27c0-.33.27-.6.6-.6Z" })),
+  'table': () => (index.h("path", { fill: "currentColor", d: "M14.19 2.68H1.81A1.14 1.14 0 0 0 .67 3.82v8.36a1.14 1.14 0 0 0 1.14 1.14h12.38a1.14 1.14 0 0 0 1.14-1.14V3.82a1.14 1.14 0 0 0-1.14-1.14ZM7.24 11.8H2.19V9.52h5.05Zm0-3.8H2.19V5.72h5.05Zm6.57 3.8H8.76V9.52h5.05Zm0-3.8H8.76V5.72h5.05Z" })),
+  'tag': () => (index.h("path", { fill: "currentColor", d: "M1.67 7.9V2.85a1.18 1.18 0 0 1 1.18-1.18H7.9a1.18 1.18 0 0 1 .84.33L14 7.26a1.2 1.2 0 0 1 0 1.68L8.94 14a1.2 1.2 0 0 1-1.68 0L2 8.74a1.18 1.18 0 0 1-.33-.84Zm2.77-4.65a1.19 1.19 0 1 0 1.18 1.19 1.19 1.19 0 0 0-1.18-1.19Z" })),
+  'tags': () => [
+    index.h("path", { fill: "currentColor", d: "M12.08 7.37 7.22 3a1.12 1.12 0 0 0-.78-.29H1.77a1 1 0 0 0-1.1 1v4.21a1 1 0 0 0 .33.71L5.85 13a1.17 1.17 0 0 0 1.55 0l4.68-4.25a.94.94 0 0 0 0-1.38ZM3.23 6.13A1.13 1.13 0 1 1 4.36 5a1.13 1.13 0 0 1-1.13 1.13Z" }),
+    index.h("path", { fill: "currentColor", d: "M15 7.37 10.15 3a1.12 1.12 0 0 0-.77-.29H8.26l4.5 4.09a1.76 1.76 0 0 1 0 2.65L8.77 13a1.17 1.17 0 0 0 1.55 0L15 8.79a.94.94 0 0 0 0-1.42Z" }),
+  ],
+  'thumb-up': () => (index.h("path", { fill: "currentColor", d: "M2.11 14.36h1a.45.45 0 0 0 .45-.44V7.17a.45.45 0 0 0-.45-.44h-1a.44.44 0 0 0-.44.44v6.75a.44.44 0 0 0 .44.44Zm12.22-7a1.27 1.27 0 0 0-1.27-1.27H9.71l.61-2.91v-.2a1.07 1.07 0 0 0-.28-.68l-.68-.66-4.17 4.19a1.26 1.26 0 0 0-.37.9v6.36a1.27 1.27 0 0 0 1.27 1.27h5.06a1.24 1.24 0 0 0 1.17-.77l1.92-4.49a1.22 1.22 0 0 0 .09-.46V7.42Z" })),
   'trash': () => [
-    index.h("path", { fill: "currentColor", d: "M11.5,14.8h-7    c-0.6,0-1.1-0.5-1.1-1.1V4.4h9.3v9.2C12.6,14.2,12.1,14.8,11.5,14.8 M6.9,6.8c0-0.3-0.3-0.6-0.6-0.6S5.8,6.5,5.8,6.8v5.2    c0,0.3,0.3,0.6,0.6,0.6s0.6-0.3,0.6-0.6V6.8z M10.3,6.8c0-0.3-0.3-0.6-0.6-0.6S9.2,6.5,9.2,6.8v5.2c0,0.3,0.3,0.6,0.6,0.6    s0.6-0.3,0.6-0.6V6.8z" }),
+    index.h("path", { fill: "currentColor", d: "M3.27 14.17c0 .66.54 1.19 1.2 1.2h7l-.05-.02h.08c.64-.02 1.14-.56 1.12-1.2V4.32H3.27v9.85Zm5.97-7.12c0-.33.27-.6.6-.6s.6.27.6.6v5.3c0 .33-.27.6-.6.6s-.6-.27-.6-.6v-5.3Zm-3.5 0c0-.33.27-.59.6-.6.32.02.58.28.6.6v5.3c-.02.32-.28.58-.6.6a.645.645 0 0 1-.6-.6v-5.3Zm7.28-5.39h-2.6V.95a.28.28 0 0 0-.28-.28H5.87a.28.28 0 0 0-.28.28v.72H2.91a.28.28 0 0 0-.28.28V3.1c0 .15.12.28.28.28h10.11c.15 0 .28-.12.28-.28V1.94a.28.28 0 0 0-.28-.28Z" }),
     index.h("path", { fill: "currentColor", d: "M13,2h-2.9L9.9,1.6    C9.8,1.4,9.6,1.2,9.4,1.2H6.6c-0.2,0-0.4,0.1-0.5,0.3L5.8,2H2.9C2.7,2,2.5,2.2,2.5,2.4c0,0,0,0,0,0v0.8c0,0.2,0.2,0.4,0.4,0.4H13    c0.2,0,0.4-0.2,0.4-0.4V2.4C13.4,2.2,13.2,2,13,2z" }),
   ],
+  'universal-access': () => (index.h("path", { fill: "currentColor", d: "M8 15.33A7.33 7.33 0 1 1 15.33 8 7.34 7.34 0 0 1 8 15.33ZM8 1.71A6.29 6.29 0 1 0 14.29 8 6.29 6.29 0 0 0 8 1.71ZM13.74 8A5.74 5.74 0 1 1 8 2.25 5.75 5.75 0 0 1 13.74 8ZM8 3.77a1.07 1.07 0 1 0 1.07 1.07A1.07 1.07 0 0 0 8 3.77ZM4.67 5.63c-.6-.14-.87.86-.32 1s1.79.43 2.57.55a11.25 11.25 0 0 1-.72 4.47.54.54 0 0 0 .85.65 6.94 6.94 0 0 0 .78-2.42c0-.07.31-.11.33 0a8.73 8.73 0 0 0 .63 2.23c.3.65 1.31.26 1-.38a11.54 11.54 0 0 1-.76-4.58 21.34 21.34 0 0 0 2.41-.45.55.55 0 1 0-.2-1.08 11.47 11.47 0 0 1-6.57.01Z" })),
+  'unlink': () => (index.h("path", { fill: "currentColor", d: "M9.74 6.25c-.16-.17-.32-.3-.5-.43-.14-.09-.31-.1-.44 0l1.81 1.81c-.17-.5-.47-.98-.87-1.38Zm-1.1 3.51c-.07.15-.17.28-.29.4l-1.66 1.66s-.04.05-.07.07c-.72.67-1.85.63-2.52-.09-.67-.72-.63-1.85.09-2.52l.32-.32c.1-.11.14-.27.09-.41-.14-.42-.22-.86-.24-1.3a.42.42 0 0 0-.12-.26.395.395 0 0 0-.56 0l-.92.92a3.76 3.76 0 0 0 0 5.32 3.76 3.76 0 0 0 5.32 0l1.66-1.67c.12-.12.23-.25.32-.38L8.64 9.76Zm4.61-7h-.02a3.778 3.778 0 0 0-5.32 0L6.83 3.84l1.41 1.41 1.08-1.08c.68-.71 1.81-.74 2.52-.06.71.68.74 1.81.06 2.52-.02.03-.05.05-.07.07l-.32.32c-.11.11-.14.27-.09.41.13.4.21.81.23 1.23l.44.44c.09 0 .18-.05.24-.11l.92-.92a3.76 3.76 0 0 0 0-5.32Zm.97 10.52-1.03 1.03-5.14-5.14c-.04.17-.12.33-.25.45l-.52.52c-.14.13-.35.15-.51.04-.18-.13-.35-.27-.5-.42-.74-.74-1.11-1.7-1.11-2.67 0-.24.02-.49.08-.73l-3.6-3.6 1.03-1.03 11.55 11.55Z" })),
+  'unlock': () => (index.h("path", { fill: "currentColor", d: "M13.33 13.94V7a1.37 1.37 0 0 0-1.28-1.44h-.72v-1.4A3.422 3.422 0 0 0 8 .67 3.4 3.4 0 0 0 4.68 4h1.26C6 2.9 6.9 2.03 8 2c1.17.03 2.1 1 2.07 2.17v1.39H4c-.75.02-1.35.64-1.33 1.39V14c.02.73.6 1.31 1.33 1.33h8c.75-.02 1.35-.64 1.33-1.39ZM8 11.84c-.77.04-1.43-.56-1.47-1.33-.04-.77.56-1.43 1.33-1.47.77-.04 1.43.56 1.47 1.33v.07c.02.75-.57 1.38-1.32 1.4H8Z" })),
+  'upload': () => (index.h("path", { fill: "currentColor", d: "M9.58 10.74V6.59a.31.31 0 0 1 .31-.3H12a.3.3 0 0 0 .21-.52l-4-4a.29.29 0 0 0-.42 0l-4 4a.3.3 0 0 0 .21.52h2.11a.31.31 0 0 1 .31.3v4.15a.3.3 0 0 0 .3.3h2.56a.3.3 0 0 0 .3-.3ZM14.33 14v-1a.29.29 0 0 0-.29-.3H2a.29.29 0 0 0-.29.3v1a.29.29 0 0 0 .29.29h12a.29.29 0 0 0 .33-.29Z" })),
+  'user': () => (index.h("path", { fill: "currentColor", d: "M8 8.79a3.56 3.56 0 1 0-3.56-3.56A3.56 3.56 0 0 0 8 8.79Zm3.17.79H9.8a4.27 4.27 0 0 1-3.6 0H4.83a3.16 3.16 0 0 0-3.16 3.17v.4a1.18 1.18 0 0 0 1.18 1.18h10.3a1.18 1.18 0 0 0 1.18-1.18v-.4a3.16 3.16 0 0 0-3.16-3.17Z" })),
+  'user-circle': () => (index.h("path", { fill: "currentColor", d: "M8 .62C3.95.61.66 3.9.65 7.95c0 4.05 3.28 7.34 7.33 7.35 4.04 0 7.33-3.26 7.35-7.3.02-4.05-3.25-7.36-7.3-7.38H8Zm0 .75c3.64 0 6.59 2.96 6.58 6.6V8c0 1.35-.41 2.66-1.19 3.76a2.713 2.713 0 0 0-2.66-2.37H9.54c-.98.46-2.1.46-3.08 0H5.28c-1.36 0-2.5 1.02-2.67 2.37A6.483 6.483 0 0 1 1.42 8a6.59 6.59 0 0 1 6.55-6.63H8ZM5 5.63c0-1.68 1.37-3.05 3.05-3.05 1.68 0 3.05 1.37 3.05 3.05 0 1.68-1.37 3.05-3.05 3.05H8c-1.66-.03-3-1.39-3-3.05Z" })),
+  'user-group': () => (index.h("path", { fill: "currentColor", d: "M13.15 4.12c-.81-.01-1.47.65-1.48 1.46 0 .82.65 1.47 1.46 1.48s1.47-.65 1.48-1.46-.65-1.47-1.46-1.48Zm-10.04.01a1.47 1.47 0 0 0-1.58 1.59c.06.71.62 1.28 1.34 1.34.81.07 1.52-.53 1.59-1.34.06-.81-.54-1.52-1.35-1.59Zm7.36.39c-.22-.84-.87-1.51-1.71-1.75-1.36-.41-2.8.36-3.22 1.72-.18.61-.13 1.27.14 1.85.41.9 1.33 1.48 2.32 1.45 1.41.01 2.56-1.14 2.57-2.55 0-.24-.03-.49-.1-.72Zm-.71 4h-.19c-.99.49-2.14.49-3.13 0h-.19c-1.46 0-2.64 1.18-2.64 2.64v2.69c1.23.93 2.74 1.47 4.39 1.47s3.17-.55 4.4-1.48v-2.68c0-1.46-1.18-2.64-2.64-2.64Zm5.52.25a7.282 7.282 0 0 1-1.65 3.91c-.08.1-.16.19-.25.28-.08.09-.17.18-.25.27v-.55h.03v-.72s.01-.07 0-.1v-.66c.01-1.25-.66-2.4-1.76-3 .27-.26.63-.41 1-.41h1.51c.63.01 1.17.41 1.37.98ZM2.86 11.16v1.52h.01v.55l-.28-.31c-.08-.08-.15-.16-.22-.24A7.238 7.238 0 0 1 .74 8.86c.16-.62.72-1.07 1.4-1.07h1.47c.37-.01.73.12 1.01.37-1.1.6-1.77 1.75-1.76 3Z" })),
   'user-plus': () => (index.h("path", { fill: "currentColor", d: "M14,3.33H12.65V2a.36.36,0,0,0-.35-.33h-.65A.36.36,0,0,0,11.3,2V3.33H10a.34.34,0,0,0-.33.34v.66a.34.34,0,0,0,.33.34H11.3V6a.37.37,0,0,0,.35.33h.65A.37.37,0,0,0,12.65,6V4.67H14a.34.34,0,0,0,.32-.34V3.67A.34.34,0,0,0,14,3.33ZM9.28,9.77h-.2a5.19,5.19,0,0,1-3.91,0H5A3,3,0,0,0,1.7,12.46h0v.72A1.27,1.27,0,0,0,3,14.33h8.25a1.26,1.26,0,0,0,1.36-1.14v-.68A3,3,0,0,0,9.37,9.76H9.28ZM7.13,3.7A2.64,2.64,0,1,1,4.5,6.34h0A2.64,2.64,0,0,1,7.13,3.7Z" })),
   'users': () => (index.h("path", { fill: "currentColor", d: "M12,8.76h-.2a5.24,5.24,0,0,1-3.93,0H7.61a3.05,3.05,0,0,0-3.3,2.75v.69a1.28,1.28,0,0,0,1.38,1.14H14a1.27,1.27,0,0,0,1.37-1.14v-.69A3.07,3.07,0,0,0,12,8.75Zm-6.4-.32A2,2,0,0,0,4.31,8H2.48A1.69,1.69,0,0,0,.65,9.53v.76a.85.85,0,0,0,.91.76H3.45A3.58,3.58,0,0,1,5.61,8.44ZM9.81,2.66A2.65,2.65,0,1,1,7.16,5.31h0A2.65,2.65,0,0,1,9.81,2.66ZM3.31,4.18A1.51,1.51,0,1,1,1.8,5.69,1.51,1.51,0,0,1,3.31,4.18Z" })),
+  'wallet': () => (index.h("path", { fill: "currentColor", d: "M13.88 5H3a.43.43 0 0 1-.46-.38.43.43 0 0 1 .46-.43h11a.43.43 0 0 0 .46-.38A1.28 1.28 0 0 0 13 2.67H2.5A1.7 1.7 0 0 0 .67 4.19v7.62a1.7 1.7 0 0 0 1.83 1.52h11.38a1.32 1.32 0 0 0 1.45-1.14V6.1A1.33 1.33 0 0 0 13.88 5Zm-1.21 5.29a1.1 1.1 0 1 1 1.1-1.1 1.1 1.1 0 0 1-1.1 1.05Z" })),
 };
 /**
  * List of all possibles sizes
  */
-const sizes$1 = ['regular', 'large', 'extra-large'];
+const sizes$1 = ['small', 'regular', 'large', 'extra-large'];
 /**
  * List of all possibles variants
  */
 const variants$2 = ['success', 'warning', 'danger', 'info'];
-const mgIconCss = ":host{display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.mg-icon[size=regular],.mg-icon.mg-icon--size-regular{width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size)}.mg-icon[size=large],.mg-icon.mg-icon--size-large{width:var(--mg-icon-large-size);height:var(--mg-icon-large-size)}.mg-icon[size=extra-large],.mg-icon.mg-icon--size-extra-large{width:var(--mg-icon-extra-large-size);height:var(--mg-icon-extra-large-size)}.mg-icon[class*=mg-icon--variant-]{border-radius:var(--mg-message-border-radius);padding:0.3rem}.mg-icon.mg-icon--variant-success{background-color:hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) + 20%))}.mg-icon.mg-icon--variant-warning{background-color:hsl(var(--color-warning-h), var(--color-warning-s), calc(var(--color-warning-l) + 20%))}.mg-icon.mg-icon--variant-danger{background-color:hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) + 20%))}.mg-icon.mg-icon--variant-info{background-color:hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) + 20%))}.loader__full-circle{opacity:0.2}.mg-icon--spin{-webkit-animation-name:rotate;animation-name:rotate;-webkit-animation-duration:0.75s;animation-duration:0.75s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}";
+const mgIconCss = ":host{display:inline-flex;vertical-align:middle}.mg-icon[size=small],.mg-icon.mg-icon--size-small{width:var(--mg-icon-small-size);height:var(--mg-icon-small-size)}.mg-icon[size=regular],.mg-icon.mg-icon--size-regular{width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size)}.mg-icon[size=large],.mg-icon.mg-icon--size-large{width:var(--mg-icon-large-size);height:var(--mg-icon-large-size)}.mg-icon[size=extra-large],.mg-icon.mg-icon--size-extra-large{width:var(--mg-icon-extra-large-size);height:var(--mg-icon-extra-large-size)}.mg-icon[class*=mg-icon--variant-]{border-radius:var(--mg-message-border-radius);padding:0.3rem}.mg-icon.mg-icon--variant-success{background-color:hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) + 20%))}.mg-icon.mg-icon--variant-warning{background-color:hsl(var(--color-warning-h), var(--color-warning-s), calc(var(--color-warning-l) + 20%))}.mg-icon.mg-icon--variant-danger{background-color:hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) + 20%))}.mg-icon.mg-icon--variant-info{background-color:hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) + 20%))}.loader__full-circle{opacity:0.2}.mg-icon--spin{animation-name:rotate;animation-duration:0.75s;animation-iteration-count:infinite}@keyframes rotate{to{transform:rotate(360deg)}}";
 const MgIcon = class {
   constructor(hostRef) {
@@ -459,30 +543,46 @@ const MgIcon = class {
      */
     this.getIcon = () => icons[this.icon]();
   }
-  validateIcon(newValue) {
+  validateIcon(newValue, oldValue) {
     if (!Object.keys(icons).includes(newValue)) {
       throw new Error(`<mg-icon> prop "icon" must be one of : ${Object.keys(icons).join(', ')}`);
     }
-    this.classList.add(`mg-icon--${this.icon}`);
+    else {
+      if (oldValue !== undefined) {
+        this.classList.delete(`mg-icon--${oldValue}`);
+      }
+      this.classList.add(`mg-icon--${newValue}`);
+    }
   }
-  validateSize(newValue) {
+  validateSize(newValue, oldValue) {
     if (!sizes$1.includes(newValue)) {
       throw new Error(`<mg-icon> prop "size" must be one of : ${sizes$1.join(', ')}`);
     }
-    this.classList.add(`mg-icon--size-${this.size}`);
+    else {
+      if (oldValue !== undefined) {
+        this.classList.delete(`mg-icon--size-${oldValue}`);
+      }
+      this.classList.add(`mg-icon--size-${newValue}`);
+    }
   }
-  validateVariant(newValue) {
+  validateVariant(newValue, oldValue) {
     if (newValue !== undefined && !variants$2.includes(newValue)) {
       throw new Error(`<mg-icon> prop "variant" must be one of : ${variants$2.join(', ')}`);
     }
     else if (newValue !== undefined) {
-      this.classList.add(`mg-icon--variant-${this.variant}`);
+      if (oldValue !== undefined) {
+        this.classList.delete(`mg-icon--variant-${oldValue}`);
+      }
+      this.classList.add(`mg-icon--variant-${newValue}`);
     }
   }
   handleSpin(newValue) {
     if (newValue) {
       this.classList.add('mg-icon--spin');
     }
+    else {
+      this.classList.delete('mg-icon--spin');
+    }
   }
   /**
    * Check if props are well configured on init
@@ -512,14 +612,6 @@ const MgIcon = class {
 };
 MgIcon.style = mgIconCss;
-/**
- * Possible input classes
- */
-var InputClass;
-(function (InputClass) {
-  InputClass["ERROR"] = "is-not-valid";
-})(InputClass || (InputClass = {}));
 /**
  * Apply in all input child node the aria-describedby attribute
  *
@@ -548,11 +640,8 @@ const manageClasses = (props) => {
     props.classList.add('mg-input--label-on-top');
   if (props.readonly)
     props.classList.add('mg-input--readonly');
-  if (props.width !== undefined)
-    props.classList.add(`mg-input--width-${props.width}`);
-  if (props.readonly || props.disabled) {
-    props.classList.delete(InputClass.ERROR);
-  }
+  if (props.mgWidth !== undefined)
+    props.classList.add(`mg-input--width-${props.mgWidth}`);
 };
 /**
  * Get tagname
@@ -586,12 +675,7 @@ const MgInput = (props, children, utils) => {
   /**
    * a11y IDs
    */
-  const ariaDescribedbyIDs = new Set();
-  // Character Left
-  const characterLeftId = `${props.identifier}-character-left`;
-  if (props.classList.has('is-focused') && props.displayCharacterLeft) {
-    ariaDescribedbyIDs.add(characterLeftId);
-  }
+  const ariaDescribedbyIDs = new Set(props.ariaDescribedbyIDs);
   // Help text
   const helpTextId = `${props.identifier}-help-text`;
   if (typeof props.helpText === 'string' && props.helpText !== '') {
@@ -647,15 +731,14 @@ const MgInput = (props, children, utils) => {
     props.readonly ? (index.h("div", { class: "mg-input__input-container" },
       index.h("strong", null, props.readonlyValue || props.value),
       children)) : (index.h("div", { class: "mg-input__input-container" },
-      index.h("div", { class: "mg-input__input" },
+      index.h("div", { class: { 'mg-input__input': true, 'mg-input__input--has-error': props.errorMessage !== undefined } },
         children,
         !props.labelOnTop && props.tooltip && getTooltip()),
-      props.displayCharacterLeft && props.maxlength && props.classList.has('is-focused') && (index.h("mg-character-left", { identifier: characterLeftId, characters: props.value, maxlength: props.maxlength, template: props.characterLeftTemplate })),
       props.helpText && index.h("div", { id: helpTextId, class: "mg-input__help-text", innerHTML: props.helpText }),
-      props.errorMessage && index.h("div", { id: helpTextErrorId, class: "mg-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" })))));
+      props.errorMessage && !props.readonly && !props.disabled && (index.h("div", { id: helpTextErrorId, class: "mg-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" }))))));
 };
-const mgInputCheckboxCss = ":host{display:block}.mg-input{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input.is-not-valid{color:hsl(var(--color-danger))}.mg-input.is-not-valid .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input mg-input-title{-ms-flex-negative:var(--mg-inputs-shrink, 1);flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{-ms-flex-direction:column;flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{-ms-flex-negative:1;flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:-ms-inline-flexbox;display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:-ms-inline-flexbox;display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:-ms-flexbox;display:flex}.mg-input__input{display:-ms-flexbox;display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input+*{text-align:start;margin-top:0.5rem}fieldset.mg-input{border:0;margin-left:0;margin-right:0;padding:0}fieldset.mg-input input[type=radio],fieldset.mg-input input[type=checkbox]{-ms-flex-negative:0;flex-shrink:0;width:var(--mg-input-check-size);height:var(--mg-input-check-size);margin-top:calc((var(--font-size) * var(--line-height) - var(--mg-input-check-size)) / 2);margin-right:0.6rem;margin-bottom:0;margin-left:0}fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container{margin-top:0.7rem}fieldset.mg-input.is-not-valid .mg-input__input-group{color:initial}.mg-input__input-container mg-tooltip{margin-left:2rem}.mg-input__input-group-container{margin:0;padding:0;list-style:none;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:2.3rem;-moz-column-gap:2.3rem;column-gap:2.3rem;row-gap:1rem;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2)}.mg-input__input-group-container--vertical{-ms-flex-direction:column;flex-direction:column}.mg-input__input-group{display:-ms-flexbox;display:flex;-ms-flex-align:top;align-items:top}.mg-input__input-group.mg-input__input-group--disabled label{opacity:0.3}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}";
+const mgInputCheckboxCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:flex}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}fieldset.mg-input{border:0;margin-left:0;margin-right:0;padding:0}fieldset.mg-input input[type=radio],fieldset.mg-input input[type=checkbox]{flex-shrink:0;width:var(--mg-input-check-size);height:var(--mg-input-check-size);margin-top:calc((var(--font-size) * var(--line-height) - var(--mg-input-check-size)) / 2);margin-right:0.6rem;margin-bottom:0;margin-left:0}fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container{margin-top:0.7rem}.mg-input__input-container mg-tooltip{margin-left:3rem}.mg-input__input-group-container{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;column-gap:2.3rem;row-gap:1rem;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2)}.mg-input__input-group-container--vertical{flex-direction:column}.mg-input__input-group{display:flex;align-items:top}.mg-input__input-group.mg-input__input-group--disabled label{opacity:0.3}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}";
 /**
  * type CheckboxItem validation function
@@ -672,8 +755,6 @@ const MgInputCheckbox = class {
     /************
      * Internal *
      ************/
-    // classes
-    this.classError = InputClass.ERROR;
     // HTML selector
     this.inputs = [];
     /**
@@ -758,14 +839,7 @@ const MgInputCheckbox = class {
       // Set error message
       this.errorMessage = undefined;
       if (!this.valid && invalidElement.validity.valueMissing) {
-        this.errorMessage = index$1.messages.errors.required;
-      }
-      // Update class
-      if (this.valid) {
-        this.classList.delete(this.classError);
-      }
-      else {
-        this.classList.add(this.classError);
+        this.errorMessage = this.messages.errors.required;
       }
     };
     /**
@@ -789,9 +863,6 @@ const MgInputCheckbox = class {
       throw new Error('<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem.');
     }
   }
-  handleReadOnly() {
-    this.classList.delete(this.classError);
-  }
   /**
    * Public method to display errors
    *
@@ -810,7 +881,9 @@ const MgInputCheckbox = class {
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
-    // Check values format
+    // Get locales
+    this.messages = index$1.initLocales(this.element).messages;
+    // Validate
     this.validateValue(this.value);
     // Check validity when component is ready
     // return a promise to process action only in the FIRST render().
@@ -825,15 +898,15 @@ const MgInputCheckbox = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: undefined, width: undefined, disabled: this.disabled, value: this.value && this.value.toString(), readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, displayCharacterLeft: undefined, characterLeftTemplate: undefined, maxlength: undefined, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, index.h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList } }, this.checkboxItems
+    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value && this.value.toString(), readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, index.h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList } }, this.checkboxItems
       .filter(item => {
       return !this.readonly || item.value;
     })
       .map(input => (index.h("li", { class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, index.h("input", { type: "checkbox", id: input.id, name: this.identifier, value: input.value && input.value.toString(), checked: Boolean(input.value), disabled: this.readonly || this.disabled || input.disabled, required: this.required, indeterminate: input.value === null, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => this.inputs.push(el) }), index.h("label", { htmlFor: input.id }, input.title)))))));
   }
+  get element() { return index.getElement(this); }
   static get watchers() { return {
-    "value": ["validateValue"],
-    "readonly": ["handleReadOnly"]
+    "value": ["validateValue"]
   }; }
 };
 MgInputCheckbox.style = mgInputCheckboxCss;
@@ -850,19 +923,22 @@ var InputError$1;
  * Format number to the locale currency
  *
  * @param {number} number number to format
+ * @param {string} locale locale to apply
+ * @param {string} currency currency to apply
  * @returns {string} formatted currency
  */
-function localeCurrency(number) {
-  return new Intl.NumberFormat(index$1.locale, { style: 'currency', currency: index$1.currency }).format(number);
+function localeCurrency(number, locale, currency) {
+  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);
 }
 /**
  * Format number to locale
  *
  * @param {number} number number to format
+ * @param {string} locale locale to apply
  * @returns {string} formatted number
  */
-function localeNumber(number) {
-  return new Intl.NumberFormat(index$1.locale).format(number);
+function localeNumber(number, locale) {
+  return new Intl.NumberFormat(locale).format(number);
 }
 /**
  * Date RegExp
@@ -872,27 +948,25 @@ const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
  * Locale date format
  *
  * @param {string} date date to format
+ * @param {string} locale locale to apply
  * @returns {string} formatted date
  */
-function localeDate(date) {
+function localeDate(date, locale) {
   if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
     return '';
   }
-  return new Intl.DateTimeFormat(index$1.locale).format(new Date(date));
+  return new Intl.DateTimeFormat(locale).format(new Date(date));
 }
-const mgInputDateCss = ":host{display:block}.mg-input{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input.is-not-valid{color:hsl(var(--color-danger))}.mg-input.is-not-valid .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input mg-input-title{-ms-flex-negative:var(--mg-inputs-shrink, 1);flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{-ms-flex-direction:column;flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{-ms-flex-negative:1;flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:-ms-inline-flexbox;display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:-ms-inline-flexbox;display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:-ms-flexbox;display:flex}.mg-input__input{display:-ms-flexbox;display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input+*{text-align:start;margin-top:0.5rem}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);width:100%;height:var(--default-size);-webkit-box-sizing:border-box;box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size)}.mg-input__box::-webkit-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::-moz-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:-ms-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::-ms-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{-webkit-box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5);box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0;--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius);--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}";
+const mgInputDateCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:flex}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}";
 const MgInputDate = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.valueChange = index.createEvent(this, "value-change", 7);
     this.inputValid = index.createEvent(this, "input-valid", 7);
-    /************
-     * Internal *
-     ************/
-    // classes
-    this.classError = InputClass.ERROR;
+    // hasError (triggered by blur event)
+    this.hasError = false;
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
@@ -928,14 +1002,16 @@ const MgInputDate = class {
      */
     this.handleInput = () => {
       this.checkValidity();
+      if (this.hasError) {
+        this.checkError();
+      }
       this.value = this.input.value;
     };
     /**
      * Handle blur event
      */
     this.handleBlur = () => {
-      this.checkValidity();
-      this.checkError();
+      this.displayError();
     };
     /**
      * Check if input is valid
@@ -986,16 +1062,16 @@ const MgInputDate = class {
       const inputError = this.getInputError();
       // required
       if (inputError === InputError$1.REQUIRED) {
-        this.errorMessage = index$1.messages.errors[inputError];
+        this.errorMessage = this.messages.errors[inputError];
       }
       // min, max & minMax
       else if ([InputError$1.MIN, InputError$1.MAX, InputError$1.MINMAX].includes(inputError)) {
-        this.errorMessage = index$1.messages.errors.date[inputError].replace('{min}', localeDate(this.min)).replace('{max}', localeDate(this.max));
+        this.errorMessage = this.messages.errors.date[inputError].replace('{min}', localeDate(this.min, this.locale)).replace('{max}', localeDate(this.max, this.locale));
       }
       // wrong date format
       // element.validity.badInput is default error message
       else {
-        this.errorMessage = index$1.messages.errors.date.badInput.replace('{min}', ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 ? localeDate(this.min) : localeDate('1900-01-01'));
+        this.errorMessage = this.messages.errors.date.badInput.replace('{min}', ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 ? localeDate(this.min, this.locale) : localeDate('1900-01-01', this.locale));
       }
     };
     /**
@@ -1008,10 +1084,6 @@ const MgInputDate = class {
       this.errorMessage = undefined;
       if (!this.valid) {
         this.setErrorMessage();
-        this.classList.add(this.classError);
-      }
-      else {
-        this.classList.delete(this.classError);
       }
     };
   }
@@ -1037,6 +1109,7 @@ const MgInputDate = class {
   async displayError() {
     this.checkValidity();
     this.checkError();
+    this.hasError = this.invalid;
   }
   /**
    * Date format validation
@@ -1058,6 +1131,11 @@ const MgInputDate = class {
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
+    // Get locales
+    const locales = index$1.initLocales(this.element);
+    this.locale = locales.locale;
+    this.messages = locales.messages;
+    // Validate
     this.validateValue(this.value);
     this.validateMin(this.min);
     this.validateMax(this.max);
@@ -1074,8 +1152,9 @@ const MgInputDate = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, width: undefined, disabled: this.disabled, value: this.value, readonlyValue: localeDate(this.value), tooltip: this.tooltip, displayCharacterLeft: undefined, characterLeftTemplate: undefined, maxlength: undefined, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.h("input", { type: "date", class: "mg-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, pattern: "[0-9]{4}-[0-9]{2}-[0-9]{2}", ref: el => (this.input = el) })));
+    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: localeDate(this.value, this.locale), tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.h("input", { type: "date", class: "mg-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, pattern: "[0-9]{4}-[0-9]{2}-[0-9]{2}", ref: el => (this.input = el) })));
   }
+  get element() { return index.getElement(this); }
   static get watchers() { return {
     "value": ["validateValue"],
     "min": ["validateMin"],
@@ -1096,15 +1175,15 @@ var InputError;
   InputError["REQUIRED"] = "required";
 })(InputError || (InputError = {}));
-const mgInputNumericCss = ":host{display:block}.mg-input{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input.is-not-valid{color:hsl(var(--color-danger))}.mg-input.is-not-valid .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input mg-input-title{-ms-flex-negative:var(--mg-inputs-shrink, 1);flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{-ms-flex-direction:column;flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{-ms-flex-negative:1;flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:-ms-inline-flexbox;display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:-ms-inline-flexbox;display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:-ms-flexbox;display:flex}.mg-input__input{display:-ms-flexbox;display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input+*{text-align:start;margin-top:0.5rem}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);width:100%;height:var(--default-size);-webkit-box-sizing:border-box;box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size)}.mg-input__box::-webkit-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::-moz-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:-ms-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::-ms-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{-webkit-box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5);box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0;--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius);--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){-ms-flex-pack:justify;justify-content:space-between}.mg-input.mg-input--width-full .mg-input__input-container{-ms-flex:auto;flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{width:100%}.mg-input.mg-input--width-16 .mg-input__box{width:21rem}.mg-input.mg-input--width-4 .mg-input__box{width:7rem}.mg-input.mg-input--width-2 .mg-input__box{width:5rem}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}.mg-input .mg-input__box{text-align:right}";
+const mgInputNumericCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:flex}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{width:100%}.mg-input.mg-input--width-16 .mg-input__box{width:21rem}.mg-input.mg-input--width-4 .mg-input__box{width:7rem}.mg-input.mg-input--width-2 .mg-input__box{width:5rem}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}.mg-input .mg-input__box{text-align:var(--mg-inputs-text-align, right)}";
 const MgInputNumeric = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.valueChange = index.createEvent(this, "value-change", 7);
     this.inputValid = index.createEvent(this, "input-valid", 7);
-    // Classes
-    this.classError = InputClass.ERROR;
+    // hasError (triggered by blur event)
+    this.hasError = false;
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
@@ -1135,6 +1214,10 @@ const MgInputNumeric = class {
      * Define numeric type
      */
     this.type = types[0];
+    /**
+     * Define currency
+     */
+    this.currency = 'USD';
     /**
      * Override integer length
      * integer is the number before the decimal point
@@ -1161,6 +1244,9 @@ const MgInputNumeric = class {
     this.handleInput = () => {
       // Check validity
       this.checkValidity();
+      if (this.hasError) {
+        this.checkError();
+      }
       this.value = this.input.value;
     };
     /**
@@ -1177,9 +1263,8 @@ const MgInputNumeric = class {
      * @returns {void}
      */
     this.handleBlur = () => {
-      // Check validity
-      this.checkValidity();
-      this.checkError();
+      // Display Error
+      this.displayError();
       this.hasFocus = false;
     };
     /**
@@ -1205,10 +1290,10 @@ const MgInputNumeric = class {
     this.setErrorMessage = () => {
       const inputError = this.getInputError();
       if (inputError === InputError.REQUIRED) {
-        this.errorMessage = index$1.messages.errors[inputError];
+        this.errorMessage = this.messages.errors[inputError];
       }
       else {
-        this.errorMessage = index$1.messages.errors.numeric[inputError].replace('{min}', `${this.formatValue(this.min)}`).replace('{max}', `${this.formatValue(this.max)}`);
+        this.errorMessage = this.messages.errors.numeric[inputError].replace('{min}', `${this.formatValue(this.min)}`).replace('{max}', `${this.formatValue(this.max)}`);
       }
     };
     /**
@@ -1222,10 +1307,6 @@ const MgInputNumeric = class {
       // Update class
       if (!this.valid) {
         this.setErrorMessage();
-        this.classList.add(this.classError);
-      }
-      else {
-        this.classList.delete(this.classError);
       }
     };
     /**
@@ -1262,7 +1343,7 @@ const MgInputNumeric = class {
      * @param {number} value value to format
      * @returns {string} formated local value
      */
-    this.formatValue = (value) => (this.type === 'currency' ? localeCurrency(value) : localeNumber(value));
+    this.formatValue = (value) => (this.type === 'currency' ? localeCurrency(value, this.locale, this.currency) : localeNumber(value, this.locale));
     /**
      * Validate append slot
      *
@@ -1298,7 +1379,7 @@ const MgInputNumeric = class {
       // emit numeric value
       this.numericValue = this.value !== '' && this.value !== null ? parseFloat(this.value.replace(',', '.')) : null;
       this.valueChange.emit(this.numericValue);
-      // Set readOnlyValue
+      // Set readonlyValue
       this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
     }
   }
@@ -1306,7 +1387,6 @@ const MgInputNumeric = class {
     if (!types.includes(newValue)) {
       throw new Error(`<mg-input-numeric> prop "type" must be one of : ${types.join(', ')}`);
     }
-    this.classList.add(`mg-input--numeric--${this.type}`);
   }
   validateIntegerLength(newValue) {
     if (newValue < 1) {
@@ -1326,6 +1406,7 @@ const MgInputNumeric = class {
   async displayError() {
     this.checkValidity();
     this.checkError();
+    this.hasError = this.invalid;
   }
   /**
    * Displayed value in input
@@ -1345,6 +1426,11 @@ const MgInputNumeric = class {
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
+    // Get locales
+    const locales = index$1.initLocales(this.element);
+    this.locale = locales.locale;
+    this.messages = locales.messages;
+    // Validate
     this.validateValue(this.value);
     this.validateType(this.type);
     this.validateIntegerLength(this.integerLength);
@@ -1363,7 +1449,7 @@ const MgInputNumeric = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, width: this.width, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, displayCharacterLeft: undefined, characterLeftTemplate: undefined, maxlength: undefined, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.h("input", { type: "text", class: "mg-input__box", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }), index.h("slot", { name: "append-input" })));
+    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.h("input", { type: "text", class: "mg-input__box", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }), index.h("slot", { name: "append-input" })));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -1375,18 +1461,15 @@ const MgInputNumeric = class {
 };
 MgInputNumeric.style = mgInputNumericCss;
-const mgInputPasswordCss = ":host{display:block}.mg-input{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input.is-not-valid{color:hsl(var(--color-danger))}.mg-input.is-not-valid .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input mg-input-title{-ms-flex-negative:var(--mg-inputs-shrink, 1);flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{-ms-flex-direction:column;flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{-ms-flex-negative:1;flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:-ms-inline-flexbox;display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:-ms-inline-flexbox;display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:-ms-flexbox;display:flex}.mg-input__input{display:-ms-flexbox;display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input+*{text-align:start;margin-top:0.5rem}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);width:100%;height:var(--default-size);-webkit-box-sizing:border-box;box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size)}.mg-input__box::-webkit-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::-moz-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:-ms-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::-ms-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{-webkit-box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5);box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0;--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius);--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){-ms-flex-pack:justify;justify-content:space-between}.mg-input.mg-input--width-full .mg-input__input-container{-ms-flex:auto;flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{width:100%}.mg-input.mg-input--width-16 .mg-input__box{width:21rem}.mg-input.mg-input--width-4 .mg-input__box{width:7rem}.mg-input.mg-input--width-2 .mg-input__box{width:5rem}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}";
+const mgInputPasswordCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:flex}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{width:100%}.mg-input.mg-input--width-16 .mg-input__box{width:21rem}.mg-input.mg-input--width-4 .mg-input__box{width:7rem}.mg-input.mg-input--width-2 .mg-input__box{width:5rem}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}";
 const MgInputPassword = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.valueChange = index.createEvent(this, "value-change", 7);
     this.inputValid = index.createEvent(this, "input-valid", 7);
-    /************
-     * Internal *
-     ************/
-    // classes
-    this.classError = InputClass.ERROR;
+    // hasError (triggered by blur event)
+    this.hasError = false;
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
@@ -1416,7 +1499,7 @@ const MgInputPassword = class {
     /**
      * Define input width
      */
-    this.width = 'full';
+    this.mgWidth = 'full';
     /**
      * Component classes
      */
@@ -1426,14 +1509,16 @@ const MgInputPassword = class {
      */
     this.handleInput = () => {
       this.checkValidity();
+      if (this.hasError) {
+        this.checkError();
+      }
       this.value = this.input.value;
     };
     /**
      * Handle blur event
      */
     this.handleBlur = () => {
-      this.checkValidity();
-      this.checkError();
+      this.displayError();
     };
     /**
      * Check if input is valid
@@ -1456,14 +1541,7 @@ const MgInputPassword = class {
       this.errorMessage = undefined;
       // required
       if (!this.valid && this.input.validity.valueMissing) {
-        this.errorMessage = index$1.messages.errors.required;
-      }
-      // Update class
-      if (this.valid) {
-        this.classList.delete(this.classError);
-      }
-      else {
-        this.classList.add(this.classError);
+        this.errorMessage = this.messages.errors.required;
       }
     };
   }
@@ -1478,6 +1556,7 @@ const MgInputPassword = class {
   async displayError() {
     this.checkValidity();
     this.checkError();
+    this.hasError = this.invalid;
   }
   /*************
    * Lifecycle *
@@ -1488,6 +1567,8 @@ const MgInputPassword = class {
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
+    // Get locales
+    this.messages = index$1.initLocales(this.element).messages;
     // Check validity when component is ready
     // return a promise to process action only in the FIRST render().
     // https://stenciljs.com/docs/component-lifecycle#componentwillload
@@ -1501,15 +1582,16 @@ const MgInputPassword = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, width: this.width, disabled: this.disabled, value: this.value, readonlyValue: this.value !== undefined ? '•'.repeat(this.value.length) : undefined, tooltip: this.tooltip, displayCharacterLeft: false, characterLeftTemplate: undefined, maxlength: undefined, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.h("input", { type: "password", class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => (this.input = el) })));
+    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.value !== undefined ? '•'.repeat(this.value.length) : undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.h("input", { type: "password", class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => (this.input = el) })));
   }
+  get element() { return index.getElement(this); }
   static get watchers() { return {
     "value": ["handleValue"]
   }; }
 };
 MgInputPassword.style = mgInputPasswordCss;
-const mgInputRadioCss = ":host{display:block}.mg-input{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input.is-not-valid{color:hsl(var(--color-danger))}.mg-input.is-not-valid .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input mg-input-title{-ms-flex-negative:var(--mg-inputs-shrink, 1);flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{-ms-flex-direction:column;flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{-ms-flex-negative:1;flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:-ms-inline-flexbox;display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:-ms-inline-flexbox;display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:-ms-flexbox;display:flex}.mg-input__input{display:-ms-flexbox;display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input+*{text-align:start;margin-top:0.5rem}fieldset.mg-input{border:0;margin-left:0;margin-right:0;padding:0}fieldset.mg-input input[type=radio],fieldset.mg-input input[type=checkbox]{-ms-flex-negative:0;flex-shrink:0;width:var(--mg-input-check-size);height:var(--mg-input-check-size);margin-top:calc((var(--font-size) * var(--line-height) - var(--mg-input-check-size)) / 2);margin-right:0.6rem;margin-bottom:0;margin-left:0}fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container{margin-top:0.7rem}fieldset.mg-input.is-not-valid .mg-input__input-group{color:initial}.mg-input__input-container mg-tooltip{margin-left:2rem}.mg-input__input-group-container{margin:0;padding:0;list-style:none;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:2.3rem;-moz-column-gap:2.3rem;column-gap:2.3rem;row-gap:1rem;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2)}.mg-input__input-group-container--vertical{-ms-flex-direction:column;flex-direction:column}.mg-input__input-group{display:-ms-flexbox;display:flex;-ms-flex-align:top;align-items:top}.mg-input__input-group.mg-input__input-group--disabled label{opacity:0.3}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}";
+const mgInputRadioCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:flex}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}fieldset.mg-input{border:0;margin-left:0;margin-right:0;padding:0}fieldset.mg-input input[type=radio],fieldset.mg-input input[type=checkbox]{flex-shrink:0;width:var(--mg-input-check-size);height:var(--mg-input-check-size);margin-top:calc((var(--font-size) * var(--line-height) - var(--mg-input-check-size)) / 2);margin-right:0.6rem;margin-bottom:0;margin-left:0}fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container{margin-top:0.7rem}.mg-input__input-container mg-tooltip{margin-left:3rem}.mg-input__input-group-container{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;column-gap:2.3rem;row-gap:1rem;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2)}.mg-input__input-group-container--vertical{flex-direction:column}.mg-input__input-group{display:flex;align-items:top}.mg-input__input-group.mg-input__input-group--disabled label{opacity:0.3}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}";
 /**
  * type Option validation function
@@ -1526,8 +1608,6 @@ const MgInputRadio = class {
     /************
      * Internal *
      ************/
-    // classes
-    this.classError = InputClass.ERROR;
     // HTML selector
     this.inputs = [];
     /**
@@ -1612,14 +1692,7 @@ const MgInputRadio = class {
       // Set error message
       this.errorMessage = undefined;
       if (!this.valid && invalidElement.validity.valueMissing) {
-        this.errorMessage = index$1.messages.errors.required;
-      }
-      // Update class
-      if (this.valid) {
-        this.classList.delete(this.classError);
-      }
-      else {
-        this.classList.add(this.classError);
+        this.errorMessage = this.messages.errors.required;
       }
     };
     /**
@@ -1667,7 +1740,9 @@ const MgInputRadio = class {
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
-    // Check items format
+    // Get locales
+    this.messages = index$1.initLocales(this.element).messages;
+    // Validate
     this.validateItems(this.items);
     // Check validity when component is ready
     // return a promise to process action only in the FIRST render().
@@ -1682,8 +1757,9 @@ const MgInputRadio = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, disabled: this.disabled, readonly: this.readonly, width: undefined, value: this.value, readonlyValue: this.value, tooltip: this.tooltip, displayCharacterLeft: undefined, characterLeftTemplate: undefined, maxlength: undefined, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, index.h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList } }, this.options.map((input, index$1) => (index.h("li", { class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: el => this.inputs.push(el) }), index.h("label", { htmlFor: this.identifier + '_' + index$1 }, input.title)))))));
+    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, disabled: this.disabled, readonly: this.readonly, mgWidth: undefined, value: this.value, readonlyValue: this.value, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, index.h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList } }, this.options.map((input, index$1) => (index.h("li", { class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: el => this.inputs.push(el) }), index.h("label", { htmlFor: this.identifier + '_' + index$1 }, input.title)))))));
   }
+  get element() { return index.getElement(this); }
   static get watchers() { return {
     "value": ["handleValue"],
     "items": ["validateItems"]
@@ -1691,7 +1767,7 @@ const MgInputRadio = class {
 };
 MgInputRadio.style = mgInputRadioCss;
-const mgInputSelectCss = ":host{display:block}.mg-input{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input.is-not-valid{color:hsl(var(--color-danger))}.mg-input.is-not-valid .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input mg-input-title{-ms-flex-negative:var(--mg-inputs-shrink, 1);flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{-ms-flex-direction:column;flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{-ms-flex-negative:1;flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:-ms-inline-flexbox;display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:-ms-inline-flexbox;display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:-ms-flexbox;display:flex}.mg-input__input{display:-ms-flexbox;display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input+*{text-align:start;margin-top:0.5rem}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);width:100%;height:var(--default-size);-webkit-box-sizing:border-box;box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size)}.mg-input__box::-webkit-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::-moz-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:-ms-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::-ms-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{-webkit-box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5);box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0;--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius);--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){-ms-flex-pack:justify;justify-content:space-between}.mg-input.mg-input--width-full .mg-input__input-container{-ms-flex:auto;flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{width:100%}.mg-input.mg-input--width-16 .mg-input__box{width:21rem}.mg-input.mg-input--width-4 .mg-input__box{width:7rem}.mg-input.mg-input--width-2 .mg-input__box{width:5rem}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}.mg-input__box{padding-top:0;padding-bottom:0;padding-right:1rem}";
+const mgInputSelectCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:flex}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{width:100%}.mg-input.mg-input--width-16 .mg-input__box{width:21rem}.mg-input.mg-input--width-4 .mg-input__box{width:7rem}.mg-input.mg-input--width-2 .mg-input__box{width:5rem}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}.mg-input__box{width:100%;padding-top:0;padding-bottom:0;padding-right:1rem}";
 /**
  * Check if item is a well configured option
@@ -1699,7 +1775,7 @@ const mgInputSelectCss = ":host{display:block}.mg-input{display:-ms-flexbox;disp
  * @param {SelectOption} option select option
  * @returns {boolean} select option type is valid
  */
-const isOption$1 = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
+const isOption$1 = (option) => typeof option === 'object' && typeof option.title === 'string';
 /**
  * Group options
  *
@@ -1734,11 +1810,8 @@ const MgInputSelect = class {
     index.registerInstance(this, hostRef);
     this.valueChange = index.createEvent(this, "value-change", 7);
     this.inputValid = index.createEvent(this, "input-valid", 7);
-    /************
-     * Internal *
-     ************/
-    // classes
-    this.classError = InputClass.ERROR;
+    // hasError (triggered by blur event)
+    this.hasError = false;
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
@@ -1753,11 +1826,6 @@ const MgInputSelect = class {
      * Define if label is visible
      */
     this.labelHide = false;
-    /**
-     * Input placeholder.
-     * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.
-     */
-    this.placeholder = index$1.messages.input.select.placeholder;
     /**
      * Option to remove placeholder
      */
@@ -1787,6 +1855,9 @@ const MgInputSelect = class {
      */
     this.handleInput = () => {
       this.checkValidity();
+      if (this.hasError) {
+        this.checkError();
+      }
       if (this.input.value !== '') {
         this.value = index$1.allItemsAreString(this.items) ? this.input.value : this.items.find(item => item.title === this.input.value).value;
       }
@@ -1798,8 +1869,7 @@ const MgInputSelect = class {
      * Handle blur event
      */
     this.handleBlur = () => {
-      this.checkValidity();
-      this.checkError();
+      this.displayError();
     };
     /**
      * Check if input is valid
@@ -1821,14 +1891,7 @@ const MgInputSelect = class {
       // Set error message
       this.errorMessage = undefined;
       if (!this.valid && this.input.validity.valueMissing) {
-        this.errorMessage = index$1.messages.errors.required;
-      }
-      // Update class
-      if (this.valid) {
-        this.classList.delete(this.classError);
-      }
-      else {
-        this.classList.add(this.classError);
+        this.errorMessage = this.messages.errors.required;
       }
     };
   }
@@ -1871,6 +1934,7 @@ const MgInputSelect = class {
   async displayError() {
     this.checkValidity();
     this.checkError();
+    this.hasError = this.invalid;
   }
   /*************
    * Lifecycle *
@@ -1881,8 +1945,14 @@ const MgInputSelect = class {
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
-    // Check items format
+    // Get locales
+    this.messages = index$1.initLocales(this.element).messages;
+    // Validate
     this.validateItems(this.items);
+    // Set default placeholder
+    if (this.placeholder === undefined || this.placeholder === '') {
+      this.placeholder = this.messages.input.select.placeholder;
+    }
     // Check validity when component is ready
     // return a promise to process action only in the FIRST render().
     // https://stenciljs.com/docs/component-lifecycle#componentwillload
@@ -1896,9 +1966,10 @@ const MgInputSelect = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, width: this.width, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, displayCharacterLeft: undefined, characterLeftTemplate: undefined, maxlength: undefined, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => (this.input = el) }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
+    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => (this.input = el) }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
     index.h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => option.group !== undefined ? (index.h("optgroup", { label: option.group }, option.options.map(optgroup => (index.h("option", { value: optgroup.title, selected: JSON.stringify(this.value) === JSON.stringify(optgroup.value), disabled: optgroup.disabled }, optgroup.title))))) : (index.h("option", { value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title))))));
   }
+  get element() { return index.getElement(this); }
   static get watchers() { return {
     "value": ["handleValue"],
     "items": ["validateItems"]
@@ -1906,7 +1977,7 @@ const MgInputSelect = class {
 };
 MgInputSelect.style = mgInputSelectCss;
-const mgInputTextCss = ":host{display:block}.mg-input{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input.is-not-valid{color:hsl(var(--color-danger))}.mg-input.is-not-valid .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input mg-input-title{-ms-flex-negative:var(--mg-inputs-shrink, 1);flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{-ms-flex-direction:column;flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{-ms-flex-negative:1;flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:-ms-inline-flexbox;display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:-ms-inline-flexbox;display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:-ms-flexbox;display:flex}.mg-input__input{display:-ms-flexbox;display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input+*{text-align:start;margin-top:0.5rem}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);width:100%;height:var(--default-size);-webkit-box-sizing:border-box;box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size)}.mg-input__box::-webkit-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::-moz-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:-ms-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::-ms-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{-webkit-box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5);box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0;--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius);--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){-ms-flex-pack:justify;justify-content:space-between}.mg-input.mg-input--width-full .mg-input__input-container{-ms-flex:auto;flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{width:100%}.mg-input.mg-input--width-16 .mg-input__box{width:21rem}.mg-input.mg-input--width-4 .mg-input__box{width:7rem}.mg-input.mg-input--width-2 .mg-input__box{width:5rem}.mg-input mg-character-left{display:none}.mg-input.is-focused mg-character-left{display:block}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}.mg-input.mg-input--has-icon .mg-input__input{position:relative}.mg-input.mg-input--has-icon .mg-input__input>mg-icon{position:absolute;top:calc(var(--default-size) - var(--mg-icon-regular-size));left:var(--mg-inputs-spacer);color:var(--mg-inputs-color);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.mg-input.mg-input--has-icon .mg-input__input .mg-input__box{padding-left:calc(var(--mg-icon-regular-size) + var(--mg-inputs-spacer) * 2)}";
+const mgInputTextCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:flex}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{width:100%}.mg-input.mg-input--width-16 .mg-input__box{width:21rem}.mg-input.mg-input--width-4 .mg-input__box{width:7rem}.mg-input.mg-input--width-2 .mg-input__box{width:5rem}.mg-input mg-character-left{opacity:0.6;font-size:1.1rem}.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__help-text,.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__error{margin-top:0}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}.mg-input.mg-input--has-icon .mg-input__with-character-left>mg-icon{position:absolute;top:50%;left:var(--mg-inputs-spacer);color:var(--mg-inputs-color);transform:translateY(-50%)}.mg-input.mg-input--has-icon .mg-input__with-character-left .mg-input__box{padding-left:calc(var(--mg-icon-regular-size) + var(--mg-inputs-spacer) * 2)}.mg-input__with-character-left{position:relative;display:inline-flex;width:100%}.mg-input.is-focused .mg-input__with-character-left .mg-input__box{padding-right:calc(var(--mg-character-left-message-length) * 1ch + 0.8rem)}.mg-input__with-character-left mg-character-left{position:absolute;display:none;top:50%;right:1rem;opacity:0.6;transform:translateY(-50%);font-size:1.1rem}.mg-input.is-focused .mg-input__with-character-left mg-character-left{display:block}";
 const MgInputText = class {
   constructor(hostRef) {
@@ -1918,8 +1989,10 @@ const MgInputText = class {
      ************/
     // classes
     this.classFocus = 'is-focused';
-    this.isInputGroupAppend = 'mg-input--is-input-group-append';
-    this.classError = InputClass.ERROR;
+    this.classIsInputGroupAppend = 'mg-input--is-input-group-append';
+    this.classHasIcon = 'mg-input--has-icon';
+    // hasError (triggered by blur event)
+    this.hasError = false;
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
@@ -1957,7 +2030,7 @@ const MgInputText = class {
     /**
      * Define input width
      */
-    this.width = 'full';
+    this.mgWidth = 'full';
     /**
      * Define if component should display character left
      */
@@ -1973,6 +2046,9 @@ const MgInputText = class {
      */
     this.handleInput = () => {
       this.checkValidity();
+      if (this.hasError) {
+        this.checkError();
+      }
       this.value = this.input.value;
     };
     /**
@@ -1993,9 +2069,8 @@ const MgInputText = class {
       // Manage focus
       this.classList.delete(this.classFocus);
       this.classList = new index$1.ClassList(this.classList.classes);
-      // Check validity
-      this.checkValidity();
-      this.checkError();
+      // Display Error
+      this.displayError();
     };
     /**
      * Check if input is valid
@@ -2026,14 +2101,7 @@ const MgInputText = class {
       }
       // required
       else if (!this.valid && this.input.validity.valueMissing) {
-        this.errorMessage = index$1.messages.errors.required;
-      }
-      // Update class
-      if (this.valid) {
-        this.classList.delete(this.classError);
-      }
-      else {
-        this.classList.add(this.classError);
+        this.errorMessage = this.messages.errors.required;
       }
     };
     /**
@@ -2057,10 +2125,10 @@ const MgInputText = class {
     this.validateAppendSlot = () => {
       const slotAppendInput = Array.from(this.element.querySelectorAll('[slot="append-input"]'));
       if (slotAppendInput.length === 1) {
-        this.classList.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.isInputGroupAppend : 'mg-input--is-append-input-slot-content');
+        this.classList.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.classIsInputGroupAppend : 'mg-input--is-append-input-slot-content');
       }
       else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {
-        this.classList.add(this.isInputGroupAppend);
+        this.classList.add(this.classIsInputGroupAppend);
         this.classList.add('mg-input--has-buttons-group-append');
       }
     };
@@ -2068,6 +2136,14 @@ const MgInputText = class {
   handleValue(newValue) {
     this.valueChange.emit(newValue);
   }
+  validateIcon(newValue) {
+    if (newValue !== undefined) {
+      this.classList.add(this.classHasIcon);
+    }
+    else {
+      this.classList.delete(this.classHasIcon);
+    }
+  }
   /**
    * Public method to play input focus
    *
@@ -2084,6 +2160,7 @@ const MgInputText = class {
   async displayError() {
     this.checkValidity();
     this.checkError();
+    this.hasError = this.invalid;
   }
   /*************
    * Lifecycle *
@@ -2094,9 +2171,11 @@ const MgInputText = class {
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
-    if (this.icon !== undefined) {
-      this.classList.add('mg-input--has-icon');
-    }
+    // Get locales
+    this.messages = index$1.initLocales(this.element).messages;
+    this.characterLeftId = `${this.identifier}-character-left`;
+    // Validate
+    this.validateIcon(this.icon);
     this.validatePattern();
     this.validateAppendSlot();
     // Check validity when component is ready
@@ -2112,16 +2191,21 @@ const MgInputText = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, width: this.width, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, displayCharacterLeft: this.displayCharacterLeft, characterLeftTemplate: this.characterLeftTemplate, maxlength: this.maxlength, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, this.icon !== undefined && index.h("mg-icon", { icon: this.icon }), index.h("input", { type: this.type, class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }), index.h("slot", { name: "append-input" })));
+    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.h("div", { class: "mg-input__with-character-left", style: {
+        '--mg-character-left-message-length': (this.displayCharacterLeft
+          ? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
+          : 0).toString(),
+      } }, this.icon !== undefined && index.h("mg-icon", { icon: this.icon }), index.h("input", { type: this.type, class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }), this.displayCharacterLeft && this.maxlength && (index.h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), index.h("slot", { name: "append-input" })));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
-    "value": ["handleValue"]
+    "value": ["handleValue"],
+    "icon": ["validateIcon"]
   }; }
 };
 MgInputText.style = mgInputTextCss;
-const mgInputTextareaCss = ":host{display:block}.mg-input{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input.is-not-valid{color:hsl(var(--color-danger))}.mg-input.is-not-valid .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input mg-input-title{-ms-flex-negative:var(--mg-inputs-shrink, 1);flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{-ms-flex-direction:column;flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{-ms-flex-negative:1;flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:-ms-inline-flexbox;display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:-ms-inline-flexbox;display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:-ms-flexbox;display:flex}.mg-input__input{display:-ms-flexbox;display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input+*{text-align:start;margin-top:0.5rem}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);width:100%;height:var(--default-size);-webkit-box-sizing:border-box;box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size)}.mg-input__box::-webkit-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::-moz-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:-ms-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::-ms-input-placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{-webkit-box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5);box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0;--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius);--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){-ms-flex-pack:justify;justify-content:space-between}.mg-input.mg-input--width-full .mg-input__input-container{-ms-flex:auto;flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{width:100%}.mg-input.mg-input--width-16 .mg-input__box{width:21rem}.mg-input.mg-input--width-4 .mg-input__box{width:7rem}.mg-input.mg-input--width-2 .mg-input__box{width:5rem}.mg-input mg-character-left{display:none}.mg-input.is-focused mg-character-left{display:block}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}.mg-input .mg-input__box{height:auto}@-moz-document url-prefix(){.mg-input__box{overflow-x:hidden}}";
+const mgInputTextareaCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:flex}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{width:100%}.mg-input.mg-input--width-16 .mg-input__box{width:21rem}.mg-input.mg-input--width-4 .mg-input__box{width:7rem}.mg-input.mg-input--width-2 .mg-input__box{width:5rem}.mg-input mg-character-left{opacity:0.6;font-size:1.1rem}.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__help-text,.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__error{margin-top:0}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}.mg-input .mg-input__box{display:block;height:auto;resize:none}.mg-input .mg-input__box.mg-input__box--resizable{resize:both}.mg-input .mg-input__box.mg-input__box--resizable-horizontal{resize:horizontal}.mg-input .mg-input__box.mg-input__box--resizable-vertical{resize:vertical}.mg-input__with-character-left{width:100%}.mg-input__with-character-left mg-character-left{display:block;visibility:hidden;margin-top:0.2rem;text-align:end}.mg-input.is-focused .mg-input__with-character-left mg-character-left{visibility:visible}@-moz-document url-prefix(){.mg-input__box{overflow-x:hidden}}";
 const MgInputTextarea = class {
   constructor(hostRef) {
@@ -2133,7 +2217,9 @@ const MgInputTextarea = class {
      ************/
     // classes
     this.classFocus = 'is-focused';
-    this.classError = InputClass.ERROR;
+    this.classHasDisplayCharacterLeft = 'mg-input--has-display-character-left';
+    // hasError (triggered by blur event)
+    this.hasError = false;
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
@@ -2167,15 +2253,19 @@ const MgInputTextarea = class {
     /**
      * Define input width
      */
-    this.width = 'full';
+    this.mgWidth = 'full';
     /**
-     * Define input pattern error message
+     * Define the number of visible text lines for the control
      */
     this.rows = 3;
     /**
      * Define if component should display character left
      */
     this.displayCharacterLeft = true;
+    /**
+     * Define if input is resizable
+     */
+    this.resizable = 'none';
     /**
      * Component classes
      */
@@ -2184,6 +2274,10 @@ const MgInputTextarea = class {
      * Handle input event
      */
     this.handleInput = () => {
+      if (this.hasError) {
+        this.checkValidity();
+        this.checkError();
+      }
       this.value = this.input.value;
     };
     /**
@@ -2200,9 +2294,8 @@ const MgInputTextarea = class {
       // Manage focus
       this.classList.delete(this.classFocus);
       this.classList = new index$1.ClassList(this.classList.classes);
-      // Check validity
-      this.checkValidity();
-      this.checkError();
+      // Display Error
+      this.displayError();
     };
     /**
      * Get pattern validity
@@ -2236,14 +2329,7 @@ const MgInputTextarea = class {
       }
       // required
       else if (!this.valid && this.input.validity.valueMissing) {
-        this.errorMessage = index$1.messages.errors.required;
-      }
-      // Update class
-      if (this.valid) {
-        this.classList.delete(this.classError);
-      }
-      else {
-        this.classList.add(this.classError);
+        this.errorMessage = this.messages.errors.required;
       }
     };
     /**
@@ -2262,6 +2348,14 @@ const MgInputTextarea = class {
     this.checkValidity();
     this.valueChange.emit(newValue);
   }
+  validateDisplayCharacterLeft(newValue) {
+    if (newValue) {
+      this.classList.add(this.classHasDisplayCharacterLeft);
+    }
+    else {
+      this.classList.delete(this.classHasDisplayCharacterLeft);
+    }
+  }
   /**
    * Public method to display errors
    *
@@ -2270,6 +2364,7 @@ const MgInputTextarea = class {
   async displayError() {
     this.checkValidity();
     this.checkError();
+    this.hasError = this.invalid;
   }
   /*************
    * Lifecycle *
@@ -2280,6 +2375,11 @@ const MgInputTextarea = class {
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
+    // Get locales
+    this.messages = index$1.initLocales(this.element).messages;
+    this.characterLeftId = `${this.identifier}-character-left`;
+    // Validate
+    this.validateDisplayCharacterLeft(this.displayCharacterLeft);
     this.validatePattern();
     // Check validity when component is ready
     // return a promise to process action only in the FIRST render().
@@ -2294,10 +2394,17 @@ const MgInputTextarea = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, width: this.width, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, displayCharacterLeft: this.displayCharacterLeft, characterLeftTemplate: this.characterLeftTemplate, maxlength: this.maxlength, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.h("textarea", { class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) })));
+    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.h("div", { class: "mg-input__with-character-left" }, index.h("textarea", { class: {
+        'mg-input__box': true,
+        'mg-input__box--resizable': this.resizable === 'both',
+        'mg-input__box--resizable-horizontal': this.resizable === 'horizontal',
+        'mg-input__box--resizable-vertical': this.resizable === 'vertical',
+      }, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }), this.displayCharacterLeft && this.maxlength && (index.h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength })))));
   }
+  get element() { return index.getElement(this); }
   static get watchers() { return {
-    "value": ["handleValue"]
+    "value": ["handleValue"],
+    "displayCharacterLeft": ["validateDisplayCharacterLeft"]
   }; }
 };
 MgInputTextarea.style = mgInputTextareaCss;
@@ -2343,7 +2450,7 @@ const MgInputTitle = class {
 };
 MgInputTitle.style = mgInputTitleCss;
-const mgInputToggleCss = ":host{display:block}.mg-input{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input.is-not-valid{color:hsl(var(--color-danger))}.mg-input.is-not-valid .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input mg-input-title{-ms-flex-negative:var(--mg-inputs-shrink, 1);flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{-ms-flex-direction:column;flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{-ms-flex-negative:1;flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:-ms-inline-flexbox;display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:-ms-inline-flexbox;display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:-ms-flexbox;display:flex}.mg-input__input{display:-ms-flexbox;display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input+*{text-align:start;margin-top:0.5rem}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}.mg-input.mg-input.mg-input--toggle .mg-input__input-container{-ms-flex:auto;flex:auto;min-width:0}.mg-input__button-toggle{display:-ms-flexbox;display:flex;padding:0.2rem;min-width:0;background-color:hsl(var(--color-light));border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size) * var(--line-height) + 2 * (0.7rem + var(--mg-inputs-border-width))) / var(--mg-input-toggle-border-radius-ratio));font-size:inherit;line-height:inherit;cursor:pointer}.mg-input__button-toggle:disabled{cursor:default}.mg-input__toggle-item-container{padding:0.5rem 0.9rem;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:calc((var(--font-size) * var(--line-height) + 1rem) / var(--mg-input-toggle-border-radius-ratio));background-color:unset;font-weight:unset;color:hsl(var(--color-dark));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mg-input__toggle-item-container:first-of-type{font-weight:600;color:hsl(var(--color-info));background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%))}.mg-input.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{background-color:unset;font-weight:unset;color:hsl(var(--color-dark))}.mg-input.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{font-weight:600;color:hsl(var(--color-info));background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%))}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:calc(var(--font-size) * var(--line-height) + 1rem);height:calc(var(--font-size) * var(--line-height) + 1rem);padding:0;visibility:hidden}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container:first-of-type{visibility:visible}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container ::slotted(mg-icon){display:-ms-flexbox;display:flex}.mg-input.mg-input--toggle-icon.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{visibility:hidden}.mg-input.mg-input--toggle-icon.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{visibility:visible}.mg-input.mg-input--toggle-on-off .mg-input__toggle-item-container:first-of-type{font-weight:600;color:hsl(var(--color-dark));background-color:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%))}.mg-input.mg-input--toggle-on-off.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{background-color:unset;font-weight:unset;color:hsl(var(--color-dark))}.mg-input.mg-input--toggle-readonly .mg-input__button-toggle{border-color:transparent;background-color:transparent;cursor:initial}.mg-input.mg-input--toggle-readonly .mg-input__toggle-item-container:last-of-type{display:none}.mg-input.mg-input--toggle-readonly.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{display:none}.mg-input.mg-input--toggle-readonly.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{display:-ms-flexbox;display:flex}.mg-input.mg-input--toggle-disabled .mg-input__button-toggle{opacity:0.3}";
+const mgInputToggleCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container mg-icon{display:flex}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}.mg-input.mg-input.mg-input--toggle .mg-input__input-container{flex:auto;min-width:0}.mg-input__button-toggle{display:flex;padding:0.2rem;min-width:0;background-color:hsl(var(--color-light));border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size) * var(--line-height) + 2 * (0.7rem + var(--mg-inputs-border-width))) / var(--mg-input-toggle-border-radius-ratio));font-size:inherit;line-height:inherit;cursor:pointer}.mg-input__button-toggle:disabled{cursor:default}.mg-input__toggle-item-container{padding:0.5rem 0.9rem;border:0;box-sizing:border-box;border-radius:calc((var(--font-size) * var(--line-height) + 1rem) / var(--mg-input-toggle-border-radius-ratio));background-color:unset;font-weight:unset;color:hsl(var(--color-dark));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mg-input__toggle-item-container:first-of-type{font-weight:600;color:hsl(var(--color-info));background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%))}.mg-input.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{background-color:unset;font-weight:unset;color:hsl(var(--color-dark))}.mg-input.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{font-weight:600;color:hsl(var(--color-info));background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%))}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container{display:flex;justify-content:center;align-items:center;width:calc(var(--font-size) * var(--line-height) + 1rem);height:calc(var(--font-size) * var(--line-height) + 1rem);padding:0;visibility:hidden}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container:first-of-type{visibility:visible}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-input.mg-input--toggle-icon.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{visibility:hidden}.mg-input.mg-input--toggle-icon.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{visibility:visible}.mg-input.mg-input--toggle-on-off .mg-input__toggle-item-container:first-of-type{font-weight:600;color:hsl(var(--color-dark));background-color:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%))}.mg-input.mg-input--toggle-on-off.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{background-color:unset;font-weight:unset;color:hsl(var(--color-dark))}.mg-input.mg-input--toggle-readonly .mg-input__button-toggle{border-color:transparent;background-color:transparent;cursor:initial}.mg-input.mg-input--toggle-readonly .mg-input__toggle-item-container:last-of-type{display:none}.mg-input.mg-input--toggle-readonly.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{display:none}.mg-input.mg-input--toggle-readonly.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{display:flex}.mg-input.mg-input--toggle-disabled .mg-input__button-toggle{opacity:0.3}";
 /**
  * type Option validation function
@@ -2364,6 +2471,8 @@ const MgInputToggle = class {
     this.classReadonly = 'mg-input--toggle-readonly';
     this.classDisabled = 'mg-input--toggle-disabled';
     this.classIsActive = 'mg-input--toggle-is-active';
+    this.classOnOff = 'mg-input--toggle-on-off';
+    this.classIcon = 'mg-input--toggle-icon';
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
@@ -2451,11 +2560,15 @@ const MgInputToggle = class {
   }
   handleIsOnOff(newValue) {
     if (newValue)
-      this.classList.add(`mg-input--toggle-on-off`);
+      this.classList.add(this.classOnOff);
+    else
+      this.classList.delete(this.classOnOff);
   }
   handleIsIcon(newValue) {
     if (newValue)
-      this.classList.add(`mg-input--toggle-icon`);
+      this.classList.add(this.classIcon);
+    else
+      this.classList.delete(this.classIcon);
   }
   handleReadonly(newValue) {
     if (newValue)
@@ -2518,7 +2631,7 @@ const MgInputToggle = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, width: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, displayCharacterLeft: undefined, characterLeftTemplate: undefined, maxlength: undefined, helpText: this.helpText, errorMessage: undefined, isFieldset: false }, index.h("button", { type: "button", role: "switch", "aria-checked": this.checked, "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, index.h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, index.h("slot", { name: "item-1" })), index.h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, index.h("slot", { name: "item-2" })))));
+    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: undefined, isFieldset: false }, index.h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, index.h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, index.h("slot", { name: "item-1" })), index.h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, index.h("slot", { name: "item-2" })))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -2538,7 +2651,7 @@ MgInputToggle.style = mgInputToggleCss;
  */
 const variants$1 = ['info', 'warning', 'success', 'danger'];
-const mgMessageCss = ".mg-message{display:inline-block;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:var(--default-size);overflow:hidden;background-color:white;border-radius:var(--mg-message-border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}.mg-message::before{content:\"\";position:absolute;top:0;left:0;width:0.3rem;height:100%}.mg-message.mg-message--info::before{background-color:hsl(var(--color-info))}.mg-message.mg-message--info .mg-message__icon{color:hsl(var(--color-info))}.mg-message.mg-message--warning::before{background-color:hsl(var(--color-warning))}.mg-message.mg-message--warning .mg-message__icon{color:hsl(var(--color-warning))}.mg-message.mg-message--success::before{background-color:hsl(var(--color-success))}.mg-message.mg-message--success .mg-message__icon{color:hsl(var(--color-success))}.mg-message.mg-message--danger::before{background-color:hsl(var(--color-danger))}.mg-message.mg-message--danger .mg-message__icon{color:hsl(var(--color-danger))}.mg-message.mg-message--close-button{padding-right:3.4rem}.mg-message.mg-message--hide{display:none}.mg-message ::slotted(*){margin:0;padding:0}.mg-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);left:1.3rem;line-height:1}.mg-message__content{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-line-pack:stretch;align-content:stretch;padding:0 1rem 0 3.8rem}.mg-message__content-slot{-ms-flex-positive:1;flex-grow:1;margin:0.84rem 0}.mg-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-message__close-button{position:absolute;top:0;right:0}.mg-message,mg-message{max-width:100%}";
+const mgMessageCss = ".mg-message{display:inline-block;position:relative;box-sizing:border-box;min-height:var(--default-size);overflow:hidden;background-color:white;border-radius:var(--mg-message-border-radius);box-shadow:var(--box-shadow)}.mg-message::before{content:\"\";position:absolute;top:0;left:0;width:0.3rem;height:100%}.mg-message.mg-message--info::before{background-color:hsl(var(--color-info))}.mg-message.mg-message--info .mg-message__icon{color:hsl(var(--color-info))}.mg-message.mg-message--warning::before{background-color:hsl(var(--color-warning))}.mg-message.mg-message--warning .mg-message__icon{color:hsl(var(--color-warning))}.mg-message.mg-message--success::before{background-color:hsl(var(--color-success))}.mg-message.mg-message--success .mg-message__icon{color:hsl(var(--color-success))}.mg-message.mg-message--danger::before{background-color:hsl(var(--color-danger))}.mg-message.mg-message--danger .mg-message__icon{color:hsl(var(--color-danger))}.mg-message.mg-message--close-button{padding-right:3.4rem}.mg-message.mg-message--hide{display:none}.mg-message ::slotted(*){margin:0;padding:0}.mg-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);left:1.3rem;line-height:1}.mg-message__content{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:stretch;padding:0 1rem 0 3.8rem}.mg-message__content-slot{flex-grow:1;margin:0.84rem 0}.mg-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-message__close-button{position:absolute;top:0;right:0}.mg-message,mg-message{max-width:100%}";
 const MgMessage = class {
   constructor(hostRef) {
@@ -2548,6 +2661,9 @@ const MgMessage = class {
     /************
      * Internal *
      ************/
+    // classes
+    this.classHide = 'mg-message--hide';
+    // IDs
     this.closeButtonId = '';
     // Stored timer setted when hide action is run from setTimeOut
     this.storedTimer = null;
@@ -2621,10 +2737,12 @@ const MgMessage = class {
     if (!variants$1.includes(newValue)) {
       throw new Error(`<mg-message> prop "variant" must be one of : ${variants$1.join(', ')}`);
     }
-    if (oldValue !== undefined) {
-      this.classList.delete(`mg-message--${oldValue}`);
+    else {
+      if (oldValue !== undefined) {
+        this.classList.delete(`mg-message--${oldValue}`);
+      }
+      this.classList.add(`mg-message--${newValue}`);
     }
-    this.classList.add(`mg-message--${this.variant}`);
   }
   validateCloseButton(newValue) {
     if (newValue && this.hasActions) {
@@ -2635,11 +2753,11 @@ const MgMessage = class {
   validateHide(newValue) {
     if (newValue) {
       this.componentHide.emit();
-      this.classList.add('mg-message--hide');
+      this.classList.add(this.classHide);
     }
     else {
       this.componentShow.emit();
-      this.classList.delete('mg-message--hide');
+      this.classList.delete(this.classHide);
     }
     this.hideWithDelay();
   }
@@ -2650,6 +2768,9 @@ const MgMessage = class {
    * Check if component props are well configured on init
    */
   componentWillLoad() {
+    // Get locales
+    this.messages = index$1.initLocales(this.element).messages;
+    // Validate
     this.validateVariant(this.variant);
     // Check if close button is an can be activated
     this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
@@ -2667,7 +2788,7 @@ const MgMessage = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (index.h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, index.h("span", { class: "mg-message__icon" }, index.h("mg-icon", { icon: this.getIcon() })), index.h("div", { class: "mg-message__content" }, index.h("span", { class: "mg-message__content-slot" }, index.h("slot", null)), this.hasActions && index.h("span", { class: "mg-message__content-separator" }), this.hasActions && (index.h("span", { class: "mg-message__content-actions-slot" }, index.h("slot", { name: "actions" })))), this.closeButton && (index.h("span", { class: "mg-message__close-button" }, index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: index$1.messages.message.closeButton, onClick: this.handleClose }, index.h("mg-icon", { icon: "cross" }))))));
+    return (index.h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, index.h("span", { class: "mg-message__icon" }, index.h("mg-icon", { icon: this.getIcon() })), index.h("div", { class: "mg-message__content" }, index.h("span", { class: "mg-message__content-slot" }, index.h("slot", null)), this.hasActions && index.h("span", { class: "mg-message__content-separator" }), this.hasActions && (index.h("span", { class: "mg-message__content-actions-slot" }, index.h("slot", { name: "actions" })))), this.closeButton && (index.h("span", { class: "mg-message__close-button" }, index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, index.h("mg-icon", { icon: "cross" }))))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -2685,7 +2806,7 @@ var NavigationAction;
   NavigationAction["PREVIOUS"] = "previous";
 })(NavigationAction || (NavigationAction = {}));
-const mgPaginationCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}.mg-pagination__nav{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}.mg-pagination__nav mg-input-select{margin-right:0.5rem}.mg-pagination__button{display:-ms-flexbox;display:flex}.mg-pagination__button:first-of-type{margin-right:1rem}.mg-pagination__button:last-of-type{margin-left:1rem}";
+const mgPaginationCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}.mg-pagination__nav{display:flex;align-items:center;flex-direction:row}.mg-pagination__nav mg-input-select{margin-right:0.5rem}.mg-pagination__button{display:flex}.mg-pagination__button:first-of-type{margin-right:1rem}.mg-pagination__button:last-of-type{margin-left:1rem}";
 /**
  * Range generator
@@ -2712,19 +2833,11 @@ const MgPagination = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.currentPageChange = index.createEvent(this, "current-page-change", 7);
-    /**************
-     * Decorators *
-     **************/
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
      */
     this.identifier = index$1.createID('mg-pagination');
-    /**
-     * Panignation label. Is a short description.
-     * Customize default value can be usefull to improve accessibility
-     */
-    this.label = 'pagination';
     /**
      * Component total pages
      */
@@ -2788,8 +2901,15 @@ const MgPagination = class {
    * @returns {void}
    */
   componentWillLoad() {
+    // Get locales
+    this.messages = index$1.initLocales(this.element).messages;
+    // Validate
     this.validateTotalPages(this.totalPages);
     this.validateCurrentPage(this.currentPage);
+    // Set default label
+    if (this.label === undefined || this.label === '') {
+      this.label = this.messages.pagination.label;
+    }
   }
   /**
    * Render
@@ -2797,11 +2917,12 @@ const MgPagination = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    const navigationActionButton = (disabled, action) => (index.h("mg-button", { identifier: `${this.identifier}-button-${action}`, class: "mg-pagination__button", label: index$1.messages.pagination[`${action}Page`],
+    const navigationActionButton = (disabled, action) => (index.h("mg-button", { identifier: `${this.identifier}-button-${action}`, class: "mg-pagination__button", label: this.messages.pagination[`${action}Page`],
       // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => this.handleGoToPage(action), disabled: disabled, variant: "flat" }, action === NavigationAction.PREVIOUS && index.h("mg-icon", { icon: "chevron-left" }), index$1.messages.general[action], action === NavigationAction.NEXT && index.h("mg-icon", { icon: "chevron-right" })));
-    return (index.h("nav", { "aria-label": this.label, id: this.identifier, class: "mg-pagination__nav" }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), index.h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: index$1.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), index.h("span", { class: "sr-only" }, index$1.messages.pagination.page, " ", this.currentPage), index.h("span", null, "/ ", this.totalPages, " ", this.totalPages > 1 ? index$1.messages.pagination.pages : index$1.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
+      onClick: () => this.handleGoToPage(action), disabled: disabled, variant: "flat" }, action === NavigationAction.PREVIOUS && index.h("mg-icon", { icon: "chevron-left" }), this.messages.general[action], action === NavigationAction.NEXT && index.h("mg-icon", { icon: "chevron-right" })));
+    return (index.h("nav", { "aria-label": this.label, id: this.identifier, class: "mg-pagination__nav" }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), index.h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), index.h("span", { class: "sr-only" }, this.messages.pagination.page, " ", this.currentPage), index.h("span", null, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
   }
+  get element() { return index.getElement(this); }
   static get watchers() { return {
     "totalPages": ["validateTotalPages"],
     "currentPage": ["validateCurrentPage"]
@@ -2809,15 +2930,13 @@ const MgPagination = class {
 };
 MgPagination.style = mgPaginationCss;
-const mgPanelCss = ".mg-panel{background-color:hsl(var(--mg-panel-background));border-radius:var(--mg-panel-border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}.mg-panel__header{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between;padding:0 1rem 0 0.3rem;-ms-flex-align:center;align-items:center}.mg-panel__header-left,.mg-panel__header-right{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;margin:0.3rem 0}.mg-panel__header-left mg-input-text{-ms-flex-positive:1;flex-grow:1}.mg-panel__collapse-button{font-family:var(--font-family-heading);font-size:1.4rem;font-weight:500;margin:0 0.3rem 0 0}.mg-panel__content{padding:1.5rem}.mg-panel ::slotted([slot=header-right]){display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:1rem;margin-left:auto}";
+const mgPanelCss = ".mg-panel{background-color:hsl(var(--mg-panel-background));border-radius:var(--mg-panel-border-radius);box-shadow:var(--box-shadow)}.mg-panel__header{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0 1rem 0 0.3rem;align-items:flex-start}.mg-panel__header-left,.mg-panel__header-right{display:flex;margin:0.3rem 0}.mg-panel__header-left--full{flex:1 1 auto}.mg-panel__header-right{flex:1 auto}.mg-panel__header-left mg-input-text{flex-grow:1}.mg-panel__header-left mg-button:not([slot=append-input]){margin:0 0.3rem 0 0}.mg-panel__header-left mg-button:not([slot=append-input])>*:first-of-type{font-family:var(--font-family-heading);font-size:1.4rem;font-weight:500}.mg-panel__content{padding:1.5rem}.mg-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;gap:1rem;margin-left:auto}";
 const MgPanel = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.titleChange = index.createEvent(this, "title-change", 7);
-    /**************
-     * Decorators *
-     **************/
+    this.expandedChange = index.createEvent(this, "expanded-change", 7);
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
@@ -2827,6 +2946,10 @@ const MgPanel = class {
      * Panel is opened
      */
     this.expanded = false;
+    /**
+     * Disable possibility to toggle expand
+     */
+    this.expandToggleDisabled = false;
     /**
      * Panel title is editabled
      */
@@ -2859,7 +2982,9 @@ const MgPanel = class {
      * @returns {void}
      */
     this.handleCollapseButton = () => {
-      this.expanded = !this.expanded;
+      if (!this.expandToggleDisabled) {
+        this.expanded = !this.expanded;
+      }
     };
     /**
      * Edit button click handler
@@ -2893,13 +3018,12 @@ const MgPanel = class {
      * @returns {void}
      */
     this.handleValidateEditButton = () => {
-      if (this.updatedPanelTitle !== undefined)
-        this.panelTitle = this.updatedPanelTitle;
-      this.toggleIsEditing();
+      if (this.editInputElement.valid) {
+        if (this.updatedPanelTitle !== undefined)
+          this.panelTitle = this.updatedPanelTitle;
+        this.toggleIsEditing();
+      }
     };
-    /*************
-     * Lifecycle *
-     *************/
     /**
      * Header left conditional render
      *
@@ -2907,17 +3031,17 @@ const MgPanel = class {
      * @returns {HTMLMgButtonElement | HTMLElement | HTMLElement[]} header left element
      */
     this.headerLeft = () => {
-      const collapseButton = () => (index.h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", class: "mg-panel__collapse-button", identifier: `${this.identifier}-collapse-button`, expanded: this.expanded, controls: `${this.identifier}-content` }, index.h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), !this.isEditing && this.panelTitle));
+      const collapseButton = () => (index.h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, expanded: this.expanded, controls: `${this.identifier}-content`, disabled: this.expandToggleDisabled }, index.h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), !this.isEditing && this.panelTitle));
       if (this.titleEditable && !this.isEditing) {
         return [
           collapseButton(),
-          index.h("mg-button", { "is-icon": true, variant: "secondary", label: index$1.messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` }, index.h("mg-icon", { icon: "pen" })),
+          index.h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` }, index.h("mg-icon", { icon: "pen" })),
         ];
       }
       if (this.titleEditable && this.isEditing) {
         return [
           collapseButton(),
-          index.h("mg-input-text", { label: index$1.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) }, index.h("mg-button", { slot: "append-input", label: index$1.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, index.h("mg-icon", { icon: "cross" })), index.h("mg-button", { slot: "append-input", label: index$1.messages.general.validate, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, index.h("mg-icon", { icon: "check" }))),
+          index.h("mg-input-text", { label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) }, index.h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, index.h("mg-icon", { icon: "cross" })), index.h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, index.h("mg-icon", { icon: "check" }))),
         ];
       }
       return collapseButton();
@@ -2926,6 +3050,31 @@ const MgPanel = class {
   handelTileChange(newValue) {
     this.titleChange.emit(newValue);
   }
+  validatetitlePattern(newValue) {
+    if (newValue && !this.titleEditable) {
+      throw new Error('<mg-panel> prop "titleEditable" must be set to `true`.');
+    }
+    if (newValue && this.titlePatternErrorMessage === undefined) {
+      throw new Error('<mg-panel> prop "titlePattern" must be paired with the prop "titlePatternErrorMessage".');
+    }
+  }
+  handleExpanded(newValue) {
+    this.expandedChange.emit(newValue);
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    // Get locales
+    this.messages = index$1.initLocales(this.element).messages;
+    // Validate
+    this.validatetitlePattern(this.titlePattern);
+  }
   /**
    * Edit DOM after render
    *
@@ -2943,20 +3092,30 @@ const MgPanel = class {
    * @returns {HTMLElement} html element
    */
   render() {
-    return (index.h("section", { class: this.classList.join(), id: this.identifier }, index.h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, index.h("div", { class: "mg-panel__header-left" }, this.headerLeft()), index.h("div", { class: "mg-panel__header-right" }, index.h("slot", { name: "header-right" }))), index.h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, index.h("slot", null))));
+    return (index.h("section", { class: this.classList.join(), id: this.identifier }, index.h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, index.h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, this.headerLeft()), index.h("div", { class: "mg-panel__header-right" }, index.h("slot", { name: "header-right" }))), index.h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, index.h("slot", null))));
   }
+  get element() { return index.getElement(this); }
   static get watchers() { return {
-    "panelTitle": ["handelTileChange"]
+    "panelTitle": ["handelTileChange"],
+    "titlePattern": ["validatetitlePattern"],
+    "expanded": ["handleExpanded"]
   }; }
 };
 MgPanel.style = mgPanelCss;
+var Status;
+(function (Status) {
+  Status["VISIBLE"] = "visible";
+  Status["HIDDEN"] = "hidden";
+  Status["DISABLED"] = "disabled";
+  Status["ACTIVE"] = "active";
+})(Status || (Status = {}));
 /**
  * List of all possibles sizes
  */
 const sizes = ['regular', 'large'];
-const mgTabsCss = ".mg-tabs.mg-tabs--size-regular.sc-mg-tabs .mg-tabs__navigation-button.sc-mg-tabs{padding:calc(1rem + 0.3rem) calc(1rem * 1.3) 1rem}.mg-tabs.mg-tabs--size-large.sc-mg-tabs .mg-tabs__navigation-button.sc-mg-tabs{padding:calc(1.8rem + 0.3rem) calc(1.8rem * 1.3) 1.8rem}.mg-tabs__header.sc-mg-tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.mg-tabs__navigation-button.sc-mg-tabs{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:0.5rem;-moz-column-gap:0.5rem;column-gap:0.5rem;background:none;border:none;border-bottom:0.3rem solid transparent;color:hsl(var(--color-dark));line-height:var(--line-height);cursor:pointer}.mg-tabs__navigation-button.sc-mg-tabs:disabled,.mg-tabs__navigation-button--disabled.sc-mg-tabs{cursor:default;opacity:30%}.mg-tabs__navigation-button.sc-mg-tabs:hover:not(:disabled),.mg-tabs__navigation-button.sc-mg-tabs:focus:not(:disabled){background-color:hsla(var(--color-info-h), var(--color-info-s), var(--color-info-l), 10%)}.mg-tabs__navigation-button.mg-tabs__navigation-button--active.sc-mg-tabs{color:hsl(var(--color-info));border-bottom-color:hsl(var(--color-info));font-weight:700}.mg-tabs__content-container.sc-mg-tabs:focus-visible{outline:none}";
+const mgTabsCss = ".mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button{padding:calc(1rem + 0.3rem) calc(1rem * 1.3) 1rem}.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button{padding:calc(1.8rem + 0.3rem) calc(1.8rem * 1.3) 1.8rem}.mg-tabs__header{display:flex;flex-direction:row;flex-wrap:wrap}.mg-tabs__navigation-button{display:flex;align-items:center;column-gap:0.5rem;background:none;border:none;border-bottom:0.3rem solid transparent;color:hsl(var(--color-dark));line-height:var(--line-height);cursor:pointer}.mg-tabs__navigation-button:disabled,.mg-tabs__navigation-button--disabled{cursor:default;opacity:30%}.mg-tabs__navigation-button:hover:not(:disabled),.mg-tabs__navigation-button:focus:not(:disabled){background-color:hsla(var(--color-info-h), var(--color-info-s), var(--color-info-l), 10%)}.mg-tabs__navigation-button.mg-tabs__navigation-button--active{color:hsl(var(--color-info));border-bottom-color:hsl(var(--color-info));font-weight:700}.mg-tabs__navigation-button.mg-tabs__navigation-button--hidden{display:none}.mg-tabs__content-container:focus-visible{outline:none}";
 /**
  * type TabItem validation function
@@ -2968,6 +3127,13 @@ const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'stri
 const MgTabs = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.activeTabChange = index.createEvent(this, "active-tab-change", 7);
+    /************
+     * Internal *
+     ************/
+    this.tabPanel = 'panel';
+    this.startIndex = 1;
+    this.buttonTabBaseClass = 'mg-tabs__navigation-button';
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
@@ -2990,6 +3156,46 @@ const MgTabs = class {
      * Component classes
      */
     this.classList = new index$1.ClassList(['mg-tabs']);
+    /**
+     * Method to set active tab
+     *
+     * @param {number} tabKey item tab key to set to ACTIVE status
+     * @returns {void}
+     */
+    this.setActiveTab = (tabKey) => {
+      // reset active tabs
+      this.tabs.forEach(tab => {
+        if (this.tabHasGivenStatus(tab, Status.ACTIVE))
+          tab.status = Status.VISIBLE;
+      });
+      // set active tab from given tab key
+      this.tabs[tabKey - this.startIndex].status = Status.ACTIVE;
+      // emit change active tab key event
+      this.activeTabChange.emit(tabKey);
+    };
+    /**
+     * Method to know if given tab has the given status
+     *
+     * @param {TabItem} tab item tab key to set to ACTIVE status
+     * @param {Status} status status to valide
+     * @returns {boolean} status comparaison
+     */
+    this.tabHasGivenStatus = (tab, status) => tab.status === status;
+    /**
+     * Method to get element id from index
+     *
+     * @param {string} element to get id
+     * @param {number} index to generate id
+     * @returns {string} generated element id
+     */
+    this.getElementId = (element, index) => `${element}-${this.getTabIndex(index)}`;
+    /**
+     * Method to get tab index
+     *
+     * @param {number} index to get
+     * @returns {number} index
+     */
+    this.getTabIndex = (index) => index + this.startIndex;
     /**
      * Handle click events on tabs
      *
@@ -2999,6 +3205,14 @@ const MgTabs = class {
       const tabId = event.currentTarget.getAttribute('data-index');
       this.activeTab = Number(tabId);
     };
+    /**
+     * get navigation button class from given status
+     *
+     * @param {Status} status button tab status
+     * @param {boolean} isSelector set if we need a CSS selector with the dot '.' at the begin. default value = false.
+     * @returns {string} button class/selector variant
+     */
+    this.getNavigationButtonClass = (status, isSelector = false) => `${isSelector ? '.' : ''}${this.buttonTabBaseClass}--${status}`;
     /**
      * Handle keyboard event on tabs
      *
@@ -3009,16 +3223,14 @@ const MgTabs = class {
       let tabId = Number(event.target.getAttribute('data-index'));
       const parent = event.target.parentElement;
       // change selected id from key code
-      // /* IE FIX */ delete 'Right'
-      if (['ArrowRight', 'Right'].includes(event.key)) {
+      if (event.key === 'ArrowRight') {
         tabId++;
-        // /* IE FIX */ delete 'Left'
       }
-      else if (['ArrowLeft', 'Left'].includes(event.key)) {
+      else if (event.key === 'ArrowLeft') {
         tabId--;
       }
-      // get selected tab
-      const selectedTab = parent.querySelector(`[data-index="${tabId}"]`);
+      // get selected tab if NOT hidden, disabled
+      const selectedTab = parent.querySelector(`[data-index="${tabId}"]:not(${[this.getNavigationButtonClass(Status.HIDDEN, true), this.getNavigationButtonClass(Status.DISABLED, true)].join()})`);
       // apply selected tab if exist
       if (selectedTab !== null) {
         selectedTab.focus();
@@ -3044,7 +3256,7 @@ const MgTabs = class {
   validateItems(newValue) {
     // String array
     if (index$1.allItemsAreString(newValue)) {
-      this.tabs = newValue.map(item => ({ label: item, disabled: false }));
+      this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
     }
     // Object array
     else if (newValue && newValue.every(item => isTabItem(item))) {
@@ -3055,9 +3267,12 @@ const MgTabs = class {
     }
   }
   validateActiveTab(newValue) {
-    if (Number(newValue) < 1 || Number(newValue) > this.tabs.length) {
+    if (newValue < 1 || newValue > this.tabs.length) {
       throw new Error('<mg-tabs> prop "activeTab" must be between 1 and tabs length.');
     }
+    else {
+      this.setActiveTab(newValue);
+    }
   }
   /*************
    * Lifecycle *
@@ -3080,17 +3295,12 @@ const MgTabs = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: this.classList.join() }, index.h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index$1) => {
-      const tabIndex = index$1 + 1;
-      return (index.h("button", { role: "tab", id: `${this.identifier}-${tabIndex}`, class: {
-          'mg-tabs__navigation-button': true,
-          'mg-tabs__navigation-button--active': tabIndex === this.activeTab,
-          'mg-tabs__navigation-button--disabled': tab.disabled,
-        }, tabindex: tabIndex === this.activeTab ? 0 : -1, "aria-selected": (tabIndex === this.activeTab).toString(), "aria-controls": `pannel-${tabIndex}`, onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": tabIndex, disabled: tab.disabled }, tab.icon !== undefined && index.h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && index.h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label })));
-    })), this.tabs.map((_tab, index$1) => {
-      const tabIndex = index$1 + 1;
-      return (index.h("article", { role: "tabpanel", id: `pannel-${tabIndex}`, hidden: tabIndex !== this.activeTab, "aria-labelledby": `${this.identifier}-${this.activeTab}`, tabindex: tabIndex === this.activeTab ? 0 : -1, class: "mg-tabs__content-container" }, index.h("slot", { name: `tab_content-${tabIndex}` })));
-    }))));
+    return (index.h(index.Host, null, index.h("div", { class: this.classList.join() }, index.h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index$1) => (index.h("button", { role: "tab", id: this.getElementId(this.identifier, index$1), class: {
+        [`${this.buttonTabBaseClass}`]: true,
+        [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasGivenStatus(tab, Status.ACTIVE),
+        [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasGivenStatus(tab, Status.DISABLED),
+        [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasGivenStatus(tab, Status.HIDDEN),
+      }, tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasGivenStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index$1), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabIndex(index$1), disabled: this.tabHasGivenStatus(tab, Status.DISABLED) }, tab.icon !== undefined && index.h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && index.h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label }))))), this.tabs.map((tab, index$1) => (index.h("article", { role: "tabpanel", id: this.getElementId(this.tabPanel, index$1), hidden: !this.tabHasGivenStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index$1), tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-tabs__content-container" }, index.h("slot", { name: this.getElementId('tab_content', index$1) })))))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -3106,29 +3316,44 @@ MgTabs.style = mgTabsCss;
  */
 const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'];
-const mgTagCss = ".mg-tag{padding:calc((var(--mg-tag-height) - 0.2rem - var(--mg-tag-font-size) * var(--line-height)) / 2) 0.6rem;min-height:var(--mg-tag-height);-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--mg-tag-border-radius);border:0.1rem solid;font-size:var(--mg-tag-font-size);font-weight:600;text-align:center}.mg-tag.mg-tag--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-tag.mg-tag--primary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-tag.mg-tag--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-tag.mg-tag--success.mg-tag--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-tag.mg-tag--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-tag.mg-tag--warning.mg-tag--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-tag.mg-tag--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-tag.mg-tag--danger.mg-tag--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-tag.mg-tag--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-tag.mg-tag--info.mg-tag--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-tag,mg-tag{display:inline-block;vertical-align:middle}";
+const mgTagCss = ".mg-tag{padding:calc((var(--mg-tag-height) - 0.2rem - var(--mg-tag-font-size) * var(--line-height)) / 2) 0.6rem;min-height:var(--mg-tag-height);box-sizing:border-box;border-radius:var(--mg-tag-border-radius);border:0.1rem solid;font-size:var(--mg-tag-font-size);font-weight:600;text-align:center}.mg-tag.mg-tag--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-tag.mg-tag--primary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-tag.mg-tag--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-tag.mg-tag--success.mg-tag--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-tag.mg-tag--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-tag.mg-tag--warning.mg-tag--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-tag.mg-tag--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-tag.mg-tag--danger.mg-tag--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-tag.mg-tag--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-tag.mg-tag--info.mg-tag--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-tag,mg-tag{display:inline-block;vertical-align:middle}";
 const MgTag = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /************
+     * Internal *
+     ************/
+    // classes
+    this.classOutline = `mg-tag--outline`;
+    /**************
+     * Decorators *
+     **************/
     /**
      * Define button variant
      */
-    this.variant = variants[0]; // info
+    this.variant = variants[0]; // primary
     /**
      * Component classes
      */
     this.classList = new index$1.ClassList(['mg-tag']);
   }
-  validateVariant(newValue) {
+  validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
       throw new Error(`<mg-tag> prop "variant" must be one of : ${variants.join(', ')}.`);
     }
-    this.classList.add(`mg-tag--${this.variant}`);
+    else {
+      if (oldValue !== undefined) {
+        this.classList.delete(`mg-tag--${oldValue}`);
+      }
+      this.classList.add(`mg-tag--${newValue}`);
+    }
   }
   validateOutline(newValue) {
     if (newValue)
-      this.classList.add(`mg-tag--outline`);
+      this.classList.add(this.classOutline);
+    else
+      this.classList.delete(this.classOutline);
   }
   /*************
    * Lifecycle *
@@ -3157,7 +3382,7 @@ const MgTag = class {
 };
 MgTag.style = mgTagCss;
-const mgTooltipCss = ".sc-mg-tooltip-h{display:inline-block}.mg-tooltip.sc-mg-tooltip{display:none;padding:0.5rem 0.8rem;z-index:9999;border-radius:var(--mg-tooltip-border-radius);background-color:hsl(var(--mg-tooltip-background-color));color:hsl(var(--mg-tooltip-font-color));text-align:start}.mg-tooltip[data-show].sc-mg-tooltip{display:block}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip,.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip::before{position:absolute;width:0.8rem;height:0.8rem;z-index:9999;background:inherit}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip{visibility:hidden}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.mg-tooltip[data-popper-placement^=top].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{bottom:-4px}.mg-tooltip[data-popper-placement^=bottom].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{top:-4px}.mg-tooltip[data-popper-placement^=left].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{right:-4px}.mg-tooltip[data-popper-placement^=right].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{left:-4px}";
+const mgTooltipCss = ".sc-mg-tooltip-h{display:inline-block}.mg-tooltip.sc-mg-tooltip{display:none;padding:0.5rem 0.8rem;z-index:9999;border-radius:var(--mg-tooltip-border-radius);background-color:hsl(var(--mg-tooltip-background-color));color:hsl(var(--mg-tooltip-font-color));text-align:start}.mg-tooltip[data-show].sc-mg-tooltip{display:block}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip,.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip::before{position:absolute;width:0.8rem;height:0.8rem;z-index:9999;background:inherit}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip{visibility:hidden}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-tooltip[data-popper-placement^=top].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{bottom:-4px}.mg-tooltip[data-popper-placement^=bottom].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{top:-4px}.mg-tooltip[data-popper-placement^=left].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{right:-4px}.mg-tooltip[data-popper-placement^=right].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{left:-4px}";
 const MgTooltip = class {
   constructor(hostRef) {