@mgdis/mg-components 5.15.0 → 5.16.0

package/dist/cjs/{mg-action-more_32.cjs.entry.js → mg-action-more_34.cjs.entry.js}

@@ -31,11 +31,15 @@ var Status$1;
  * @returns ID
  */
 const createID = (prefix = '', length = 10) => {
-  let ID = '';
   const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
   const charsLength = chars.length;
-  for (let i = 0; i < length; i++) {
-    ID += chars.charAt(Math.floor(Math.random() * charsLength));
+  let ID = '';
+  let now = Date.now();
+  while (length > 0) {
+    now += Math.pow(10, 6); // Add 1 millisecond to the timestamp
+    const index = now % charsLength;
+    ID += chars.charAt(index);
+    length--;
   }
   return (prefix !== '' ? `${prefix}-` : '') + ID;
 };
@@ -141,10 +145,7 @@ const getParentWindows = (localWindow, windows = []) => {
  */
 const getChildWindows = (localWindow, windows = []) => {
   if (localWindow.frames.length > 0) {
-    // Window.frames is an array-like object, needs a classic for loop
-    // https://developer.mozilla.org/en-US/docs/Web/API/Window/frames
-    for (let i = 0; i < localWindow.frames.length; i++) {
-      const childWindow = localWindow.frames[i];
+    for (const childWindow of Array.from(localWindow.frames)) {
       windows.push(childWindow);
       getChildWindows(childWindow, windows);
     }
@@ -190,7 +191,7 @@ const MgActionMore = class {
     this.name = 'mg-action-more';
     this.mgPopoverIdentifier = createID(this.name);
     /************
-     * Merthods *
+     * Methods *
      ***********/
     /**
      * Toogle expanded props
@@ -198,6 +199,13 @@ const MgActionMore = class {
     this.toggleExpanded = () => {
       this.expanded = !this.expanded;
     };
+    /**
+     * Handle popover display change value
+     * @param event - display change updated value
+     */
+    this.handleDisplayChange = (event) => {
+      this.expanded = event.detail;
+    };
     /**
      * Button click handler
      */
@@ -266,7 +274,7 @@ const MgActionMore = class {
           'mg-a11y-animation': true,
         } }, index.h("mg-icon", { icon: "chevron-down", size: "small" })));
     }
-    return (index.h(index.Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, index.h("span", { class: "mg-action-more" }, index.h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded }, index.h("mg-button", { variant: this.button.variant, isIcon: this.button.isIcon, type: "button", label: buttonLabel, onClick: this.handleButton }, index.h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), index.h("div", { slot: "content" }, index.h("mg-menu", { direction: mgMenu_conf.Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
+    return (index.h(index.Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, index.h("span", { class: "mg-action-more" }, index.h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, index.h("mg-button", { variant: this.button.variant, isIcon: this.button.isIcon, type: "button", label: buttonLabel, onClick: this.handleButton }, index.h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), index.h("div", { slot: "content" }, index.h("mg-menu", { direction: mgMenu_conf.Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
       var _a;
       return (
       // eslint-disable-next-line react/jsx-no-bind
@@ -658,7 +666,7 @@ const MgDetails = class {
    * @returns HTML Element
    */
   render() {
-    return (index.h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, index.h("summary", null, index.h("slot", { name: "summary" }), index.h("span", { class: "mg-details__toggle" }, index.h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded } }), index.h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), index.h("div", { class: "mg-details__details" }, index.h("slot", { name: "details" }))));
+    return (index.h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, index.h("summary", null, index.h("slot", { name: "summary" }), index.h("span", { class: "mg-details__toggle" }, index.h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded } }), index.h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), index.h("div", { class: "mg-details__details" }, index.h("slot", { name: "details" }))));
   }
   static get watchers() { return {
     "toggleClosed": ["validateTitles"],
@@ -717,15 +725,23 @@ const MgForm = class {
         // All inputs are required
         if ([requiredInputs.length, editableInputs.length].every(length => length === 1) ||
           (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)) {
-          this.requiredMessage = this.messages.form[requiredInputs.length === 1 ? 'allRequiredSingle' : 'allRequired'];
+          this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');
           this.classCollection.add(this.classAllRequired);
         }
         // Some fields are required
         else if (requiredInputs.length > 0) {
-          this.requiredMessage = this.messages.form[requiredInputs.length === 1 ? 'requiredSingle' : 'required'];
+          this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');
         }
       }
     };
+    /**
+     * Returns a required message based on the count of required inputs.
+     * @param requiredInputs - An array of required input elements.
+     * @param keySingle - The key for the singular message format.
+     * @param keyPlural - The key for the plural message format.
+     * @returns The appropriate required message based on the count of required inputs.
+     */
+    this.getRequiredMessageBasedOnCount = (requiredInputs, keySingle, keyPlural) => this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];
     /**
      * Check if form is valid
      */
@@ -837,7 +853,7 @@ const MgForm = class {
    * @returns HTML Element
    */
   render() {
-    return (index.h("form", { class: this.classCollection.join(), id: this.identifier, name: this.name, ref: el => (this.form = el), onSubmit: this.handleFormSubmit }, this.requiredMessage && index.h("p", { innerHTML: this.requiredMessage }), index.h("slot", null), !this.readonly && !this.disabled && index.h("slot", { name: "actions" })));
+    return (index.h("form", { class: this.classCollection.join(), id: this.identifier, name: this.name, ref: (el) => (this.form = el), onSubmit: this.handleFormSubmit }, this.requiredMessage && index.h("p", { innerHTML: this.requiredMessage }), index.h("slot", null), !this.readonly && !this.disabled && index.h("slot", { name: "actions" })));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -869,6 +885,7 @@ const iconList = [
 	"api",
 	"archive",
 	"archive-outline",
+	"arrow-clock",
 	"arrow-down",
 	"arrow-down-a-z",
 	"arrow-down-right",
@@ -887,6 +904,9 @@ const iconList = [
 	"arrows-rotate-backward",
 	"ban",
 	"bell",
+	"bell-outline",
+	"book",
+	"book-outline",
 	"briefcase",
 	"briefcase-outline",
 	"building-outline",
@@ -910,6 +930,7 @@ const iconList = [
 	"code-square-outline",
 	"cog",
 	"comment",
+	"comment-outline",
 	"comment-sms",
 	"conversation",
 	"conversation-outline",
@@ -920,6 +941,8 @@ const iconList = [
 	"dashboard",
 	"dashboard-outline",
 	"download",
+	"earth",
+	"earth-outline",
 	"ellipsis",
 	"ellipsis-vertical",
 	"euro",
@@ -931,11 +954,14 @@ const iconList = [
 	"exclamation-triangle-outline",
 	"eye",
 	"eye-slash",
+	"fax",
+	"fax-outline",
 	"file",
 	"file-cog",
 	"file-download",
 	"file-excel",
 	"file-excel-outline",
+	"file-outline",
 	"file-pdf",
 	"file-pdf-outline",
 	"file-text",
@@ -946,11 +972,17 @@ const iconList = [
 	"filter",
 	"floppy-disk",
 	"folder",
+	"folder-check",
+	"folder-check-outline",
 	"folder-lines",
 	"folder-lines-outline",
 	"folder-link",
 	"folder-outline",
 	"folder-star",
+	"folders",
+	"folders-outline",
+	"gavel",
+	"gavel-outline",
 	"graduation-cap",
 	"hand-up",
 	"history",
@@ -958,6 +990,8 @@ const iconList = [
 	"home-outline",
 	"info-circle",
 	"info-circle-outline",
+	"interrogation-circle",
+	"interrogation-circle-outline",
 	"key",
 	"laptop",
 	"life-ring",
@@ -971,6 +1005,9 @@ const iconList = [
 	"log-out",
 	"magnifying-glass",
 	"mail",
+	"mail-outline",
+	"messages-square",
+	"messages-square-outline",
 	"notes",
 	"notes-outline",
 	"paper-plane",
@@ -980,6 +1017,7 @@ const iconList = [
 	"pen-fancy",
 	"pen-fancy-files-outline",
 	"pen-fancy-outline",
+	"pen-outline",
 	"phone",
 	"picture",
 	"play-circle",
@@ -994,9 +1032,11 @@ const iconList = [
 	"tag",
 	"tags",
 	"thumb-up",
+	"thumb-up-outline",
 	"thumbtack",
 	"thumbtack-outline",
 	"trash",
+	"trash-outline",
 	"universal-access",
 	"unlink",
 	"unlock",
@@ -1011,7 +1051,9 @@ const iconList = [
 	"user-question-outline",
 	"user-shield-outline",
 	"users",
-	"wallet"
+	"users-outline",
+	"wallet",
+	"wallet-outline"
 ];
 
 const icons = {
@@ -1023,6 +1065,7 @@ const icons = {
 'api': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
 'archive': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M3 6v6.96c0 .57.46 1.04 1.04 1.04H12c.55 0 1-.45 1-1V6H3Zm7 2H6V7h4v1Zm3-3H3c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1Z"/></svg>',
 'archive-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M13 2H3c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1v6.96c0 .57.46 1.04 1.04 1.04H12c.55 0 1-.45 1-1V6c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1Zm-1 11H4.04S4 12.98 4 12.96V6h8v7Zm1-8H3V3h10v2Zm-3 3H6V7h4v1Z"/></svg>',
+'arrow-clock': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12.26 12.225a6 6 0 1 1 .863-7.348L12 6h3V3l-1.152 1.152a7 7 0 1 0-.88 8.78l-.707-.707Z"/><path fill="currentColor" d="m10.351 10.321.005-.005v.01l-.005-.005Zm-.705.705.705-.705-2.445-2.445v-3.59h-1v4l2.74 2.74Z"/></svg>',
 'arrow-down': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M13 10.1h-2.77a.31.31 0 0 1-.32-.28V.94a.3.3 0 0 0-.32-.29H6.37A.32.32 0 0 0 6 .94v8.87a.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-.42c-.07-.09-.17-.09-.29-.09Z"/></svg>',
 'arrow-down-a-z': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m6.53 10.9-1.41 1.41-.71.71-2.12-2.12.71-.71.88.88V3.02h1v8.12l.95-.95.71.71ZM12.29 6H10.5l-.36 1H9.08l1.79-5h1.05l1.79 5h-1.06l-.36-1Zm-.36-1.02-.53-1.49-.53 1.49h1.06Zm1.79 5.18V9H9.09v1h3.29l-3.29 2.84V14h4.63v-1h-3.29l3.29-2.84Z"/></svg>',
 'arrow-down-right': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m1.98 3.47 8.75 8.75H6.94c-.58 0-1.05.47-1.05 1.06s.47 1.05 1.05 1.05h6.33c.58 0 1.05-.47 1.05-1.05V6.94a1.05 1.05 0 1 0-2.1 0v3.79L3.47 1.98c-.41-.41-1.08-.41-1.49 0-.41.41-.41 1.08 0 1.49Z"/></svg>',
@@ -1040,7 +1083,10 @@ const icons = {
 'arrows-rotate': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
 'arrows-rotate-backward': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M2.3 7h3.4c.3 0 .6-.3.6-.6 0-.1-.1-.3-.2-.4l-1-1.1c1.7-1.6 4.4-1.5 6 .2.5.5.8 1.2 1 1.9h2.1c-.5-3.5-3.8-5.8-7.2-5.2-1.3.2-2.4.8-3.4 1.6l-.9-.9c-.2-.2-.6-.2-.8 0-.1.1-.2.3-.2.4v3.4c0 .4.2.7.6.7zm11.4 2h-3.4c-.4 0-.6.3-.6.6 0 .2.1.3.2.4l1.1 1.1c-1.7 1.6-4.4 1.5-6-.2-.6-.5-1-1.2-1.2-1.9H1.7c.6 3.5 3.9 5.8 7.3 5.2 1.3-.2 2.4-.8 3.3-1.7l.9.9c.2.2.6.2.8 0 .1-.1.2-.3.2-.4V9.6c.1-.3-.1-.6-.5-.6z"/></svg>',
 'ban': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
-'bell': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
+'bell': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M3.97 6a4 4 0 0 1 8 0v2.3l1.507.822c.91.496.558 1.878-.478 1.878H3.002c-1.027 0-1.387-1.362-.494-1.87l1.461-.83V6Zm2.027 6a2 2 0 1 0 4 0h-4Z"/></svg>',
+'bell-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" d="M11.47 8.3v.297l.26.142 1.508.822c.455.248.28.939-.239.939H3.002c-.514 0-.694-.681-.247-.935l1.461-.83.253-.144V6a3.5 3.5 0 0 1 7 0v2.3Zm-3.473 5.2a1.5 1.5 0 0 1-1.415-1h2.83a1.5 1.5 0 0 1-1.415 1Z"/></svg>',
+'book': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-2H1.5a.5.5 0 0 1 0-1H3V9H1.5a.5.5 0 0 1 0-1H3V7H1.5a.5.5 0 0 1 0-1H3V3Zm8 0H9v4h2V3Z" clip-rule="evenodd"/></svg>',
+'book-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M4 2a1 1 0 0 0-1 1v3H1.5a.5.5 0 0 0 0 1H3v1H1.5a.5.5 0 0 0 0 1H3v1H1.5a.5.5 0 0 0 0 1H3v2a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4Zm5 1H4v3h.5a.5.5 0 0 1 0 1H4v1h.5a.5.5 0 0 1 0 1H4v1h.5a.5.5 0 0 1 0 1H4v2h8V3h-1v4H9V3Z" clip-rule="evenodd"/></svg>',
 'briefcase': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M14 4.5h-3v-1c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H2c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-7c0-.55-.45-1-1-1Zm-8-1h4v1H6v-1Z"/></svg>',
 'briefcase-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M14 4.5h-3v-1c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H2c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-7c0-.55-.45-1-1-1Zm-8-1h4v1H6v-1Zm8 9H2v-7h12v7Z"/></svg>',
 'building-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M4 2h8v12H9v-1a1 1 0 1 0-2 0v1H4V2Zm4 13h4a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h4ZM7 4H5v2h2V4Zm2 0h2v2H9V4Zm2 4H9v2h2V8ZM5 8h2v2H5V8Z"/></svg>',
@@ -1063,7 +1109,8 @@ const icons = {
 'clock-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m10.95 10.04-.71.71L7.5 8.01v-4h1V7.6l2.45 2.45ZM8 2C4.69 2 2 4.69 2 8s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6m0-1c3.87 0 7 3.13 7 7s-3.13 7-7 7-7-3.13-7-7 3.13-7 7-7Z"/></svg>',
 'code-square-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m6.32 10.28.73-.73L5.5 8l1.53-1.53-.73-.73-2.27 2.27 2.28 2.28Zm3.37 0L11.97 8 9.69 5.72l-.73.73L10.51 8 8.96 9.55l.73.73ZM3.01 14c-.27 0-.5-.1-.7-.3-.2-.2-.3-.43-.3-.7V3c0-.27.1-.5.3-.7.2-.2.43-.3.7-.3h10c.27 0 .5.1.7.3.2.2.3.43.3.7v10c0 .27-.1.5-.3.7-.2.2-.43.3-.7.3H3Zm0-1h10V3H3v10Zm0-10v10V3Z"/></svg>',
 'cog': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
-'comment': '<svg aria-hidden="true" viewBox="0 0 16 16"><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-.3h6.32c.16 0 .29.12.3.28v.83Z"/></svg>',
+'comment': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.5 2A5.5 5.5 0 0 0 4 11.743V14l3.5-1h1a5.5 5.5 0 1 0 0-11h-1ZM5 6h6v1H5V6Zm3 2H5v1h3V8Z" clip-rule="evenodd"/></svg>',
+'comment-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M5 6h6v1H5V6Zm0 2h3v1H5V8Z"/><path fill="currentColor" fill-rule="evenodd" d="m4 14 3.5-1h1a5.5 5.5 0 1 0 0-11h-1A5.5 5.5 0 0 0 4 11.743V14Zm1-2.728-.363-.3A4.5 4.5 0 0 1 7.5 3h1a4.5 4.5 0 1 1 0 9H7.36L5 12.674v-1.402Z" clip-rule="evenodd"/></svg>',
 'comment-sms': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 2.67c-3.37 0-6.1 2.21-6.1 4.95.02 1.18.51 2.3 1.36 3.11-.26.85-.71 1.62-1.3 2.28a.2.2 0 0 0-.04.21c.03.07.1.11.17.11 1.22-.02 2.4-.45 3.34-1.22.82.31 1.68.46 2.56.46 3.37 0 6.1-2.22 6.1-4.95S11.37 2.67 8 2.67M4.95 8.39a.76.76 0 1 1 .76-.76c0 .42-.34.76-.76.76m3.05 0a.76.76 0 1 1 .76-.76c0 .42-.34.76-.76.76m3.05 0a.76.76 0 1 1-.02-1.52c.42 0 .77.33.77.75v.01c0 .42-.34.76-.76.76"/></svg>',
 'conversation': '<svg aria-hidden="true" viewBox="0 0 16 16"><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.6c2.88-.04 5.24-1.75 5.24-3.85Zm3.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 .48c0 2.52-2.7 4.57-6 4.57a7.16 7.16 0 0 1-.8-.05 5.6 5.6 0 0 0 4.8 2.33 6.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"/></svg>',
 'conversation-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M15 8.5c0 .79-.39 1.51-1.01 2.09v1.91a.508.508 0 0 1-.68.47l-2.26-1.05c-.34.05-.69.08-1.05.08-.23 0-.47-.01-.69-.04-.18 0-.35-.03-.52-.07-.02 0-.03 0-.05-.01-.16-.02-.31-.06-.46-.1-.42-.1-.82-.25-1.18-.43l-.42-.24c-.06-.04-.12-.08-.18-.13.58-.03 1.13-.12 1.64-.27.56.19 1.19.29 1.86.29.29 0 .6-.02.91-.07l.29-.04.28.12 1.5.7v-1.12l.01-.43.31-.3c.32-.29.7-.77.7-1.36 0-.91-.82-1.72-2.01-2.15-.01-.39-.09-.77-.23-1.13.06.02.12.04.19.06.25.08.5.17.73.27.11.05.23.11.34.17.11.06.21.12.31.18.11.07.2.13.3.2.48.35.86.78 1.1 1.26a2.288 2.288 0 0 1 .17.45c.03.11.06.22.07.33.02.12.03.24.03.36Z"/><path fill="currentColor" d="M6 4c2.17 0 4 1.14 4 2.5S8.17 9 6 9c-.29 0-.6-.02-.91-.07l-.3-.04-.27.13-1.51.7V8.17l-.32-.3c-.32-.3-.7-.77-.7-1.36 0-1.36 1.83-2.5 4-2.5m0-1c-2.76 0-5 1.57-5 3.5 0 .79.39 1.51 1.01 2.09v1.91c0 .29.24.5.5.5.06 0 .11 0 .17-.03l2.26-1.05c.34.05.69.08 1.05.08 2.76 0 5-1.57 5-3.5s-2.24-3.5-5-3.5Z"/></svg>',
@@ -1074,6 +1121,8 @@ const icons = {
 'dashboard': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M1.67 8.7H7.3V1.67H1.67v7.04Zm0 5.63H7.3v-4.22H1.67v4.22Zm7.04 0h5.63V7.3H8.71v7.04Zm0-12.67v4.23h5.63V1.67H8.71Z"/></svg>',
 'dashboard-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M13.33 2.67v2.22H9.7V2.67h3.63m-7.04 0V7.7H2.67V2.67H6.3m7.04 5.63v5.04H9.71V8.3h3.63M6.3 11.11v2.22H2.67v-2.22H6.3m8.03-9.44H8.7v4.22h5.63V1.67Zm-7.04 0H1.67v7.04H7.3V1.67Zm7.04 5.63H8.7v7.04h5.63V7.3Zm-7.04 2.81H1.67v4.22H7.3v-4.22Z"/></svg>',
 'download': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
+'earth': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm-1.224-2.553-.63 1.261A6.003 6.003 0 0 1 4.501 3.126l1.6.4a1 1 0 0 1 .742 1.14L6.41 7.19a1 1 0 0 1-.986.83H4.47a1 1 0 0 0-.77.362l-.185.223A1 1 0 0 0 3.5 9.862l.273.348a1 1 0 0 0 .59.362l1.658.332a1 1 0 0 1 .699.533l.057.116a1 1 0 0 1 0 .894Zm3.543-9.983V4.53a1 1 0 0 0 1 1h1.234a1 1 0 0 0 .664-.252l.09-.08a6.023 6.023 0 0 0-2.988-2.733Zm3.612 4.622a6.153 6.153 0 0 0-.012-.075h-3.05a1 1 0 0 0-.884.535l-.773 1.469a1 1 0 0 0-.115.465v.964a1 1 0 0 0 .408.806l.353.259a1 1 0 0 1 .408.806v1.242a6.002 6.002 0 0 0 3.665-6.47Z" clip-rule="evenodd"/></svg>',
+'earth-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm0-1a6 6 0 0 0 1.766-.264v-1.421a.5.5 0 0 0-.204-.403l-.353-.26a1.5 1.5 0 0 1-.612-1.208V9.48c0-.243.06-.483.173-.698l.772-1.469a1.5 1.5 0 0 1 1.328-.802h2.944a5.955 5.955 0 0 0-.284-.844 1.5 1.5 0 0 1-.977.362h-1.235a1.5 1.5 0 0 1-1.5-1.5V2.28A5.997 5.997 0 0 0 8 2a5.973 5.973 0 0 0-2.918.756l1.14.286A1.5 1.5 0 0 1 7.336 4.75l-.433 2.525a1.5 1.5 0 0 1-1.479 1.247H4.47a.5.5 0 0 0-.385.18l-.185.223a.5.5 0 0 0-.008.628l.273.348a.5.5 0 0 0 .295.181l1.658.332a1.5 1.5 0 0 1 1.048.8l.058.115a1.5 1.5 0 0 1 0 1.342l-.587 1.174A6.02 6.02 0 0 0 8 14Zm6-6c0-.165-.007-.327-.02-.489h-3.11a.5.5 0 0 0-.443.268l-.772 1.468a.5.5 0 0 0-.058.233v.964a.5.5 0 0 0 .204.403l.353.259a1.5 1.5 0 0 1 .612 1.209v1.01A6 6 0 0 0 14 8Zm-8.402 5.5h.093l.638-1.276a.5.5 0 0 0 0-.448l-.057-.115a.5.5 0 0 0-.35-.267l-1.658-.331a1.5 1.5 0 0 1-.885-.545l-.273-.347a1.5 1.5 0 0 1 .025-1.884l.184-.223a1.5 1.5 0 0 1 1.155-.542h.954a.5.5 0 0 0 .493-.416l.433-2.525a.5.5 0 0 0-.37-.57l-1.95-.487-.046.018A6.002 6.002 0 0 0 5.598 13.5Zm7.287-8.597.164-.146a6.032 6.032 0 0 0-1.458-1.564 6.067 6.067 0 0 0-.772-.457V4.53a.5.5 0 0 0 .5.5h1.234a.5.5 0 0 0 .332-.126Z" clip-rule="evenodd"/></svg>',
 'ellipsis': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M2.5 6.17A1.83 1.83 0 1 0 4.33 8c0-1.01-.82-1.83-1.83-1.83Zm11 0A1.83 1.83 0 1 0 15.33 8c0-1.01-.82-1.83-1.83-1.83Zm-5.5 0A1.83 1.83 0 1 0 9.83 8c0-1.01-.82-1.83-1.83-1.83Z"/></svg>',
 'ellipsis-vertical': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M6.17 13.5A1.83 1.83 0 1 0 8 11.67c-1.01 0-1.83.82-1.83 1.83Zm0-11A1.83 1.83 0 1 0 8 .67c-1.01 0-1.83.82-1.83 1.83Zm0 5.5A1.83 1.83 0 1 0 8 6.17c-1.01 0-1.83.82-1.83 1.83Z"/></svg>',
 'euro': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m12.1 11.02 1.4 1.42a5.948 5.948 0 0 1-4 1.56c-2.64 0-4.86-1.68-5.66-4.04H1.5v-1.5h2.02C3.5 8.3 3.5 8.16 3.5 8c0-.18 0-.36.04-.54H1.5v-1.5h2.38C4.7 3.66 6.9 2 9.5 2c1.54 0 2.94.6 4 1.56l-1.4 1.42c-.7-.6-1.6-.98-2.6-.98-1.46 0-2.74.78-3.44 1.96h3.5v1.5H5.54c-.02.18-.04.36-.04.54 0 .16 0 .32.02.46h4.04v1.5H6.02C6.7 11.18 8.02 12 9.5 12c1 0 1.9-.38 2.6-.98Z"/></svg>',
@@ -1085,11 +1134,14 @@ const icons = {
 'exclamation-triangle-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8.75 6.5V10h-1.5V6.5h1.5Zm0 6V11h-1.5v1.5h1.5Z"/><path fill="currentColor" fill-rule="evenodd" d="M8 2 1 14h14L8 2Zm0 1.985L2.741 13h10.518L8 3.985Z" clip-rule="evenodd"/></svg>',
 'eye': '<svg aria-hidden="true" viewBox="0 0 16 16"><circle cx="8.01" cy="7.96" r="2.44" fill="currentColor"/><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"/></svg>',
 'eye-slash': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M10.25 7a2.43 2.43 0 0 0-2.08-1.46Zm-3.8-.9a2.43 2.43 0 1 0 3.85 2.69Z"/><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"/></svg>',
-'file': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/><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"/></svg>',
+'fax': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6 14h7a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1V2H6v12Zm6-11H7v2h5V3Zm0 4H7v1h5V7ZM7 9h1v1H7V9Zm1 2H7v1h1v-1Zm1-2h1v1H9V9Zm1 2H9v1h1v-1Zm1-2h1v1h-1V9Zm1 2h-1v1h1v-1Z" clip-rule="evenodd"/><path fill="currentColor" d="M3 4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H3Z"/></svg>',
+'fax-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 3H7v2h5V3ZM6 3v2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1V2H6v1Zm6 3h1v7H6V6h6ZM3 5h2v8H3V5Zm9 2H7v1h5V7ZM7 9h1v1H7V9Zm1 2H7v1h1v-1Zm1-2h1v1H9V9Zm1 2H9v1h1v-1Zm1-2h1v1h-1V9Zm1 2h-1v1h1v-1Z" clip-rule="evenodd"/></svg>',
+'file': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M9 1v4h4v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5Z"/><path fill="currentColor" d="M10 1v3h3l-3-3Z"/></svg>',
 'file-cog': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M9 10.1c0 .5-.5.9-1 .9-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1.1c0-.1 0-.1 0 0zm4.2-6.4L10.4.9c-.1-.1-.3-.2-.5-.2h-.1v3.7h3.5v-.2c0-.2-.1-.4-.1-.5zM9.6 5.3h3.8v9.4c0 .4-.3.6-.7.7H3.3c-.4 0-.7-.3-.7-.7V1.3c.1-.3.4-.6.7-.6h5.5v3.9c.1.3.4.6.8.7-.1-.1-.1-.1 0 0zM10 8l-.5.3c-.2-.2-.5-.3-.7-.4v-.6c0-.1 0-.1-.1-.1-.4-.1-.9-.1-1.3 0-.1 0-.1.1-.1.1v.6c-.3.1-.6.2-.8.4L6 8h-.2c-.3.3-.5.7-.6 1.1 0 .1 0 .1.1.2l.5.3c-.1.3-.1.6 0 .8l-.5.3c-.1 0-.1.1-.1.2.1.4.4.8.7 1.1h.2l.5-.3c.1.2.4.3.6.4v.6c0 .1 0 .1.1.1.4.1.9.1 1.3 0 .1 0 .1-.1.1-.1v-.5c.3-.1.6-.2.8-.4l.5.3h.2c.3-.3.5-.7.6-1.1 0-.1 0-.1-.1-.2l-.5-.3v-.8l.5-.3c.1 0 .1-.1.1-.2-.1-.4-.4-.8-.6-1.1-.1-.1-.1-.1-.2-.1z"/></svg>',
 'file-download': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/><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"/></svg>',
 'file-excel': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 5V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5H9Zm-.018 7h1.335L8.776 9.48l1.5-2.48H9.02l-.795 1.485a5.09 5.09 0 0 0-.157.436h-.014a2.59 2.59 0 0 0-.15-.422L7.19 7H5.82l1.457 2.5L5.683 12h1.342l.865-1.614c.06-.156.099-.272.115-.349h.014c.035.163.069.274.101.335L8.982 12Z"/><path fill="currentColor" d="M10 4V1l3 3h-3Z"/></svg>',
 'file-excel-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8.982 12h1.335L8.776 9.48l1.5-2.48H9.02l-.795 1.485a5.09 5.09 0 0 0-.157.436h-.014a2.59 2.59 0 0 0-.15-.422L7.19 7H5.82l1.457 2.5L5.683 12h1.342l.865-1.614c.06-.156.099-.272.115-.349h.014c.035.163.069.274.101.335L8.982 12Z"/><path fill="currentColor" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4l-3-3H4Zm6 3V2.537L11.254 4H10Zm2 1v9H4V2h5v3h3Z"/></svg>',
+'file-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m10 1 3 3v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6Zm0 1.415V4h1.585L10 2.415ZM12 5H9V2H4v12h8V5Z" clip-rule="evenodd"/></svg>',
 'file-pdf': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M6.464 11.274a3.81 3.81 0 0 0-.393.207c-.223.137-.37.27-.444.387-.072.11-.073.19-.03.273a.175.175 0 0 0 .019.034.223.223 0 0 0 .027-.01c.103-.042.268-.177.48-.433.12-.147.234-.3.34-.458Zm1.242-1.007c.252-.06.507-.108.764-.146a8.824 8.824 0 0 1-.386-.65 15.7 15.7 0 0 1-.378.796Zm1.873.363a2.916 2.916 0 0 0 .341.314c.164.123.28.165.344.168a.082.082 0 0 0 .053-.012.232.232 0 0 0 .07-.094.33.33 0 0 0 .045-.152.072.072 0 0 0-.02-.047c-.039-.047-.15-.116-.391-.159a2.926 2.926 0 0 0-.463-.04l.02.022ZM8.051 7.952c.064-.205.114-.414.151-.626a1.73 1.73 0 0 0 .029-.352.464.464 0 0 0-.024-.15.391.391 0 0 0-.11.03c-.066.027-.12.08-.148.215a.744.744 0 0 0-.01.057c-.018.142-.006.331.044.565.018.084.041.171.068.26Z"/><path fill="currentColor" fill-rule="evenodd" d="M9 1v4h4v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5ZM5.42 12.713a.613.613 0 0 1-.332-.318c-.147-.294-.098-.588.06-.834.15-.233.4-.43.68-.596a5.816 5.816 0 0 1 1.122-.489c.303-.544.571-1.107.804-1.686a5.554 5.554 0 0 1-.326-.98c-.065-.303-.09-.603-.034-.86.056-.268.207-.509.492-.623l.055-.02a.75.75 0 0 1 .4-.038.53.53 0 0 1 .362.276c.066.124.09.27.096.407.005.142-.01.3-.036.465-.063.386-.204.859-.394 1.358.21.447.458.874.742 1.277a4.457 4.457 0 0 1 1.01.038c.276.049.556.147.727.352a.64.64 0 0 1 .151.392.88.88 0 0 1-.104.426.788.788 0 0 1-.312.341.647.647 0 0 1-.342.078c-.25-.01-.495-.148-.706-.315a4.327 4.327 0 0 1-.69-.72 8.812 8.812 0 0 0-1.512.308 8.57 8.57 0 0 1-.773 1.143c-.22.265-.46.496-.701.596a.6.6 0 0 1-.44.022Z"/><path fill="currentColor" d="M10 1v3h3l-3-3Z"/></svg>',
 'file-pdf-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M5.42 12.713a.613.613 0 0 1-.332-.318c-.147-.294-.098-.588.06-.834.15-.233.4-.43.68-.596a5.816 5.816 0 0 1 1.122-.489c.303-.544.571-1.107.804-1.686a5.503 5.503 0 0 1-.326-.98c-.065-.303-.09-.603-.034-.86.056-.268.207-.509.492-.623.145-.058.303-.09.455-.058a.53.53 0 0 1 .362.276c.066.124.09.27.096.407.005.142-.01.3-.036.465-.063.386-.204.859-.394 1.358.21.447.458.874.742 1.277a4.354 4.354 0 0 1 1.01.038c.276.049.556.147.727.352a.64.64 0 0 1 .151.392.88.88 0 0 1-.104.426.788.788 0 0 1-.268.315.648.648 0 0 1-.386.104c-.25-.01-.495-.148-.706-.315a4.324 4.324 0 0 1-.69-.72 8.812 8.812 0 0 0-1.512.308 8.57 8.57 0 0 1-.773 1.143c-.22.265-.46.496-.701.596a.6.6 0 0 1-.44.022Zm1.044-1.44a3.81 3.81 0 0 0-.348.18c-.248.148-.41.29-.49.415-.07.11-.072.19-.03.273a.175.175 0 0 0 .02.034.223.223 0 0 0 .027-.01c.103-.042.268-.177.48-.433.12-.147.234-.3.34-.458Zm1.242-1.006c.252-.06.507-.108.764-.146a8.824 8.824 0 0 1-.386-.65 15.7 15.7 0 0 1-.378.796Zm2.18.65a2.971 2.971 0 0 1-.328-.309c.155.001.31.015.463.04.24.043.352.112.392.159a.07.07 0 0 1 .02.047.33.33 0 0 1-.045.152.232.232 0 0 1-.071.094.082.082 0 0 1-.053.012c-.07-.003-.196-.05-.377-.194Zm-1.684-3.59c-.037.21-.087.42-.15.625a3.355 3.355 0 0 1-.069-.26c-.057-.268-.065-.478-.034-.623.028-.134.082-.188.148-.214a.391.391 0 0 1 .11-.03.464.464 0 0 1 .024.15c.004.092-.005.209-.029.351Z"/><path fill="currentColor" d="M3 2a1 1 0 0 1 1-1h6l3 3v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2Zm7 .537V4h1.254L10 2.537ZM12 14V5H9V2H4v12h8Z"/></svg>',
 'file-text': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
@@ -1099,12 +1151,18 @@ const icons = {
 'file-word-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m5 7 1.091 5h1.002L8 8.262 8.91 12h.98L11 7h-.93l-.701 3.492L8.568 7H7.47l-.836 3.434L5.944 7H5Z"/><path fill="currentColor" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4l-3-3H4Zm6 3V2.537L11.254 4H10Zm2 1v9H4V2h5v3h3Z"/></svg>',
 'filter': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
 'floppy-disk': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
-'folder': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
+'folder': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M7 4h7c.55 0 1 .45 1 1v7c0 .55-.45 1-1 1H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h4l1 1Z"/></svg>',
+'folder-check': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M14 4H7L6 3H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1ZM5.705 8.185 7 9.48l3.295-3.295.705.705-4 4-2-2 .705-.705Z" clip-rule="evenodd"/></svg>',
+'folder-check-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7 4.001 6 3H2c-.55 0-1 .45-1 1.001v7.998C1 12.549 1.45 13 2 13h12c.55 0 1-.45 1-1.001V5.002c0-.55-.45-1.001-1-1.001H7Zm-5 0h3.59l1 1.001H14v7.007H2V4.001Z" clip-rule="evenodd"/><path fill="currentColor" d="M7 9.48 5.705 8.185 5 8.89l2 2 4-4-.705-.705L7 9.48Z"/></svg>',
 'folder-lines': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M14 4H7L6 3H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1Zm-5 6H4V9h5v1Zm3-2H4V7h8v1Z"/></svg>',
 'folder-lines-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12 8H4V7h8v1ZM9 9H4v1h5V9ZM5.59 4H2v8h12V5H6.59l-.29-.29L5.59 4M6 3l1 1h7c.55 0 1 .45 1 1v6.99c0 .55-.45 1-1 1H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h4Z"/></svg>',
 'folder-link': '<svg aria-hidden="true" viewBox="0 0 16 16"><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-.44.49-.7.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.41v.01c0 1.33-1.09 2.41-2.42 2.42Z"/></svg>',
-'folder-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m6.22 3.67 1.55 1.49.29.28h5.93c.19 0 .34.16.34.34v6.21c0 .18-.15.34-.33.34H2.01c-.18 0-.34-.15-.34-.33V4.01c0-.18.15-.34.33-.34h4.22m.4-1H2C1.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.34H8.46L6.62 2.67Z"/></svg>',
+'folder-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7 4.001 6 3H2c-.55 0-1 .45-1 1.001v7.998C1 12.549 1.45 13 2 13h12c.55 0 1-.45 1-1.001V5.002c0-.55-.45-1.001-1-1.001H7Zm-5 0h3.59l1 1.001H14v7.007H2V4.001Z" clip-rule="evenodd"/></svg>',
 'folder-star': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
+'folders': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M13 3H9L8 2H6c-.55 0-1 .45-1 1v2h.414l1 1H10a2 2 0 0 1 2 2v2h1c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1Z"/><path fill="currentColor" d="M11 8a1 1 0 0 0-1-1H6L5 6H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V8Z"/></svg>',
+'folders-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6 7 5 6H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V8c0-.55-.45-1-1-1H6ZM3 7h1.59l1 1H10v5.01H3V7Z" clip-rule="evenodd"/><path fill="currentColor" d="m8 2 1 1h4c.55 0 1 .45 1 1v5c0 .55-.45 1-1 1h-1v-.99h1V4H8.59l-1-1H6v2H5V3c0-.55.45-1 1-1h2Z"/></svg>',
+'gavel': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M5.908 5.012a.59.59 0 0 0 .59 1.02l.138-.08.59 1.02-5.892 3.402a.59.59 0 0 0 .589 1.02l5.892-3.4.589 1.02-.14.08a.59.59 0 0 0 .59 1.02l3.31-1.91a.59.59 0 0 0-.59-1.02l-.139.08-1.768-3.062.14-.08a.59.59 0 1 0-.59-1.02l-3.31 1.91Zm3.631 7.01a.5.5 0 1 0 0 1h5a.5.5 0 0 0 0-1h-5Z"/></svg>',
+'gavel-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.869 4.99a.59.59 0 0 0 .59 1.02l.138-.08.59 1.02-5.892 3.402a.59.59 0 1 0 .589 1.02l5.892-3.4.59 1.02-.14.08a.59.59 0 0 0 .589 1.02l3.31-1.91a.59.59 0 0 0-.59-1.02l-.139.08L9.628 4.18l.14-.08a.59.59 0 0 0-.59-1.021l-3.31 1.91Zm1.594.44 1.3-.75 1.767 3.062-1.299.75L7.463 5.43Z" clip-rule="evenodd"/><path fill="currentColor" d="M9.5 12a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5Z"/></svg>',
 'graduation-cap': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
 'hand-up': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12.75 3.5c-.41 0-.75.34-.75.75v3.5c0 .14-.11.25-.25.25s-.25-.11-.25-.25v-4c0-.41-.34-.75-.75-.75s-.75.34-.75.75v4c0 .14-.11.25-.25.25s-.25-.11-.25-.25v-5c0-.41-.34-.75-.75-.75S8 2.34 8 2.75v5c0 .14-.11.25-.25.25s-.25-.11-.25-.25v-4c0-.41-.34-.75-.75-.75S6 3.34 6 3.75V11L3.97 9.54c-.34-.34-.88-.34-1.21 0s-.34.88 0 1.21l2.22 2.22c.66.66 1.55 1.03 2.47 1.03H11a2.5 2.5 0 0 0 2.5-2.5V4.25c0-.41-.34-.75-.75-.75Z"/></svg>',
 'history': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1.67a6.37 6.37 0 0 0-4.4 1.75l-.91-.91a.6.6 0 0 0-.85 0 .58.58 0 0 0-.18.43v3.43a.61.61 0 0 0 .58.63h3.44a.62.62 0 0 0 .62-.62.69.69 0 0 0-.18-.38L5.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 .42A6.33 6.33 0 1 0 8 1.67Z"/><path fill="currentColor" d="m9.85 9.3-.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.3v2.43l1.3 1.3a.31.31 0 0 1 0 .42Z"/></svg>',
@@ -1112,6 +1170,8 @@ const icons = {
 'home-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m13.55 5.5-5-3.33C8.38 2.06 8.19 2 7.99 2s-.39.06-.56.17L2.45 5.5c-.28.19-.45.5-.45.83v6.66c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V6.33c0-.33-.17-.65-.45-.83Zm-.56 7.5h-4v-1c0-.55-.45-1-1-1s-1 .45-1 1v1H3V6.33L8 3l5 3.33V13Z"/></svg>',
 'info-circle': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-7.75 4V7h1.5v5h-1.5Zm0-8v1.5h1.5V4h-1.5Z" clip-rule="evenodd"/></svg>',
 'info-circle-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M7.25 12V7h1.5v5h-1.5Zm0-8v1.5h1.5V4h-1.5Z"/><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm6-7A6 6 0 1 0 2 8a6 6 0 0 0 12 0Z" clip-rule="evenodd"/></svg>',
+'interrogation-circle': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15.039 8.146a7 7 0 1 1-14 0 7 7 0 0 1 14 0Zm-6.974-.5a1 1 0 1 0-.942-1.335l-1.43-.458A2.501 2.501 0 1 1 8.79 9.04v.607h-1.5v-2h.776Zm-.026 3a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z" clip-rule="evenodd"/></svg>',
+'interrogation-circle-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M7.824 7.646a1 1 0 1 0-.943-1.335l-1.429-.458A2.501 2.501 0 1 1 8.548 9.04v.607h-1.5v-2h.776Zm-.776 3.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z"/><path fill="currentColor" fill-rule="evenodd" d="M14.797 8.146a7 7 0 1 1-14 0 7 7 0 0 1 14 0Zm-1 0a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z" clip-rule="evenodd"/></svg>',
 'key': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
 'laptop': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
 'life-ring': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
@@ -1123,17 +1183,21 @@ const icons = {
 'lock': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
 'log-in': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m10.97 7.78-4-4a.29.29 0 0 0-.42 0c-.07.06-.12.15-.13.24v2.07c0 .17-.13.3-.3.32H1.97c-.16 0-.29.12-.3.28v2.58c0 .16.12.29.28.3h4.16c.17 0 .3.14.3.31v2.14c0 .16.12.29.28.3.11.01.21-.03.28-.11l4-4c.11-.12.11-.3 0-.42Zm3.37 5.26v1c0 .16-.13.28-.28.28H9.29a.28.28 0 0 1-.28-.28v-1c0-.16.13-.28.28-.28h3.43V3.3H9.3a.29.29 0 0 1-.29-.29V1.97c0-.16.13-.29.29-.29h4.76c.16 0 .29.13.29.29v11.07Z"/></svg>',
 'log-out': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m14.25 7.77-4-4a.31.31 0 0 0-.43 0A.34.34 0 0 0 9.7 4v2.07a.32.32 0 0 1-.3.32H5.23a.3.3 0 0 0-.3.3v2.56a.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 .02-.44Z"/><path fill="currentColor" d="M6.71 12.72H3.27V3.26h3.42A.31.31 0 0 0 7 3V2a.3.3 0 0 0-.31-.3H2a.29.29 0 0 0-.33.3v12a.27.27 0 0 0 .1.24.32.32 0 0 0 .14.08h4.8A.3.3 0 0 0 7 14v-1a.3.3 0 0 0-.29-.28Z"/></svg>',
-'magnifying-glass': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
-'mail': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
+'magnifying-glass': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 7a5 5 0 1 1 8.871 3.164L14 13.292l-.707.707-3.128-3.128A5 5 0 0 1 2 7Zm5 4a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z" clip-rule="evenodd"/></svg>',
+'mail': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M1.007 4.003v8.01a1 1 0 0 0 1 1h11.997a1 1 0 0 0 1-1V4l-7 5-6.997-4.997Z"/><path fill="currentColor" d="m1.52 3.14 6.484 4.63 6.485-4.632a.996.996 0 0 0-.486-.126H2.008a.996.996 0 0 0-.487.127Z"/></svg>',
+'mail-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 3.999V12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3.999A.999.999 0 0 0 14.001 3H2a.999.999 0 0 0-1 .999Zm13 .713-6 4.28-6-4.28V12h12V4.712ZM2.724 4 8 7.764 13.276 4H2.724Z" clip-rule="evenodd"/></svg>',
+'messages-square': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 10v1.017a1 1 0 0 1-1.006 1L8 12l-4 2v-1.978H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-1Zm1-6H5v1h6a1 1 0 0 1 1 1v3h1V4Zm-3 3H4v1h6V7ZM4 9h3v1H4V9Z" clip-rule="evenodd"/></svg>',
+'messages-square-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M4 7h6v1H4V7Zm0 2h3v1H4V9Z"/><path fill="currentColor" fill-rule="evenodd" d="M12 11.017V10h1a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v1H3a1 1 0 0 0-1 1v5.022a1 1 0 0 0 1 1h1V14l4-2 2.994.017a1 1 0 0 0 1.006-1ZM5 4h8v5h-1V6a1 1 0 0 0-1-1H5V4Zm0 8.382 2.767-1.383 3.233.018V6H3v5.022h2v1.36Z" clip-rule="evenodd"/></svg>',
 'notes': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12.6 2.76v-.43c0-.75-.53-1.28-1.28-1.28H2.33c-.75 0-1.28.53-1.28 1.28v8.99c0 .75.53 1.28 1.28 1.28h.39V4.05c0-.75.53-1.28 1.28-1.28h8.6Z"/><path fill="currentColor" d="M13.67 3.4H4.68c-.75 0-1.28.53-1.28 1.28v8.99c0 .75.53 1.28 1.28 1.28h6.42V11.1h3.85V4.68c0-.75-.53-1.28-1.28-1.28Zm-4.49 7.06H5.97V9.18h3.21v1.28Zm3.21-2.57H5.97V6.61h6.42v1.28Z"/><path fill="currentColor" d="m11.74 14.42 2.68-2.68h-2.68v2.68z"/></svg>',
 'notes-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
 'paper-plane': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
 'paper-plane-slash': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m2.67 1.69 11.59 11.59-1 1-2.79-2.8-1.1 2.67a.3.3 0 0 1-.13.12.28.28 0 0 1-.37-.12l-2.12-3.41a.52.52 0 0 1 0-.63L7.82 8.9l-.76-.76-1.3 1.13a.57.57 0 0 1-.61.06L1.88 7.51a.29.29 0 0 1-.16-.15.28.28 0 0 1 .15-.36l2.81-1.24-3-3Zm11.53 0a.28.28 0 0 0-.22 0L7.53 4.51l1.73 1.73 3-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-.37Z"/></svg>',
-'pen': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M1.67 11.69v2.64h2.64l7.78-7.78-2.64-2.64-7.78 7.78Zm12.46-7.18c.27-.28.27-.72 0-1l-1.65-1.64a.719.719 0 0 0-1 0L10.2 3.16l2.64 2.64 1.29-1.29Z"/></svg>',
+'pen': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12.295 2.293a1 1 0 0 0-1.414 0L9.467 3.707l2.828 2.829 1.414-1.415a1 1 0 0 0 0-1.414l-1.414-1.414ZM8.756 4.417l2.829 2.829-6.757 6.756L2.003 14 2 11.174l6.756-6.757Z"/></svg>',
 'pen-circle': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 .44C3.82.44.44 3.82.44 8S3.83 15.56 8 15.56s7.56-3.39 7.56-7.56C15.56 3.82 12.18.44 8 .44M5.47 12.19H3.62v-1.85l5.46-5.45 1.85 1.86-5.45 5.45Zm6.88-6.89-.9.9-1.86-1.85.9-.9c.19-.19.51-.19.7 0l1.16 1.15c.19.19.19.51 0 .7"/></svg>',
 'pen-fancy': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M3.63 8.65c-.24.07-.43.26-.5.5l-1.46 4.37.11.12 2.3-2.3v-.19c0-.44.35-.8.79-.81.44 0 .8.35.81.79 0 .44-.35.8-.79.81h-.21l-2.3 2.3.12.11 4.37-1.46c.24-.07.43-.26.5-.5l.82-2.08L5.7 7.83l-2.07.82Zm7.17-6.3L6.27 7.28 8.69 9.7l4.94-4.52c2.1-1.86-.99-4.92-2.83-2.83Z"/></svg>',
 'pen-fancy-files-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12 2H6v10h6V8.946l.023-.058.085-.078.892-.813V12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v.112a2.298 2.298 0 0 0-.974.66L12 2.8V2Zm1 4.643-1 .913-.566.515-1.528-1.524L12 4.275l.767-.832c.075-.085.153-.156.233-.215 1.167-.857 2.796.9 1.555 1.997L13 6.643ZM4 3H3v11.5a.5.5 0 0 0 .5.5H11v-1H4V3Zm4.238 4.41a.466.466 0 0 0-.316.315L7 10.477l.07.076 1.452-1.449v-.12a.51.51 0 0 1 .5-.51.51.51 0 0 1 .511.498.51.51 0 0 1-.499.51h-.133L7.45 10.931l.075.069 2.76-.92a.466.466 0 0 0 .317-.314l.518-1.31-1.573-1.562-1.308.516Z"/></svg>',
 'pen-fancy-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12.24 1.67c-.49 0-1 .21-1.44.7L6.27 7.3l2.42 2.42 4.94-4.52c1.6-1.42.19-3.53-1.39-3.53ZM8.72 8.34 7.66 7.28l3.9-4.24c.22-.24.44-.36.69-.36.41 0 .87.34 1.03.78.14.37.04.7-.32 1.02L8.73 8.36ZM5.7 7.86l-2.08.82c-.24.08-.42.26-.5.5l-1.46 4.37.12.12.56.56.12.12 4.37-1.46c.24-.08.42-.26.5-.5l.81-2.08L5.7 7.87Zm-2.57 4.46L4 9.72c.03-.08.09-.15.17-.18l1.29-.51 1.52 1.52-.5 1.29c-.03.08-.1.15-.19.18l-2.6.87.95-.95c.06.02.12.04.19.04.44 0 .79-.35.79-.79s-.35-.79-.79-.79-.79.35-.79.79c0 .07.02.13.04.19l-.95.95Z"/></svg>',
+'pen-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12.295 2.293a1 1 0 0 0-1.414 0L9.467 3.707l2.828 2.829 1.414-1.415a1 1 0 0 0 0-1.414l-1.414-1.414Z"/><path fill="currentColor" fill-rule="evenodd" d="m2.003 13.999 2.825.003 6.757-6.756-2.829-2.829L2 11.174l.003 2.825ZM3 11.587l5.756-5.755 1.414 1.414-5.755 5.756L3.002 13 3 11.587Z" clip-rule="evenodd"/></svg>',
 'phone': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M13.97 10.62 11.2 9.43a.6.6 0 0 0-.69.17l-1.23 1.5A9.137 9.137 0 0 1 4.9 6.72l1.5-1.23c.21-.17.28-.45.17-.69L5.38 2.03a.589.589 0 0 0-.68-.34l-2.57.59a.59.59 0 0 0-.46.58c0 6.34 5.14 11.48 11.48 11.48.28 0 .52-.19.58-.46l.59-2.57a.595.595 0 0 0-.35-.68Z"/></svg>',
 'picture': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
 'play-circle': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
@@ -1144,13 +1208,15 @@ const icons = {
 'shuffle': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
 'sitemap': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
 'squares': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
-'table': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
+'table': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 13a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v10Zm1-3v3h3v-3H3Zm4 0v3h6v-3H7Zm6-1H7V6h6v3ZM6 9H3V6h3v3ZM3 5V3h10v2H3Z" clip-rule="evenodd"/></svg>',
 'tag': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
 'tags': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/><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"/></svg>',
-'thumb-up': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
+'thumb-up': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M11.202 4.069a1.506 1.506 0 0 0-2.438-1.651L5.5 5.542v8.46h4.922c1.081 0 2.058-.714 2.484-1.817l.944-3.394c.51-1.32-.362-2.788-1.656-2.788h-1.772l.78-1.934ZM4.5 6.003H2v8h2.5v-8Z"/></svg>',
+'thumb-up-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m11.204 4.069-.78 1.934h1.772c1.294 0 2.166 1.468 1.656 2.788l-.944 3.394c-.425 1.103-1.402 1.818-2.483 1.818H5V14H2V6h3.023l3.744-3.582a1.506 1.506 0 0 1 2.437 1.65Zm.755 7.797c-.302.738-.926 1.137-1.534 1.137H6.002L6.02 6.43l3.439-3.29a.506.506 0 0 1 .819.554L8.943 7.003h3.253c.24 0 .48.13.645.41.167.28.218.657.079 1.018l-.018.045-.943 3.39ZM3 7h2v6H3V7Z" clip-rule="evenodd"/></svg>',
 'thumbtack': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m8.91 2-1.2 3.594L2.364 7.09 5.274 10l-.707.706-1.687 1.687-.264.264-.09.09-.209.498L2 14l.755-.317.498-.21.09-.089.264-.264 1.687-1.687.706-.706 2.91 2.908 1.496-5.347L14 7.09 8.91 2Z"/></svg>',
 'thumbtack-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m5.273 10-2.91 2.91L2 14l1.09-.364L6 10.727l2.91 2.91 1.496-5.348L14 7.09 8.91 2l-1.2 3.594L2.364 7.09 5.273 10Zm3.241-3.563-4.18 1.17 4.059 4.059 1.17-4.18 2.533-.845-2.737-2.737-.845 2.533Z"/></svg>',
-'trash': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/><path fill="currentColor" d="M13 2h-2.9l-.2-.4c-.1-.2-.3-.4-.5-.4H6.6c-.2 0-.4.1-.5.3l-.3.5H2.9c-.2 0-.4.2-.4.4v.8c0 .2.2.4.4.4H13c.2 0 .4-.2.4-.4v-.8c0-.2-.2-.4-.4-.4z"/></svg>',
+'trash': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M11 2v1h3v1h-1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4H2V3h3V2a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1ZM6 3V2h4v1H6Zm1 3H6v6h1V6Zm2 0h1v6H9V6Z" clip-rule="evenodd"/></svg>',
+'trash-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M7 6H6v6h1V6Zm2 0h1v6H9V6Z"/><path fill="currentColor" fill-rule="evenodd" d="M11 3V2a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v1H2v1h1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4h1V3h-3ZM6 2v1h4V2H6Zm6 2v10H4V4h8Z" clip-rule="evenodd"/></svg>',
 'universal-access': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
 'unlink': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
 'unlock': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>',
@@ -1164,8 +1230,10 @@ const icons = {
 'user-plus': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M14 3.33h-1.35V2a.36.36 0 0 0-.35-.33h-.65a.36.36 0 0 0-.35.33v1.33H10a.34.34 0 0 0-.33.34v.66a.34.34 0 0 0 .33.34h1.3V6a.37.37 0 0 0 .35.33h.65a.37.37 0 0 0 .35-.33V4.67H14a.34.34 0 0 0 .32-.34v-.66a.34.34 0 0 0-.32-.34ZM9.28 9.77h-.2a5.19 5.19 0 0 1-3.91 0H5a3 3 0 0 0-3.3 2.69v.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-3.24-2.75h-.09ZM7.13 3.7A2.64 2.64 0 1 1 4.5 6.34 2.64 2.64 0 0 1 7.13 3.7Z"/></svg>',
 'user-question-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M5.23 11.14c.86-.66 1.01-1.9.35-2.75s-1.9-1.01-2.75-.35a1.96 1.96 0 0 0 0 3.1c-.72.42-1.16 1.2-1.16 2.03v.8c0 .2.17.37.37.37h3.98c.2 0 .37-.17.37-.37v-.8c0-.83-.44-1.61-1.16-2.03ZM2.81 9.59c0-.67.55-1.22 1.22-1.22s1.22.55 1.22 1.22-.55 1.22-1.22 1.22-1.22-.55-1.22-1.22Zm2.83 4H2.41v-.42c0-.89.72-1.62 1.62-1.62s1.62.72 1.62 1.62v.42h-.01Zm7.13-11.93H8c-.86 0-1.56.7-1.56 1.56v7.16c0 .21.17.37.37.37.08 0 .16-.03.22-.07l1.49-1.12h4.25c.86 0 1.56-.7 1.56-1.56V3.22c0-.86-.7-1.56-1.56-1.56Zm.82 6.33c0 .45-.37.82-.82.82H8.4a.41.41 0 0 0-.22.07l-1 .75V3.22c0-.45.37-.82.82-.82h4.77c.45 0 .82.37.82.82v4.77Zm-2.8-.42c0 .23-.18.41-.41.41s-.41-.18-.41-.41.18-.41.41-.41c.23 0 .41.18.41.41Zm-.41-4.34c-.83 0-1.5.67-1.5 1.5 0 .23.18.41.41.41s.41-.18.41-.41c0-.38.31-.68.69-.68.38 0 .68.31.68.69 0 .38-.31.68-.68.68-.23 0-.41.18-.41.41v.44c0 .23.18.41.41.41s.41-.18.41-.41v-.09c.8-.23 1.26-1.06 1.04-1.85-.18-.65-.77-1.09-1.44-1.09Z"/></svg>',
 'user-shield-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 8.92c-1.5 0-2.72-1.22-2.72-2.72S6.5 3.48 8 3.48s2.72 1.22 2.72 2.72S9.5 8.92 8 8.92Zm0-4.64a1.92 1.92 0 1 0 .001 3.841A1.92 1.92 0 0 0 8 4.28Zm4.97-1.84L8.56.78C8.2.65 7.81.65 7.45.78L3.03 2.43C2.41 2.66 2 3.26 2 3.92V8c0 3.82 4.23 6.47 5.52 7.2.15.08.31.13.48.13s.33-.04.48-.13C9.78 14.48 14 11.82 14 8V3.92c0-.66-.41-1.25-1.03-1.48ZM8.08 14.5c-.05.03-.12.03-.17 0-.49-.28-2.12-1.24-3.4-2.68.62-.82 1.94-1.39 3.47-1.39s2.84.61 3.49 1.4c-1.29 1.43-2.9 2.39-3.39 2.67ZM13.19 8c0 1.2-.51 2.28-1.22 3.22-.83-.91-2.34-1.59-4-1.59s-3.16.64-3.98 1.58c-.7-.93-1.2-2.01-1.2-3.2V3.93c0-.33.21-.62.51-.74l4.43-1.66c.09-.03.18-.05.27-.05s.19.02.27.05l4.42 1.66c.3.11.51.41.51.73V8Z"/></svg>',
-'users': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12 8.76h-.2a5.24 5.24 0 0 1-3.93 0h-.26a3.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.76h1.89a3.58 3.58 0 0 1 2.16-2.61Zm4.21-5.78a2.65 2.65 0 1 1-2.65 2.65 2.65 2.65 0 0 1 2.65-2.65Zm-6.5 1.52A1.51 1.51 0 1 1 1.8 5.69a1.51 1.51 0 0 1 1.51-1.51Z"/></svg>',
-'wallet': '<svg aria-hidden="true" viewBox="0 0 16 16"><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"/></svg>'
+'users': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M7.25 3.335a2.5 2.5 0 1 0 0 4.33A3.485 3.485 0 0 1 6.5 5.5c0-.818.28-1.57.75-2.165ZM10 3a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Zm-5 9.2A3.2 3.2 0 0 1 8.2 9h3.6a3.2 3.2 0 0 1 3.2 3.2.8.8 0 0 1-.8.8H5.8a.8.8 0 0 1-.8-.8ZM5.48 9H4.2A3.2 3.2 0 0 0 1 12.2a.8.8 0 0 0 .8.8h2.387A1.793 1.793 0 0 1 4 12.2 4.19 4.19 0 0 1 5.48 9Z"/></svg>',
+'users-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 3a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM8.5 5.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0Z" clip-rule="evenodd"/><path fill="currentColor" d="M5.48 9H4.2A3.2 3.2 0 0 0 1 12.2a.8.8 0 0 0 .8.8h2.387A1.793 1.793 0 0 1 4 12.2c0-.067.002-.134.005-.2H2.009A2.2 2.2 0 0 1 4.2 10h.422c.232-.377.522-.714.858-1Z"/><path fill="currentColor" fill-rule="evenodd" d="M5 12.2A3.2 3.2 0 0 1 8.2 9h3.6a3.2 3.2 0 0 1 3.2 3.2.8.8 0 0 1-.8.8H5.8a.8.8 0 0 1-.8-.8Zm6.8-2.2a2.2 2.2 0 0 1 2.191 2H6.009A2.2 2.2 0 0 1 8.2 10h3.6Z" clip-rule="evenodd"/><path fill="currentColor" d="M7.25 3.335a2.5 2.5 0 1 0 0 4.33 3.496 3.496 0 0 1-.5-.865 1.5 1.5 0 1 1 0-2.6c.125-.313.294-.604.5-.865Z"/></svg>',
+'wallet': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 4a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4Zm1 0h11v1H2V4Zm9 5a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z" clip-rule="evenodd"/></svg>',
+'wallet-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"/><path fill="currentColor" fill-rule="evenodd" d="M1 12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1V4a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8Zm12-8H2v1h11V4ZM2 6h12v6H2V6Z" clip-rule="evenodd"/></svg>'
   };
 
 const mgIconCss = ".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}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}:host{display:inline-flex;vertical-align:middle}.mg-icon{color:currentColor}.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=small][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon),.mg-icon.mg-icon--size-small[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon){padding:calc(var(--mg-icon-small-size) / 2)}.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=regular][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon),.mg-icon.mg-icon--size-regular[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon){padding:calc(var(--mg-icon-regular-size) / 2)}.mg-icon[size=medium],.mg-icon.mg-icon--size-medium{width:var(--mg-icon-medium-size);height:var(--mg-icon-medium-size)}.mg-icon[size=medium][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon),.mg-icon.mg-icon--size-medium[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon){padding:calc(var(--mg-icon-medium-size) / 2)}.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=large][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon),.mg-icon.mg-icon--size-large[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon){padding:calc(var(--mg-icon-large-size) / 2)}.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[size=extra-large][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon),.mg-icon.mg-icon--size-extra-large[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon){padding:calc(var(--mg-icon-extra-large-size) / 2)}.mg-icon.mg-icon--variant-success.mg-icon--variant-style-icon{color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-icon.mg-icon--variant-warning.mg-icon--variant-style-icon{color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l))}.mg-icon.mg-icon--variant-danger.mg-icon--variant-style-icon{color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-icon.mg-icon--variant-info.mg-icon--variant-style-icon{color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-icon.mg-icon--variant-app.mg-icon--variant-style-icon{color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l))}.mg-icon.mg-icon--variant-success.mg-icon--variant-style-background{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-warning.mg-icon--variant-style-background{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-danger.mg-icon--variant-style-background{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-info.mg-icon--variant-style-background{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-app.mg-icon--variant-style-background{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-success.mg-icon--variant-style-full{color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-warning.mg-icon--variant-style-full{color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-danger.mg-icon--variant-style-full{color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-info.mg-icon--variant-style-full{color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-app.mg-icon--variant-style-full{color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l));background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-icon[class*=mg-icon--variant-]{border-radius:var(--mg-icon-border-radius)}.mg-icon--spin{animation-name:rotate;animation-duration:0.75s;animation-iteration-count:infinite}@keyframes rotate{to{transform:rotate(360deg)}}";
@@ -1493,7 +1561,7 @@ index.h("ul", { class: {
   index.h("input", { type: "checkbox", id: input.id, name: props.name, value: input.value && input.value.toString(), checked: Boolean(input.value), required: input.required, disabled: props.readonly || props.disabled || input.disabled, indeterminate: input.value === null, onInput: input.handleInput, onBlur: input.handleBlur, onKeyDown: input.handleKeydown }),
   index.h("label", { htmlFor: input.id }, input.title))))));
 
-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-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__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle,.mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong{opacity:var(--mg-disabled-opacity)}.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__input mg-icon,.mg-input__error mg-icon{display:flex}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}.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}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi{display:flex;flex-wrap:wrap;gap:calc(var(--mg-inputs-spacer) * 1.2)}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi--with-values.mg-input__input-checkbox-multi{gap:0.4rem}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-values-container{display:flex;flex-wrap:wrap;gap:calc(0.4rem * 1);flex-direction:row;margin:0;padding:0;list-style:none}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-value{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;min-height:var(--default-size);min-width:var(--default-size);padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;background-color:hsl(var(--mg-color-dark-5-hsl));border-radius:0.3rem;font-size:var(--font-size)}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-no-result{text-align:center}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-text,.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-title{display:inline;margin:0;color:hsl(var(--mg-color-dark-40-hsl))}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-title{margin:0 1.1rem}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-sections{display:flex;flex-wrap:wrap;gap:calc(0.4rem * 1);flex-direction:column}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-sections-container{display:flex;flex-wrap:nowrap;gap:calc(0.4rem * 0);flex-direction:column;max-height:80vh;padding-right:1rem;overflow-y:auto}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-section-header{display:flex;flex-wrap:wrap;gap:calc(0.4rem * 2);flex-direction:row;align-items:center;min-height:var(--default-size)}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-inputs{margin:0;padding:0.4rem calc(0.4rem * 2) 0.4rem calc(0.4rem / 2)}.mg-input.mg-input--checkbox-multi:not(.mg-input--label-on-top) mg-tooltip{margin-left:var(--mg-inputs-spacer)}.mg-input.mg-input--checkbox-multi mg-popover{--mg-popover-min-width:7rem;--mg-card-padding:calc(0.4rem * 2)}.mg-input.mg-input--checkbox-multi mg-popover [slot=content]{display:flex;flex-wrap:wrap;gap:calc(0.4rem * 2);flex-direction:column}.mg-input.mg-input--checkbox-multi mg-popover [slot=content] .mg-input__input-group{margin-left:calc(0.4rem * 2)}.mg-input.mg-input--checkbox-multi mg-input-text{--mg-inputs-margin-bottom:0}";
+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-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__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle,.mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong{opacity:var(--mg-disabled-opacity)}.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__input mg-icon,.mg-input__error mg-icon{display:flex}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}.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}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi{display:flex;flex-wrap:wrap;gap:calc(var(--mg-inputs-spacer) * 1.2)}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi--with-values.mg-input__input-checkbox-multi{gap:0.4rem}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-values-container{display:flex;flex-wrap:wrap;gap:calc(0.4rem * 1);flex-direction:row;margin:0;padding:0;list-style:none}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-value{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;min-height:var(--default-size);min-width:var(--default-size);padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;background-color:hsl(var(--mg-color-dark-5-hsl));border-radius:0.3rem;font-size:var(--font-size)}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-no-result{text-align:center}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-text,.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-title{display:inline;margin:0;color:hsl(var(--mg-color-dark-40-hsl))}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-title{margin:0 1.1rem}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-sections{display:flex;flex-wrap:wrap;gap:calc(0.4rem * 1);flex-direction:column}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-sections-container{display:flex;flex-wrap:nowrap;gap:calc(0.4rem * 0);flex-direction:column;max-height:80vh;padding-right:1rem;overflow-y:auto}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-section-header{display:flex;flex-wrap:wrap;gap:calc(0.4rem * 2);flex-direction:row;align-items:center;min-height:var(--default-size)}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-inputs{margin:0;padding:0.4rem calc(0.4rem * 2) 0.4rem calc(0.4rem / 2)}.mg-input.mg-input--checkbox-multi:not(.mg-input--label-on-top) mg-tooltip{margin-left:var(--mg-inputs-spacer)}.mg-input.mg-input--checkbox-multi mg-popover{--mg-popover-min-width:7rem;--mg-card-padding:calc(0.4rem * 2)}.mg-input.mg-input--checkbox-multi mg-popover-content [slot=content]{display:flex;flex-wrap:wrap;gap:calc(0.4rem * 2);flex-direction:column}.mg-input.mg-input--checkbox-multi mg-popover-content [slot=content] .mg-input__input-group{margin-left:calc(0.4rem * 2)}.mg-input.mg-input--checkbox-multi mg-input-text{--mg-inputs-margin-bottom:0}";
 
 /**
  * type CheckboxItem validation function
@@ -1828,7 +1896,7 @@ const MgInputCheckbox = class {
   renderCheckboxMulti() {
     const selectedValuesNb = this.checkboxItems.filter(({ value }) => value).length;
     const checkboxes = this.getDisplayItems();
-    return (index.h("div", { class: { 'mg-input__input-container': true, 'mg-input__input-checkbox-multi': true, 'mg-input__input-checkbox-multi--with-values': this.displaySelectedValues } }, this.renderCheckboxMultiDisplaySelectedValues(selectedValuesNb), index.h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), "onDisplay-change": this.handleMgPopoverDisplayChange, ref: el => {
+    return (index.h("div", { class: { 'mg-input__input-container': true, 'mg-input__input-checkbox-multi': true, 'mg-input__input-checkbox-multi--with-values': this.displaySelectedValues } }, this.renderCheckboxMultiDisplaySelectedValues(selectedValuesNb), index.h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), "onDisplay-change": this.handleMgPopoverDisplayChange, ref: (el) => {
         if (Boolean(el))
           this.mgPopover = el;
       } }, index.h("mg-button", { variant: "secondary" }, index.h("mg-icon", { icon: "list" }), this.renderButtonText(selectedValuesNb)), index.h("div", { slot: "content" }, this.displaySearchInput && [
@@ -2132,7 +2200,7 @@ const MgInputDate = class {
    * @returns HTML Element
    */
   render() {
-    return (index.h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, 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: mgMenu_conf.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, ref: el => {
+    return (index.h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, 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: mgMenu_conf.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, ref: (el) => {
         if (el !== null)
           this.input = el;
       } })));
@@ -2296,28 +2364,48 @@ const MgInputNumeric = class {
       // Split number and decimal
       const [integer, decimal = ''] = newValue.replace('-', '').split(/[\.,]/);
       // Regex
-      const regex = this.type === 'integer' ? /^-?\d+$/ : /^-?\d+[.,]?\d*$/;
+      const regex = this.type === 'integer' ? /^-?\d+$/ : /^-?\d+(?:[.,]\d*)?$/;
       // Filter input
-      if (['', '-'].includes(newValue) || (newValue.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength))) {
+      if (this.isValidValue(newValue, regex, integer, decimal)) {
         this.storedValue = newValue;
       }
-      else if (this.storedValue !== undefined) {
-        newValue = this.storedValue;
-      }
       else {
-        newValue = null;
+        newValue = this.handleInvalidValue();
       }
       // Set value and input value
-      this.value = newValue;
-      if (this.input !== undefined)
-        this.input.value = this.value;
-      // emit numeric value
-      this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;
-      this.valueChange.emit(this.numericValue);
-      // Set readonlyValue
-      this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
+      this.updateValues(newValue);
     }
   }
+  /**
+   * Checks if the given value is valid according to the defined rules.
+   * @param value - The input value to validate.
+   * @param regex - The regular expression for validation.
+   * @param integer - The integer part of the value.
+   * @param decimal - The decimal part of the value.
+   * @returns Returns true if the value is valid, otherwise false.
+   */
+  isValidValue(value, regex, integer, decimal) {
+    return ['', '-'].includes(value) || (value.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength));
+  }
+  /**
+   * Handles invalid input values and returns a corrected value.
+   * @returns The corrected value.
+   */
+  handleInvalidValue() {
+    return this.storedValue !== undefined ? this.storedValue : null;
+  }
+  /**
+   * Updates the component values based on the validated input value.
+   * @param newValue - The validated input value.
+   */
+  updateValues(newValue) {
+    this.value = newValue;
+    if (this.input !== undefined)
+      this.input.value = this.value;
+    this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;
+    this.valueChange.emit(this.numericValue);
+    this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
+  }
   handleValidityChange(newValue, _oldValue, prop) {
     if (this.input !== undefined) {
       this.input[prop] = newValue;
@@ -2390,7 +2478,7 @@ const MgInputNumeric = class {
    * @returns HTML Element
    */
   render() {
-    return (index.h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, 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 => {
+    return (index.h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, 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) => {
         if (el !== null)
           this.input = el;
       } }), index.h("slot", { name: "append-input" })));
@@ -2515,7 +2603,7 @@ const MgInputPassword = class {
    * @returns HTML Element
    */
   render() {
-    return (index.h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, 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 => {
+    return (index.h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, 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) => {
         if (el !== null)
           this.input = el;
       } })));
@@ -2671,7 +2759,7 @@ const MgInputRadio = class {
    * @returns HTML Element
    */
   render() {
-    return (index.h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, 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 }, role: "list" }, this.options.map((input, index$1) => (index.h("li", { key: input.title, 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 => {
+    return (index.h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, 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 }, role: "list" }, this.options.map((input, index$1) => (index.h("li", { key: input.title, 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) => {
         if (el !== null)
           this.inputs[index$1] = el;
       } }), index.h("label", { htmlFor: this.identifier + '_' + index$1 }, input.title)))))));
@@ -2927,7 +3015,7 @@ const MgInputSelect = class {
    * @returns HTML Element
    */
   render() {
-    return (index.h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: undefined, 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 => {
+    return (index.h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: undefined, 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) => {
         if (el !== null)
           this.input = el;
       } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
@@ -3126,7 +3214,7 @@ const MgInputText = class {
         '--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.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) => {
         if (el !== null)
           this.input = el;
       } }), this.displayCharacterLeft && this.maxlength > 0 && (index.h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), index.h("slot", { name: "append-input" })));
@@ -3311,7 +3399,7 @@ const MgInputTextarea = class {
         '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 => {
+      }, 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) => {
         if (el !== null)
           this.input = el;
       } }), this.displayCharacterLeft && this.maxlength > 0 && (index.h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength })))));
@@ -3980,7 +4068,7 @@ const MgMenuItem = class {
    */
   renderInteractiveElement() {
     const TagName = this.href !== undefined ? 'a' : 'button';
-    return (index.h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status$1.DISABLED, Status$1.HIDDEN].includes(this.status) ? -1 : 0, disabled: this.status === Status$1.DISABLED, hidden: this.status === Status$1.HIDDEN, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status$1.ACTIVE && 'page', onClick: this.handleElementCLick }, index.h("slot", { name: "image" }), index.h("div", { class: `${this.navigationButton}-center` }, index.h("div", { class: `${this.navigationButton}-text-content` }, index.h("slot", { name: "label" }), !this.displayNotificationBadge && index.h("slot", { name: "information" }), this.displayNotificationBadge && (index.h("span", { class: "mg-menu-item__navigation-button-text-content-notification" }, index.h("mg-badge", { label: this.badgeLabel, value: "!", variant: "text-color", slot: "information" })))), this.size !== 'regular' && index.h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (index.h("span", { class: {
+    return (index.h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status$1.DISABLED, Status$1.HIDDEN].includes(this.status) ? -1 : undefined, disabled: this.status === Status$1.DISABLED, hidden: this.status === Status$1.HIDDEN, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status$1.ACTIVE && 'page', onClick: this.handleElementCLick }, index.h("slot", { name: "image" }), index.h("div", { class: `${this.navigationButton}-center` }, index.h("div", { class: `${this.navigationButton}-text-content` }, index.h("slot", { name: "label" }), !this.displayNotificationBadge && index.h("slot", { name: "information" }), this.displayNotificationBadge && (index.h("span", { class: "mg-menu-item__navigation-button-text-content-notification" }, index.h("mg-badge", { label: this.badgeLabel, value: "!", variant: "text-color", slot: "information" })))), this.size !== 'regular' && index.h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (index.h("span", { class: {
         [`${this.navigationButton}-chevron`]: true,
         [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
         'mg-a11y-animation': true,
@@ -3995,7 +4083,7 @@ const MgMenuItem = class {
       [`${this.name}__collapse-container`]: true,
       [`${this.name}__collapse-container--first-level`]: (this.isInMainMenu || this.isItemMore) && this.isDirection(mgMenu_conf.Direction.HORIZONTAL),
     });
-    return (index.h(index.Host, { role: "listitem" }, this.displayPopover() ? (index.h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), index.h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
+    return (index.h(index.Host, { role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (index.h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), index.h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
       this.renderInteractiveElement(),
       index.h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
     ])));
@@ -4179,6 +4267,11 @@ const MgMessage = class {
 };
 MgMessage.style = mgMessageCss;
 
+/**
+ * List of all possibles dialog roles
+ */
+const dialogRoles = ['dialog', 'alertdialog'];
+
 const mgModalCss = ":host{--mg-card-border-radius:var(--mg-modal-border-radius);--mg-card-padding:1.5rem 2.5rem;--mg-card-border:none}.mg-modal{display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;padding:2rem 0;background-color:hsl(var(--color-light), 0.85)}.mg-modal mg-card{display:flex;width:60rem;max-width:100%;max-height:100%}.mg-modal__dialog{display:flex;position:relative;flex-direction:column;align-self:center;row-gap:3rem;height:fit-content;max-height:100%}.mg-modal__header{margin-bottom:0.5rem}.mg-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-modal__close-button{float:right;height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size) * var(--line-height)) / 2 * -1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1)}.mg-modal__content{overflow-y:auto}.mg-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-modal.mg-modal--hide{display:none}.mg-modal ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}";
 
 const MgModal = class {
@@ -4252,13 +4345,18 @@ const MgModal = class {
       this.hide = true;
     };
     this.identifier = createID('mg-modal');
+    this.dialogRole = dialogRoles[0];
     this.modalTitle = undefined;
     this.closeButton = false;
-    this.hide = false;
+    this.hide = undefined;
     this.hasActions = false;
     this.hasContent = false;
     this.classCollection = new ClassList(['mg-modal']);
   }
+  validateDialogRole(newValue) {
+    if (!dialogRoles.includes(newValue))
+      throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
+  }
   validateModalTitle(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
       throw new Error('<mg-modal> prop "modalTitle" is required.');
@@ -4275,7 +4373,7 @@ const MgModal = class {
       if (this.modalFocusableElements.length > 0)
         this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);
     }
-    else {
+    else if (newValue === false) {
       this.componentShow.emit();
       this.classCollection.delete(this.classHide);
       document.body.style.overflow = 'hidden';
@@ -4309,6 +4407,7 @@ const MgModal = class {
     this.titleId = `${this.identifier}-title`;
     this.validateModalTitle(this.modalTitle);
     this.validateHide(this.hide);
+    this.validateDialogRole(this.dialogRole);
   }
   /**
    * Add observer on component to set focus when displayed
@@ -4327,7 +4426,7 @@ const MgModal = class {
    * @returns HTML Element
    */
   render() {
-    return (index.h("div", { role: "alertdialog", id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, index.h("mg-card", null, index.h("div", { class: "mg-modal__dialog" }, index.h("header", { class: "mg-modal__header" }, this.closeButton && (index.h("span", { class: "mg-modal__close-button" }, index.h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: el => {
+    return (index.h("div", { role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, index.h("mg-card", null, index.h("div", { class: "mg-modal__dialog" }, index.h("header", { class: "mg-modal__header" }, this.closeButton && (index.h("span", { class: "mg-modal__close-button" }, index.h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
         if (el !== null) {
           // store closeButton Element
           this.closeButtonElement = el;
@@ -4338,6 +4437,7 @@ const MgModal = class {
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
+    "dialogRole": ["validateDialogRole"],
     "modalTitle": ["validateModalTitle"],
     "hide": ["validateHide"]
   }; }
@@ -4542,7 +4642,7 @@ const MgPanel = class {
      * Render input button
      * @returns edit title input
      */
-    this.renderEditInput = () => (index.h("mg-input-text", { key: "edition-input", 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" }))));
+    this.renderEditInput = () => (index.h("mg-input-text", { key: "edition-input", 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" }))));
     /**
      * Render title
      * @returns title element
@@ -6444,24 +6544,19 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-const mgPopoverCss = ":host{--mg-card-padding:var(--mg-popover-padding-vertical, 1.5rem) var(--mg-popover-padding-horizontal, var(--mg-popover-padding-vertical, 1.5rem));--mg-card-border:none;--mg-card-border-radius:0.5rem;--mg-card-background:hsl(var(--mg-popover-background-color));position:relative;display:contents}:host::slotted(*){display:inline-block}.mg-popover{display:none;padding:1rem;z-index:2000;color:hsl(var(--mg-popover-font-color))}.mg-popover mg-card{--mg-card-max-width:var(--mg-popover-max-width);--mg-card-min-width:var(--mg-popover-min-width);position:relative}.mg-popover[data-show]{display:block}.mg-popover mg-button{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover__arrow{position:absolute;visibility:hidden;width:calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);height:calc(3rem + 2 * var(--mg-card-border-radius) + 2rem)}.mg-popover__arrow:before{visibility:visible;content:\"\";position:absolute}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow,.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow{height:1rem}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow:before,.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow:before{left:calc(var(--mg-card-border-radius) + 1rem);border-right:calc(3rem / 2) solid transparent;border-left:calc(3rem / 2) solid transparent}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow{bottom:0.1rem;filter:drop-shadow(0 0.5rem 0.25rem hsl(var(--color-dark), 0.15))}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow:before{border-top:1rem solid hsl(var(--mg-popover-background-color))}.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow{top:0.1rem;filter:drop-shadow(0 -0.5rem 0.25rem hsl(var(--color-dark), 0.15))}.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow:before{border-bottom:1rem solid hsl(var(--mg-popover-background-color))}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow,.mg-popover[data-popper-placement^=right]>.mg-popover__arrow{width:1rem}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow:before,.mg-popover[data-popper-placement^=right]>.mg-popover__arrow:before{top:calc(var(--mg-card-border-radius) + 1rem);border-top:calc(3rem / 2) solid transparent;border-bottom:calc(3rem / 2) solid transparent}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow{right:0.1rem;filter:drop-shadow(0.5rem 0 0.25rem hsl(var(--color-dark), 0.15))}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow:before{border-left:1rem solid hsl(var(--mg-popover-background-color))}.mg-popover[data-popper-placement^=right]>.mg-popover__arrow{left:0.1rem;filter:drop-shadow(-0.5rem 0 0.25rem hsl(var(--color-dark), 0.15))}.mg-popover[data-popper-placement^=right]>.mg-popover__arrow:before{border-right:1rem solid hsl(var(--mg-popover-background-color))}.mg-popover[data-popper-placement^=left-start],.mg-popover[data-popper-placement^=left-end],.mg-popover[data-popper-placement^=right-start],.mg-popover[data-popper-placement^=right-end]{padding:0 1rem}.mg-popover[data-popper-placement^=left-start]>.mg-popover__arrow,.mg-popover[data-popper-placement^=left-end]>.mg-popover__arrow,.mg-popover[data-popper-placement^=right-start]>.mg-popover__arrow,.mg-popover[data-popper-placement^=right-end]>.mg-popover__arrow{height:calc(3rem + 2 * var(--mg-card-border-radius))}.mg-popover[data-popper-placement^=left-start]>.mg-popover__arrow:before,.mg-popover[data-popper-placement^=left-end]>.mg-popover__arrow:before,.mg-popover[data-popper-placement^=right-start]>.mg-popover__arrow:before,.mg-popover[data-popper-placement^=right-end]>.mg-popover__arrow:before{top:var(--mg-card-border-radius)}.mg-popover__title ::slotted([slot=title]){margin:0 0 1rem !important;font-size:var(--mg-popover-title-font-size) !important;font-weight:600}.mg-popover--arrow-hide.mg-popover[data-popper-placement^=top]{padding-bottom:0}.mg-popover--arrow-hide.mg-popover[data-popper-placement^=bottom]{padding-top:0}.mg-popover--arrow-hide.mg-popover[data-popper-placement$=end],.mg-popover--arrow-hide.mg-popover[data-popper-placement^=left]{padding-right:0}.mg-popover--arrow-hide.mg-popover[data-popper-placement$=start],.mg-popover--arrow-hide.mg-popover[data-popper-placement^=right]{padding-left:0}.mg-popover ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}";
+const mgPopoverCss = ":host{--mg-card-padding:var(--mg-popover-padding-vertical, 1.5rem) var(--mg-popover-padding-horizontal, var(--mg-popover-padding-vertical, 1.5rem));--mg-card-border:none;--mg-card-border-radius:0.5rem;--mg-card-background:hsl(var(--mg-popover-background-color));position:relative;display:contents}:host::slotted(*){display:inline-block}";
 
 const MgPopover = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.displayChange = index.createEvent(this, "display-change", 7);
-    this.closeButtonId = '';
-    // Classes
-    this.classArrowHide = `mg-popover--arrow-hide`;
     /**
      * Check if clicked outside of component
      * @param event - mouse event
      */
     this.clickOutside = (event) => {
-      var _a;
-      if (!this.disabled &&
-        event.target.closest('mg-popover') !== this.element &&
-        !(((_a = event.target.closest(`[data-mg-popover-guard]`)) === null || _a === void 0 ? void 0 : _a.dataset.mgPopoverGuard) === this.identifier)) {
+      const closestElement = event.target.closest(`[data-mg-popover-guard]`);
+      if (!this.disabled && event.target.closest('mg-popover') !== this.element && (closestElement === null || closestElement === void 0 ? void 0 : closestElement.dataset.mgPopoverGuard) !== this.identifier) {
         this.display = false;
       }
     };
@@ -6495,24 +6590,46 @@ const MgPopover = class {
       });
     };
     /**
-     * Handle action for close button
+     * Handle content hide event
      */
-    this.handleCloseButton = () => {
+    this.handleHideContent = () => {
       this.display = false;
     };
+    /**
+     * Render popover content element
+     */
+    this.renderPopoverContent = () => {
+      this.mgPopoverContent = document.createElement('mg-popover-content');
+      this.mgPopoverContent.setAttribute('slot', 'content');
+      this.mgPopoverContent.setAttribute('id', this.identifier);
+      this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);
+      const arrow = document.createElement('div');
+      arrow.setAttribute('slot', 'arrow');
+      arrow.dataset.popperArrow = '';
+      this.mgPopoverContent.appendChild(arrow);
+      // insert elements in DOM
+      ['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach(slotType => {
+        Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {
+          this.mgPopoverContent.appendChild(slot);
+        });
+      });
+      this.element.appendChild(this.mgPopoverContent);
+    };
     this.identifier = createID('mg-popover');
     this.placement = 'bottom';
     this.arrowHide = false;
     this.closeButton = false;
     this.display = false;
     this.disabled = false;
-    this.classCollection = new ClassList(['mg-popover']);
   }
   validateArrowHide(newValue) {
     if (newValue)
-      this.classCollection.add(this.classArrowHide);
+      this.mgPopoverContent.dataset.arrowHide = '';
     else
-      this.classCollection.delete(this.classArrowHide);
+      delete this.mgPopoverContent.dataset.arrowHide;
+  }
+  validateCloseButton(newValue) {
+    this.mgPopoverContent.closeButton = newValue;
   }
   handleDisplay(newValue) {
     if (newValue) {
@@ -6538,25 +6655,17 @@ const MgPopover = class {
   componentWillLoad() {
     // Get windows to attach events
     this.windows = getWindows(window);
-    // Get locales
-    this.messages = mgMenu_conf.initLocales(this.element).messages;
+    // render mg-popover-content slot
+    this.renderPopoverContent();
+    this.validateCloseButton(this.closeButton);
     this.validateArrowHide(this.arrowHide);
   }
   /**
    * Check if component props are well configured on init
    */
   componentDidLoad() {
-    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-    const slottedTitleElement = this.element.querySelector('[slot="title"]');
-    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {
-      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
-    }
-    // Set close button id
-    if (this.closeButton) {
-      this.closeButtonId = `${this.identifier}-close-button`;
-    }
     // Get popover content
-    this.mgPopover = this.element.shadowRoot.getElementById(this.identifier);
+    this.mgPopover = this.element.querySelector(`#${this.identifier}`);
     //Get interactive element (first element without slot attribute)
     const interactiveElement = this.element.querySelector(':not([slot])');
     // Add aria attributes
@@ -6575,17 +6684,10 @@ const MgPopover = class {
         },
       ],
     });
-    if (this.resizeObserver === undefined) {
-      // add resize observer
-      this.resizeObserver = new ResizeObserver(entries => {
-        if (entries.some(entrie => entrie.target.getAttribute('slot') !== null)) {
-          this.popper.update();
-        }
-      });
-      Array.from(this.element.querySelectorAll('[slot]')).forEach(element => {
-        this.resizeObserver.observe(element);
-      });
-    }
+    // add resize observer
+    new ResizeObserver(() => {
+      this.popper.update();
+    }).observe(this.element.querySelector('mg-popover-content'));
     // Add events to toggle display
     interactiveElement.addEventListener('click', () => {
       if (!this.disabled)
@@ -6605,16 +6707,63 @@ const MgPopover = class {
    * @returns HTML Element
    */
   render() {
-    return (index.h(index.Host, null, index.h("slot", null), index.h("div", { id: this.identifier, class: this.classCollection.join() }, index.h("mg-card", null, this.closeButton && (index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { icon: "cross" }))), index.h("div", { class: "mg-popover__title" }, index.h("slot", { name: "title" })), index.h("slot", { name: "content" })), !this.arrowHide && index.h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
+    return (index.h(index.Host, null, index.h("slot", null), index.h("slot", { name: "content" })));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
     "arrowHide": ["validateArrowHide"],
+    "closeButton": ["validateCloseButton"],
     "display": ["handleDisplay"]
   }; }
 };
 MgPopover.style = mgPopoverCss;
 
+const mgPopoverContentCss = ":host{display:none;padding:1rem;z-index:2000;color:hsl(var(--mg-popover-font-color));position:relative}:host([data-show]){display:block}:host([data-popper-placement^=left-start]),:host([data-popper-placement^=left-end]),:host([data-popper-placement^=right-start]),:host([data-popper-placement^=right-end]){padding:0 1rem}.mg-popover-content{--mg-card-max-width:var(--mg-popover-max-width);--mg-card-min-width:var(--mg-popover-min-width)}.mg-popover-content mg-button{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover-content__title ::slotted([slot=title]){margin:0 0 1rem !important;font-size:var(--mg-popover-title-font-size) !important;font-weight:600}.mg-popover-content ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}:host([data-popper-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-popper-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-popper-placement$=end][data-arrow-hide]),:host([data-popper-placement^=left][data-arrow-hide]){padding-right:0}:host([data-popper-placement$=start][data-arrow-hide]),:host([data-popper-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;visibility:hidden;width:calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);height:calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);}::slotted([slot=arrow]):before{visibility:visible;content:\"\";position:absolute}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-popper-placement^=top]) ::slotted([slot=arrow]),:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){height:1rem}:host([data-popper-placement^=top]) ::slotted([slot=arrow]):before,:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]):before{left:calc(var(--mg-card-border-radius) + 1rem);border-right:calc(3rem / 2) solid transparent;border-left:calc(3rem / 2) solid transparent}:host([data-popper-placement^=top]) ::slotted([slot=arrow]){bottom:0.1rem;filter:drop-shadow(0 0.5rem 0.25rem hsl(var(--color-dark), 0.15))}:host([data-popper-placement^=top]) ::slotted([slot=arrow]):before{border-top:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){top:0.1rem;filter:drop-shadow(0 -0.5rem 0.25rem hsl(var(--color-dark), 0.15))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]):before{border-bottom:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=left]) ::slotted([slot=arrow]),:host([data-popper-placement^=right]) ::slotted([slot=arrow]){width:1rem}:host([data-popper-placement^=left]) ::slotted([slot=arrow]):before,:host([data-popper-placement^=right]) ::slotted([slot=arrow]):before{top:calc(var(--mg-card-border-radius) + 1rem);border-top:calc(3rem / 2) solid transparent;border-bottom:calc(3rem / 2) solid transparent}:host([data-popper-placement^=left]) ::slotted([slot=arrow]){right:0.1rem;filter:drop-shadow(0.5rem 0 0.25rem hsl(var(--color-dark), 0.15))}:host([data-popper-placement^=left]) ::slotted([slot=arrow]):before{border-left:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=right]) ::slotted([slot=arrow]){left:0.1rem;filter:drop-shadow(-0.5rem 0 0.25rem hsl(var(--color-dark), 0.15))}:host([data-popper-placement^=right]) ::slotted([slot=arrow]):before{border-right:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]){height:calc(3rem + 2 * var(--mg-card-border-radius))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]):before,:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]):before,:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]):before,:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]):before{top:var(--mg-card-border-radius)}";
+
+const MgPopoverContent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.hideContent = index.createEvent(this, "hide-content", 7);
+    /**
+     * Handle action for close button
+     */
+    this.handleCloseButton = () => {
+      this.hideContent.emit();
+    };
+    this.closeButton = false;
+    this.classCollection = new ClassList(['mg-popover-content']);
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are valide
+   */
+  componentWillLoad() {
+    // Get locales
+    this.messages = mgMenu_conf.initLocales(this.element).messages;
+  }
+  /**
+   * Check if component slots are valide
+   */
+  componentDidLoad() {
+    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+    const slottedTitleElement = this.element.querySelector('[slot="title"]');
+    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {
+      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
+    }
+  }
+  /**
+   * Render
+   * @returns HTML Element
+   */
+  render() {
+    return (index.h(index.Host, null, index.h("mg-card", { class: this.classCollection.join() }, this.closeButton && (index.h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { icon: "cross" }))), index.h("div", { class: "mg-popover-content__title" }, index.h("slot", { name: "title" })), index.h("slot", { name: "content" })), index.h("slot", { name: "arrow" })));
+  }
+  get element() { return index.getElement(this); }
+};
+MgPopoverContent.style = mgPopoverContentCss;
+
 const mgSkipLinksCss = ".mg-skip-links{position:absolute;transform:translateY(-100%);opacity:0;background:hsl(var(--color-light))}.mg-skip-links:focus-within{position:relative;transform:translateY(0);opacity:1}.mg-skip-links__list{display:flex;flex-wrap:wrap;align-items:center;gap:0.6rem;margin:0;padding:0.64rem 1.8rem;list-style:none}.mg-skip-links__link{display:inline-block;padding:1.2rem;color:hsl(var(--color-dark))}.mg-skip-links__link:hover{background:hsl(var(--color-dark), 0.1)}";
 
 const MgSkipLinks = class {
@@ -6998,8 +7147,14 @@ var Guard;
   Guard["HOVER_TOOLTIPED_ELEMENT"] = "hoverTooltipedGuard";
 })(Guard || (Guard = {}));
 
-const mgTooltipCss = ":host{display:inline-block}.mg-tooltip{display:none;padding:0.5rem 0.8rem;z-index:1000;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;max-width:40rem;box-sizing:border-box}.mg-tooltip[data-show]{display:block}.mg-tooltip .mg-tooltip__arrow,.mg-tooltip .mg-tooltip__arrow::before{position:absolute;width:0.8rem;height:0.8rem;z-index:9999;background:inherit}.mg-tooltip .mg-tooltip__arrow{visibility:hidden}.mg-tooltip .mg-tooltip__arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-tooltip[data-popper-placement^=top]>.mg-tooltip__arrow{bottom:-4px}.mg-tooltip[data-popper-placement^=bottom]>.mg-tooltip__arrow{top:-4px}.mg-tooltip[data-popper-placement^=left]>.mg-tooltip__arrow{right:-4px}.mg-tooltip[data-popper-placement^=right]>.mg-tooltip__arrow{left:-4px}";
+const mgTooltipCss = ":host{display:inline-block}";
 
+/**
+ * HTMLMgButtonElement type guard
+ * @param element - element to check
+ * @returns return true if type is HTMLMgButtonElement
+ */
+const isButton = (element) => typeof element === 'object' && ['MG-BUTTON', 'BUTTON'].includes(element.tagName);
 const MgTooltip = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -7008,7 +7163,7 @@ const MgTooltip = class {
      */
     this.show = () => {
       // Make the tooltip visible
-      this.tooltip.dataset.show = '';
+      this.mgTooltipContent.dataset.show = '';
       // Enable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
       // hide when click outside
@@ -7025,7 +7180,7 @@ const MgTooltip = class {
      */
     this.hide = () => {
       // Hide the tooltip
-      this.tooltip.removeAttribute('data-show');
+      this.mgTooltipContent.removeAttribute('data-show');
       // Disable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
       // Remove event listener
@@ -7112,8 +7267,12 @@ const MgTooltip = class {
      */
     this.initTooltip = (slotElement, interactiveElement) => {
       // Add tabindex to slotted element if we can't find any interactive element
-      if (interactiveElement === null || interactiveElement === undefined)
+      if (!this.disabled && !Boolean(interactiveElement)) {
+        this.hasCustomTabIndex = true;
         slotElement.tabIndex = 0;
+        // Add role on non-interactive element to work with "aria-describedby" for screen readers
+        slotElement.setAttribute('role', 'button');
+      }
       // Set aria-describedby
       const ariaDescribedby = slotElement.getAttribute('aria-describedby');
       if (ariaDescribedby === null) {
@@ -7124,7 +7283,7 @@ const MgTooltip = class {
         slotElement.setAttribute('aria-describedby', `${[...new Set([...ariaDescribedby.split(' '), this.identifier])].join(' ')}`);
       }
       // Create popperjs tooltip
-      this.popper = createPopper(this.tooltipedElement, this.tooltip, {
+      this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {
         placement: this.placement,
         strategy: 'fixed',
         modifiers: [
@@ -7141,6 +7300,12 @@ const MgTooltip = class {
         this.guard = Guard.FOCUS;
         this.setDisplay(true);
       });
+      // as `click` event is the composition of `mousedown` and `mouseup` event,
+      // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`
+      // we reset the guard on `mouseup` event to unlock tooltip
+      this.tooltipedElement.addEventListener('mouseup', () => {
+        this.resetGuard();
+      });
       this.tooltipedElement.addEventListener('blur', () => {
         this.resetGuard();
         this.setDisplay(false);
@@ -7150,7 +7315,7 @@ const MgTooltip = class {
       ['mouseenter', 'mouseleave'].forEach(eventType => {
         const isMouseenter = eventType === 'mouseenter';
         [
-          { element: this.tooltip, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },
+          { element: this.mgTooltipContent, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },
           { element: this.tooltipedElement, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIP_ELEMENT) },
         ].forEach(({ element, action }) => {
           element.addEventListener(eventType, () => {
@@ -7169,6 +7334,7 @@ const MgTooltip = class {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
       throw new Error('<mg-tooltip> prop "message" is required.');
     }
+    this.mgTooltipContent.message = newValue;
   }
   handleDisplay(newValue) {
     if (newValue) {
@@ -7178,6 +7344,28 @@ const MgTooltip = class {
       this.hide();
     }
   }
+  validateDisabled(newValue) {
+    if (this.hasCustomTabIndex) {
+      if (newValue)
+        this.tooltipedElement.removeAttribute('tabindex');
+      else if (this.tooltipedElement.getAttribute('tabindex') === null)
+        this.tooltipedElement.setAttribute('tabindex', '0');
+    }
+  }
+  /**
+   * Render tooltip content element
+   */
+  renderTooltip() {
+    const mgTooltipContent = document.createElement('mg-tooltip-content');
+    mgTooltipContent.setAttribute('slot', 'content');
+    mgTooltipContent.setAttribute('id', this.identifier);
+    const arrow = document.createElement('div');
+    arrow.setAttribute('slot', 'arrow');
+    arrow.dataset.popperArrow = '';
+    mgTooltipContent.appendChild(arrow);
+    // append tooltip element to component
+    this.element.appendChild(mgTooltipContent);
+  }
   /*************
    * Lifecycle *
    *************/
@@ -7187,6 +7375,12 @@ const MgTooltip = class {
   componentWillLoad() {
     // Get windows to attach events
     this.windows = getWindows(window);
+    // Get tooltip element
+    this.renderTooltip();
+    this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);
+    //validate properties
+    this.validateDisabled(this.disabled);
+    this.validateMessage(this.message);
   }
   /**
    * Get slotted element
@@ -7195,17 +7389,15 @@ const MgTooltip = class {
    */
   componentDidLoad() {
     var _a;
-    // Get tooltip element
-    this.tooltip = this.element.shadowRoot.querySelector(`#${this.identifier}`);
-    // get slotted element
-    const slotElement = this.element.firstElementChild;
+    // get slotted element wich is not the tooltip
+    const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
     // Get interactive element
     const interactiveElement = slotElement.matches(focusableElements) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(focusableElements);
     // define selected element to become tooltip selector
     this.tooltipedElement = interactiveElement || slotElement;
     // Check if slotted element is a disabled mg-button
     // In this case we wrap the mg-button into a div to enable the tooltip
-    if (['MG-BUTTON', 'BUTTON'].includes(slotElement.tagName)) {
+    if (isButton(slotElement)) {
       new MutationObserver(mutationList => {
         if (mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName))) {
           this.setMgButtonWrapper(slotElement);
@@ -7220,7 +7412,6 @@ const MgTooltip = class {
     // Init Tooltip
     this.initTooltip(slotElement, interactiveElement);
     this.handleDisplay(this.display);
-    this.validateMessage(this.message);
   }
   /**
    * update popper position after props change on component did update hook to benefit from render ended
@@ -7233,16 +7424,37 @@ const MgTooltip = class {
    * @returns HTML Element
    */
   render() {
-    return (index.h(index.Host, null, index.h("slot", null), index.h("div", { role: "tooltip", id: this.identifier, class: "mg-tooltip" }, index.h("span", { innerHTML: this.message }), index.h("div", { class: "mg-tooltip__arrow", "data-popper-arrow": true }))));
+    return (index.h(index.Host, null, index.h("slot", null), index.h("slot", { name: "content" })));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
     "message": ["validateMessage"],
-    "display": ["handleDisplay"]
+    "display": ["handleDisplay"],
+    "disabled": ["validateDisabled"]
   }; }
 };
 MgTooltip.style = mgTooltipCss;
 
+const mgTooltipContentCss = ":host{display:none;padding:0.5rem 0.8rem;z-index:1000;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;max-width:40rem;box-sizing:border-box}:host([data-show]){display:block}::slotted([slot=arrow]){visibility:hidden}::slotted([slot=arrow])::before{visibility:visible;content:\"\";transform:rotate(45deg)}::slotted([slot=arrow]),::slotted([slot=arrow])::before{position:absolute;width:0.8rem;height:0.8rem;z-index:9999;background-color:hsl(var(--mg-tooltip-background-color))}:host([data-popper-placement^=top])>::slotted([slot=arrow]){bottom:-4px}:host([data-popper-placement^=bottom])>::slotted([slot=arrow]){top:-4px}:host([data-popper-placement^=left])>::slotted([slot=arrow]){right:-4px}:host([data-popper-placement^=right])>::slotted([slot=arrow]){left:-4px}";
+
+const MgTooltipContent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.message = undefined;
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Render
+   * @returns HTML Element
+   */
+  render() {
+    return (index.h(index.Host, { role: "tooltip" }, index.h("span", { innerHTML: this.message, class: "mg-tooltip-content__message" }), index.h("slot", { name: "arrow" })));
+  }
+};
+MgTooltipContent.style = mgTooltipContentCss;
+
 exports.mg_action_more = MgActionMore;
 exports.mg_badge = MgBadge;
 exports.mg_button = MgButton;
@@ -7271,7 +7483,9 @@ exports.mg_modal = MgModal;
 exports.mg_pagination = MgPagination;
 exports.mg_panel = MgPanel;
 exports.mg_popover = MgPopover;
+exports.mg_popover_content = MgPopoverContent;
 exports.mg_skip_links = MgSkipLinks;
 exports.mg_tabs = MgTabs;
 exports.mg_tag = MgTag;
 exports.mg_tooltip = MgTooltip;
+exports.mg_tooltip_content = MgTooltipContent;