@mgdis/mg-components 5.23.1 → 5.23.2

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { b as bootstrapLazy } from './index-91977c3d.js';
-export { s as setNonce } from './index-91977c3d.js';
+import { b as bootstrapLazy } from './index-9aa447a7.js';
+export { s as setNonce } from './index-9aa447a7.js';
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/esm/mg-action-more_34.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-91977c3d.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-9aa447a7.js';
 import { j as je, i as initLocales, D as Direction, F as Fe, H as He, P as Pe, _ as _e, C as Ce, b as be, A as Ae, E as Ee, S as Se, R as Re, M as Me, a as De, s as sizes$2, B as Be, N as Ne } from './mg-menu.conf-4b2d2eab.js';
 
 /**
@@ -140,12 +140,12 @@ const MgActionMore = class {
         const buttonLabel = this.button.label || this.messages.label;
         const buttonContent = [buttonLabel];
         if (!this.button.isIcon && this.displayChevron) {
-            buttonContent.push(h("span", { class: {
+            buttonContent.push(h("span", { key: 'f96c9e7fc99997a3eb3720ebac5803787a69c00d', class: {
                     [`${this.classBase}__chevron`]: true,
                     [`${this.classBase}__chevron--rotate`]: this.expanded === true,
-                } }, h("mg-icon", { icon: "chevron-down", size: "small" })));
+                } }, h("mg-icon", { key: '54bc38e860c770b15a736fa1ee61df2c2688a82d', icon: "chevron-down", size: "small" })));
         }
-        return (h(Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { class: "mg-action-more" }, h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), h("div", { slot: "content" }, h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
+        return (h(Host, { key: 'fe5774abbf2421fa73a7dbac85f6eb0153efd13a', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: 'ea3a898f62fea432231c2925b711af3607f2f6f1', class: "mg-action-more" }, h("mg-popover", { key: 'efe6b86dd602e0e4d77ae27c61541a81e3cc6d3a', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { key: '48c8d385af91f17eb26809ffece1dcb95d30a644', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: 'cbc5f675b6b7f66e0a8c3f5b1ba5375816c0d065', slot: "content" }, h("mg-menu", { key: 'e6b0abe44a108b5125c46816a705c5198b62267d', direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
             var _a;
             return (
             // eslint-disable-next-line react/jsx-no-bind
@@ -225,7 +225,7 @@ const MgBadge = class {
      * @returns HTML Element
      */
     render() {
-        return (h("span", { class: this.classCollection.join() }, h("span", { class: "mg-c-badge__value" }, this.value), h("span", { class: "mg-u-visually-hidden" }, this.label)));
+        return (h("span", { key: '570b40e6abb6c0da8b9b2b8825f862612531fe51', class: this.classCollection.join() }, h("span", { key: 'b2c9bb13d21cf985a02a8cb35d76014e4631a5e4', class: "mg-c-badge__value" }, this.value), h("span", { key: 'e8180432ca14df201d5ab94b13341795191452ce', class: "mg-u-visually-hidden" }, this.label)));
     }
     static get watchers() { return {
         "value": ["validateValue"],
@@ -389,7 +389,7 @@ const MgButton = class {
      */
     render() {
         var _a;
-        return (h(Host, { role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { class: this.classCollection.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-c-button__content" }, h("slot", null)))));
+        return (h(Host, { key: '2a3bfeaf58c2519d31672c75361e6f981dcbe51c', role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { key: '3393c295dbee6c9655a163db475e18cd56e5b2ba', class: this.classCollection.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { key: '1974ebcd1f11bec41b83bea3eab516eee85c4f0d', class: "mg-c-button__content" }, h("slot", { key: '7a00d7b9ad83a0ca157d65874f9bfa1b554a0dc8' })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -469,7 +469,7 @@ const MgCard = class {
      */
     render() {
         var _a;
-        return (h("div", { class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-c-card__bar" }), h("slot", null)));
+        return (h("div", { key: '4d2a509e9c4d834d5d70068fa2d7515d8044ba7e', class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-c-card__bar" }), h("slot", { key: 'e3b08a0e5997533ceb4c5d24463a1e748a789683' })));
     }
     static get watchers() { return {
         "variant": ["validateVariant"],
@@ -508,7 +508,7 @@ const MgCharacterLeft = class {
      * @returns HTML Element
      */
     render() {
-        return (h("span", { id: this.identifier, "aria-live": "polite" }, h("span", { "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
+        return (h("span", { key: '6b4b475c61f5183961a263187cfad0c6609a2c6f', id: this.identifier, "aria-live": "polite" }, h("span", { key: '85fba95f7f827ee9f4ddb1fc3dd5751c04473ccc', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { key: 'ef1da0c4d3b361670718726a59ba71a4d0a119b2', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -558,7 +558,7 @@ const MgDetails = class {
      * @returns HTML Element
      */
     render() {
-        return (h("details", { class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-c-details__toggle" }, h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-c-details__details" }, h("slot", { name: "details" }))));
+        return (h("details", { key: '21565155c214af9779d1a18822f53a991460176a', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '9206eb7628f8363fdb8f495cd482911a20bf5a2b' }, h("slot", { key: 'b802325ea921079bf640da9c8e30f19738deb43f', name: "summary" }), h("span", { key: '7a1d0e60ace5e83cd8300937e2ac6155e976ee58', class: "mg-c-details__toggle" }, h("mg-icon", { key: '1b12014f3cc8be340a4667a4fa754ad464be5dd1', icon: "chevron-up", size: "small", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'c273ce19819bc58a3c6387c7677b45516d431f7b', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: 'd1e6666b6b019d0a5cededf269f3591f459f6bc1', class: "mg-c-details__details" }, h("slot", { key: '557858c76e718877ba7949b187a6b4b1e5f9c3be', name: "details" }))));
     }
     static get watchers() { return {
         "toggleClosed": ["validateTitles"],
@@ -581,7 +581,7 @@ const MgDivider = class {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { class: {
+        return (h("div", { key: '7250dfa7ca66ea0831292a25ea7e76c29ca36500', class: {
                 'mg-c-divider': true,
                 'mg-c-divider--full': this.size === 'full',
             } }));
@@ -766,7 +766,7 @@ const MgForm = class {
      * @returns HTML Element
      */
     render() {
-        return (h("form", { class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { innerHTML: this.requiredMessageText }), h("slot", null), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
+        return (h("form", { key: 'b398087ca0ce5b911130a473669540daf267c214', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { innerHTML: this.requiredMessageText }), h("slot", { key: 'ee961f5fe0138af53826b8a2e415873316015497' }), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -1324,13 +1324,13 @@ const MgIllustratedMessage = class {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { class: {
+        return (h("div", { key: '2fdba6c8f99b0db0955f4f6e85c90e6b73aeb506', class: {
                 'mg-c-illustrated-message': true,
                 'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',
-            } }, h("div", { class: {
+            } }, h("div", { key: 'c41ca15c897ae3f855ce0e922e1afc6f0475c014', class: {
                 'mg-c-illustrated-message__illustration': true,
                 'mg-c-illustrated-message__illustration--small': this.size === 'small',
-            } }, h("slot", { name: "illustration" })), h("div", { class: "mg-c-illustrated-message__slots" }, h("div", { class: "mg-c-illustrated-message__title" }, h("slot", { name: "title" })), h("div", { class: "mg-c-illustrated-message__details" }, h("slot", { name: "details" })))));
+            } }, h("slot", { key: 'c0f9308201945fae94d13afc45596ba45efdd890', name: "illustration" })), h("div", { key: '5c020c6c0154a527485662dd47eda0ad141e2efc', class: "mg-c-illustrated-message__slots" }, h("div", { key: 'e5ff38b7a081232af9382c6bda756bdd31360f86', class: "mg-c-illustrated-message__title" }, h("slot", { key: '39b3ff01828d05780bd18f04a9971acc0b47a684', name: "title" })), h("div", { key: 'f0cc3464ff7c28ad6a26445ffeca1a0dc40d51ce', class: "mg-c-illustrated-message__details" }, h("slot", { key: '32f4165453cc3dba7b78d1ad0addc63cf35d246d', name: "details" })))));
     }
     get element() { return getElement(this); }
 };
@@ -1929,7 +1929,7 @@ const MgInputCheckbox = class {
      */
     render() {
         var _a;
-        return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), readonlyValue: undefined, tooltip: !this.readonly ? this.tooltip : undefined, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined, isFieldset: true }, this.type === 'checkbox' || this.readonly ? (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, inputVerticalList: this.inputVerticalList, type: this.type, readonly: this.readonly, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })) : (this.renderCheckboxMulti())));
+        return (h(MgInput, { key: '30d2be938b51f423015a2fba6f70c9a424402c8f', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), readonlyValue: undefined, tooltip: !this.readonly ? this.tooltip : undefined, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined, isFieldset: true }, this.type === 'checkbox' || this.readonly ? (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, inputVerticalList: this.inputVerticalList, type: this.type, readonly: this.readonly, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })) : (this.renderCheckboxMulti())));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -2041,10 +2041,10 @@ const MgInputCheckboxPaginated = class {
      * @returns HTML Element
      */
     render() {
-        const getText = (checkboxes) => (h("em", { class: "mg-c-input__input-checkbox-multi-section-header-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`));
+        const getText = (checkboxes) => (h("em", { key: '28eedd949445bc6c7a5a750359af7159055657d8', class: "mg-c-input__input-checkbox-multi-section-header-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`));
         const [from, to] = this.getFromToIndexes();
         const itemsContainerId = `items-${this.sectionKind}-container`;
-        return (h(Host, { hidden: this.checkboxes.length < 1 }, h("div", { class: "mg-c-input__input-checkbox-multi-section-header" }, this.titleKind === SectionTitleKind.BUTTON ? (h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: "small" }), h("span", { class: "mg-c-input__input-checkbox-multi-text" }, getText(this.checkboxes)))) : (h("p", { class: "mg-c-input__input-checkbox-multi-title" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-tooltip", { class: "mg-c-input__input-checkbox-multi-section-header-tootlip", message: this.messages.tooltip, "data-popper-strategy": "absolute" }, h("mg-button", { variant: "link", onClick: this.massActionHandler }, this.messages.action))), this.expanded && this.getPageCount(this.checkboxes) > 1 && (h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__input-checkbox-multi-section-content" }, h(MgInputCheckboxList, { checkboxes: this.getArrayRange(this.checkboxes, from, to), inputVerticalList: true, type: 'multi', displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, readonly: this.readonly, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
+        return (h(Host, { key: 'a7ade87a72bb1cba4d0c20dde425cefc5c7fbff4', hidden: this.checkboxes.length < 1 }, h("div", { key: '38711edade3945e940ba29b44492424c3e5b7063', class: "mg-c-input__input-checkbox-multi-section-header" }, this.titleKind === SectionTitleKind.BUTTON ? (h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: "small" }), h("span", { class: "mg-c-input__input-checkbox-multi-text" }, getText(this.checkboxes)))) : (h("p", { class: "mg-c-input__input-checkbox-multi-title" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-tooltip", { class: "mg-c-input__input-checkbox-multi-section-header-tootlip", message: this.messages.tooltip, "data-popper-strategy": "absolute" }, h("mg-button", { variant: "link", onClick: this.massActionHandler }, this.messages.action))), this.expanded && this.getPageCount(this.checkboxes) > 1 && (h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { key: '3a514d5711da9ebb57d21e70609b7f6f2d1e621e', hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__input-checkbox-multi-section-content" }, h(MgInputCheckboxList, { key: 'd86fc1faa7ae0312b402a2fc26a1ef04c30cd410', checkboxes: this.getArrayRange(this.checkboxes, from, to), inputVerticalList: true, type: 'multi', displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, readonly: this.readonly, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
     }
     static get watchers() { return {
         "checkboxes": ["validateCheckboxes"],
@@ -2293,7 +2293,7 @@ const MgInputDate = class {
      * @returns HTML Element
      */
     render() {
-        return (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: be(this.value, this.locale), tooltip: this.tooltip, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (h(MgInput, { key: 'df122ee015066947069fa0d33125646ec1996c61', 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: be(this.value, this.locale), tooltip: this.tooltip, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage, isFieldset: false }, h("input", { key: '27f23c33b27978c0fca6dc7ee9996f6fc1163c72', type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } })));
@@ -2611,10 +2611,10 @@ const MgInputNumeric = class {
      * @returns HTML Element
      */
     render() {
-        return (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 }, h("input", { type: "text", class: "mg-c-input__box", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
+        return (h(MgInput, { key: 'ea7d502132b6ccefcf4a1ff46fda06373f0b82ae', 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 }, h("input", { key: 'ff9d44dfef430d97d0e9366a8014bc7cac9a34c9', type: "text", class: "mg-c-input__box", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
-            } }), h("slot", { name: "append-input" })));
+            } }), h("slot", { key: '58e457b44ba4e81261d125afcd906225322e3c48', name: "append-input" })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -2779,7 +2779,7 @@ const MgInputPassword = class {
      * @returns HTML Element
      */
     render() {
-        return (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 }, h("input", { type: "password", class: "mg-c-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (h(MgInput, { key: 'a08f2c0e08f397a1e4752504575d5ee91e5b8b7c', 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 }, h("input", { key: 'a427fd83bf6be171e30619770c83fb5662c746ad', type: "password", class: "mg-c-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } })));
@@ -2975,7 +2975,7 @@ const MgInputRadio = class {
      * @returns HTML Element
      */
     render() {
-        return (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 }, h("ul", { class: { 'mg-c-input__input-group-container': true, 'mg-c-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
+        return (h(MgInput, { key: '91d5ef8fa79a5d3dc2a6eabf25b5de4fb2aa3f76', 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 }, h("ul", { key: 'd257731ca06a3ebbc3d1e31117eac14adbfd389a', class: { 'mg-c-input__input-group-container': true, 'mg-c-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
                 if (el !== null)
                     this.inputs[index] = el;
             } }), h("label", { htmlFor: this.identifier + '_' + index }, input.title)))))));
@@ -3272,7 +3272,7 @@ const MgInputSelect = class {
      * @returns HTML Element
      */
     render() {
-        return (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 }, h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (h(MgInput, { key: '66555a93c6c993b20b050eb22248c72b77cccf43', 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 }, h("select", { key: '5d4c2980b2949df96b0e3be85636fc463069e801', class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), 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
@@ -3516,14 +3516,14 @@ const MgInputText = class {
      * @returns HTML Element
      */
     render() {
-        return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-c-input__with-character-left", style: {
+        return (h(MgInput, { key: 'cb20a38ce93389f724b1e97cadd12e8c70b9d1da', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { key: '87607c013e38407eeb9f5c42d25fd5164eb065ec', class: "mg-c-input__with-character-left", style: {
                 '--mg-character-left-message-length': (this.displayCharacterLeft
                     ? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
                     : 0).toString(),
-            } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-c-input__box", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
+            } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { key: 'c12cf678c274d58c84618c7b7d7d7bca4740359c', type: this.type, class: "mg-c-input__box", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
-            } }), this.hasDatalist() && (h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (h("option", { value: option, key: option }))))), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { name: "append-input" })));
+            } }), this.hasDatalist() && (h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (h("option", { value: option, key: option }))))), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { key: 'be764e76497ea2bc31e574c264f98d26fae9accd', name: "append-input" })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -3739,7 +3739,7 @@ const MgInputTextarea = class {
      * @returns HTML Element
      */
     render() {
-        return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-c-input__with-character-left" }, h("textarea", { class: {
+        return (h(MgInput, { key: 'c77be56541d90814c1b829182dcccfbdb4321f15', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { key: '5380abe8e0fcf53da64108a2ea05de407ca63885', class: "mg-c-input__with-character-left" }, h("textarea", { key: '75065e3b389fd60796a7f83232b50fdae06e3b4f', class: {
                 'mg-c-input__box': true,
                 'mg-c-input__box--resizable': this.resizable === 'both',
                 'mg-c-input__box--resizable-horizontal': this.resizable === 'horizontal',
@@ -3799,7 +3799,7 @@ const MgInputTitle = class {
     render() {
         const TagName = this.readonly ? 'span' : this.tagName;
         // \u00A0 represent a &nbsp;
-        return (h(TagName, { class: "mg-c-input-title", htmlFor: this.isLegend ? undefined : this.identifier }, h("slot", null), this.required && (h("span", { class: "mg-c-input-title__required" }, "\u00A0", h("span", { class: "mg-u-is-asterisk" }, "*")))));
+        return (h(TagName, { key: '6d9a02cd0ebaede9bcb6aa92368c89cf0da83cd6', class: "mg-c-input-title", htmlFor: this.isLegend ? undefined : this.identifier }, h("slot", { key: 'e5b41b42d0988f21896a11a1dea864b025b2a9eb' }), this.required && (h("span", { class: "mg-c-input-title__required" }, "\u00A0", h("span", { class: "mg-u-is-asterisk" }, "*")))));
     }
     static get watchers() { return {
         "identifier": ["validateIdentifier"],
@@ -4004,7 +4004,7 @@ const MgInputToggle = class {
      * @returns HTML Element
      */
     render() {
-        return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" })))));
+        return (h(MgInput, { key: '2637550cb5e98dc92cba8c362610a246e537473d', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("button", { key: '63e4399d445ce876c767a045c6bab8d4f20da1be', type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { key: 'b38f16ddaaa4c0ce8f32a46d5ca22fe0b0656ad5', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { key: 'dd910979d5043a56f98358b2443507440cec8a93', name: "item-1" })), h("span", { key: 'acc65197a4f30f7b65c070f9f9299e7a5e913040', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { key: 'dee4de86838005833bfa1a613b21f065354ca2f4', name: "item-2" })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -4176,7 +4176,7 @@ const MgMenu = class {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { role: "list", "aria-label": this.label }, h("slot", null)));
+        return (h(Host, { key: '22c0f16663ac432526aef9d0ec1c3d9152b8ca3a', role: "list", "aria-label": this.label }, h("slot", { key: 'de77bd6471725518cf14b9a75fb513a3d65a8033' })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -4469,7 +4469,7 @@ const MgMenuItem = class {
             ['mg-c-menu-item__collapse-container']: true,
             ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
         });
-        return (h(Host, { role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
+        return (h(Host, { key: 'b3932a090814940718c7f3dd0bc9a9636e2fcb88', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
             this.renderInteractiveElement(),
             h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
         ])));
@@ -4646,7 +4646,7 @@ const MgMessage = class {
         let role;
         if (!this.noAriaRole)
             role = this.variant === 'info' ? 'status' : 'alert';
-        return (h("div", { id: this.identifier, class: this.classCollection.join(), role: role }, h("mg-card", { variant: this.variant, "variant-style": "bar-left" }, h("span", { class: "mg-c-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-c-message__content" }, h("span", { class: "mg-c-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-c-message__content-separator" }), this.hasActions && (h("span", { class: "mg-c-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-c-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
+        return (h("div", { key: 'e322f37d30825ef3a35487c0073d88690468a3c5', id: this.identifier, class: this.classCollection.join(), role: role }, h("mg-card", { key: 'fde621ad12803042b0521f663e046fa9e8554123', variant: this.variant, "variant-style": "bar-left" }, h("span", { key: '7b58b099e831bd6c21c9d2e5227f348982164e56', class: "mg-c-message__icon" }, h("mg-icon", { key: '213105901e4bbd702464a458dab131824a70904b', icon: this.getIcon() })), h("div", { key: '0084693dfc77abb64296ce4d85e1e30b24122623', class: "mg-c-message__content" }, h("span", { key: '8b17d62709ebde902e2ca52764ed7d053cbd0c51', class: "mg-c-message__content-slot" }, h("slot", { key: '0f63025c6b86b318b60b6a32bc75af366d439536' })), this.hasActions && h("span", { class: "mg-c-message__content-separator" }), this.hasActions && (h("span", { class: "mg-c-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-c-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -4819,14 +4819,14 @@ const MgModal = class {
      * @returns HTML Element
      */
     render() {
-        return (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 }, h("mg-card", null, h("div", { class: "mg-c-modal__dialog" }, h("header", { class: "mg-c-modal__header" }, this.closeButton && (h("span", { class: "mg-c-modal__close-button" }, h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
+        return (h("div", { key: '0175582c259397c75a0c859db678e59318be9f64', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", { key: '6ba0b633bed3c94e0931ea9123b891f3439bf5db' }, h("div", { key: '111e1557f32cbe74868254a91684d4df302b4724', class: "mg-c-modal__dialog" }, h("header", { key: '0f5c843e91f2f5d9ccffe5235c799517edd71f08', class: "mg-c-modal__header" }, this.closeButton && (h("span", { class: "mg-c-modal__close-button" }, 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;
                     // add close button element to modalFocusableElements when it is render
                     this.modalFocusableElements.unshift(this.closeButtonElement);
                 }
-            } }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-c-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-c-modal__footer" }, h("slot", { name: "actions" })))))));
+            } }, h("mg-icon", { icon: "cross" })))), h("h1", { key: 'a53e0fbf3aa30611f1713b7a54f7fb30a6a3efe2', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-c-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-c-modal__footer" }, h("slot", { name: "actions" })))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -4941,10 +4941,10 @@ const MgPagination = class {
      * @returns HTML Element
      */
     render() {
-        const navigationActionButton = (disabled, action) => (h("mg-button", { identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
+        const navigationActionButton = (disabled, action) => (h("mg-button", { key: 'fae66f3fc39b3f567b3b6ae53afac3c135fdd9a6', identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
             // eslint-disable-next-line react/jsx-no-bind
             onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
-        return (h(Host, { hidden: this.totalPages < 2 }, h("nav", { role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true })), h("span", { class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), h("span", { class: { 'mg-u-visually-hidden': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
+        return (h(Host, { key: '912c267aae01f5a47c974ec022989fb419d8d5f5', hidden: this.totalPages < 2 }, h("nav", { key: 'e35ec4da6ca6b3bc873b7f4e0652c0f8f58f7e67', role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true })), h("span", { key: '9ab8adf0d144ac80dda6115817bed6542a7a0b75', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), h("span", { key: 'fb0ff50457a99efd3e4663e798b92379bc4a7328', class: { 'mg-u-visually-hidden': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -5128,7 +5128,7 @@ const MgPanel = class {
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (h("section", { class: this.classCollection.join(), id: this.identifier }, h("mg-card", null, h("header", { class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", null)))));
+        return (h("section", { key: '99eacbda239db3efc037c733b4f075df90ebf640', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '7ac8b66fdbdefb7c95fbb9624b5355c774387590' }, h("header", { key: 'd91141917f84c9170fe4df928239d7bfcf13007f', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: 'f5b321a6ea10d27bb418fd44069de156e9b8fda2', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '73fe045e630f46d950496af0aa28a88778a4f7b4' })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -7133,7 +7133,7 @@ const MgPopover = class {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, null, h("slot", null), h("slot", { name: "content" })));
+        return (h(Host, { key: 'a3228ac886665c7c8e384bda6d18c4525111ecc9' }, h("slot", { key: '067e65b7c0d917afe2bce54787bc1501309118b4' }), h("slot", { key: 'b8c0b73a5d93558d038fa2b00c18aa390fbe4466', name: "content" })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -7186,7 +7186,7 @@ const MgPopoverContent = class {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, null, h("mg-card", { class: this.classCollection.join() }, this.closeButton && (h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-c-popover-content__title" }, h("slot", { name: "title" })), h("slot", { name: "content" })), h("slot", { name: "arrow" })));
+        return (h(Host, { key: 'fed1eed9b8f3523f811db3e79513b96b1b4087c7' }, h("mg-card", { key: '4ab3bc4772afd16ec2ba0aec416870d37da034c9', class: this.classCollection.join() }, this.closeButton && (h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { key: '05b96b09f510092abe5b49666eabd595f4afbcae', class: "mg-c-popover-content__title" }, h("slot", { key: 'cbefee4aa0785437bdcf19ae60eb83cca210953f', name: "title" })), h("slot", { key: 'cdcfa55e9277cff737eccc3930d9ee6e6f5d56fc', name: "content" })), h("slot", { key: '29d748fdb01335b11ae6c3ff08e45966675ca8d9', name: "arrow" })));
     }
     get element() { return getElement(this); }
 };
@@ -7232,7 +7232,7 @@ const MgSkipLinks = class {
      * @returns HTML Element
      */
     render() {
-        return (h("nav", { class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
+        return (h("nav", { key: '07531692764bd78b31166f7a1ed28ae2c51a5519', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: '2faca0734ba02eaed7c7c2e22510d5e00cbe3e42', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -7463,7 +7463,7 @@ const MgTabs = class {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { class: this.classCollection.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
+        return (h("div", { key: 'a48c7591210f5d2a4e4ba9f56ea3b72797fe3c92', class: this.classCollection.join() }, h("header", { key: '74f35071efd4edaa25c9d92faa45e89bd89a1c27', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
                 [`${this.buttonTabBaseClass}`]: true,
                 [`${this.buttonTabBaseClass}--horizontal`]: true,
                 [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
@@ -7558,7 +7558,7 @@ const MgTag = class {
      * @returns HTML Element
      */
     render() {
-        return (h("span", { class: this.classCollection.join() }, h("slot", null)));
+        return (h("span", { key: '15dd499acdc87ca43c277bb7561646fa9c44f4c0', class: this.classCollection.join() }, h("slot", { key: '3237e437f07cede09a85997be8a73e98f26d78b2' })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -7873,7 +7873,7 @@ const MgTooltip = class {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, null, h("slot", null), h("slot", { name: "content" })));
+        return (h(Host, { key: '39e72edae07252421d527bfbeede585a27d2663c' }, h("slot", { key: '0402c8ea5aa2dea27e66a621e3d905356786dd27' }), h("slot", { key: 'e194462c062b565a6cb0e6330fa841a29746445d', name: "content" })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -7901,7 +7901,7 @@ const MgTooltipContent = class {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { role: "tooltip" }, h("span", { innerHTML: this.message, class: "mg-tooltip-content__message" }), h("slot", { name: "arrow" })));
+        return (h(Host, { key: 'a26eb86dd6c3461563b2c532b1330f8897eb2da6', role: "tooltip" }, h("span", { key: 'eff274511b40c5e60429ebc387e32717854f7ffc', innerHTML: this.message, class: "mg-tooltip-content__message" }), h("slot", { key: '3b26eabf4471f34ae3997faa81e667341d26bee5', name: "arrow" })));
     }
 };
 MgTooltipContent.style = MgTooltipContentStyle0;