@bagelink/vue 0.0.1104 → 0.0.1111

package/dist/index.cjs

@@ -9811,91 +9811,6 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Flag = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-f99f1900"]]);
-const FORM_STATE_KEY = Symbol("bagelFormState");
-function safeClone(obj) {
-  if (obj === null || typeof obj !== "object") return obj;
-  const seen = /* @__PURE__ */ new WeakSet();
-  return JSON.parse(JSON.stringify(obj, (key, value) => {
-    if (typeof value === "object" && value !== null) {
-      if (seen.has(value)) {
-        return void 0;
-      }
-      seen.add(value);
-    }
-    return value;
-  }));
-}
-function provideBagelFormState(initialData) {
-  const data2 = vue.ref(initialData);
-  const isDirty = vue.ref(false);
-  const getFieldData = (path) => {
-    if (!path) return "";
-    const keys4 = path.split(/[.[]/);
-    let current = data2.value;
-    for (let i2 = 0; i2 < keys4.length; i2++) {
-      const key = keys4[i2];
-      if (!current || typeof current !== "object" || !(key in current)) {
-        return "";
-      }
-      current = current[key];
-    }
-    return current ?? "";
-  };
-  const updateField = (path, value) => {
-    const keys4 = path.split(/[.[]/);
-    if (typeof data2.value !== "object" || data2.value === null) {
-      data2.value = {};
-    }
-    let current = data2.value;
-    for (let i2 = 0; i2 < keys4.length - 1; i2++) {
-      const key = keys4[i2];
-      if (!(key in current) || typeof current[key] !== "object" || current[key] === null) {
-        current[key] = {};
-      }
-      current = current[key];
-    }
-    const safeValue = safeClone(value);
-    current[keys4[keys4.length - 1]] = safeValue;
-    isDirty.value = true;
-  };
-  const state2 = {
-    data: data2,
-    getFieldData,
-    updateField,
-    isDirty
-  };
-  vue.provide(FORM_STATE_KEY, state2);
-  return state2;
-}
-function useBagelFormState() {
-  const state2 = vue.inject(FORM_STATE_KEY);
-  if (!state2) throw new Error("BagelFormState must be provided");
-  return state2;
-}
-function useFormField(props2) {
-  const formState = vue.inject(FORM_STATE_KEY);
-  const fieldData = vue.computed({
-    get: () => {
-      if (!props2.fieldID || !formState) return props2.modelValue ?? props2.field.defaultValue ?? "";
-      const value = formState.getFieldData(props2.fieldID);
-      if (props2.field.$el === "form" && !value) return {};
-      return value ?? "";
-    },
-    set: (val) => {
-      if (!props2.fieldID || !formState) return;
-      const currentValue = formState.getFieldData(props2.fieldID);
-      if (JSON.stringify(val) === JSON.stringify(currentValue)) return;
-      if (props2.field.onUpdate) {
-        props2.field.onUpdate(val, currentValue);
-      }
-      formState.updateField(props2.fieldID, val);
-    }
-  });
-  return {
-    fieldData,
-    formState
-  };
-}
 const state$1 = vue.reactive(/* @__PURE__ */ new Map());
 function useTabs(group) {
   if (!state$1.has(group)) {
@@ -10000,6 +9915,67 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-307612a9"]]);
+const FORM_STATE_KEY = Symbol("bagelFormState");
+function safeClone(obj) {
+  if (obj === null || typeof obj !== "object") return obj;
+  const seen = /* @__PURE__ */ new WeakSet();
+  return JSON.parse(JSON.stringify(obj, (key, value) => {
+    if (typeof value === "object" && value !== null) {
+      if (seen.has(value)) {
+        return void 0;
+      }
+      seen.add(value);
+    }
+    return value;
+  }));
+}
+function provideBagelFormState(initialData) {
+  const data2 = vue.ref(initialData);
+  const isDirty = vue.ref(false);
+  const getFieldData = (path) => {
+    if (!path) return "";
+    const keys4 = path.split(/[.[]/);
+    let current = data2.value;
+    for (let i2 = 0; i2 < keys4.length; i2++) {
+      const key = keys4[i2];
+      if (!current || typeof current !== "object" || !(key in current)) {
+        return "";
+      }
+      current = current[key];
+    }
+    return current ?? "";
+  };
+  const updateField = (path, value) => {
+    const keys4 = path.split(/[.[]/);
+    if (typeof data2.value !== "object" || data2.value === null) {
+      data2.value = {};
+    }
+    let current = data2.value;
+    for (let i2 = 0; i2 < keys4.length - 1; i2++) {
+      const key = keys4[i2];
+      if (!(key in current) || typeof current[key] !== "object" || current[key] === null) {
+        current[key] = {};
+      }
+      current = current[key];
+    }
+    const safeValue = safeClone(value);
+    current[keys4[keys4.length - 1]] = safeValue;
+    isDirty.value = true;
+  };
+  const state2 = {
+    data: data2,
+    getFieldData,
+    updateField,
+    isDirty
+  };
+  vue.provide(FORM_STATE_KEY, state2);
+  return state2;
+}
+function useBagelFormState() {
+  const state2 = vue.inject(FORM_STATE_KEY);
+  if (!state2) throw new Error("BagelFormState must be provided");
+  return state2;
+}
 const _hoisted_1$K = { key: 1 };
 const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
   __name: "BglField",
@@ -10012,7 +9988,8 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const props2 = __props;
-    const { fieldData } = useFormField(props2);
+    const emit2 = __emit;
+    const formState = vue.inject(FORM_STATE_KEY) ?? provideBagelFormState(props2.modelValue);
     const customAttrs = vue.ref({});
     const is4 = vue.computed(() => {
       if (props2.field.$el === "text") return TextInput;
@@ -10033,24 +10010,50 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
       if (props2.field.$el === "bglform") return _sfc_main$S;
       return props2.field.$el ?? "div";
     });
+    const fieldData = vue.computed({
+      get: () => {
+        if (!props2.fieldID) return props2.field.defaultValue ?? (props2.field.$el === "form" ? {} : "");
+        const value = formState.getFieldData(props2.fieldID);
+        if (props2.field.$el === "form" && !value) return {};
+        return value ?? "";
+      },
+      set: (val) => {
+        if (!props2.fieldID) return;
+        const currentValue = formState.getFieldData(props2.fieldID);
+        if (JSON.stringify(val) === JSON.stringify(currentValue)) return;
+        emit2("update:modelValue", val);
+        if (props2.field.onUpdate) {
+          props2.field.onUpdate(val, currentValue);
+        }
+        formState.updateField(props2.fieldID, val);
+      }
+    });
+    const vIf = vue.computed(() => {
+      if (props2.field["v-if"] === void 0 && props2.field.vIf === void 0) return true;
+      if (typeof props2.field["v-if"] === "boolean" || typeof props2.field.vIf === "boolean") return props2.field["v-if"];
+      if (typeof props2.field["v-if"] === "string" || typeof props2.field.vIf === "string") return true;
+      if (typeof props2.field["v-if"] === "function") return props2.field["v-if"](fieldData.value, formState.data.value);
+      if (typeof props2.field.vIf === "function") return props2.field.vIf(fieldData.value, formState.data.value);
+      return true;
+    });
     const computedOptions = vue.computed(
-      () => bindAttrs({ options: props2.field.options }, fieldData, props2.modelValue).options
+      () => bindAttrs({ options: props2.field.options }, fieldData.value, formState.data.value).options
     );
     const computedAttrs = vue.computed(() => {
       const attrs = { ...customAttrs.value, ...props2.field.attrs };
-      return bindAttrs(attrs, fieldData, props2.modelValue);
+      return bindAttrs(attrs, fieldData.value, formState.data.value);
     });
     const computedClass = vue.computed(
       () => {
         var _a2;
-        return classify(fieldData, props2.modelValue, props2.field.class, (_a2 = props2.field.attrs) == null ? void 0 : _a2.class);
+        return classify(fieldData.value, formState.data.value, props2.field.class, (_a2 = props2.field.attrs) == null ? void 0 : _a2.class);
       }
     );
     return (_ctx, _cache) => {
       const _component_BglField = vue.resolveComponent("BglField", true);
-      return _ctx.field.vIf === void 0 || _ctx.field.vIf ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(is4.value), vue.mergeProps({ key: 0 }, computedAttrs.value, {
-        modelValue: vue.unref(fieldData),
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(fieldData) ? fieldData.value = $event : null),
+      return vIf.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(is4.value), vue.mergeProps({ key: 0 }, computedAttrs.value, {
+        modelValue: fieldData.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => fieldData.value = $event),
         fieldID: props2.fieldID,
         required: _ctx.field.required,
         class: computedClass.value,
@@ -19753,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,
@@ -19890,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: {},
@@ -20062,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: "",
@@ -20090,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: "",
@@ -20160,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,
@@ -20188,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",
@@ -20251,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: ""
@@ -20284,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),
@@ -20310,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: "" },
@@ -20337,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", {
@@ -20345,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: {},
@@ -20436,6 +20340,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
               flat: "",
               icon: "add",
               class: vue.normalizeClass(["radius", [{ "bgl-big-ctrl-num-btn": _ctx.layout === "vertical" }]]),
+              tabindex: "-1",
               onClick: increment
             }, null, 8, ["class"])) : vue.createCommentVNode("", true),
             vue.withDirectives(vue.createElementVNode("input", {
@@ -20460,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),
@@ -20474,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",
@@ -20489,6 +20394,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
               flat: "",
               icon: "remove",
               class: vue.normalizeClass(["radius", [{ "bgl-big-ctrl-num-btn": _ctx.layout === "vertical" }]]),
+              tabindex: "-1",
               onClick: decrement
             }, null, 8, ["class"])) : vue.createCommentVNode("", true),
             _ctx.spinner && (!_ctx.layout || !btnLayouts.includes(_ctx.layout)) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$c, [
@@ -20498,6 +20404,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
                 thin: "",
                 class: "bgl-ctrl-num-btn ctrl-add color-gray top-bgl-ctrl-num-btn",
                 disabled: !canAdd.value,
+                tabindex: "-1",
                 onClick: increment
               }, null, 8, ["disabled"]),
               vue.createVNode(vue.unref(Btn), {
@@ -20506,18 +20413,19 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
                 thin: "",
                 class: "bgl-ctrl-num-btn ctrl-remove color-gray",
                 disabled: !canDecrement.value,
+                tabindex: "-1",
                 onClick: decrement
               }, 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-3a20cf4a"]]);
-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: {},
@@ -20615,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: {},
@@ -20665,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)
@@ -20673,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: "",
@@ -20686,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 = {
@@ -20699,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: {},
@@ -20729,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",
@@ -20754,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: {},
@@ -20807,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,
@@ -20833,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: {},
@@ -20912,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,
@@ -21004,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",
@@ -21098,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 }) {
@@ -21119,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}`,
@@ -21146,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 },
@@ -21175,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), {
@@ -21217,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) {
@@ -22137,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: {},
@@ -22226,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",
@@ -22246,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: "",
@@ -22289,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"
@@ -22300,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: {},
@@ -22488,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",
@@ -22519,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: "",
@@ -22536,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",
@@ -22606,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
@@ -23203,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: {},
@@ -23364,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);
     };
   }
@@ -25849,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: "" },
@@ -25920,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", {
@@ -25995,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);
@@ -30446,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: {},
@@ -30737,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,
@@ -30767,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)
                 ])
@@ -30801,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: {},
@@ -30911,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),
@@ -30948,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: {},
@@ -30993,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;
@@ -31031,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",
@@ -31070,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: {},
@@ -31178,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: "",
@@ -31404,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: {},
@@ -31465,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",
@@ -35555,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;
@@ -35573,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;
@@ -35582,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;