@zipify/wysiwyg 4.11.5 → 4.12.0-beta.1

package/dist/wysiwyg.mjs

@@ -19333,6 +19333,7 @@ var TextSetting = /* @__PURE__ */ ((TextSetting2) => {
   TextSetting2["FONT_STYLE"] = "font_style";
   TextSetting2["FONT_WEIGHT"] = "font_weight";
   TextSetting2["LINE_HEIGHT"] = "line_height";
+  TextSetting2["LETTER_SPACING"] = "letter_spacing";
   TextSetting2["TEXT_DECORATION"] = "text_decoration";
   TextSetting2["SUPERSCRIPT"] = "superscript";
   TextSetting2["MARGIN"] = "margin";
@@ -19364,6 +19365,7 @@ const TextBlockMarkList = [
   "font_size",
   "font_style",
   "font_weight",
+  "letter_spacing",
   "text_decoration",
   "superscript"
   /* SUPERSCRIPT */
@@ -19390,17 +19392,17 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$L = {
+const _sfc_main$M = {
   name: "ToolbarGroup"
 };
-const _hoisted_1$p = { class: "zw-toolbar__group" };
+const _hoisted_1$q = { class: "zw-toolbar__group" };
 function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$p, [
+  return openBlock(), createElementBlock("div", _hoisted_1$q, [
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
-const ToolbarGroup = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$4], ["__scopeId", "data-v-8467d9b8"]]);
-const _sfc_main$K = {
+const ToolbarGroup = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$4], ["__scopeId", "data-v-8467d9b8"]]);
+const _sfc_main$L = {
   name: "ToolbarDivider",
   props: {
     vertical: {
@@ -19427,17 +19429,17 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(["zw-toolbar__divider", $setup.classes])
   }, null, 2);
 }
-const ToolbarDivider = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$3], ["__scopeId", "data-v-1a453fb5"]]);
-const _sfc_main$J = {
+const ToolbarDivider = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$3], ["__scopeId", "data-v-1a453fb5"]]);
+const _sfc_main$K = {
   name: "ToolbarRow"
 };
-const _hoisted_1$o = { class: "zw-toolbar__row" };
+const _hoisted_1$p = { class: "zw-toolbar__row" };
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$o, [
+  return openBlock(), createElementBlock("div", _hoisted_1$p, [
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
-const ToolbarRow = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$2], ["__scopeId", "data-v-14a4e361"]]);
+const ToolbarRow = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$2], ["__scopeId", "data-v-14a4e361"]]);
 const InjectionTokens$1 = Object.freeze({
   FONTS: Symbol("fonts"),
   FONT_SIZES: Symbol("fontSizes"),
@@ -21326,11 +21328,13 @@ function createKeyboardShortcut(command2, ...args) {
 function convertColor(raw) {
   return normalizeColor(raw);
 }
-function convertFontSize(value, wrapperEl) {
-  if (!value.includes("em")) return parseInt(value);
+function convertEmToPx(value, wrapperEl) {
   const containerValue = ContextWindow.getComputedStyle(wrapperEl).fontSize;
   const size = parseFloat(value) * parseFloat(containerValue);
-  return Math.round(size);
+  return Math.round(size * 10) / 10;
+}
+function convertFontSize(value, wrapperEl) {
+  return String(value).includes("em") ? Math.round(convertEmToPx(value, wrapperEl)) : parseInt(value);
 }
 function getFontSize(sourceEl, wrapperEl) {
   const source = sourceEl.firstElementChild || sourceEl;
@@ -21343,6 +21347,9 @@ function convertLineHeight(value, sourceEl, wrapperEl) {
   const fontSize = convertFontSize(rawFontSize, wrapperEl);
   return fontSize ? (parseInt(value) / fontSize).toFixed(2) : null;
 }
+function convertLetterSpacing(value, wrapperEl) {
+  return String(value).includes("em") ? convertEmToPx(value, wrapperEl) : parseFloat(value);
+}
 const MAPPING = {
   start: Alignment.LEFT,
   end: Alignment.RIGHT
@@ -21360,21 +21367,22 @@ const __vite_glob_0_5 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" sty
 const __vite_glob_0_6 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M16.64 19.93h-1.715a.75.75 0 0 1-.475-.145.82.82 0 0 1-.268-.359l-.89-2.433H8.35l-.891 2.433a.78.78 0 0 1-.26.347.73.73 0 0 1-.475.157H5L9.686 8h2.269l4.686 11.93Zm-7.72-4.505h3.803l-1.452-3.968a18.048 18.048 0 0 1-.219-.623c-.08-.24-.158-.5-.235-.78-.077.28-.152.542-.227.784a8.742 8.742 0 0 1-.218.635L8.92 15.425Zm14.968 4.505h-.915a.987.987 0 0 1-.454-.087c-.11-.058-.192-.175-.248-.35l-.181-.603a7.005 7.005 0 0 1-.631.507c-.206.146-.42.269-.64.368a3.26 3.26 0 0 1-.7.222c-.248.05-.523.075-.826.075-.357 0-.687-.049-.99-.145a2.134 2.134 0 0 1-.78-.433 1.967 1.967 0 0 1-.507-.718 2.545 2.545 0 0 1-.181-.998c0-.319.084-.634.251-.945.168-.31.447-.59.838-.841.39-.25.91-.458 1.559-.623.649-.165 1.455-.258 2.417-.28v-.495c0-.567-.12-.986-.359-1.259-.239-.272-.587-.408-1.043-.408-.33 0-.605.039-.825.116a3.17 3.17 0 0 0-.574.26 25.11 25.11 0 0 1-.45.26.912.912 0 0 1-.453.115.59.59 0 0 1-.355-.107.843.843 0 0 1-.239-.264l-.371-.652c.973-.891 2.148-1.337 3.523-1.337.494 0 .936.081 1.324.244.387.162.716.387.985.676.27.289.475.634.615 1.036.14.401.21.841.21 1.32v5.346Zm-3.96-1.271c.21 0 .402-.02.578-.058.176-.038.342-.096.5-.173.156-.077.307-.172.453-.285a4.13 4.13 0 0 0 .441-.4v-1.427c-.594.027-1.09.078-1.489.153a3.967 3.967 0 0 0-.961.284c-.242.116-.414.25-.516.404a.894.894 0 0 0-.152.504c0 .357.106.613.317.767.212.154.489.231.83.231Z" clip-rule="evenodd"/>\n</svg>\n';
 const __vite_glob_0_7 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M22 20.62a2.42 2.42 0 0 1-4.84 0c0-1.25 2.42-4.54 2.42-4.54S22 19.37 22 20.62ZM9.92 15.425l1.452-3.951c.071-.182.145-.394.219-.636.074-.242.149-.503.226-.783a17.223 17.223 0 0 0 .454 1.402l1.452 3.968H9.919Zm5.411 4.199c.226-.795.658-1.684 1.184-2.562L12.955 8h-2.269L6 19.93h1.725a.736.736 0 0 0 .474-.157.792.792 0 0 0 .26-.347l.891-2.434h4.941l.891 2.434c.031.079.097.134.148.198Z" clip-rule="evenodd"/>\n</svg>\n';
 const __vite_glob_0_8 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" d="M18 9V7h-7v2h2.64l-1.22 10H10v2h7v-2h-2.83L15.4 9H18Z"/>\n</svg>\n';
-const __vite_glob_0_9 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="m5 10 3-3 3 3H9v8h2l-3 3-3-3h2v-8H5Zm8-3h10v2H13V7Zm10 6H13v2h10v-2Zm0 6H13v2h10v-2Z" clip-rule="evenodd"/>\n</svg>\n';
-const __vite_glob_0_10 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M12 17.5h-2a3.5 3.5 0 1 1 0-7h2V9h-2a5 5 0 0 0 0 10h2v-1.5Zm6-4.5h-8v2h8v-2Zm-2-4h2a5 5 0 0 1 0 10h-2v-1.5h2a3.5 3.5 0 1 0 0-7h-2V9Z" clip-rule="evenodd"/>\n</svg>\n';
-const __vite_glob_0_11 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <rect width="9" height="9" x="9.5" y="9.5" stroke="var(--zw-icon-foreground)" rx="4.5"/>\n</svg>\n';
-const __vite_glob_0_12 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" d="M15.108 18.184V19H10.5v-.816h1.842v-5.862c0-.176.006-.354.018-.534l-1.53 1.314a.375.375 0 0 1-.156.084.373.373 0 0 1-.27-.048.318.318 0 0 1-.084-.078l-.336-.462 2.562-2.214h.87v7.8h1.692Zm1.519.156a.8.8 0 0 1 .054-.294.829.829 0 0 1 .156-.24.77.77 0 0 1 .534-.222.77.77 0 0 1 .696.462c.04.092.06.19.06.294a.744.744 0 0 1-.222.534.692.692 0 0 1-.24.156.73.73 0 0 1-.294.06.73.73 0 0 1-.294-.06.692.692 0 0 1-.396-.39.816.816 0 0 1-.054-.3Z"/>\n</svg>\n';
-const __vite_glob_0_13 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <rect width="10" height="10" x="9" y="9" fill="var(--zw-icon-foreground)" rx="5"/>\n</svg>\n';
-const __vite_glob_0_14 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" d="M12.086 9.802h.834v11.292h-.834V9.802Zm2.592 8.538a.8.8 0 0 1 .054-.294.829.829 0 0 1 .156-.24.77.77 0 0 1 .534-.222.77.77 0 0 1 .696.462c.04.092.06.19.06.294a.744.744 0 0 1-.222.534.692.692 0 0 1-.24.156.73.73 0 0 1-.294.06.73.73 0 0 1-.294-.06.692.692 0 0 1-.396-.39.816.816 0 0 1-.054-.3Z"/>\n</svg>\n';
-const __vite_glob_0_15 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" d="m13.664 15.808-1.35-3.498a7.11 7.11 0 0 1-.252-.804c-.084.324-.17.594-.258.81l-1.35 3.492h3.21ZM16.088 19h-.9a.387.387 0 0 1-.252-.078.48.48 0 0 1-.144-.198l-.804-2.076H10.13l-.804 2.076a.421.421 0 0 1-.138.192.383.383 0 0 1-.252.084h-.9l3.438-8.598h1.176L16.088 19Zm.7-.66a.8.8 0 0 1 .053-.294.829.829 0 0 1 .156-.24.77.77 0 0 1 .534-.222.77.77 0 0 1 .696.462c.04.092.06.19.06.294a.744.744 0 0 1-.222.534.692.692 0 0 1-.24.156.73.73 0 0 1-.294.06.73.73 0 0 1-.294-.06.692.692 0 0 1-.396-.39.816.816 0 0 1-.054-.3Z"/>\n</svg>\n';
-const __vite_glob_0_16 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" d="M9 9h10v10H9z"/>\n</svg>\n';
-const __vite_glob_0_17 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M14.089 6.726a1 1 0 0 1 1.425-.003l6.8 6.882a1 1 0 0 1 .007 1.398L17.2 20.3l-.2.2c-2.2 2.1-5.7 2-7.8-.2l-3.516-3.6a1 1 0 0 1 0-1.399l8.405-8.575Zm1.81 12.674c.1 0 .2 0 .2-.1l4.8-5-6.1-6.2-5 5.1 6.1 6.2Z" clip-rule="evenodd"/>\n</svg>\n';
-const __vite_glob_0_18 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" d="M14 9.333V6.666l-3.334 3.333L14 13.333v-2.667c2.206 0 4 1.793 4 4s-1.794 4-4 4c-2.207 0-4-1.793-4-4H8.666A5.332 5.332 0 0 0 14 19.999a5.332 5.332 0 0 0 5.333-5.333A5.332 5.332 0 0 0 14 9.333Z"/>\n</svg>\n';
-const __vite_glob_0_19 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="m14 12.731.77.27H20v2H8v-2h2.84a2.892 2.892 0 0 1-.46-.71 3.61 3.61 0 0 1-.29-1.52c0-.484.1-.964.29-1.41a3.5 3.5 0 0 1 .83-1.2 4 4 0 0 1 1.35-.84 4.74 4.74 0 0 1 1.83-.32 6 6 0 0 1 2.11.41 5 5 0 0 1 1.68 1l-.46.88a.69.69 0 0 1-.18.22.41.41 0 0 1-.25.07.69.69 0 0 1-.39-.16 5.551 5.551 0 0 0-.56-.36 4.641 4.641 0 0 0-.8-.36 3.44 3.44 0 0 0-1.14-.16 3.16 3.16 0 0 0-1.11.17 2.29 2.29 0 0 0-.8.45 1.87 1.87 0 0 0-.49.67 2.138 2.138 0 0 0-.11.79c-.023.357.08.711.29 1 .206.267.465.489.76.65.338.187.693.34 1.06.46Zm1.99 6.06c.24-.22.427-.49.55-.79.135-.315.2-.657.19-1h1.74a4.58 4.58 0 0 1-.25 1.38 4 4 0 0 1-.91 1.37 4.231 4.231 0 0 1-1.46.92 5.503 5.503 0 0 1-2 .33 6.13 6.13 0 0 1-2.5-.46 5.66 5.66 0 0 1-1.89-1.31l.54-.88a.61.61 0 0 1 .19-.17.45.45 0 0 1 .25-.07.5.5 0 0 1 .28.1c.128.077.251.16.37.25l.46.33c.19.13.391.243.6.34.245.107.5.191.76.25.328.076.664.11 1 .1a3.67 3.67 0 0 0 1.19-.18c.328-.109.63-.282.89-.51Z" clip-rule="evenodd"/>\n</svg>\n';
-const __vite_glob_0_20 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" d="M21.985 8.625h-1.75V9.5h2.625v.875h-3.5v-1.75c0-.481.394-.875.875-.875h1.75v-.875H19.36V6h2.625c.481 0 .875.394.875.875v.875a.878.878 0 0 1-.875.875ZM7.88 20h2.327l2.975-4.742h.105L16.262 20h2.328l-4.069-6.361L18.32 7.75h-2.345l-2.687 4.366h-.105L10.48 7.75H8.15l3.78 5.889L7.88 20Z"/>\n</svg>\n';
-const __vite_glob_0_21 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M15.4 16.06a3.3 3.3 0 0 1-1.4.29 3.12 3.12 0 0 1-1.39-.29 2.88 2.88 0 0 1-1.05-.81 3.711 3.711 0 0 1-.65-1.25 5.659 5.659 0 0 1-.22-1.6V7H9v5.41a6.89 6.89 0 0 0 .34 2.22 5.29 5.29 0 0 0 1 1.77c.437.501.975.904 1.58 1.18A5 5 0 0 0 14 18a5 5 0 0 0 2.08-.42 4.61 4.61 0 0 0 1.57-1.18 5.27 5.27 0 0 0 1-1.77 6.89 6.89 0 0 0 .35-2.22V7h-1.69v5.41a5.659 5.659 0 0 1-.22 1.59 3.71 3.71 0 0 1-.69 1.25c-.27.34-.61.617-1 .81ZM20 19H8v2h12v-2Z" clip-rule="evenodd"/>\n</svg>\n';
-const __vite_glob_0_22 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 20 20">\n    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M18.96 10a5 5 0 0 0-5-5h-2v1.5h2a3.49 3.49 0 0 1 1.58 6.61L13.43 11h.53V9h-2.53l-7-7-1.47 1.47L17.49 18l1.47-1.47-2.34-2.34A4.93 4.93 0 0 0 18.96 10Zm-13 1h1.59L5.96 9.41V11ZM3.81 7.26A3.47 3.47 0 0 0 2.46 10a3.5 3.5 0 0 0 3.5 3.5h2V15h-2a5 5 0 0 1-3.21-8.8l1.06 1.06Z" clip-rule="evenodd"/>\n</svg>\n';
-const modules = /* @__PURE__ */ Object.assign({ "../assets/icons/alignment-center.svg": __vite_glob_0_0, "../assets/icons/alignment-justify.svg": __vite_glob_0_1, "../assets/icons/alignment-left.svg": __vite_glob_0_2, "../assets/icons/alignment-right.svg": __vite_glob_0_3, "../assets/icons/arrow.svg": __vite_glob_0_4, "../assets/icons/background-color.svg": __vite_glob_0_5, "../assets/icons/case-style.svg": __vite_glob_0_6, "../assets/icons/font-color.svg": __vite_glob_0_7, "../assets/icons/italic.svg": __vite_glob_0_8, "../assets/icons/line-height.svg": __vite_glob_0_9, "../assets/icons/link.svg": __vite_glob_0_10, "../assets/icons/list-circle.svg": __vite_glob_0_11, "../assets/icons/list-decimal.svg": __vite_glob_0_12, "../assets/icons/list-disc.svg": __vite_glob_0_13, "../assets/icons/list-latin.svg": __vite_glob_0_14, "../assets/icons/list-roman.svg": __vite_glob_0_15, "../assets/icons/list-square.svg": __vite_glob_0_16, "../assets/icons/remove-format.svg": __vite_glob_0_17, "../assets/icons/reset-styles.svg": __vite_glob_0_18, "../assets/icons/strike-through.svg": __vite_glob_0_19, "../assets/icons/superscript.svg": __vite_glob_0_20, "../assets/icons/underline.svg": __vite_glob_0_21, "../assets/icons/unlink.svg": __vite_glob_0_22 });
+const __vite_glob_0_9 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 24 24">\n  <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M3 19V5h1.8v14zm16.2 0V5H21v14zM7.815 16.375l3.375-8.75h1.62l3.375 8.75h-1.552l-.81-2.231h-3.645l-.81 2.231zm2.835-3.5h2.7l-1.305-3.631h-.09z" clip-rule="evenodd"/>\n</svg>\n';
+const __vite_glob_0_10 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="m5 10 3-3 3 3H9v8h2l-3 3-3-3h2v-8H5Zm8-3h10v2H13V7Zm10 6H13v2h10v-2Zm0 6H13v2h10v-2Z" clip-rule="evenodd"/>\n</svg>\n';
+const __vite_glob_0_11 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M12 17.5h-2a3.5 3.5 0 1 1 0-7h2V9h-2a5 5 0 0 0 0 10h2v-1.5Zm6-4.5h-8v2h8v-2Zm-2-4h2a5 5 0 0 1 0 10h-2v-1.5h2a3.5 3.5 0 1 0 0-7h-2V9Z" clip-rule="evenodd"/>\n</svg>\n';
+const __vite_glob_0_12 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <rect width="9" height="9" x="9.5" y="9.5" stroke="var(--zw-icon-foreground)" rx="4.5"/>\n</svg>\n';
+const __vite_glob_0_13 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" d="M15.108 18.184V19H10.5v-.816h1.842v-5.862c0-.176.006-.354.018-.534l-1.53 1.314a.375.375 0 0 1-.156.084.373.373 0 0 1-.27-.048.318.318 0 0 1-.084-.078l-.336-.462 2.562-2.214h.87v7.8h1.692Zm1.519.156a.8.8 0 0 1 .054-.294.829.829 0 0 1 .156-.24.77.77 0 0 1 .534-.222.77.77 0 0 1 .696.462c.04.092.06.19.06.294a.744.744 0 0 1-.222.534.692.692 0 0 1-.24.156.73.73 0 0 1-.294.06.73.73 0 0 1-.294-.06.692.692 0 0 1-.396-.39.816.816 0 0 1-.054-.3Z"/>\n</svg>\n';
+const __vite_glob_0_14 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <rect width="10" height="10" x="9" y="9" fill="var(--zw-icon-foreground)" rx="5"/>\n</svg>\n';
+const __vite_glob_0_15 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" d="M12.086 9.802h.834v11.292h-.834V9.802Zm2.592 8.538a.8.8 0 0 1 .054-.294.829.829 0 0 1 .156-.24.77.77 0 0 1 .534-.222.77.77 0 0 1 .696.462c.04.092.06.19.06.294a.744.744 0 0 1-.222.534.692.692 0 0 1-.24.156.73.73 0 0 1-.294.06.73.73 0 0 1-.294-.06.692.692 0 0 1-.396-.39.816.816 0 0 1-.054-.3Z"/>\n</svg>\n';
+const __vite_glob_0_16 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" d="m13.664 15.808-1.35-3.498a7.11 7.11 0 0 1-.252-.804c-.084.324-.17.594-.258.81l-1.35 3.492h3.21ZM16.088 19h-.9a.387.387 0 0 1-.252-.078.48.48 0 0 1-.144-.198l-.804-2.076H10.13l-.804 2.076a.421.421 0 0 1-.138.192.383.383 0 0 1-.252.084h-.9l3.438-8.598h1.176L16.088 19Zm.7-.66a.8.8 0 0 1 .053-.294.829.829 0 0 1 .156-.24.77.77 0 0 1 .534-.222.77.77 0 0 1 .696.462c.04.092.06.19.06.294a.744.744 0 0 1-.222.534.692.692 0 0 1-.24.156.73.73 0 0 1-.294.06.73.73 0 0 1-.294-.06.692.692 0 0 1-.396-.39.816.816 0 0 1-.054-.3Z"/>\n</svg>\n';
+const __vite_glob_0_17 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" d="M9 9h10v10H9z"/>\n</svg>\n';
+const __vite_glob_0_18 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M14.089 6.726a1 1 0 0 1 1.425-.003l6.8 6.882a1 1 0 0 1 .007 1.398L17.2 20.3l-.2.2c-2.2 2.1-5.7 2-7.8-.2l-3.516-3.6a1 1 0 0 1 0-1.399l8.405-8.575Zm1.81 12.674c.1 0 .2 0 .2-.1l4.8-5-6.1-6.2-5 5.1 6.1 6.2Z" clip-rule="evenodd"/>\n</svg>\n';
+const __vite_glob_0_19 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" d="M14 9.333V6.666l-3.334 3.333L14 13.333v-2.667c2.206 0 4 1.793 4 4s-1.794 4-4 4c-2.207 0-4-1.793-4-4H8.666A5.332 5.332 0 0 0 14 19.999a5.332 5.332 0 0 0 5.333-5.333A5.332 5.332 0 0 0 14 9.333Z"/>\n</svg>\n';
+const __vite_glob_0_20 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="m14 12.731.77.27H20v2H8v-2h2.84a2.892 2.892 0 0 1-.46-.71 3.61 3.61 0 0 1-.29-1.52c0-.484.1-.964.29-1.41a3.5 3.5 0 0 1 .83-1.2 4 4 0 0 1 1.35-.84 4.74 4.74 0 0 1 1.83-.32 6 6 0 0 1 2.11.41 5 5 0 0 1 1.68 1l-.46.88a.69.69 0 0 1-.18.22.41.41 0 0 1-.25.07.69.69 0 0 1-.39-.16 5.551 5.551 0 0 0-.56-.36 4.641 4.641 0 0 0-.8-.36 3.44 3.44 0 0 0-1.14-.16 3.16 3.16 0 0 0-1.11.17 2.29 2.29 0 0 0-.8.45 1.87 1.87 0 0 0-.49.67 2.138 2.138 0 0 0-.11.79c-.023.357.08.711.29 1 .206.267.465.489.76.65.338.187.693.34 1.06.46Zm1.99 6.06c.24-.22.427-.49.55-.79.135-.315.2-.657.19-1h1.74a4.58 4.58 0 0 1-.25 1.38 4 4 0 0 1-.91 1.37 4.231 4.231 0 0 1-1.46.92 5.503 5.503 0 0 1-2 .33 6.13 6.13 0 0 1-2.5-.46 5.66 5.66 0 0 1-1.89-1.31l.54-.88a.61.61 0 0 1 .19-.17.45.45 0 0 1 .25-.07.5.5 0 0 1 .28.1c.128.077.251.16.37.25l.46.33c.19.13.391.243.6.34.245.107.5.191.76.25.328.076.664.11 1 .1a3.67 3.67 0 0 0 1.19-.18c.328-.109.63-.282.89-.51Z" clip-rule="evenodd"/>\n</svg>\n';
+const __vite_glob_0_21 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" d="M21.985 8.625h-1.75V9.5h2.625v.875h-3.5v-1.75c0-.481.394-.875.875-.875h1.75v-.875H19.36V6h2.625c.481 0 .875.394.875.875v.875a.878.878 0 0 1-.875.875ZM7.88 20h2.327l2.975-4.742h.105L16.262 20h2.328l-4.069-6.361L18.32 7.75h-2.345l-2.687 4.366h-.105L10.48 7.75H8.15l3.78 5.889L7.88 20Z"/>\n</svg>\n';
+const __vite_glob_0_22 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M15.4 16.06a3.3 3.3 0 0 1-1.4.29 3.12 3.12 0 0 1-1.39-.29 2.88 2.88 0 0 1-1.05-.81 3.711 3.711 0 0 1-.65-1.25 5.659 5.659 0 0 1-.22-1.6V7H9v5.41a6.89 6.89 0 0 0 .34 2.22 5.29 5.29 0 0 0 1 1.77c.437.501.975.904 1.58 1.18A5 5 0 0 0 14 18a5 5 0 0 0 2.08-.42 4.61 4.61 0 0 0 1.57-1.18 5.27 5.27 0 0 0 1-1.77 6.89 6.89 0 0 0 .35-2.22V7h-1.69v5.41a5.659 5.659 0 0 1-.22 1.59 3.71 3.71 0 0 1-.69 1.25c-.27.34-.61.617-1 .81ZM20 19H8v2h12v-2Z" clip-rule="evenodd"/>\n</svg>\n';
+const __vite_glob_0_23 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 20 20">\n    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M18.96 10a5 5 0 0 0-5-5h-2v1.5h2a3.49 3.49 0 0 1 1.58 6.61L13.43 11h.53V9h-2.53l-7-7-1.47 1.47L17.49 18l1.47-1.47-2.34-2.34A4.93 4.93 0 0 0 18.96 10Zm-13 1h1.59L5.96 9.41V11ZM3.81 7.26A3.47 3.47 0 0 0 2.46 10a3.5 3.5 0 0 0 3.5 3.5h2V15h-2a5 5 0 0 1-3.21-8.8l1.06 1.06Z" clip-rule="evenodd"/>\n</svg>\n';
+const modules = /* @__PURE__ */ Object.assign({ "../assets/icons/alignment-center.svg": __vite_glob_0_0, "../assets/icons/alignment-justify.svg": __vite_glob_0_1, "../assets/icons/alignment-left.svg": __vite_glob_0_2, "../assets/icons/alignment-right.svg": __vite_glob_0_3, "../assets/icons/arrow.svg": __vite_glob_0_4, "../assets/icons/background-color.svg": __vite_glob_0_5, "../assets/icons/case-style.svg": __vite_glob_0_6, "../assets/icons/font-color.svg": __vite_glob_0_7, "../assets/icons/italic.svg": __vite_glob_0_8, "../assets/icons/letter-spacing.svg": __vite_glob_0_9, "../assets/icons/line-height.svg": __vite_glob_0_10, "../assets/icons/link.svg": __vite_glob_0_11, "../assets/icons/list-circle.svg": __vite_glob_0_12, "../assets/icons/list-decimal.svg": __vite_glob_0_13, "../assets/icons/list-disc.svg": __vite_glob_0_14, "../assets/icons/list-latin.svg": __vite_glob_0_15, "../assets/icons/list-roman.svg": __vite_glob_0_16, "../assets/icons/list-square.svg": __vite_glob_0_17, "../assets/icons/remove-format.svg": __vite_glob_0_18, "../assets/icons/reset-styles.svg": __vite_glob_0_19, "../assets/icons/strike-through.svg": __vite_glob_0_20, "../assets/icons/superscript.svg": __vite_glob_0_21, "../assets/icons/underline.svg": __vite_glob_0_22, "../assets/icons/unlink.svg": __vite_glob_0_23 });
 function importIcon(name) {
   return modules[`../assets/icons/${name}.svg`] || "";
 }
@@ -24295,6 +24303,64 @@ const LineHeight = Extension.create({
     };
   }
 });
+const LetterSpacing = Mark2.create({
+  name: TextSetting.LETTER_SPACING,
+  group: MarkGroup.SETTINGS,
+  addAttributes: () => ({
+    mobile: { default: null },
+    tablet: { default: null },
+    desktop: { default: null }
+  }),
+  addCommands() {
+    return {
+      getLetterSpacing: createCommand(({ commands: commands2 }) => {
+        return commands2.getDeviceSettingMark(this.name, commands2.getDefaultLetterSpacing());
+      }),
+      getDefaultLetterSpacing: createCommand(({ commands: commands2 }) => {
+        const device = commands2.getDevice();
+        const preset = commands2.getPreset();
+        return computed(() => unref(preset)[unref(device)].letter_spacing ?? null);
+      }),
+      applyLetterSpacing: createCommand(({ commands: commands2 }, value) => {
+        const device = unref(commands2.getDevice());
+        commands2.applyMark(this.name, { [device]: value });
+      })
+    };
+  },
+  parseHTML() {
+    const parse = (value) => {
+      if (!value) return null;
+      const wrapperEl = unref(this.options.wrapperRef);
+      const converted = convertLetterSpacing(value, wrapperEl);
+      return `${converted}px`;
+    };
+    return [
+      {
+        tag: '[style*="--zw-letter-spacing"]',
+        getAttrs: ({ style: style2 }) => ({
+          mobile: parse(style2.getPropertyValue("--zw-letter-spacing-mobile")),
+          tablet: parse(style2.getPropertyValue("--zw-letter-spacing-tablet")),
+          desktop: parse(style2.getPropertyValue("--zw-letter-spacing-desktop"))
+        })
+      },
+      {
+        style: "letter-spacing",
+        getAttrs: (input) => {
+          const value = parse(input);
+          return { desktop: value, tablet: value, mobile: value };
+        }
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: attrs }) {
+    const addUnits = (value) => value ? `${value}px` : null;
+    return renderMark({
+      letter_spacing_mobile: addUnits(attrs.mobile),
+      letter_spacing_tablet: addUnits(attrs.tablet),
+      letter_spacing_desktop: addUnits(attrs.desktop)
+    });
+  }
+});
 const ListItem$1 = Node$1.create({
   name: "listItem",
   addOptions() {
@@ -25014,6 +25080,7 @@ function buildExtensions(options) {
     LineHeight.configure({
       wrapperRef: options.wrapperRef
     }),
+    LetterSpacing,
     Link.configure({
       preset: toRef(presetsMap, "link"),
       basePresetClass: options.basePresetClass,
@@ -26023,8 +26090,8 @@ function tooltip(el, { value, modifiers: modifiers2 }) {
   if (modifiers2.xs) el.dataset.tooltipSize = "xs";
   if (modifiers2.lg) el.dataset.tooltipSize = "lg";
 }
-const _hoisted_1$n = ["disabled"];
-const _sfc_main$I = {
+const _hoisted_1$o = ["disabled"];
+const _sfc_main$J = {
   __name: "Button",
   props: {
     skin: {
@@ -26065,13 +26132,13 @@ const _sfc_main$I = {
         onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
       }, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 10, _hoisted_1$n);
+      ], 10, _hoisted_1$o);
     };
   }
 };
-const Button = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-9ea2a71b"]]);
-const _hoisted_1$m = { class: "zw-button-toggle" };
-const _sfc_main$H = {
+const Button = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-9ea2a71b"]]);
+const _hoisted_1$n = { class: "zw-button-toggle" };
+const _sfc_main$I = {
   __name: "ButtonToggle",
   props: {
     value: {
@@ -26086,7 +26153,7 @@ const _sfc_main$H = {
   emits: ["change"],
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
         (openBlock(true), createElementBlock(Fragment$1, null, renderList(__props.options, (option) => {
           return renderSlot(_ctx.$slots, "option", {
             option,
@@ -26098,9 +26165,9 @@ const _sfc_main$H = {
     };
   }
 };
-const ButtonToggle = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-bbdc7b20"]]);
-const _hoisted_1$l = ["innerHTML"];
-const _sfc_main$G = {
+const ButtonToggle = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-bbdc7b20"]]);
+const _hoisted_1$m = ["innerHTML"];
+const _sfc_main$H = {
   __name: "Icon",
   props: {
     name: {
@@ -26140,11 +26207,11 @@ const _sfc_main$G = {
         class: normalizeClass(["zw-icon", iconClasses.value]),
         style: normalizeStyle(iconStyles.value),
         innerHTML: source.value
-      }, null, 14, _hoisted_1$l);
+      }, null, 14, _hoisted_1$m);
     };
   }
 };
-const Icon = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-09bee8af"]]);
+const Icon = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-09bee8af"]]);
 function useValidator({ validations }) {
   const error = ref(null);
   function validate() {
@@ -26284,7 +26351,7 @@ function useScrollView() {
   }
   return { scrollToElement };
 }
-const _sfc_main$F = {
+const _sfc_main$G = {
   __name: "ScrollView",
   setup(__props) {
     const hostRef = ref(null);
@@ -26307,9 +26374,9 @@ const _sfc_main$F = {
     };
   }
 };
-const ScrollView = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-07fd5408"]]);
-const _hoisted_1$k = ["for"];
-const _sfc_main$E = {
+const ScrollView = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-07fd5408"]]);
+const _hoisted_1$l = ["for"];
+const _sfc_main$F = {
   __name: "FieldLabel",
   props: {
     fieldId: {
@@ -26325,13 +26392,13 @@ const _sfc_main$E = {
         for: __props.fieldId
       }, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 8, _hoisted_1$k);
+      ], 8, _hoisted_1$l);
     };
   }
 };
-const FieldLabel = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-7ab8105c"]]);
-const _hoisted_1$j = ["id", "min", "max", "step", "value"];
-const _sfc_main$D = {
+const FieldLabel = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-7ab8105c"]]);
+const _hoisted_1$k = ["id", "min", "max", "step", "value"];
+const _sfc_main$E = {
   __name: "Range",
   props: {
     min: {
@@ -26387,19 +26454,19 @@ const _sfc_main$D = {
         value: unref(tempValue),
         style: normalizeStyle(inputStyles.value),
         onInput: _cache[0] || (_cache[0] = ($event) => update($event))
-      }, null, 44, _hoisted_1$j);
+      }, null, 44, _hoisted_1$k);
     };
   }
 };
-const Range = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-c0059745"]]);
-const _hoisted_1$i = ["id", "disabled", "value"];
-const _hoisted_2$6 = { class: "zw-number-field__controls" };
+const Range = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-c0059745"]]);
+const _hoisted_1$j = ["id", "disabled", "value"];
+const _hoisted_2$7 = { class: "zw-number-field__controls" };
 const _hoisted_3$2 = { class: "zw-number-field__buttons" };
 const _hoisted_4$1 = {
   key: 0,
   class: "zw-number-field__units"
 };
-const _sfc_main$C = {
+const _sfc_main$D = {
   __name: "NumberField",
   props: {
     value: {
@@ -26472,8 +26539,8 @@ const _sfc_main$C = {
           disabled: __props.disabled,
           value: tempValue.value,
           onChange
-        }, null, 40, _hoisted_1$i),
-        createElementVNode("div", _hoisted_2$6, [
+        }, null, 40, _hoisted_1$j),
+        createElementVNode("div", _hoisted_2$7, [
           createElementVNode("div", _hoisted_3$2, [
             createVNode(unref(Button), {
               class: "zw-number-field__increment-button",
@@ -26496,7 +26563,7 @@ const _sfc_main$C = {
     };
   }
 };
-const NumberField = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-e462abc1"]]);
+const NumberField = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-962cf185"]]);
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
@@ -27953,7 +28020,7 @@ function useFloating(reference2, floating, options) {
     update
   };
 }
-const _sfc_main$B = {
+const _sfc_main$C = {
   __name: "ModalFloating",
   props: {
     referenceRef: {
@@ -28019,8 +28086,8 @@ const _sfc_main$B = {
     };
   }
 };
-const ModalFloating = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-b3c0b9ad"]]);
-const _sfc_main$A = {
+const ModalFloating = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-b3c0b9ad"]]);
+const _sfc_main$B = {
   __name: "Modal",
   props: {
     referenceRef: {
@@ -28125,16 +28192,16 @@ const _sfc_main$A = {
     };
   }
 };
-const Modal = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-72ecfd23"]]);
-const _hoisted_1$h = { class: "zw-field" };
-const _hoisted_2$5 = ["for"];
+const Modal = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-72ecfd23"]]);
+const _hoisted_1$i = { class: "zw-field" };
+const _hoisted_2$6 = ["for"];
 const _hoisted_3$1 = ["value", "id", "placeholder"];
 const _hoisted_4 = {
   key: 0,
   class: "zw-field__label--error",
   "data-test-selector": "error"
 };
-const _sfc_main$z = {
+const _sfc_main$A = {
   __name: "TextField",
   props: {
     value: {
@@ -28165,12 +28232,12 @@ const _sfc_main$z = {
       return props.label.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase());
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$h, [
+      return openBlock(), createElementBlock("div", _hoisted_1$i, [
         createElementVNode("label", {
           class: "zw-field__label",
           for: fieldId.value,
           "data-test-selector": "label"
-        }, toDisplayString(__props.label), 9, _hoisted_2$5),
+        }, toDisplayString(__props.label), 9, _hoisted_2$6),
         createElementVNode("input", {
           class: "zw-field__input",
           type: "text",
@@ -28185,11 +28252,11 @@ const _sfc_main$z = {
     };
   }
 };
-const TextField = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-dfa0d6f0"]]);
-const _hoisted_1$g = { class: "zw-checkbox" };
-const _hoisted_2$4 = ["checked"];
+const TextField = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-dfa0d6f0"]]);
+const _hoisted_1$h = { class: "zw-checkbox" };
+const _hoisted_2$5 = ["checked"];
 const _hoisted_3 = { class: "zw-checkbox__label" };
-const _sfc_main$y = {
+const _sfc_main$z = {
   __name: "Checkbox",
   props: {
     value: {
@@ -28208,20 +28275,20 @@ const _sfc_main$y = {
     const emit = __emit;
     const onCheckedChanged = () => emit("input", !props.value);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", _hoisted_1$g, [
+      return openBlock(), createElementBlock("label", _hoisted_1$h, [
         createElementVNode("input", {
           class: "zw-checkbox__field",
           type: "checkbox",
           checked: __props.value,
           onClick: onCheckedChanged
-        }, null, 8, _hoisted_2$4),
+        }, null, 8, _hoisted_2$5),
         _cache[0] || (_cache[0] = createElementVNode("span", { class: "zw-checkbox__indicator zw-margin-right--xs" }, null, -1)),
         createElementVNode("span", _hoisted_3, toDisplayString(__props.label), 1)
       ]);
     };
   }
 };
-const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-e1624b5d"]]);
+const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-e1624b5d"]]);
 const InjectionTokens = Object.freeze({
   ACTIVE_MANAGER: Symbol("dropdownActiveManager"),
   TOGGLER: Symbol("dropdownToggler"),
@@ -28248,13 +28315,13 @@ function useDropdownEntityTitle(entityRef) {
     return ((_a = entityRef.value) == null ? void 0 : _a.title) || ((_b = entityRef.value) == null ? void 0 : _b.id) || "";
   });
 }
-const _hoisted_1$f = { class: "zw-dropdown__activator-title zw-text--truncate" };
-const _hoisted_2$3 = {
+const _hoisted_1$g = { class: "zw-dropdown__activator-title zw-text--truncate" };
+const _hoisted_2$4 = {
   key: 0,
   class: "zw-dropdown__customized-indicator",
   "data-test-selector": "customizedIndicator"
 };
-const _sfc_main$x = {
+const _sfc_main$y = {
   __name: "DropdownActivator",
   props: {
     color: {
@@ -28290,8 +28357,8 @@ const _sfc_main$x = {
           onClick: unref(dropdownToggler).open
         }, {
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_1$f, toDisplayString(unref(activeOptionTitle)), 1),
-            __props.isCustomized ? withDirectives((openBlock(), createElementBlock("span", _hoisted_2$3, null, 512)), [
+            createElementVNode("span", _hoisted_1$g, toDisplayString(unref(activeOptionTitle)), 1),
+            __props.isCustomized ? withDirectives((openBlock(), createElementBlock("span", _hoisted_2$4, null, 512)), [
               [
                 unref(tooltip),
                 "Style differs from Page Styles",
@@ -28312,8 +28379,8 @@ const _sfc_main$x = {
     };
   }
 };
-const DropdownActivator = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-678de368"]]);
-const _sfc_main$w = {
+const DropdownActivator = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-678de368"]]);
+const _sfc_main$x = {
   __name: "DropdownOption",
   props: {
     option: {
@@ -28364,10 +28431,10 @@ const _sfc_main$w = {
     };
   }
 };
-const DropdownOption = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-2e8320d2"]]);
-const _hoisted_1$e = { class: "zw-dropdown__group" };
-const _hoisted_2$2 = { class: "zw-dropdown__group-title" };
-const _sfc_main$v = {
+const DropdownOption = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-2e8320d2"]]);
+const _hoisted_1$f = { class: "zw-dropdown__group" };
+const _hoisted_2$3 = { class: "zw-dropdown__group-title" };
+const _sfc_main$w = {
   __name: "DropdownGroup",
   props: {
     group: {
@@ -28379,8 +28446,8 @@ const _sfc_main$v = {
     const props = __props;
     const groupTitle = useDropdownEntityTitle(toRef(props, "group"));
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
-        createElementVNode("p", _hoisted_2$2, toDisplayString(unref(groupTitle)), 1),
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
+        createElementVNode("p", _hoisted_2$3, toDisplayString(unref(groupTitle)), 1),
         (openBlock(true), createElementBlock(Fragment$1, null, renderList(__props.group.options, (option) => {
           return renderSlot(_ctx.$slots, "option", { option }, () => [
             createVNode(unref(DropdownOption), { option }, null, 8, ["option"])
@@ -28390,18 +28457,18 @@ const _sfc_main$v = {
     };
   }
 };
-const DropdownGroup = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-2239aa7b"]]);
-const _sfc_main$u = {};
-const _hoisted_1$d = { class: "zw-dropdown__divider" };
+const DropdownGroup = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-2239aa7b"]]);
+const _sfc_main$v = {};
+const _hoisted_1$e = { class: "zw-dropdown__divider" };
 function _sfc_render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$d);
+  return openBlock(), createElementBlock("div", _hoisted_1$e);
 }
-const DropdownDivider = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$1], ["__scopeId", "data-v-91a22273"]]);
-const _hoisted_1$c = {
+const DropdownDivider = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$1], ["__scopeId", "data-v-91a22273"]]);
+const _hoisted_1$d = {
   class: "zw-dropdown__menu",
   "data-test-selector": "dropdownMenu"
 };
-const _sfc_main$t = {
+const _sfc_main$u = {
   __name: "DropdownMenu",
   props: {
     options: {
@@ -28414,7 +28481,7 @@ const _sfc_main$t = {
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ScrollView), null, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$c, [
+          createElementVNode("div", _hoisted_1$d, [
             (openBlock(true), createElementBlock(Fragment$1, null, renderList(__props.options, (option, index) => {
               return openBlock(), createElementBlock(Fragment$1, null, [
                 option.options ? (openBlock(), createElementBlock(Fragment$1, { key: 0 }, [
@@ -28445,7 +28512,7 @@ const _sfc_main$t = {
     };
   }
 };
-const _sfc_main$s = {
+const _sfc_main$t = {
   __name: "Dropdown",
   props: {
     value: {
@@ -28509,7 +28576,7 @@ const _sfc_main$s = {
           "reference-ref": dropdownRef.value
         }, {
           default: withCtx(() => [
-            createVNode(unref(_sfc_main$t), { options: __props.options }, {
+            createVNode(unref(_sfc_main$u), { options: __props.options }, {
               option: withCtx((attrs) => [
                 renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps(attrs)), void 0, true)
               ]),
@@ -28522,7 +28589,7 @@ const _sfc_main$s = {
     };
   }
 };
-const Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-0d65726d"]]);
+const Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-0d65726d"]]);
 function usePickerApi({ pickerRef, colorRef, onChange, onClosed, onBeforeOpened }) {
   const isOpened = computed(() => {
     var _a;
@@ -28587,7 +28654,7 @@ function usePickerHotkeys({ isOpenedRef, onCancel, onApply }) {
     options: { capture: true }
   });
 }
-const _sfc_main$r = {
+const _sfc_main$s = {
   __name: "ColorPicker",
   props: {
     value: {
@@ -28658,11 +28725,11 @@ function useRecentFonts({ limit }) {
   const isEmpty = computed(() => !fonts.value.length);
   return { fonts, isEmpty, add };
 }
-const _hoisted_1$b = {
+const _hoisted_1$c = {
   key: 0,
   class: "zw-dropdown__default-option"
 };
-const _sfc_main$q = {
+const _sfc_main$r = {
   __name: "FontFamilyControl",
   setup(__props) {
     const fonts = inject(InjectionTokens$1.FONTS);
@@ -28717,7 +28784,7 @@ const _sfc_main$q = {
           }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(option.id) + " ", 1),
-              option.isDefault ? (openBlock(), createElementBlock("span", _hoisted_1$b, "(Default)")) : createCommentVNode("", true)
+              option.isDefault ? (openBlock(), createElementBlock("span", _hoisted_1$c, "(Default)")) : createCommentVNode("", true)
             ]),
             _: 2
           }, 1032, ["option", "style"])), [
@@ -28731,12 +28798,12 @@ const _sfc_main$q = {
     };
   }
 };
-const FontFamilyControl = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-e3657967"]]);
-const _hoisted_1$a = {
+const FontFamilyControl = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-e3657967"]]);
+const _hoisted_1$b = {
   key: 0,
   class: "zw-dropdown__default-option"
 };
-const _sfc_main$p = {
+const _sfc_main$q = {
   __name: "FontWeightControl",
   setup(__props) {
     const editor = inject(InjectionTokens$1.EDITOR);
@@ -28766,7 +28833,7 @@ const _sfc_main$p = {
           }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(option.id) + " ", 1),
-              option.isDefault ? (openBlock(), createElementBlock("span", _hoisted_1$a, "(Default)")) : createCommentVNode("", true)
+              option.isDefault ? (openBlock(), createElementBlock("span", _hoisted_1$b, "(Default)")) : createCommentVNode("", true)
             ]),
             _: 2
           }, 1032, ["option"])), [
@@ -28780,12 +28847,12 @@ const _sfc_main$p = {
     };
   }
 };
-const FontWeightControl = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-6c8237c7"]]);
-const _hoisted_1$9 = {
+const FontWeightControl = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-6c8237c7"]]);
+const _hoisted_1$a = {
   key: 0,
   class: "zw-dropdown__default-option"
 };
-const _sfc_main$o = {
+const _sfc_main$p = {
   __name: "FontSizeControl",
   setup(__props) {
     const fontSizes = inject(InjectionTokens$1.FONT_SIZES);
@@ -28816,7 +28883,7 @@ const _sfc_main$o = {
           }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(option.title) + " ", 1),
-              option.isDefault ? (openBlock(), createElementBlock("span", _hoisted_1$9, "(Default)")) : createCommentVNode("", true)
+              option.isDefault ? (openBlock(), createElementBlock("span", _hoisted_1$a, "(Default)")) : createCommentVNode("", true)
             ]),
             _: 2
           }, 1032, ["option"])), [
@@ -28830,13 +28897,13 @@ const _sfc_main$o = {
     };
   }
 };
-const FontSizeControl = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-779fe48e"]]);
-const _hoisted_1$8 = {
+const FontSizeControl = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-779fe48e"]]);
+const _hoisted_1$9 = {
   key: 0,
   class: "zw-button__customized-indicator",
   "data-test-selector": "customizedIndicator"
 };
-const _sfc_main$n = {
+const _sfc_main$o = {
   __name: "FontColorControl",
   setup(__props) {
     const editor = inject(InjectionTokens$1.EDITOR);
@@ -28844,7 +28911,7 @@ const _sfc_main$n = {
     const isCustomized = editor.commands.isSettingCustomized(TextSetting.FONT_COLOR);
     const apply2 = (color) => editor.chain().applyFontColor(color).run();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$r), {
+      return openBlock(), createBlock(unref(_sfc_main$s), {
         value: unref(currentValue),
         onChange: apply2
       }, {
@@ -28862,7 +28929,7 @@ const _sfc_main$n = {
                 size: "28px",
                 "auto-color": ""
               }),
-              unref(isCustomized) ? withDirectives((openBlock(), createElementBlock("span", _hoisted_1$8, null, 512)), [
+              unref(isCustomized) ? withDirectives((openBlock(), createElementBlock("span", _hoisted_1$9, null, 512)), [
                 [
                   unref(tooltip),
                   "Style differs from Page Styles",
@@ -28881,14 +28948,14 @@ const _sfc_main$n = {
     };
   }
 };
-const _sfc_main$m = {
+const _sfc_main$n = {
   __name: "BackgroundColorControl",
   setup(__props) {
     const editor = inject(InjectionTokens$1.EDITOR);
     const currentValue = editor.commands.getBackgroundColor();
     const apply2 = (color) => editor.chain().applyBackgroundColor(color).run();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$r), {
+      return openBlock(), createBlock(unref(_sfc_main$s), {
         value: unref(currentValue),
         onChange: apply2
       }, {
@@ -28916,12 +28983,12 @@ const _sfc_main$m = {
     };
   }
 };
-const _hoisted_1$7 = {
+const _hoisted_1$8 = {
   key: 0,
   class: "zw-button__customized-indicator",
   "data-test-selector": "customizedIndicator"
 };
-const _sfc_main$l = {
+const _sfc_main$m = {
   __name: "ItalicControl",
   setup(__props) {
     const editor = inject(InjectionTokens$1.EDITOR);
@@ -28944,7 +29011,7 @@ const _sfc_main$l = {
             size: "28px",
             "auto-color": ""
           }),
-          unref(isCustomized) ? withDirectives((openBlock(), createElementBlock("span", _hoisted_1$7, null, 512)), [
+          unref(isCustomized) ? withDirectives((openBlock(), createElementBlock("span", _hoisted_1$8, null, 512)), [
             [
               unref(tooltip),
               "Style differs from Page Styles",
@@ -28960,12 +29027,12 @@ const _sfc_main$l = {
     };
   }
 };
-const _hoisted_1$6 = {
+const _hoisted_1$7 = {
   key: 0,
   class: "zw-button__customized-indicator",
   "data-test-selector": "customizedIndicator"
 };
-const _sfc_main$k = {
+const _sfc_main$l = {
   __name: "UnderlineControl",
   setup(__props) {
     const editor = inject(InjectionTokens$1.EDITOR);
@@ -28986,7 +29053,7 @@ const _sfc_main$k = {
             size: "28px",
             "auto-color": ""
           }),
-          unref(isCustomized) ? withDirectives((openBlock(), createElementBlock("span", _hoisted_1$6, null, 512)), [
+          unref(isCustomized) ? withDirectives((openBlock(), createElementBlock("span", _hoisted_1$7, null, 512)), [
             [
               unref(tooltip),
               "Style differs from Page Styles",
@@ -29002,7 +29069,7 @@ const _sfc_main$k = {
     };
   }
 };
-const _sfc_main$j = {
+const _sfc_main$k = {
   __name: "StrikeThroughControl",
   setup(__props) {
     const editor = inject(InjectionTokens$1.EDITOR);
@@ -29029,7 +29096,7 @@ const _sfc_main$j = {
     };
   }
 };
-const _sfc_main$i = {
+const _sfc_main$j = {
   __name: "SuperscriptControl",
   setup(__props) {
     const editor = inject(InjectionTokens$1.EDITOR);
@@ -29056,7 +29123,7 @@ const _sfc_main$i = {
     };
   }
 };
-const _sfc_main$h = {
+const _sfc_main$i = {
   __name: "CaseStyleControl",
   setup(__props) {
     const styles = [
@@ -29095,7 +29162,7 @@ const _sfc_main$h = {
     };
   }
 };
-const _sfc_main$g = {
+const _sfc_main$h = {
   __name: "AlignmentControl",
   emits: ["applied"],
   setup(__props, { emit: __emit }) {
@@ -29170,13 +29237,13 @@ const _sfc_main$g = {
     };
   }
 };
-const _hoisted_1$5 = {
+const _hoisted_1$6 = {
   key: 0,
   class: "zw-button__customized-indicator",
   "data-test-selector": "customizedIndicator"
 };
-const _hoisted_2$1 = { class: "zw-line-height-control__row" };
-const _sfc_main$f = {
+const _hoisted_2$2 = { class: "zw-line-height-control__row" };
+const _sfc_main$g = {
   __name: "LineHeightControl",
   setup(__props) {
     const editor = inject(InjectionTokens$1.EDITOR);
@@ -29204,7 +29271,7 @@ const _sfc_main$f = {
               size: "28px",
               "auto-color": ""
             }),
-            unref(isCustomized) ? withDirectives((openBlock(), createElementBlock("span", _hoisted_1$5, null, 512)), [
+            unref(isCustomized) ? withDirectives((openBlock(), createElementBlock("span", _hoisted_1$6, null, 512)), [
               [
                 unref(tooltip),
                 "Style differs from Page Styles",
@@ -29232,7 +29299,7 @@ const _sfc_main$f = {
               ])),
               _: 1
             }),
-            createElementVNode("div", _hoisted_2$1, [
+            createElementVNode("div", _hoisted_2$2, [
               createVNode(unref(Range), {
                 class: "zw-line-height-control__range",
                 step: "0.1",
@@ -29258,7 +29325,101 @@ const _sfc_main$f = {
     };
   }
 };
-const LineHeightControl = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-643242a1"]]);
+const LineHeightControl = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-643242a1"]]);
+const _hoisted_1$5 = {
+  key: 0,
+  class: "zw-button__customized-indicator",
+  "data-test-selector": "customizedIndicator"
+};
+const _hoisted_2$1 = { class: "zw-letter-spacing-control__row" };
+const MIN_VALUE = -1.6;
+const MAX_VALUE = 3.2;
+const STEP = 0.1;
+const _sfc_main$f = {
+  __name: "LetterSpacingControl",
+  setup(__props) {
+    const editor = inject(InjectionTokens$1.EDITOR);
+    const wrapperRef = ref(null);
+    const toggler = useModalToggler();
+    const valueRef = editor.commands.getLetterSpacing();
+    const currentValue = computed(() => valueRef.value ?? 0);
+    const isCustomized = editor.commands.isSettingCustomized(TextSetting.LETTER_SPACING);
+    const apply2 = (value) => editor.commands.applyLetterSpacing(value);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "zw-position--relative",
+        ref_key: "wrapperRef",
+        ref: wrapperRef
+      }, [
+        withDirectives((openBlock(), createBlock(unref(Button), {
+          class: "zw-position--relative",
+          icon: "",
+          skin: "toolbar",
+          active: unref(toggler).isOpened,
+          onClick: unref(toggler).open
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(Icon), {
+              name: "letter-spacing",
+              size: "28px",
+              "auto-color": ""
+            }),
+            unref(isCustomized) ? withDirectives((openBlock(), createElementBlock("span", _hoisted_1$5, null, 512)), [
+              [
+                unref(tooltip),
+                "Style differs from Page Styles",
+                void 0,
+                { lg: true }
+              ]
+            ]) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["active", "onClick"])), [
+          [unref(tooltip), "Letter Spacing"]
+        ]),
+        createVNode(unref(Modal), {
+          class: "zw-letter-spacing-control__modal",
+          toggler: unref(toggler),
+          "reference-ref": wrapperRef.value
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(FieldLabel), {
+              class: "zw-margin-bottom--xs",
+              "field-id": "wswg-letter-spacing"
+            }, {
+              default: withCtx(() => _cache[0] || (_cache[0] = [
+                createTextVNode(" Letter Spacing ")
+              ])),
+              _: 1
+            }),
+            createElementVNode("div", _hoisted_2$1, [
+              createVNode(unref(Range), {
+                class: "zw-letter-spacing-control__range",
+                step: STEP,
+                min: MIN_VALUE,
+                max: MAX_VALUE,
+                value: currentValue.value,
+                onInput: apply2
+              }, null, 8, ["value"]),
+              createVNode(unref(NumberField), {
+                step: STEP,
+                min: MIN_VALUE,
+                max: MAX_VALUE,
+                units: "px",
+                class: "zw-letter-spacing-control__field",
+                "field-id": "wswg-letter-spacing",
+                value: currentValue.value,
+                onInput: apply2
+              }, null, 8, ["value"])
+            ])
+          ]),
+          _: 1
+        }, 8, ["toggler", "reference-ref"])
+      ], 512);
+    };
+  }
+};
+const LetterSpacingControl = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-ecc20653"]]);
 const _hoisted_1$4 = { class: "zpa-list-control" };
 const _sfc_main$e = {
   __name: "ListControl",
@@ -29914,8 +30075,8 @@ const _sfc_main$5 = {
             createVNode(unref(ToolbarDivider), { vertical: "" }),
             createVNode(unref(ToolbarGroup), null, {
               default: withCtx(() => [
-                createVNode(unref(_sfc_main$n)),
-                createVNode(unref(_sfc_main$m))
+                createVNode(unref(_sfc_main$o)),
+                createVNode(unref(_sfc_main$n))
               ]),
               _: 1
             })
@@ -29927,18 +30088,19 @@ const _sfc_main$5 = {
           default: withCtx(() => [
             createVNode(unref(ToolbarGroup), null, {
               default: withCtx(() => [
+                createVNode(unref(_sfc_main$m)),
                 createVNode(unref(_sfc_main$l)),
                 createVNode(unref(_sfc_main$k)),
                 createVNode(unref(_sfc_main$j)),
-                createVNode(unref(_sfc_main$i)),
-                createVNode(unref(_sfc_main$h))
+                createVNode(unref(_sfc_main$i))
               ]),
               _: 1
             }),
             createVNode(unref(ToolbarDivider), { vertical: "" }),
-            createVNode(unref(_sfc_main$g)),
+            createVNode(unref(_sfc_main$h)),
             createVNode(unref(ToolbarDivider), { vertical: "" }),
             createVNode(unref(LineHeightControl)),
+            createVNode(unref(LetterSpacingControl)),
             createVNode(unref(ToolbarDivider), { vertical: "" }),
             createVNode(unref(ListControl)),
             createVNode(unref(ToolbarDivider), { vertical: "" }),
@@ -29978,19 +30140,19 @@ const _sfc_main$4 = {
             createVNode(unref(ToolbarDivider), { vertical: "" }),
             createVNode(unref(ToolbarGroup), null, {
               default: withCtx(() => [
-                createVNode(unref(_sfc_main$n)),
-                createVNode(unref(_sfc_main$m))
+                createVNode(unref(_sfc_main$o)),
+                createVNode(unref(_sfc_main$n))
               ]),
               _: 1
             }),
             createVNode(unref(ToolbarDivider), { vertical: "" }),
             createVNode(unref(ToolbarGroup), null, {
               default: withCtx(() => [
+                createVNode(unref(_sfc_main$m)),
                 createVNode(unref(_sfc_main$l)),
                 createVNode(unref(_sfc_main$k)),
                 createVNode(unref(_sfc_main$j)),
-                createVNode(unref(_sfc_main$i)),
-                createVNode(unref(_sfc_main$h))
+                createVNode(unref(_sfc_main$i))
               ]),
               _: 1
             })
@@ -30000,9 +30162,10 @@ const _sfc_main$4 = {
         createVNode(unref(ToolbarDivider), { horizontal: "" }),
         createVNode(unref(ToolbarRow), null, {
           default: withCtx(() => [
-            createVNode(unref(_sfc_main$g)),
+            createVNode(unref(_sfc_main$h)),
             createVNode(unref(ToolbarDivider), { vertical: "" }),
             createVNode(unref(LineHeightControl)),
+            createVNode(unref(LetterSpacingControl)),
             createVNode(unref(ToolbarDivider), { vertical: "" }),
             createVNode(unref(ListControl)),
             createVNode(unref(ToolbarDivider), { vertical: "" }),
@@ -30048,19 +30211,19 @@ const _sfc_main$3 = {
             createVNode(unref(ToolbarDivider), { vertical: "" }),
             createVNode(unref(ToolbarGroup), null, {
               default: withCtx(() => [
-                createVNode(unref(_sfc_main$n)),
-                createVNode(unref(_sfc_main$m))
+                createVNode(unref(_sfc_main$o)),
+                createVNode(unref(_sfc_main$n))
               ]),
               _: 1
             }),
             createVNode(unref(ToolbarDivider), { vertical: "" }),
             createVNode(unref(ToolbarGroup), null, {
               default: withCtx(() => [
+                createVNode(unref(_sfc_main$m)),
                 createVNode(unref(_sfc_main$l)),
                 createVNode(unref(_sfc_main$k)),
                 createVNode(unref(_sfc_main$j)),
-                createVNode(unref(_sfc_main$i)),
-                createVNode(unref(_sfc_main$h))
+                createVNode(unref(_sfc_main$i))
               ]),
               _: 1
             })
@@ -30070,7 +30233,7 @@ const _sfc_main$3 = {
         createVNode(unref(ToolbarDivider), { horizontal: "" }),
         createVNode(unref(ToolbarRow), null, {
           default: withCtx(() => [
-            createVNode(unref(_sfc_main$g)),
+            createVNode(unref(_sfc_main$h)),
             createVNode(unref(ToolbarDivider), { vertical: "" }),
             createVNode(unref(LineHeightControl)),
             createVNode(unref(ToolbarDivider), { vertical: "" }),
@@ -30421,7 +30584,7 @@ export {
   ButtonToggle,
   CaseStyle,
   Checkbox,
-  _sfc_main$r as ColorPicker,
+  _sfc_main$s as ColorPicker,
   Device,
   DeviceList,
   Dropdown,