@bagelink/vue 0.0.1109 → 0.0.1111

package/dist/index.cjs

@@ -19756,114 +19756,15 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$A = { key: 0 };
-const _hoisted_2$p = ["src", "alt", "width", "height"];
-const _hoisted_3$k = ["src", "alt", "width", "height"];
-const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
-  __name: "Image",
-  props: {
-    src: {},
-    pathKey: {},
-    alt: { default: "" },
-    width: {},
-    height: {},
-    caption: {}
-  },
-  setup(__props) {
-    let imageSrc = vue.ref(null);
-    const fileBaseUrl = vue.computed(() => "https://files.bagel.design".replace(/\/$/, ""));
-    function pathToUrl() {
-      var _a2;
-      if ((_a2 = __props.pathKey) == null ? void 0 : _a2.startsWith("static/")) return `${void 0}/${__props.pathKey}`;
-      return `${fileBaseUrl.value}/${__props.pathKey}`;
-    }
-    async function loadImage() {
-      var _a2;
-      const url = __props.src || pathToUrl();
-      console.log(url);
-      if (!url) {
-        imageSrc.value = null;
-        return;
-      }
-      const ext = (_a2 = url.split(".").pop()) == null ? void 0 : _a2.toLowerCase().split("?").shift();
-      if (ext === "heic") {
-        if (!("caches" in window)) {
-          console.warn("Caching is not available. Proceeding without cache.");
-        } else {
-          try {
-            const imgCache = await window.caches.open("img-cache");
-            const cachedResponse = await imgCache.match(url);
-            if (cachedResponse) {
-              imageSrc.value = URL.createObjectURL(await cachedResponse.blob());
-              return;
-            }
-          } catch (error) {
-            console.warn("Error accessing cache:", error);
-          }
-        }
-        try {
-          await appendScript("https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.1/index.min.js");
-          const response = await fetch(url);
-          const blob = await response.blob();
-          const convertedBlob = await window.heic2any({ blob });
-          imageSrc.value = URL.createObjectURL(convertedBlob);
-          if ("caches" in window) {
-            try {
-              const imgCache = await window.caches.open("img-cache");
-              imgCache.put(url, new Response(convertedBlob));
-            } catch (cacheError) {
-              console.warn("Failed to cache the image:", cacheError);
-            }
-          }
-        } catch (error) {
-          console.error("Error converting HEIC file:", error);
-        }
-      } else {
-        imageSrc.value = url;
-      }
-    }
-    vue.watch(() => [__props.src, __props.pathKey], loadImage, { immediate: true });
-    return (_ctx, _cache) => {
-      return _ctx.caption ? (vue.openBlock(), vue.createElementBlock("figcaption", _hoisted_1$A, [
-        vue.unref(imageSrc) ? (vue.openBlock(), vue.createElementBlock("img", vue.mergeProps({
-          key: 0,
-          src: vue.unref(imageSrc)
-        }, _ctx.$attrs, {
-          alt: _ctx.alt,
-          width: vue.unref(normalizeDimension)(_ctx.width),
-          height: vue.unref(normalizeDimension)(_ctx.height)
-        }), null, 16, _hoisted_2$p)) : (vue.openBlock(), vue.createBlock(vue.unref(Skeleton), {
-          key: 1,
-          class: "img-web-kit",
-          width: vue.unref(normalizeDimension)(_ctx.width),
-          height: vue.unref(normalizeDimension)(_ctx.height)
-        }, null, 8, ["width", "height"]))
-      ])) : vue.unref(imageSrc) ? (vue.openBlock(), vue.createElementBlock("img", vue.mergeProps({
-        key: 1,
-        src: vue.unref(imageSrc)
-      }, _ctx.$attrs, {
-        alt: _ctx.alt,
-        width: vue.unref(normalizeDimension)(_ctx.width),
-        height: vue.unref(normalizeDimension)(_ctx.height)
-      }), null, 16, _hoisted_3$k)) : (vue.openBlock(), vue.createBlock(vue.unref(Skeleton), {
-        key: 2,
-        class: "img-web-kit",
-        width: vue.unref(normalizeDimension)(_ctx.width),
-        height: vue.unref(normalizeDimension)(_ctx.height)
-      }, null, 8, ["width", "height"]));
-    };
-  }
-});
-const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-29509e85"]]);
-const _hoisted_1$z = { class: "bagel-input" };
-const _hoisted_2$o = {
+const _hoisted_1$A = { class: "bagel-input" };
+const _hoisted_2$p = {
   key: 0,
   placeholder: "required",
   type: "text",
   required: "",
   class: "pixel"
 };
-const _hoisted_3$j = { class: "m-05 flex opacity-7 z-99" };
+const _hoisted_3$k = { class: "m-05 flex opacity-7 z-99" };
 const _hoisted_4$d = { class: "ellipsis-1 word-break-all h-20 m-0" };
 const _hoisted_5$c = {
   key: 1,
@@ -19893,7 +19794,7 @@ const _hoisted_13$2 = {
   class: "progress"
 };
 const _hoisted_14$1 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
-const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
   __name: "FileUpload",
   props: /* @__PURE__ */ vue.mergeModels({
     label: {},
@@ -20065,9 +19966,9 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       const _directive_tooltip = vue.resolveDirective("tooltip");
       const _directive_lightbox = vue.resolveDirective("lightbox");
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
         vue.createElementVNode("label", null, vue.toDisplayString(_ctx.label), 1),
-        _ctx.required && !storageFiles.value.length ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_2$o)) : vue.createCommentVNode("", true),
+        _ctx.required && !storageFiles.value.length ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_2$p)) : vue.createCommentVNode("", true),
         _ctx.theme === "basic" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$$), {
           key: 1,
           outline: "",
@@ -20093,7 +19994,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                 key: file.id,
                 class: "txt-gray txt-12 flex"
               }, [
-                vue.createElementVNode("div", _hoisted_3$j, [
+                vue.createElementVNode("div", _hoisted_3$k, [
                   vue.withDirectives(vue.createVNode(vue.unref(Btn), {
                     color: "gray",
                     thin: "",
@@ -20163,7 +20064,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                   key: file.id,
                   class: "multi-image-item-preview"
                 }, [
-                  isImage(file.extension || file.url) ? (vue.openBlock(), vue.createBlock(Image$1, {
+                  isImage(file.extension || file.url) ? (vue.openBlock(), vue.createBlock(vue.unref(Image$1), {
                     key: 0,
                     class: "multi-preview",
                     src: file.url,
@@ -20191,7 +20092,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                   class: "multi-image-item-preview"
                 }, [
                   isImage(fileQ.file.type) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                    _ctx.multiple ? (vue.openBlock(), vue.createBlock(Image$1, {
+                    _ctx.multiple ? (vue.openBlock(), vue.createBlock(vue.unref(Image$1), {
                       key: 0,
                       width: _ctx.width || "220",
                       class: "multi-preview",
@@ -20254,7 +20155,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                     ])
                   ]),
                   isImage(file.extension || file.url) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$2, [
-                    vue.withDirectives(vue.createVNode(Image$1, {
+                    vue.withDirectives(vue.createVNode(vue.unref(Image$1), {
                       class: "single-preview",
                       src: file.url,
                       alt: ""
@@ -20287,7 +20188,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                       icon: "check"
                     })
                   ], 6),
-                  isImage(fileQ.file.type) ? (vue.openBlock(), vue.createBlock(Image$1, {
+                  isImage(fileQ.file.type) ? (vue.openBlock(), vue.createBlock(vue.unref(Image$1), {
                     key: 0,
                     class: "single-preview",
                     src: fileToUrl(fileQ.file),
@@ -20313,11 +20214,11 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-438b09e8"]]);
-const _hoisted_1$y = ["title"];
-const _hoisted_2$n = { key: 0 };
-const _hoisted_3$i = ["value", "placeholder"];
-const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-133a8c7a"]]);
+const _hoisted_1$z = ["title"];
+const _hoisted_2$o = { key: 0 };
+const _hoisted_3$j = ["value", "placeholder"];
+const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
   __name: "JSONInput",
   props: {
     description: { default: "" },
@@ -20340,7 +20241,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$n, [
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$o, [
           vue.createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : vue.createCommentVNode("", true),
         vue.createElementVNode("textarea", {
@@ -20348,20 +20249,20 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
           class: vue.normalizeClass({ "no-edit": !_ctx.editMode }),
           placeholder: _ctx.placeholder,
           onInput: handleInput
-        }, null, 42, _hoisted_3$i)
-      ], 10, _hoisted_1$y);
+        }, null, 42, _hoisted_3$j)
+      ], 10, _hoisted_1$z);
     };
   }
 });
-const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-1cbaeab2"]]);
-const _hoisted_1$x = ["for"];
-const _hoisted_2$m = ["id", "placeholder", "disabled", "required", "readonly", "onKeydown"];
-const _hoisted_3$h = { key: 1 };
+const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-1cbaeab2"]]);
+const _hoisted_1$y = ["for"];
+const _hoisted_2$n = ["id", "placeholder", "disabled", "required", "readonly", "onKeydown"];
+const _hoisted_3$i = { key: 1 };
 const _hoisted_4$c = {
   key: 5,
   class: "flex column spinner"
 };
-const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
   __name: "NumberInput",
   props: {
     modelValue: {},
@@ -20464,7 +20365,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
                 vue.withKeys(vue.withModifiers(increment, ["prevent"]), ["up"]),
                 vue.withKeys(vue.withModifiers(decrement, ["prevent"]), ["down"])
               ]
-            }, null, 42, _hoisted_2$m), [
+            }, null, 42, _hoisted_2$n), [
               [
                 vue.vModelText,
                 vue.unref(formattedValue),
@@ -20478,7 +20379,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
                 { number: true }
               ]
             ]),
-            _ctx.helptext ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_3$h, vue.toDisplayString(_ctx.helptext), 1)) : vue.createCommentVNode("", true),
+            _ctx.helptext ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_3$i, vue.toDisplayString(_ctx.helptext), 1)) : vue.createCommentVNode("", true),
             _ctx.iconStart ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$d), {
               key: 2,
               class: "iconStart",
@@ -20517,14 +20418,14 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
               }, null, 8, ["disabled"])
             ])) : vue.createCommentVNode("", true)
           ], 2)
-        ], 8, _hoisted_1$x)
+        ], 8, _hoisted_1$y)
       ], 2);
     };
   }
 });
-const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-f265687e"]]);
-const _hoisted_1$w = ["value", "autofocus", "onKeydown", "onPaste"];
-const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-f265687e"]]);
+const _hoisted_1$x = ["value", "autofocus", "onKeydown", "onPaste"];
+const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
   __name: "OTP",
   props: {
     digitCount: {},
@@ -20622,16 +20523,16 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
             oninput: "this.value = this.value.slice(0, 1);",
             onKeydown: ($event) => handleKeyDown($event, ind),
             onPaste: ($event) => handlePaste($event, ind)
-          }, null, 40, _hoisted_1$w);
+          }, null, 40, _hoisted_1$x);
         }), 128))
       ], 512);
     };
   }
 });
-const OTP = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-5c22c199"]]);
-const _hoisted_1$v = { class: "relative" };
-const _hoisted_2$l = { class: "m-password position-bottom-end flex column justify-content-center" };
-const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+const OTP = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-5c22c199"]]);
+const _hoisted_1$w = { class: "relative" };
+const _hoisted_2$m = { class: "m-password position-bottom-end flex column justify-content-center" };
+const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   __name: "PasswordInput",
   props: /* @__PURE__ */ vue.mergeModels({
     id: {},
@@ -20672,7 +20573,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     );
     const inputType = vue.computed(() => showPwd.value ? "text" : "password");
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
         vue.createVNode(vue.unref(TextInput), vue.mergeProps({
           modelValue: password.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => password.value = $event)
@@ -20680,7 +20581,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
           type: inputType.value,
           class: "mb-0"
         }), null, 16, ["modelValue", "type"]),
-        vue.createElementVNode("div", _hoisted_2$l, [
+        vue.createElementVNode("div", _hoisted_2$m, [
           vue.createVNode(vue.unref(Btn), {
             flat: "",
             thin: "",
@@ -20693,9 +20594,9 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$u = ["for"];
-const _hoisted_2$k = ["id", "name", "value", "required"];
-const _hoisted_3$g = { class: "flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025" };
+const _hoisted_1$v = ["for"];
+const _hoisted_2$l = ["id", "name", "value", "required"];
+const _hoisted_3$h = { class: "flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025" };
 const _hoisted_4$b = ["src", "alt"];
 const _hoisted_5$b = { class: "" };
 const _hoisted_6$9 = {
@@ -20706,7 +20607,7 @@ const _hoisted_7$6 = {
   key: 1,
   class: "txt-gray txt-12 m-0"
 };
-const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
   __name: "RadioGroup",
   props: /* @__PURE__ */ vue.mergeModels({
     groupName: {},
@@ -20736,10 +20637,10 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
               name: _ctx.groupName,
               value: opt.value,
               required: _ctx.required
-            }, null, 8, _hoisted_2$k), [
+            }, null, 8, _hoisted_2$l), [
               [vue.vModelRadio, selectedOption.value]
             ]),
-            vue.createElementVNode("div", _hoisted_3$g, [
+            vue.createElementVNode("div", _hoisted_3$h, [
               opt.imgSrc ? (vue.openBlock(), vue.createElementBlock("img", {
                 key: 0,
                 class: "bg-popup shadow-light py-025 radius-05 m_w40",
@@ -20761,19 +20662,19 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
               icon: "delete",
               onClick: ($event) => _ctx.$emit("delete", opt)
             }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
-          ], 8, _hoisted_1$u);
+          ], 8, _hoisted_1$v);
         }), 128))
       ]);
     };
   }
 });
-const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-3c77be46"]]);
-const _hoisted_1$t = { class: "bagel-input" };
-const _hoisted_2$j = { class: "pb-025" };
-const _hoisted_3$f = { class: "flex gap-05 flex-wrap" };
+const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-3c77be46"]]);
+const _hoisted_1$u = { class: "bagel-input" };
+const _hoisted_2$k = { class: "pb-025" };
+const _hoisted_3$g = { class: "flex gap-05 flex-wrap" };
 const _hoisted_4$a = ["id", "name", "value", "checked"];
 const _hoisted_5$a = ["for"];
-const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
   __name: "RadioPillsInput",
   props: {
     options: {},
@@ -20814,9 +20715,9 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
       selectedValue.value = props2.modelValue;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
-        vue.createElementVNode("label", _hoisted_2$j, vue.toDisplayString(_ctx.label), 1),
-        vue.createElementVNode("div", _hoisted_3$f, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
+        vue.createElementVNode("label", _hoisted_2$k, vue.toDisplayString(_ctx.label), 1),
+        vue.createElementVNode("div", _hoisted_3$g, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (option2, index2) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               key: index2,
@@ -20840,18 +20741,18 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-cf892d71"]]);
-const _hoisted_1$s = ["dir"];
-const _hoisted_2$i = {
+const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-cf892d71"]]);
+const _hoisted_1$t = ["dir"];
+const _hoisted_2$j = {
   key: 0,
   class: "label"
 };
-const _hoisted_3$e = { class: "range-slider relative w-100" };
+const _hoisted_3$f = { class: "range-slider relative w-100" };
 const _hoisted_4$9 = ["id", "value", "min", "max", "step", "required", "disabled", "aria-label"];
 const _hoisted_5$9 = ["value", "min", "max", "step", "required", "disabled"];
 const _hoisted_6$8 = { class: "track absolute pointer-events-none overflow-hidden round" };
 const _hoisted_7$5 = { class: "txt-center txt-14 user-select-none range-slider-txt flex space-between opacity-4 mx-05" };
-const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
   __name: "RangeInput",
   props: {
     modelValue: {},
@@ -20919,8 +20820,8 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", {
         dir: vue.unref(rtl) ? "rtl" : "ltr"
       }, [
-        vue.unref(label) ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$i, vue.toDisplayString(vue.unref(label)), 1)) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_3$e, [
+        vue.unref(label) ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$j, vue.toDisplayString(vue.unref(label)), 1)) : vue.createCommentVNode("", true),
+        vue.createElementVNode("div", _hoisted_3$f, [
           vue.createElementVNode("input", {
             id: vue.unref(id),
             value: validFrom.value,
@@ -21011,11 +20912,11 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
             vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(formatValue)(vue.unref(max2))), 1)
           ], true)
         ])
-      ], 8, _hoisted_1$s);
+      ], 8, _hoisted_1$t);
     };
   }
 });
-const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-e606435a"]]);
+const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-e606435a"]]);
 const tableTools = [
   "mergeCells",
   "splitCells",
@@ -21105,12 +21006,12 @@ const toolbarOptions = [
   { name: "separator" },
   { name: "fullScreen", label: "Full Screen", icon: "fullscreen", class: "ms-auto" }
 ];
-const _hoisted_1$r = { class: "grid grid-wrap p-05" };
-const _hoisted_2$h = ["onMousemove", "onClick"];
-const _hoisted_3$d = { class: "txt-center txt-12 color-gray" };
+const _hoisted_1$s = { class: "grid grid-wrap p-05" };
+const _hoisted_2$i = ["onMousemove", "onClick"];
+const _hoisted_3$e = { class: "txt-center txt-12 color-gray" };
 const fb = 1;
 const base = 5;
-const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
   __name: "gridBox",
   emits: ["select"],
   setup(__props, { emit: __emit }) {
@@ -21126,7 +21027,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
       return hoveredCol.value > base - 1 ? enlarge : base;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(rowSize.value, (row) => {
           return vue.openBlock(), vue.createElementBlock("div", {
             key: `row-${row}`,
@@ -21153,21 +21054,21 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
                   hoveredCol.value = col;
                 },
                 onClick: ($event) => emit2("select", `${row}x${col}`)
-              }, null, 42, _hoisted_2$h);
+              }, null, 42, _hoisted_2$i);
             }), 128))
           ], 32);
         }), 128)),
-        vue.createElementVNode("p", _hoisted_3$d, vue.toDisplayString(hoveredRow.value) + "x" + vue.toDisplayString(hoveredCol.value), 1)
+        vue.createElementVNode("p", _hoisted_3$e, vue.toDisplayString(hoveredRow.value) + "x" + vue.toDisplayString(hoveredCol.value), 1)
       ]);
     };
   }
 });
-const GridBox = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-4548b70f"]]);
-const _hoisted_1$q = {
+const GridBox = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-4548b70f"]]);
+const _hoisted_1$r = {
   class: "toolbar flex gap-025 pb-05 flex-wrap",
   role: "toolbar"
 };
-const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
   __name: "EditorToolbar",
   props: {
     config: { default: defaultToolbarConfig },
@@ -21182,7 +21083,7 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     }
     return (_ctx, _cache) => {
       const _directive_tooltip = vue.resolveDirective("tooltip");
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.config.map(configToOption).filter(Boolean), (action, index2) => {
           return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index2 }, [
             action.name === "insertTable" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$X), {
@@ -21224,7 +21125,7 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-33dff8fa"]]);
+const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-33dff8fa"]]);
 function createCommandExecutor(state2, commands) {
   return {
     execute(command, value) {
@@ -22144,12 +22045,12 @@ function useEditorKeyboard(doc, handleToolbarAction) {
     }
   });
 }
-const _hoisted_1$p = { class: "content-area radius-05" };
-const _hoisted_2$g = {
+const _hoisted_1$q = { class: "content-area radius-05" };
+const _hoisted_2$h = {
   key: 1,
   class: "flex"
 };
-const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   props: {
     modelValue: {},
@@ -22233,7 +22134,7 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("div", {
           class: vue.normalizeClass(["editor-container", { "split-view": vue.unref(editor).state.isSplitView }])
         }, [
-          vue.createElementVNode("div", _hoisted_1$p, [
+          vue.createElementVNode("div", _hoisted_1$q, [
             vue.createElementVNode("iframe", {
               id: "rich-text-iframe",
               ref_key: "iframe",
@@ -22253,7 +22154,7 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
             language: "html"
           }, null, 8, ["modelValue"])) : vue.createCommentVNode("", true)
         ], 2),
-        _ctx.debug ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$g, [
+        _ctx.debug ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$h, [
           _cache[6] || (_cache[6] = vue.createElementVNode("p", { class: "text12 txt-gray mb-0 p-0" }, " Debug ", -1)),
           vue.createVNode(vue.unref(Btn), {
             thin: "",
@@ -22296,10 +22197,10 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-2e74943d"]]);
-const _hoisted_1$o = { class: "flex gap-05" };
-const _hoisted_2$f = ["disabled"];
-const _hoisted_3$c = { key: 1 };
+const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-2e74943d"]]);
+const _hoisted_1$p = { class: "flex gap-05" };
+const _hoisted_2$g = ["disabled"];
+const _hoisted_3$d = { key: 1 };
 const _hoisted_4$8 = {
   key: 2,
   class: "ms-auto ps-05 me-05"
@@ -22307,7 +22208,7 @@ const _hoisted_4$8 = {
 const _hoisted_5$8 = ["value"];
 const _hoisted_6$7 = ["aria-selected", "onClick", "onKeydown"];
 const _hoisted_7$4 = { class: "block" };
-const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
   __name: "SelectInput",
   props: {
     options: {},
@@ -22495,7 +22396,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
         trigger: vue.withCtx(() => [
           vue.createElementVNode("label", null, [
             vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
-            vue.createElementVNode("div", _hoisted_1$o, [
+            vue.createElementVNode("div", _hoisted_1$p, [
               _ctx.searchable && vue.unref(open) ? (vue.openBlock(), vue.createBlock(vue.unref(TextInput), {
                 key: 0,
                 ref_key: "searchInput",
@@ -22526,7 +22427,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
                   key: 0,
                   icon: _ctx.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                !_ctx.hideLabel ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_3$c, vue.toDisplayString(selectedLabel.value), 1)) : vue.createCommentVNode("", true),
+                !_ctx.hideLabel ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_3$d, vue.toDisplayString(selectedLabel.value), 1)) : vue.createCommentVNode("", true),
                 _ctx.clearable && selectedItemCount.value > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$8, [
                   vue.createVNode(vue.unref(Btn), {
                     flat: "",
@@ -22543,7 +22444,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
                   key: 3,
                   thin: ""
                 }, { icon: vue.unref(open) ? "unfold_less" : "unfold_more" }), null, 16)) : vue.createCommentVNode("", true)
-              ], 42, _hoisted_2$f)),
+              ], 42, _hoisted_2$g)),
               _ctx.required ? (vue.openBlock(), vue.createElementBlock("input", {
                 key: 2,
                 tabindex: "-1",
@@ -22613,7 +22514,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-77b2541f"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-77b2541f"]]);
 /*!
  * Signature Pad v5.0.4 | https://github.com/szimek/signature_pad
  * (c) 2024 Szymon Nowak | Released under the MIT license
@@ -23210,15 +23111,15 @@ class SignaturePad extends SignatureEventTarget {
     return svg.outerHTML;
   }
 }
-const _hoisted_1$n = ["disabled"];
-const _hoisted_2$e = {
+const _hoisted_1$o = ["disabled"];
+const _hoisted_2$f = {
   key: 1,
   placeholder: "required",
   type: "text",
   required: "",
   class: "pixel"
 };
-const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
   __name: "SignaturePad",
   props: /* @__PURE__ */ vue.mergeModels({
     sigOption: {},
@@ -23371,8 +23272,8 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
           ref: vCanvas,
           class: "canvas",
           disabled: _ctx.disabled
-        }, null, 8, _hoisted_1$n),
-        _ctx.required && vue.unref(_isEmpty) ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_2$e)) : vue.createCommentVNode("", true)
+        }, null, 8, _hoisted_1$o),
+        _ctx.required && vue.unref(_isEmpty) ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_2$f)) : vue.createCommentVNode("", true)
       ], 34);
     };
   }
@@ -25856,13 +25757,13 @@ const VueDraggableNext = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$m = ["title"];
-const _hoisted_2$d = { class: "bagel-input" };
-const _hoisted_3$b = { class: "table-side-scroll" };
+const _hoisted_1$n = ["title"];
+const _hoisted_2$e = { class: "bagel-input" };
+const _hoisted_3$c = { class: "table-side-scroll" };
 const _hoisted_4$7 = { class: "table-header" };
 const _hoisted_5$7 = { class: "table-reorder" };
 const _hoisted_6$6 = { class: "table-action" };
-const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
   __name: "TableField",
   props: {
     description: { default: "" },
@@ -25927,10 +25828,10 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
         class: "table-field-wrap",
         title: _ctx.description
       }, [
-        vue.createElementVNode("div", _hoisted_2$d, [
+        vue.createElementVNode("div", _hoisted_2$e, [
           vue.createElementVNode("label", null, vue.toDisplayString((_a2 = vue.unref(fieldMeta)) == null ? void 0 : _a2.label), 1)
         ]),
-        vue.createElementVNode("div", _hoisted_3$b, [
+        vue.createElementVNode("div", _hoisted_3$c, [
           vue.createElementVNode("div", _hoisted_4$7, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_b = vue.unref(entityMeta)) == null ? void 0 : _b.fields, (field) => {
               return vue.openBlock(), vue.createElementBlock("div", {
@@ -26002,11 +25903,11 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
           ])),
           _: 1
         })
-      ], 8, _hoisted_1$m);
+      ], 8, _hoisted_1$n);
     };
   }
 });
-const TableField = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-a65c658c"]]);
+const TableField = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-a65c658c"]]);
 function bind(fn2, thisArg) {
   return function wrap() {
     return fn2.apply(thisArg, arguments);
@@ -30453,13 +30354,13 @@ function parsePhoneNumber$1() {
 function parsePhoneNumber() {
   return withMetadataArgument(parsePhoneNumber$1, arguments);
 }
-const _hoisted_1$l = ["aria-expanded"];
-const _hoisted_2$c = { class: "p-075 tel-countryp-dropdown" };
-const _hoisted_3$a = ["aria-selected", "onClick", "onMousemove"];
+const _hoisted_1$m = ["aria-expanded"];
+const _hoisted_2$d = { class: "p-075 tel-countryp-dropdown" };
+const _hoisted_3$b = ["aria-selected", "onClick", "onMousemove"];
 const _hoisted_4$6 = { class: "tel-country" };
 const _hoisted_5$6 = { key: 1 };
 const _hoisted_6$5 = ["id", "required", "placeholder", "disabled", "autocomplete", "pattern", "minlength", "maxlength", "name", "readonly", "tabindex", "aria-describedby"];
-const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
   __name: "TelInput",
   props: /* @__PURE__ */ vue.mergeModels({
     label: {},
@@ -30744,7 +30645,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
                 ])
               ]),
               default: vue.withCtx(() => [
-                vue.createElementVNode("div", _hoisted_2$c, [
+                vue.createElementVNode("div", _hoisted_2$d, [
                   _ctx.searchable ? (vue.openBlock(), vue.createBlock(vue.unref(TextInput), {
                     key: 0,
                     modelValue: searchQuery.value,
@@ -30774,7 +30675,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
                         }, null, 8, ["country"])) : vue.createCommentVNode("", true),
                         vue.createElementVNode("p", _hoisted_4$6, vue.toDisplayString(pb.name), 1),
                         computedDropDownOptions.value.showDialCodeInList ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$6, " +" + vue.toDisplayString(pb.dialCode), 1)) : vue.createCommentVNode("", true)
-                      ], 40, _hoisted_3$a);
+                      ], 40, _hoisted_3$b);
                     }), 128))
                   ], 2)
                 ])
@@ -30808,19 +30709,19 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
             }, null, 44, _hoisted_6$5), [
               [vue.vModelText, phone.value]
             ])
-          ], 40, _hoisted_1$l)
+          ], 40, _hoisted_1$m)
         ])
       ], 2);
     };
   }
 });
-const TelInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-cfcf054d"]]);
-const _hoisted_1$k = ["title"];
-const _hoisted_2$b = ["for"];
-const _hoisted_3$9 = ["id", "title", "autocomplete", "type", "placeholder", "disabled", "required", "pattern"];
+const TelInput = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-cfcf054d"]]);
+const _hoisted_1$l = ["title"];
+const _hoisted_2$c = ["for"];
+const _hoisted_3$a = ["id", "title", "autocomplete", "type", "placeholder", "disabled", "required", "pattern"];
 const _hoisted_4$5 = ["id", "title", "type", "rows", "placeholder", "disabled", "required", "pattern"];
 const _hoisted_5$5 = { key: 2 };
-const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
   __name: "TextInput",
   props: {
     id: {},
@@ -30918,7 +30819,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
             onFocusout: _cache[1] || (_cache[1] = //@ts-ignore
             (...args) => _ctx.onFocusout && _ctx.onFocusout(...args)),
             onInput: updateInputVal
-          }), null, 16, _hoisted_3$9)), [
+          }), null, 16, _hoisted_3$a)), [
             [
               vue.vModelDynamic,
               vue.unref(inputVal),
@@ -30955,16 +30856,16 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
             key: 4,
             icon: _ctx.icon
           }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
-        ], 8, _hoisted_2$b)
-      ], 10, _hoisted_1$k);
+        ], 8, _hoisted_2$c)
+      ], 10, _hoisted_1$l);
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-52ac6dc3"]]);
-const _hoisted_1$j = ["title"];
-const _hoisted_2$a = ["id", "required"];
-const _hoisted_3$8 = ["for"];
-const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-52ac6dc3"]]);
+const _hoisted_1$k = ["title"];
+const _hoisted_2$b = ["id", "required"];
+const _hoisted_3$9 = ["for"];
+const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
   __name: "ToggleInput",
   props: /* @__PURE__ */ vue.mergeModels({
     label: {},
@@ -31000,19 +30901,19 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => checked.value = $event),
           type: "checkbox",
           required: _ctx.required
-        }, null, 8, _hoisted_2$a), [
+        }, null, 8, _hoisted_2$b), [
           [vue.vModelCheckbox, checked.value]
         ]),
         vue.createElementVNode("label", { for: inputId.value }, [
           vue.renderSlot(_ctx.$slots, "label", {}, () => [
             vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
           ], true)
-        ], 8, _hoisted_3$8)
-      ], 10, _hoisted_1$j);
+        ], 8, _hoisted_3$9)
+      ], 10, _hoisted_1$k);
     };
   }
 });
-const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-ebe691ee"]]);
+const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-ebe691ee"]]);
 const files = {
   setBaseUrl: (baseUrl) => {
     if (!baseUrl) return;
@@ -31038,9 +30939,9 @@ const files = {
     });
   }
 };
-const _hoisted_1$i = { class: "bagel-input" };
-const _hoisted_2$9 = { key: 0 };
-const _hoisted_3$7 = {
+const _hoisted_1$j = { class: "bagel-input" };
+const _hoisted_2$a = { key: 0 };
+const _hoisted_3$8 = {
   key: 1,
   placeholder: "required",
   type: "text",
@@ -31077,7 +30978,7 @@ const _hoisted_14 = {
   class: "progress"
 };
 const _hoisted_15 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
-const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
   __name: "UploadInput",
   props: {
     label: {},
@@ -31185,9 +31086,9 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       const _directive_tooltip = vue.resolveDirective("tooltip");
       const _directive_lightbox = vue.resolveDirective("lightbox");
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$9, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
-        _ctx.required && !pathKeys.value.length ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_3$7)) : vue.createCommentVNode("", true),
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$a, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
+        _ctx.required && !pathKeys.value.length ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_3$8)) : vue.createCommentVNode("", true),
         _ctx.theme === "basic" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$$), {
           key: 2,
           outline: "",
@@ -31411,9 +31312,9 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const UploadInput = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-bd972fe8"]]);
-const _hoisted_1$h = ["src", "title", "width", "height", "marginwidth", "marginheight", "csp", "scrolling", "srcset"];
-const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+const UploadInput = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-bd972fe8"]]);
+const _hoisted_1$i = ["src", "title", "width", "height", "marginwidth", "marginheight", "csp", "scrolling", "srcset"];
+const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
   __name: "IframeVue",
   props: {
     src: {},
@@ -31472,10 +31373,109 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
         scrolling: _ctx.scrolling,
         srcset: _ctx.srcset,
         onLoad: _cache[0] || (_cache[0] = ($event) => emit2("load", $event))
-      }, null, 40, _hoisted_1$h);
+      }, null, 40, _hoisted_1$i);
+    };
+  }
+});
+const _hoisted_1$h = { key: 0 };
+const _hoisted_2$9 = ["src", "alt", "width", "height"];
+const _hoisted_3$7 = ["src", "alt", "width", "height"];
+const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  __name: "Image",
+  props: {
+    src: {},
+    pathKey: {},
+    alt: { default: "" },
+    width: {},
+    height: {},
+    caption: {}
+  },
+  setup(__props) {
+    let imageSrc = vue.ref(null);
+    const fileBaseUrl = vue.computed(() => "https://files.bagel.design".replace(/\/$/, ""));
+    function pathToUrl() {
+      var _a2;
+      if ((_a2 = __props.pathKey) == null ? void 0 : _a2.startsWith("static/")) return `${void 0}/${__props.pathKey}`;
+      return `${fileBaseUrl.value}/${__props.pathKey}`;
+    }
+    async function loadImage() {
+      var _a2;
+      const url = __props.src || pathToUrl();
+      console.log(url);
+      if (!url) {
+        imageSrc.value = null;
+        return;
+      }
+      const ext = (_a2 = url.split(".").pop()) == null ? void 0 : _a2.toLowerCase().split("?").shift();
+      if (ext === "heic") {
+        if (!("caches" in window)) {
+          console.warn("Caching is not available. Proceeding without cache.");
+        } else {
+          try {
+            const imgCache = await window.caches.open("img-cache");
+            const cachedResponse = await imgCache.match(url);
+            if (cachedResponse) {
+              imageSrc.value = URL.createObjectURL(await cachedResponse.blob());
+              return;
+            }
+          } catch (error) {
+            console.warn("Error accessing cache:", error);
+          }
+        }
+        try {
+          await appendScript("https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.1/index.min.js");
+          const response = await fetch(url);
+          const blob = await response.blob();
+          const convertedBlob = await window.heic2any({ blob });
+          imageSrc.value = URL.createObjectURL(convertedBlob);
+          if ("caches" in window) {
+            try {
+              const imgCache = await window.caches.open("img-cache");
+              imgCache.put(url, new Response(convertedBlob));
+            } catch (cacheError) {
+              console.warn("Failed to cache the image:", cacheError);
+            }
+          }
+        } catch (error) {
+          console.error("Error converting HEIC file:", error);
+        }
+      } else {
+        imageSrc.value = url;
+      }
+    }
+    vue.watch(() => [__props.src, __props.pathKey], loadImage, { immediate: true });
+    return (_ctx, _cache) => {
+      return _ctx.caption ? (vue.openBlock(), vue.createElementBlock("figcaption", _hoisted_1$h, [
+        vue.unref(imageSrc) ? (vue.openBlock(), vue.createElementBlock("img", vue.mergeProps({
+          key: 0,
+          src: vue.unref(imageSrc)
+        }, _ctx.$attrs, {
+          alt: _ctx.alt,
+          width: vue.unref(normalizeDimension)(_ctx.width),
+          height: vue.unref(normalizeDimension)(_ctx.height)
+        }), null, 16, _hoisted_2$9)) : (vue.openBlock(), vue.createBlock(vue.unref(Skeleton), {
+          key: 1,
+          class: "img-web-kit",
+          width: vue.unref(normalizeDimension)(_ctx.width),
+          height: vue.unref(normalizeDimension)(_ctx.height)
+        }, null, 8, ["width", "height"]))
+      ])) : vue.unref(imageSrc) ? (vue.openBlock(), vue.createElementBlock("img", vue.mergeProps({
+        key: 1,
+        src: vue.unref(imageSrc)
+      }, _ctx.$attrs, {
+        alt: _ctx.alt,
+        width: vue.unref(normalizeDimension)(_ctx.width),
+        height: vue.unref(normalizeDimension)(_ctx.height)
+      }), null, 16, _hoisted_3$7)) : (vue.openBlock(), vue.createBlock(vue.unref(Skeleton), {
+        key: 2,
+        class: "img-web-kit",
+        width: vue.unref(normalizeDimension)(_ctx.width),
+        height: vue.unref(normalizeDimension)(_ctx.height)
+      }, null, 8, ["width", "height"]));
     };
   }
 });
+const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-29509e85"]]);
 const _hoisted_1$g = { class: "m-0 pb-025 txt14 line-height-1 w60 menu-text" };
 const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   __name: "BottomMenu",
@@ -35562,7 +35562,7 @@ exports.Flag = Flag;
 exports.IMAGE_FORMATS = IMAGE_FORMATS;
 exports.IMAGE_FORMATS_REGEXP = IMAGE_FORMATS_REGEXP;
 exports.Icon = _sfc_main$d;
-exports.IframeVue = _sfc_main$p;
+exports.IframeVue = _sfc_main$q;
 exports.Image = Image$1;
 exports.JSONInput = JSONInput;
 exports.Layout = Layout;
@@ -35580,7 +35580,7 @@ exports.NavBar = NavBar;
 exports.NumberInput = NumberInput;
 exports.OTP = OTP;
 exports.PageTitle = _sfc_main$8;
-exports.PasswordInput = _sfc_main$D;
+exports.PasswordInput = _sfc_main$E;
 exports.Pill = Pill;
 exports.RadioGroup = RadioGroup;
 exports.RadioPillsInput = RadioPillsInput;
@@ -35589,7 +35589,7 @@ exports.RichText = RichText;
 exports.RouterWrapper = RouterWrapper;
 exports.SelectInput = SelectInput;
 exports.SidebarMenu = SidebarMenu;
-exports.SignaturePad = _sfc_main$v;
+exports.SignaturePad = _sfc_main$w;
 exports.Skeleton = Skeleton;
 exports.TabbedLayout = TabbedLayout;
 exports.TableField = TableField;