@bagelink/vue 0.0.198 → 0.0.204

package/dist/index.mjs

@@ -2298,7 +2298,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 h(
             renderComponent,
             {
@@ -2339,26 +2339,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)
@@ -2374,8 +2354,16 @@ function useEscape(event, closeModel) {
     closeModel();
   }
 }
-const _hoisted_1$$ = { ref: "el" };
-const _sfc_main$V = /* @__PURE__ */ 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__ */ defineComponent({
   __name: "LangText",
   props: {
     input: {}
@@ -2383,7 +2371,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment$1, null, [
-        createElementVNode("span", _hoisted_1$$, null, 512),
+        createElementVNode("span", _hoisted_1$11, null, 512),
         createTextVNode(" " + toDisplayString(_ctx.input), 1)
       ], 64);
     };
@@ -14496,8 +14484,8 @@ const marks = {
   }
 };
 const schema = new Schema({ nodes, marks });
-const _hoisted_1$_ = ["id"];
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _hoisted_1$10 = ["id"];
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "RTXEditor",
   props: {
     elementId: { default: Math.random().toString(36).substr(2, 9) },
@@ -14574,11 +14562,11 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
         onClick: focusEditor,
         id: `canvas-${_ctx.elementId}`,
         onKeydown: _cache[0] || (_cache[0] = withKeys(withModifiers(($event) => _ctx.$emit("keydown.meta.enter"), ["meta"]), ["enter"]))
-      }, null, 40, _hoisted_1$_);
+      }, null, 40, _hoisted_1$10);
     };
   }
 });
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "MaterialIcon",
   props: {
     icon: {},
@@ -14593,17 +14581,17 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$Z = /* @__PURE__ */ createElementVNode("div", { class: "icon-font top-arrow" }, "chevron_right", -1);
-const _hoisted_2$R = [
-  _hoisted_1$Z
+const _hoisted_1$$ = /* @__PURE__ */ 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__ */ defineComponent({
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "NavBar",
   props: {
     links: {},
@@ -14627,10 +14615,10 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
           role: "button",
           "aria-label": "Toggle Navigation",
           tabindex: "0"
-        }, _hoisted_2$R, 32),
-        createElementVNode("div", _hoisted_3$J, [
-          createElementVNode("div", _hoisted_4$r, [
-            createElementVNode("div", _hoisted_5$m, [
+        }, _hoisted_2$S, 32),
+        createElementVNode("div", _hoisted_3$K, [
+          createElementVNode("div", _hoisted_4$t, [
+            createElementVNode("div", _hoisted_5$n, [
               (openBlock(true), createElementBlock(Fragment$1, null, renderList((_a2 = _ctx.links) == null ? void 0 : _a2.call(_ctx), (link) => {
                 return openBlock(), createBlock(_component_RouterLink, {
                   class: "nav-button",
@@ -14638,7 +14626,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
                   key: link.label
                 }, {
                   default: withCtx(() => [
-                    createElementVNode("div", _hoisted_6$h, toDisplayString(link.materialIcon), 1),
+                    createElementVNode("div", _hoisted_6$i, toDisplayString(link.materialIcon), 1),
                     createElementVNode("div", _hoisted_7$d, toDisplayString(link.localized ? link.localized : link.label), 1)
                   ]),
                   _: 2
@@ -14654,15 +14642,15 @@ const _sfc_main$S = /* @__PURE__ */ 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__ */ defineComponent({
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "Btn",
   props: {
     disabled: { type: Boolean, default: false },
@@ -14683,8 +14671,8 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "720e4596": computedBackgroundColor.value,
-      "31e8e060": cumputedTextColor.value
+      "0bd3bef7": computedBackgroundColor.value,
+      "1b1b6b12": cumputedTextColor.value
     }));
     const slots = useSlots();
     const props2 = __props;
@@ -14697,13 +14685,22 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
         color: props2.flat ? "var(--bgl-black)" : "var(--bgl-white)"
       })
     );
+    function getThemeColors(theme) {
+      return {
+        ...computedDefaultColors.value,
+        ...theme,
+        color: props2.flat ? theme.backgroundColor : theme.color
+      };
+    }
     const themes = {
-      red: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-red)" },
-      black: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-black)" },
-      green: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-green)", color: "var(--bgl-white)" },
-      gray: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-black)" },
-      light: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-primary-light)", color: "var(--bgl-primary)" },
-      "gray-light": { ...computedDefaultColors.value, backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-gray)" }
+      red: getThemeColors({ backgroundColor: "var(--bgl-red)" }),
+      black: getThemeColors({ backgroundColor: "var(--bgl-black)" }),
+      green: getThemeColors({ backgroundColor: "var(--bgl-green)", 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)" }),
+      blue: getThemeColors({})
     };
     const cumputedTextColor = computed(
       () => {
@@ -14733,8 +14730,8 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
         })
       }, {
         default: withCtx(() => [
-          _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_1$Y)) : (openBlock(), createElementBlock("div", _hoisted_2$Q, [
-            _ctx.icon ? (openBlock(), createBlock(unref(_sfc_main$T), {
+          _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_1$_)) : (openBlock(), createElementBlock("div", _hoisted_2$R, [
+            _ctx.icon ? (openBlock(), createBlock(unref(_sfc_main$W), {
               key: 0,
               icon: _ctx.icon
             }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -14742,7 +14739,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
             !unref(slots)["default"] && _ctx.value ? (openBlock(), createElementBlock(Fragment$1, { key: 1 }, [
               createTextVNode(toDisplayString(_ctx.value), 1)
             ], 64)) : createCommentVNode("", true),
-            props2["icon.end"] ? (openBlock(), createBlock(unref(_sfc_main$T), {
+            props2["icon.end"] ? (openBlock(), createBlock(unref(_sfc_main$W), {
               key: 2,
               icon: props2["icon.end"]
             }, null, 8, ["icon"])) : createCommentVNode("", true)
@@ -14760,11 +14757,11 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-19291b41"]]);
-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__ */ 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__ */ defineComponent({
   __name: "Modal",
   props: {
     side: { type: Boolean },
@@ -14810,7 +14807,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
           onClick: _cache[0] || (_cache[0] = withModifiers(() => {
           }, ["stop"]))
         }, [
-          createElementVNode("header", _hoisted_1$X, [
+          createElementVNode("header", _hoisted_1$Z, [
             renderSlot(_ctx.$slots, "toolbar"),
             createVNode(unref(Btn), {
               style: normalizeStyle({ float: _ctx.side ? "left" : "right" }),
@@ -14818,10 +14815,10 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
               icon: "close",
               onClick: closeModal
             }, null, 8, ["style"]),
-            createElementVNode("h3", _hoisted_2$P, toDisplayString(_ctx.title), 1)
+            createElementVNode("h3", _hoisted_2$Q, toDisplayString(_ctx.title), 1)
           ]),
           renderSlot(_ctx.$slots, "default"),
-          createElementVNode("footer", _hoisted_3$I, [
+          createElementVNode("footer", _hoisted_3$J, [
             (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.actions, (action, i3) => {
               return openBlock(), createBlock(unref(Btn), mergeProps({
                 key: i3,
@@ -14836,10 +14833,10 @@ const _sfc_main$Q = /* @__PURE__ */ 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__ */ 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__ */ defineComponent({
   __name: "DropDown",
   props: {
     modelValue: String,
@@ -14865,31 +14862,31 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["dropdown", { opendrop: unref(isOpen) }]),
         onClick: toggleDropdown
       }, [
-        createElementVNode("div", _hoisted_1$W, [
+        createElementVNode("div", _hoisted_1$Y, [
           createTextVNode(toDisplayString(unref(selectedOption) || __props.placeholder) + " ", 1),
-          createVNode(unref(_sfc_main$T), { icon: "keyboard_arrow_down" })
+          createVNode(unref(_sfc_main$W), { icon: "keyboard_arrow_down" })
         ]),
-        createElementVNode("div", _hoisted_2$O, [
+        createElementVNode("div", _hoisted_2$P, [
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(__props.options, (option2, index2) => {
             return openBlock(), createElementBlock("p", {
               key: index2,
               onClick: withModifiers(($event) => selectOption(option2, index2), ["stop"])
-            }, toDisplayString(option2), 9, _hoisted_3$H);
+            }, 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__ */ 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__ */ defineComponent({
   __name: "ListView",
   props: {
     enableAdd: { type: Boolean },
@@ -14905,17 +14902,17 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
       debounce(() => emit2("debounce", searchTerm.value));
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$V, [
-        createElementVNode("div", _hoisted_2$N, [
-          _ctx.enableSearch ? (openBlock(), createElementBlock("div", _hoisted_3$G, [
+      return openBlock(), createElementBlock("div", _hoisted_1$X, [
+        createElementVNode("div", _hoisted_2$O, [
+          _ctx.enableSearch ? (openBlock(), createElementBlock("div", _hoisted_3$H, [
             withDirectives(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), [
               [vModelText, searchTerm.value]
             ]),
-            createVNode(unref(_sfc_main$T), {
+            createVNode(unref(_sfc_main$W), {
               class: "txtgray",
               icon: "search"
             })
@@ -14926,16 +14923,16 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
             onClick: _cache[2] || (_cache[2] = ($event) => emit2("add"))
           })) : createCommentVNode("", true)
         ]),
-        createElementVNode("div", _hoisted_5$l, [
+        createElementVNode("div", _hoisted_5$m, [
           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__ */ defineComponent({
+const _hoisted_1$W = { class: "txt16 no-margin" };
+const _hoisted_2$N = { class: "txt14 no-margin txtgray" };
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "ListItem",
   props: {
     to: {}
@@ -14947,10 +14944,10 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
         class: "list-item ellipsis"
       }, {
         default: withCtx(() => [
-          createElementVNode("p", _hoisted_1$U, [
+          createElementVNode("p", _hoisted_1$W, [
             renderSlot(_ctx.$slots, "default")
           ]),
-          createElementVNode("p", _hoisted_2$M, [
+          createElementVNode("p", _hoisted_2$N, [
             renderSlot(_ctx.$slots, "subtitle")
           ])
         ]),
@@ -14959,11 +14956,11 @@ const _sfc_main$N = /* @__PURE__ */ 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__ */ 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__ */ defineComponent({
   __name: "TabbedLayout",
   props: {
     title: {},
@@ -14991,10 +14988,10 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
       activeTab.value = firstTab;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$T, [
-        createElementVNode("div", _hoisted_2$L, [
+      return openBlock(), createElementBlock("div", _hoisted_1$V, [
+        createElementVNode("div", _hoisted_2$M, [
           renderSlot(_ctx.$slots, "top-section", {}, void 0, true),
-          createElementVNode("div", _hoisted_3$F, [
+          createElementVNode("div", _hoisted_3$G, [
             (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.tabs, (tab) => {
               return openBlock(), createElementBlock("div", {
                 class: normalizeClass([{
@@ -15002,7 +14999,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                 }, "tab"]),
                 key: tab,
                 onClick: ($event) => changeTab(tab)
-              }, toDisplayString(tab), 11, _hoisted_4$p);
+              }, toDisplayString(tab), 11, _hoisted_4$r);
             }), 128))
           ])
         ]),
@@ -15018,16 +15015,16 @@ const _sfc_main$M = /* @__PURE__ */ 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__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "Comments",
   props: {
     ref_table: {},
@@ -15070,8 +15067,8 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       void fetchData();
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$S, [
-        createElementVNode("div", _hoisted_2$K, [
+      return openBlock(), createElementBlock("div", _hoisted_1$U, [
+        createElementVNode("div", _hoisted_2$L, [
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(unref(comments), (comment) => {
             var _a2, _b, _c;
             return openBlock(), createElementBlock("div", {
@@ -15081,23 +15078,23 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
               }, "comment"]),
               key: comment.id
             }, [
-              createElementVNode("div", _hoisted_3$E, [
-                createElementVNode("div", _hoisted_4$o, toDisplayString(comment.sender.first_name) + " " + toDisplayString(comment.sender.last_name), 1),
-                createElementVNode("div", _hoisted_5$k, toDisplayString(comment.updated_at.split("T")[0]), 1),
-                createElementVNode("div", _hoisted_6$g, [
-                  createVNode(unref(_sfc_main$T), {
+              createElementVNode("div", _hoisted_3$F, [
+                createElementVNode("div", _hoisted_4$q, toDisplayString(comment.sender.first_name) + " " + toDisplayString(comment.sender.last_name), 1),
+                createElementVNode("div", _hoisted_5$l, toDisplayString(comment.updated_at.split("T")[0]), 1),
+                createElementVNode("div", _hoisted_6$h, [
+                  createVNode(unref(_sfc_main$W), {
                     size: 1,
                     class: "edit",
                     icon: "edit",
                     onClick: ($event) => isRef(editComment) ? editComment.value = comment : editComment = comment
                   }, null, 8, ["onClick"]),
-                  createVNode(unref(_sfc_main$T), {
+                  createVNode(unref(_sfc_main$W), {
                     size: 1.2,
                     class: "delete",
                     icon: "delete",
                     onClick: ($event) => deleteComment(comment.id)
                   }, null, 8, ["onClick"]),
-                  createVNode(unref(_sfc_main$T), {
+                  createVNode(unref(_sfc_main$W), {
                     size: 1.2,
                     class: "save",
                     icon: "save",
@@ -15105,7 +15102,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
                   })
                 ])
               ]),
-              unref(editComment) !== null && ((_c = unref(editComment)) == null ? void 0 : _c.id) === comment.id ? (openBlock(), createBlock(unref(_sfc_main$U), {
+              unref(editComment) !== null && ((_c = unref(editComment)) == null ? void 0 : _c.id) === comment.id ? (openBlock(), createBlock(unref(_sfc_main$X), {
                 key: 0,
                 modelValue: unref(editComment).body_html,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(editComment).body_html = $event),
@@ -15119,7 +15116,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         createElementVNode("div", _hoisted_8$6, [
-          createVNode(unref(_sfc_main$U), {
+          createVNode(unref(_sfc_main$X), {
             class: "comment-input",
             modelValue: unref(bodyHtml),
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(bodyHtml) ? bodyHtml.value = $event : bodyHtml = $event),
@@ -15139,10 +15136,10 @@ const _sfc_main$L = /* @__PURE__ */ 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__ */ 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__ */ defineComponent({
   __name: "PageTitle",
   props: {
     value: {
@@ -15152,8 +15149,8 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$R, [
-        createElementVNode("h1", _hoisted_2$J, [
+      return openBlock(), createElementBlock("div", _hoisted_1$T, [
+        createElementVNode("h1", _hoisted_2$K, [
           renderSlot(_ctx.$slots, "default"),
           createTextVNode(" " + toDisplayString(__props.value), 1)
         ])
@@ -15161,9 +15158,9 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$Q = { class: "tool-bar" };
-const _hoisted_2$I = { class: "modal-title" };
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _hoisted_1$S = { class: "tool-bar" };
+const _hoisted_2$J = { class: "modal-title" };
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "ModalForm",
   props: {
     side: { type: Boolean },
@@ -15236,7 +15233,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
           onClick: _cache[0] || (_cache[0] = withModifiers(() => {
           }, ["stop"]))
         }, [
-          createElementVNode("header", _hoisted_1$Q, [
+          createElementVNode("header", _hoisted_1$S, [
             renderSlot(_ctx.$slots, "toolbar", {}, void 0, true),
             createVNode(unref(Btn), {
               style: normalizeStyle({ float: _ctx.side ? "left" : "right" }),
@@ -15244,9 +15241,9 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
               icon: "close",
               onClick: closeModal
             }, null, 8, ["style"]),
-            createElementVNode("h3", _hoisted_2$I, toDisplayString(_ctx.title), 1)
+            createElementVNode("h3", _hoisted_2$J, toDisplayString(_ctx.title), 1)
           ]),
-          createVNode(unref(_sfc_main$I), {
+          createVNode(unref(_sfc_main$L), {
             onDelete: _ctx.onDelete ? runDelete : void 0,
             modelValue: _ctx.modelValue,
             "onUpdate:modelValue": handleEmit,
@@ -15258,8 +15255,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-1799b7d0"]]);
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-1799b7d0"]]);
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "FormSchema",
   props: {
     modelValue: {},
@@ -15332,14 +15329,14 @@ const _sfc_main$I = /* @__PURE__ */ 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__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "TableSchema",
   props: {
     data: {},
@@ -15354,7 +15351,7 @@ const _sfc_main$H = /* @__PURE__ */ 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
@@ -15385,27 +15382,27 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$P, [
-        createElementVNode("table", _hoisted_2$H, [
-          createElementVNode("thead", _hoisted_3$D, [
+      return openBlock(), createElementBlock("div", _hoisted_1$R, [
+        createElementVNode("table", _hoisted_2$I, [
+          createElementVNode("thead", _hoisted_3$E, [
             (openBlock(true), createElementBlock(Fragment$1, null, renderList(columns.value, (field) => {
               return openBlock(), createElementBlock("th", {
                 class: "col",
                 key: field.id,
                 onClick: ($event) => sort2(field.id)
               }, [
-                createElementVNode("div", _hoisted_5$j, [
+                createElementVNode("div", _hoisted_5$k, [
                   createTextVNode(toDisplayString((field == null ? void 0 : field.label) || (field == null ? void 0 : field.id)) + " ", 1),
                   createElementVNode("div", {
                     class: normalizeClass(["list-arrows", { sorted: unref(sortField) === field.id }])
                   }, [
-                    createVNode(unref(_sfc_main$T), {
+                    createVNode(unref(_sfc_main$W), {
                       class: normalizeClass({ desc: unref(sortDirection) === "DESC" }),
                       icon: "keyboard_arrow_up"
                     }, null, 8, ["class"])
                   ], 2)
                 ])
-              ], 8, _hoisted_4$n);
+              ], 8, _hoisted_4$p);
             }), 128))
           ]),
           createElementVNode("tbody", {
@@ -15429,7 +15426,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
                       row,
                       field
                     }, void 0, true) : (openBlock(), createElementBlock("div", _hoisted_7$b, [
-                      (field["v-if"] ? field["v-if"](row[field.id], row) : true) ? (openBlock(), createBlock(resolveDynamicComponent(field.$el || field.$cmp || "div"), mergeProps({ key: 0 }, bindAttrs(field.attrs, row[field.id], row), {
+                      (field["v-if"] ? field["v-if"](row[field.id], row) : true) ? (openBlock(), createBlock(resolveDynamicComponent(field.$el || field.$cmp || "div"), 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;
@@ -15448,7 +15445,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
                     ]))
                   ]);
                 }), 128))
-              ], 8, _hoisted_6$f);
+              ], 8, _hoisted_6$g);
             }), 128))
           ], 2)
         ])
@@ -15456,16 +15453,16 @@ const _sfc_main$H = /* @__PURE__ */ 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 openBlock(), createElementBlock("div", _hoisted_1$O, [
+  return openBlock(), createElementBlock("div", _hoisted_1$Q, [
     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 = resolveComponent("router-view");
   return openBlock(), createBlock(_component_router_view, null, {
@@ -15487,9 +15484,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__ */ 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__ */ defineComponent({
   __name: "ContactSubmissions",
   props: {
     person_id: {
@@ -15519,7 +15516,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       void getData();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$N, [
+      return openBlock(), createElementBlock("div", _hoisted_1$P, [
         createVNode(unref(TableSchema), {
           schema: schema2,
           data: unref(data2)
@@ -15528,15 +15525,15 @@ const _sfc_main$E = /* @__PURE__ */ 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"
 };
@@ -15550,7 +15547,7 @@ const _hoisted_8$5 = {
 };
 const _hoisted_9$3 = { key: 0 };
 const _hoisted_10$3 = { key: 1 };
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "PersonPreview",
   props: {
     person: {},
@@ -15580,7 +15577,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
         (...args) => _ctx.onClick && _ctx.onClick(...args)),
         class: "person-card"
       }, [
-        !_ctx.onClick ? (openBlock(), createElementBlock("div", _hoisted_1$M, [
+        !_ctx.onClick ? (openBlock(), createElementBlock("div", _hoisted_1$O, [
           !_ctx.$route.path.match("/search") ? (openBlock(), createBlock(unref(Btn), {
             key: 0,
             round: "",
@@ -15597,13 +15594,13 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             icon: "edit"
           })
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$G, [
-          createElementVNode("p", _hoisted_3$C, toDisplayString(unref(initials)(_ctx.person.first_name, _ctx.person.last_name)), 1),
-          createElementVNode("p", _hoisted_4$m, toDisplayString(_ctx.person.first_name) + " " + toDisplayString(_ctx.person.last_name), 1)
+        createElementVNode("div", _hoisted_2$H, [
+          createElementVNode("p", _hoisted_3$D, toDisplayString(unref(initials)(_ctx.person.first_name, _ctx.person.last_name)), 1),
+          createElementVNode("p", _hoisted_4$o, toDisplayString(_ctx.person.first_name) + " " + toDisplayString(_ctx.person.last_name), 1)
         ]),
-        createElementVNode("div", _hoisted_5$i, [
-          ((_a2 = _ctx.person.phone) == null ? void 0 : _a2.length) ? (openBlock(), createElementBlock("div", _hoisted_6$e, [
-            createVNode(unref(_sfc_main$T), { icon: "phone" }),
+        createElementVNode("div", _hoisted_5$j, [
+          ((_a2 = _ctx.person.phone) == null ? void 0 : _a2.length) ? (openBlock(), createElementBlock("div", _hoisted_6$f, [
+            createVNode(unref(_sfc_main$W), { icon: "phone" }),
             (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.person.phone, (phone) => {
               return openBlock(), createElementBlock("p", {
                 key: phone.id
@@ -15611,7 +15608,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             }), 128))
           ])) : createCommentVNode("", true),
           ((_b = _ctx.person.email) == null ? void 0 : _b.length) ? (openBlock(), createElementBlock("div", _hoisted_7$a, [
-            createVNode(unref(_sfc_main$T), { icon: "email" }),
+            createVNode(unref(_sfc_main$W), { icon: "email" }),
             (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.person.email, (email) => {
               return openBlock(), createElementBlock("p", {
                 key: email.id
@@ -15619,7 +15616,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             }), 128))
           ])) : createCommentVNode("", true),
           _ctx.person.date_of_birth || _ctx.person.gender ? (openBlock(), createElementBlock("div", _hoisted_8$5, [
-            createVNode(unref(_sfc_main$T), { icon: "badge" }),
+            createVNode(unref(_sfc_main$W), { icon: "badge" }),
             _ctx.person.date_of_birth ? (openBlock(), createElementBlock("p", _hoisted_9$3, toDisplayString(_ctx.person.date_of_birth), 1)) : createCommentVNode("", true),
             _ctx.person.gender ? (openBlock(), createElementBlock("p", _hoisted_10$3, toDisplayString(_ctx.person.gender), 1)) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
@@ -15628,23 +15625,23 @@ const _sfc_main$D = /* @__PURE__ */ 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__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "DataPreview",
   props: {
     data: {},
@@ -15656,7 +15653,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     const keysToIgnore = ["id", "person_id", "person", "created_at", "updated_at"];
     const props2 = __props;
     const itemData = 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
@@ -15666,14 +15663,14 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       var _a2;
-      return _ctx.data ? (openBlock(), createElementBlock("div", _hoisted_1$L, [
-        _ctx.title ? (openBlock(), createElementBlock("h3", _hoisted_2$F, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
+      return _ctx.data ? (openBlock(), createElementBlock("div", _hoisted_1$N, [
+        _ctx.title ? (openBlock(), createElementBlock("h3", _hoisted_2$G, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
         (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.schema || [], (field) => {
           return openBlock(), createElementBlock(Fragment$1, {
             key: field.id
           }, [
-            (field["v-if"] ? field["v-if"](itemData.value[field.id], itemData.value) : true) ? (openBlock(), createElementBlock("div", _hoisted_3$B, [
-              createElementVNode("div", _hoisted_4$l, toDisplayString((field == null ? void 0 : field.label) || unref(keyToLabel)(field.id)), 1),
+            (field["v-if"] ? field["v-if"](itemData.value[field.id], itemData.value) : true) ? (openBlock(), createElementBlock("div", _hoisted_3$C, [
+              createElementVNode("div", _hoisted_4$n, toDisplayString((field == null ? void 0 : field.label) || unref(keyToLabel)(field.id)), 1),
               (openBlock(), createBlock(resolveDynamicComponent(field.$el || "div"), mergeProps({
                 class: "vlue",
                 modelValue: itemData.value[field.id],
@@ -15681,7 +15678,7 @@ const _sfc_main$C = /* @__PURE__ */ 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: withCtx(() => {
                   var _a3;
                   return [
@@ -15693,7 +15690,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("", true)
           ], 64);
         }), 128)),
-        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (openBlock(), createElementBlock("div", _hoisted_5$h, [
+        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (openBlock(), createElementBlock("div", _hoisted_5$i, [
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(Object.entries(itemData.value).filter(
             ([key]) => !keysToIgnore.includes(key)
           ), ([key, value]) => {
@@ -15701,7 +15698,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
               class: "data-row",
               key
             }, [
-              createElementVNode("div", _hoisted_6$d, toDisplayString(unref(i18nT)(unref(keyToLabel)(key))), 1),
+              createElementVNode("div", _hoisted_6$e, toDisplayString(unref(i18nT)(unref(keyToLabel)(key))), 1),
               createElementVNode("div", _hoisted_7$9, toDisplayString(value), 1)
             ]);
           }), 128))
@@ -15711,23 +15708,23 @@ const _sfc_main$C = /* @__PURE__ */ 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) => (pushScopeId("data-v-fe5af582"), n = n(), 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__ */ createElementVNode("div", { class: "red-bar" }, null, -1));
 const _hoisted_8$4 = { class: "bar-lines" };
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "BarChart",
   props: {
     title: {},
@@ -15779,14 +15776,14 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     const percent = (val) => val / maxValue.value * 100;
     const floodPercent = computed(() => `${props2.flood}%`);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$K, [
+      return openBlock(), createElementBlock("div", _hoisted_1$M, [
         (openBlock(true), createElementBlock(Fragment$1, null, renderList(dataArray.value, (item, i3) => {
           return openBlock(), createElementBlock("div", {
             class: "graph-wrap",
             key: i3
           }, [
-            item.group ? (openBlock(), createElementBlock("div", _hoisted_2$E, [
-              createElementVNode("p", _hoisted_3$A, toDisplayString(item.group), 1),
+            item.group ? (openBlock(), createElementBlock("div", _hoisted_2$F, [
+              createElementVNode("p", _hoisted_3$B, toDisplayString(item.group), 1),
               (openBlock(true), createElementBlock(Fragment$1, null, renderList((item == null ? void 0 : item.data) || [], (nested, i22) => {
                 return openBlock(), createElementBlock("div", {
                   key: i22,
@@ -15805,7 +15802,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
                   }, null, 4)) : createCommentVNode("", true)
                 ]);
               }), 128))
-            ])) : (openBlock(), createElementBlock("div", _hoisted_4$k, [
+            ])) : (openBlock(), createElementBlock("div", _hoisted_4$m, [
               createElementVNode("div", {
                 class: "bar",
                 style: normalizeStyle({ height: loaded.value ? `${percent(item.value)}%` : "0" })
@@ -15815,11 +15812,11 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
                 class: "bar compare",
                 style: normalizeStyle({ height: loaded.value ? `${percent(item.compareValue)}%` : "0" })
               }, null, 4)) : createCommentVNode("", true),
-              createElementVNode("p", _hoisted_5$g, toDisplayString(item.title), 1)
+              createElementVNode("p", _hoisted_5$h, toDisplayString(item.title), 1)
             ]))
           ]);
         }), 128)),
-        createElementVNode("p", _hoisted_6$c, toDisplayString(_ctx.title), 1),
+        createElementVNode("p", _hoisted_6$d, toDisplayString(_ctx.title), 1),
         _hoisted_7$8,
         createElementVNode("div", _hoisted_8$4, [
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(marks2.value, (mark) => {
@@ -15830,7 +15827,7 @@ const _sfc_main$B = /* @__PURE__ */ 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",
@@ -17086,8 +17083,8 @@ function createInput(schemaOrComponent, definitionOptions = {}) {
   }
   return definition;
 }
-const _hoisted_1$J = { class: "primary-checkbox" };
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _hoisted_1$L = { class: "primary-checkbox" };
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "Checkbox",
   props: {
     modelValue: Boolean
@@ -17115,7 +17112,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", _hoisted_1$J, [
+      return openBlock(), createElementBlock("label", _hoisted_1$L, [
         withDirectives(createElementVNode("input", {
           type: "checkbox",
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(val) ? val.value = $event : val = $event)
@@ -17123,24 +17120,24 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
           [vModelCheckbox, unref(val)]
         ]),
         createElementVNode("span", null, [
-          createVNode(unref(_sfc_main$T), { icon: "check" })
+          createVNode(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__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "ContactArrayFormKit",
   props: {
     context: {}
@@ -17193,16 +17190,16 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$I, [
-        createElementVNode("div", _hoisted_2$D, [
+      return openBlock(), createElementBlock("div", _hoisted_1$K, [
+        createElementVNode("div", _hoisted_2$E, [
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(unref(val), (contact, i3) => {
             var _a2, _b, _c, _d, _e2, _f;
             return openBlock(), createElementBlock("div", {
               class: "bglform-contact mb-2",
               key: i3
             }, [
-              unref(deleteCandidate) === i3 ? (openBlock(), createElementBlock("div", _hoisted_3$z, [
-                createElementVNode("p", _hoisted_4$j, toDisplayString((_a2 = formPlaceholders.value) == null ? void 0 : _a2.sure), 1),
+              unref(deleteCandidate) === i3 ? (openBlock(), createElementBlock("div", _hoisted_3$A, [
+                createElementVNode("p", _hoisted_4$l, toDisplayString((_a2 = formPlaceholders.value) == null ? void 0 : _a2.sure), 1),
                 createVNode(unref(Btn), {
                   thin: "",
                   color: "red",
@@ -17238,7 +17235,7 @@ const _sfc_main$z = /* @__PURE__ */ 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), [
                 [vModelText, contact.label]
               ]),
               ((_c = _ctx.context) == null ? void 0 : _c.id) === "email" ? withDirectives((openBlock(), createElementBlock("input", {
@@ -17246,7 +17243,7 @@ const _sfc_main$z = /* @__PURE__ */ 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)), [
                 [vModelText, contact.email]
               ]) : createCommentVNode("", true),
               ((_e2 = _ctx.context) == null ? void 0 : _e2.id) === "phone" ? withDirectives((openBlock(), createElementBlock("input", {
@@ -17285,23 +17282,23 @@ const _sfc_main$z = /* @__PURE__ */ 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__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "AddressArray",
   props: {
     context: {}
@@ -17360,16 +17357,16 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$H, [
-        createElementVNode("div", _hoisted_2$C, [
+      return openBlock(), createElementBlock("div", _hoisted_1$J, [
+        createElementVNode("div", _hoisted_2$D, [
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(unref(val), (address, i3) => {
             var _a2, _b, _c, _d, _e2, _f;
             return openBlock(), createElementBlock("div", {
               class: "bglform-contact mb-3",
               key: i3
             }, [
-              unref(deleteCandidate) === i3 ? (openBlock(), createElementBlock("div", _hoisted_3$y, [
-                createElementVNode("p", _hoisted_4$i, toDisplayString((_a2 = formPlaceholders.value) == null ? void 0 : _a2.sure), 1),
+              unref(deleteCandidate) === i3 ? (openBlock(), createElementBlock("div", _hoisted_3$z, [
+                createElementVNode("p", _hoisted_4$k, toDisplayString((_a2 = formPlaceholders.value) == null ? void 0 : _a2.sure), 1),
                 createVNode(unref(Btn), {
                   thin: "",
                   color: "red",
@@ -17405,10 +17402,10 @@ const _sfc_main$y = /* @__PURE__ */ 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), [
                 [vModelText, address.label]
               ]),
-              createElementVNode("div", _hoisted_6$a, [
+              createElementVNode("div", _hoisted_6$b, [
                 withDirectives(createElementVNode("input", {
                   "onUpdate:modelValue": ($event) => address.street = $event,
                   placeholder: (_c = formPlaceholders.value) == null ? void 0 : _c.street,
@@ -17469,16 +17466,16 @@ const _sfc_main$y = /* @__PURE__ */ 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"];
@@ -17490,7 +17487,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__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "BankDetailsArray",
   props: {
     context: {}
@@ -17543,16 +17540,16 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$G, [
-        createElementVNode("div", _hoisted_2$B, [
+      return openBlock(), createElementBlock("div", _hoisted_1$I, [
+        createElementVNode("div", _hoisted_2$C, [
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(unref(val), (bank_account, i3) => {
             var _a2, _b, _c, _d, _e2, _f, _g, _h;
             return openBlock(), createElementBlock("div", {
               class: "bglform-contact mb-3",
               key: i3
             }, [
-              unref(deleteCandidate) === i3 ? (openBlock(), createElementBlock("div", _hoisted_3$x, [
-                createElementVNode("p", _hoisted_4$h, toDisplayString((_a2 = formPlaceholders.value) == null ? void 0 : _a2.sure), 1),
+              unref(deleteCandidate) === i3 ? (openBlock(), createElementBlock("div", _hoisted_3$y, [
+                createElementVNode("p", _hoisted_4$j, toDisplayString((_a2 = formPlaceholders.value) == null ? void 0 : _a2.sure), 1),
                 createVNode(unref(Btn), {
                   thin: "",
                   color: "red",
@@ -17588,10 +17585,10 @@ const _sfc_main$x = /* @__PURE__ */ 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), [
                 [vModelText, bank_account.label]
               ]),
-              createElementVNode("div", _hoisted_6$9, [
+              createElementVNode("div", _hoisted_6$a, [
                 withDirectives(createElementVNode("input", {
                   "onUpdate:modelValue": ($event) => bank_account.bank_name = $event,
                   placeholder: (_c = formPlaceholders.value) == null ? void 0 : _c.bankName,
@@ -17686,9 +17683,9 @@ const _sfc_main$x = /* @__PURE__ */ 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__ */ 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__ */ defineComponent({
   __name: "MiscFields",
   props: {
     context: {},
@@ -17705,7 +17702,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       console.log(fields.value);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$F, [
+      return openBlock(), createElementBlock("div", _hoisted_1$H, [
         (openBlock(true), createElementBlock(Fragment$1, null, renderList(fields.value.filter(
           (field) => {
             var _a2;
@@ -17733,13 +17730,13 @@ const _sfc_main$w = /* @__PURE__ */ 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) => (pushScopeId("data-v-d0543d4b"), n = n(), 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__ */ createElementVNode("span", { class: "slider round" }, null, -1));
-const _sfc_main$v = /* @__PURE__ */ 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__ */ createElementVNode("span", { class: "slider round" }, null, -1));
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "Toggle",
   props: {
     context: Object
@@ -17763,7 +17760,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["bagel-input checkbox", { check: (_a2 = __props.context) == null ? void 0 : _a2.attrs.isCheckbox }]),
         title: (_b = __props.context) == null ? void 0 : _b.help
       }, [
-        createElementVNode("label", _hoisted_2$A, [
+        createElementVNode("label", _hoisted_2$B, [
           withDirectives(createElementVNode("input", {
             onChange: _cache[0] || (_cache[0] = () => {
               var _a3;
@@ -17772,31 +17769,31 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             type: "checkbox",
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => 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), [
             [vModelCheckbox, 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__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "FileUploader",
   props: {
     context: {},
@@ -17934,7 +17931,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         void addFiles(filesToAdd);
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$D, [
+      return openBlock(), createElementBlock("div", _hoisted_1$F, [
         createElementVNode("div", {
           ref_key: "dropZoneEl",
           ref: dropZoneEl,
@@ -17954,34 +17951,34 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }),
-          allowUpload.value ? (openBlock(), createElementBlock("div", _hoisted_2$z, [
+          allowUpload.value ? (openBlock(), createElementBlock("div", _hoisted_2$A, [
             createElementVNode("p", null, [
               createTextVNode(toDisplayString(computedDragDropLabel.value) + " ", 1),
               createElementVNode("span", null, toDisplayString(computedDrowseLabel.value), 1)
             ])
           ])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_3$v, [
+          createElementVNode("div", _hoisted_3$w, [
             (openBlock(true), createElementBlock(Fragment$1, null, renderList(files.value, (item, index2) => {
               return openBlock(), createElementBlock("div", {
                 class: normalizeClass({ uploading: item.uploading }),
                 key: index2
               }, [
-                createElementVNode("div", _hoisted_4$f, [
+                createElementVNode("div", _hoisted_4$h, [
                   isImg(item) ? (openBlock(), createElementBlock("img", {
                     key: 0,
                     width: "40",
                     src: item.dataUrl,
                     alt: item.name,
                     style: { "margin-inline-end": "10px" }
-                  }, null, 8, _hoisted_5$c)) : createCommentVNode("", true),
+                  }, null, 8, _hoisted_5$d)) : createCommentVNode("", true),
                   createElementVNode("p", null, toDisplayString(item.name), 1),
-                  createElementVNode("div", _hoisted_6$8, [
+                  createElementVNode("div", _hoisted_6$9, [
                     createElementVNode("div", {
                       class: normalizeClass(["pie", { complete: item.progress === 100 }]),
                       style: normalizeStyle([`--p:${item.progress}`, { "--b": "2px" }])
                     }, [
                       item.progress < 100 ? (openBlock(), createElementBlock("span", _hoisted_7$4, toDisplayString(`${item.progress.toFixed(0)}`), 1)) : createCommentVNode("", true),
-                      createVNode(unref(_sfc_main$T), {
+                      createVNode(unref(_sfc_main$W), {
                         class: "success",
                         icon: "check"
                       })
@@ -18011,15 +18008,15 @@ const _sfc_main$u = /* @__PURE__ */ 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"
 };
@@ -18033,7 +18030,7 @@ const _hoisted_8 = {
 };
 const _hoisted_9 = { key: 0 };
 const _hoisted_10 = { key: 1 };
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "PersonPreviewFormkit",
   props: {
     context: {},
@@ -18064,7 +18061,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         (...args) => _ctx.onClick && _ctx.onClick(...args)),
         class: "person-card"
       }, [
-        !_ctx.onClick ? (openBlock(), createElementBlock("div", _hoisted_1$C, [
+        !_ctx.onClick ? (openBlock(), createElementBlock("div", _hoisted_1$E, [
           !_ctx.$route.path.match("/search") ? (openBlock(), createBlock(unref(Btn), {
             key: 0,
             onClick: unref(hideModal),
@@ -18082,13 +18079,13 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             icon: "edit"
           })
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$y, [
-          createElementVNode("p", _hoisted_3$u, toDisplayString(unref(initials)(person.value.first_name, person.value.last_name)), 1),
-          createElementVNode("p", _hoisted_4$e, toDisplayString(person.value.first_name) + " " + toDisplayString(person.value.last_name), 1)
+        createElementVNode("div", _hoisted_2$z, [
+          createElementVNode("p", _hoisted_3$v, toDisplayString(unref(initials)(person.value.first_name, person.value.last_name)), 1),
+          createElementVNode("p", _hoisted_4$g, toDisplayString(person.value.first_name) + " " + toDisplayString(person.value.last_name), 1)
         ]),
-        createElementVNode("div", _hoisted_5$b, [
-          ((_a2 = person.value.phone) == null ? void 0 : _a2.length) ? (openBlock(), createElementBlock("div", _hoisted_6$7, [
-            createVNode(unref(_sfc_main$T), { icon: "phone" }),
+        createElementVNode("div", _hoisted_5$c, [
+          ((_a2 = person.value.phone) == null ? void 0 : _a2.length) ? (openBlock(), createElementBlock("div", _hoisted_6$8, [
+            createVNode(unref(_sfc_main$W), { icon: "phone" }),
             (openBlock(true), createElementBlock(Fragment$1, null, renderList(person.value.phone, (phone) => {
               return openBlock(), createElementBlock("p", {
                 key: phone.id
@@ -18096,7 +18093,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             }), 128))
           ])) : createCommentVNode("", true),
           ((_b = person.value.email) == null ? void 0 : _b.length) ? (openBlock(), createElementBlock("div", _hoisted_7$3, [
-            createVNode(unref(_sfc_main$T), { icon: "email" }),
+            createVNode(unref(_sfc_main$W), { icon: "email" }),
             (openBlock(true), createElementBlock(Fragment$1, null, renderList(person.value.email, (email) => {
               return openBlock(), createElementBlock("p", {
                 key: email.id
@@ -18104,7 +18101,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             }), 128))
           ])) : createCommentVNode("", true),
           person.value.date_of_birth || person.value.gender ? (openBlock(), createElementBlock("div", _hoisted_8, [
-            createVNode(unref(_sfc_main$T), { icon: "badge" }),
+            createVNode(unref(_sfc_main$W), { icon: "badge" }),
             person.value.date_of_birth ? (openBlock(), createElementBlock("p", _hoisted_9, toDisplayString(person.value.date_of_birth), 1)) : createCommentVNode("", true),
             person.value.gender ? (openBlock(), createElementBlock("p", _hoisted_10, toDisplayString(person.value.gender), 1)) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
@@ -18113,7 +18110,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "TextVariableExamples",
   props: {
     context: Object
@@ -18205,14 +18202,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__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "ItemRef",
   props: {
     modelValue: {},
@@ -18246,15 +18243,15 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         }, {
           default: withCtx(() => [
             createTextVNode(toDisplayString(content.value) + " ", 1),
-            createVNode(unref(_sfc_main$T), { icon: "arrow_forward" })
+            createVNode(unref(_sfc_main$W), { icon: "arrow_forward" })
           ]),
           _: 1
-        })) : (openBlock(), createElementBlock("span", _hoisted_1$B, toDisplayString(content.value), 1))
+        })) : (openBlock(), createElementBlock("span", _hoisted_1$D, toDisplayString(content.value), 1))
       ]);
     };
   }
 });
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "MaterialIcon",
   props: {
     icon: {},
@@ -18269,13 +18266,13 @@ const _sfc_main$q = /* @__PURE__ */ 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__ */ 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__ */ defineComponent({
   __name: "PlainInputField",
   props: {
     type: {},
@@ -18305,14 +18302,14 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$A, [
+      return openBlock(), createElementBlock("div", _hoisted_1$C, [
         createElementVNode("label", {
           for: unref(formatString)(_ctx.name, "pascal")
         }, [
-          createVNode(_sfc_main$V, {
+          createVNode(_sfc_main$Y, {
             input: unref(formatString)(_ctx.name, "titleCase")
           }, null, 8, ["input"])
-        ], 8, _hoisted_2$x),
+        ], 8, _hoisted_2$y),
         _ctx.type === "checkbox" ? (openBlock(), createElementBlock("input", {
           key: 0,
           ref_key: "el",
@@ -18321,7 +18318,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           class: "ctl",
           type: "checkbox",
           onChange: handleCheck
-        }, null, 40, _hoisted_3$t)) : _ctx.type === "number" ? (openBlock(), createElementBlock("input", {
+        }, null, 40, _hoisted_3$u)) : _ctx.type === "number" ? (openBlock(), createElementBlock("input", {
           key: 1,
           ref_key: "el",
           ref: el2,
@@ -18330,7 +18327,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           value: _ctx.modelValue,
           class: "ctl",
           onInput: handleInput
-        }, null, 40, _hoisted_4$d)) : _ctx.type === "text" ? (openBlock(), createElementBlock("input", {
+        }, null, 40, _hoisted_4$f)) : _ctx.type === "text" ? (openBlock(), createElementBlock("input", {
           key: 2,
           ref_key: "el",
           ref: el2,
@@ -18339,7 +18336,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           value: _ctx.modelValue,
           class: "ctl",
           onInput: handleInput
-        }, null, 40, _hoisted_5$a)) : _ctx.type === "textarea" ? (openBlock(), createElementBlock("textarea", {
+        }, null, 40, _hoisted_5$b)) : _ctx.type === "textarea" ? (openBlock(), createElementBlock("textarea", {
           key: 3,
           ref_key: "el",
           ref: el2,
@@ -18348,21 +18345,141 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           value: _ctx.modelValue,
           class: "ctl",
           onInput: handleInput
-        }, null, 40, _hoisted_6$6)) : createCommentVNode("", true),
+        }, null, 40, _hoisted_6$7)) : createCommentVNode("", true),
         createElementVNode("div", null, [
-          createVNode(_sfc_main$V, { input: _ctx.errorMessage }, null, 8, ["input"])
+          createVNode(_sfc_main$Y, { input: _ctx.errorMessage }, null, 8, ["input"])
         ])
       ]);
     };
   }
 });
+const _hoisted_1$B = { key: 2 };
+const _sfc_main$r = /* @__PURE__ */ 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 = ref({
+      ...props2.modelValue
+    });
+    const runSubmit = () => {
+      emits("submit", data2.value);
+      clearForm();
+    };
+    const clearForm = () => data2.value = {};
+    const i18nT = (val) => val;
+    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 openBlock(), createElementBlock("form", {
+        onSubmit: withModifiers(runSubmit, ["prevent"])
+      }, [
+        (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.schema, (field, i3) => {
+          return openBlock(), createBlock(unref(_sfc_main$q), {
+            key: field.id || `${i3}p`,
+            field,
+            modelValue: unref(data2),
+            "onUpdate:modelValue": ($event) => field.id ? unref(data2)[field.id] = $event : ""
+          }, null, 8, ["field", "modelValue", "onUpdate:modelValue"]);
+        }), 128)),
+        ((_a2 = _ctx.modelValue) == null ? void 0 : _a2.id) && _ctx.onDelete ? (openBlock(), createBlock(unref(Btn), {
+          key: 0,
+          class: "del-top",
+          onClick: runDelete,
+          value: "Delete",
+          flat: "",
+          icon: "delete",
+          color: "red",
+          thin: ""
+        })) : createCommentVNode("", true),
+        !_ctx.$slots.submit && _ctx.onSubmit ? (openBlock(), createBlock(unref(Btn), {
+          key: 1,
+          value: "Submit",
+          type: "submit",
+          thin: ""
+        })) : (openBlock(), createElementBlock("div", _hoisted_1$B, [
+          renderSlot(_ctx.$slots, "submit")
+        ]))
+      ], 32);
+    };
+  }
+});
+const _sfc_main$q = /* @__PURE__ */ 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 = resolveComponent("BglField", true);
+      return openBlock(), createBlock(resolveDynamicComponent(_ctx.field.$el || "div"), mergeProps({
+        required: _ctx.field.required
+      }, 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: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.field.children, (child, ii) => {
+            return openBlock(), 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) => (pushScopeId("data-v-0dacba34"), n = n(), 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__ */ createElementVNode("span", { class: "slider round" }, null, -1));
-const _sfc_main$o = /* @__PURE__ */ 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__ */ createElementVNode("span", { class: "slider round" }, null, -1));
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "CheckInput",
   props: {
     field: {},
@@ -18395,29 +18512,29 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("label", {
           for: _ctx.field.id
-        }, toDisplayString(_ctx.field.label), 9, _hoisted_2$w),
-        createElementVNode("label", _hoisted_3$s, [
+        }, toDisplayString(_ctx.field.label), 9, _hoisted_2$x),
+        createElementVNode("label", _hoisted_3$t, [
           withDirectives(createElementVNode("input", {
             id: _ctx.field.id,
             type: "checkbox",
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputVal.value = $event),
             class: normalizeClass({ "no-edit": !_ctx.editMode })
-          }, null, 10, _hoisted_4$c), [
+          }, null, 10, _hoisted_4$e), [
             [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__ */ 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__ */ defineComponent({
   __name: "CurrencyInput",
   props: {
     field: {},
@@ -18518,26 +18635,26 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.field.description
       }, [
-        _ctx.field.label ? (openBlock(), createElementBlock("label", _hoisted_2$v, toDisplayString(_ctx.field.label), 1)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$r, [
+        _ctx.field.label ? (openBlock(), createElementBlock("label", _hoisted_2$w, toDisplayString(_ctx.field.label), 1)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_3$s, [
           createElementVNode("input", {
             value: _ctx.modelValue,
             type: "number",
             onInput: handleInput,
             placeholder: _ctx.placeholder,
             class: normalizeClass({ "no-edit": !_ctx.editMode })
-          }, null, 42, _hoisted_4$b),
-          createElementVNode("p", _hoisted_5$8, toDisplayString(((_a2 = currencies.find((c2) => c2.symbol === _ctx.field.currency)) == null ? void 0 : _a2.character) || _ctx.field.currency), 1)
+          }, null, 42, _hoisted_4$d),
+          createElementVNode("p", _hoisted_5$9, 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__ */ 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__ */ defineComponent({
   __name: "DateInput",
   props: {
     field: {},
@@ -18558,7 +18675,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.field.description
       }, [
-        _ctx.field.label ? (openBlock(), createElementBlock("label", _hoisted_2$u, toDisplayString(_ctx.field.label), 1)) : createCommentVNode("", true),
+        _ctx.field.label ? (openBlock(), createElementBlock("label", _hoisted_2$v, toDisplayString(_ctx.field.label), 1)) : createCommentVNode("", true),
         withDirectives(createElementVNode("input", {
           type: "date",
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => date2.value = $event),
@@ -18568,18 +18685,18 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           disabled: !_ctx.editMode,
           enableTimePicker: false,
           textInputOptions: { format: "yyyy-MM-dd" }
-        }, null, 40, _hoisted_3$q), [
+        }, null, 40, _hoisted_3$r), [
           [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__ */ 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__ */ defineComponent({
   __name: "DatetimeInput",
   props: {
     description: { default: "" },
@@ -18605,7 +18722,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$t, [
+        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$u, [
           createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : createCommentVNode("", true),
         createElementVNode("input", {
@@ -18614,15 +18731,15 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           onInput: handleInput,
           placeholder: _ctx.placeholder,
           class: 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__ */ defineComponent({
+const _hoisted_1$w = ["title"];
+const _hoisted_2$t = { key: 0 };
+const _hoisted_3$p = ["value", "placeholder"];
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "EmailInput",
   props: {
     description: { default: "" },
@@ -18645,7 +18762,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$s, [
+        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$t, [
           createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : createCommentVNode("", true),
         createElementVNode("input", {
@@ -18655,16 +18772,16 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           onInput: handleInput,
           class: 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__ */ 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__ */ defineComponent({
   __name: "FloatInput",
   props: {
     description: { default: "" },
@@ -18691,7 +18808,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$r, [
+        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$s, [
           createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : createCommentVNode("", true),
         createElementVNode("input", {
@@ -18700,15 +18817,15 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           onInput: handleInput,
           class: 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__ */ defineComponent({
+const _hoisted_1$u = ["title"];
+const _hoisted_2$r = { key: 0 };
+const _hoisted_3$n = ["value", "placeholder"];
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "IntInput",
   props: {
     description: { default: "" },
@@ -18735,7 +18852,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$q, [
+        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$r, [
           createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : createCommentVNode("", true),
         createElementVNode("input", {
@@ -18744,15 +18861,15 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           onInput: handleInput,
           class: 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__ */ defineComponent({
+const _hoisted_1$t = ["title"];
+const _hoisted_2$q = { key: 0 };
+const _hoisted_3$m = ["value", "placeholder"];
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "JSONInput",
   props: {
     description: { default: "" },
@@ -18775,7 +18892,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$p, [
+        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$q, [
           createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : createCommentVNode("", true),
         createElementVNode("textarea", {
@@ -18783,26 +18900,26 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           onInput: handleInput,
           class: 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__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "LinkField",
   props: {
     description: { default: "" },
@@ -18926,7 +19043,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$o, [
+        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$p, [
           createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : createCommentVNode("", true),
         withDirectives(createElementVNode("input", {
@@ -18938,7 +19055,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           onFocus: initList,
           onInput: handleInput,
           disabled: !_ctx.editMode
-        }, null, 40, _hoisted_3$k), [
+        }, null, 40, _hoisted_3$l), [
           [vModelText, selectedItem.value]
         ]),
         createElementVNode("div", {
@@ -18958,26 +19075,26 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                   key: unref(formatString)(option2.value, "pascal"),
                   onClick: withModifiers(($event) => handleSelect(option2), ["stop"])
                 }, [
-                  option2.label ? (openBlock(), createElementBlock("div", _hoisted_5$7, [
+                  option2.label ? (openBlock(), createElementBlock("div", _hoisted_5$8, [
                     createTextVNode(toDisplayString(option2.label), 1),
                     createElementVNode("span", null, "ID: " + toDisplayString(option2.value), 1)
-                  ])) : (openBlock(), createElementBlock("div", _hoisted_6$5, " ID: " + toDisplayString(option2.value), 1)),
+                  ])) : (openBlock(), createElementBlock("div", _hoisted_6$6, " ID: " + toDisplayString(option2.value), 1)),
                   createElementVNode("div", _hoisted_7$2, 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__ */ 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__ */ defineComponent({
   __name: "PasswordInput",
   props: {
     description: { default: "" },
@@ -19011,31 +19128,31 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$n, [
+        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$o, [
           createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$j, [
+        createElementVNode("div", _hoisted_3$k, [
           createElementVNode("input", {
             value: _ctx.modelValue,
             type: unref(inputType),
             onInput: handleInput,
             placeholder: _ctx.placeholder,
             class: normalizeClass({ "no-edit": !_ctx.editMode })
-          }, null, 42, _hoisted_4$9),
+          }, null, 42, _hoisted_4$b),
           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__ */ 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__ */ defineComponent({
   __name: "Password",
   props: {
     field: {},
@@ -19075,22 +19192,22 @@ const _sfc_main$e = /* @__PURE__ */ 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), [
             [vModelDynamic, inputVal.value]
           ])
-        ], 8, _hoisted_2$m),
-        createVNode(unref(_sfc_main$T), {
+        ], 8, _hoisted_2$n),
+        createVNode(unref(_sfc_main$W), {
           onClick: showPassword,
           icon: unref(seePassword) ? "visibility" : "visibility_off"
         }, null, 8, ["icon"])
-      ], 10, _hoisted_1$p)) : createCommentVNode("", true);
+      ], 10, _hoisted_1$q)) : 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__ */ 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__ */ defineComponent({
   __name: "ReadOnlyInput",
   props: {
     field: {},
@@ -19103,49 +19220,33 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.field.description
       }, [
-        _ctx.field.label ? (openBlock(), createElementBlock("label", _hoisted_2$l, toDisplayString(_ctx.field.label), 1)) : createCommentVNode("", true),
+        _ctx.field.label ? (openBlock(), createElementBlock("label", _hoisted_2$m, toDisplayString(_ctx.field.label), 1)) : createCommentVNode("", true),
         createTextVNode(" " + 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__ */ 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__ */ 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 }) {
     useCssVars((_ctx) => ({
-      "1c3856b2": left2.value,
-      "62aaf5e4": `${top2.value}px`,
-      "6b6f4c7b": width.value
+      "530a7ef0": left2.value,
+      "7d0177a2": `${top2.value}px`,
+      "0ee22bfd": width.value
     }));
     const selectEl = ref();
     const dropdown = ref();
@@ -19244,7 +19345,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           for: "label",
           class: normalizeClass({ active: showList.value })
         }, [
-          createVNode(unref(_sfc_main$V), { input: _ctx.label }, null, 8, ["input"])
+          createVNode(unref(_sfc_main$Y), { input: _ctx.label }, null, 8, ["input"])
         ], 2)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["custom-select", { "open-select": showList.value && _ctx.editMode }]),
@@ -19256,7 +19357,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             class: normalizeClass(["input", { active: showList.value }]),
             name: "select-input"
           }, [
-            createVNode(unref(_sfc_main$V), { input: displayValue.value }, null, 8, ["input"])
+            createVNode(unref(_sfc_main$Y), { input: displayValue.value }, null, 8, ["input"])
           ], 2),
           (openBlock(), createBlock(Teleport, { to: "#app" }, [
             createElementVNode("div", {
@@ -19269,23 +19370,23 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                   key: option2.value,
                   onClick: ($event) => handleSelect(option2)
                 }, [
-                  createVNode(unref(_sfc_main$V), {
+                  createVNode(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__ */ 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__ */ defineComponent({
   __name: "RichTextEditor",
   props: {
     description: { default: "" },
@@ -19308,7 +19409,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$j, [
+        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$k, [
           createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : createCommentVNode("", true),
         createElementVNode("textarea", {
@@ -19316,12 +19417,12 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           onInput: handleInput,
           placeholder: _ctx.placeholder,
           class: 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
@@ -21844,13 +21945,13 @@ const VueDraggableNext = 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__ */ 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__ */ defineComponent({
   __name: "TableField",
   props: {
     description: { default: "" },
@@ -21915,11 +22016,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         class: "table-field-wrap",
         title: _ctx.description
       }, [
-        createElementVNode("div", _hoisted_2$i, [
+        createElementVNode("div", _hoisted_2$j, [
           createElementVNode("label", null, toDisplayString((_a2 = unref(fieldMeta)) == null ? void 0 : _a2.label), 1)
         ]),
-        createElementVNode("div", _hoisted_3$g, [
-          createElementVNode("div", _hoisted_4$8, [
+        createElementVNode("div", _hoisted_3$h, [
+          createElementVNode("div", _hoisted_4$a, [
             (openBlock(true), createElementBlock(Fragment$1, null, renderList((_b = unref(entityMeta)) == null ? void 0 : _b.fields, (field) => {
               return openBlock(), createElementBlock("div", {
                 class: normalizeClass(["header-col", unref(formatString)(field.fieldtype, "pascal")]),
@@ -21946,8 +22047,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                       class: "flex table-row",
                       key: row.id
                     }, [
-                      createElementVNode("div", _hoisted_5$6, [
-                        createVNode(_sfc_main$q, { icon: "more_vert" })
+                      createElementVNode("div", _hoisted_5$7, [
+                        createVNode(_sfc_main$t, { icon: "more_vert" })
                       ]),
                       (openBlock(true), createElementBlock(Fragment$1, null, renderList((_a3 = unref(entityMeta)) == null ? void 0 : _a3.fields, (field) => {
                         return openBlock(), createElementBlock("div", {
@@ -21963,8 +22064,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                           }, null, 8, ["field-meta", "bagel-app", "onUpdate:modelValue", "model-value"])
                         ], 2);
                       }), 128)),
-                      createElementVNode("div", _hoisted_6$4, [
-                        createVNode(_sfc_main$q, {
+                      createElementVNode("div", _hoisted_6$5, [
+                        createVNode(_sfc_main$t, {
                           icon: "delete",
                           onClick: ($event) => removeRow(index2)
                         }, null, 8, ["onClick"])
@@ -21990,15 +22091,15 @@ const _sfc_main$a = /* @__PURE__ */ 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__ */ 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__ */ defineComponent({
   __name: "DurationInput",
   props: {
     description: { default: "" },
@@ -22025,7 +22126,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$h, [
+        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$i, [
           createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : createCommentVNode("", true),
         createElementVNode("input", {
@@ -22035,15 +22136,16 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           onInput: handleInput,
           placeholder: _ctx.placeholder,
           class: 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__ */ 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__ */ defineComponent({
   __name: "TextInput",
   props: {
     id: {},
@@ -22059,7 +22161,12 @@ const _sfc_main$8 = /* @__PURE__ */ 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 }) {
@@ -22081,6 +22188,16 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         }, 10);
       }
     };
+    const rows = 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;
+    });
     watch(
       () => inputVal.value,
       (newVal) => {
@@ -22102,34 +22219,48 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["bagel-input", { small: _ctx.small, shrink: _ctx.shrink, toggleEdit: _ctx.toggleEdit, editMode: unref(editMode), textInputIconWrap: _ctx.icon, txtInputIconStart: _ctx.iconStart }]),
+        class: normalizeClass(["bagel-input text-input", { small: _ctx.small, shrink: _ctx.shrink, toggleEdit: _ctx.toggleEdit, editMode: unref(editMode), textInputIconWrap: _ctx.icon, txtInputIconStart: _ctx.iconStart, code: _ctx.code }]),
         title: _ctx.title
       }, [
         createElementVNode("label", { for: _ctx.id }, [
           createTextVNode(toDisplayString(_ctx.label) + " ", 1),
-          withDirectives(createElementVNode("input", mergeProps({
+          !_ctx.multiline && !_ctx.autoheight && !_ctx.code ? withDirectives((openBlock(), createElementBlock("input", mergeProps({
+            key: 0,
+            autocomplete: _ctx.autocomplete,
             id: _ctx.id,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(inputVal) ? inputVal.value = $event : inputVal = $event),
             type: _ctx.type,
+            rows: 1,
             ref_key: "input",
             ref: input2,
             placeholder: _ctx.placeholder || _ctx.label,
             disabled: !unref(editMode),
             required: _ctx.required,
             pattern: _ctx.pattern
-          }, _ctx.nativeInputAttrs, {
-            onDblclick: toggleEditAction,
-            onKeydown: withKeys(toggleEditAction, ["enter"])
-          }), null, 16, _hoisted_3$e), [
+          }, _ctx.nativeInputAttrs, { onDblclick: toggleEditAction }), null, 16, _hoisted_3$f)), [
             [vModelDynamic, unref(inputVal)]
+          ]) : withDirectives((openBlock(), createElementBlock("textarea", mergeProps({
+            key: 1,
+            id: _ctx.id,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(inputVal) ? inputVal.value = $event : inputVal = $event),
+            type: _ctx.type,
+            rows: rows.value,
+            ref_key: "input",
+            ref: input2,
+            placeholder: _ctx.placeholder || _ctx.label,
+            disabled: !unref(editMode),
+            required: _ctx.required,
+            pattern: _ctx.pattern
+          }, _ctx.nativeInputAttrs, { onDblclick: toggleEditAction }), null, 16, _hoisted_4$9)), [
+            [vModelText, unref(inputVal)]
           ])
-        ], 8, _hoisted_2$g),
-        _ctx.iconStart ? (openBlock(), createBlock(unref(_sfc_main$T), {
+        ], 8, _hoisted_2$h),
+        _ctx.iconStart ? (openBlock(), createBlock(unref(_sfc_main$W), {
           key: 0,
           class: "iconStart",
           icon: _ctx.iconStart
         }, null, 8, ["icon"])) : createCommentVNode("", true),
-        _ctx.icon ? (openBlock(), createBlock(unref(_sfc_main$T), {
+        _ctx.icon ? (openBlock(), createBlock(unref(_sfc_main$W), {
           key: 1,
           icon: _ctx.icon
         }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -22141,19 +22272,19 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           icon: unref(editMode) ? "check" : "edit",
           flat: ""
         }, null, 8, ["icon"])) : 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__ */ defineComponent({
+const _hoisted_4$8 = ["value"];
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "TextArea",
   props: {
     description: { default: "" },
@@ -22178,24 +22309,24 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$f, [
-          createVNode(unref(_sfc_main$V), { input: _ctx.label }, null, 8, ["input"])
+        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$g, [
+          createVNode(unref(_sfc_main$Y), { input: _ctx.label }, null, 8, ["input"])
         ])) : createCommentVNode("", true),
-        _ctx.showCharacterLimit ? (openBlock(), createElementBlock("span", _hoisted_3$d, toDisplayString((_a2 = _ctx.modelValue) == null ? void 0 : _a2.length) + " " + toDisplayString(((_b = _ctx.nativeInputAttrs) == null ? void 0 : _b.maxlength) ? `/${_ctx.nativeInputAttrs.maxlength}` : ""), 1)) : createCommentVNode("", true),
+        _ctx.showCharacterLimit ? (openBlock(), createElementBlock("span", _hoisted_3$e, toDisplayString((_a2 = _ctx.modelValue) == null ? void 0 : _a2.length) + " " + toDisplayString(((_b = _ctx.nativeInputAttrs) == null ? void 0 : _b.maxlength) ? `/${_ctx.nativeInputAttrs.maxlength}` : ""), 1)) : createCommentVNode("", true),
         createElementVNode("textarea", 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__ */ 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__ */ defineComponent({
   __name: "ColorPicker",
   props: {
     field: {},
@@ -22232,19 +22363,19 @@ const _sfc_main$6 = /* @__PURE__ */ 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), [
             [vModelText, inputVal.value]
           ])
-        ], 8, _hoisted_2$e)
-      ], 10, _hoisted_1$h)) : createCommentVNode("", true);
+        ], 8, _hoisted_2$f)
+      ], 10, _hoisted_1$i)) : 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__ */ 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__ */ defineComponent({
   __name: "DynamicLinkField",
   props: {
     label: { default: "" },
@@ -22320,7 +22451,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["bagel-input", { small: _ctx.small }])
       }, [
-        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_1$g, [
+        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_1$h, [
           createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : createCommentVNode("", true),
         withDirectives(createElementVNode("input", {
@@ -22332,19 +22463,19 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           onFocus: initList,
           onInput: handleInput,
           disabled: !_ctx.editMode
-        }, null, 40, _hoisted_2$d), [
+        }, null, 40, _hoisted_2$e), [
           [vModelText, selectedItem.value]
         ]),
         createElementVNode("div", {
           class: normalizeClass(["custom-select", { "open-select": showList.value && linkOptions.value.length > 0 }]),
           name: "link-input"
         }, [
-          createElementVNode("div", _hoisted_3$b, [
+          createElementVNode("div", _hoisted_3$c, [
             (openBlock(true), createElementBlock(Fragment$1, null, renderList(linkOptions.value, (item2) => {
               return openBlock(), createElementBlock("div", {
                 key: unref(formatString)(item2.value, "pascal"),
                 onClick: withModifiers(($event) => handleSelect(item2), ["stop"])
-              }, toDisplayString(_ctx.useId || _ctx.entity === "Entity" ? item2.value : item2.label || item2.description || item2.value), 9, _hoisted_4$6);
+              }, toDisplayString(_ctx.useId || _ctx.entity === "Entity" ? item2.value : item2.label || item2.description || item2.value), 9, _hoisted_4$7);
             }), 128))
           ])
         ], 2)
@@ -22352,10 +22483,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$f = ["title"];
-const _hoisted_2$c = ["for"];
-const _hoisted_3$a = ["id", "placeholder", "required", "pattern"];
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$g = ["title"];
+const _hoisted_2$d = ["for"];
+const _hoisted_3$b = ["id", "placeholder", "required", "pattern"];
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "PlainText",
   props: {
     field: {},
@@ -22401,15 +22532,15 @@ const _sfc_main$4 = /* @__PURE__ */ 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), [
             [vModelText, unref(inputVal)]
           ])
-        ], 8, _hoisted_2$c)
-      ], 10, _hoisted_1$f)) : createCommentVNode("", true);
+        ], 8, _hoisted_2$d)
+      ], 10, _hoisted_1$g)) : 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) {
@@ -31786,15 +31917,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__ */ defineComponent({
+const _hoisted_4$6 = ["id", "name", "value"];
+const _hoisted_5$6 = ["for"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "DatePicker",
   props: {
     name: {},
@@ -31810,8 +31941,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       return `${hour}:${minute}`;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
-        createElementVNode("div", _hoisted_2$b, [
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
+        createElementVNode("div", _hoisted_2$c, [
           createVNode(unref(ja), mergeProps({
             inline: "",
             "week-start": "0",
@@ -31826,7 +31957,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             _: 1
           }, 16, ["modelValue"])
         ]),
-        _ctx.showTimeWrap ? (openBlock(), createElementBlock("div", _hoisted_3$9, [
+        _ctx.showTimeWrap ? (openBlock(), createElementBlock("div", _hoisted_3$a, [
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(unref(hours), (hr2) => {
             return openBlock(), createElementBlock(Fragment$1, { key: hr2 }, [
               withDirectives(createElementVNode("input", {
@@ -31835,12 +31966,12 @@ const _sfc_main$3 = /* @__PURE__ */ 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), [
                 [vModelRadio, selectedHour.value]
               ]),
               createElementVNode("label", {
                 for: `${hr2}_${_ctx.name}`
-              }, toDisplayString(hr2), 9, _hoisted_5$5)
+              }, toDisplayString(hr2), 9, _hoisted_5$6)
             ], 64);
           }), 128))
         ])) : createCommentVNode("", true)
@@ -31848,10 +31979,10 @@ const _sfc_main$3 = /* @__PURE__ */ 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__ */ 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__ */ defineComponent({
   __name: "RadioPillsInput",
   props: {
     options: {},
@@ -31889,7 +32020,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       selectedValue.value = props2.modelValue;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$d, [
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
         (openBlock(true), createElementBlock(Fragment$1, null, renderList(cumputedOptions.value, ({ id, label: label2, value }, index2) => {
           return openBlock(), createElementBlock("div", {
             class: "radio-pill",
@@ -31902,15 +32033,120 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               value,
               checked: unref(selectedValue) === value,
               onChange: handleSelect
-            }, null, 40, _hoisted_2$a),
-            createElementVNode("label", { for: id }, toDisplayString(label2), 9, _hoisted_3$8)
+            }, null, 40, _hoisted_2$b),
+            createElementVNode("label", { for: id }, 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__ */ defineComponent({
+  __name: "FileUpload",
+  props: {
+    label: {},
+    multiple: { type: Boolean }
+  },
+  setup(__props) {
+    const props2 = __props;
+    const files = ref([]);
+    const fileQueue = ref([]);
+    let isDragOver = 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 openBlock(), createElementBlock("div", _hoisted_1$d, [
+        createElementVNode("label", null, toDisplayString(_ctx.label), 1),
+        createElementVNode("div", {
+          onClick: browse,
+          onDragover: dragenter,
+          onDrop: drop3,
+          onDragleave: dragleave,
+          class: normalizeClass(["fileUploadWrap", { fileDropZone: !files.value.length, dragover: unref(isDragOver) }])
+        }, [
+          files.value.length && !_ctx.multiple ? (openBlock(), createElementBlock("div", _hoisted_2$a, [
+            createElementVNode("div", _hoisted_3$8, [
+              createElementVNode("img", {
+                class: "preview",
+                src: fileToUrl(files.value[0]),
+                alt: ""
+              }, null, 8, _hoisted_4$5)
+            ]),
+            createElementVNode("div", _hoisted_5$5, [
+              createElementVNode("p", _hoisted_6$4, toDisplayString(files.value[0].name), 1),
+              createVNode(unref(Btn), {
+                thin: "",
+                onClick: _cache[0] || (_cache[0] = withModifiers(($event) => removeFile(files.value[0]), ["stop"])),
+                flat: "",
+                icon: "delete",
+                color: "red"
+              })
+            ])
+          ])) : 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;
 }
@@ -38368,7 +38604,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       var _a2, _b, _c, _d, _e2, _f;
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(unref(_sfc_main$K), null, {
+        createVNode(unref(_sfc_main$N), null, {
           default: withCtx(() => [
             createTextVNode("Whatsapp Template")
           ]),
@@ -38377,7 +38613,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_2, [
           createElementVNode("div", _hoisted_3, [
             createElementVNode("div", _hoisted_4, [
-              createVNode(unref(_sfc_main$I), {
+              createVNode(unref(_sfc_main$L), {
                 schema: _ctx.whatsappTemplateSchema(),
                 modelValue: unref(localWhatsappData),
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localWhatsappData) ? localWhatsappData.value = $event : localWhatsappData = $event),
@@ -38406,49 +38642,52 @@ export {
   BagelVue,
   BankDetailsInput,
   BarChart,
+  _sfc_main$q as BglField,
+  _sfc_main$r as BglForm,
   Btn,
   CheckInput,
   Checkbox,
-  _sfc_main$6 as ColorPicker,
+  _sfc_main$7 as ColorPicker,
   Comments,
   ContactArrayInput,
-  _sfc_main$E as ContactSubmissions,
+  _sfc_main$H as ContactSubmissions,
   CurrencyInput,
   DataPreview,
   DateInput,
-  _sfc_main$3 as DatePicker,
-  _sfc_main$l as DatetimeInput,
-  _sfc_main$P as DropDown,
-  _sfc_main$9 as DurationInput,
-  _sfc_main$5 as DynamicLinkField,
+  _sfc_main$4 as DatePicker,
+  _sfc_main$m as DatetimeInput,
+  _sfc_main$S as DropDown,
+  _sfc_main$a as DurationInput,
+  _sfc_main$6 as DynamicLinkField,
   EmailInput,
+  FileUpload,
   FileUploadInput,
-  _sfc_main$u as FileUploader,
-  _sfc_main$j as FloatInput,
-  _sfc_main$I as FormSchema,
-  _sfc_main$i as IntInput,
-  _sfc_main$r as ItemRef,
+  _sfc_main$x as FileUploader,
+  _sfc_main$k as FloatInput,
+  _sfc_main$L as FormSchema,
+  _sfc_main$j as IntInput,
+  _sfc_main$u as ItemRef,
   JSONInput,
-  _sfc_main$V as LangText,
+  _sfc_main$Y as LangText,
   _sfc_main$1 as Lineart,
   LinkField,
-  _sfc_main$N as ListItem,
-  _sfc_main$O as ListView,
-  _sfc_main$T as MaterialIcon,
+  _sfc_main$Q as ListItem,
+  _sfc_main$R as ListView,
+  _sfc_main$W as MaterialIcon,
   MiscFieldsInput,
-  _sfc_main$Q as Modal,
+  _sfc_main$T as Modal,
   ModalForm,
   ModalPlugin,
   MsgTemplate,
-  _sfc_main$S as NavBar,
-  _sfc_main$K as PageTitle,
+  _sfc_main$V as NavBar,
+  _sfc_main$N as PageTitle,
   Password,
   PasswordInput,
-  _sfc_main$D as PersonPreview,
+  _sfc_main$G as PersonPreview,
   PersonPreviewInput,
-  _sfc_main$p as PlainInputField,
+  _sfc_main$s as PlainInputField,
   PlainText,
-  _sfc_main$U as RTXEditor,
+  _sfc_main$X as RTXEditor,
   RadioPillsInput,
   ReadOnlyInput,
   RichTextEditor,
@@ -38459,12 +38698,12 @@ export {
   TableSchema,
   TextArea,
   TextInput,
-  _sfc_main$s as TextVariableExamples,
+  _sfc_main$v as TextVariableExamples,
   TextVariablesInput,
   ToggleSwitchInput,
   TopBar,
   bagelInjectionKey,
-  computeFields,
+  bindAttrs,
   copyText,
   debounce,
   formatString,