@dialpad/dialtone 9.66.0 → 9.67.0

package/dist/vue2/lib/emoji-picker.js

@@ -1,4 +1,4 @@
-import { DtTabGroup, DtTab } from "../chunks/tab-muPOS7JE.js";
+import { DtTabGroup, DtTab } from "../chunks/tab-V4cb44Ry.js";
 import { DtIcon } from "./icon.js";
 import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
 import { DtInput } from "./input.js";
@@ -6,16 +6,16 @@ import { DtButton } from "./button.js";
 import { emojisGrouped } from "@dialpad/dialtone-emojis";
 import { DtTooltip } from "./tooltip.js";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-TdxqLsS2.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "../common/constants.js";
 import "../common/utils.js";
 import "vue";
-import "../chunks/input-PhJeBN6r.js";
+import "../chunks/input-6kbd8Pju.js";
 import "../common/validators.js";
 import "./validation-messages.js";
 import "../chunks/link_constants-AfTWrr-n.js";
-import "../chunks/popover_constants-6YkPPbnk.js";
+import "../chunks/popover_constants-WsOUIY-m.js";
 import "tippy.js";
 const _sfc_main$5 = {
   name: "EmojiTabset",
@@ -50,34 +50,17 @@ const _sfc_main$5 = {
     return {
       selectedTab: "1",
       tabsetRef: [],
-      TABS_DATA: [{
-        label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED,
-        icon: "clock"
-      }, {
-        label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE,
-        icon: "satisfied"
-      }, {
-        label: EMOJI_PICKER_CATEGORIES.NATURE,
-        icon: "living-thing"
-      }, {
-        label: EMOJI_PICKER_CATEGORIES.FOOD,
-        icon: "food"
-      }, {
-        label: EMOJI_PICKER_CATEGORIES.ACTIVITY,
-        icon: "object"
-      }, {
-        label: EMOJI_PICKER_CATEGORIES.TRAVEL,
-        icon: "transportation"
-      }, {
-        label: EMOJI_PICKER_CATEGORIES.OBJECTS,
-        icon: "lightbulb"
-      }, {
-        label: EMOJI_PICKER_CATEGORIES.SYMBOLS,
-        icon: "heart"
-      }, {
-        label: EMOJI_PICKER_CATEGORIES.FLAGS,
-        icon: "flag"
-      }]
+      TABS_DATA: [
+        { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: "clock" },
+        { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: "satisfied" },
+        { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: "living-thing" },
+        { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: "food" },
+        { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: "object" },
+        { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: "transportation" },
+        { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: "lightbulb" },
+        { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: "heart" },
+        { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: "flag" }
+      ]
     };
   },
   computed: {
@@ -155,51 +138,28 @@ const _sfc_main$5 = {
 };
 var _sfc_render$5 = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", {
-    staticClass: "d-emoji-picker__tabset"
-  }, [_c("dt-tab-group", {
-    attrs: {
-      "tab-list-class": "d-emoji-picker__tabset-list",
-      "selected": _vm.selectedTab
-    },
-    scopedSlots: _vm._u([{
-      key: "tabs",
-      fn: function() {
-        return _vm._l(_vm.tabs, function(tab, index) {
-          return _c("dt-tab", {
-            key: tab.id,
-            ref: `tabsetRef-${index}`,
-            refInFor: true,
-            attrs: {
-              "id": tab.id,
-              "panel-id": tab.panelId,
-              "label": tab.label,
-              "aria-controls": "d-emoji-picker-list",
-              "tabindex": index + 1
-            },
-            on: {
-              "!click": function($event) {
-                $event.stopPropagation();
-                return _vm.selectTabset(tab.id);
-              },
-              "keydown": function($event) {
-                return _vm.handleKeyDown($event, tab.id);
-              }
-            }
-          }, [_c("dt-icon", {
-            attrs: {
-              "size": "400",
-              "name": tab.icon
-            }
-          })], 1);
-        });
-      },
-      proxy: true
-    }])
-  })], 1);
+  return _c("div", { staticClass: "d-emoji-picker__tabset" }, [_c("dt-tab-group", { attrs: { "tab-list-class": "d-emoji-picker__tabset-list", "selected": _vm.selectedTab }, scopedSlots: _vm._u([{ key: "tabs", fn: function() {
+    return _vm._l(_vm.tabs, function(tab, index) {
+      return _c("dt-tab", { key: tab.id, ref: `tabsetRef-${index}`, refInFor: true, attrs: { "id": tab.id, "panel-id": tab.panelId, "label": tab.label, "aria-controls": "d-emoji-picker-list", "tabindex": index + 1 }, on: { "!click": function($event) {
+        $event.stopPropagation();
+        return _vm.selectTabset(tab.id);
+      }, "keydown": function($event) {
+        return _vm.handleKeyDown($event, tab.id);
+      } } }, [_c("dt-icon", { attrs: { "size": "400", "name": tab.icon } })], 1);
+    });
+  }, proxy: true }]) })], 1);
 };
 var _sfc_staticRenderFns$5 = [];
-var __component__$5 = /* @__PURE__ */ normalizeComponent(_sfc_main$5, _sfc_render$5, _sfc_staticRenderFns$5, false, null, null, null, null);
+var __component__$5 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$5,
+  _sfc_render$5,
+  _sfc_staticRenderFns$5,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const EmojiTabset = __component__$5.exports;
 const _sfc_main$4 = {
   name: "EmojiSearch",
@@ -245,74 +205,38 @@ const _sfc_main$4 = {
 };
 var _sfc_render$4 = function render2() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", {
-    staticClass: "d-emoji-picker__search d-emoji-picker__alignment"
-  }, [_c("dt-input", {
-    ref: "searchInputRef",
-    attrs: {
-      "id": "searchInput",
-      "placeholder": _vm.searchPlaceholderLabel,
-      "value": _vm.modelValue
-    },
-    on: {
-      "input": _vm.updateModelValue,
-      "keydown": [function($event) {
-        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]))
-          return null;
-        return _vm.focusTabset.apply(null, arguments);
-      }, function($event) {
-        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"]))
-          return null;
-        $event.preventDefault();
-        return _vm.focusEmojiSelector.apply(null, arguments);
-      }, function($event) {
-        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
-          return null;
-        return _vm.selectFirstEmoji.apply(null, arguments);
-      }]
-    },
-    scopedSlots: _vm._u([{
-      key: "leftIcon",
-      fn: function() {
-        return [_c("dt-icon", {
-          attrs: {
-            "name": "search",
-            "size": "200"
-          }
-        })];
-      },
-      proxy: true
-    }, _vm.modelValue.length > 0 ? {
-      key: "rightIcon",
-      fn: function() {
-        return [_c("dt-button", {
-          attrs: {
-            "importance": "clear",
-            "kind": "muted"
-          },
-          on: {
-            "click": _vm.clearSearch
-          },
-          scopedSlots: _vm._u([{
-            key: "icon",
-            fn: function() {
-              return [_c("dt-icon", {
-                attrs: {
-                  "name": "x-circle",
-                  "size": "200"
-                }
-              })];
-            },
-            proxy: true
-          }], null, false, 1385861752)
-        })];
-      },
-      proxy: true
-    } : null], null, true)
-  })], 1);
+  return _c("div", { staticClass: "d-emoji-picker__search d-emoji-picker__alignment" }, [_c("dt-input", { ref: "searchInputRef", attrs: { "id": "searchInput", "placeholder": _vm.searchPlaceholderLabel, "value": _vm.modelValue }, on: { "input": _vm.updateModelValue, "keydown": [function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]))
+      return null;
+    return _vm.focusTabset.apply(null, arguments);
+  }, function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"]))
+      return null;
+    $event.preventDefault();
+    return _vm.focusEmojiSelector.apply(null, arguments);
+  }, function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
+      return null;
+    return _vm.selectFirstEmoji.apply(null, arguments);
+  }] }, scopedSlots: _vm._u([{ key: "leftIcon", fn: function() {
+    return [_c("dt-icon", { attrs: { "name": "search", "size": "200" } })];
+  }, proxy: true }, _vm.modelValue.length > 0 ? { key: "rightIcon", fn: function() {
+    return [_c("dt-button", { attrs: { "importance": "clear", "kind": "muted" }, on: { "click": _vm.clearSearch }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+      return [_c("dt-icon", { attrs: { "name": "x-circle", "size": "200" } })];
+    }, proxy: true }], null, false, 1385861752) })];
+  }, proxy: true } : null], null, true) })], 1);
 };
 var _sfc_staticRenderFns$4 = [];
-var __component__$4 = /* @__PURE__ */ normalizeComponent(_sfc_main$4, _sfc_render$4, _sfc_staticRenderFns$4, false, null, null, null, null);
+var __component__$4 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$4,
+  _sfc_render$4,
+  _sfc_staticRenderFns$4,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const EmojiSearch = __component__$4.exports;
 const _sfc_main$3 = {
   name: "EmojiSelector",
@@ -361,7 +285,16 @@ const _sfc_main$3 = {
   computed: {
     /* eslint-disable-next-line complexity */
     currentEmojis() {
-      return [...this.emojis[`People${this.skinTone}`] || [], ...this.emojis.Nature || [], ...this.emojis.Food || [], ...this.emojis[`Activity${this.skinTone}`] || [], ...this.emojis.Travel || [], ...this.emojis[`Objects${this.skinTone}`] || [], ...this.emojis.Symbols || [], ...this.emojis.Flags || []];
+      return [
+        ...this.emojis[`People${this.skinTone}`] || [],
+        ...this.emojis.Nature || [],
+        ...this.emojis.Food || [],
+        ...this.emojis[`Activity${this.skinTone}`] || [],
+        ...this.emojis.Travel || [],
+        ...this.emojis[`Objects${this.skinTone}`] || [],
+        ...this.emojis.Symbols || [],
+        ...this.emojis.Flags || []
+      ];
     },
     emojis() {
       return emojisGrouped;
@@ -370,13 +303,7 @@ const _sfc_main$3 = {
       return CDN_URL;
     },
     tabLabels() {
-      return this.recentlyUsedEmojis.length ? this.tabSetLabels.map((label, index) => ({
-        label,
-        ref: this.$refs[`tabLabelRef-${index}`]
-      })) : this.tabSetLabels.slice(1).map((label, index) => ({
-        label,
-        ref: this.$refs[`tabLabelRef-${index}`]
-      }));
+      return this.recentlyUsedEmojis.length ? this.tabSetLabels.map((label, index) => ({ label, ref: this.$refs[`tabLabelRef-${index}`] })) : this.tabSetLabels.slice(1).map((label, index) => ({ label, ref: this.$refs[`tabLabelRef-${index}`] }));
     },
     tabs() {
       return this.recentlyUsedEmojis.length ? this.TABS_DATA : this.TABS_DATA.slice(1);
@@ -436,10 +363,7 @@ const _sfc_main$3 = {
       (_a = this.tabSetLabels) == null ? void 0 : _a.forEach((label, index) => {
         const refKey = `tabLabelRef-${index}`;
         if (this.$refs[refKey]) {
-          this.$set(this.tabLabels, index, {
-            label,
-            ref: this.$refs[refKey]
-          });
+          this.$set(this.tabLabels, index, { label, ref: this.$refs[refKey] });
         }
       });
     },
@@ -710,9 +634,7 @@ const _sfc_main$3 = {
         this.$emit("is-scrolling", false);
         entries.forEach((entry) => {
           var _a, _b, _c, _d, _e, _f;
-          const {
-            target
-          } = entry;
+          const { target } = entry;
           const index = parseInt(target.dataset.index);
           if (entry.isIntersecting && target.offsetTop <= ((_a = this.$refs.tabCategoryRef) == null ? void 0 : _a.offsetTop) + 50) {
             this.fixedLabel = ((_b = this.tabLabels[index - 1]) == null ? void 0 : _b.label) ?? ((_c = this.tabLabels[0]) == null ? void 0 : _c.label);
@@ -739,123 +661,47 @@ const _sfc_main$3 = {
 };
 var _sfc_render$3 = function render3() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", {
-    staticClass: "d-emoji-picker__selector"
-  }, [_c("div", {
-    ref: "listRef",
-    staticClass: "d-emoji-picker__list",
-    attrs: {
-      "id": "d-emoji-picker-list"
-    }
-  }, [_vm.emojiFilter ? _c("p", {
-    staticClass: "d-emoji-picker__search-label d-emoji-picker__alignment"
-  }, [_vm._v(" " + _vm._s(_vm.filteredEmojis.length > 0 ? _vm.searchResultsLabel : _vm.searchNoResultsLabel) + " ")]) : _c("div", {
-    ref: "tabCategoryRef",
-    staticClass: "d-emoji-picker__category d-emoji-picker__alignment"
-  }, [_c("p", [_vm._v(" " + _vm._s(_vm.fixedLabel) + " ")])]), _vm._l(_vm.tabLabels, function(tabLabel, indexTab) {
-    return _c("div", {
-      directives: [{
-        name: "show",
-        rawName: "v-show",
-        value: !_vm.emojiFilter,
-        expression: "!emojiFilter"
-      }],
-      key: indexTab,
-      ref: `tabLabelRef-${indexTab}`,
-      refInFor: true,
-      staticClass: "d-emoji-picker__alignment"
-    }, [indexTab ? _c("p", [_vm._v(" " + _vm._s(tabLabel.label) + " ")]) : _vm._e(), _c("div", {
-      staticClass: "d-emoji-picker__tab"
-    }, _vm._l(_vm.emojis[_vm.tabs[indexTab] + _vm.skinTone] ? _vm.emojis[_vm.tabs[indexTab] + _vm.skinTone] : _vm.emojis[_vm.tabs[indexTab]], function(emoji, indexEmoji) {
-      return _c("button", {
-        key: emoji.shortname,
-        ref: `emojiRef-${indexTab}`,
-        refInFor: true,
-        attrs: {
-          "type": "button",
-          "aria-label": emoji.name
-        },
-        on: {
-          "click": function($event) {
-            return _vm.$emit("selected-emoji", emoji);
-          },
-          "focusin": function($event) {
-            return _vm.$emit("highlighted-emoji", emoji);
-          },
-          "focusout": function($event) {
-            return _vm.$emit("highlighted-emoji", null);
-          },
-          "mouseover": function($event) {
-            return _vm.$emit("highlighted-emoji", emoji);
-          },
-          "mouseleave": function($event) {
-            return _vm.$emit("highlighted-emoji", null);
-          },
-          "keydown": (event) => _vm.handleKeyDown(event, indexTab, indexEmoji, emoji)
-        }
-      }, [_c("img", {
-        staticClass: "d-icon d-icon--size-500",
-        attrs: {
-          "alt": emoji.name,
-          "aria-label": emoji.name,
-          "title": emoji.name,
-          "src": _vm.getImgSrc(emoji.unicode_character)
-        },
-        on: {
-          "error": _vm.handleImageError
-        }
-      })]);
+  return _c("div", { staticClass: "d-emoji-picker__selector" }, [_c("div", { ref: "listRef", staticClass: "d-emoji-picker__list", attrs: { "id": "d-emoji-picker-list" } }, [_vm.emojiFilter ? _c("p", { staticClass: "d-emoji-picker__search-label d-emoji-picker__alignment" }, [_vm._v(" " + _vm._s(_vm.filteredEmojis.length > 0 ? _vm.searchResultsLabel : _vm.searchNoResultsLabel) + " ")]) : _c("div", { ref: "tabCategoryRef", staticClass: "d-emoji-picker__category d-emoji-picker__alignment" }, [_c("p", [_vm._v(" " + _vm._s(_vm.fixedLabel) + " ")])]), _vm._l(_vm.tabLabels, function(tabLabel, indexTab) {
+    return _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.emojiFilter, expression: "!emojiFilter" }], key: indexTab, ref: `tabLabelRef-${indexTab}`, refInFor: true, staticClass: "d-emoji-picker__alignment" }, [indexTab ? _c("p", [_vm._v(" " + _vm._s(tabLabel.label) + " ")]) : _vm._e(), _c("div", { staticClass: "d-emoji-picker__tab" }, _vm._l(_vm.emojis[_vm.tabs[indexTab] + _vm.skinTone] ? _vm.emojis[_vm.tabs[indexTab] + _vm.skinTone] : _vm.emojis[_vm.tabs[indexTab]], function(emoji, indexEmoji) {
+      return _c("button", { key: emoji.shortname, ref: `emojiRef-${indexTab}`, refInFor: true, attrs: { "type": "button", "aria-label": emoji.name }, on: { "click": function($event) {
+        return _vm.$emit("selected-emoji", emoji);
+      }, "focusin": function($event) {
+        return _vm.$emit("highlighted-emoji", emoji);
+      }, "focusout": function($event) {
+        return _vm.$emit("highlighted-emoji", null);
+      }, "mouseover": function($event) {
+        return _vm.$emit("highlighted-emoji", emoji);
+      }, "mouseleave": function($event) {
+        return _vm.$emit("highlighted-emoji", null);
+      }, "keydown": (event) => _vm.handleKeyDown(event, indexTab, indexEmoji, emoji) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": emoji.name, "aria-label": emoji.name, "title": emoji.name, "src": _vm.getImgSrc(emoji.unicode_character) }, on: { "error": _vm.handleImageError } })]);
     }), 0)]);
-  }), _vm.emojiFilter ? _c("div", {
-    staticClass: "d-emoji-picker__alignment"
-  }, [_c("div", {
-    staticClass: "d-emoji-picker__tab",
-    attrs: {
-      "data-qa": "filtered-emojis"
-    }
-  }, _vm._l(_vm.filteredEmojis, function(emoji, index) {
-    return _c("button", {
-      key: emoji.shortname,
-      ref: `filteredEmoji-${index}`,
-      refInFor: true,
-      class: {
-        "hover-emoji": index === 0 && _vm.hoverFirstEmoji
-      },
-      attrs: {
-        "type": "button",
-        "aria-label": emoji.name
-      },
-      on: {
-        "click": function($event) {
-          return _vm.$emit("selected-emoji", emoji);
-        },
-        "focusin": function($event) {
-          return _vm.$emit("highlighted-emoji", emoji);
-        },
-        "focusout": function($event) {
-          return _vm.$emit("highlighted-emoji", null);
-        },
-        "mouseover": function($event) {
-          return _vm.hoverEmoji(emoji);
-        },
-        "mouseleave": function($event) {
-          return _vm.hoverEmoji(null);
-        },
-        "keydown": (event) => _vm.handleKeyDownFilteredEmojis(event, index, emoji)
-      }
-    }, [_c("img", {
-      staticClass: "d-icon d-icon--size-500",
-      attrs: {
-        "alt": emoji.name,
-        "aria-label": emoji.name,
-        "title": emoji.name,
-        "src": `${_vm.CDN_URL + emoji.unicode_character}.png`
-      }
-    })]);
+  }), _vm.emojiFilter ? _c("div", { staticClass: "d-emoji-picker__alignment" }, [_c("div", { staticClass: "d-emoji-picker__tab", attrs: { "data-qa": "filtered-emojis" } }, _vm._l(_vm.filteredEmojis, function(emoji, index) {
+    return _c("button", { key: emoji.shortname, ref: `filteredEmoji-${index}`, refInFor: true, class: {
+      "hover-emoji": index === 0 && _vm.hoverFirstEmoji
+    }, attrs: { "type": "button", "aria-label": emoji.name }, on: { "click": function($event) {
+      return _vm.$emit("selected-emoji", emoji);
+    }, "focusin": function($event) {
+      return _vm.$emit("highlighted-emoji", emoji);
+    }, "focusout": function($event) {
+      return _vm.$emit("highlighted-emoji", null);
+    }, "mouseover": function($event) {
+      return _vm.hoverEmoji(emoji);
+    }, "mouseleave": function($event) {
+      return _vm.hoverEmoji(null);
+    }, "keydown": (event) => _vm.handleKeyDownFilteredEmojis(event, index, emoji) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": emoji.name, "aria-label": emoji.name, "title": emoji.name, "src": `${_vm.CDN_URL + emoji.unicode_character}.png` } })]);
   }), 0)]) : _vm._e()], 2)]);
 };
 var _sfc_staticRenderFns$3 = [];
-var __component__$3 = /* @__PURE__ */ normalizeComponent(_sfc_main$3, _sfc_render$3, _sfc_staticRenderFns$3, false, null, null, null, null);
+var __component__$3 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$3,
+  _sfc_render$3,
+  _sfc_staticRenderFns$3,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const EmojiSelector = __component__$3.exports;
 const CDN_URL = "https://static.dialpadcdn.com/joypixels/png/unicode/32/";
 const EMOJIS_PER_ROW = 9;
@@ -900,20 +746,19 @@ const _sfc_main$2 = {
 var _sfc_render$2 = function render4() {
   var _a;
   var _vm = this, _c = _vm._self._c;
-  return _c("div", {
-    staticClass: "d-emoji-picker__data"
-  }, [_vm.emoji ? _c("img", {
-    staticClass: "d-icon d-icon--size-500",
-    attrs: {
-      "alt": _vm.emoji.name,
-      "aria-label": _vm.emoji.name,
-      "title": _vm.emoji.name,
-      "src": `${_vm.CDN_URL + _vm.emoji.unicode_character}.png`
-    }
-  }) : _vm._e(), _c("div", [_vm._v(_vm._s((_a = _vm.emoji) == null ? void 0 : _a.name))])]);
+  return _c("div", { staticClass: "d-emoji-picker__data" }, [_vm.emoji ? _c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": _vm.emoji.name, "aria-label": _vm.emoji.name, "title": _vm.emoji.name, "src": `${_vm.CDN_URL + _vm.emoji.unicode_character}.png` } }) : _vm._e(), _c("div", [_vm._v(_vm._s((_a = _vm.emoji) == null ? void 0 : _a.name))])]);
 };
 var _sfc_staticRenderFns$2 = [];
-var __component__$2 = /* @__PURE__ */ normalizeComponent(_sfc_main$2, _sfc_render$2, _sfc_staticRenderFns$2, false, null, null, null, null);
+var __component__$2 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$2,
+  _sfc_render$2,
+  _sfc_staticRenderFns$2,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const EmojiDescription = __component__$2.exports;
 const _sfc_main$1 = {
   name: "EmojiSkinSelector",
@@ -947,37 +792,44 @@ const _sfc_main$1 = {
       return this.skinList.find((skin) => skin.skinTone === this.skinTone);
     },
     skinList() {
-      return [{
-        name: ":wave_tone1:",
-        unicode_output: "1f44b-1f3fb",
-        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,
-        skinCode: "_tone1"
-      }, {
-        name: ":wave_tone2:",
-        unicode_output: "1f44b-1f3fc",
-        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,
-        skinCode: "_tone2"
-      }, {
-        name: ":wave_tone3:",
-        unicode_output: "1f44b-1f3fd",
-        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,
-        skinCode: "_tone3"
-      }, {
-        name: ":wave_tone4:",
-        unicode_output: "1f44b-1f3fe",
-        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,
-        skinCode: "_tone4"
-      }, {
-        name: ":wave_tone5:",
-        unicode_output: "1f44b-1f3ff",
-        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,
-        skinCode: "_tone5"
-      }, {
-        name: ":wave:",
-        unicode_output: "1f44b",
-        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,
-        skinCode: ""
-      }];
+      return [
+        {
+          name: ":wave_tone1:",
+          unicode_output: "1f44b-1f3fb",
+          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,
+          skinCode: "_tone1"
+        },
+        {
+          name: ":wave_tone2:",
+          unicode_output: "1f44b-1f3fc",
+          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,
+          skinCode: "_tone2"
+        },
+        {
+          name: ":wave_tone3:",
+          unicode_output: "1f44b-1f3fd",
+          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,
+          skinCode: "_tone3"
+        },
+        {
+          name: ":wave_tone4:",
+          unicode_output: "1f44b-1f3fe",
+          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,
+          skinCode: "_tone4"
+        },
+        {
+          name: ":wave_tone5:",
+          unicode_output: "1f44b-1f3ff",
+          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,
+          skinCode: "_tone5"
+        },
+        {
+          name: ":wave:",
+          unicode_output: "1f44b",
+          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,
+          skinCode: ""
+        }
+      ];
     }
   },
   watch: {
@@ -1060,84 +912,29 @@ const _sfc_main$1 = {
 };
 var _sfc_render$1 = function render5() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", {
-    attrs: {
-      "data-qa": "skin-selector"
-    }
-  }, [_c("div", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: _vm.isOpen,
-      expression: "isOpen"
-    }],
-    staticClass: "d-emoji-picker__skin-list"
-  }, _vm._l(_vm.skinList, function(skin, index) {
+  return _c("div", { attrs: { "data-qa": "skin-selector" } }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.isOpen, expression: "isOpen" }], staticClass: "d-emoji-picker__skin-list" }, _vm._l(_vm.skinList, function(skin, index) {
     var _a;
-    return _c("button", {
-      key: skin.name,
-      ref: `skinRef-${index}`,
-      refInFor: true,
-      class: {
-        "selected": ((_a = _vm.skinSelected) == null ? void 0 : _a.skinCode) === skin.skinCode
-      },
-      on: {
-        "click": function($event) {
-          return _vm.selectSkin(skin);
-        },
-        "keydown": (event) => _vm.handleKeyDown(event, skin, index)
-      }
-    }, [_c("img", {
-      staticClass: "d-icon d-icon--size-500",
-      attrs: {
-        "alt": skin.name,
-        "aria-label": skin.name,
-        "title": skin.name,
-        "src": `${_vm.cdnUrl + skin.unicode_output}.png`
-      }
-    })]);
-  }), 0), _c("div", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: !_vm.isOpen,
-      expression: "!isOpen"
-    }],
-    staticClass: "d-emoji-picker__skin-selected"
-  }, [_c("dt-tooltip", {
-    attrs: {
-      "placement": "top-end"
-    },
-    scopedSlots: _vm._u([{
-      key: "anchor",
-      fn: function() {
-        var _a, _b, _c2, _d;
-        return [_c("button", {
-          ref: "skinSelectorRef",
-          attrs: {
-            "aria-label": _vm.skinSelectorButtonTooltipLabel,
-            "tabindex": "-1"
-          },
-          on: {
-            "click": _vm.toggleSkinList,
-            "keydown": (event) => _vm.handleKeyDown(event)
-          }
-        }, [_c("img", {
-          staticClass: "d-icon d-icon--size-500",
-          attrs: {
-            "alt": (_a = _vm.skinSelected) == null ? void 0 : _a.name,
-            "aria-label": (_b = _vm.skinSelected) == null ? void 0 : _b.name,
-            "title": (_c2 = _vm.skinSelected) == null ? void 0 : _c2.name,
-            "src": `${_vm.cdnUrl + ((_d = _vm.skinSelected) == null ? void 0 : _d.unicode_output)}.png`
-          }
-        })])];
-      },
-      proxy: true
-    }])
-  }, [_vm._v(" " + _vm._s(_vm.skinSelectorButtonTooltipLabel) + " ")])], 1)]);
+    return _c("button", { key: skin.name, ref: `skinRef-${index}`, refInFor: true, class: {
+      "selected": ((_a = _vm.skinSelected) == null ? void 0 : _a.skinCode) === skin.skinCode
+    }, on: { "click": function($event) {
+      return _vm.selectSkin(skin);
+    }, "keydown": (event) => _vm.handleKeyDown(event, skin, index) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": skin.name, "aria-label": skin.name, "title": skin.name, "src": `${_vm.cdnUrl + skin.unicode_output}.png` } })]);
+  }), 0), _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.isOpen, expression: "!isOpen" }], staticClass: "d-emoji-picker__skin-selected" }, [_c("dt-tooltip", { attrs: { "placement": "top-end" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    var _a, _b, _c2, _d;
+    return [_c("button", { ref: "skinSelectorRef", attrs: { "aria-label": _vm.skinSelectorButtonTooltipLabel, "tabindex": "-1" }, on: { "click": _vm.toggleSkinList, "keydown": (event) => _vm.handleKeyDown(event) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": (_a = _vm.skinSelected) == null ? void 0 : _a.name, "aria-label": (_b = _vm.skinSelected) == null ? void 0 : _b.name, "title": (_c2 = _vm.skinSelected) == null ? void 0 : _c2.name, "src": `${_vm.cdnUrl + ((_d = _vm.skinSelected) == null ? void 0 : _d.unicode_output)}.png` } })])];
+  }, proxy: true }]) }, [_vm._v(" " + _vm._s(_vm.skinSelectorButtonTooltipLabel) + " ")])], 1)]);
 };
 var _sfc_staticRenderFns$1 = [];
-var __component__$1 = /* @__PURE__ */ normalizeComponent(_sfc_main$1, _sfc_render$1, _sfc_staticRenderFns$1, false, null, null, null, null);
+var __component__$1 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const EmojiSkinSelector = __component__$1.exports;
 const _sfc_main = {
   name: "DtEmojiPicker",
@@ -1276,10 +1073,7 @@ const _sfc_main = {
   methods: {
     scrollToSelectedTabset(tabId) {
       this.internalSearchQuery = "";
-      this.selectedTabset = {
-        ...this.selectedTabset,
-        tabId
-      };
+      this.selectedTabset = { ...this.selectedTabset, tabId };
     },
     updateScrollIntoTab(value) {
       this.scrollIntoTab = value;
@@ -1294,129 +1088,57 @@ const _sfc_main = {
 };
 var _sfc_render = function render6() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", {
-    staticClass: "d-emoji-picker"
-  }, [_c("div", {
-    staticClass: "d-emoji-picker--header"
-  }, [_c("emoji-tabset", {
-    ref: "tabsetRef",
-    attrs: {
-      "emoji-filter": _vm.internalSearchQuery,
-      "show-recently-used-tab": _vm.showRecentlyUsedTab,
-      "scroll-into-tab": _vm.scrollIntoTab,
-      "tab-set-labels": _vm.tabSetLabels,
-      "is-scrolling": _vm.isScrolling
-    },
-    on: {
-      "focus-skin-selector": function($event) {
-        return _vm.$refs.skinSelectorRef.focusSkinSelector();
-      },
-      "focus-search-input": function($event) {
-        _vm.showSearch ? _vm.$refs.searchInputRef.focusSearchInput() : _vm.$refs.emojiSelectorRef.focusEmojiSelector();
-      },
-      "selected-tabset": _vm.scrollToSelectedTabset
-    },
-    nativeOn: {
-      "keydown": function($event) {
-        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
-          return null;
-        return _vm.$emit("close");
-      }
-    }
-  })], 1), _c("div", {
-    staticClass: "d-emoji-picker--body"
-  }, [_vm.showSearch ? _c("emoji-search", {
-    ref: "searchInputRef",
-    attrs: {
-      "model-value": _vm.internalSearchQuery,
-      "search-placeholder-label": _vm.searchPlaceholderLabel
-    },
-    on: {
-      "update:model-value": (newValue) => _vm.internalSearchQuery = newValue,
-      "select-first-emoji": function($event) {
-        return _vm.$emit("selected-emoji", _vm.highlightedEmoji);
-      },
-      "focus-tabset": function($event) {
-        return _vm.$refs.tabsetRef.focusTabset();
-      },
-      "focus-emoji-selector": function($event) {
-        return _vm.$refs.emojiSelectorRef.focusEmojiSelector();
-      }
-    },
-    nativeOn: {
-      "keydown": function($event) {
-        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
-          return null;
-        return _vm.$emit("close");
-      }
-    }
-  }) : _vm._e(), _c("emoji-selector", {
-    ref: "emojiSelectorRef",
-    attrs: {
-      "emoji-filter": _vm.internalSearchQuery,
-      "skin-tone": _vm.skinTone,
-      "tab-set-labels": _vm.tabSetLabels,
-      "search-results-label": _vm.searchResultsLabel,
-      "search-no-results-label": _vm.searchNoResultsLabel,
-      "recently-used-emojis": _vm.recentlyUsedEmojis,
-      "selected-tabset": _vm.selectedTabset
-    },
-    on: {
-      "scroll-into-tab": _vm.updateScrollIntoTab,
-      "is-scrolling": _vm.updateIsScrolling,
-      "highlighted-emoji": _vm.updateHighlightedEmoji,
-      "selected-emoji": function($event) {
-        return _vm.$emit("selected-emoji", $event);
-      },
-      "focus-skin-selector": function($event) {
-        return _vm.$refs.skinSelectorRef.focusSkinSelector();
-      },
-      "focus-search-input": function($event) {
-        _vm.showSearch ? _vm.$refs.searchInputRef.focusSearchInput() : _vm.$refs.tabsetRef.focusTabset();
-      }
-    },
-    nativeOn: {
-      "keydown": function($event) {
-        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
-          return null;
-        return _vm.$emit("close");
-      }
-    }
-  })], 1), _c("div", {
-    staticClass: "d-emoji-picker--footer"
-  }, [_c("emoji-description", {
-    attrs: {
-      "emoji": _vm.highlightedEmoji
-    }
-  }), _c("emoji-skin-selector", {
-    ref: "skinSelectorRef",
-    attrs: {
-      "is-hovering": !!_vm.highlightedEmoji,
-      "skin-selector-button-tooltip-label": _vm.skinSelectorButtonTooltipLabel,
-      "skin-tone": _vm.skinTone
-    },
-    on: {
-      "skin-tone": function($event) {
-        return _vm.$emit("skin-tone", $event);
-      },
-      "focus-tabset": function($event) {
-        return _vm.$refs.tabsetRef.focusTabset();
-      },
-      "focus-last-emoji": function($event) {
-        return _vm.$refs.emojiSelectorRef.focusLastEmoji();
-      }
-    },
-    nativeOn: {
-      "keydown": function($event) {
-        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
-          return null;
-        return _vm.$emit("close");
-      }
-    }
-  })], 1)]);
+  return _c("div", { staticClass: "d-emoji-picker" }, [_c("div", { staticClass: "d-emoji-picker--header" }, [_c("emoji-tabset", { ref: "tabsetRef", attrs: { "emoji-filter": _vm.internalSearchQuery, "show-recently-used-tab": _vm.showRecentlyUsedTab, "scroll-into-tab": _vm.scrollIntoTab, "tab-set-labels": _vm.tabSetLabels, "is-scrolling": _vm.isScrolling }, on: { "focus-skin-selector": function($event) {
+    return _vm.$refs.skinSelectorRef.focusSkinSelector();
+  }, "focus-search-input": function($event) {
+    _vm.showSearch ? _vm.$refs.searchInputRef.focusSearchInput() : _vm.$refs.emojiSelectorRef.focusEmojiSelector();
+  }, "selected-tabset": _vm.scrollToSelectedTabset }, nativeOn: { "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+      return null;
+    return _vm.$emit("close");
+  } } })], 1), _c("div", { staticClass: "d-emoji-picker--body" }, [_vm.showSearch ? _c("emoji-search", { ref: "searchInputRef", attrs: { "model-value": _vm.internalSearchQuery, "search-placeholder-label": _vm.searchPlaceholderLabel }, on: { "update:model-value": (newValue) => _vm.internalSearchQuery = newValue, "select-first-emoji": function($event) {
+    return _vm.$emit("selected-emoji", _vm.highlightedEmoji);
+  }, "focus-tabset": function($event) {
+    return _vm.$refs.tabsetRef.focusTabset();
+  }, "focus-emoji-selector": function($event) {
+    return _vm.$refs.emojiSelectorRef.focusEmojiSelector();
+  } }, nativeOn: { "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+      return null;
+    return _vm.$emit("close");
+  } } }) : _vm._e(), _c("emoji-selector", { ref: "emojiSelectorRef", attrs: { "emoji-filter": _vm.internalSearchQuery, "skin-tone": _vm.skinTone, "tab-set-labels": _vm.tabSetLabels, "search-results-label": _vm.searchResultsLabel, "search-no-results-label": _vm.searchNoResultsLabel, "recently-used-emojis": _vm.recentlyUsedEmojis, "selected-tabset": _vm.selectedTabset }, on: { "scroll-into-tab": _vm.updateScrollIntoTab, "is-scrolling": _vm.updateIsScrolling, "highlighted-emoji": _vm.updateHighlightedEmoji, "selected-emoji": function($event) {
+    return _vm.$emit("selected-emoji", $event);
+  }, "focus-skin-selector": function($event) {
+    return _vm.$refs.skinSelectorRef.focusSkinSelector();
+  }, "focus-search-input": function($event) {
+    _vm.showSearch ? _vm.$refs.searchInputRef.focusSearchInput() : _vm.$refs.tabsetRef.focusTabset();
+  } }, nativeOn: { "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+      return null;
+    return _vm.$emit("close");
+  } } })], 1), _c("div", { staticClass: "d-emoji-picker--footer" }, [_c("emoji-description", { attrs: { "emoji": _vm.highlightedEmoji } }), _c("emoji-skin-selector", { ref: "skinSelectorRef", attrs: { "is-hovering": !!_vm.highlightedEmoji, "skin-selector-button-tooltip-label": _vm.skinSelectorButtonTooltipLabel, "skin-tone": _vm.skinTone }, on: { "skin-tone": function($event) {
+    return _vm.$emit("skin-tone", $event);
+  }, "focus-tabset": function($event) {
+    return _vm.$refs.tabsetRef.focusTabset();
+  }, "focus-last-emoji": function($event) {
+    return _vm.$refs.emojiSelectorRef.focusLastEmoji();
+  } }, nativeOn: { "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+      return null;
+    return _vm.$emit("close");
+  } } })], 1)]);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const DtEmojiPicker = __component__.exports;
 export {
   CDN_URL,