@dialpad/dialtone 9.29.1 → 9.30.1

package/dist/vue3/lib/message-input.js

@@ -1,28 +1,28 @@
-import { resolveComponent as s, openBlock as m, createElementBlock as k, normalizeClass as w, withKeys as C, withModifiers as v, createElementVNode as u, normalizeStyle as L, createVNode as r, mergeProps as S, renderSlot as I, createBlock as c, withCtx as l, createCommentVNode as d, withDirectives as D, toDisplayString as h, vShow as F, createSlots as E } from "vue";
-import { _ as T } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import { DtButton as x } from "./button.js";
-import { DtEmojiPicker as O } from "./emoji-picker.js";
-import { DtIcon as _ } from "./icon.js";
-import { DtInput as V } from "./input.js";
-import { DtPopover as q } from "./popover.js";
-import { DtRichTextEditor as M, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as U, RICH_TEXT_EDITOR_OUTPUT_FORMATS as R } from "./rich-text-editor.js";
-import { DtTooltip as z } from "./tooltip.js";
-import "./utils.js";
-import "./constants.js";
-import "../chunks/link_constants-vIUB92L4.js";
-import "../chunks/tab-GQZFMq83.js";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, withKeys, withModifiers, createElementVNode, normalizeStyle, createVNode, mergeProps, renderSlot, createBlock, withCtx, createCommentVNode, withDirectives, toDisplayString, vShow, createSlots } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import { DtButton } from "./button.js";
+import { DtEmojiPicker as _sfc_main$1 } from "./emoji-picker.js";
+import { DtIcon } from "./icon.js";
+import { DtInput } from "./input.js";
+import { DtPopover } from "./popover.js";
+import { DtRichTextEditor, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES, RICH_TEXT_EDITOR_OUTPUT_FORMATS } from "./rich-text-editor.js";
+import { DtTooltip } from "./tooltip.js";
+import "../common/utils.js";
+import "../common/constants.js";
+import "../chunks/link_constants-nWVlXQBs.js";
+import "../chunks/tab-RTDgnD9-.js";
 import "@dialpad/dialtone-emojis";
-import "../chunks/input-4UQWegUk.js";
-import "./validators.js";
+import "../chunks/input-NmYDD5bn.js";
+import "../common/validators.js";
 import "./validation-messages.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "../chunks/popover_constants-qjlEkroB.js";
+import "../chunks/popover_constants-Qkpb0yh2.js";
 import "tippy.js";
 import "./lazy-show.js";
-import "../chunks/modal-VuMFkZFH.js";
-import "../chunks/sr_only_close_button-7O-Ev8uM.js";
+import "../chunks/modal-XOr4kiNZ.js";
+import "../chunks/sr_only_close_button-3EdsV-dH.js";
 import "@tiptap/vue-3";
 import "@tiptap/extension-blockquote";
 import "@tiptap/extension-code-block";
@@ -41,33 +41,34 @@ import "@tiptap/extension-underline";
 import "@tiptap/extension-text";
 import "@tiptap/extension-text-align";
 import "@tiptap/core";
-import "../chunks/index-mRmwpCBG.js";
+import "./emoji.js";
+import "../common/emoji.js";
 import "emoji-regex";
 import "./skeleton.js";
 import "@tiptap/pm/state";
 import "@tiptap/suggestion";
 import "./list-item.js";
-import "../chunks/list_item_constants-LTUc74pD.js";
+import "../chunks/list_item_constants-u1xcN9Dd.js";
 import "./item-layout.js";
 import "./stack.js";
-import "../chunks/stack_constants-u7tNqGtc.js";
+import "../chunks/stack_constants-HraCekPm.js";
 import "@tiptap/extension-mention";
 import "./link.js";
 import "./avatar.js";
 import "./presence.js";
-const A = {
+const _sfc_main = {
   name: "DtRecipeMessageInput",
   components: {
-    DtButton: x,
-    DtEmojiPicker: O,
-    DtIcon: _,
-    DtInput: V,
-    DtPopover: q,
-    DtRichTextEditor: M,
-    DtTooltip: z
+    DtButton,
+    DtEmojiPicker: _sfc_main$1,
+    DtIcon,
+    DtInput,
+    DtPopover,
+    DtRichTextEditor,
+    DtTooltip
   },
   mixins: [],
-  inheritAttrs: !1,
+  inheritAttrs: false,
   props: {
     /**
      * Value of the input. The object format should match TipTap's JSON
@@ -82,14 +83,14 @@ const A = {
      */
     editable: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Descriptive label for the input element
      */
     inputAriaLabel: {
       type: String,
-      required: !0,
+      required: true,
       default: ""
     },
     /**
@@ -114,9 +115,12 @@ const A = {
      */
     autoFocus: {
       type: [Boolean, String, Number],
-      default: !1,
-      validator(i) {
-        return typeof i == "string" ? U.includes(i) : !0;
+      default: false,
+      validator(autoFocus) {
+        if (typeof autoFocus === "string") {
+          return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);
+        }
+        return true;
       }
     },
     /**
@@ -128,8 +132,8 @@ const A = {
     outputFormat: {
       type: String,
       default: "text",
-      validator(i) {
-        return R.includes(i);
+      validator(outputFormat) {
+        return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);
       }
     },
     /**
@@ -137,7 +141,7 @@ const A = {
      */
     link: {
       type: [Boolean, Object],
-      default: !1
+      default: false
     },
     /**
      * Placeholder text
@@ -151,7 +155,7 @@ const A = {
      */
     disableSend: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Content area needs to dynamically adjust height based on the conversation area height.
@@ -164,7 +168,7 @@ const A = {
     // Emoji picker props
     showEmojiPicker: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Props to pass into the emoji picker.
@@ -172,14 +176,14 @@ const A = {
     emojiPickerProps: {
       type: Object,
       default: () => ({}),
-      validate(i) {
+      validate(emojiPickerProps) {
         return [
           "searchNoResultsLabel",
           "searchResultsLabel",
           "searchPlaceholderLabel",
           "skinSelectorButtonTooltipLabel",
           "tabSetLabels"
-        ].every((e) => i[e] != null);
+        ].every((prop) => emojiPickerProps[prop] != null);
       }
     },
     /**
@@ -242,42 +246,42 @@ const A = {
      */
     allowBlockquote: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Whether the input allows for bold to be introduced in the text.
      */
     allowBold: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Whether the input allows for bullet list to be introduced in the text.
     */
     allowBulletList: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Whether the input allows for italic to be introduced in the text.
      */
     allowItalic: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Whether the input allows for strike to be introduced in the text.
      */
     allowStrike: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Whether the input allows for underline to be introduced in the text.
      */
     allowUnderline: {
       type: Boolean,
-      default: !0
+      default: true
     }
   },
   emits: [
@@ -353,11 +357,11 @@ const A = {
     return {
       internalInputValue: this.modelValue,
       // internal input content
-      hasFocus: !1,
-      imagePickerFocus: !1,
-      emojiPickerFocus: !1,
-      sendButtonFocus: !1,
-      emojiPickerOpened: !1
+      hasFocus: false,
+      imagePickerFocus: false,
+      emojiPickerFocus: false,
+      sendButtonFocus: false,
+      emojiPickerOpened: false
     };
   },
   computed: {
@@ -365,7 +369,7 @@ const A = {
       return this.internalInputValue.length;
     },
     displayCharacterLimitWarning() {
-      return !!this.showCharacterLimit && this.showCharacterLimit.count - this.inputLength <= this.showCharacterLimit.warning;
+      return Boolean(this.showCharacterLimit) && this.showCharacterLimit.count - this.inputLength <= this.showCharacterLimit.warning;
     },
     characterLimitTooltipEnabled() {
       return this.showCharacterLimit.message && this.showCharacterLimit.count - this.inputLength < 0;
@@ -383,40 +387,46 @@ const A = {
     }
   },
   watch: {
-    modelValue(i) {
-      this.internalInputValue = i;
+    modelValue(newValue) {
+      this.internalInputValue = newValue;
     }
   },
   methods: {
-    onDrag(i) {
-      i.stopPropagation(), i.preventDefault();
-    },
-    onDrop(i) {
-      i.stopPropagation(), i.preventDefault();
-      const e = i.dataTransfer, t = Array.from(e.files);
-      this.$emit("add-media", t);
-    },
-    onPaste(i) {
-      if (i.clipboardData.files.length) {
-        i.stopPropagation(), i.preventDefault();
-        const e = [...i.clipboardData.files];
-        this.$emit("paste-media", e);
+    onDrag(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    onDrop(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      const dt = e.dataTransfer;
+      const files = Array.from(dt.files);
+      this.$emit("add-media", files);
+    },
+    onPaste(e) {
+      if (e.clipboardData.files.length) {
+        e.stopPropagation();
+        e.preventDefault();
+        const files = [...e.clipboardData.files];
+        this.$emit("paste-media", files);
       }
     },
-    onSkinTone(i) {
-      this.$emit("skin-tone", i);
+    onSkinTone(skinTone) {
+      this.$emit("skin-tone", skinTone);
     },
-    onSelectEmoji(i) {
-      if (!i) {
-        this.emojiPickerOpened = !1;
+    onSelectEmoji(emoji) {
+      if (!emoji) {
+        this.emojiPickerOpened = false;
         return;
       }
       this.$refs.richTextEditor.editor.commands.insertContent({
         type: "emoji",
         attrs: {
-          code: i.shortname
+          code: emoji.shortname
         }
-      }), this.emojiPickerOpened = !1, this.$emit("selected-emoji", i);
+      });
+      this.emojiPickerOpened = false;
+      this.$emit("selected-emoji", emoji);
     },
     onSelectImage() {
       this.$refs.messageInputImageUpload.$refs.input.click();
@@ -428,151 +438,167 @@ const A = {
       this.emojiPickerOpened = !this.emojiPickerOpened;
     },
     onSend() {
-      this.isSendDisabled || this.$emit("submit", this.internalInputValue);
+      if (this.isSendDisabled) {
+        return;
+      }
+      this.$emit("submit", this.internalInputValue);
     },
     onCancel() {
       this.$emit("cancel");
     },
-    onFocus(i) {
-      var e;
-      this.hasFocus = !0, (e = this.$refs.richTextEditor) == null || e.focusEditor(), this.$emit("focus", i);
+    onFocus(event) {
+      var _a;
+      this.hasFocus = true;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.focusEditor();
+      this.$emit("focus", event);
     },
-    onBlur(i) {
-      this.hasFocus = !1, this.$emit("blur", i);
+    onBlur(event) {
+      this.hasFocus = false;
+      this.$emit("blur", event);
     },
-    onInput(i) {
-      this.$emit("input", i);
+    onInput(event) {
+      this.$emit("input", event);
     }
   }
-}, H = { class: "d-d-flex d-jc-space-between d-mx8 d-my4" }, N = { class: "d-d-flex" }, K = { class: "d-d-flex" }, W = { key: 0 };
-function X(i, e, t, Y, a, o) {
-  const P = s("dt-rich-text-editor"), g = s("dt-icon"), p = s("dt-button"), j = s("dt-input"), f = s("dt-tooltip"), y = s("dt-emoji-picker"), B = s("dt-popover");
-  return m(), k("div", {
+};
+const _hoisted_1 = { class: "d-d-flex d-jc-space-between d-mx8 d-my4" };
+const _hoisted_2 = { class: "d-d-flex" };
+const _hoisted_3 = { class: "d-d-flex" };
+const _hoisted_4 = { key: 0 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_rich_text_editor = resolveComponent("dt-rich-text-editor");
+  const _component_dt_icon = resolveComponent("dt-icon");
+  const _component_dt_button = resolveComponent("dt-button");
+  const _component_dt_input = resolveComponent("dt-input");
+  const _component_dt_tooltip = resolveComponent("dt-tooltip");
+  const _component_dt_emoji_picker = resolveComponent("dt-emoji-picker");
+  const _component_dt_popover = resolveComponent("dt-popover");
+  return openBlock(), createElementBlock("div", {
     "data-qa": "dt-message-input",
     role: "presentation",
-    class: w([
+    class: normalizeClass([
       "d-d-flex",
       "d-fd-column",
       "d-bar8",
       "d-baw1",
       "d-ba",
       "d-c-text",
-      { "d-bc-bold d-bs-sm": a.hasFocus, "d-bc-default": !a.hasFocus }
+      { "d-bc-bold d-bs-sm": $data.hasFocus, "d-bc-default": !$data.hasFocus }
     ]),
-    onClick: e[15] || (e[15] = (n) => {
-      var b;
-      return (b = i.$refs.richTextEditor) == null ? void 0 : b.focusEditor();
+    onClick: _cache[15] || (_cache[15] = ($event) => {
+      var _a;
+      return (_a = _ctx.$refs.richTextEditor) == null ? void 0 : _a.focusEditor();
     }),
-    onDragEnter: e[16] || (e[16] = (...n) => o.onDrag && o.onDrag(...n)),
-    onDragOver: e[17] || (e[17] = (...n) => o.onDrag && o.onDrag(...n)),
-    onDrop: e[18] || (e[18] = (...n) => o.onDrop && o.onDrop(...n)),
-    onKeydown: e[19] || (e[19] = C(v((...n) => o.onSend && o.onSend(...n), ["exact"]), ["enter"])),
-    onPaste: e[20] || (e[20] = (...n) => o.onPaste && o.onPaste(...n))
+    onDragEnter: _cache[16] || (_cache[16] = (...args) => $options.onDrag && $options.onDrag(...args)),
+    onDragOver: _cache[17] || (_cache[17] = (...args) => $options.onDrag && $options.onDrag(...args)),
+    onDrop: _cache[18] || (_cache[18] = (...args) => $options.onDrop && $options.onDrop(...args)),
+    onKeydown: _cache[19] || (_cache[19] = withKeys(withModifiers((...args) => $options.onSend && $options.onSend(...args), ["exact"]), ["enter"])),
+    onPaste: _cache[20] || (_cache[20] = (...args) => $options.onPaste && $options.onPaste(...args))
   }, [
-    u("div", {
+    createElementVNode("div", {
       class: "d-of-auto d-mx16 d-mt8 d-mb4",
-      style: L({ "max-height": t.maxHeight })
+      style: normalizeStyle({ "max-height": $props.maxHeight })
     }, [
-      r(P, S({
+      createVNode(_component_dt_rich_text_editor, mergeProps({
         ref: "richTextEditor",
-        modelValue: a.internalInputValue,
-        "onUpdate:modelValue": e[0] || (e[0] = (n) => a.internalInputValue = n),
-        "allow-blockquote": t.allowBlockquote,
-        "allow-bold": t.allowBold,
-        "allow-bullet-list": t.allowBulletList,
-        "allow-italic": t.allowItalic,
-        "allow-strike": t.allowStrike,
-        "allow-underline": t.allowUnderline,
-        editable: t.editable,
-        "input-aria-label": t.inputAriaLabel,
-        "input-class": t.inputClass,
-        "output-format": t.outputFormat,
-        "auto-focus": t.autoFocus,
-        link: t.link,
-        placeholder: t.placeholder,
-        "mention-suggestion": t.mentionSuggestion
-      }, i.$attrs, {
-        onFocus: o.onFocus,
-        onBlur: o.onBlur,
-        onInput: e[1] || (e[1] = (n) => o.onInput(n))
+        modelValue: $data.internalInputValue,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.internalInputValue = $event),
+        "allow-blockquote": $props.allowBlockquote,
+        "allow-bold": $props.allowBold,
+        "allow-bullet-list": $props.allowBulletList,
+        "allow-italic": $props.allowItalic,
+        "allow-strike": $props.allowStrike,
+        "allow-underline": $props.allowUnderline,
+        editable: $props.editable,
+        "input-aria-label": $props.inputAriaLabel,
+        "input-class": $props.inputClass,
+        "output-format": $props.outputFormat,
+        "auto-focus": $props.autoFocus,
+        link: $props.link,
+        placeholder: $props.placeholder,
+        "mention-suggestion": $props.mentionSuggestion
+      }, _ctx.$attrs, {
+        onFocus: $options.onFocus,
+        onBlur: $options.onBlur,
+        onInput: _cache[1] || (_cache[1] = ($event) => $options.onInput($event))
       }), null, 16, ["modelValue", "allow-blockquote", "allow-bold", "allow-bullet-list", "allow-italic", "allow-strike", "allow-underline", "editable", "input-aria-label", "input-class", "output-format", "auto-focus", "link", "placeholder", "mention-suggestion", "onFocus", "onBlur"])
     ], 4),
-    I(i.$slots, "middle"),
-    u("section", H, [
-      u("div", N, [
-        t.showImagePicker ? (m(), c(f, {
+    renderSlot(_ctx.$slots, "middle"),
+    createElementVNode("section", _hoisted_1, [
+      createElementVNode("div", _hoisted_2, [
+        $props.showImagePicker ? (openBlock(), createBlock(_component_dt_tooltip, {
           key: 0,
           placement: "top-start",
-          message: t.showImagePicker.tooltipLabel,
+          message: $props.showImagePicker.tooltipLabel,
           offset: [-4, -4]
         }, {
-          anchor: l(() => [
-            r(p, {
+          anchor: withCtx(() => [
+            createVNode(_component_dt_button, {
               "data-qa": "dt-message-input-image-btn",
               size: "sm",
               circle: "",
-              kind: a.imagePickerFocus ? "default" : "muted",
+              kind: $data.imagePickerFocus ? "default" : "muted",
               importance: "clear",
-              "aria-label": t.showImagePicker.ariaLabel,
-              onClick: o.onSelectImage,
-              onMouseenter: e[2] || (e[2] = (n) => a.imagePickerFocus = !0),
-              onMouseleave: e[3] || (e[3] = (n) => a.imagePickerFocus = !1),
-              onFocus: e[4] || (e[4] = (n) => a.imagePickerFocus = !0),
-              onBlur: e[5] || (e[5] = (n) => a.imagePickerFocus = !1)
+              "aria-label": $props.showImagePicker.ariaLabel,
+              onClick: $options.onSelectImage,
+              onMouseenter: _cache[2] || (_cache[2] = ($event) => $data.imagePickerFocus = true),
+              onMouseleave: _cache[3] || (_cache[3] = ($event) => $data.imagePickerFocus = false),
+              onFocus: _cache[4] || (_cache[4] = ($event) => $data.imagePickerFocus = true),
+              onBlur: _cache[5] || (_cache[5] = ($event) => $data.imagePickerFocus = false)
             }, {
-              icon: l(() => [
-                r(g, {
+              icon: withCtx(() => [
+                createVNode(_component_dt_icon, {
                   name: "image",
                   size: "300"
                 })
               ]),
               _: 1
             }, 8, ["kind", "aria-label", "onClick"]),
-            r(j, {
+            createVNode(_component_dt_input, {
               ref: "messageInputImageUpload",
               "data-qa": "dt-message-input-image-input",
               type: "file",
               class: "d-ps-absolute",
               multiple: "",
               hidden: "",
-              onInput: o.onImageUpload
+              onInput: $options.onImageUpload
             }, null, 8, ["onInput"])
           ]),
           _: 1
-        }, 8, ["message"])) : d("", !0),
-        t.showEmojiPicker ? (m(), c(B, {
+        }, 8, ["message"])) : createCommentVNode("", true),
+        $props.showEmojiPicker ? (openBlock(), createBlock(_component_dt_popover, {
           key: 1,
           "data-qa": "dt-message-input-emoji-picker-popover",
-          open: a.emojiPickerOpened,
+          open: $data.emojiPickerOpened,
           "initial-focus-element": "#searchInput",
           padding: "none",
-          onOpened: e[10] || (e[10] = (n) => {
-            a.emojiPickerOpened = n;
+          onOpened: _cache[10] || (_cache[10] = (open) => {
+            $data.emojiPickerOpened = open;
           })
         }, {
-          anchor: l(() => [
-            r(f, {
-              message: t.emojiTooltipMessage,
+          anchor: withCtx(() => [
+            createVNode(_component_dt_tooltip, {
+              message: $props.emojiTooltipMessage,
               offset: [0, -4]
             }, {
-              anchor: l(() => [
-                r(p, {
+              anchor: withCtx(() => [
+                createVNode(_component_dt_button, {
                   "data-qa": "dt-message-input-emoji-picker-btn",
                   size: "sm",
                   circle: "",
-                  kind: o.emojiPickerHovered ? "default" : "muted",
+                  kind: $options.emojiPickerHovered ? "default" : "muted",
                   importance: "clear",
-                  "aria-label": t.emojiButtonAriaLabel,
+                  "aria-label": $props.emojiButtonAriaLabel,
                   offset: [0, 0],
-                  onClick: o.toggleEmojiPicker,
-                  onMouseenter: e[6] || (e[6] = (n) => a.emojiPickerFocus = !0),
-                  onMouseleave: e[7] || (e[7] = (n) => a.emojiPickerFocus = !1),
-                  onFocus: e[8] || (e[8] = (n) => a.emojiPickerFocus = !0),
-                  onBlur: e[9] || (e[9] = (n) => a.emojiPickerFocus = !1)
+                  onClick: $options.toggleEmojiPicker,
+                  onMouseenter: _cache[6] || (_cache[6] = ($event) => $data.emojiPickerFocus = true),
+                  onMouseleave: _cache[7] || (_cache[7] = ($event) => $data.emojiPickerFocus = false),
+                  onFocus: _cache[8] || (_cache[8] = ($event) => $data.emojiPickerFocus = true),
+                  onBlur: _cache[9] || (_cache[9] = ($event) => $data.emojiPickerFocus = false)
                 }, {
-                  icon: l(() => [
-                    r(g, {
-                      name: o.emojiPickerHovered ? "very-satisfied" : "satisfied",
+                  icon: withCtx(() => [
+                    createVNode(_component_dt_icon, {
+                      name: !$options.emojiPickerHovered ? "satisfied" : "very-satisfied",
                       size: "300"
                     }, null, 8, ["name"])
                   ]),
@@ -582,87 +608,87 @@ function X(i, e, t, Y, a, o) {
               _: 1
             }, 8, ["message"])
           ]),
-          content: l(() => [
-            r(y, S(t.emojiPickerProps, {
-              onSkinTone: o.onSkinTone,
-              onSelectedEmoji: o.onSelectEmoji
+          content: withCtx(() => [
+            createVNode(_component_dt_emoji_picker, mergeProps($props.emojiPickerProps, {
+              onSkinTone: $options.onSkinTone,
+              onSelectedEmoji: $options.onSelectEmoji
             }), null, 16, ["onSkinTone", "onSelectedEmoji"])
           ]),
           _: 1
-        }, 8, ["open"])) : d("", !0)
+        }, 8, ["open"])) : createCommentVNode("", true)
       ]),
-      u("div", K, [
-        t.showCharacterLimit ? (m(), c(f, {
+      createElementVNode("div", _hoisted_3, [
+        Boolean($props.showCharacterLimit) ? (openBlock(), createBlock(_component_dt_tooltip, {
           key: 0,
           class: "dt-message-input--remaining-char-tooltip",
           placement: "top-end",
-          enabled: o.characterLimitTooltipEnabled,
-          message: t.showCharacterLimit.message,
+          enabled: $options.characterLimitTooltipEnabled,
+          message: $props.showCharacterLimit.message,
           offset: [10, -8]
         }, {
-          anchor: l(() => [
-            D(u("p", {
+          anchor: withCtx(() => [
+            withDirectives(createElementVNode("p", {
               class: "d-fc-error d-mr16 dt-message-input--remaining-char",
               "data-qa": "dt-message-input-character-limit"
-            }, h(t.showCharacterLimit.count - o.inputLength), 513), [
-              [F, o.displayCharacterLimitWarning]
+            }, toDisplayString($props.showCharacterLimit.count - $options.inputLength), 513), [
+              [vShow, $options.displayCharacterLimitWarning]
             ])
           ]),
           _: 1
-        }, 8, ["enabled", "message"])) : d("", !0),
-        t.showCancel ? (m(), c(p, {
+        }, 8, ["enabled", "message"])) : createCommentVNode("", true),
+        $props.showCancel ? (openBlock(), createBlock(_component_dt_button, {
           key: 1,
           "data-qa": "dt-message-input-cancel-button",
           class: "dt-message-input--cancel-button",
           size: "sm",
           kind: "muted",
           importance: "clear",
-          "aria-label": t.showCancel.ariaLabel,
-          onClick: o.onCancel
+          "aria-label": $props.showCancel.ariaLabel,
+          onClick: $options.onCancel
         }, {
-          default: l(() => [
-            u("p", null, h(t.showCancel.text), 1)
+          default: withCtx(() => [
+            createElementVNode("p", null, toDisplayString($props.showCancel.text), 1)
           ]),
           _: 1
-        }, 8, ["aria-label", "onClick"])) : d("", !0),
-        t.showSend ? (m(), c(f, {
+        }, 8, ["aria-label", "onClick"])) : createCommentVNode("", true),
+        $props.showSend ? (openBlock(), createBlock(_component_dt_tooltip, {
           key: 2,
           placement: "top-end",
-          enabled: !t.showSend,
-          message: t.showSend.tooltipLabel,
-          show: !o.isSendDisabled && a.sendButtonFocus,
+          enabled: !$props.showSend,
+          message: $props.showSend.tooltipLabel,
+          show: !$options.isSendDisabled && $data.sendButtonFocus,
           offset: [6, -8]
         }, {
-          anchor: l(() => [
-            r(p, {
+          anchor: withCtx(() => [
+            createVNode(_component_dt_button, {
               "data-qa": "dt-message-input-send-btn",
               size: "sm",
               kind: "default",
               importance: "primary",
-              class: w([
+              class: normalizeClass([
                 {
-                  "message-input-button__disabled d-fc-muted": o.isSendDisabled,
-                  "d-btn--circle": t.showSend.icon
+                  "message-input-button__disabled d-fc-muted": $options.isSendDisabled,
+                  "d-btn--circle": $props.showSend.icon
                 }
               ]),
-              "aria-label": t.showSend.ariaLabel,
-              "aria-disabled": o.isSendDisabled,
-              onClick: o.onSend,
-              onMouseenter: e[11] || (e[11] = (n) => a.sendButtonFocus = !0),
-              onMouseleave: e[12] || (e[12] = (n) => a.sendButtonFocus = !1),
-              onFocus: e[13] || (e[13] = (n) => a.sendButtonFocus = !0),
-              onBlur: e[14] || (e[14] = (n) => a.sendButtonFocus = !1)
-            }, E({
-              default: l(() => [
-                t.showSend.text ? (m(), k("p", W, h(t.showSend.text), 1)) : d("", !0)
+              "aria-label": $props.showSend.ariaLabel,
+              "aria-disabled": $options.isSendDisabled,
+              onClick: $options.onSend,
+              onMouseenter: _cache[11] || (_cache[11] = ($event) => $data.sendButtonFocus = true),
+              onMouseleave: _cache[12] || (_cache[12] = ($event) => $data.sendButtonFocus = false),
+              onFocus: _cache[13] || (_cache[13] = ($event) => $data.sendButtonFocus = true),
+              onBlur: _cache[14] || (_cache[14] = ($event) => $data.sendButtonFocus = false)
+            }, createSlots({
+              default: withCtx(() => [
+                $props.showSend.text ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString($props.showSend.text), 1)) : createCommentVNode("", true)
               ]),
               _: 2
             }, [
-              t.showSend.icon ? {
+              $props.showSend.icon ? {
                 name: "icon",
-                fn: l(() => [
-                  r(g, {
-                    name: t.showSend.icon,
+                fn: withCtx(() => [
+                  createVNode(_component_dt_icon, {
+                    name: $props.showSend.icon,
                     size: "300"
                   }, null, 8, ["name"])
                 ]),
@@ -671,13 +697,13 @@ function X(i, e, t, Y, a, o) {
             ]), 1032, ["class", "aria-label", "aria-disabled", "onClick"])
           ]),
           _: 1
-        }, 8, ["enabled", "message", "show"])) : d("", !0)
+        }, 8, ["enabled", "message", "show"])) : createCommentVNode("", true)
       ])
     ])
   ], 34);
 }
-const Ze = /* @__PURE__ */ T(A, [["render", X]]);
+const message_input = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  Ze as DtRecipeMessageInput
+  message_input as DtRecipeMessageInput
 };
 //# sourceMappingURL=message-input.js.map