@watermarkinsights/ripple 5.19.0-alpha.9 → 5.19.1-alpha.0

package/dist/collection/components/wm-snackbar/wm-snackbar.css

@@ -860,37 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host * {
   box-sizing: border-box;
   margin: unset;

package/dist/collection/components/wm-snackbar/wm-snackbar.js

@@ -33,24 +33,20 @@ export class Snackbar {
         this.resetUpdatedNotifications(prevParsedNotifications);
         if (prevParsedNotifications.length < this.parsedNotifications.length) {
             const latestNotification = this.parsedNotifications[0];
+            // don't announce link if user is tabbing because link is focused after announcement
+            this.announce(`${latestNotification.message} ${this.isTabbing ? "" : latestNotification.link}`);
             if (!latestNotification.link) {
                 const newTimer = window.setTimeout(() => this.snackExpired(latestNotification.id), 6000);
                 this.timers = Object.assign({ [latestNotification.id]: newTimer }, this.timers);
             }
-            else {
-                if (this.isTabbing) {
-                    this.focusOnDismiss = document.activeElement ? document.activeElement : null;
-                    this.stopTimer(latestNotification);
-                    // allow snack to render before focusing
-                    window.setTimeout(() => {
-                        const link = this.el.shadowRoot.querySelector(`#action-${latestNotification.id}`);
-                        link.focus();
-                    });
-                }
-                else {
-                    // don't announce link if user is tabbing because link is focused after announcement
-                    !this.isTabbing && this.announce(`${latestNotification.message} ${latestNotification.link}`);
-                }
+            else if (this.isTabbing) {
+                this.focusOnDismiss = document.activeElement ? document.activeElement : null;
+                this.stopTimer(latestNotification);
+                // allow snack to render before focusing
+                window.requestAnimationFrame(() => {
+                    const link = this.el.shadowRoot.querySelector(`#action-${latestNotification.id}`);
+                    link.focus();
+                });
             }
         }
     }
@@ -149,11 +145,11 @@ export class Snackbar {
             }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link), notification.newWindow && h("div", { class: "svg-icon svg-open-in-new" })))), h("button", { id: `close-button-${notification.id}`, "aria-label": this.closeSnackMessage, class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => showTooltip("bottom", ev.target, globalMessages.close), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.isTabbing && showTooltip("bottom", ev.target, globalMessages.close), onBlur: () => hideTooltip() }, h("div", { class: "svg-icon svg-close" }))), h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
     }
     render() {
-        return (h(Host, { key: '2b062c8a3acb61667fee361512d91b9e08c27a07' }, h("div", { key: 'c4643e64a3e706732dd2b44d94938c73ee7914cb', ref: (el) => (this.snackAreaEl = el), class: {
+        return (h(Host, { key: '01264c3db9744e9b71b6c8cc05c9c80f3c8086c4' }, h("div", { key: '0e49a6805c3f36589077c8685c58ef2e75196a6a', ref: (el) => (this.snackAreaEl = el), class: {
                 "list-wrapper": true,
                 "user-is-tabbing": this.isTabbing,
                 empty: this.parsedNotifications.length == 0,
-            } }, this.renderSnackbars()), h("div", { key: 'd886c23167016f1ea92da9edd75b1b8ffbafe098', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+            } }, this.renderSnackbars()), h("div", { key: '9c4ea98f1ce40e18e82ef66684bd3d7481343a36', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "wm-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-tag-input/wm-tag-input.css

@@ -882,13 +882,13 @@
   --wmcolor-taginput-option-text-selected: var(--wmcolor-option-text-disabled);
   --wmcolor-taginput-option-text: var(--wmcolor-interactive);
   --wmcolor-taginput-row-background-hover: var(--wmcolor-interactive-background-hover);
-  --wmcolor-taginput-row-background-focus: var(--wmcolor-interactive-background-focus);
+  --wmcolor-taginput-row-background-focus: var(--wmcolor-background-selected);
   --wmcolor-taginput-row-background-selected: var(--wmcolor-table-row-background-selected);
   --wmcolor-taginput-row-background-table: var(--wmcolor-table-row-background);
   --wmcolor-taginput-row-border-selected: var(--wmcolor-table-row-border-selected);
   --wmcolor-taginput-tag-background-highlight: var(--wmcolor-interactive-background-highlight);
   --wmcolor-taginput-tag-background-locked: var(--wmcolor-interactive-disabled);
-  --wmcolor-taginput-tag-background: var(--wmcolor-palelilacgray); /* EXCEPTION */
+  --wmcolor-taginput-tag-background: var(--wmcolor-lilacgray-30); /* EXCEPTION */
   --wmcolor-taginput-tag-text-locked: var(--wmcolor-text-ondark);
   --wmcolor-taginput-tag-text: var(--wmcolor-text);
   --wmcolor-taginput-tagbutton-background-hover: var(--wmcolor-interactive-hover);
@@ -1218,11 +1218,12 @@
   outline: none;
   background: var(--wmcolor-taginput-option-background-hover);
 }
-:host .dropdown-wrapper li.option.focused, :host .dropdown-wrapper li.add-new-btn.focused,
-:host .dropdown-wrapper div.option.focused,
-:host .dropdown-wrapper div.add-new-btn.focused {
+:host .dropdown-wrapper li.option.focused:not(:hover), :host .dropdown-wrapper li.add-new-btn.focused:not(:hover),
+:host .dropdown-wrapper div.option.focused:not(:hover),
+:host .dropdown-wrapper div.add-new-btn.focused:not(:hover) {
   outline: none;
   background: var(--wmcolor-taginput-option-background-focus);
+  color: var(--wmcolor-interactive-text);
 }
 :host .dropdown-wrapper li.help-text,
 :host .dropdown-wrapper div.help-text {
@@ -1245,9 +1246,6 @@
   overflow: auto;
   margin-block-start: 1.5rem;
 }
-:host .table-wrapper:focus {
-  outline: none;
-}
 :host .table-wrapper #table {
   width: 100%;
   border-spacing: 0px;
@@ -1266,6 +1264,9 @@
   text-transform: uppercase;
   padding: 0 1.5rem;
 }
+:host .table-wrapper #table:focus {
+  outline: none;
+}
 :host .table-wrapper tr:nth-child(even) {
   background-color: var(--wmcolor-taginput-altrow-background-table);
 }

package/dist/collection/components/wm-tag-input/wm-tag-input.js

@@ -634,7 +634,7 @@ export class TagInput {
             }
         }
     }
-    handleTableWrapperFocus() {
+    handleTableFocus() {
         // Forward focus to first focusable table row when container receives focus
         // First try filtered options, then fall back to all options
         let targetOptions = this.filteredOptionEls;
@@ -717,6 +717,14 @@ export class TagInput {
                     // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
                     showTooltip("bottom", this._focusedOption, this._focusedOption.innerText);
                 }
+                const tableEl = this.el.shadowRoot.querySelector("#table");
+                if (!(this.el.shadowRoot.activeElement == tableEl)) {
+                    tableEl.focus();
+                }
+                if (this.filteredOptionEls.length > 0 && this.focusedOption == this.filteredOptionEls[0]) {
+                    // When the focused option is the first option, scroll to the top of the table so headers are visible
+                    this.el.shadowRoot.querySelector(".table-wrapper").scrollTop = 0;
+                }
             }
             optionToFocus.scrollIntoView({ block: "nearest" });
         }
@@ -815,6 +823,12 @@ export class TagInput {
     handleTagMouseEnter(ev) {
         this.showTooltipIfTruncated(ev.target);
     }
+    renderDropdownInput() {
+        return (h("input", { id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": "dropdown", "aria-describedby": `help-text ${this.errorMessage ? "error " : ""} max-tags`, "aria-label": `${this.label} ${globalMessages.getCharacterLimit(this.characterLimit)}`, "aria-expanded": this.isExpanded.toString(), "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.characterLimit, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => this.handleBlur(ev), onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) }));
+    }
+    renderTableInput() {
+        return (h("input", { id: "input", class: "input", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": "table", "aria-describedby": `help-text ${this.errorMessage ? "error " : ""} max-tags`, "aria-label": this.label, placeholder: this.placeholder, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => this.handleBlur(ev), onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) }));
+    }
     renderDropdown() {
         return (h("div", { class: `dropdown-wrapper ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { id: "help-text", class: "help-text" }, this.renderHelpText()), h("ul", { class: "dropdown", id: "dropdown", role: "listbox", "aria-multiselectable": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.label, tabindex: -1 }, this.inputEl && this.renderAddNewButton(), this.filteredOptionEls.map((o) => this.renderListItem(o)))));
     }
@@ -841,11 +855,8 @@ export class TagInput {
     renderTable() {
         return (h("div", { class: `table-wrapper ${this.isKeying ? "user-is-keying" : ""}`, onScroll: () => this.dismissTooltip(),
             // browsers will make this container tabbable if it scrolls
-            // this handler will forward focus to the appropriate element within the table...
-            onFocus: () => this.handleTableWrapperFocus(),
-            // ...and for consistency, the table, whether it scrolls or not, should be tabbable
-            // as long as it's not empty
-            tabindex: this.filteredOptionEls.length ? "0" : undefined, onKeyDown: (ev) => this.handleTableWrapperKeyDown(ev) }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true" }, this.renderTableHeaders(), this.filteredOptionEls.length ? (this.filteredOptionEls.map((o) => this.renderTableRow(o))) : (h("div", { class: "no-results" }, this.noResultsMessage)))));
+            // we need to proactively set tabindex to -1 to avoid user focus. This is okay, because the table provides behavior that allows scrolling its content
+            tabindex: -1, onKeyDown: (ev) => this.handleTableWrapperKeyDown(ev) }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true", onFocus: () => this.handleTableFocus(), "aria-activedescendant": this._focusedCell ? this._focusedCell.id : undefined, tabindex: this.filteredOptionEls.length ? "0" : undefined }, this.renderTableHeaders(), this.filteredOptionEls.length ? (this.filteredOptionEls.map((o) => this.renderTableRow(o))) : (h("div", { class: "no-results" }, this.noResultsMessage)))));
     }
     renderTableHeaders() {
         return (h("tr", { class: "headers", role: "row" }, csvToArray(this.colHeaders).map((header, idx) => (h("th", { class: "header-cell", role: "columnheader",
@@ -916,12 +927,10 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { key: '3b80913e5cebf97f7da13646d3ba2ebca1ff7acb', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '3046fd2f7c843d6dd7049063164ba1ecbb791bed', class: "label-wrapper" }, h("label", { key: 'd33734b6cbe7dff0b512bf760bdf1ff26a756446', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.requiredField && (h("div", { key: '9c0e3c6662a75f33e9506d5051b01119afea6327', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'ebd9f767f4b4b715078845aed067e10471394bd7', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '62a1b95c2a0d7b3f2cf0f2386eb0cd9e1aeba303', class: "upper-row" }, h("div", { key: 'a6c0facb5651b3e6009e26f193c381b7a4ec002f', class: "svg-icon svg-search" }), h("div", { key: '9020b2b35aa161b72f073b9a0eb2a963680d3727', class: `tags-and-input-wrapper` }, h("ul", { key: 'e5136c64a45cf4f6f7a759721e126b55066b386b', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
+        return (h("div", { key: 'a605a67a736cfced28788202c713c9a471829815', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '2b6e16b5779bfe055260370775e3517378917636', class: "label-wrapper" }, h("label", { key: 'b47147159b09e53988dba0f360665853ef522167', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.requiredField && (h("div", { key: '06afe2cbaf6a32989ee70fd50725adb875d9a8b3', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'ba9a1ed7545a2f0b3b72ebdf23231de7df9abf20', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '03b6ba86a93df334ba0af0e5759cb0834f5e002e', class: "upper-row" }, h("div", { key: '5a4b29d9cdcc228426a29524d51e47be84728da8', class: "svg-icon svg-search" }), h("div", { key: 'ddd1831f74b7a5204b9ee0077bfe475e5782369c', class: `tags-and-input-wrapper` }, h("ul", { key: '0f561a33d4fd7dc683d04bc6c47f0e0f6c096f0a', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
                 this.focusedTagIndex = undefined;
                 this.handleBlur(ev);
-            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { key: 'e6b95de440173ace0008faacd3b8bea77af0da8c', id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""} max-tags`, "aria-label": `${this.label} ${this.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
-                this.handleBlur(ev);
-            }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { key: '418f93ca2ea86a1fa46a6d2f601c84e309c32a2f', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'a4a98937151304e2d9357f0522d445b6f841eb02', id: "info", class: "info-text" }, this.info)), h("div", { key: 'b6ac66b1e5a056503da95df5b1eec2bcba259b76', id: "error" }, this.errorMessage), h("div", { key: '5f7e12833cadb8961f850aa47a8e61262e6d3779', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: 'cd62e6627ab5932fb436f333cfb4a33ba3404adc', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '7cc8c9ba718417cbea5b26b15f7f671b5ad2ee06', id: "info", class: "info-text" }, this.info)), h("div", { key: 'a8be5ef2c7f945226f9136c0009a9ce3bcc33686', id: "error" }, this.errorMessage), h("div", { key: '3159070da0e032545bf5e3b2ae1e7d8eb6917e69', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
     }
     static get is() { return "wm-tag-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-textarea/wm-textarea.js

@@ -71,7 +71,7 @@ export class Textarea {
         this.announcement = message;
     }
     render() {
-        return (h("div", { key: '5bd7daf935fa75bec3fccc000c4674b23da1c043', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '52f18f7ef95fb4505f19ec57b3328db9706af750', class: "label-wrapper" }, h("label", { key: '510bf29970364b1caacfd1eef164a2f766217df2', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '47024a21e0940c6c40dde2b131c337636fe1bbdf', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (h("span", { key: 'dff37fb5a589b44b4eb249b0b3a572e9944a15cb', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '8dda587667514bbf0db310491cf58d2b3ea00fea', class: "inner-wrapper" }, h("div", { key: '8782435cdc9150197ac29a09fd6b3d6b95413c59', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '3d7a017570a79669f03914e00be725a633717c66', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: '7cfb20e30f1413096a861089e932aabc46be0593', id: "info", class: "info" }, this.info)), h("div", { key: '2f450eb52e3bf5e805e125f19e59766c4d45a75c', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '024947b6fa1ef096bb09c1c9183984e647ed5432', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: 'c2bdf3a833b32103d85e4d19572985dde836aeb8', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '61f16420145b5289639728f06f7a7e9c90ecb220', class: "label-wrapper" }, h("label", { key: 'cf3a1d2dbe614498ce76f7d10252ddabe591ffc7', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: 'ed53aebd7ba2338ba9a34db8ed84f86266fb01a0', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (h("span", { key: 'c91d58aa6d531d19ca62227f1f9ae6776dc2e6eb', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'abbd117e4231de2ee3d696216d869a3ac3078240', class: "inner-wrapper" }, h("div", { key: 'e94b2f9f8bbf6d5e374e68555ac266789283b280', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '908e5bb512ed6253d5f1c9cb593f74cf5766ef8c', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: '51239b18371da181395d159315d280e1993383cd', id: "info", class: "info" }, this.info)), h("div", { key: 'dd678537871b6ac6efeec23995a1c8bb5a9c3fbb', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '54e35dfe321a05965fc555814cdd3235457a0871', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-timepicker/wm-timepicker.css

@@ -860,37 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host * {
   box-sizing: border-box;
 }

package/dist/collection/components/wm-timepicker/wm-timepicker.js

@@ -281,13 +281,13 @@ export class Timepicker {
         return this.times.map((time, index) => (h("li", { id: `option${index + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
     }
     render() {
-        return (h(Host, { key: 'fd0acc447628174ea8551c1ea7cafdc8b0b6ec74', onBlur: () => this.close(false) }, h("div", { key: 'a8c7c453558df7a33fc42d71eff78894a36306d6', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '9f259605e513d12e32716f12b4d5dee9fb97d10a', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '1b1b596a992a66f6738cab61086c9d7298934e8c', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '4fc12427a1b3c62b9a6e7cd53c83cec311b46f1e', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '6f299347f62dd5299f0223bbdee82fc55dafe06a' }, h("div", { key: 'd78e3b28b110714558d94ba03bedc4d63e8a41d7', class: "inner-wrapper" }, h("input", { key: '1af64c4c0ab7bd983d3e926ad1ea146bed0dadea', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { key: 'a99cd67d7bfa17c4ba512b73097b5987b8d5d4f8', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
+        return (h(Host, { key: 'e05ceac51a9193466dff7a488803f09ae91c837a', onBlur: () => this.close(false) }, h("div", { key: '4bdd4087ff1b8c4956623571dc168d761646ce4e', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: 'c64a7486a1c3b74f61c94ce0b3f59c45e96b639e', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: 'cce428cf638a5932b1c157794e646f0b8026e1db', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '655e1585ffdb70eed624eeec16aa270f3f6584b6', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '85bf657eff58d0774a25d20c0eba53d7deadd98d' }, h("div", { key: '0152b10359dcb69a47275ee88e0a5c0b8cacf051', class: "inner-wrapper" }, h("input", { key: '32a55fbfebecafa786cafafc540016f52fcbf38a', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { key: '4c77218b291d0d3858c456c816a608b6d2e6d8c6', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
             // This addresses an issue in Safari, where clicking buttons does not focus them
             // if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event
             onMouseDown: (ev) => {
                 ev.preventDefault();
                 this.buttonEl.focus();
-            } }, h("span", { key: 'd50582487d9860716e0bdc67b99ac75b346d62aa', class: "svg-icon svg-time" })), h("ul", { key: '63a9ed95dc1c238d12d84150c406e5ff877d71b3', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { key: '25ea586bea9676a7d18c2fdeada1dcaf0a224471', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '4985d6ee5df49f687eaeeb06a1b5a0c8b14b7119', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
+            } }, h("span", { key: '0211abd0a1e89e3fd48278022f45572a8696a8de', class: "svg-icon svg-time" })), h("ul", { key: 'e7db5d8e3853b0c64099996064c17e361f3f0119', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { key: 'bb587cbf052b2b54ff5cd54cd1ee26e1015adf86', id: "error", class: "error" }, this.errorMessage)), h("div", { key: 'bf8d0736ecbd1c987b0d5c15a87537be665812d7', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
     }
     static get is() { return "wm-timepicker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-toggletip/wm-toggletip.js

@@ -229,11 +229,11 @@ export class Toggletip {
         }
     }
     render() {
-        return (h(Host, { key: '07c2a62e81a2df15f667ca84d440c96dc21a89f7', class: `size-${this.targetSize}` }, h("button", { key: 'd0cb8080843aa0c61fbc2a8280b12e25707ba79a', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
+        return (h(Host, { key: '2127bc9c0e5bebbf58fce82b7ea772a3b6fe2ada', class: `size-${this.targetSize}` }, h("button", { key: '55335d84975af0a4e6928b71d08745050454d4e4', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
             // In order to position the tooltip identically to the toggletip, its presence is determined by these four events
-            onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), h("div", { key: '1b082071110727cf565df491c69b8f2a7c58a3d4', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
+            onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), h("div", { key: 'de52ea584962f47a035c900af10e31951ec49ef6', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
             // @ts-ignore - despite what Typescript says, this is a valid event for popover elements
-            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), h("div", { key: '140540c39e67e60d63ed8c6e4435a7063a2bb16d', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), h("div", { key: '88e8da7742e5aa390fd17be1efd6067d25f71209', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-uploader/wm-uploader.css

@@ -1556,37 +1556,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host {
   display: block;
   position: relative;
@@ -1868,7 +1837,7 @@
   width: fit-content;
 }
 .requirements summary .title-text {
-  margin-inline-start: 2rem;
+  margin-inline-start: 1.5rem;
 }
 .requirements summary::marker {
   font-size: 0.75rem;
@@ -1913,7 +1882,7 @@
   flex-direction: column;
   gap: 0.25rem;
   margin-block-start: 0.25rem;
-  margin-inline-start: 2rem;
+  margin-inline-start: 1.5rem;
 }
 
 #file-count {

package/dist/collection/components/wm-uploader/wm-uploader.js

@@ -163,24 +163,28 @@ export class Uploader {
         }
     }
     handleProgressUpdate(mutationRecord) {
-        if (this.inProgressFileEls.length !== 0) {
-            const changeInUploadingFiles = this.prevUploadCount !== this.inProgressFileEls.length;
+        const uploadCount = this.inProgressFileEls.length;
+        if (uploadCount !== 0) {
+            const changeInUploadingFiles = this.prevUploadCount !== uploadCount;
             changeInUploadingFiles &&
-                this.announce(uploaderMessages.getFilesUploading(this.inProgressFileEls.length), this.assertiveLiveRegionEl);
-            this.notif = uploaderMessages.getFilesUploading(this.inProgressFileEls.length);
-            this.prevUploadCount = this.inProgressFileEls.length;
+                this.announce(uploaderMessages.getFilesUploading(uploadCount), this.assertiveLiveRegionEl);
+            this.notif = uploaderMessages.getFilesUploading(uploadCount);
+            this.prevUploadCount = uploadCount;
+            if (this.batchCount < uploadCount) {
+                this.batchCount = uploadCount;
+            }
             if (!this.srProgress) {
                 this.srProgress = setInterval(() => {
                     const aggregate = this.fileEls.reduce((avg, item) => (item.progress ? avg + item.progress : avg), 0);
-                    this.announce(uploaderMessages.getUploadProgress(Math.floor(aggregate / this.batchCount)), this.assertiveLiveRegionEl);
+                    const percentage = this.batchCount > 0 ? Math.floor(aggregate / this.batchCount) : 0;
+                    this.announce(uploaderMessages.getUploadProgress(percentage), this.assertiveLiveRegionEl);
                 }, 5000);
             }
         }
-        else if (this.inProgressFileEls.length === 0 &&
-            mutationRecord.oldValue &&
-            parseInt(mutationRecord.oldValue) < 100) {
+        else if (uploadCount === 0 && mutationRecord.oldValue && parseInt(mutationRecord.oldValue) < 100) {
             // if final file progress completes
             this.uploadButtonEl.value = "";
+            this.batchCount = 0;
             this.notif = uploaderMessages.finishedUploading;
             this.announce(uploaderMessages.finishedUploading, this.assertiveLiveRegionEl);
             clearInterval(this.srProgress);
@@ -309,9 +313,9 @@ export class Uploader {
         return (h("div", { class: `drop-area -${this.dropArea}`, ref: (el) => (this.dropAreaEl = el), onDragEnter: (ev) => this.handleDragEnter(ev), onDragOver: (ev) => this.handleDragOver(ev), onDragLeave: (ev) => this.handleDragLeave(ev), onDrop: (ev) => this.handleDrop(ev) }, this.dropArea == "page" && (h("div", { ref: (el) => (this.dropOverlayEl = el), class: "drop-overlay", popover: "manual" }, h("span", { class: "upload-arrow" }), h("span", null, "Drop to Upload")))));
     }
     render() {
-        return (h(Host, { key: 'b58548a627b616f7baf9e2218140583b42d2eeff', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: '4325b5923dd0879157bd0d0370ff2e9011fc3e89', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
+        return (h(Host, { key: '480a7275b0ebb68564f92433c8c522769ce60bc3', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: 'b2cec25d91186e5c8a8b7b851fe116bdfdd8c174', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
             ,
-            "aria-atomic": "true" }), h("div", { key: '4431d6e65f0b13f02a1b91c35a4fae6953c95a97', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), h("div", { key: 'eeb50c37630ba08df7e6be89ec30a55cefeafd9a', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-uploader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/dev/uploader.js

@@ -89,10 +89,10 @@ function handleFilesSelected(ev) {
         addFile(upl, newFile);
 
         // mock series of upload progress updates
-        setTimeout(() => updateUploadProgress(upl, fileId, 25), 1000);
-        setTimeout(() => updateUploadProgress(upl, fileId, 50), 3000 + uploadStagger);
-        setTimeout(() => updateUploadProgress(upl, fileId, 75), 3250 + uploadStagger);
-        setTimeout(() => updateUploadProgress(upl, fileId, 100), 3500 + uploadStagger);
+        setTimeout(() => updateUploadProgress(upl, fileId, 0.00), 1000 + 3000);
+        setTimeout(() => updateUploadProgress(upl, fileId, 25), 3000 + uploadStagger + 6000);
+        setTimeout(() => updateUploadProgress(upl, fileId, 75.5), 3250 + uploadStagger + 15000);
+        setTimeout(() => updateUploadProgress(upl, fileId, 100), 3500 + uploadStagger + 20000);
       } else {
         addError(upl, newFile, fileError);
       }

package/dist/esm/{app-globals-d5f43c8e.js → app-globals-ef63936e.js}

@@ -1,6 +1,6 @@
 import './index-130e07bb.js';
 
-const version = "5.19.0-alpha.9";
+const version = "5.19.1-alpha.0";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/esm/{chartFunctions-3a54f8ac.js → chartFunctions-613e9c87.js}

@@ -1,5 +1,5 @@
 import { h } from './index-130e07bb.js';
-import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-669184a6.js';
+import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-38e392cb.js';
 
 const colors = {
     salmon: "#ff5f4e",

package/dist/esm/{functions-669184a6.js → functions-38e392cb.js}

@@ -10585,4 +10585,4 @@ const weekdays = [
     intl.formatMessage({ id: "date.saturday", defaultMessage: "Saturday" }),
 ];
 
-export { findPrev as A, getTextDir as B, isElOrChild as C, throttle as D, getContextMeasurements as E, dateFind as F, calendar_months as G, findParentWithHiddenOverflow as H, transposeMatrix as I, wrapAround as J, getSmallestSkipInterval as K, calcPercentageInRange as L, makeISO as M, getMonthLength as N, weekdays as O, handleDisabledAttribute as a, triggerFormSubmit as b, checkForActiveElInShadow as c, debounce as d, safeMultiplyFloat as e, getPosition as f, generateId as g, hideTooltip as h, intl as i, findAllScrollableParents as j, dateToISO as k, shouldOpenUp as l, hasRoomRight as m, truncateText as n, getLastFocusableDescendant as o, csvToArray as p, snakeCaseToCamelCase as q, getNewIndexToFocus as r, showTooltip as s, toBool as t, getCumulativeScrollOffset as u, shouldOpenDown as v, shouldShiftRight as w, shouldShiftLeft as x, measureText as y, findNext as z };
+export { findPrev as A, getTextDir as B, throttle as C, getContextMeasurements as D, dateFind as E, calendar_months as F, findParentWithHiddenOverflow as G, transposeMatrix as H, wrapAround as I, getSmallestSkipInterval as J, calcPercentageInRange as K, isElOrChild as L, makeISO as M, getMonthLength as N, weekdays as O, handleDisabledAttribute as a, triggerFormSubmit as b, checkForActiveElInShadow as c, debounce as d, safeMultiplyFloat as e, getPosition as f, generateId as g, hideTooltip as h, intl as i, findAllScrollableParents as j, dateToISO as k, shouldOpenUp as l, hasRoomRight as m, truncateText as n, getLastFocusableDescendant as o, csvToArray as p, snakeCaseToCamelCase as q, getNewIndexToFocus as r, showTooltip as s, toBool as t, getCumulativeScrollOffset as u, shouldOpenDown as v, shouldShiftRight as w, shouldShiftLeft as x, measureText as y, findNext as z };

package/dist/esm/{intl-7906e2d7.js → intl-0b8f342e.js}

@@ -1,4 +1,4 @@
-import { i as intl } from './functions-669184a6.js';
+import { i as intl } from './functions-38e392cb.js';
 
 const globalMessages = {
     characterLimitReached: intl.formatMessage({