@dialpad/dialtone-vue 3.220.0-next.4 → 3.220.0

package/dist/lib/editor/editor.js

@@ -1,62 +1,62 @@
-import { removeClassStyleAttrs as e } from "../../common/utils/index.js";
-import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { DialtoneLocalization as n } from "../../localization/index.js";
-import r from "../button/button.js";
-import i from "../list-item/list-item.js";
-import { t as a } from "../../combobox-BQBKrDTW.js";
-import o from "../stack/stack.js";
-import s from "../tooltip/tooltip.js";
-import c from "../popover/popover.js";
-import l from "../dropdown/dropdown-separator.js";
-import u from "../input/input.js";
-import d from "../list-item-group/list-item-group.js";
-import { t as f } from "../../rich_text_editor-DRwU4mUa.js";
-import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as p, RICH_TEXT_EDITOR_OUTPUT_FORMATS as m } from "../rich-text-editor/rich-text-editor-constants.js";
-import { EDITOR_DEFAULT_FONT_COLOR as h, EDITOR_DEFAULT_LINK_PREFIX as g, EDITOR_SUPPORTED_LINK_PROTOCOLS as _ } from "./editor-constants.js";
-import v from "./EditorToolbarButton.js";
-import y from "./EditorToolbarDropdownButton.js";
-import b from "./EditorToolbarPopoverButton.js";
-import { Fragment as x, createBlock as S, createCommentVNode as C, createElementBlock as w, createElementVNode as T, createTextVNode as E, createVNode as D, mergeProps as O, normalizeClass as k, normalizeStyle as A, openBlock as j, renderList as M, resolveComponent as N, resolveDirective as ee, resolveDynamicComponent as P, toDisplayString as F, withCtx as I, withDirectives as te, withKeys as L, withModifiers as R } from "vue";
-import { DtIconAlignCenter as z, DtIconAlignJustify as B, DtIconAlignLeft as V, DtIconAlignRight as H, DtIconBold as U, DtIconBraces as ne, DtIconChevronDown as re, DtIconCodeBlock as W, DtIconFontSize as G, DtIconImage as K, DtIconItalic as q, DtIconLink2 as J, DtIconListBullet as Y, DtIconListOrdered as X, DtIconQuickReply as Z, DtIconQuote as Q, DtIconSearch as ie, DtIconStopFilled as $, DtIconStrikethrough as ae, DtIconType as oe, DtIconUnderline as se } from "@dialpad/dialtone-icons/vue";
+import { addClassStyleAttrs as e, removeClassStyleAttrs as t } from "../../common/utils/index.js";
+import { t as n } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { DialtoneLocalization as r } from "../../localization/index.js";
+import i from "../button/button.js";
+import a from "../list-item/list-item.js";
+import { t as o } from "../../combobox-DgClbLOg.js";
+import s from "../stack/stack.js";
+import c from "../tooltip/tooltip.js";
+import l from "../popover/popover.js";
+import u from "../dropdown/dropdown-separator.js";
+import d from "../input/input.js";
+import f from "../list-item-group/list-item-group.js";
+import { t as p } from "../../rich_text_editor-DYu2R0kw.js";
+import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as m, RICH_TEXT_EDITOR_OUTPUT_FORMATS as h } from "../rich-text-editor/rich-text-editor-constants.js";
+import { EDITOR_DEFAULT_FONT_COLOR as g, EDITOR_DEFAULT_LINK_PREFIX as _, EDITOR_SUPPORTED_LINK_PROTOCOLS as v } from "./editor-constants.js";
+import y from "./EditorToolbarButton.js";
+import b from "./EditorToolbarDropdownButton.js";
+import ee from "./EditorToolbarPopoverButton.js";
+import { Fragment as x, createBlock as S, createCommentVNode as C, createElementBlock as w, createElementVNode as T, createTextVNode as E, createVNode as D, mergeProps as O, normalizeClass as te, normalizeStyle as k, openBlock as A, renderList as j, resolveComponent as M, resolveDirective as ne, resolveDynamicComponent as N, toDisplayString as P, withCtx as F, withDirectives as re, withKeys as I, withModifiers as L } from "vue";
+import { DtIconAlignCenter as R, DtIconAlignJustify as z, DtIconAlignLeft as B, DtIconAlignRight as V, DtIconBold as H, DtIconBraces as U, DtIconChevronDown as ie, DtIconCodeBlock as W, DtIconFontSize as G, DtIconImage as K, DtIconItalic as q, DtIconLink2 as J, DtIconListBullet as Y, DtIconListOrdered as X, DtIconQuickReply as Z, DtIconQuote as Q, DtIconSearch as ae, DtIconStopFilled as oe, DtIconStrikethrough as se, DtIconType as ce, DtIconUnderline as $ } from "@dialpad/dialtone-icons/vue3";
 //#region recipes/conversation_view/editor/editor.vue
-var ce = {
+var le = {
 	compatConfig: { MODE: 3 },
 	name: "DtRecipeEditor",
 	components: {
-		DtListItemGroup: d,
-		DtDropdownSeparator: l,
-		DtListItem: i,
-		DtRichTextEditor: f,
-		DtButton: r,
-		DtPopover: c,
-		DtStack: o,
-		DtInput: u,
-		DtTooltip: s,
-		DtCombobox: a,
-		EditorToolbarButton: v,
-		EditorToolbarDropdownButton: y,
-		EditorToolbarPopoverButton: b,
+		DtListItemGroup: f,
+		DtDropdownSeparator: u,
+		DtListItem: a,
+		DtRichTextEditor: p,
+		DtButton: i,
+		DtPopover: l,
+		DtStack: s,
+		DtInput: d,
+		DtTooltip: c,
+		DtCombobox: o,
+		EditorToolbarButton: y,
+		EditorToolbarDropdownButton: b,
+		EditorToolbarPopoverButton: ee,
 		DtIconQuickReply: Z,
-		DtIconBold: U,
+		DtIconBold: H,
 		DtIconItalic: q,
-		DtIconUnderline: se,
-		DtIconStrikethrough: ae,
+		DtIconUnderline: $,
+		DtIconStrikethrough: se,
 		DtIconListBullet: Y,
 		DtIconListOrdered: X,
-		DtIconAlignLeft: V,
-		DtIconAlignCenter: z,
-		DtIconAlignRight: H,
-		DtIconAlignJustify: B,
+		DtIconAlignLeft: B,
+		DtIconAlignCenter: R,
+		DtIconAlignRight: V,
+		DtIconAlignJustify: z,
 		DtIconQuote: Q,
 		DtIconCodeBlock: W,
 		DtIconLink2: J,
 		DtIconImage: K,
-		DtIconSearch: ie,
-		DtIconType: oe,
-		DtIconBraces: ne,
-		DtIconChevronDown: re,
+		DtIconSearch: ae,
+		DtIconType: ce,
+		DtIconBraces: U,
+		DtIconChevronDown: ie,
 		DtIconFontSize: G,
-		DtIconStopFilled: $
+		DtIconStopFilled: oe
 	},
 	mixins: [],
 	inheritAttrs: !1,
@@ -86,7 +86,7 @@ var ce = {
 			],
 			default: !1,
 			validator(e) {
-				return typeof e == "string" ? p.includes(e) : !0;
+				return typeof e == "string" ? m.includes(e) : !0;
 			}
 		},
 		placeholder: {
@@ -255,6 +255,7 @@ var ce = {
 	emits: [
 		"focus",
 		"blur",
+		"input",
 		"update:modelValue",
 		"quick-replies-click",
 		"inline-image-click",
@@ -271,7 +272,7 @@ var ce = {
 			linkInput: "",
 			currentButtonRefIndex: 0,
 			variableSearchValue: "",
-			i18n: new n()
+			i18n: new r()
 		};
 	},
 	computed: {
@@ -279,7 +280,7 @@ var ce = {
 			return this.internalInputValue.length;
 		},
 		htmlOutputFormat() {
-			return m[2];
+			return h[2];
 		},
 		flattenedVariableItems() {
 			return this.variableCategories ? this.variableCategories.reduce((e, t) => e.concat(t.items || []), []) : [];
@@ -344,7 +345,7 @@ var ce = {
 					showBtn: this.showFontStyleButton,
 					buttonType: "popover",
 					selector: "fontStyle",
-					icon: oe,
+					icon: ce,
 					dataQA: "dt-recipe-editor-font-style-btn",
 					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_FONT_STYLE_BUTTON_LABEL")
 				},
@@ -360,7 +361,7 @@ var ce = {
 					showBtn: this.showFontColorButton,
 					buttonType: "custom",
 					selector: "fontColor",
-					icon: $,
+					icon: oe,
 					dataQA: "dt-recipe-editor-font-color-btn",
 					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_FONT_COLOR_BUTTON_LABEL"),
 					onClick: this.onColorPickerButtonClick
@@ -369,7 +370,7 @@ var ce = {
 					showBtn: this.showBoldButton,
 					buttonType: "button",
 					selector: "bold",
-					icon: U,
+					icon: H,
 					dataQA: "dt-recipe-editor-bold-btn",
 					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_BOLD_BUTTON_LABEL"),
 					onClick: this.onBoldTextToggle
@@ -387,7 +388,7 @@ var ce = {
 					showBtn: this.showUnderlineButton,
 					buttonType: "button",
 					selector: "underline",
-					icon: se,
+					icon: $,
 					dataQA: "dt-recipe-editor-underline-btn",
 					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_UNDERLINE_BUTTON_LABEL"),
 					onClick: this.onUnderlineTextToggle
@@ -396,7 +397,7 @@ var ce = {
 					showBtn: this.showStrikeButton,
 					buttonType: "button",
 					selector: "strike",
-					icon: ae,
+					icon: se,
 					dataQA: "dt-recipe-editor-strike-btn",
 					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_STRIKE_BUTTON_LABEL"),
 					onClick: this.onStrikethroughTextToggle
@@ -409,7 +410,7 @@ var ce = {
 					showBtn: this.showAlignLeftButton,
 					buttonType: "button",
 					selector: { textAlign: "left" },
-					icon: V,
+					icon: B,
 					dataQA: "dt-recipe-editor-align-left-btn",
 					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_LEFT_BUTTON_LABEL"),
 					onClick: () => this.onTextAlign("left")
@@ -418,7 +419,7 @@ var ce = {
 					showBtn: this.showAlignCenterButton,
 					buttonType: "button",
 					selector: { textAlign: "center" },
-					icon: z,
+					icon: R,
 					dataQA: "dt-recipe-editor-align-center-btn",
 					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_CENTER_BUTTON_LABEL"),
 					onClick: () => this.onTextAlign("center")
@@ -427,7 +428,7 @@ var ce = {
 					showBtn: this.showAlignRightButton,
 					buttonType: "button",
 					selector: { textAlign: "right" },
-					icon: H,
+					icon: V,
 					dataQA: "dt-recipe-editor-align-right-btn",
 					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_RIGHT_BUTTON_LABEL"),
 					onClick: () => this.onTextAlign("right")
@@ -436,7 +437,7 @@ var ce = {
 					showBtn: this.showAlignJustifyButton,
 					buttonType: "button",
 					selector: { textAlign: "justify" },
-					icon: B,
+					icon: z,
 					dataQA: "dt-recipe-editor-align-justify-btn",
 					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_JUSTIFY_BUTTON_LABEL"),
 					onClick: () => this.onTextAlign("justify")
@@ -495,7 +496,7 @@ var ce = {
 					showBtn: this.showVariableButton,
 					buttonType: "popover",
 					selector: "variable",
-					icon: ne,
+					icon: U,
 					dataQA: "dt-recipe-editor-variable-btn",
 					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_VARIABLE_BUTTON_LABEL")
 				}
@@ -535,7 +536,7 @@ var ce = {
 			return this.$refs.editorRoot?.querySelector(".colorPickerInput");
 		},
 		isDefaultFontColor() {
-			return this.currentFontColor === h;
+			return this.currentFontColor === g;
 		},
 		actionBarBtn() {
 			let e = this.$refs[this.orderedRefs[this.currentButtonRefIndex]][0]?.$refs?.buttonRef || this.$refs[this.orderedRefs[this.currentButtonRefIndex]];
@@ -546,7 +547,8 @@ var ce = {
 		this.internalInputValue = e;
 	} },
 	methods: {
-		removeClassStyleAttrs: e,
+		removeClassStyleAttrs: t,
+		addClassStyleAttrs: e,
 		focusEditor() {
 			this.$refs.richTextEditor?.editor?.commands.focus();
 		},
@@ -562,7 +564,7 @@ var ce = {
 				this.removeLink();
 				return;
 			}
-			_.find((e) => e.test(this.linkInput)) || (this.linkInput = `${g}${this.linkInput}`);
+			v.find((e) => e.test(this.linkInput)) || (this.linkInput = `${_}${this.linkInput}`);
 			let n = t?.view?.state?.selection;
 			n.anchor === n.head ? t.chain().focus().insertContentAt(n.anchor, `<a class="${this.linkOptions.class}" href=${this.linkInput}>${this.linkInput}</a>`).run() : t.chain().focus().extendMarkRange("link").setLink({
 				href: this.linkInput,
@@ -639,8 +641,8 @@ var ce = {
 		onBlur(e) {
 			this.hasFocus = !1, this.$emit("blur", e);
 		},
-		onUpdateModelValue(e) {
-			this.$emit("update:modelValue", e);
+		onInput(e) {
+			this.$emit("input", e), this.$emit("update:modelValue", e);
 		},
 		onSelected() {
 			this.updateFontColorInput();
@@ -692,27 +694,27 @@ var ce = {
 			this.$refs.richTextEditor?.editor?.chain().focus().setColor(e).run(), this.$refs.richTextEditor?.editor?.commands.focus(), this.updateFontColorInput();
 		}
 	}
-}, le = { class: "d-recipe-editor__popover-content" };
-function ue(e, t, n, r, i, a) {
-	let o = N("dt-icon-search"), s = N("dt-input"), c = N("dt-list-item"), l = N("dt-combobox"), u = N("editor-toolbar-popover-button"), d = N("editor-toolbar-dropdown-button"), f = N("dt-button"), p = N("dt-dropdown-separator"), m = N("dt-list-item-group"), h = N("editor-toolbar-button"), g = N("dt-stack"), _ = N("dt-tooltip"), v = N("dt-popover"), y = N("dt-rich-text-editor"), b = ee("dt-tooltip");
-	return j(), w("div", {
+}, ue = { class: "d-recipe-editor__popover-content" };
+function de(e, t, n, r, i, a) {
+	let o = M("dt-icon-search"), s = M("dt-input"), c = M("dt-list-item"), l = M("dt-combobox"), u = M("editor-toolbar-popover-button"), d = M("editor-toolbar-dropdown-button"), f = M("dt-button"), p = M("dt-dropdown-separator"), m = M("dt-list-item-group"), h = M("editor-toolbar-button"), g = M("dt-stack"), _ = M("dt-tooltip"), v = M("dt-popover"), y = M("dt-rich-text-editor"), b = ne("dt-tooltip");
+	return A(), w("div", O({
 		ref: "editorRoot",
-		class: k(["d-recipe-editor", e.$attrs.class]),
-		style: A(e.$attrs.style),
+		class: "d-recipe-editor"
+	}, a.addClassStyleAttrs(e.$attrs), {
 		"data-qa": "dt-recipe-editor",
 		role: "presentation",
-		onClick: t[6] || (t[6] = (t) => e.$refs.richTextEditor.focusEditor())
-	}, [D(g, {
+		onClick: t[7] || (t[7] = (t) => e.$refs.richTextEditor.focusEditor())
+	}), [D(g, {
 		class: "d-recipe-editor__top-bar",
 		direction: "row",
-		gap: "150"
+		gap: "450"
 	}, {
-		default: I(() => [(j(!0), w(x, null, M(a.buttonGroups, (r) => (j(), S(g, {
+		default: F(() => [(A(!0), w(x, null, j(a.buttonGroups, (r) => (A(), S(g, {
 			key: r.key,
 			direction: "row",
-			gap: "50"
+			gap: "300"
 		}, {
-			default: I(() => [(j(!0), w(x, null, M(r.buttonGroup, (g) => (j(), w(x, null, [g.buttonType === "popover" && g.selector === "fontStyle" ? (j(), S(u, {
+			default: F(() => [(A(!0), w(x, null, j(r.buttonGroup, (g) => (A(), w(x, null, [g.buttonType === "popover" && g.selector === "fontStyle" ? (A(), S(u, {
 				key: a.getButtonKey(r.key, g.selector),
 				ref_for: !0,
 				ref: a.getButtonRef(r.key, g.selector),
@@ -725,36 +727,36 @@ function ue(e, t, n, r, i, a) {
 				onShiftFocusRight: a.shiftActionBarFocusRight,
 				onShiftFocusLeft: a.shiftActionBarFocusLeft
 			}, {
-				content: I(({ close: e }) => [D(l, {
+				content: F(({ close: e }) => [D(l, {
 					label: "",
-					"show-label": !1,
+					"label-visible": !1,
 					"show-list": !0,
 					"click-on-select": !0,
 					onEscape: (t) => e()
 				}, {
-					input: I(({ inputProps: e }) => [D(s, O({ ref_for: !0 }, e, {
+					input: F(({ inputProps: e }) => [D(s, O({ ref_for: !0 }, e, {
 						modelValue: i.fontStyleSearch,
 						"onUpdate:modelValue": t[0] || (t[0] = (e) => i.fontStyleSearch = e),
-						class: "d-p-100 d-pbe-50 d-w216",
+						"root-class": "d-p8 d-pb4 d-w216",
 						type: "search",
 						placeholder: i.i18n.$t("DIALTONE_EDITOR_FONT_STYLE_SEARCH_PLACEHOLDER"),
-						size: 200,
+						size: "sm",
 						role: "menuitem"
 					}), {
-						startIcon: I(({ iconSize: e }) => [D(o, { size: e }, null, 8, ["size"])]),
+						leftIcon: F(({ iconSize: e }) => [D(o, { size: e }, null, 8, ["size"])]),
 						_: 1
 					}, 16, ["modelValue", "placeholder"])]),
-					list: I(({ listProps: t }) => [T("ul", O({ ref_for: !0 }, t), [(j(!0), w(x, null, M(a.filteredFontStyles, (t) => (j(), S(c, {
+					list: F(({ listProps: t }) => [T("ul", O({ ref_for: !0 }, t), [(A(!0), w(x, null, j(a.filteredFontStyles, (t) => (A(), S(c, {
 						key: t.name,
 						selected: a.isCurrentFontFamily(t.value),
-						style: A({ fontFamily: t.value || "inherit" }),
+						style: k({ fontFamily: t.value || "inherit" }),
 						role: "option",
 						"navigation-type": "arrow-keys",
 						onClick: (n) => {
 							e(a.focusEditor), a.onFontStyleSelect(t.value);
 						}
 					}, {
-						default: I(() => [E(F(t.name), 1)]),
+						default: F(() => [E(P(t.name), 1)]),
 						_: 2
 					}, 1032, [
 						"selected",
@@ -772,7 +774,7 @@ function ue(e, t, n, r, i, a) {
 				"icon",
 				"onShiftFocusRight",
 				"onShiftFocusLeft"
-			])) : g.buttonType === "popover" && g.selector === "fontSize" ? (j(), S(d, {
+			])) : g.buttonType === "popover" && g.selector === "fontSize" ? (A(), S(d, {
 				key: a.getButtonKey(r.key, g.selector),
 				ref_for: !0,
 				ref: a.getButtonRef(r.key, g.selector),
@@ -785,7 +787,7 @@ function ue(e, t, n, r, i, a) {
 				onShiftFocusRight: a.shiftActionBarFocusRight,
 				onShiftFocusLeft: a.shiftActionBarFocusLeft
 			}, {
-				list: I(({ close: e }) => [(j(!0), w(x, null, M(n.fontSizes, (t) => (j(), S(c, {
+				list: F(({ close: e }) => [(A(!0), w(x, null, j(n.fontSizes, (t) => (A(), S(c, {
 					key: t.name,
 					selected: a.isCurrentFontSize(t.value),
 					role: "menuitem",
@@ -794,7 +796,7 @@ function ue(e, t, n, r, i, a) {
 						e(a.focusEditor), a.onFontSizeSelect(t.value, n);
 					}
 				}, {
-					default: I(() => [T("span", { style: A({ fontSize: t.value }) }, F(t.name), 5)]),
+					default: F(() => [T("span", { style: k({ fontSize: t.value }) }, P(t.name), 5)]),
 					_: 2
 				}, 1032, ["selected", "onClick"]))), 128))]),
 				_: 1
@@ -806,33 +808,33 @@ function ue(e, t, n, r, i, a) {
 				"icon",
 				"onShiftFocusRight",
 				"onShiftFocusLeft"
-			])) : g.buttonType === "custom" && g.selector === "fontColor" ? te((j(), S(f, {
+			])) : g.buttonType === "custom" && g.selector === "fontColor" ? re((A(), S(f, {
 				key: a.getButtonKey(r.key, g.selector),
 				ref_for: !0,
 				ref: a.getButtonRef(r.key, g.selector),
 				kind: "muted",
 				importance: "clear",
-				size: 100,
+				size: "xs",
 				active: e.$refs.richTextEditor?.editor?.isActive(g.selector),
 				tabindex: a.canFocus(a.getButtonRef(r.key, g.selector)) ? 0 : -1,
 				"aria-label": g.tooltipMessage,
 				"data-qa": g.dataQA,
-				onKeydown: [L(R(a.shiftActionBarFocusRight, ["stop"]), ["right"]), L(R(a.shiftActionBarFocusLeft, ["stop"]), ["left"])],
+				onKeydown: [I(L(a.shiftActionBarFocusRight, ["stop"]), ["right"]), I(L(a.shiftActionBarFocusLeft, ["stop"]), ["left"])],
 				onClick: (e) => g.onClick()
 			}, {
-				icon: I(() => [(j(), S(P(g.icon), {
+				icon: F(() => [(A(), S(N(g.icon), {
 					size: "200",
-					style: A(a.isDefaultFontColor ? {} : { color: i.currentFontColor })
+					style: k(a.isDefaultFontColor ? {} : { color: i.currentFontColor })
 				}, null, 8, ["style"])), D(s, {
 					value: i.currentFontColor,
-					class: "d-w0 d-h0 d-of-hidden",
-					"input-class": "colorPickerInput d-w0 d-h0 d-p-0 d-bar-0",
+					"root-class": "d-w0 d-h0 d-of-hidden",
+					"input-class": "colorPickerInput d-w0 d-h0 d-p0 d-bar0",
 					"input-wrapper-class": "d-w0 d-h0 d-ba-none",
-					size: 200,
+					size: "sm",
 					type: "color",
-					"onUpdate:modelValue": a.onColorPickerInput,
-					onClick: t[1] || (t[1] = R(() => {}, ["stop"]))
-				}, null, 8, ["value", "onUpdate:modelValue"])]),
+					onInput: a.onColorPickerInput,
+					onClick: t[1] || (t[1] = L(() => {}, ["stop"]))
+				}, null, 8, ["value", "onInput"])]),
 				_: 2
 			}, 1032, [
 				"active",
@@ -845,7 +847,7 @@ function ue(e, t, n, r, i, a) {
 				message: g.tooltipMessage,
 				placement: "top",
 				externalAnchorElement: e.$refs[a.getButtonRef(r.key, g.selector)]?.$el
-			}]]) : g.buttonType === "popover" && g.selector === "variable" ? (j(), S(u, {
+			}]]) : g.buttonType === "popover" && g.selector === "variable" ? (A(), S(u, {
 				key: a.getButtonKey(r.key, g.selector),
 				ref_for: !0,
 				ref: a.getButtonRef(r.key, g.selector),
@@ -858,31 +860,31 @@ function ue(e, t, n, r, i, a) {
 				onShiftFocusRight: a.shiftActionBarFocusRight,
 				onShiftFocusLeft: a.shiftActionBarFocusLeft
 			}, {
-				content: I(({ close: e }) => [D(l, {
+				content: F(({ close: e }) => [D(l, {
 					label: "",
-					"show-label": !1,
+					"label-visible": !1,
 					"show-list": !0,
 					"click-on-select": !0,
 					onEscape: (t) => e()
 				}, {
-					input: I(({ inputProps: e }) => [D(s, O({ ref_for: !0 }, e, {
+					input: F(({ inputProps: e }) => [D(s, O({ ref_for: !0 }, e, {
 						modelValue: i.variableSearchValue,
 						"onUpdate:modelValue": t[2] || (t[2] = (e) => i.variableSearchValue = e),
-						class: "d-p-100 d-pbe-50 d-w264",
+						"root-class": "d-p8 d-pb4 d-w264",
 						type: "search",
 						placeholder: i.i18n.$t("DIALTONE_EDITOR_VARIABLE_POPOVER_SEARCH_PLACEHOLDER"),
-						size: 300,
+						size: "md",
 						role: "menuitem"
 					}), {
-						startIcon: I(({ iconSize: e }) => [D(o, { size: e }, null, 8, ["size"])]),
+						leftIcon: F(({ iconSize: e }) => [D(o, { size: e }, null, 8, ["size"])]),
 						_: 1
 					}, 16, ["modelValue", "placeholder"])]),
-					list: I(({ listProps: t }) => [T("div", O({ ref_for: !0 }, t), [(j(!0), w(x, null, M(a.filteredCategories, (t, n) => (j(), S(m, {
+					list: F(({ listProps: t }) => [T("div", O({ ref_for: !0 }, t), [(A(!0), w(x, null, j(a.filteredCategories, (t, n) => (A(), S(m, {
 						key: t.name,
 						heading: t.name,
-						"heading-class": "d-headline--sm-compact d-p-100"
+						"heading-class": "d-headline--sm-compact d-p8"
 					}, {
-						default: I(() => [(j(!0), w(x, null, M(a.getFilteredItemsForCategory(t), (n) => (j(), S(c, {
+						default: F(() => [(A(!0), w(x, null, j(a.getFilteredItemsForCategory(t), (n) => (A(), S(c, {
 							key: t.name + n.name,
 							role: "option",
 							"navigation-type": "arrow-keys",
@@ -890,9 +892,9 @@ function ue(e, t, n, r, i, a) {
 								a.insertVariable(t.name, n), e(a.focusEditor);
 							}
 						}, {
-							default: I(() => [E(F(n.name), 1)]),
+							default: F(() => [E(P(n.name), 1)]),
 							_: 2
-						}, 1032, ["onClick"]))), 128)), n < a.filteredCategories.length - 1 ? (j(), S(p, { key: 0 })) : C("", !0)]),
+						}, 1032, ["onClick"]))), 128)), n < a.filteredCategories.length - 1 ? (A(), S(p, { key: 0 })) : C("", !0)]),
 						_: 2
 					}, 1032, ["heading"]))), 128))], 16)]),
 					_: 2
@@ -905,7 +907,7 @@ function ue(e, t, n, r, i, a) {
 				"icon",
 				"onShiftFocusRight",
 				"onShiftFocusLeft"
-			])) : g.buttonType === "button" ? (j(), S(h, {
+			])) : g.buttonType === "button" ? (A(), S(h, {
 				key: a.getButtonKey(r.key, g.selector),
 				ref_for: !0,
 				ref: a.getButtonRef(r.key, g.selector),
@@ -928,28 +930,28 @@ function ue(e, t, n, r, i, a) {
 				"on-click",
 				"onShiftFocusRight",
 				"onShiftFocusLeft"
-			])) : C("", !0)], 64))), 256)), t[7] || (t[7] = T("div", { class: "d-recipe-editor__button-group-divider" }, null, -1))]),
+			])) : C("", !0)], 64))), 256)), t[8] || (t[8] = T("div", { class: "d-recipe-editor__button-group-divider" }, null, -1))]),
 			_: 2
-		}, 1024))), 128)), a.linkButton.showBtn ? (j(), S(g, {
+		}, 1024))), 128)), a.linkButton.showBtn ? (A(), S(g, {
 			key: 0,
 			direction: "row",
-			gap: "50"
+			gap: "300"
 		}, {
-			default: I(() => [D(v, {
+			default: F(() => [D(v, {
 				open: i.showLinkInput,
 				"show-close-button": !1,
 				"data-qa": "dt-recipe-editor-link-input-popover",
 				padding: "none",
 				placement: "bottom-start",
-				onClick: [a.onInputFocus, R(a.onInputFocus, ["stop"])],
+				onClick: [a.onInputFocus, L(a.onInputFocus, ["stop"])],
 				onOpened: a.updateInput
 			}, {
-				anchor: I(() => [(j(), S(_, {
+				anchor: F(() => [(A(), S(_, {
 					key: a.linkButton.key,
 					message: a.linkButton.tooltipMessage,
 					placement: "top"
 				}, {
-					anchor: I(() => [D(f, {
+					anchor: F(() => [D(f, {
 						ref: a.getButtonRef("custom", "link"),
 						active: e.$refs.richTextEditor?.editor?.isActive(a.linkButton.selector),
 						"aria-label": a.linkButton.tooltipMessage,
@@ -957,11 +959,11 @@ function ue(e, t, n, r, i, a) {
 						tabindex: a.canFocus(a.getButtonRef("custom", "link")) ? 0 : -1,
 						importance: "clear",
 						kind: "muted",
-						size: 100,
+						size: "xs",
 						onClick: t[3] || (t[3] = (e) => a.linkButton.onClick()),
-						onKeydown: [L(R(a.shiftActionBarFocusRight, ["stop"]), ["right"]), L(R(a.shiftActionBarFocusLeft, ["stop"]), ["left"])]
+						onKeydown: [I(L(a.shiftActionBarFocusRight, ["stop"]), ["right"]), I(L(a.shiftActionBarFocusLeft, ["stop"]), ["left"])]
 					}, {
-						icon: I(() => [(j(), S(P(a.linkButton.icon), { size: "200" }))]),
+						icon: F(() => [(A(), S(N(a.linkButton.icon), { size: "200" }))]),
 						_: 1
 					}, 8, [
 						"active",
@@ -972,16 +974,16 @@ function ue(e, t, n, r, i, a) {
 					])]),
 					_: 1
 				}, 8, ["message"]))]),
-				content: I(() => [T("div", le, [T("span", null, F(a.showAddLinkButtonLabels.title), 1), D(s, {
+				content: F(() => [T("div", ue, [T("span", null, P(a.showAddLinkButtonLabels.title), 1), D(s, {
 					modelValue: i.linkInput,
 					"onUpdate:modelValue": t[4] || (t[4] = (e) => i.linkInput = e),
 					"input-aria-label": a.showAddLinkButtonLabels["aria-label"],
 					placeholder: n.setLinkPlaceholder,
 					"data-qa": "dt-recipe-editor-link-input",
 					"input-wrapper-class": "d-recipe-editor-link__input-wrapper",
-					onClick: [a.onInputFocus, R(a.onInputFocus, ["stop"])],
+					onClick: [a.onInputFocus, L(a.onInputFocus, ["stop"])],
 					onFocus: a.onInputFocus,
-					onKeydown: L(a.setLink, ["enter"])
+					onKeydown: I(a.setLink, ["enter"])
 				}, null, 8, [
 					"modelValue",
 					"input-aria-label",
@@ -990,35 +992,35 @@ function ue(e, t, n, r, i, a) {
 					"onFocus",
 					"onKeydown"
 				])])]),
-				footerContent: I(() => [D(g, {
+				footerContent: F(() => [D(g, {
 					direction: "row",
-					gap: "50",
+					gap: "300",
 					class: "d-recipe-editor__popover-footer"
 				}, {
-					default: I(() => [
+					default: F(() => [
 						D(f, O({
 							"data-qa": "dt-recipe-editor-remove-link-btn",
 							importance: "clear",
 							kind: "muted",
-							size: 200
+							size: "sm"
 						}, a.removeLinkButtonLabels, { onClick: a.removeLink }), {
-							default: I(() => [E(F(a.removeLinkButtonLabels.title), 1)]),
+							default: F(() => [E(P(a.removeLinkButtonLabels.title), 1)]),
 							_: 1
 						}, 16, ["onClick"]),
 						D(f, O({
 							"data-qa": "dt-recipe-editor-set-link-cancel-btn",
 							importance: "clear",
 							kind: "muted",
-							size: 200
+							size: "sm"
 						}, a.cancelSetLinkButtonLabels, { onClick: a.closeLinkInput }), {
-							default: I(() => [E(F(a.cancelSetLinkButtonLabels.title), 1)]),
+							default: F(() => [E(P(a.cancelSetLinkButtonLabels.title), 1)]),
 							_: 1
 						}, 16, ["onClick"]),
 						D(f, O({
 							"data-qa": "dt-recipe-editor-set-link-confirm-btn",
-							size: 200
+							size: "sm"
 						}, a.confirmSetLinkButtonLabels, { onClick: a.setLink }), {
-							default: I(() => [E(F(a.confirmSetLinkButtonLabels.title), 1)]),
+							default: F(() => [E(P(a.confirmSetLinkButtonLabels.title), 1)]),
 							_: 1
 						}, 16, ["onClick"])
 					]),
@@ -1034,8 +1036,8 @@ function ue(e, t, n, r, i, a) {
 		})) : C("", !0)]),
 		_: 1
 	}), T("div", {
-		style: A({ "max-height": n.maxHeight }),
-		class: k(["d-recipe-editor__content", { "d-recipe-editor__content-image-resize": n.allowImageResize }])
+		style: k({ "max-height": n.maxHeight }),
+		class: te(["d-recipe-editor__content", { "d-recipe-editor__content-image-resize": n.allowImageResize }])
 	}, [D(y, O({
 		ref: "richTextEditor",
 		modelValue: i.internalInputValue,
@@ -1049,7 +1051,7 @@ function ue(e, t, n, r, i, a) {
 		"allow-background-color": n.allowBackgroundColor,
 		"allow-line-height": n.allowLineHeight,
 		"variable-items": a.flattenedVariableItems,
-		"show-link-bubble-menu": !1,
+		"hide-link-bubble-menu": !0,
 		"auto-focus": n.autoFocus,
 		editable: n.editable,
 		"input-aria-label": n.inputAriaLabel,
@@ -1066,7 +1068,7 @@ function ue(e, t, n, r, i, a) {
 		onTextInput: a.onTextInput,
 		onBlur: a.onBlur,
 		onFocus: a.onFocus,
-		"onUpdate:modelValue": a.onUpdateModelValue,
+		onInput: t[6] || (t[6] = (e) => a.onInput(e)),
 		onSelected: a.onSelected
 	}), null, 16, [
 		"modelValue",
@@ -1087,12 +1089,11 @@ function ue(e, t, n, r, i, a) {
 		"onTextInput",
 		"onBlur",
 		"onFocus",
-		"onUpdate:modelValue",
 		"onSelected"
-	])], 6)], 6);
+	])], 6)], 16);
 }
-var de = /* @__PURE__ */ t(ce, [["render", ue]]);
+var fe = /* @__PURE__ */ n(le, [["render", de]]);
 //#endregion
-export { de as default };
+export { fe as default };
 
 //# sourceMappingURL=editor.js.map