@mekari/pixel3-rich-text-editor 0.2.1-dev.1 → 0.3.0

package/dist/modules/rich-text-editor.types.d.mts

@@ -30,6 +30,7 @@ interface RichTextEditorProps {
     options?: ToolbarOption[][];
     suggestions?: MentionSuggestionSource;
     maxSuggestions?: number;
+    mentionEmptyText?: string | ((query: string) => string);
     variables?: VariableSuggestionItem[];
     isInvalid: boolean;
     isDisabled: boolean;

package/dist/modules/rich-text-editor.types.d.ts

@@ -30,6 +30,7 @@ interface RichTextEditorProps {
     options?: ToolbarOption[][];
     suggestions?: MentionSuggestionSource;
     maxSuggestions?: number;
+    mentionEmptyText?: string | ((query: string) => string);
     variables?: VariableSuggestionItem[];
     isInvalid: boolean;
     isDisabled: boolean;

package/dist/rich-text-editor.d.mts

@@ -39,6 +39,10 @@ declare const MpRichTextEditor: vue.DefineComponent<{
         type: vue.PropType<number | undefined>;
         default: number;
     };
+    mentionEmptyText: {
+        type: vue.PropType<string | ((query: string) => string) | undefined>;
+        default: string;
+    };
     variables: {
         type: vue.PropType<VariableSuggestionItem[] | undefined>;
         default: () => never[];
@@ -88,6 +92,10 @@ declare const MpRichTextEditor: vue.DefineComponent<{
         type: vue.PropType<number | undefined>;
         default: number;
     };
+    mentionEmptyText: {
+        type: vue.PropType<string | ((query: string) => string) | undefined>;
+        default: string;
+    };
     variables: {
         type: vue.PropType<VariableSuggestionItem[] | undefined>;
         default: () => never[];
@@ -111,6 +119,7 @@ declare const MpRichTextEditor: vue.DefineComponent<{
 }, {
     suggestions: MentionSuggestionSource | undefined;
     maxSuggestions: number | undefined;
+    mentionEmptyText: string | ((query: string) => string) | undefined;
     variables: VariableSuggestionItem[] | undefined;
     isInvalid: boolean;
     isDisabled: boolean;

package/dist/rich-text-editor.d.ts

@@ -39,6 +39,10 @@ declare const MpRichTextEditor: vue.DefineComponent<{
         type: vue.PropType<number | undefined>;
         default: number;
     };
+    mentionEmptyText: {
+        type: vue.PropType<string | ((query: string) => string) | undefined>;
+        default: string;
+    };
     variables: {
         type: vue.PropType<VariableSuggestionItem[] | undefined>;
         default: () => never[];
@@ -88,6 +92,10 @@ declare const MpRichTextEditor: vue.DefineComponent<{
         type: vue.PropType<number | undefined>;
         default: number;
     };
+    mentionEmptyText: {
+        type: vue.PropType<string | ((query: string) => string) | undefined>;
+        default: string;
+    };
     variables: {
         type: vue.PropType<VariableSuggestionItem[] | undefined>;
         default: () => never[];
@@ -111,6 +119,7 @@ declare const MpRichTextEditor: vue.DefineComponent<{
 }, {
     suggestions: MentionSuggestionSource | undefined;
     maxSuggestions: number | undefined;
+    mentionEmptyText: string | ((query: string) => string) | undefined;
     variables: VariableSuggestionItem[] | undefined;
     isInvalid: boolean;
     isDisabled: boolean;

package/dist/rich-text-editor.js

@@ -76,6 +76,10 @@ var richTextEditorProps = {
     type: Number,
     default: 50
   },
+  mentionEmptyText: {
+    type: [String, Function],
+    default: "No result"
+  },
   variables: {
     type: Array,
     default: () => []
@@ -1810,7 +1814,8 @@ var import_css7 = require("@mekari/pixel3-styled-system/css");
 var import_pixel3_avatar = require("@mekari/pixel3-avatar");
 var import_pixel3_popover4 = require("@mekari/pixel3-popover");
 var import_pixel3_text3 = require("@mekari/pixel3-text");
-var import_pixel3_spinner = require("@mekari/pixel3-spinner");
+var import_pixel3_skeleton = require("@mekari/pixel3-skeleton");
+var SKELETON_ROW_COUNT = 3;
 var avatarVariantColors = ["violet", "lime", "amber", "sky", "pink", "teal", "rose", "stone"];
 var getAvatarVariantColor = /* @__PURE__ */ __name((index) => {
   return avatarVariantColors[index % avatarVariantColors.length];
@@ -1829,6 +1834,10 @@ var MentionList = (0, import_vue21.defineComponent)({
     isLoading: {
       type: Boolean,
       default: false
+    },
+    emptyText: {
+      type: String,
+      default: "No result"
     }
   },
   setup(props, {
@@ -1836,6 +1845,16 @@ var MentionList = (0, import_vue21.defineComponent)({
   }) {
     const selectedIndex = (0, import_vue21.ref)(0);
     const listRef = (0, import_vue21.ref)(null);
+    const hasResolvedNonEmptyBatch = (0, import_vue21.ref)(false);
+    (0, import_vue21.watch)(() => props.items, (items) => {
+      if (items.length > 0) {
+        hasResolvedNonEmptyBatch.value = true;
+      }
+    }, {
+      immediate: true
+    });
+    const hasAvatarData = (0, import_vue21.computed)(() => !hasResolvedNonEmptyBatch.value || props.items.some((item) => item.avatar));
+    const hasDescriptionData = (0, import_vue21.computed)(() => !hasResolvedNonEmptyBatch.value || props.items.some((item) => item.description));
     const scrollToFocusedItem = /* @__PURE__ */ __name(() => {
       (0, import_vue21.nextTick)(() => {
         if (!listRef.value)
@@ -1916,20 +1935,54 @@ var MentionList = (0, import_vue21.defineComponent)({
           default: () => [props.isLoading && (0, import_vue20.createVNode)("div", {
             "class": (0, import_css7.css)({
               display: "flex",
-              justifyContent: "center",
-              px: "3",
-              py: "3"
+              flexDirection: "column",
+              gap: "3",
+              p: "3",
+              width: "full"
+            })
+          }, [Array.from({
+            length: SKELETON_ROW_COUNT
+          }, (_, index) => (0, import_vue20.createVNode)("div", {
+            "key": index,
+            "class": (0, import_css7.css)({
+              display: "flex",
+              alignItems: "center",
+              gap: "2",
+              width: "full"
+            })
+          }, [hasAvatarData.value && (0, import_vue20.createVNode)(import_pixel3_skeleton.MpSkeleton, {
+            "class": (0, import_css7.css)({
+              width: "9",
+              height: "9",
+              rounded: "full"
+            })
+          }, null), (0, import_vue20.createVNode)("div", {
+            "class": (0, import_css7.css)({
+              display: "flex",
+              flexDirection: "column",
+              gap: "1",
+              width: "full"
+            })
+          }, [(0, import_vue20.createVNode)(import_pixel3_skeleton.MpSkeleton, {
+            "class": (0, import_css7.css)({
+              width: "40%",
+              height: "14px",
+              rounded: "sm"
+            })
+          }, null), hasDescriptionData.value && (0, import_vue20.createVNode)(import_pixel3_skeleton.MpSkeleton, {
+            "class": (0, import_css7.css)({
+              width: "70%",
+              height: "12px",
+              rounded: "sm"
             })
-          }, [(0, import_vue20.createVNode)(import_pixel3_spinner.MpSpinner, {
-            "size": "sm"
-          }, null)]), !props.isLoading && !props.items.length && (0, import_vue20.createVNode)(import_pixel3_text3.MpText, {
+          }, null)])]))]), !props.isLoading && !props.items.length && (0, import_vue20.createVNode)(import_pixel3_text3.MpText, {
             "color": "text.secondary",
             "class": (0, import_css7.css)({
               px: "3",
               py: "2"
             })
           }, {
-            default: () => [(0, import_vue20.createTextVNode)("No result")]
+            default: () => [props.emptyText]
           }), !props.isLoading && props.items.map((item, index) => {
             return (0, import_vue20.createVNode)(import_pixel3_popover4.MpPopoverListItem, {
               "key": `${item.id}-${index}`,
@@ -1998,21 +2051,24 @@ var getFilteredSuggestionItems = /* @__PURE__ */ __name((items, query, maxItems)
   }).slice(0, maxItems);
 }, "getFilteredSuggestionItems");
 var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionSource = () => [], options = {}) => {
-  var _a;
+  var _a, _b;
   const maxItems = (_a = options.maxItems) != null ? _a : 50;
+  const emptyTextOption = (_b = options.emptyText) != null ? _b : "No result";
+  const resolveEmptyText = /* @__PURE__ */ __name((query) => typeof emptyTextOption === "function" ? emptyTextOption(query) : emptyTextOption, "resolveEmptyText");
+  let latestRequestId = 0;
   return {
     items: async ({
       query
     }) => {
-      var _a2, _b, _c;
+      var _a2, _b2;
+      const requestId = ++latestRequestId;
       const source = getSuggestionSource();
-      if (typeof source === "function") {
-        const items2 = ((_a2 = await source(query)) != null ? _a2 : []).slice(0, maxItems);
-        (_b = options.onSuggestionsChange) == null ? void 0 : _b.call(options, items2);
-        return items2;
+      const items = typeof source === "function" ? ((_a2 = await source(query)) != null ? _a2 : []).slice(0, maxItems) : getFilteredSuggestionItems(source != null ? source : [], query, maxItems);
+      if (requestId !== latestRequestId) {
+        return new Promise(() => {
+        });
       }
-      const items = getFilteredSuggestionItems(source != null ? source : [], query, maxItems);
-      (_c = options.onSuggestionsChange) == null ? void 0 : _c.call(options, items);
+      (_b2 = options.onSuggestionsChange) == null ? void 0 : _b2.call(options, items);
       return items;
     },
     render: () => {
@@ -2115,7 +2171,8 @@ var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionSource = () =
             props: {
               items: [],
               command: props.command,
-              isLoading: true
+              isLoading: true,
+              emptyText: resolveEmptyText(props.query)
             }
           });
           popoverWrapper = document.createElement("div");
@@ -2133,7 +2190,8 @@ var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionSource = () =
           component == null ? void 0 : component.updateProps({
             items: props.items,
             command: props.command,
-            isLoading: false
+            isLoading: false,
+            emptyText: resolveEmptyText(props.query)
           });
           updatePopoverPosition();
         },
@@ -2150,17 +2208,18 @@ var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionSource = () =
           component == null ? void 0 : component.updateProps({
             items: props.items,
             command: props.command,
-            isLoading: false
+            isLoading: false,
+            emptyText: resolveEmptyText(props.query)
           });
           updatePopoverPosition();
         },
         onKeyDown: (props) => {
-          var _a2, _b;
+          var _a2, _b2;
           if (props.event.key === "Escape") {
             destroyMentionPopover();
             return true;
           }
-          return (_b = (_a2 = component == null ? void 0 : component.ref) == null ? void 0 : _a2.onKeyDown(props)) != null ? _b : false;
+          return (_b2 = (_a2 = component == null ? void 0 : component.ref) == null ? void 0 : _a2.onKeyDown(props)) != null ? _b2 : false;
         },
         onExit: () => {
           destroyMentionPopover();
@@ -2422,6 +2481,7 @@ var MpRichTextEditor = (0, import_vue23.defineComponent)({
         ...typeof props.suggestions === "function" || props.suggestions && props.suggestions.length > 0 ? [import_extension_mention.default.configure({
           suggestion: createMentionSuggestion(() => props.suggestions, {
             maxItems: props.maxSuggestions,
+            emptyText: props.mentionEmptyText,
             onSuggestionsChange: (items) => emit("suggestionsChange", items)
           })
         })] : [],

package/dist/rich-text-editor.mjs

@@ -1,18 +1,18 @@
 import {
   MpRichTextEditor
-} from "./chunk-E4R6ETA7.mjs";
+} from "./chunk-LUWDIXAC.mjs";
 import "./chunk-RX7ZEE2M.mjs";
 import "./chunk-HIHIKPNN.mjs";
 import "./chunk-X2CB42A3.mjs";
 import "./chunk-COZ45QUD.mjs";
 import "./chunk-FCLBNBXD.mjs";
 import "./chunk-ENKUUZPM.mjs";
-import "./chunk-RVXAG7LK.mjs";
+import "./chunk-6SZJ4DXO.mjs";
 import "./chunk-ZRAXSVO5.mjs";
 import "./chunk-ZAXJ3BEP.mjs";
-import "./chunk-B5BN5T5O.mjs";
-import "./chunk-RTEK53TL.mjs";
-import "./chunk-ELFAGDKG.mjs";
+import "./chunk-QJYUKM5Q.mjs";
+import "./chunk-7T3KAUCV.mjs";
+import "./chunk-NC3P3FRE.mjs";
 import "./chunk-BWRU2WZN.mjs";
 import "./chunk-76GEEOAG.mjs";
 import "./chunk-YWVVMJGP.mjs";

package/dist/rte-style-provider.mjs

@@ -1,9 +1,9 @@
 import {
   MpRTEStyleProvider
-} from "./chunk-RVXAG7LK.mjs";
+} from "./chunk-6SZJ4DXO.mjs";
 import "./chunk-ZRAXSVO5.mjs";
 import "./chunk-ZAXJ3BEP.mjs";
-import "./chunk-B5BN5T5O.mjs";
+import "./chunk-QJYUKM5Q.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {
   MpRTEStyleProvider

package/dist/rte-suggestion.d.mts

@@ -4,6 +4,7 @@ import '@mekari/pixel3-utils';
 
 interface CreateMentionSuggestionOptions {
     maxItems?: number;
+    emptyText?: string | ((query: string) => string);
     onSuggestionsChange?: (items: MentionSuggestionItem[]) => void;
 }
 declare const createMentionSuggestion: (getSuggestionSource?: () => MentionSuggestionSource | undefined, options?: CreateMentionSuggestionOptions) => MentionOptions['suggestion'];

package/dist/rte-suggestion.d.ts

@@ -4,6 +4,7 @@ import '@mekari/pixel3-utils';
 
 interface CreateMentionSuggestionOptions {
     maxItems?: number;
+    emptyText?: string | ((query: string) => string);
     onSuggestionsChange?: (items: MentionSuggestionItem[]) => void;
 }
 declare const createMentionSuggestion: (getSuggestionSource?: () => MentionSuggestionSource | undefined, options?: CreateMentionSuggestionOptions) => MentionOptions['suggestion'];

package/dist/rte-suggestion.js

@@ -34,7 +34,8 @@ var import_css = require("@mekari/pixel3-styled-system/css");
 var import_pixel3_avatar = require("@mekari/pixel3-avatar");
 var import_pixel3_popover = require("@mekari/pixel3-popover");
 var import_pixel3_text = require("@mekari/pixel3-text");
-var import_pixel3_spinner = require("@mekari/pixel3-spinner");
+var import_pixel3_skeleton = require("@mekari/pixel3-skeleton");
+var SKELETON_ROW_COUNT = 3;
 var avatarVariantColors = ["violet", "lime", "amber", "sky", "pink", "teal", "rose", "stone"];
 var getAvatarVariantColor = /* @__PURE__ */ __name((index) => {
   return avatarVariantColors[index % avatarVariantColors.length];
@@ -53,6 +54,10 @@ var MentionList = (0, import_vue2.defineComponent)({
     isLoading: {
       type: Boolean,
       default: false
+    },
+    emptyText: {
+      type: String,
+      default: "No result"
     }
   },
   setup(props, {
@@ -60,6 +65,16 @@ var MentionList = (0, import_vue2.defineComponent)({
   }) {
     const selectedIndex = (0, import_vue2.ref)(0);
     const listRef = (0, import_vue2.ref)(null);
+    const hasResolvedNonEmptyBatch = (0, import_vue2.ref)(false);
+    (0, import_vue2.watch)(() => props.items, (items) => {
+      if (items.length > 0) {
+        hasResolvedNonEmptyBatch.value = true;
+      }
+    }, {
+      immediate: true
+    });
+    const hasAvatarData = (0, import_vue2.computed)(() => !hasResolvedNonEmptyBatch.value || props.items.some((item) => item.avatar));
+    const hasDescriptionData = (0, import_vue2.computed)(() => !hasResolvedNonEmptyBatch.value || props.items.some((item) => item.description));
     const scrollToFocusedItem = /* @__PURE__ */ __name(() => {
       (0, import_vue2.nextTick)(() => {
         if (!listRef.value)
@@ -140,20 +155,54 @@ var MentionList = (0, import_vue2.defineComponent)({
           default: () => [props.isLoading && (0, import_vue.createVNode)("div", {
             "class": (0, import_css.css)({
               display: "flex",
-              justifyContent: "center",
-              px: "3",
-              py: "3"
+              flexDirection: "column",
+              gap: "3",
+              p: "3",
+              width: "full"
+            })
+          }, [Array.from({
+            length: SKELETON_ROW_COUNT
+          }, (_, index) => (0, import_vue.createVNode)("div", {
+            "key": index,
+            "class": (0, import_css.css)({
+              display: "flex",
+              alignItems: "center",
+              gap: "2",
+              width: "full"
+            })
+          }, [hasAvatarData.value && (0, import_vue.createVNode)(import_pixel3_skeleton.MpSkeleton, {
+            "class": (0, import_css.css)({
+              width: "9",
+              height: "9",
+              rounded: "full"
             })
-          }, [(0, import_vue.createVNode)(import_pixel3_spinner.MpSpinner, {
-            "size": "sm"
-          }, null)]), !props.isLoading && !props.items.length && (0, import_vue.createVNode)(import_pixel3_text.MpText, {
+          }, null), (0, import_vue.createVNode)("div", {
+            "class": (0, import_css.css)({
+              display: "flex",
+              flexDirection: "column",
+              gap: "1",
+              width: "full"
+            })
+          }, [(0, import_vue.createVNode)(import_pixel3_skeleton.MpSkeleton, {
+            "class": (0, import_css.css)({
+              width: "40%",
+              height: "14px",
+              rounded: "sm"
+            })
+          }, null), hasDescriptionData.value && (0, import_vue.createVNode)(import_pixel3_skeleton.MpSkeleton, {
+            "class": (0, import_css.css)({
+              width: "70%",
+              height: "12px",
+              rounded: "sm"
+            })
+          }, null)])]))]), !props.isLoading && !props.items.length && (0, import_vue.createVNode)(import_pixel3_text.MpText, {
             "color": "text.secondary",
             "class": (0, import_css.css)({
               px: "3",
               py: "2"
             })
           }, {
-            default: () => [(0, import_vue.createTextVNode)("No result")]
+            default: () => [props.emptyText]
           }), !props.isLoading && props.items.map((item, index) => {
             return (0, import_vue.createVNode)(import_pixel3_popover.MpPopoverListItem, {
               "key": `${item.id}-${index}`,
@@ -222,21 +271,24 @@ var getFilteredSuggestionItems = /* @__PURE__ */ __name((items, query, maxItems)
   }).slice(0, maxItems);
 }, "getFilteredSuggestionItems");
 var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionSource = () => [], options = {}) => {
-  var _a;
+  var _a, _b;
   const maxItems = (_a = options.maxItems) != null ? _a : 50;
+  const emptyTextOption = (_b = options.emptyText) != null ? _b : "No result";
+  const resolveEmptyText = /* @__PURE__ */ __name((query) => typeof emptyTextOption === "function" ? emptyTextOption(query) : emptyTextOption, "resolveEmptyText");
+  let latestRequestId = 0;
   return {
     items: async ({
       query
     }) => {
-      var _a2, _b, _c;
+      var _a2, _b2;
+      const requestId = ++latestRequestId;
       const source = getSuggestionSource();
-      if (typeof source === "function") {
-        const items2 = ((_a2 = await source(query)) != null ? _a2 : []).slice(0, maxItems);
-        (_b = options.onSuggestionsChange) == null ? void 0 : _b.call(options, items2);
-        return items2;
+      const items = typeof source === "function" ? ((_a2 = await source(query)) != null ? _a2 : []).slice(0, maxItems) : getFilteredSuggestionItems(source != null ? source : [], query, maxItems);
+      if (requestId !== latestRequestId) {
+        return new Promise(() => {
+        });
       }
-      const items = getFilteredSuggestionItems(source != null ? source : [], query, maxItems);
-      (_c = options.onSuggestionsChange) == null ? void 0 : _c.call(options, items);
+      (_b2 = options.onSuggestionsChange) == null ? void 0 : _b2.call(options, items);
       return items;
     },
     render: () => {
@@ -339,7 +391,8 @@ var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionSource = () =
             props: {
               items: [],
               command: props.command,
-              isLoading: true
+              isLoading: true,
+              emptyText: resolveEmptyText(props.query)
             }
           });
           popoverWrapper = document.createElement("div");
@@ -357,7 +410,8 @@ var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionSource = () =
           component == null ? void 0 : component.updateProps({
             items: props.items,
             command: props.command,
-            isLoading: false
+            isLoading: false,
+            emptyText: resolveEmptyText(props.query)
           });
           updatePopoverPosition();
         },
@@ -374,17 +428,18 @@ var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionSource = () =
           component == null ? void 0 : component.updateProps({
             items: props.items,
             command: props.command,
-            isLoading: false
+            isLoading: false,
+            emptyText: resolveEmptyText(props.query)
           });
           updatePopoverPosition();
         },
         onKeyDown: (props) => {
-          var _a2, _b;
+          var _a2, _b2;
           if (props.event.key === "Escape") {
             destroyMentionPopover();
             return true;
           }
-          return (_b = (_a2 = component == null ? void 0 : component.ref) == null ? void 0 : _a2.onKeyDown(props)) != null ? _b : false;
+          return (_b2 = (_a2 = component == null ? void 0 : component.ref) == null ? void 0 : _a2.onKeyDown(props)) != null ? _b2 : false;
         },
         onExit: () => {
           destroyMentionPopover();

package/dist/rte-suggestion.mjs

@@ -1,7 +1,7 @@
 import {
   createMentionSuggestion
-} from "./chunk-RTEK53TL.mjs";
-import "./chunk-ELFAGDKG.mjs";
+} from "./chunk-7T3KAUCV.mjs";
+import "./chunk-NC3P3FRE.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {
   createMentionSuggestion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mekari/pixel3-rich-text-editor",
   "description": "Mekari Pixel 3 | Rich text editor component is used to content editor based Tiptap.js",
-  "version": "0.2.1-dev.1",
+  "version": "0.3.0",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [
@@ -41,17 +41,17 @@
     "@tiptap/starter-kit": "2.7.4",
     "@tiptap/suggestion": "2.7.4",
     "@tiptap/vue-3": "2.7.4",
-    "@mekari/pixel3-avatar": "0.0.30-dev.1",
-    "@mekari/pixel3-form-control": "0.0.25-dev.1",
-    "@mekari/pixel3-divider": "0.0.25-dev.1",
-    "@mekari/pixel3-color-picker": "0.2.4-dev.1",
-    "@mekari/pixel3-button": "0.2.5-dev.1",
-    "@mekari/pixel3-input": "0.0.30-dev.1",
-    "@mekari/pixel3-popover": "0.0.30-dev.1",
-    "@mekari/pixel3-scrollbar": "0.1.9-dev.1",
-    "@mekari/pixel3-spinner": "0.0.30-dev.1",
-    "@mekari/pixel3-styled-system": "0.3.1-dev.1",
-    "@mekari/pixel3-text": "0.0.25-dev.1",
+    "@mekari/pixel3-avatar": "0.0.30",
+    "@mekari/pixel3-button": "0.2.5",
+    "@mekari/pixel3-divider": "0.0.25",
+    "@mekari/pixel3-input": "0.0.30",
+    "@mekari/pixel3-color-picker": "0.2.4",
+    "@mekari/pixel3-popover": "0.0.30",
+    "@mekari/pixel3-form-control": "0.0.25",
+    "@mekari/pixel3-scrollbar": "0.1.9",
+    "@mekari/pixel3-styled-system": "0.3.1",
+    "@mekari/pixel3-skeleton": "0.1.8",
+    "@mekari/pixel3-text": "0.0.25",
     "@mekari/pixel3-utils": "0.1.0"
   },
   "peerDependencies": {