@bagelink/vue 0.0.200 → 0.0.204

package/dist/index.cjs

@@ -2300,7 +2300,7 @@ const ModalPlugin = {
       },
       render() {
         return modalStack.value.map((modal, index2) => {
-          const renderComponent = modal.isModalForm ? ModalForm : _sfc_main$Q;
+          const renderComponent = modal.isModalForm ? ModalForm : _sfc_main$T;
           return vue.h(
             renderComponent,
             {
@@ -2341,26 +2341,6 @@ const debounce = (fn2, delay = 500) => {
   timeout = setTimeout(fn2, delay);
 };
 const keyToLabel = (key) => key.split("_").map((k2) => k2.charAt(0).toUpperCase() + k2.slice(1)).join(" ");
-function computeFields(modelValue) {
-  const fields = [];
-  for (const key of Object.keys(modelValue)) {
-    const field = {
-      label: keyToLabel(key),
-      id: key,
-      inputType: "PlainText"
-    };
-    if (typeof modelValue[key] === "string")
-      field.inputType = "PlainText";
-    if (typeof modelValue[key] === "number")
-      field.inputType = "NumberInput";
-    if (modelValue[key] === true || modelValue[key] === false)
-      field.inputType = "CheckInput";
-    if (modelValue[key] instanceof Date || !Number.isNaN(Date.parse(modelValue[key])))
-      field.inputType = "DateInput";
-    fields.push(field);
-  }
-  return fields;
-}
 const copyText = async (text2, cb) => {
   await navigator.clipboard.writeText(text2);
   if (cb)
@@ -2376,8 +2356,16 @@ function useEscape(event, closeModel) {
     closeModel();
   }
 }
-const _hoisted_1$$ = { ref: "el" };
-const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
+function bindAttrs(attrs, fieldVal, row) {
+  const arr = Object.entries(attrs).map(([key, value]) => [
+    key,
+    typeof value === "function" ? value(fieldVal, row) : value
+  ]);
+  const resolvedAttrs = Object.fromEntries(arr);
+  return resolvedAttrs;
+}
+const _hoisted_1$11 = { ref: "el" };
+const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
   __name: "LangText",
   props: {
     input: {}
@@ -2385,7 +2373,7 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-        vue.createElementVNode("span", _hoisted_1$$, null, 512),
+        vue.createElementVNode("span", _hoisted_1$11, null, 512),
         vue.createTextVNode(" " + vue.toDisplayString(_ctx.input), 1)
       ], 64);
     };
@@ -14498,8 +14486,8 @@ const marks = {
   }
 };
 const schema = new Schema({ nodes, marks });
-const _hoisted_1$_ = ["id"];
-const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$10 = ["id"];
+const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
   __name: "RTXEditor",
   props: {
     elementId: { default: Math.random().toString(36).substr(2, 9) },
@@ -14576,11 +14564,11 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
         onClick: focusEditor,
         id: `canvas-${_ctx.elementId}`,
         onKeydown: _cache[0] || (_cache[0] = vue.withKeys(vue.withModifiers(($event) => _ctx.$emit("keydown.meta.enter"), ["meta"]), ["enter"]))
-      }, null, 40, _hoisted_1$_);
+      }, null, 40, _hoisted_1$10);
     };
   }
 });
-const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
   __name: "MaterialIcon",
   props: {
     icon: {},
@@ -14595,17 +14583,17 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$Z = /* @__PURE__ */ vue.createElementVNode("div", { class: "icon-font top-arrow" }, "chevron_right", -1);
-const _hoisted_2$R = [
-  _hoisted_1$Z
+const _hoisted_1$$ = /* @__PURE__ */ vue.createElementVNode("div", { class: "icon-font top-arrow" }, "chevron_right", -1);
+const _hoisted_2$S = [
+  _hoisted_1$$
 ];
-const _hoisted_3$J = { class: "full-nav" };
-const _hoisted_4$r = { class: "nav-scroll" };
-const _hoisted_5$m = { class: "nav-links-wrapper" };
-const _hoisted_6$h = { class: "icon-font" };
+const _hoisted_3$K = { class: "full-nav" };
+const _hoisted_4$t = { class: "nav-scroll" };
+const _hoisted_5$n = { class: "nav-links-wrapper" };
+const _hoisted_6$i = { class: "icon-font" };
 const _hoisted_7$d = { class: "tooltip" };
 const _hoisted_8$7 = { class: "bot-buttons-wrapper" };
-const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
   __name: "NavBar",
   props: {
     links: {},
@@ -14629,10 +14617,10 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
           role: "button",
           "aria-label": "Toggle Navigation",
           tabindex: "0"
-        }, _hoisted_2$R, 32),
-        vue.createElementVNode("div", _hoisted_3$J, [
-          vue.createElementVNode("div", _hoisted_4$r, [
-            vue.createElementVNode("div", _hoisted_5$m, [
+        }, _hoisted_2$S, 32),
+        vue.createElementVNode("div", _hoisted_3$K, [
+          vue.createElementVNode("div", _hoisted_4$t, [
+            vue.createElementVNode("div", _hoisted_5$n, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_a2 = _ctx.links) == null ? void 0 : _a2.call(_ctx), (link) => {
                 return vue.openBlock(), vue.createBlock(_component_RouterLink, {
                   class: "nav-button",
@@ -14640,7 +14628,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
                   key: link.label
                 }, {
                   default: vue.withCtx(() => [
-                    vue.createElementVNode("div", _hoisted_6$h, vue.toDisplayString(link.materialIcon), 1),
+                    vue.createElementVNode("div", _hoisted_6$i, vue.toDisplayString(link.materialIcon), 1),
                     vue.createElementVNode("div", _hoisted_7$d, vue.toDisplayString(link.localized ? link.localized : link.label), 1)
                   ]),
                   _: 2
@@ -14656,15 +14644,15 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$Y = {
+const _hoisted_1$_ = {
   key: 0,
   class: "loading"
 };
-const _hoisted_2$Q = {
+const _hoisted_2$R = {
   key: 1,
   class: "btn-flex"
 };
-const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
   __name: "Btn",
   props: {
     disabled: { type: Boolean, default: false },
@@ -14685,8 +14673,8 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     vue.useCssVars((_ctx) => ({
-      "e0356e0a": computedBackgroundColor.value,
-      "458dc816": cumputedTextColor.value
+      "0bd3bef7": computedBackgroundColor.value,
+      "1b1b6b12": cumputedTextColor.value
     }));
     const slots = vue.useSlots();
     const props2 = __props;
@@ -14710,10 +14698,11 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
       red: getThemeColors({ backgroundColor: "var(--bgl-red)" }),
       black: getThemeColors({ backgroundColor: "var(--bgl-black)" }),
       green: getThemeColors({ backgroundColor: "var(--bgl-green)", color: "var(--bgl-white)" }),
-      blue: getThemeColors({ backgroundColor: "var(--bgl-blue)", color: "var(--bgl-white)" }),
+      primary: getThemeColors({ backgroundColor: "var(--bgl-primary)", color: "var(--bgl-white)" }),
       gray: getThemeColors({ backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-black)" }),
       light: getThemeColors({ backgroundColor: "var(--bgl-primary-light)", color: "var(--bgl-primary)" }),
-      "gray-light": getThemeColors({ backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-gray)" })
+      "gray-light": getThemeColors({ backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-gray)" }),
+      blue: getThemeColors({})
     };
     const cumputedTextColor = vue.computed(
       () => {
@@ -14743,8 +14732,8 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
         })
       }, {
         default: vue.withCtx(() => [
-          _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Y)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$Q, [
-            _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$T), {
+          _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$_)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$R, [
+            _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$W), {
               key: 0,
               icon: _ctx.icon
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -14752,7 +14741,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
             !vue.unref(slots)["default"] && _ctx.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
               vue.createTextVNode(vue.toDisplayString(_ctx.value), 1)
             ], 64)) : vue.createCommentVNode("", true),
-            props2["icon.end"] ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$T), {
+            props2["icon.end"] ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$W), {
               key: 2,
               icon: props2["icon.end"]
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
@@ -14770,11 +14759,11 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-718ff632"]]);
-const _hoisted_1$X = { class: "tool-bar" };
-const _hoisted_2$P = { class: "modal-title" };
-const _hoisted_3$I = { class: "modal-footer mt-3" };
-const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-845b751e"]]);
+const _hoisted_1$Z = { class: "tool-bar" };
+const _hoisted_2$Q = { class: "modal-title" };
+const _hoisted_3$J = { class: "modal-footer mt-3" };
+const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
   __name: "Modal",
   props: {
     side: { type: Boolean },
@@ -14820,7 +14809,7 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
           onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
           }, ["stop"]))
         }, [
-          vue.createElementVNode("header", _hoisted_1$X, [
+          vue.createElementVNode("header", _hoisted_1$Z, [
             vue.renderSlot(_ctx.$slots, "toolbar"),
             vue.createVNode(vue.unref(Btn), {
               style: vue.normalizeStyle({ float: _ctx.side ? "left" : "right" }),
@@ -14828,10 +14817,10 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
               icon: "close",
               onClick: closeModal
             }, null, 8, ["style"]),
-            vue.createElementVNode("h3", _hoisted_2$P, vue.toDisplayString(_ctx.title), 1)
+            vue.createElementVNode("h3", _hoisted_2$Q, vue.toDisplayString(_ctx.title), 1)
           ]),
           vue.renderSlot(_ctx.$slots, "default"),
-          vue.createElementVNode("footer", _hoisted_3$I, [
+          vue.createElementVNode("footer", _hoisted_3$J, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.actions, (action, i3) => {
               return vue.openBlock(), vue.createBlock(vue.unref(Btn), vue.mergeProps({
                 key: i3,
@@ -14846,10 +14835,10 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$W = { class: "dropdown-title" };
-const _hoisted_2$O = { class: "dropdown-body" };
-const _hoisted_3$H = ["onClick"];
-const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$Y = { class: "dropdown-title" };
+const _hoisted_2$P = { class: "dropdown-body" };
+const _hoisted_3$I = ["onClick"];
+const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
   __name: "DropDown",
   props: {
     modelValue: String,
@@ -14875,31 +14864,31 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["dropdown", { opendrop: vue.unref(isOpen) }]),
         onClick: toggleDropdown
       }, [
-        vue.createElementVNode("div", _hoisted_1$W, [
+        vue.createElementVNode("div", _hoisted_1$Y, [
           vue.createTextVNode(vue.toDisplayString(vue.unref(selectedOption) || __props.placeholder) + " ", 1),
-          vue.createVNode(vue.unref(_sfc_main$T), { icon: "keyboard_arrow_down" })
+          vue.createVNode(vue.unref(_sfc_main$W), { icon: "keyboard_arrow_down" })
         ]),
-        vue.createElementVNode("div", _hoisted_2$O, [
+        vue.createElementVNode("div", _hoisted_2$P, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.options, (option2, index2) => {
             return vue.openBlock(), vue.createElementBlock("p", {
               key: index2,
               onClick: vue.withModifiers(($event) => selectOption(option2, index2), ["stop"])
-            }, vue.toDisplayString(option2), 9, _hoisted_3$H);
+            }, vue.toDisplayString(option2), 9, _hoisted_3$I);
           }), 128))
         ])
       ], 2);
     };
   }
 });
-const _hoisted_1$V = { class: "card list-view grid thin" };
-const _hoisted_2$N = { class: "list-header flex gap-3 align-items-top" };
-const _hoisted_3$G = {
+const _hoisted_1$X = { class: "card list-view grid thin" };
+const _hoisted_2$O = { class: "list-header flex gap-3 align-items-top" };
+const _hoisted_3$H = {
   key: 0,
   class: "bagel-input search-wrap"
 };
-const _hoisted_4$q = ["placeholder"];
-const _hoisted_5$l = { class: "list-content grid auto-flow-rows align-items-start" };
-const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_4$s = ["placeholder"];
+const _hoisted_5$m = { class: "list-content grid auto-flow-rows align-items-start" };
+const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
   __name: "ListView",
   props: {
     enableAdd: { type: Boolean },
@@ -14915,17 +14904,17 @@ const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
       debounce(() => emit2("debounce", searchTerm.value));
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$V, [
-        vue.createElementVNode("div", _hoisted_2$N, [
-          _ctx.enableSearch ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$G, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$X, [
+        vue.createElementVNode("div", _hoisted_2$O, [
+          _ctx.enableSearch ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$H, [
             vue.withDirectives(vue.createElementVNode("input", {
               placeholder: _ctx.searchPlaceholder,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchTerm.value = $event),
               onInput: _cache[1] || (_cache[1] = ($event) => search())
-            }, null, 40, _hoisted_4$q), [
+            }, null, 40, _hoisted_4$s), [
               [vue.vModelText, searchTerm.value]
             ]),
-            vue.createVNode(vue.unref(_sfc_main$T), {
+            vue.createVNode(vue.unref(_sfc_main$W), {
               class: "txtgray",
               icon: "search"
             })
@@ -14936,16 +14925,16 @@ const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
             onClick: _cache[2] || (_cache[2] = ($event) => emit2("add"))
           })) : vue.createCommentVNode("", true)
         ]),
-        vue.createElementVNode("div", _hoisted_5$l, [
+        vue.createElementVNode("div", _hoisted_5$m, [
           vue.renderSlot(_ctx.$slots, "default")
         ])
       ]);
     };
   }
 });
-const _hoisted_1$U = { class: "txt16 no-margin" };
-const _hoisted_2$M = { class: "txt14 no-margin txtgray" };
-const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$W = { class: "txt16 no-margin" };
+const _hoisted_2$N = { class: "txt14 no-margin txtgray" };
+const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
   __name: "ListItem",
   props: {
     to: {}
@@ -14957,10 +14946,10 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
         class: "list-item ellipsis"
       }, {
         default: vue.withCtx(() => [
-          vue.createElementVNode("p", _hoisted_1$U, [
+          vue.createElementVNode("p", _hoisted_1$W, [
             vue.renderSlot(_ctx.$slots, "default")
           ]),
-          vue.createElementVNode("p", _hoisted_2$M, [
+          vue.createElementVNode("p", _hoisted_2$N, [
             vue.renderSlot(_ctx.$slots, "subtitle")
           ])
         ]),
@@ -14969,11 +14958,11 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$T = { class: "h-100 grid list-view gap-3" };
-const _hoisted_2$L = { class: "card tabs-top" };
-const _hoisted_3$F = { class: "tabs grid auto-flow-columns fit-content" };
-const _hoisted_4$p = ["onClick"];
-const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$V = { class: "h-100 grid list-view gap-3" };
+const _hoisted_2$M = { class: "card tabs-top" };
+const _hoisted_3$G = { class: "tabs grid auto-flow-columns fit-content" };
+const _hoisted_4$r = ["onClick"];
+const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
   __name: "TabbedLayout",
   props: {
     title: {},
@@ -15001,10 +14990,10 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
       activeTab.value = firstTab;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$T, [
-        vue.createElementVNode("div", _hoisted_2$L, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$V, [
+        vue.createElementVNode("div", _hoisted_2$M, [
           vue.renderSlot(_ctx.$slots, "top-section", {}, void 0, true),
-          vue.createElementVNode("div", _hoisted_3$F, [
+          vue.createElementVNode("div", _hoisted_3$G, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.tabs, (tab) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 class: vue.normalizeClass([{
@@ -15012,7 +15001,7 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
                 }, "tab"]),
                 key: tab,
                 onClick: ($event) => changeTab(tab)
-              }, vue.toDisplayString(tab), 11, _hoisted_4$p);
+              }, vue.toDisplayString(tab), 11, _hoisted_4$r);
             }), 128))
           ])
         ]),
@@ -15028,16 +15017,16 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TabbedLayout = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-3941cced"]]);
-const _hoisted_1$S = { class: "comments-wrap" };
-const _hoisted_2$K = { class: "comment-list" };
-const _hoisted_3$E = { class: "comment-top" };
-const _hoisted_4$o = { class: "comment-owner" };
-const _hoisted_5$k = { class: "comment-time" };
-const _hoisted_6$g = { class: "comment-actions" };
+const TabbedLayout = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-3941cced"]]);
+const _hoisted_1$U = { class: "comments-wrap" };
+const _hoisted_2$L = { class: "comment-list" };
+const _hoisted_3$F = { class: "comment-top" };
+const _hoisted_4$q = { class: "comment-owner" };
+const _hoisted_5$l = { class: "comment-time" };
+const _hoisted_6$h = { class: "comment-actions" };
 const _hoisted_7$c = ["innerHTML"];
 const _hoisted_8$6 = { class: "new-comment" };
-const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
   __name: "Comments",
   props: {
     ref_table: {},
@@ -15080,8 +15069,8 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
       void fetchData();
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$S, [
-        vue.createElementVNode("div", _hoisted_2$K, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$U, [
+        vue.createElementVNode("div", _hoisted_2$L, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(comments), (comment) => {
             var _a2, _b, _c;
             return vue.openBlock(), vue.createElementBlock("div", {
@@ -15091,23 +15080,23 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
               }, "comment"]),
               key: comment.id
             }, [
-              vue.createElementVNode("div", _hoisted_3$E, [
-                vue.createElementVNode("div", _hoisted_4$o, vue.toDisplayString(comment.sender.first_name) + " " + vue.toDisplayString(comment.sender.last_name), 1),
-                vue.createElementVNode("div", _hoisted_5$k, vue.toDisplayString(comment.updated_at.split("T")[0]), 1),
-                vue.createElementVNode("div", _hoisted_6$g, [
-                  vue.createVNode(vue.unref(_sfc_main$T), {
+              vue.createElementVNode("div", _hoisted_3$F, [
+                vue.createElementVNode("div", _hoisted_4$q, vue.toDisplayString(comment.sender.first_name) + " " + vue.toDisplayString(comment.sender.last_name), 1),
+                vue.createElementVNode("div", _hoisted_5$l, vue.toDisplayString(comment.updated_at.split("T")[0]), 1),
+                vue.createElementVNode("div", _hoisted_6$h, [
+                  vue.createVNode(vue.unref(_sfc_main$W), {
                     size: 1,
                     class: "edit",
                     icon: "edit",
                     onClick: ($event) => vue.isRef(editComment) ? editComment.value = comment : editComment = comment
                   }, null, 8, ["onClick"]),
-                  vue.createVNode(vue.unref(_sfc_main$T), {
+                  vue.createVNode(vue.unref(_sfc_main$W), {
                     size: 1.2,
                     class: "delete",
                     icon: "delete",
                     onClick: ($event) => deleteComment(comment.id)
                   }, null, 8, ["onClick"]),
-                  vue.createVNode(vue.unref(_sfc_main$T), {
+                  vue.createVNode(vue.unref(_sfc_main$W), {
                     size: 1.2,
                     class: "save",
                     icon: "save",
@@ -15115,7 +15104,7 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
                   })
                 ])
               ]),
-              vue.unref(editComment) !== null && ((_c = vue.unref(editComment)) == null ? void 0 : _c.id) === comment.id ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$U), {
+              vue.unref(editComment) !== null && ((_c = vue.unref(editComment)) == null ? void 0 : _c.id) === comment.id ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$X), {
                 key: 0,
                 modelValue: vue.unref(editComment).body_html,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.unref(editComment).body_html = $event),
@@ -15129,7 +15118,7 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
           }), 128))
         ]),
         vue.createElementVNode("div", _hoisted_8$6, [
-          vue.createVNode(vue.unref(_sfc_main$U), {
+          vue.createVNode(vue.unref(_sfc_main$X), {
             class: "comment-input",
             modelValue: vue.unref(bodyHtml),
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(bodyHtml) ? bodyHtml.value = $event : bodyHtml = $event),
@@ -15149,10 +15138,10 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Comments = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-2eead7c8"]]);
-const _hoisted_1$R = { class: "page-top" };
-const _hoisted_2$J = { class: "top-title" };
-const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
+const Comments = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-2eead7c8"]]);
+const _hoisted_1$T = { class: "page-top" };
+const _hoisted_2$K = { class: "top-title" };
+const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
   __name: "PageTitle",
   props: {
     value: {
@@ -15162,8 +15151,8 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$R, [
-        vue.createElementVNode("h1", _hoisted_2$J, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$T, [
+        vue.createElementVNode("h1", _hoisted_2$K, [
           vue.renderSlot(_ctx.$slots, "default"),
           vue.createTextVNode(" " + vue.toDisplayString(__props.value), 1)
         ])
@@ -15171,9 +15160,9 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$Q = { class: "tool-bar" };
-const _hoisted_2$I = { class: "modal-title" };
-const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$S = { class: "tool-bar" };
+const _hoisted_2$J = { class: "modal-title" };
+const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
   __name: "ModalForm",
   props: {
     side: { type: Boolean },
@@ -15246,7 +15235,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
           onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
           }, ["stop"]))
         }, [
-          vue.createElementVNode("header", _hoisted_1$Q, [
+          vue.createElementVNode("header", _hoisted_1$S, [
             vue.renderSlot(_ctx.$slots, "toolbar", {}, void 0, true),
             vue.createVNode(vue.unref(Btn), {
               style: vue.normalizeStyle({ float: _ctx.side ? "left" : "right" }),
@@ -15254,9 +15243,9 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
               icon: "close",
               onClick: closeModal
             }, null, 8, ["style"]),
-            vue.createElementVNode("h3", _hoisted_2$I, vue.toDisplayString(_ctx.title), 1)
+            vue.createElementVNode("h3", _hoisted_2$J, vue.toDisplayString(_ctx.title), 1)
           ]),
-          vue.createVNode(vue.unref(_sfc_main$I), {
+          vue.createVNode(vue.unref(_sfc_main$L), {
             onDelete: _ctx.onDelete ? runDelete : void 0,
             modelValue: _ctx.modelValue,
             "onUpdate:modelValue": handleEmit,
@@ -15268,8 +15257,8 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-1799b7d0"]]);
-const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-1799b7d0"]]);
+const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
   __name: "FormSchema",
   props: {
     modelValue: {},
@@ -15342,14 +15331,14 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$P = { class: "table-list-wrap h-100" };
-const _hoisted_2$H = { class: "infinite-wrapper" };
-const _hoisted_3$D = { class: "row first-row" };
-const _hoisted_4$n = ["onClick"];
-const _hoisted_5$j = { class: "flex" };
-const _hoisted_6$f = ["onClick"];
+const _hoisted_1$R = { class: "table-list-wrap h-100" };
+const _hoisted_2$I = { class: "infinite-wrapper" };
+const _hoisted_3$E = { class: "row first-row" };
+const _hoisted_4$p = ["onClick"];
+const _hoisted_5$k = { class: "flex" };
+const _hoisted_6$g = ["onClick"];
 const _hoisted_7$b = { key: 1 };
-const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
   __name: "TableSchema",
   props: {
     data: {},
@@ -15364,7 +15353,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     const selectElement = (data2) => {
       emit2("select", data2);
     };
-    const bindAttrs = (attrs, field, row) => {
+    const bindAttrs2 = (attrs, field, row) => {
       const arr = Object.entries(attrs || {}).map(([key, value]) => [
         key,
         typeof value === "function" ? value(field, row) : value
@@ -15395,27 +15384,27 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$P, [
-        vue.createElementVNode("table", _hoisted_2$H, [
-          vue.createElementVNode("thead", _hoisted_3$D, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$R, [
+        vue.createElementVNode("table", _hoisted_2$I, [
+          vue.createElementVNode("thead", _hoisted_3$E, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (field) => {
               return vue.openBlock(), vue.createElementBlock("th", {
                 class: "col",
                 key: field.id,
                 onClick: ($event) => sort2(field.id)
               }, [
-                vue.createElementVNode("div", _hoisted_5$j, [
+                vue.createElementVNode("div", _hoisted_5$k, [
                   vue.createTextVNode(vue.toDisplayString((field == null ? void 0 : field.label) || (field == null ? void 0 : field.id)) + " ", 1),
                   vue.createElementVNode("div", {
                     class: vue.normalizeClass(["list-arrows", { sorted: vue.unref(sortField) === field.id }])
                   }, [
-                    vue.createVNode(vue.unref(_sfc_main$T), {
+                    vue.createVNode(vue.unref(_sfc_main$W), {
                       class: vue.normalizeClass({ desc: vue.unref(sortDirection) === "DESC" }),
                       icon: "keyboard_arrow_up"
                     }, null, 8, ["class"])
                   ], 2)
                 ])
-              ], 8, _hoisted_4$n);
+              ], 8, _hoisted_4$p);
             }), 128))
           ]),
           vue.createElementVNode("tbody", {
@@ -15439,7 +15428,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                       row,
                       field
                     }, void 0, true) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$b, [
-                      (field["v-if"] ? field["v-if"](row[field.id], row) : true) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(field.$el || field.$cmp || "div"), vue.mergeProps({ key: 0 }, bindAttrs(field.attrs, row[field.id], row), {
+                      (field["v-if"] ? field["v-if"](row[field.id], row) : true) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(field.$el || field.$cmp || "div"), vue.mergeProps({ key: 0 }, bindAttrs2(field.attrs, row[field.id], row), {
                         src: field.$el === "img" ? (_a2 = row[field.id]) == null ? void 0 : _a2.url : "",
                         "onUpdate:modelValue": ($event) => {
                           var _a3;
@@ -15458,7 +15447,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                     ]))
                   ]);
                 }), 128))
-              ], 8, _hoisted_6$f);
+              ], 8, _hoisted_6$g);
             }), 128))
           ], 2)
         ])
@@ -15466,16 +15455,16 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-f3a410c2"]]);
-const _sfc_main$G = {};
-const _hoisted_1$O = { class: "flex space-between" };
+const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-f3a410c2"]]);
+const _sfc_main$J = {};
+const _hoisted_1$Q = { class: "flex space-between" };
 function _sfc_render$1(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$O, [
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Q, [
     vue.renderSlot(_ctx.$slots, "default")
   ]);
 }
-const TopBar = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$1]]);
-const _sfc_main$F = {};
+const TopBar = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$1]]);
+const _sfc_main$I = {};
 function _sfc_render(_ctx, _cache) {
   const _component_router_view = vue.resolveComponent("router-view");
   return vue.openBlock(), vue.createBlock(_component_router_view, null, {
@@ -15497,9 +15486,9 @@ function _sfc_render(_ctx, _cache) {
     _: 1
   });
 }
-const RouterWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["render", _sfc_render]]);
-const _hoisted_1$N = { class: "card h-100 thin" };
-const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+const RouterWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_render]]);
+const _hoisted_1$P = { class: "card h-100 thin" };
+const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
   __name: "ContactSubmissions",
   props: {
     person_id: {
@@ -15529,7 +15518,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
       void getData();
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$N, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$P, [
         vue.createVNode(vue.unref(TableSchema), {
           schema: schema2,
           data: vue.unref(data2)
@@ -15538,15 +15527,15 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$M = {
+const _hoisted_1$O = {
   key: 0,
   class: "person-card-edit flex gap-2"
 };
-const _hoisted_2$G = { class: "person-card-icon-wrap" };
-const _hoisted_3$C = { class: "person-card-icon" };
-const _hoisted_4$m = { class: "person-card-name txt20" };
-const _hoisted_5$i = { class: "person-card-details-wrap" };
-const _hoisted_6$e = {
+const _hoisted_2$H = { class: "person-card-icon-wrap" };
+const _hoisted_3$D = { class: "person-card-icon" };
+const _hoisted_4$o = { class: "person-card-name txt20" };
+const _hoisted_5$j = { class: "person-card-details-wrap" };
+const _hoisted_6$f = {
   key: 0,
   class: "person-card-details"
 };
@@ -15560,7 +15549,7 @@ const _hoisted_8$5 = {
 };
 const _hoisted_9$3 = { key: 0 };
 const _hoisted_10$3 = { key: 1 };
-const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
   __name: "PersonPreview",
   props: {
     person: {},
@@ -15590,7 +15579,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
         (...args) => _ctx.onClick && _ctx.onClick(...args)),
         class: "person-card"
       }, [
-        !_ctx.onClick ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$M, [
+        !_ctx.onClick ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$O, [
           !_ctx.$route.path.match("/search") ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
             key: 0,
             round: "",
@@ -15607,13 +15596,13 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
             icon: "edit"
           })
         ])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_2$G, [
-          vue.createElementVNode("p", _hoisted_3$C, vue.toDisplayString(vue.unref(initials)(_ctx.person.first_name, _ctx.person.last_name)), 1),
-          vue.createElementVNode("p", _hoisted_4$m, vue.toDisplayString(_ctx.person.first_name) + " " + vue.toDisplayString(_ctx.person.last_name), 1)
+        vue.createElementVNode("div", _hoisted_2$H, [
+          vue.createElementVNode("p", _hoisted_3$D, vue.toDisplayString(vue.unref(initials)(_ctx.person.first_name, _ctx.person.last_name)), 1),
+          vue.createElementVNode("p", _hoisted_4$o, vue.toDisplayString(_ctx.person.first_name) + " " + vue.toDisplayString(_ctx.person.last_name), 1)
         ]),
-        vue.createElementVNode("div", _hoisted_5$i, [
-          ((_a2 = _ctx.person.phone) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$e, [
-            vue.createVNode(vue.unref(_sfc_main$T), { icon: "phone" }),
+        vue.createElementVNode("div", _hoisted_5$j, [
+          ((_a2 = _ctx.person.phone) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$f, [
+            vue.createVNode(vue.unref(_sfc_main$W), { icon: "phone" }),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.person.phone, (phone) => {
               return vue.openBlock(), vue.createElementBlock("p", {
                 key: phone.id
@@ -15621,7 +15610,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
             }), 128))
           ])) : vue.createCommentVNode("", true),
           ((_b = _ctx.person.email) == null ? void 0 : _b.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$a, [
-            vue.createVNode(vue.unref(_sfc_main$T), { icon: "email" }),
+            vue.createVNode(vue.unref(_sfc_main$W), { icon: "email" }),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.person.email, (email) => {
               return vue.openBlock(), vue.createElementBlock("p", {
                 key: email.id
@@ -15629,7 +15618,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
             }), 128))
           ])) : vue.createCommentVNode("", true),
           _ctx.person.date_of_birth || _ctx.person.gender ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$5, [
-            vue.createVNode(vue.unref(_sfc_main$T), { icon: "badge" }),
+            vue.createVNode(vue.unref(_sfc_main$W), { icon: "badge" }),
             _ctx.person.date_of_birth ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_9$3, vue.toDisplayString(_ctx.person.date_of_birth), 1)) : vue.createCommentVNode("", true),
             _ctx.person.gender ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_10$3, vue.toDisplayString(_ctx.person.gender), 1)) : vue.createCommentVNode("", true)
           ])) : vue.createCommentVNode("", true)
@@ -15638,23 +15627,23 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$L = {
+const _hoisted_1$N = {
   key: 0,
   class: "data"
 };
-const _hoisted_2$F = {
+const _hoisted_2$G = {
   key: 0,
   class: "mb-3 mt-0"
 };
-const _hoisted_3$B = {
+const _hoisted_3$C = {
   key: 0,
   class: "data-row"
 };
-const _hoisted_4$l = { class: "key" };
-const _hoisted_5$h = { key: 1 };
-const _hoisted_6$d = { class: "key" };
+const _hoisted_4$n = { class: "key" };
+const _hoisted_5$i = { key: 1 };
+const _hoisted_6$e = { class: "key" };
 const _hoisted_7$9 = { class: "vlue" };
-const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
   __name: "DataPreview",
   props: {
     data: {},
@@ -15666,7 +15655,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     const keysToIgnore = ["id", "person_id", "person", "created_at", "updated_at"];
     const props2 = __props;
     const itemData = vue.ref(props2.data);
-    const bindAttrs = (attrs, field, row) => {
+    const bindAttrs2 = (attrs, field, row) => {
       const arr = Object.entries(attrs || {}).map(([key, value]) => [
         key,
         typeof value === "function" ? value(field, row) : value
@@ -15676,14 +15665,14 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     };
     return (_ctx, _cache) => {
       var _a2;
-      return _ctx.data ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$L, [
-        _ctx.title ? (vue.openBlock(), vue.createElementBlock("h3", _hoisted_2$F, vue.toDisplayString(_ctx.title), 1)) : vue.createCommentVNode("", true),
+      return _ctx.data ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$N, [
+        _ctx.title ? (vue.openBlock(), vue.createElementBlock("h3", _hoisted_2$G, vue.toDisplayString(_ctx.title), 1)) : vue.createCommentVNode("", true),
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.schema || [], (field) => {
           return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
             key: field.id
           }, [
-            (field["v-if"] ? field["v-if"](itemData.value[field.id], itemData.value) : true) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$B, [
-              vue.createElementVNode("div", _hoisted_4$l, vue.toDisplayString((field == null ? void 0 : field.label) || vue.unref(keyToLabel)(field.id)), 1),
+            (field["v-if"] ? field["v-if"](itemData.value[field.id], itemData.value) : true) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$C, [
+              vue.createElementVNode("div", _hoisted_4$n, vue.toDisplayString((field == null ? void 0 : field.label) || vue.unref(keyToLabel)(field.id)), 1),
               (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(field.$el || "div"), vue.mergeProps({
                 class: "vlue",
                 modelValue: itemData.value[field.id],
@@ -15691,7 +15680,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
                   var _a3;
                   return (_a3 = field == null ? void 0 : field.onUpdate) == null ? void 0 : _a3.call(field, $event, _ctx.data[field.id], itemData.value);
                 }]
-              }, bindAttrs(field.attrs, itemData.value[field.id], itemData.value)), {
+              }, bindAttrs2(field.attrs, itemData.value[field.id], itemData.value)), {
                 default: vue.withCtx(() => {
                   var _a3;
                   return [
@@ -15703,7 +15692,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
             ])) : vue.createCommentVNode("", true)
           ], 64);
         }), 128)),
-        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$h, [
+        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$i, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(Object.entries(itemData.value).filter(
             ([key]) => !keysToIgnore.includes(key)
           ), ([key, value]) => {
@@ -15711,7 +15700,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
               class: "data-row",
               key
             }, [
-              vue.createElementVNode("div", _hoisted_6$d, vue.toDisplayString(vue.unref(i18nT)(vue.unref(keyToLabel)(key))), 1),
+              vue.createElementVNode("div", _hoisted_6$e, vue.toDisplayString(vue.unref(i18nT)(vue.unref(keyToLabel)(key))), 1),
               vue.createElementVNode("div", _hoisted_7$9, vue.toDisplayString(value), 1)
             ]);
           }), 128))
@@ -15721,23 +15710,23 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-dc2757c4"]]);
+const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-dc2757c4"]]);
 const _withScopeId$2 = (n) => (vue.pushScopeId("data-v-fe5af582"), n = n(), vue.popScopeId(), n);
-const _hoisted_1$K = { class: "bar-chart" };
-const _hoisted_2$E = {
+const _hoisted_1$M = { class: "bar-chart" };
+const _hoisted_2$F = {
   key: 0,
   class: "group-wrap"
 };
-const _hoisted_3$A = { class: "group-title" };
-const _hoisted_4$k = {
+const _hoisted_3$B = { class: "group-title" };
+const _hoisted_4$m = {
   key: 1,
   class: "bar-wrap"
 };
-const _hoisted_5$g = { class: "bar-txt" };
-const _hoisted_6$c = { class: "factor" };
+const _hoisted_5$h = { class: "bar-txt" };
+const _hoisted_6$d = { class: "factor" };
 const _hoisted_7$8 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ vue.createElementVNode("div", { class: "red-bar" }, null, -1));
 const _hoisted_8$4 = { class: "bar-lines" };
-const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   __name: "BarChart",
   props: {
     title: {},
@@ -15789,14 +15778,14 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     const percent = (val) => val / maxValue.value * 100;
     const floodPercent = vue.computed(() => `${props2.flood}%`);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$K, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$M, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(dataArray.value, (item, i3) => {
           return vue.openBlock(), vue.createElementBlock("div", {
             class: "graph-wrap",
             key: i3
           }, [
-            item.group ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$E, [
-              vue.createElementVNode("p", _hoisted_3$A, vue.toDisplayString(item.group), 1),
+            item.group ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$F, [
+              vue.createElementVNode("p", _hoisted_3$B, vue.toDisplayString(item.group), 1),
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((item == null ? void 0 : item.data) || [], (nested, i22) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
                   key: i22,
@@ -15815,7 +15804,7 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
                   }, null, 4)) : vue.createCommentVNode("", true)
                 ]);
               }), 128))
-            ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$k, [
+            ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$m, [
               vue.createElementVNode("div", {
                 class: "bar",
                 style: vue.normalizeStyle({ height: loaded.value ? `${percent(item.value)}%` : "0" })
@@ -15825,11 +15814,11 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
                 class: "bar compare",
                 style: vue.normalizeStyle({ height: loaded.value ? `${percent(item.compareValue)}%` : "0" })
               }, null, 4)) : vue.createCommentVNode("", true),
-              vue.createElementVNode("p", _hoisted_5$g, vue.toDisplayString(item.title), 1)
+              vue.createElementVNode("p", _hoisted_5$h, vue.toDisplayString(item.title), 1)
             ]))
           ]);
         }), 128)),
-        vue.createElementVNode("p", _hoisted_6$c, vue.toDisplayString(_ctx.title), 1),
+        vue.createElementVNode("p", _hoisted_6$d, vue.toDisplayString(_ctx.title), 1),
         _hoisted_7$8,
         vue.createElementVNode("div", _hoisted_8$4, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(marks2.value, (mark) => {
@@ -15840,7 +15829,7 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const BarChart = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-fe5af582"]]);
+const BarChart = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-fe5af582"]]);
 const explicitKeys = [
   "__key",
   "__init",
@@ -17096,8 +17085,8 @@ function createInput(schemaOrComponent, definitionOptions = {}) {
   }
   return definition;
 }
-const _hoisted_1$J = { class: "primary-checkbox" };
-const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$L = { class: "primary-checkbox" };
+const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
   __name: "Checkbox",
   props: {
     modelValue: Boolean
@@ -17125,7 +17114,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("label", _hoisted_1$J, [
+      return vue.openBlock(), vue.createElementBlock("label", _hoisted_1$L, [
         vue.withDirectives(vue.createElementVNode("input", {
           type: "checkbox",
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(val) ? val.value = $event : val = $event)
@@ -17133,24 +17122,24 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
           [vue.vModelCheckbox, vue.unref(val)]
         ]),
         vue.createElementVNode("span", null, [
-          vue.createVNode(vue.unref(_sfc_main$T), { icon: "check" })
+          vue.createVNode(vue.unref(_sfc_main$W), { icon: "check" })
         ])
       ]);
     };
   }
 });
-const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-6b168ea9"]]);
-const _hoisted_1$I = { class: "bagel-input" };
-const _hoisted_2$D = { class: "mt-1" };
-const _hoisted_3$z = {
+const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-6b168ea9"]]);
+const _hoisted_1$K = { class: "bagel-input" };
+const _hoisted_2$E = { class: "mt-1" };
+const _hoisted_3$A = {
   key: 0,
   class: "bglform-contact-confirm"
 };
-const _hoisted_4$j = { class: "txt14" };
-const _hoisted_5$f = ["onUpdate:modelValue", "placeholder"];
-const _hoisted_6$b = ["onUpdate:modelValue", "placeholder"];
+const _hoisted_4$l = { class: "txt14" };
+const _hoisted_5$g = ["onUpdate:modelValue", "placeholder"];
+const _hoisted_6$c = ["onUpdate:modelValue", "placeholder"];
 const _hoisted_7$7 = ["onUpdate:modelValue", "placeholder"];
-const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
   __name: "ContactArrayFormKit",
   props: {
     context: {}
@@ -17203,16 +17192,16 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$I, [
-        vue.createElementVNode("div", _hoisted_2$D, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$K, [
+        vue.createElementVNode("div", _hoisted_2$E, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(val), (contact, i3) => {
             var _a2, _b, _c, _d, _e2, _f;
             return vue.openBlock(), vue.createElementBlock("div", {
               class: "bglform-contact mb-2",
               key: i3
             }, [
-              vue.unref(deleteCandidate) === i3 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$z, [
-                vue.createElementVNode("p", _hoisted_4$j, vue.toDisplayString((_a2 = formPlaceholders.value) == null ? void 0 : _a2.sure), 1),
+              vue.unref(deleteCandidate) === i3 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$A, [
+                vue.createElementVNode("p", _hoisted_4$l, vue.toDisplayString((_a2 = formPlaceholders.value) == null ? void 0 : _a2.sure), 1),
                 vue.createVNode(vue.unref(Btn), {
                   thin: "",
                   color: "red",
@@ -17248,7 +17237,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
                 "onUpdate:modelValue": ($event) => contact.label = $event,
                 type: "text",
                 placeholder: (_b = formPlaceholders.value) == null ? void 0 : _b.label
-              }, null, 8, _hoisted_5$f), [
+              }, null, 8, _hoisted_5$g), [
                 [vue.vModelText, contact.label]
               ]),
               ((_c = _ctx.context) == null ? void 0 : _c.id) === "email" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
@@ -17256,7 +17245,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
                 "onUpdate:modelValue": ($event) => contact.email = $event,
                 placeholder: (_d = formPlaceholders.value) == null ? void 0 : _d.email,
                 type: "email"
-              }, null, 8, _hoisted_6$b)), [
+              }, null, 8, _hoisted_6$c)), [
                 [vue.vModelText, contact.email]
               ]) : vue.createCommentVNode("", true),
               ((_e2 = _ctx.context) == null ? void 0 : _e2.id) === "phone" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
@@ -17295,23 +17284,23 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const ContactArrayFormKit = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-f93bb259"]]);
-const _hoisted_1$H = { class: "bagel-input" };
-const _hoisted_2$C = { class: "mt-1" };
-const _hoisted_3$y = {
+const ContactArrayFormKit = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-f93bb259"]]);
+const _hoisted_1$J = { class: "bagel-input" };
+const _hoisted_2$D = { class: "mt-1" };
+const _hoisted_3$z = {
   key: 0,
   class: "bglform-contact-confirm"
 };
-const _hoisted_4$i = { class: "txt14" };
-const _hoisted_5$e = ["onUpdate:modelValue", "placeholder"];
-const _hoisted_6$a = { class: "bglform-contact-address" };
+const _hoisted_4$k = { class: "txt14" };
+const _hoisted_5$f = ["onUpdate:modelValue", "placeholder"];
+const _hoisted_6$b = { class: "bglform-contact-address" };
 const _hoisted_7$6 = ["onUpdate:modelValue", "placeholder"];
 const _hoisted_8$3 = { class: "bglform-contact-address-flex" };
 const _hoisted_9$2 = ["onUpdate:modelValue", "placeholder"];
 const _hoisted_10$2 = ["onUpdate:modelValue", "placeholder"];
 const _hoisted_11$1 = ["onUpdate:modelValue", "placeholder"];
 const _hoisted_12$1 = { class: "bglform-address-del" };
-const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
   __name: "AddressArray",
   props: {
     context: {}
@@ -17370,16 +17359,16 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$H, [
-        vue.createElementVNode("div", _hoisted_2$C, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$J, [
+        vue.createElementVNode("div", _hoisted_2$D, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(val), (address, i3) => {
             var _a2, _b, _c, _d, _e2, _f;
             return vue.openBlock(), vue.createElementBlock("div", {
               class: "bglform-contact mb-3",
               key: i3
             }, [
-              vue.unref(deleteCandidate) === i3 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$y, [
-                vue.createElementVNode("p", _hoisted_4$i, vue.toDisplayString((_a2 = formPlaceholders.value) == null ? void 0 : _a2.sure), 1),
+              vue.unref(deleteCandidate) === i3 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$z, [
+                vue.createElementVNode("p", _hoisted_4$k, vue.toDisplayString((_a2 = formPlaceholders.value) == null ? void 0 : _a2.sure), 1),
                 vue.createVNode(vue.unref(Btn), {
                   thin: "",
                   color: "red",
@@ -17415,10 +17404,10 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
                 "onUpdate:modelValue": ($event) => address.label = $event,
                 type: "text",
                 placeholder: (_b = formPlaceholders.value) == null ? void 0 : _b.label
-              }, null, 8, _hoisted_5$e), [
+              }, null, 8, _hoisted_5$f), [
                 [vue.vModelText, address.label]
               ]),
-              vue.createElementVNode("div", _hoisted_6$a, [
+              vue.createElementVNode("div", _hoisted_6$b, [
                 vue.withDirectives(vue.createElementVNode("input", {
                   "onUpdate:modelValue": ($event) => address.street = $event,
                   placeholder: (_c = formPlaceholders.value) == null ? void 0 : _c.street,
@@ -17479,16 +17468,16 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const AddressArray = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-77d03b04"]]);
-const _hoisted_1$G = { class: "bagel-input" };
-const _hoisted_2$B = { class: "mt-1" };
-const _hoisted_3$x = {
+const AddressArray = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-77d03b04"]]);
+const _hoisted_1$I = { class: "bagel-input" };
+const _hoisted_2$C = { class: "mt-1" };
+const _hoisted_3$y = {
   key: 0,
   class: "bglform-contact-confirm"
 };
-const _hoisted_4$h = { class: "txt14" };
-const _hoisted_5$d = ["onUpdate:modelValue", "placeholder"];
-const _hoisted_6$9 = { class: "bglform-contact-address" };
+const _hoisted_4$j = { class: "txt14" };
+const _hoisted_5$e = ["onUpdate:modelValue", "placeholder"];
+const _hoisted_6$a = { class: "bglform-contact-address" };
 const _hoisted_7$5 = ["onUpdate:modelValue", "placeholder"];
 const _hoisted_8$2 = { class: "bglform-contact-address-flex" };
 const _hoisted_9$1 = ["onUpdate:modelValue", "placeholder"];
@@ -17500,7 +17489,7 @@ const _hoisted_14 = ["onUpdate:modelValue"];
 const _hoisted_15 = ["onUpdate:modelValue"];
 const _hoisted_16 = ["onUpdate:modelValue", "placeholder"];
 const _hoisted_17 = { class: "bglform-address-del" };
-const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
   __name: "BankDetailsArray",
   props: {
     context: {}
@@ -17553,16 +17542,16 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$G, [
-        vue.createElementVNode("div", _hoisted_2$B, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$I, [
+        vue.createElementVNode("div", _hoisted_2$C, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(val), (bank_account, i3) => {
             var _a2, _b, _c, _d, _e2, _f, _g, _h;
             return vue.openBlock(), vue.createElementBlock("div", {
               class: "bglform-contact mb-3",
               key: i3
             }, [
-              vue.unref(deleteCandidate) === i3 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$x, [
-                vue.createElementVNode("p", _hoisted_4$h, vue.toDisplayString((_a2 = formPlaceholders.value) == null ? void 0 : _a2.sure), 1),
+              vue.unref(deleteCandidate) === i3 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$y, [
+                vue.createElementVNode("p", _hoisted_4$j, vue.toDisplayString((_a2 = formPlaceholders.value) == null ? void 0 : _a2.sure), 1),
                 vue.createVNode(vue.unref(Btn), {
                   thin: "",
                   color: "red",
@@ -17598,10 +17587,10 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
                 "onUpdate:modelValue": ($event) => bank_account.label = $event,
                 type: "text",
                 placeholder: (_b = formPlaceholders.value) == null ? void 0 : _b.label
-              }, null, 8, _hoisted_5$d), [
+              }, null, 8, _hoisted_5$e), [
                 [vue.vModelText, bank_account.label]
               ]),
-              vue.createElementVNode("div", _hoisted_6$9, [
+              vue.createElementVNode("div", _hoisted_6$a, [
                 vue.withDirectives(vue.createElementVNode("input", {
                   "onUpdate:modelValue": ($event) => bank_account.bank_name = $event,
                   placeholder: (_c = formPlaceholders.value) == null ? void 0 : _c.bankName,
@@ -17696,9 +17685,9 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const BankDetailsArray = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-a0d366d4"]]);
-const _hoisted_1$F = { class: "misc-wrap" };
-const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+const BankDetailsArray = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-a0d366d4"]]);
+const _hoisted_1$H = { class: "misc-wrap" };
+const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
   __name: "MiscFields",
   props: {
     context: {},
@@ -17715,7 +17704,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
       console.log(fields.value);
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$F, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$H, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(fields.value.filter(
           (field) => {
             var _a2;
@@ -17743,13 +17732,13 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const MiscFieldsBtns = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-a096417d"]]);
+const MiscFieldsBtns = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-a096417d"]]);
 const _withScopeId$1 = (n) => (vue.pushScopeId("data-v-d0543d4b"), n = n(), vue.popScopeId(), n);
-const _hoisted_1$E = ["title"];
-const _hoisted_2$A = { class: "switch" };
-const _hoisted_3$w = ["id"];
-const _hoisted_4$g = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.createElementVNode("span", { class: "slider round" }, null, -1));
-const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$G = ["title"];
+const _hoisted_2$B = { class: "switch" };
+const _hoisted_3$x = ["id"];
+const _hoisted_4$i = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.createElementVNode("span", { class: "slider round" }, null, -1));
+const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
   __name: "Toggle",
   props: {
     context: Object
@@ -17773,7 +17762,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["bagel-input checkbox", { check: (_a2 = __props.context) == null ? void 0 : _a2.attrs.isCheckbox }]),
         title: (_b = __props.context) == null ? void 0 : _b.help
       }, [
-        vue.createElementVNode("label", _hoisted_2$A, [
+        vue.createElementVNode("label", _hoisted_2$B, [
           vue.withDirectives(vue.createElementVNode("input", {
             onChange: _cache[0] || (_cache[0] = () => {
               var _a3;
@@ -17782,31 +17771,31 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
             type: "checkbox",
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(inputVal) ? inputVal.value = $event : inputVal = $event),
             id: (_c = __props.context) == null ? void 0 : _c.id
-          }, null, 40, _hoisted_3$w), [
+          }, null, 40, _hoisted_3$x), [
             [vue.vModelCheckbox, vue.unref(inputVal)]
           ]),
-          _hoisted_4$g
+          _hoisted_4$i
         ])
-      ], 10, _hoisted_1$E);
+      ], 10, _hoisted_1$G);
     };
   }
 });
-const Toggle = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-d0543d4b"]]);
-const _hoisted_1$D = { class: "files-wrapper flex" };
-const _hoisted_2$z = {
+const Toggle = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-d0543d4b"]]);
+const _hoisted_1$F = { class: "files-wrapper flex" };
+const _hoisted_2$A = {
   key: 0,
   class: "img-label"
 };
-const _hoisted_3$v = { class: "uploading-wrap" };
-const _hoisted_4$f = { class: "load-file-bar" };
-const _hoisted_5$c = ["src", "alt"];
-const _hoisted_6$8 = { class: "flex" };
+const _hoisted_3$w = { class: "uploading-wrap" };
+const _hoisted_4$h = { class: "load-file-bar" };
+const _hoisted_5$d = ["src", "alt"];
+const _hoisted_6$9 = { class: "flex" };
 const _hoisted_7$4 = {
   key: 0,
   class: "progress"
 };
 const _hoisted_8$1 = ["multiple"];
-const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
   __name: "FileUploader",
   props: {
     context: {},
@@ -17944,7 +17933,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
         void addFiles(filesToAdd);
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$F, [
         vue.createElementVNode("div", {
           ref_key: "dropZoneEl",
           ref: dropZoneEl,
@@ -17964,34 +17953,34 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
             ]),
             _: 1
           }),
-          allowUpload.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$z, [
+          allowUpload.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$A, [
             vue.createElementVNode("p", null, [
               vue.createTextVNode(vue.toDisplayString(computedDragDropLabel.value) + " ", 1),
               vue.createElementVNode("span", null, vue.toDisplayString(computedDrowseLabel.value), 1)
             ])
           ])) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", _hoisted_3$v, [
+          vue.createElementVNode("div", _hoisted_3$w, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(files.value, (item, index2) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 class: vue.normalizeClass({ uploading: item.uploading }),
                 key: index2
               }, [
-                vue.createElementVNode("div", _hoisted_4$f, [
+                vue.createElementVNode("div", _hoisted_4$h, [
                   isImg(item) ? (vue.openBlock(), vue.createElementBlock("img", {
                     key: 0,
                     width: "40",
                     src: item.dataUrl,
                     alt: item.name,
                     style: { "margin-inline-end": "10px" }
-                  }, null, 8, _hoisted_5$c)) : vue.createCommentVNode("", true),
+                  }, null, 8, _hoisted_5$d)) : vue.createCommentVNode("", true),
                   vue.createElementVNode("p", null, vue.toDisplayString(item.name), 1),
-                  vue.createElementVNode("div", _hoisted_6$8, [
+                  vue.createElementVNode("div", _hoisted_6$9, [
                     vue.createElementVNode("div", {
                       class: vue.normalizeClass(["pie", { complete: item.progress === 100 }]),
                       style: vue.normalizeStyle([`--p:${item.progress}`, { "--b": "2px" }])
                     }, [
                       item.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$4, vue.toDisplayString(`${item.progress.toFixed(0)}`), 1)) : vue.createCommentVNode("", true),
-                      vue.createVNode(vue.unref(_sfc_main$T), {
+                      vue.createVNode(vue.unref(_sfc_main$W), {
                         class: "success",
                         icon: "check"
                       })
@@ -18021,15 +18010,15 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$C = {
+const _hoisted_1$E = {
   key: 0,
   class: "person-card-edit flex gap-2"
 };
-const _hoisted_2$y = { class: "person-card-icon-wrap" };
-const _hoisted_3$u = { class: "person-card-icon" };
-const _hoisted_4$e = { class: "person-card-name txt20" };
-const _hoisted_5$b = { class: "person-card-details-wrap" };
-const _hoisted_6$7 = {
+const _hoisted_2$z = { class: "person-card-icon-wrap" };
+const _hoisted_3$v = { class: "person-card-icon" };
+const _hoisted_4$g = { class: "person-card-name txt20" };
+const _hoisted_5$c = { class: "person-card-details-wrap" };
+const _hoisted_6$8 = {
   key: 0,
   class: "person-card-details"
 };
@@ -18043,7 +18032,7 @@ const _hoisted_8 = {
 };
 const _hoisted_9 = { key: 0 };
 const _hoisted_10 = { key: 1 };
-const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
   __name: "PersonPreviewFormkit",
   props: {
     context: {},
@@ -18074,7 +18063,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
         (...args) => _ctx.onClick && _ctx.onClick(...args)),
         class: "person-card"
       }, [
-        !_ctx.onClick ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
+        !_ctx.onClick ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [
           !_ctx.$route.path.match("/search") ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
             key: 0,
             onClick: vue.unref(hideModal),
@@ -18092,13 +18081,13 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
             icon: "edit"
           })
         ])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_2$y, [
-          vue.createElementVNode("p", _hoisted_3$u, vue.toDisplayString(vue.unref(initials)(person.value.first_name, person.value.last_name)), 1),
-          vue.createElementVNode("p", _hoisted_4$e, vue.toDisplayString(person.value.first_name) + " " + vue.toDisplayString(person.value.last_name), 1)
+        vue.createElementVNode("div", _hoisted_2$z, [
+          vue.createElementVNode("p", _hoisted_3$v, vue.toDisplayString(vue.unref(initials)(person.value.first_name, person.value.last_name)), 1),
+          vue.createElementVNode("p", _hoisted_4$g, vue.toDisplayString(person.value.first_name) + " " + vue.toDisplayString(person.value.last_name), 1)
         ]),
-        vue.createElementVNode("div", _hoisted_5$b, [
-          ((_a2 = person.value.phone) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$7, [
-            vue.createVNode(vue.unref(_sfc_main$T), { icon: "phone" }),
+        vue.createElementVNode("div", _hoisted_5$c, [
+          ((_a2 = person.value.phone) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$8, [
+            vue.createVNode(vue.unref(_sfc_main$W), { icon: "phone" }),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(person.value.phone, (phone) => {
               return vue.openBlock(), vue.createElementBlock("p", {
                 key: phone.id
@@ -18106,7 +18095,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
             }), 128))
           ])) : vue.createCommentVNode("", true),
           ((_b = person.value.email) == null ? void 0 : _b.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$3, [
-            vue.createVNode(vue.unref(_sfc_main$T), { icon: "email" }),
+            vue.createVNode(vue.unref(_sfc_main$W), { icon: "email" }),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(person.value.email, (email) => {
               return vue.openBlock(), vue.createElementBlock("p", {
                 key: email.id
@@ -18114,7 +18103,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
             }), 128))
           ])) : vue.createCommentVNode("", true),
           person.value.date_of_birth || person.value.gender ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
-            vue.createVNode(vue.unref(_sfc_main$T), { icon: "badge" }),
+            vue.createVNode(vue.unref(_sfc_main$W), { icon: "badge" }),
             person.value.date_of_birth ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_9, vue.toDisplayString(person.value.date_of_birth), 1)) : vue.createCommentVNode("", true),
             person.value.gender ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_10, vue.toDisplayString(person.value.gender), 1)) : vue.createCommentVNode("", true)
           ])) : vue.createCommentVNode("", true)
@@ -18123,7 +18112,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
   __name: "TextVariableExamples",
   props: {
     context: Object
@@ -18215,14 +18204,14 @@ const AddressInput = createInput(AddressArray);
 const BankDetailsInput = createInput(BankDetailsArray);
 const MiscFieldsInput = createInput(MiscFieldsBtns);
 const ToggleSwitchInput = createInput(Toggle);
-const FileUploadInput = createInput(_sfc_main$u);
-const TextVariablesInput = createInput(_sfc_main$s);
-const PersonPreviewInput = createInput(_sfc_main$t);
-const _hoisted_1$B = {
+const FileUploadInput = createInput(_sfc_main$x);
+const TextVariablesInput = createInput(_sfc_main$v);
+const PersonPreviewInput = createInput(_sfc_main$w);
+const _hoisted_1$D = {
   key: 1,
   class: "pill"
 };
-const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
   __name: "ItemRef",
   props: {
     modelValue: {},
@@ -18256,15 +18245,15 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
         }, {
           default: vue.withCtx(() => [
             vue.createTextVNode(vue.toDisplayString(content.value) + " ", 1),
-            vue.createVNode(vue.unref(_sfc_main$T), { icon: "arrow_forward" })
+            vue.createVNode(vue.unref(_sfc_main$W), { icon: "arrow_forward" })
           ]),
           _: 1
-        })) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$B, vue.toDisplayString(content.value), 1))
+        })) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$D, vue.toDisplayString(content.value), 1))
       ]);
     };
   }
 });
-const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
   __name: "MaterialIcon",
   props: {
     icon: {},
@@ -18279,13 +18268,13 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$A = { class: "bagel-input" };
-const _hoisted_2$x = ["for"];
-const _hoisted_3$t = ["checked"];
-const _hoisted_4$d = ["name", "type", "value"];
-const _hoisted_5$a = ["name", "type", "value"];
-const _hoisted_6$6 = ["name", "type", "value"];
-const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$C = { class: "bagel-input" };
+const _hoisted_2$y = ["for"];
+const _hoisted_3$u = ["checked"];
+const _hoisted_4$f = ["name", "type", "value"];
+const _hoisted_5$b = ["name", "type", "value"];
+const _hoisted_6$7 = ["name", "type", "value"];
+const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
   __name: "PlainInputField",
   props: {
     type: {},
@@ -18315,14 +18304,14 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
         vue.createElementVNode("label", {
           for: vue.unref(formatString)(_ctx.name, "pascal")
         }, [
-          vue.createVNode(_sfc_main$V, {
+          vue.createVNode(_sfc_main$Y, {
             input: vue.unref(formatString)(_ctx.name, "titleCase")
           }, null, 8, ["input"])
-        ], 8, _hoisted_2$x),
+        ], 8, _hoisted_2$y),
         _ctx.type === "checkbox" ? (vue.openBlock(), vue.createElementBlock("input", {
           key: 0,
           ref_key: "el",
@@ -18331,7 +18320,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
           class: "ctl",
           type: "checkbox",
           onChange: handleCheck
-        }, null, 40, _hoisted_3$t)) : _ctx.type === "number" ? (vue.openBlock(), vue.createElementBlock("input", {
+        }, null, 40, _hoisted_3$u)) : _ctx.type === "number" ? (vue.openBlock(), vue.createElementBlock("input", {
           key: 1,
           ref_key: "el",
           ref: el2,
@@ -18340,7 +18329,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
           value: _ctx.modelValue,
           class: "ctl",
           onInput: handleInput
-        }, null, 40, _hoisted_4$d)) : _ctx.type === "text" ? (vue.openBlock(), vue.createElementBlock("input", {
+        }, null, 40, _hoisted_4$f)) : _ctx.type === "text" ? (vue.openBlock(), vue.createElementBlock("input", {
           key: 2,
           ref_key: "el",
           ref: el2,
@@ -18349,7 +18338,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
           value: _ctx.modelValue,
           class: "ctl",
           onInput: handleInput
-        }, null, 40, _hoisted_5$a)) : _ctx.type === "textarea" ? (vue.openBlock(), vue.createElementBlock("textarea", {
+        }, null, 40, _hoisted_5$b)) : _ctx.type === "textarea" ? (vue.openBlock(), vue.createElementBlock("textarea", {
           key: 3,
           ref_key: "el",
           ref: el2,
@@ -18358,21 +18347,141 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
           value: _ctx.modelValue,
           class: "ctl",
           onInput: handleInput
-        }, null, 40, _hoisted_6$6)) : vue.createCommentVNode("", true),
+        }, null, 40, _hoisted_6$7)) : vue.createCommentVNode("", true),
         vue.createElementVNode("div", null, [
-          vue.createVNode(_sfc_main$V, { input: _ctx.errorMessage }, null, 8, ["input"])
+          vue.createVNode(_sfc_main$Y, { input: _ctx.errorMessage }, null, 8, ["input"])
         ])
       ]);
     };
   }
 });
+const _hoisted_1$B = { key: 2 };
+const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  __name: "BglForm",
+  props: {
+    modelValue: {},
+    schema: {},
+    onDelete: { type: Function },
+    onSubmit: { type: Function }
+  },
+  emits: ["update:modelValue", "submit"],
+  setup(__props, { emit: __emit }) {
+    const { showModal } = useModal();
+    const props2 = __props;
+    const emits = __emit;
+    const handleEmit = (val) => emits("update:modelValue", val);
+    let data2 = vue.ref({
+      ...props2.modelValue
+    });
+    const runSubmit = () => {
+      emits("submit", data2.value);
+      clearForm();
+    };
+    const clearForm = () => data2.value = {};
+    const i18nT = (val) => val;
+    vue.watch(
+      () => data2.value,
+      () => handleEmit,
+      { immediate: true }
+    );
+    const runDelete = () => {
+      showModal(
+        {
+          class: "small-modal",
+          title: i18nT("Are you sure?"),
+          actions: [
+            {
+              value: "Confirm",
+              color: "red",
+              onClick: () => {
+                var _a2;
+                return (_a2 = props2.onDelete) == null ? void 0 : _a2.call(props2, data2.value.id);
+              }
+            },
+            { value: "Cancel", color: "gray" }
+          ]
+        },
+        { default: i18nT("form.deleteMessage") }
+      );
+    };
+    return (_ctx, _cache) => {
+      var _a2;
+      return vue.openBlock(), vue.createElementBlock("form", {
+        onSubmit: vue.withModifiers(runSubmit, ["prevent"])
+      }, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.schema, (field, i3) => {
+          return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
+            key: field.id || `${i3}p`,
+            field,
+            modelValue: vue.unref(data2),
+            "onUpdate:modelValue": ($event) => field.id ? vue.unref(data2)[field.id] = $event : ""
+          }, null, 8, ["field", "modelValue", "onUpdate:modelValue"]);
+        }), 128)),
+        ((_a2 = _ctx.modelValue) == null ? void 0 : _a2.id) && _ctx.onDelete ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
+          key: 0,
+          class: "del-top",
+          onClick: runDelete,
+          value: "Delete",
+          flat: "",
+          icon: "delete",
+          color: "red",
+          thin: ""
+        })) : vue.createCommentVNode("", true),
+        !_ctx.$slots.submit && _ctx.onSubmit ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
+          key: 1,
+          value: "Submit",
+          type: "submit",
+          thin: ""
+        })) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, [
+          vue.renderSlot(_ctx.$slots, "submit")
+        ]))
+      ], 32);
+    };
+  }
+});
+const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  __name: "BglField",
+  props: {
+    modelValue: {},
+    field: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props2 = __props;
+    const emits = __emit;
+    return (_ctx, _cache) => {
+      var _a2;
+      const _component_BglField = vue.resolveComponent("BglField", true);
+      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.field.$el || "div"), vue.mergeProps({
+        required: _ctx.field.required
+      }, vue.unref(bindAttrs)(((_a2 = _ctx.field) == null ? void 0 : _a2.attrs) || {}, props2.modelValue[_ctx.field.id || ""], props2.modelValue), {
+        label: _ctx.field.label,
+        placeholder: _ctx.field.placeholder || _ctx.field.label,
+        modelValue: props2.modelValue[_ctx.field.id || ""],
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => emits("update:modelValue", $event))
+      }), {
+        default: vue.withCtx(() => [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.field.children, (child, ii) => {
+            return vue.openBlock(), vue.createBlock(_component_BglField, {
+              modelValue: _ctx.modelValue,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emits("update:modelValue", $event)),
+              key: child.id || ii,
+              field: child
+            }, null, 8, ["modelValue", "field"]);
+          }), 128))
+        ]),
+        _: 1
+      }, 16, ["required", "label", "placeholder", "modelValue"]);
+    };
+  }
+});
 const _withScopeId = (n) => (vue.pushScopeId("data-v-0dacba34"), n = n(), vue.popScopeId(), n);
-const _hoisted_1$z = ["title"];
-const _hoisted_2$w = ["for"];
-const _hoisted_3$s = { class: "switch" };
-const _hoisted_4$c = ["id"];
-const _hoisted_5$9 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("span", { class: "slider round" }, null, -1));
-const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$A = ["title"];
+const _hoisted_2$x = ["for"];
+const _hoisted_3$t = { class: "switch" };
+const _hoisted_4$e = ["id"];
+const _hoisted_5$a = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("span", { class: "slider round" }, null, -1));
+const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
   __name: "CheckInput",
   props: {
     field: {},
@@ -18405,29 +18514,29 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
       }, [
         vue.createElementVNode("label", {
           for: _ctx.field.id
-        }, vue.toDisplayString(_ctx.field.label), 9, _hoisted_2$w),
-        vue.createElementVNode("label", _hoisted_3$s, [
+        }, vue.toDisplayString(_ctx.field.label), 9, _hoisted_2$x),
+        vue.createElementVNode("label", _hoisted_3$t, [
           vue.withDirectives(vue.createElementVNode("input", {
             id: _ctx.field.id,
             type: "checkbox",
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputVal.value = $event),
             class: vue.normalizeClass({ "no-edit": !_ctx.editMode })
-          }, null, 10, _hoisted_4$c), [
+          }, null, 10, _hoisted_4$e), [
             [vue.vModelCheckbox, inputVal.value]
           ]),
-          _hoisted_5$9
+          _hoisted_5$a
         ])
-      ], 10, _hoisted_1$z);
+      ], 10, _hoisted_1$A);
     };
   }
 });
-const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-0dacba34"]]);
-const _hoisted_1$y = ["title"];
-const _hoisted_2$v = { key: 0 };
-const _hoisted_3$r = { class: "flex gap-3" };
-const _hoisted_4$b = ["value", "placeholder"];
-const _hoisted_5$8 = { class: "currency" };
-const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-0dacba34"]]);
+const _hoisted_1$z = ["title"];
+const _hoisted_2$w = { key: 0 };
+const _hoisted_3$s = { class: "flex gap-3" };
+const _hoisted_4$d = ["value", "placeholder"];
+const _hoisted_5$9 = { class: "currency" };
+const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   __name: "CurrencyInput",
   props: {
     field: {},
@@ -18528,26 +18637,26 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.field.description
       }, [
-        _ctx.field.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$v, vue.toDisplayString(_ctx.field.label), 1)) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_3$r, [
+        _ctx.field.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$w, vue.toDisplayString(_ctx.field.label), 1)) : vue.createCommentVNode("", true),
+        vue.createElementVNode("div", _hoisted_3$s, [
           vue.createElementVNode("input", {
             value: _ctx.modelValue,
             type: "number",
             onInput: handleInput,
             placeholder: _ctx.placeholder,
             class: vue.normalizeClass({ "no-edit": !_ctx.editMode })
-          }, null, 42, _hoisted_4$b),
-          vue.createElementVNode("p", _hoisted_5$8, vue.toDisplayString(((_a2 = currencies.find((c2) => c2.symbol === _ctx.field.currency)) == null ? void 0 : _a2.character) || _ctx.field.currency), 1)
+          }, null, 42, _hoisted_4$d),
+          vue.createElementVNode("p", _hoisted_5$9, vue.toDisplayString(((_a2 = currencies.find((c2) => c2.symbol === _ctx.field.currency)) == null ? void 0 : _a2.character) || _ctx.field.currency), 1)
         ])
-      ], 10, _hoisted_1$y);
+      ], 10, _hoisted_1$z);
     };
   }
 });
-const CurrencyInput = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-17a56a3f"]]);
-const _hoisted_1$x = ["title"];
-const _hoisted_2$u = { key: 0 };
-const _hoisted_3$q = ["placeholder", "disabled"];
-const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+const CurrencyInput = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-17a56a3f"]]);
+const _hoisted_1$y = ["title"];
+const _hoisted_2$v = { key: 0 };
+const _hoisted_3$r = ["placeholder", "disabled"];
+const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
   __name: "DateInput",
   props: {
     field: {},
@@ -18568,7 +18677,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.field.description
       }, [
-        _ctx.field.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$u, vue.toDisplayString(_ctx.field.label), 1)) : vue.createCommentVNode("", true),
+        _ctx.field.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$v, vue.toDisplayString(_ctx.field.label), 1)) : vue.createCommentVNode("", true),
         vue.withDirectives(vue.createElementVNode("input", {
           type: "date",
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => date2.value = $event),
@@ -18578,18 +18687,18 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
           disabled: !_ctx.editMode,
           enableTimePicker: false,
           textInputOptions: { format: "yyyy-MM-dd" }
-        }, null, 40, _hoisted_3$q), [
+        }, null, 40, _hoisted_3$r), [
           [vue.vModelText, date2.value]
         ])
-      ], 10, _hoisted_1$x);
+      ], 10, _hoisted_1$y);
     };
   }
 });
-const DateInput = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-782aee7f"]]);
-const _hoisted_1$w = ["title"];
-const _hoisted_2$t = { key: 0 };
-const _hoisted_3$p = ["value", "placeholder"];
-const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+const DateInput = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-782aee7f"]]);
+const _hoisted_1$x = ["title"];
+const _hoisted_2$u = { key: 0 };
+const _hoisted_3$q = ["value", "placeholder"];
+const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
   __name: "DatetimeInput",
   props: {
     description: { default: "" },
@@ -18615,7 +18724,7 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$t, [
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$u, [
           vue.createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : vue.createCommentVNode("", true),
         vue.createElementVNode("input", {
@@ -18624,15 +18733,15 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
           onInput: handleInput,
           placeholder: _ctx.placeholder,
           class: vue.normalizeClass({ "no-edit": !_ctx.editMode })
-        }, null, 42, _hoisted_3$p)
-      ], 10, _hoisted_1$w);
+        }, null, 42, _hoisted_3$q)
+      ], 10, _hoisted_1$x);
     };
   }
 });
-const _hoisted_1$v = ["title"];
-const _hoisted_2$s = { key: 0 };
-const _hoisted_3$o = ["value", "placeholder"];
-const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$w = ["title"];
+const _hoisted_2$t = { key: 0 };
+const _hoisted_3$p = ["value", "placeholder"];
+const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
   __name: "EmailInput",
   props: {
     description: { default: "" },
@@ -18655,7 +18764,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$s, [
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$t, [
           vue.createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : vue.createCommentVNode("", true),
         vue.createElementVNode("input", {
@@ -18665,16 +18774,16 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
           onInput: handleInput,
           class: vue.normalizeClass({ "no-edit": !_ctx.editMode }),
           placeholder: _ctx.placeholder
-        }, null, 42, _hoisted_3$o)
-      ], 10, _hoisted_1$v);
+        }, null, 42, _hoisted_3$p)
+      ], 10, _hoisted_1$w);
     };
   }
 });
-const EmailInput = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-ed81a514"]]);
-const _hoisted_1$u = ["title"];
-const _hoisted_2$r = { key: 0 };
-const _hoisted_3$n = ["value", "placeholder"];
-const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+const EmailInput = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-ed81a514"]]);
+const _hoisted_1$v = ["title"];
+const _hoisted_2$s = { key: 0 };
+const _hoisted_3$o = ["value", "placeholder"];
+const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
   __name: "FloatInput",
   props: {
     description: { default: "" },
@@ -18701,7 +18810,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$r, [
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$s, [
           vue.createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : vue.createCommentVNode("", true),
         vue.createElementVNode("input", {
@@ -18710,15 +18819,15 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
           onInput: handleInput,
           class: vue.normalizeClass({ "no-edit": !_ctx.editMode }),
           placeholder: _ctx.placeholder
-        }, null, 42, _hoisted_3$n)
-      ], 10, _hoisted_1$u);
+        }, null, 42, _hoisted_3$o)
+      ], 10, _hoisted_1$v);
     };
   }
 });
-const _hoisted_1$t = ["title"];
-const _hoisted_2$q = { key: 0 };
-const _hoisted_3$m = ["value", "placeholder"];
-const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$u = ["title"];
+const _hoisted_2$r = { key: 0 };
+const _hoisted_3$n = ["value", "placeholder"];
+const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
   __name: "IntInput",
   props: {
     description: { default: "" },
@@ -18745,7 +18854,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$q, [
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$r, [
           vue.createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : vue.createCommentVNode("", true),
         vue.createElementVNode("input", {
@@ -18754,15 +18863,15 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
           onInput: handleInput,
           class: vue.normalizeClass({ "no-edit": !_ctx.editMode }),
           placeholder: _ctx.placeholder
-        }, null, 42, _hoisted_3$m)
-      ], 10, _hoisted_1$t);
+        }, null, 42, _hoisted_3$n)
+      ], 10, _hoisted_1$u);
     };
   }
 });
-const _hoisted_1$s = ["title"];
-const _hoisted_2$p = { key: 0 };
-const _hoisted_3$l = ["value", "placeholder"];
-const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$t = ["title"];
+const _hoisted_2$q = { key: 0 };
+const _hoisted_3$m = ["value", "placeholder"];
+const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
   __name: "JSONInput",
   props: {
     description: { default: "" },
@@ -18785,7 +18894,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$p, [
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$q, [
           vue.createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : vue.createCommentVNode("", true),
         vue.createElementVNode("textarea", {
@@ -18793,26 +18902,26 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
           onInput: handleInput,
           class: vue.normalizeClass({ "no-edit": !_ctx.editMode }),
           placeholder: _ctx.placeholder
-        }, null, 42, _hoisted_3$l)
-      ], 10, _hoisted_1$s);
+        }, null, 42, _hoisted_3$m)
+      ], 10, _hoisted_1$t);
     };
   }
 });
-const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-1fc4f739"]]);
-const _hoisted_1$r = ["title"];
-const _hoisted_2$o = { key: 0 };
-const _hoisted_3$k = ["disabled"];
-const _hoisted_4$a = ["onClick"];
-const _hoisted_5$7 = {
+const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-1fc4f739"]]);
+const _hoisted_1$s = ["title"];
+const _hoisted_2$p = { key: 0 };
+const _hoisted_3$l = ["disabled"];
+const _hoisted_4$c = ["onClick"];
+const _hoisted_5$8 = {
   key: 0,
   class: "option-label"
 };
-const _hoisted_6$5 = {
+const _hoisted_6$6 = {
   key: 1,
   class: "option-label"
 };
 const _hoisted_7$2 = { class: "option-description" };
-const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
   __name: "LinkField",
   props: {
     description: { default: "" },
@@ -18936,7 +19045,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$o, [
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$p, [
           vue.createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : vue.createCommentVNode("", true),
         vue.withDirectives(vue.createElementVNode("input", {
@@ -18948,7 +19057,7 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
           onFocus: initList,
           onInput: handleInput,
           disabled: !_ctx.editMode
-        }, null, 40, _hoisted_3$k), [
+        }, null, 40, _hoisted_3$l), [
           [vue.vModelText, selectedItem.value]
         ]),
         vue.createElementVNode("div", {
@@ -18968,26 +19077,26 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
                   key: vue.unref(formatString)(option2.value, "pascal"),
                   onClick: vue.withModifiers(($event) => handleSelect(option2), ["stop"])
                 }, [
-                  option2.label ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$7, [
+                  option2.label ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$8, [
                     vue.createTextVNode(vue.toDisplayString(option2.label), 1),
                     vue.createElementVNode("span", null, "ID: " + vue.toDisplayString(option2.value), 1)
-                  ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$5, " ID: " + vue.toDisplayString(option2.value), 1)),
+                  ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$6, " ID: " + vue.toDisplayString(option2.value), 1)),
                   vue.createElementVNode("div", _hoisted_7$2, vue.toDisplayString(option2.description), 1)
-                ], 8, _hoisted_4$a);
+                ], 8, _hoisted_4$c);
               }), 128))
             ], 2)
           ]))
         ], 2)
-      ], 10, _hoisted_1$r);
+      ], 10, _hoisted_1$s);
     };
   }
 });
-const LinkField = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-947beb38"]]);
-const _hoisted_1$q = ["title"];
-const _hoisted_2$n = { key: 0 };
-const _hoisted_3$j = { class: "password-input-wrap" };
-const _hoisted_4$9 = ["value", "type", "placeholder"];
-const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+const LinkField = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-947beb38"]]);
+const _hoisted_1$r = ["title"];
+const _hoisted_2$o = { key: 0 };
+const _hoisted_3$k = { class: "password-input-wrap" };
+const _hoisted_4$b = ["value", "type", "placeholder"];
+const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
   __name: "PasswordInput",
   props: {
     description: { default: "" },
@@ -19021,31 +19130,31 @@ const _sfc_main$f = /* @__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("div", _hoisted_3$j, [
+        vue.createElementVNode("div", _hoisted_3$k, [
           vue.createElementVNode("input", {
             value: _ctx.modelValue,
             type: vue.unref(inputType),
             onInput: handleInput,
             placeholder: _ctx.placeholder,
             class: vue.normalizeClass({ "no-edit": !_ctx.editMode })
-          }, null, 42, _hoisted_4$9),
+          }, null, 42, _hoisted_4$b),
           vue.createElementVNode("div", {
             class: "icon-font password-icon",
             onMousedown: toggleInputType
           }, " visibility ", 32)
         ])
-      ], 10, _hoisted_1$q);
+      ], 10, _hoisted_1$r);
     };
   }
 });
-const PasswordInput = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-525f5e2e"]]);
-const _hoisted_1$p = ["title"];
-const _hoisted_2$m = ["for"];
-const _hoisted_3$i = ["id", "type", "placeholder", "required", "pattern"];
-const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+const PasswordInput = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-525f5e2e"]]);
+const _hoisted_1$q = ["title"];
+const _hoisted_2$n = ["for"];
+const _hoisted_3$j = ["id", "type", "placeholder", "required", "pattern"];
+const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
   __name: "Password",
   props: {
     field: {},
@@ -19085,22 +19194,22 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
             class: { "no-edit": !_ctx.editMode },
             required: _ctx.required,
             pattern: _ctx.pattern
-          }, _ctx.nativeInputAttrs), null, 16, _hoisted_3$i), [
+          }, _ctx.nativeInputAttrs), null, 16, _hoisted_3$j), [
             [vue.vModelDynamic, inputVal.value]
           ])
-        ], 8, _hoisted_2$m),
-        vue.createVNode(vue.unref(_sfc_main$T), {
+        ], 8, _hoisted_2$n),
+        vue.createVNode(vue.unref(_sfc_main$W), {
           onClick: showPassword,
           icon: vue.unref(seePassword) ? "visibility" : "visibility_off"
         }, null, 8, ["icon"])
-      ], 10, _hoisted_1$p)) : vue.createCommentVNode("", true);
+      ], 10, _hoisted_1$q)) : vue.createCommentVNode("", true);
     };
   }
 });
-const Password = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-800f4000"]]);
-const _hoisted_1$o = ["title"];
-const _hoisted_2$l = { key: 0 };
-const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+const Password = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-800f4000"]]);
+const _hoisted_1$p = ["title"];
+const _hoisted_2$m = { key: 0 };
+const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
   __name: "ReadOnlyInput",
   props: {
     field: {},
@@ -19113,49 +19222,33 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.field.description
       }, [
-        _ctx.field.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$l, vue.toDisplayString(_ctx.field.label), 1)) : vue.createCommentVNode("", true),
+        _ctx.field.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$m, vue.toDisplayString(_ctx.field.label), 1)) : vue.createCommentVNode("", true),
         vue.createTextVNode(" " + vue.toDisplayString(_ctx.modelValue), 1)
-      ], 10, _hoisted_1$o);
+      ], 10, _hoisted_1$p);
     };
   }
 });
-const ReadOnlyInput = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-b3b5a368"]]);
-const _hoisted_1$n = ["title"];
-const _hoisted_2$k = ["onClick"];
-const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+const ReadOnlyInput = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-b3b5a368"]]);
+const _hoisted_1$o = ["title"];
+const _hoisted_2$l = ["onClick"];
+const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   __name: "SelectField",
   props: {
     inputType: {},
     options: {},
-    id: {},
-    label: { default: "" },
-    placeholder: { default: "" },
-    required: { type: Boolean },
-    is_array: { type: Boolean },
-    can_add: { type: Boolean },
-    can_delete: { type: [Boolean, Function] },
-    allow_array_add: { type: Boolean },
     editMode: { type: Boolean, default: true },
-    description: { default: "" },
-    helpText: {},
-    currency: {},
-    refCollection: {},
-    refFields: {},
-    file_key: {},
-    fields: {},
-    pattern: {},
-    fieldClass: {},
-    link: {},
     field: {},
     modelValue: {},
-    small: { type: Boolean }
+    small: { type: Boolean },
+    label: { default: "" },
+    description: { default: "" }
   },
   emits: ["update:modelValue", "selected"],
   setup(__props, { emit: __emit }) {
     vue.useCssVars((_ctx) => ({
-      "1c3856b2": left2.value,
-      "62aaf5e4": `${top2.value}px`,
-      "6b6f4c7b": width.value
+      "530a7ef0": left2.value,
+      "7d0177a2": `${top2.value}px`,
+      "0ee22bfd": width.value
     }));
     const selectEl = vue.ref();
     const dropdown = vue.ref();
@@ -19254,7 +19347,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
           for: "label",
           class: vue.normalizeClass({ active: showList.value })
         }, [
-          vue.createVNode(vue.unref(_sfc_main$V), { input: _ctx.label }, null, 8, ["input"])
+          vue.createVNode(vue.unref(_sfc_main$Y), { input: _ctx.label }, null, 8, ["input"])
         ], 2)) : vue.createCommentVNode("", true),
         vue.createElementVNode("div", {
           class: vue.normalizeClass(["custom-select", { "open-select": showList.value && _ctx.editMode }]),
@@ -19266,7 +19359,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
             class: vue.normalizeClass(["input", { active: showList.value }]),
             name: "select-input"
           }, [
-            vue.createVNode(vue.unref(_sfc_main$V), { input: displayValue.value }, null, 8, ["input"])
+            vue.createVNode(vue.unref(_sfc_main$Y), { input: displayValue.value }, null, 8, ["input"])
           ], 2),
           (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "#app" }, [
             vue.createElementVNode("div", {
@@ -19279,23 +19372,23 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
                   key: option2.value,
                   onClick: ($event) => handleSelect(option2)
                 }, [
-                  vue.createVNode(vue.unref(_sfc_main$V), {
+                  vue.createVNode(vue.unref(_sfc_main$Y), {
                     input: option2.label
                   }, null, 8, ["input"])
-                ], 8, _hoisted_2$k);
+                ], 8, _hoisted_2$l);
               }), 128))
             ], 2)
           ]))
         ], 2)
-      ], 10, _hoisted_1$n);
+      ], 10, _hoisted_1$o);
     };
   }
 });
-const SelectField = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-028ea61b"]]);
-const _hoisted_1$m = ["title"];
-const _hoisted_2$j = { key: 0 };
-const _hoisted_3$h = ["value", "placeholder"];
-const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+const SelectField = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-f2c5b9ca"]]);
+const _hoisted_1$n = ["title"];
+const _hoisted_2$k = { key: 0 };
+const _hoisted_3$i = ["value", "placeholder"];
+const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
   __name: "RichTextEditor",
   props: {
     description: { default: "" },
@@ -19318,7 +19411,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$j, [
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$k, [
           vue.createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : vue.createCommentVNode("", true),
         vue.createElementVNode("textarea", {
@@ -19326,12 +19419,12 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
           onInput: handleInput,
           placeholder: _ctx.placeholder,
           class: vue.normalizeClass({ "no-edit": !_ctx.editMode })
-        }, null, 42, _hoisted_3$h)
-      ], 10, _hoisted_1$m);
+        }, null, 42, _hoisted_3$i)
+      ], 10, _hoisted_1$n);
     };
   }
 });
-const RichTextEditor = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-69a60381"]]);
+const RichTextEditor = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-69a60381"]]);
 /*!
   * vue-draggable-next v2.2.0
   * (c) 2023 Anish George
@@ -21854,13 +21947,13 @@ const VueDraggableNext = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$l = ["title"];
-const _hoisted_2$i = { class: "bagel-input" };
-const _hoisted_3$g = { class: "table-side-scroll" };
-const _hoisted_4$8 = { class: "table-header" };
-const _hoisted_5$6 = { class: "table-reorder" };
-const _hoisted_6$4 = { class: "table-action" };
-const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$m = ["title"];
+const _hoisted_2$j = { class: "bagel-input" };
+const _hoisted_3$h = { class: "table-side-scroll" };
+const _hoisted_4$a = { class: "table-header" };
+const _hoisted_5$7 = { class: "table-reorder" };
+const _hoisted_6$5 = { class: "table-action" };
+const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   __name: "TableField",
   props: {
     description: { default: "" },
@@ -21925,11 +22018,11 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
         class: "table-field-wrap",
         title: _ctx.description
       }, [
-        vue.createElementVNode("div", _hoisted_2$i, [
+        vue.createElementVNode("div", _hoisted_2$j, [
           vue.createElementVNode("label", null, vue.toDisplayString((_a2 = vue.unref(fieldMeta)) == null ? void 0 : _a2.label), 1)
         ]),
-        vue.createElementVNode("div", _hoisted_3$g, [
-          vue.createElementVNode("div", _hoisted_4$8, [
+        vue.createElementVNode("div", _hoisted_3$h, [
+          vue.createElementVNode("div", _hoisted_4$a, [
             (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", {
                 class: vue.normalizeClass(["header-col", vue.unref(formatString)(field.fieldtype, "pascal")]),
@@ -21956,8 +22049,8 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
                       class: "flex table-row",
                       key: row.id
                     }, [
-                      vue.createElementVNode("div", _hoisted_5$6, [
-                        vue.createVNode(_sfc_main$q, { icon: "more_vert" })
+                      vue.createElementVNode("div", _hoisted_5$7, [
+                        vue.createVNode(_sfc_main$t, { icon: "more_vert" })
                       ]),
                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_a3 = vue.unref(entityMeta)) == null ? void 0 : _a3.fields, (field) => {
                         return vue.openBlock(), vue.createElementBlock("div", {
@@ -21973,8 +22066,8 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
                           }, null, 8, ["field-meta", "bagel-app", "onUpdate:modelValue", "model-value"])
                         ], 2);
                       }), 128)),
-                      vue.createElementVNode("div", _hoisted_6$4, [
-                        vue.createVNode(_sfc_main$q, {
+                      vue.createElementVNode("div", _hoisted_6$5, [
+                        vue.createVNode(_sfc_main$t, {
                           icon: "delete",
                           onClick: ($event) => removeRow(index2)
                         }, null, 8, ["onClick"])
@@ -22000,15 +22093,15 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
           ]),
           _: 1
         })
-      ], 8, _hoisted_1$l);
+      ], 8, _hoisted_1$m);
     };
   }
 });
-const TableField = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-1d1376d2"]]);
-const _hoisted_1$k = ["title"];
-const _hoisted_2$h = { key: 0 };
-const _hoisted_3$f = ["value", "title", "placeholder"];
-const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+const TableField = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-1d1376d2"]]);
+const _hoisted_1$l = ["title"];
+const _hoisted_2$i = { key: 0 };
+const _hoisted_3$g = ["value", "title", "placeholder"];
+const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   __name: "DurationInput",
   props: {
     description: { default: "" },
@@ -22035,7 +22128,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$h, [
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$i, [
           vue.createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : vue.createCommentVNode("", true),
         vue.createElementVNode("input", {
@@ -22045,15 +22138,16 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
           onInput: handleInput,
           placeholder: _ctx.placeholder,
           class: vue.normalizeClass({ "no-edit": !_ctx.editMode })
-        }, null, 42, _hoisted_3$f)
-      ], 10, _hoisted_1$k);
+        }, null, 42, _hoisted_3$g)
+      ], 10, _hoisted_1$l);
     };
   }
 });
-const _hoisted_1$j = ["title"];
-const _hoisted_2$g = ["for"];
-const _hoisted_3$e = ["id", "type", "placeholder", "disabled", "required", "pattern"];
-const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$k = ["title"];
+const _hoisted_2$h = ["for"];
+const _hoisted_3$f = ["autocomplete", "id", "type", "placeholder", "disabled", "required", "pattern"];
+const _hoisted_4$9 = ["id", "type", "rows", "placeholder", "disabled", "required", "pattern"];
+const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   __name: "TextInput",
   props: {
     id: {},
@@ -22069,7 +22163,12 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     type: { default: "text" },
     nativeInputAttrs: {},
     icon: {},
-    iconStart: {}
+    iconStart: {},
+    multiline: { type: Boolean },
+    autoheight: { type: Boolean },
+    code: { type: Boolean },
+    lines: {},
+    autocomplete: { default: "off" }
   },
   emits: ["update:modelValue", "debounce"],
   setup(__props, { emit: __emit }) {
@@ -22091,6 +22190,16 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
         }, 10);
       }
     };
+    const rows = vue.computed(() => {
+      var _a2;
+      if (props2.lines)
+        return props2.lines;
+      if (props2.autoheight)
+        return ((_a2 = `${inputVal.value}`) == null ? void 0 : _a2.split("\n").length) || 1;
+      if (props2.multiline || props2.code)
+        return 4;
+      return 1;
+    });
     vue.watch(
       () => inputVal.value,
       (newVal) => {
@@ -22112,34 +22221,48 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     );
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(["bagel-input", { small: _ctx.small, shrink: _ctx.shrink, toggleEdit: _ctx.toggleEdit, editMode: vue.unref(editMode), textInputIconWrap: _ctx.icon, txtInputIconStart: _ctx.iconStart }]),
+        class: vue.normalizeClass(["bagel-input text-input", { small: _ctx.small, shrink: _ctx.shrink, toggleEdit: _ctx.toggleEdit, editMode: vue.unref(editMode), textInputIconWrap: _ctx.icon, txtInputIconStart: _ctx.iconStart, code: _ctx.code }]),
         title: _ctx.title
       }, [
         vue.createElementVNode("label", { for: _ctx.id }, [
           vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
-          vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
+          !_ctx.multiline && !_ctx.autoheight && !_ctx.code ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", vue.mergeProps({
+            key: 0,
+            autocomplete: _ctx.autocomplete,
             id: _ctx.id,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(inputVal) ? inputVal.value = $event : inputVal = $event),
             type: _ctx.type,
+            rows: 1,
             ref_key: "input",
             ref: input2,
             placeholder: _ctx.placeholder || _ctx.label,
             disabled: !vue.unref(editMode),
             required: _ctx.required,
             pattern: _ctx.pattern
-          }, _ctx.nativeInputAttrs, {
-            onDblclick: toggleEditAction,
-            onKeydown: vue.withKeys(toggleEditAction, ["enter"])
-          }), null, 16, _hoisted_3$e), [
+          }, _ctx.nativeInputAttrs, { onDblclick: toggleEditAction }), null, 16, _hoisted_3$f)), [
             [vue.vModelDynamic, vue.unref(inputVal)]
+          ]) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", vue.mergeProps({
+            key: 1,
+            id: _ctx.id,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(inputVal) ? inputVal.value = $event : inputVal = $event),
+            type: _ctx.type,
+            rows: rows.value,
+            ref_key: "input",
+            ref: input2,
+            placeholder: _ctx.placeholder || _ctx.label,
+            disabled: !vue.unref(editMode),
+            required: _ctx.required,
+            pattern: _ctx.pattern
+          }, _ctx.nativeInputAttrs, { onDblclick: toggleEditAction }), null, 16, _hoisted_4$9)), [
+            [vue.vModelText, vue.unref(inputVal)]
           ])
-        ], 8, _hoisted_2$g),
-        _ctx.iconStart ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$T), {
+        ], 8, _hoisted_2$h),
+        _ctx.iconStart ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$W), {
           key: 0,
           class: "iconStart",
           icon: _ctx.iconStart
         }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-        _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$T), {
+        _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$W), {
           key: 1,
           icon: _ctx.icon
         }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -22151,19 +22274,19 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
           icon: vue.unref(editMode) ? "check" : "edit",
           flat: ""
         }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
-      ], 10, _hoisted_1$j);
+      ], 10, _hoisted_1$k);
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-1502ca60"]]);
-const _hoisted_1$i = ["title"];
-const _hoisted_2$f = { key: 0 };
-const _hoisted_3$d = {
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-9f24ba22"]]);
+const _hoisted_1$j = ["title"];
+const _hoisted_2$g = { key: 0 };
+const _hoisted_3$e = {
   key: 1,
   class: "character-limit"
 };
-const _hoisted_4$7 = ["value"];
-const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_4$8 = ["value"];
+const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   __name: "TextArea",
   props: {
     description: { default: "" },
@@ -22188,24 +22311,24 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$f, [
-          vue.createVNode(vue.unref(_sfc_main$V), { input: _ctx.label }, null, 8, ["input"])
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$g, [
+          vue.createVNode(vue.unref(_sfc_main$Y), { input: _ctx.label }, null, 8, ["input"])
         ])) : vue.createCommentVNode("", true),
-        _ctx.showCharacterLimit ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$d, vue.toDisplayString((_a2 = _ctx.modelValue) == null ? void 0 : _a2.length) + " " + vue.toDisplayString(((_b = _ctx.nativeInputAttrs) == null ? void 0 : _b.maxlength) ? `/${_ctx.nativeInputAttrs.maxlength}` : ""), 1)) : vue.createCommentVNode("", true),
+        _ctx.showCharacterLimit ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$e, vue.toDisplayString((_a2 = _ctx.modelValue) == null ? void 0 : _a2.length) + " " + vue.toDisplayString(((_b = _ctx.nativeInputAttrs) == null ? void 0 : _b.maxlength) ? `/${_ctx.nativeInputAttrs.maxlength}` : ""), 1)) : vue.createCommentVNode("", true),
         vue.createElementVNode("textarea", vue.mergeProps({
           value: _ctx.modelValue,
           onInput: handleInput,
           class: { "no-edit": !_ctx.editMode }
-        }, _ctx.nativeInputAttrs), null, 16, _hoisted_4$7)
-      ], 10, _hoisted_1$i);
+        }, _ctx.nativeInputAttrs), null, 16, _hoisted_4$8)
+      ], 10, _hoisted_1$j);
     };
   }
 });
-const TextArea = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-a5b28c58"]]);
-const _hoisted_1$h = ["title"];
-const _hoisted_2$e = ["for"];
-const _hoisted_3$c = ["id", "placeholder", "required"];
-const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+const TextArea = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-a5b28c58"]]);
+const _hoisted_1$i = ["title"];
+const _hoisted_2$f = ["for"];
+const _hoisted_3$d = ["id", "placeholder", "required"];
+const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
   __name: "ColorPicker",
   props: {
     field: {},
@@ -22242,19 +22365,19 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
             placeholder: ((_a2 = _ctx.field) == null ? void 0 : _a2.placeholder) || _ctx.field.label,
             class: { "no-edit": !_ctx.editMode },
             required: _ctx.required
-          }, _ctx.nativeInputAttrs), null, 16, _hoisted_3$c), [
+          }, _ctx.nativeInputAttrs), null, 16, _hoisted_3$d), [
             [vue.vModelText, inputVal.value]
           ])
-        ], 8, _hoisted_2$e)
-      ], 10, _hoisted_1$h)) : vue.createCommentVNode("", true);
+        ], 8, _hoisted_2$f)
+      ], 10, _hoisted_1$i)) : vue.createCommentVNode("", true);
     };
   }
 });
-const _hoisted_1$g = { key: 0 };
-const _hoisted_2$d = ["disabled"];
-const _hoisted_3$b = { class: "custom-select-drop" };
-const _hoisted_4$6 = ["onClick"];
-const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$h = { key: 0 };
+const _hoisted_2$e = ["disabled"];
+const _hoisted_3$c = { class: "custom-select-drop" };
+const _hoisted_4$7 = ["onClick"];
+const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   __name: "DynamicLinkField",
   props: {
     label: { default: "" },
@@ -22330,7 +22453,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }])
       }, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_1$g, [
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_1$h, [
           vue.createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : vue.createCommentVNode("", true),
         vue.withDirectives(vue.createElementVNode("input", {
@@ -22342,19 +22465,19 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
           onFocus: initList,
           onInput: handleInput,
           disabled: !_ctx.editMode
-        }, null, 40, _hoisted_2$d), [
+        }, null, 40, _hoisted_2$e), [
           [vue.vModelText, selectedItem.value]
         ]),
         vue.createElementVNode("div", {
           class: vue.normalizeClass(["custom-select", { "open-select": showList.value && linkOptions.value.length > 0 }]),
           name: "link-input"
         }, [
-          vue.createElementVNode("div", _hoisted_3$b, [
+          vue.createElementVNode("div", _hoisted_3$c, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(linkOptions.value, (item2) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 key: vue.unref(formatString)(item2.value, "pascal"),
                 onClick: vue.withModifiers(($event) => handleSelect(item2), ["stop"])
-              }, vue.toDisplayString(_ctx.useId || _ctx.entity === "Entity" ? item2.value : item2.label || item2.description || item2.value), 9, _hoisted_4$6);
+              }, vue.toDisplayString(_ctx.useId || _ctx.entity === "Entity" ? item2.value : item2.label || item2.description || item2.value), 9, _hoisted_4$7);
             }), 128))
           ])
         ], 2)
@@ -22362,10 +22485,10 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$f = ["title"];
-const _hoisted_2$c = ["for"];
-const _hoisted_3$a = ["id", "placeholder", "required", "pattern"];
-const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$g = ["title"];
+const _hoisted_2$d = ["for"];
+const _hoisted_3$b = ["id", "placeholder", "required", "pattern"];
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   __name: "PlainText",
   props: {
     field: {},
@@ -22411,15 +22534,15 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
             class: { "no-edit": !_ctx.editMode },
             required: _ctx.required,
             pattern: _ctx.pattern
-          }, _ctx.nativeInputAttrs), null, 16, _hoisted_3$a), [
+          }, _ctx.nativeInputAttrs), null, 16, _hoisted_3$b), [
             [vue.vModelText, vue.unref(inputVal)]
           ])
-        ], 8, _hoisted_2$c)
-      ], 10, _hoisted_1$f)) : vue.createCommentVNode("", true);
+        ], 8, _hoisted_2$d)
+      ], 10, _hoisted_1$g)) : vue.createCommentVNode("", true);
     };
   }
 });
-const PlainText = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-188270a2"]]);
+const PlainText = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-188270a2"]]);
 function _typeof(o) {
   "@babel/helpers - typeof";
   return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o2) {
@@ -31796,15 +31919,15 @@ const vl = ({
 Object.entries(Ro).forEach(([e3, t4]) => {
   e3 !== "default" && (ja[e3] = t4);
 });
-const _hoisted_1$e = { class: "datetime-wrap" };
-const _hoisted_2$b = { class: "date-wrap" };
-const _hoisted_3$9 = {
+const _hoisted_1$f = { class: "datetime-wrap" };
+const _hoisted_2$c = { class: "date-wrap" };
+const _hoisted_3$a = {
   key: 0,
   class: "time-wrap"
 };
-const _hoisted_4$5 = ["id", "name", "value"];
-const _hoisted_5$5 = ["for"];
-const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_4$6 = ["id", "name", "value"];
+const _hoisted_5$6 = ["for"];
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "DatePicker",
   props: {
     name: {},
@@ -31820,8 +31943,8 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
       return `${hour}:${minute}`;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
-        vue.createElementVNode("div", _hoisted_2$b, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+        vue.createElementVNode("div", _hoisted_2$c, [
           vue.createVNode(vue.unref(ja), vue.mergeProps({
             inline: "",
             "week-start": "0",
@@ -31836,7 +31959,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
             _: 1
           }, 16, ["modelValue"])
         ]),
-        _ctx.showTimeWrap ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$9, [
+        _ctx.showTimeWrap ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$a, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(hours), (hr2) => {
             return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: hr2 }, [
               vue.withDirectives(vue.createElementVNode("input", {
@@ -31845,12 +31968,12 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
                 name: _ctx.name,
                 value: hr2,
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedHour.value = $event)
-              }, null, 8, _hoisted_4$5), [
+              }, null, 8, _hoisted_4$6), [
                 [vue.vModelRadio, selectedHour.value]
               ]),
               vue.createElementVNode("label", {
                 for: `${hr2}_${_ctx.name}`
-              }, vue.toDisplayString(hr2), 9, _hoisted_5$5)
+              }, vue.toDisplayString(hr2), 9, _hoisted_5$6)
             ], 64);
           }), 128))
         ])) : vue.createCommentVNode("", true)
@@ -31858,10 +31981,10 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$d = { class: "flex gap-2 flex-wrap" };
-const _hoisted_2$a = ["id", "name", "value", "checked"];
-const _hoisted_3$8 = ["for"];
-const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$e = { class: "flex gap-2 flex-wrap" };
+const _hoisted_2$b = ["id", "name", "value", "checked"];
+const _hoisted_3$9 = ["for"];
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   __name: "RadioPillsInput",
   props: {
     options: {},
@@ -31899,7 +32022,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       selectedValue.value = props2.modelValue;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(cumputedOptions.value, ({ id, label: label2, value }, index2) => {
           return vue.openBlock(), vue.createElementBlock("div", {
             class: "radio-pill",
@@ -31912,15 +32035,120 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
               value,
               checked: vue.unref(selectedValue) === value,
               onChange: handleSelect
-            }, null, 40, _hoisted_2$a),
-            vue.createElementVNode("label", { for: id }, vue.toDisplayString(label2), 9, _hoisted_3$8)
+            }, null, 40, _hoisted_2$b),
+            vue.createElementVNode("label", { for: id }, vue.toDisplayString(label2), 9, _hoisted_3$9)
           ]);
         }), 128))
       ]);
     };
   }
 });
-const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-97e3ba8c"]]);
+const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-97e3ba8c"]]);
+const _hoisted_1$d = { class: "bagel-input" };
+const _hoisted_2$a = { key: 0 };
+const _hoisted_3$8 = { class: "imagePreviewWrap" };
+const _hoisted_4$5 = ["src"];
+const _hoisted_5$5 = { class: "previewName" };
+const _hoisted_6$4 = { class: "no-margin" };
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  __name: "FileUpload",
+  props: {
+    label: {},
+    multiple: { type: Boolean }
+  },
+  setup(__props) {
+    const props2 = __props;
+    const files = vue.ref([]);
+    const fileQueue = vue.ref([]);
+    let isDragOver = vue.ref(false);
+    const preventDefault = (e3) => {
+      e3.preventDefault();
+      e3.stopPropagation();
+    };
+    const fileToUrl = (file) => URL.createObjectURL(file);
+    const removeFile = (file) => {
+      const index2 = files.value.indexOf(file);
+      files.value.splice(index2, 1);
+    };
+    const flushQueue = () => {
+      fileQueue.value.forEach((file, i3) => {
+        if (props2.multiple) {
+          if (!files.value.includes(file))
+            files.value.push(file);
+        } else
+          files.value.splice(0, 1, file);
+        console.log(files.value);
+        fileQueue.value.splice(i3, 1);
+      });
+    };
+    const browse = () => {
+      const input2 = document.createElement("input");
+      input2.type = "file";
+      input2.multiple = props2.multiple;
+      input2.onchange = (e3) => {
+        const target = e3 == null ? void 0 : e3.target;
+        if (target == null ? void 0 : target.files)
+          fileQueue.value.push(...Array.from(target.files));
+        flushQueue();
+      };
+      input2.click();
+    };
+    const dragleave = (e3) => {
+      preventDefault(e3);
+      if (e3.dataTransfer)
+        isDragOver.value = false;
+      else
+        isDragOver.value = false;
+    };
+    const dragenter = (e3) => {
+      preventDefault(e3);
+      if (e3.dataTransfer)
+        isDragOver.value = true;
+      else
+        isDragOver.value = false;
+    };
+    const drop3 = (e3) => {
+      preventDefault(e3);
+      if (e3.dataTransfer)
+        fileQueue.value.push(...Array.from(e3.dataTransfer.files));
+      isDragOver.value = false;
+      flushQueue();
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+        vue.createElementVNode("label", null, vue.toDisplayString(_ctx.label), 1),
+        vue.createElementVNode("div", {
+          onClick: browse,
+          onDragover: dragenter,
+          onDrop: drop3,
+          onDragleave: dragleave,
+          class: vue.normalizeClass(["fileUploadWrap", { fileDropZone: !files.value.length, dragover: vue.unref(isDragOver) }])
+        }, [
+          files.value.length && !_ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [
+            vue.createElementVNode("div", _hoisted_3$8, [
+              vue.createElementVNode("img", {
+                class: "preview",
+                src: fileToUrl(files.value[0]),
+                alt: ""
+              }, null, 8, _hoisted_4$5)
+            ]),
+            vue.createElementVNode("div", _hoisted_5$5, [
+              vue.createElementVNode("p", _hoisted_6$4, vue.toDisplayString(files.value[0].name), 1),
+              vue.createVNode(vue.unref(Btn), {
+                thin: "",
+                onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => removeFile(files.value[0]), ["stop"])),
+                flat: "",
+                icon: "delete",
+                color: "red"
+              })
+            ])
+          ])) : vue.createCommentVNode("", true)
+        ], 34)
+      ]);
+    };
+  }
+});
+const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-352399c0"]]);
 function _isPlaceholder(a3) {
   return a3 != null && typeof a3 === "object" && a3["@@functional/placeholder"] === true;
 }
@@ -38378,7 +38606,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       var _a2, _b, _c, _d, _e2, _f;
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        vue.createVNode(vue.unref(_sfc_main$K), null, {
+        vue.createVNode(vue.unref(_sfc_main$N), null, {
           default: vue.withCtx(() => [
             vue.createTextVNode("Whatsapp Template")
           ]),
@@ -38387,7 +38615,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("div", _hoisted_2, [
           vue.createElementVNode("div", _hoisted_3, [
             vue.createElementVNode("div", _hoisted_4, [
-              vue.createVNode(vue.unref(_sfc_main$I), {
+              vue.createVNode(vue.unref(_sfc_main$L), {
                 schema: _ctx.whatsappTemplateSchema(),
                 modelValue: vue.unref(localWhatsappData),
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(localWhatsappData) ? localWhatsappData.value = $event : localWhatsappData = $event),
@@ -38415,49 +38643,52 @@ exports.AddressInput = AddressInput;
 exports.BagelVue = BagelVue;
 exports.BankDetailsInput = BankDetailsInput;
 exports.BarChart = BarChart;
+exports.BglField = _sfc_main$q;
+exports.BglForm = _sfc_main$r;
 exports.Btn = Btn;
 exports.CheckInput = CheckInput;
 exports.Checkbox = Checkbox;
-exports.ColorPicker = _sfc_main$6;
+exports.ColorPicker = _sfc_main$7;
 exports.Comments = Comments;
 exports.ContactArrayInput = ContactArrayInput;
-exports.ContactSubmissions = _sfc_main$E;
+exports.ContactSubmissions = _sfc_main$H;
 exports.CurrencyInput = CurrencyInput;
 exports.DataPreview = DataPreview;
 exports.DateInput = DateInput;
-exports.DatePicker = _sfc_main$3;
-exports.DatetimeInput = _sfc_main$l;
-exports.DropDown = _sfc_main$P;
-exports.DurationInput = _sfc_main$9;
-exports.DynamicLinkField = _sfc_main$5;
+exports.DatePicker = _sfc_main$4;
+exports.DatetimeInput = _sfc_main$m;
+exports.DropDown = _sfc_main$S;
+exports.DurationInput = _sfc_main$a;
+exports.DynamicLinkField = _sfc_main$6;
 exports.EmailInput = EmailInput;
+exports.FileUpload = FileUpload;
 exports.FileUploadInput = FileUploadInput;
-exports.FileUploader = _sfc_main$u;
-exports.FloatInput = _sfc_main$j;
-exports.FormSchema = _sfc_main$I;
-exports.IntInput = _sfc_main$i;
-exports.ItemRef = _sfc_main$r;
+exports.FileUploader = _sfc_main$x;
+exports.FloatInput = _sfc_main$k;
+exports.FormSchema = _sfc_main$L;
+exports.IntInput = _sfc_main$j;
+exports.ItemRef = _sfc_main$u;
 exports.JSONInput = JSONInput;
-exports.LangText = _sfc_main$V;
+exports.LangText = _sfc_main$Y;
 exports.Lineart = _sfc_main$1;
 exports.LinkField = LinkField;
-exports.ListItem = _sfc_main$N;
-exports.ListView = _sfc_main$O;
-exports.MaterialIcon = _sfc_main$T;
+exports.ListItem = _sfc_main$Q;
+exports.ListView = _sfc_main$R;
+exports.MaterialIcon = _sfc_main$W;
 exports.MiscFieldsInput = MiscFieldsInput;
-exports.Modal = _sfc_main$Q;
+exports.Modal = _sfc_main$T;
 exports.ModalForm = ModalForm;
 exports.ModalPlugin = ModalPlugin;
 exports.MsgTemplate = MsgTemplate;
-exports.NavBar = _sfc_main$S;
-exports.PageTitle = _sfc_main$K;
+exports.NavBar = _sfc_main$V;
+exports.PageTitle = _sfc_main$N;
 exports.Password = Password;
 exports.PasswordInput = PasswordInput;
-exports.PersonPreview = _sfc_main$D;
+exports.PersonPreview = _sfc_main$G;
 exports.PersonPreviewInput = PersonPreviewInput;
-exports.PlainInputField = _sfc_main$p;
+exports.PlainInputField = _sfc_main$s;
 exports.PlainText = PlainText;
-exports.RTXEditor = _sfc_main$U;
+exports.RTXEditor = _sfc_main$X;
 exports.RadioPillsInput = RadioPillsInput;
 exports.ReadOnlyInput = ReadOnlyInput;
 exports.RichTextEditor = RichTextEditor;
@@ -38468,12 +38699,12 @@ exports.TableField = TableField;
 exports.TableSchema = TableSchema;
 exports.TextArea = TextArea;
 exports.TextInput = TextInput;
-exports.TextVariableExamples = _sfc_main$s;
+exports.TextVariableExamples = _sfc_main$v;
 exports.TextVariablesInput = TextVariablesInput;
 exports.ToggleSwitchInput = ToggleSwitchInput;
 exports.TopBar = TopBar;
 exports.bagelInjectionKey = bagelInjectionKey;
-exports.computeFields = computeFields;
+exports.bindAttrs = bindAttrs;
 exports.copyText = copyText;
 exports.debounce = debounce;
 exports.formatString = formatString;