@bagelink/vue 0.0.318 → 0.0.331

package/dist/index.cjs

@@ -4880,7 +4880,7 @@ const ModalPlugin = {
           const props2 = { ...modal.modalOptions, visible: true, "onUpdate:visible": () => hideModal(index2) };
           if (modal.modalType === "modalForm")
             return vue.h(ModalForm, props2, modal.componentSlots);
-          return vue.h(_sfc_main$E, props2, modal.componentSlots);
+          return vue.h(_sfc_main$C, props2, modal.componentSlots);
         });
       }
     });
@@ -4907,6 +4907,55 @@ function formatString(str, format2) {
   }
   return str;
 }
+function txtField(id, label, options) {
+  return {
+    $el: "text",
+    class: options == null ? void 0 : options.class,
+    required: options == null ? void 0 : options.required,
+    id,
+    label,
+    placeholder: options == null ? void 0 : options.placeholder,
+    attrs: { type: options == null ? void 0 : options.type }
+  };
+}
+function slctField(id, label, options, config) {
+  return {
+    $el: "select",
+    id,
+    options,
+    class: config == null ? void 0 : config.class,
+    placeholder: config == null ? void 0 : config.placeholder,
+    required: config == null ? void 0 : config.required,
+    label,
+    defaultValue: config == null ? void 0 : config.defaultValue,
+    attrs: { disabled: config == null ? void 0 : config.disabled }
+  };
+}
+function numField(id, label, options) {
+  return {
+    $el: "text",
+    class: options == null ? void 0 : options.class,
+    required: options == null ? void 0 : options.required,
+    id,
+    label,
+    placeholder: options == null ? void 0 : options.placeholder,
+    attrs: { type: "number" }
+  };
+}
+function frmRow(...children2) {
+  return {
+    $el: "div",
+    class: "flex gap-1 m_block",
+    children: children2
+  };
+}
+const BagelFormUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  frmRow,
+  numField,
+  slctField,
+  txtField
+}, Symbol.toStringTag, { value: "Module" }));
 let timeout;
 const debounce = (fn, delay = 500) => {
   clearTimeout(timeout);
@@ -4942,6 +4991,8 @@ function bindAttrs(attrs, fieldVal, row) {
     key,
     typeof value === "function" ? value(fieldVal, row) : value
   ]);
+  if (attrs.options)
+    console.log("arr", arr);
   const resolvedAttrs = Object.fromEntries(arr);
   return resolvedAttrs;
 }
@@ -17065,8 +17116,8 @@ const marks = {
   }
 };
 const schema = new Schema({ nodes, marks });
-const _hoisted_1$J = ["id"];
-const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$I = ["id"];
+const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
   __name: "RTXEditor",
   props: {
     elementId: { default: Math.random().toString(36).substr(2, 9) },
@@ -17143,11 +17194,11 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
         onClick: focusEditor,
         id: `canvas-${_ctx.elementId}`,
         onKeydown: _cache[0] || (_cache[0] = vue.withKeys(vue.withModifiers(($event) => _ctx.$emit("keydown.meta.enter"), ["meta"]), ["enter"]))
-      }, null, 40, _hoisted_1$J);
+      }, null, 40, _hoisted_1$I);
     };
   }
 });
-const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
   __name: "MaterialIcon",
   props: {
     icon: {},
@@ -17163,13 +17214,13 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$I = { class: "full-nav" };
+const _hoisted_1$H = { class: "full-nav" };
 const _hoisted_2$y = { class: "nav-scroll" };
-const _hoisted_3$p = { class: "nav-links-wrapper" };
-const _hoisted_4$h = { class: "tooltip" };
-const _hoisted_5$e = { class: "bot-buttons-wrapper" };
-const _hoisted_6$a = { class: "tooltip" };
-const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_3$o = { class: "nav-links-wrapper" };
+const _hoisted_4$g = { class: "tooltip" };
+const _hoisted_5$d = { class: "bot-buttons-wrapper" };
+const _hoisted_6$9 = { class: "tooltip" };
+const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   __name: "NavBar",
   props: {
     footerLinks: { default: () => [] },
@@ -17193,14 +17244,14 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
           "aria-label": "Toggle Navigation",
           tabindex: "0"
         }, [
-          vue.createVNode(vue.unref(_sfc_main$H), {
+          vue.createVNode(vue.unref(_sfc_main$F), {
             icon: "chevron_right",
             class: "top-arrow"
           })
         ], 32),
-        vue.createElementVNode("div", _hoisted_1$I, [
+        vue.createElementVNode("div", _hoisted_1$H, [
           vue.createElementVNode("div", _hoisted_2$y, [
-            vue.createElementVNode("div", _hoisted_3$p, [
+            vue.createElementVNode("div", _hoisted_3$o, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.links, (link) => {
                 return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(link.to ? "router-link" : "div"), {
                   class: "nav-button",
@@ -17212,17 +17263,17 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
                   }
                 }, {
                   default: vue.withCtx(() => [
-                    vue.createVNode(vue.unref(_sfc_main$H), {
+                    vue.createVNode(vue.unref(_sfc_main$F), {
                       icon: link.icon
                     }, null, 8, ["icon"]),
-                    vue.createElementVNode("div", _hoisted_4$h, vue.toDisplayString(link.label), 1)
+                    vue.createElementVNode("div", _hoisted_4$g, vue.toDisplayString(link.label), 1)
                   ]),
                   _: 2
                 }, 1032, ["to", "onClick"]);
               }), 128))
             ])
           ]),
-          vue.createElementVNode("div", _hoisted_5$e, [
+          vue.createElementVNode("div", _hoisted_5$d, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.footerLinks, (link) => {
               return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(link.to ? "router-link" : "div"), {
                 class: "nav-button",
@@ -17234,10 +17285,10 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
                 key: link.label
               }, {
                 default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(_sfc_main$H), {
+                  vue.createVNode(vue.unref(_sfc_main$F), {
                     icon: link.icon
                   }, null, 8, ["icon"]),
-                  vue.createElementVNode("div", _hoisted_6$a, vue.toDisplayString(link.label), 1)
+                  vue.createElementVNode("div", _hoisted_6$9, vue.toDisplayString(link.label), 1)
                 ]),
                 _: 2
               }, 1032, ["to", "onClick"]);
@@ -17256,8 +17307,8 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const NavBar = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-727b754a"]]);
-const _hoisted_1$H = {
+const NavBar = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-727b754a"]]);
+const _hoisted_1$G = {
   key: 0,
   class: "loading"
 };
@@ -17265,7 +17316,7 @@ const _hoisted_2$x = {
   key: 1,
   class: "bgl_btn-flex"
 };
-const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
   __name: "Btn",
   props: {
     disabled: { type: Boolean, default: false },
@@ -17351,8 +17402,8 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
         })
       }, {
         default: vue.withCtx(() => [
-          _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$H)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$x, [
-            _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$H), {
+          _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$G)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$x, [
+            _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$F), {
               key: 0,
               icon: _ctx.icon
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -17360,7 +17411,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
             !vue.unref(slots)["default"] && _ctx.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
               vue.createTextVNode(vue.toDisplayString(_ctx.value), 1)
             ], 64)) : vue.createCommentVNode("", true),
-            props2["icon.end"] ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$H), {
+            props2["icon.end"] ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$F), {
               key: 2,
               icon: props2["icon.end"]
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
@@ -17371,10 +17422,10 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-0c8d9a95"]]);
-const _hoisted_1$G = { class: "tool-bar" };
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-0c8d9a95"]]);
+const _hoisted_1$F = { class: "tool-bar" };
 const _hoisted_2$w = { class: "modal-footer mt-3" };
-const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
   __name: "Modal",
   props: {
     side: { type: Boolean },
@@ -17415,13 +17466,13 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
         onClick: _cache[1] || (_cache[1] = () => _ctx.dismissable ? closeModal() : ""),
         onKeydown: vue.withKeys(closeModal, ["esc"])
       }, [
-        vue.createVNode(vue.unref(_sfc_main$s), {
+        vue.createVNode(vue.unref(_sfc_main$q), {
           class: "modal",
           onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
           }, ["stop"]))
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("header", _hoisted_1$G, [
+            vue.createElementVNode("header", _hoisted_1$F, [
               vue.renderSlot(_ctx.$slots, "toolbar"),
               vue.createVNode(vue.unref(Btn), {
                 style: vue.normalizeStyle({ float: _ctx.side ? "left" : "right" }),
@@ -17429,7 +17480,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
                 icon: "close",
                 onClick: closeModal
               }, null, 8, ["style"]),
-              _ctx.title ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
+              _ctx.title ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$o), {
                 key: 0,
                 class: "modal-title",
                 tag: "h3",
@@ -17454,7 +17505,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
   __name: "ModalForm",
   props: /* @__PURE__ */ vue.mergeModels({
     side: { type: Boolean },
@@ -17511,7 +17562,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     }
     __expose({ setFormValues });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$E), {
+      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$C), {
         "onOnUpdate:isModalVisible": props2["onUpdate:isModalVisible"],
         side: _ctx.side,
         ref_key: "modal",
@@ -17520,7 +17571,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
         title: _ctx.title
       }, vue.createSlots({
         default: vue.withCtx(() => [
-          vue.createVNode(vue.unref(_sfc_main$j), {
+          vue.createVNode(vue.unref(_sfc_main$h), {
             onSubmit: runSubmit,
             ref_key: "form",
             ref: form,
@@ -17562,12 +17613,12 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-7e6899c7"]]);
-const _hoisted_1$F = { class: "accordion-item" };
+const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-7e6899c7"]]);
+const _hoisted_1$E = { class: "accordion-item" };
 const _hoisted_2$v = ["aria-expanded", "aria-controls"];
-const _hoisted_3$o = { class: "accordion-label" };
-const _hoisted_4$g = ["id", "aria-hidden"];
-const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_3$n = { class: "accordion-label" };
+const _hoisted_4$f = ["id", "aria-hidden"];
+const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
   __name: "AccordionItem",
   props: {
     label: {},
@@ -17591,18 +17642,18 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
         accordionState.openItem = null;
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$F, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [
         vue.createElementVNode("button", {
           onClick: _cache[0] || (_cache[0] = ($event) => toggle()),
           "aria-expanded": vue.unref(open) ? "true" : "false",
           class: "accordion-head",
           "aria-controls": `accordion-body-${vue.unref(id)}`
         }, [
-          vue.createElementVNode("span", _hoisted_3$o, vue.toDisplayString(_ctx.label), 1),
+          vue.createElementVNode("span", _hoisted_3$n, vue.toDisplayString(_ctx.label), 1),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["accordion-icon", { open: vue.unref(open) }])
           }, [
-            vue.createVNode(vue.unref(_sfc_main$H), { icon: "expand_more" })
+            vue.createVNode(vue.unref(_sfc_main$F), { icon: "expand_more" })
           ], 2)
         ], 8, _hoisted_2$v),
         vue.createVNode(vue.Transition, { name: "expand" }, {
@@ -17614,7 +17665,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
               "aria-hidden": vue.unref(open) ? "false" : "true"
             }, [
               vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
-            ], 8, _hoisted_4$g)) : vue.createCommentVNode("", true)
+            ], 8, _hoisted_4$f)) : vue.createCommentVNode("", true)
           ]),
           _: 3
         })
@@ -17622,29 +17673,28 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-bf74738b"]]);
-const _hoisted_1$E = { class: "list-wrap bgl_card thin grid overflow-hidden h-100 p-0" };
+const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-bf74738b"]]);
+const _hoisted_1$D = { class: "list-wrap bgl_card thin grid overflow-hidden h-100 p-0" };
 const _hoisted_2$u = { class: "p-1" };
-const _hoisted_3$n = { class: "list-content auto-flow-rows align-items-start overflow-y h-100" };
-const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_3$m = { class: "list-content auto-flow-rows align-items-start overflow-y h-100" };
+const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
   __name: "ListView",
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, [
         vue.createElementVNode("div", _hoisted_2$u, [
           vue.renderSlot(_ctx.$slots, "header")
         ]),
-        vue.createTextVNode(),
-        vue.createElementVNode("div", _hoisted_3$n, [
+        vue.createElementVNode("div", _hoisted_3$m, [
           vue.renderSlot(_ctx.$slots, "default")
         ])
       ]);
     };
   }
 });
-const _hoisted_1$D = { class: "txt16 no-margin ellipsis" };
+const _hoisted_1$C = { class: "txt16 no-margin ellipsis" };
 const _hoisted_2$t = { class: "txt14 no-margin txt-gray ellipsis" };
-const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
   __name: "ListItem",
   props: {
     src: {},
@@ -17668,7 +17718,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
             size: 40
           }, null, 8, ["name", "src"])) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", null, [
-            vue.createElementVNode("p", _hoisted_1$D, [
+            vue.createElementVNode("p", _hoisted_1$C, [
               vue.createTextVNode(vue.toDisplayString(_ctx.title) + " ", 1),
               vue.renderSlot(_ctx.$slots, "default")
             ]),
@@ -17683,10 +17733,10 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$C = { class: "bgl_card tabs-top" };
+const _hoisted_1$B = { class: "bgl_card tabs-top" };
 const _hoisted_2$s = { class: "tabs grid auto-flow-columns fit-content" };
-const _hoisted_3$m = ["onClick"];
-const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_3$l = ["onClick"];
+const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
   __name: "TabbedLayout",
   props: {
     title: {},
@@ -17721,7 +17771,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(["h-100 grid list-view gap-1", { "side-tabs": _ctx.sideTabs }])
       }, [
-        vue.createElementVNode("div", _hoisted_1$C, [
+        vue.createElementVNode("div", _hoisted_1$B, [
           vue.renderSlot(_ctx.$slots, "top-section", {}, void 0, true),
           vue.createElementVNode("div", _hoisted_2$s, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.tabs, (tab) => {
@@ -17732,7 +17782,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
                 }, "tab"]),
                 key: tab,
                 onClick: ($event) => changeTab(tab)
-              }, vue.toDisplayString(tab), 11, _hoisted_3$m);
+              }, vue.toDisplayString(tab), 11, _hoisted_3$l);
             }), 128))
           ])
         ]),
@@ -17748,16 +17798,16 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TabbedLayout = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-37337215"]]);
-const _hoisted_1$B = { class: "comments-wrap" };
+const TabbedLayout = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-37337215"]]);
+const _hoisted_1$A = { class: "comments-wrap" };
 const _hoisted_2$r = { class: "comment-list" };
-const _hoisted_3$l = { class: "comment-top" };
-const _hoisted_4$f = { class: "comment-owner" };
-const _hoisted_5$d = { class: "comment-time" };
-const _hoisted_6$9 = { class: "comment-actions" };
-const _hoisted_7$5 = ["innerHTML"];
+const _hoisted_3$k = { class: "comment-top" };
+const _hoisted_4$e = { class: "comment-owner" };
+const _hoisted_5$c = { class: "comment-time" };
+const _hoisted_6$8 = { class: "comment-actions" };
+const _hoisted_7$4 = ["innerHTML"];
 const _hoisted_8$2 = { class: "new-comment" };
-const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
   __name: "Comments",
   props: {
     ref_table: {},
@@ -17800,7 +17850,7 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
       void fetchData();
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
         vue.createElementVNode("div", _hoisted_2$r, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(comments), (comment) => {
             var _a2, _b, _c;
@@ -17811,23 +17861,23 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
               }, "comment"]),
               key: comment.id
             }, [
-              vue.createElementVNode("div", _hoisted_3$l, [
-                vue.createElementVNode("div", _hoisted_4$f, vue.toDisplayString(comment.sender.first_name) + " " + vue.toDisplayString(comment.sender.last_name), 1),
-                vue.createElementVNode("div", _hoisted_5$d, vue.toDisplayString(comment.updated_at.split("T")[0]), 1),
-                vue.createElementVNode("div", _hoisted_6$9, [
-                  vue.createVNode(vue.unref(_sfc_main$H), {
+              vue.createElementVNode("div", _hoisted_3$k, [
+                vue.createElementVNode("div", _hoisted_4$e, vue.toDisplayString(comment.sender.first_name) + " " + vue.toDisplayString(comment.sender.last_name), 1),
+                vue.createElementVNode("div", _hoisted_5$c, vue.toDisplayString(comment.updated_at.split("T")[0]), 1),
+                vue.createElementVNode("div", _hoisted_6$8, [
+                  vue.createVNode(vue.unref(_sfc_main$F), {
                     size: 1,
                     class: "edit",
                     icon: "edit",
                     onClick: ($event) => vue.isRef(editComment) ? editComment.value = comment : editComment = comment
                   }, null, 8, ["onClick"]),
-                  vue.createVNode(vue.unref(_sfc_main$H), {
+                  vue.createVNode(vue.unref(_sfc_main$F), {
                     size: 1.2,
                     class: "delete",
                     icon: "delete",
                     onClick: ($event) => deleteComment(comment.id)
                   }, null, 8, ["onClick"]),
-                  vue.createVNode(vue.unref(_sfc_main$H), {
+                  vue.createVNode(vue.unref(_sfc_main$F), {
                     size: 1.2,
                     class: "save",
                     icon: "save",
@@ -17835,7 +17885,7 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
                   })
                 ])
               ]),
-              vue.unref(editComment) !== null && ((_c = vue.unref(editComment)) == null ? void 0 : _c.id) === comment.id ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$I), {
+              vue.unref(editComment) !== null && ((_c = vue.unref(editComment)) == null ? void 0 : _c.id) === comment.id ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$G), {
                 key: 0,
                 modelValue: vue.unref(editComment).body_html,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.unref(editComment).body_html = $event),
@@ -17844,12 +17894,12 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
                 key: 1,
                 class: "editor-wrapper",
                 innerHTML: comment.body_html
-              }, null, 8, _hoisted_7$5))
+              }, null, 8, _hoisted_7$4))
             ], 2);
           }), 128))
         ]),
         vue.createElementVNode("div", _hoisted_8$2, [
-          vue.createVNode(vue.unref(_sfc_main$I), {
+          vue.createVNode(vue.unref(_sfc_main$G), {
             class: "comment-input",
             modelValue: vue.unref(bodyHtml),
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(bodyHtml) ? bodyHtml.value = $event : bodyHtml = $event),
@@ -17869,10 +17919,10 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Comments = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-c4b41dc0"]]);
-const _hoisted_1$A = { class: "page-top" };
+const Comments = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-c4b41dc0"]]);
+const _hoisted_1$z = { class: "page-top" };
 const _hoisted_2$q = { class: "top-title" };
-const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
   __name: "PageTitle",
   props: {
     value: {
@@ -17882,7 +17932,7 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [
         vue.createElementVNode("h1", _hoisted_2$q, [
           vue.renderSlot(_ctx.$slots, "default"),
           vue.createTextVNode(" " + vue.toDisplayString(__props.value), 1)
@@ -17891,14 +17941,14 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$z = { class: "table-list-wrap h-100" };
+const _hoisted_1$y = { class: "table-list-wrap h-100" };
 const _hoisted_2$p = { class: "infinite-wrapper" };
-const _hoisted_3$k = { class: "row first-row" };
-const _hoisted_4$e = ["onClick"];
-const _hoisted_5$c = { class: "flex" };
-const _hoisted_6$8 = ["onClick"];
-const _hoisted_7$4 = { key: 1 };
-const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_3$j = { class: "row first-row" };
+const _hoisted_4$d = ["onClick"];
+const _hoisted_5$b = { class: "flex" };
+const _hoisted_6$7 = ["onClick"];
+const _hoisted_7$3 = { key: 1 };
+const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
   __name: "TableSchema",
   props: {
     data: {},
@@ -17932,27 +17982,27 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
       emit2("orderBy", `${fieldname} ${sortDirection.value}`.trim());
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, [
         vue.createElementVNode("table", _hoisted_2$p, [
-          vue.createElementVNode("thead", _hoisted_3$k, [
+          vue.createElementVNode("thead", _hoisted_3$j, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(computedSchema.value, (field) => {
               return vue.openBlock(), vue.createElementBlock("th", {
                 class: "col",
                 key: field.id,
                 onClick: ($event) => sort2((field == null ? void 0 : field.id) || "")
               }, [
-                vue.createElementVNode("div", _hoisted_5$c, [
+                vue.createElementVNode("div", _hoisted_5$b, [
                   vue.createTextVNode(vue.toDisplayString(field.label || vue.unref(keyToLabel)(field.id)) + " ", 1),
                   vue.createElementVNode("div", {
                     class: vue.normalizeClass(["list-arrows", { sorted: vue.unref(sortField) === field.id }])
                   }, [
-                    vue.createVNode(vue.unref(_sfc_main$H), {
+                    vue.createVNode(vue.unref(_sfc_main$F), {
                       class: vue.normalizeClass({ desc: vue.unref(sortDirection) === "DESC" }),
                       icon: "keyboard_arrow_up"
                     }, null, 8, ["class"])
                   ], 2)
                 ])
-              ], 8, _hoisted_4$e);
+              ], 8, _hoisted_4$d);
             }), 128))
           ]),
           vue.createElementVNode("tbody", {
@@ -17974,15 +18024,15 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
                       key: 0,
                       row,
                       field
-                    }, void 0, true) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$4, [
-                      vue.createVNode(vue.unref(_sfc_main$i), {
+                    }, void 0, true) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$3, [
+                      vue.createVNode(vue.unref(_sfc_main$g), {
                         field,
                         modelValue: row
                       }, null, 8, ["field", "modelValue"])
                     ]))
                   ]);
                 }), 128))
-              ], 8, _hoisted_6$8);
+              ], 8, _hoisted_6$7);
             }), 128))
           ], 2)
         ])
@@ -17990,16 +18040,16 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-f3641508"]]);
-const _sfc_main$v = {};
-const _hoisted_1$y = { class: "flex space-between" };
+const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-f3641508"]]);
+const _sfc_main$t = {};
+const _hoisted_1$x = { class: "flex space-between" };
 function _sfc_render$1(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, [
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
     vue.renderSlot(_ctx.$slots, "default")
   ]);
 }
-const TopBar = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$1]]);
-const _sfc_main$u = {};
+const TopBar = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$1]]);
+const _sfc_main$s = {};
 function _sfc_render(_ctx, _cache) {
   const _component_router_view = vue.resolveComponent("router-view");
   return vue.openBlock(), vue.createBlock(_component_router_view, null, {
@@ -18021,8 +18071,8 @@ function _sfc_render(_ctx, _cache) {
     _: 1
   });
 }
-const RouterWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render]]);
-const _hoisted_1$x = {
+const RouterWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render]]);
+const _hoisted_1$w = {
   key: 0,
   class: "data"
 };
@@ -18030,11 +18080,11 @@ const _hoisted_2$o = {
   key: 0,
   class: "data-row"
 };
-const _hoisted_3$j = { class: "key" };
-const _hoisted_4$d = { key: 1 };
-const _hoisted_5$b = { class: "key" };
-const _hoisted_6$7 = { class: "vlue" };
-const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_3$i = { class: "key" };
+const _hoisted_4$c = { key: 1 };
+const _hoisted_5$a = { class: "key" };
+const _hoisted_6$6 = { class: "vlue" };
+const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
   __name: "DataPreview",
   props: /* @__PURE__ */ vue.mergeModels({
     schema: {},
@@ -18048,8 +18098,8 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     const itemData = vue.useModel(__props, "data");
     return (_ctx, _cache) => {
       var _a2;
-      return __props.data ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
-        _ctx.title ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
+      return __props.data ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
+        _ctx.title ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$o), {
           key: 0,
           label: _ctx.title
         }, null, 8, ["label"])) : vue.createCommentVNode("", true),
@@ -18058,8 +18108,8 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
             key: field.id
           }, [
             vue.unref(iffer)(field, itemData.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$o, [
-              vue.createElementVNode("div", _hoisted_3$j, vue.toDisplayString((field == null ? void 0 : field.label) || vue.unref(keyToLabel)(field.id)), 1),
-              vue.createVNode(vue.unref(_sfc_main$i), {
+              vue.createElementVNode("div", _hoisted_3$i, vue.toDisplayString((field == null ? void 0 : field.label) || vue.unref(keyToLabel)(field.id)), 1),
+              vue.createVNode(vue.unref(_sfc_main$g), {
                 field,
                 modelValue: itemData.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => itemData.value = $event)
@@ -18067,14 +18117,14 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
             ])) : vue.createCommentVNode("", true)
           ], 64);
         }), 128)),
-        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$d, [
+        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$c, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(Object.entries(itemData.value), ([key, value]) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               class: "data-row",
               key
             }, [
-              vue.createElementVNode("div", _hoisted_5$b, vue.toDisplayString(vue.unref(keyToLabel)(key)), 1),
-              vue.createElementVNode("div", _hoisted_6$7, vue.toDisplayString(value), 1)
+              vue.createElementVNode("div", _hoisted_5$a, vue.toDisplayString(vue.unref(keyToLabel)(key)), 1),
+              vue.createElementVNode("div", _hoisted_6$6, vue.toDisplayString(value), 1)
             ]);
           }), 128))
         ])) : vue.createCommentVNode("", true),
@@ -18083,8 +18133,8 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-bb2526f9"]]);
-const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-bb2526f9"]]);
+const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
   __name: "Card",
   props: {
     thin: { type: Boolean },
@@ -18111,8 +18161,8 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$w = ["src", "alt"];
-const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$v = ["src", "alt"];
+const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
   __name: "Avatar",
   props: {
     fallback: {},
@@ -18130,7 +18180,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
           key: 0,
           src: _ctx.src,
           alt: _ctx.name
-        }, null, 8, _hoisted_1$w)) : (vue.openBlock(), vue.createElementBlock("p", {
+        }, null, 8, _hoisted_1$v)) : (vue.openBlock(), vue.createElementBlock("p", {
           key: 1,
           style: vue.normalizeStyle({ "line-height": `${_ctx.size}px`, "font-size": `calc(1.5rem * ${_ctx.size} / 50)` })
         }, vue.toDisplayString(_ctx.fallback || vue.unref(initials)(_ctx.name || "")), 5))
@@ -18138,8 +18188,8 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-c38bc02a"]]);
-const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-c38bc02a"]]);
+const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   __name: "Title",
   props: {
     value: {
@@ -18167,7 +18217,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
   __name: "Accordion",
   setup(__props) {
     const state = vue.reactive({
@@ -18181,8 +18231,8 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$v = ["onClick"];
-const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$u = ["onClick"];
+const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
   __name: "ComboBox",
   props: {
     options: {},
@@ -18190,7 +18240,9 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     disabled: { type: Boolean },
     modelValue: {},
     searchable: { type: Boolean },
-    required: { type: Boolean }
+    required: { type: Boolean },
+    label: {},
+    fullWidth: { type: Boolean }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -18219,10 +18271,10 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
       });
       if (!option2)
         return value;
-      return label(option2);
+      return getLabel(option2);
     };
     const emit2 = __emit;
-    const label = (option2) => {
+    const getLabel = (option2) => {
       if (typeof option2 === "string")
         return option2;
       if (typeof option2 === "number")
@@ -18258,13 +18310,13 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     }, { immediate: true });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(kt$1), {
-        placement: "auto-start",
+        placement: "bottom-start",
         class: "bagel-input combobox"
       }, {
         popper: vue.withCtx(({ hide }) => [
-          vue.createVNode(vue.unref(_sfc_main$s), {
-            thin: "",
-            class: "combobox-options"
+          vue.createVNode(vue.unref(_sfc_main$q), {
+            class: "combobox-options p-05",
+            style: vue.normalizeStyle({ width: _ctx.fullWidth ? "100%" : "auto" })
           }, {
             default: vue.withCtx(() => [
               _ctx.searchable ? (vue.openBlock(), vue.createBlock(vue.unref(TextInput), {
@@ -18279,50 +18331,59 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
               }, null, 8, ["modelValue"])) : vue.createCommentVNode("", true),
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredOptions.value, (option2, i2) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
-                  class: vue.normalizeClass(["combobox-option", { selected: option2 === vue.unref(selectedItem) }]),
+                  class: vue.normalizeClass(["combobox-option hover gap-1", { selected: option2 === vue.unref(selectedItem) }]),
                   key: `${option2}${i2}`,
                   onClick: () => {
                     select2(option2);
                     hide();
                   }
                 }, [
-                  vue.createElementVNode("span", null, vue.toDisplayString(label(option2)), 1),
-                  isSelected(option2) ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$H), {
+                  isSelected(option2) ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$F), {
                     key: 0,
                     icon: "check"
-                  })) : vue.createCommentVNode("", true)
-                ], 10, _hoisted_1$v);
-              }), 128))
+                  })) : vue.createCommentVNode("", true),
+                  !isSelected(option2) ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$F), {
+                    key: 1,
+                    class: "opacity-3",
+                    icon: "fiber_manual_record"
+                  })) : vue.createCommentVNode("", true),
+                  vue.createElementVNode("span", null, vue.toDisplayString(getLabel(option2)), 1)
+                ], 10, _hoisted_1$u);
+              }), 128)),
+              vue.renderSlot(_ctx.$slots, "last", {}, void 0, true)
             ]),
             _: 2
-          }, 1024)
+          }, 1032, ["style"])
         ]),
         default: vue.withCtx(() => [
-          vue.createElementVNode("button", {
-            type: "button",
-            class: "combobox-btn",
-            onClick: toggle
-          }, [
-            vue.createTextVNode(vue.toDisplayString(valueToLabel(vue.unref(selectedItem)) || _ctx.placeholder || "Select") + " ", 1),
-            vue.createVNode(vue.unref(_sfc_main$H), vue.normalizeProps(vue.guardReactiveProps({ "icon": vue.unref(open) ? "unfold_less" : "unfold_more" })), null, 16)
-          ]),
-          _ctx.required ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
-            key: 0,
-            style: { "width": "0", "height": "0", "position": "absolute", "opacity": "0", "z-index": "-1" },
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(selectedItem) ? selectedItem.value = $event : selectedItem = $event),
-            required: ""
-          }, null, 512)), [
-            [vue.vModelText, vue.unref(selectedItem)]
-          ]) : vue.createCommentVNode("", true)
+          vue.createElementVNode("label", null, [
+            vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
+            vue.createElementVNode("button", {
+              type: "button",
+              class: "combobox-btn",
+              onClick: toggle
+            }, [
+              vue.createTextVNode(vue.toDisplayString(valueToLabel(vue.unref(selectedItem)) || _ctx.placeholder || "Select") + " ", 1),
+              vue.createVNode(vue.unref(_sfc_main$F), vue.normalizeProps(vue.guardReactiveProps({ "icon": vue.unref(open) ? "unfold_less" : "unfold_more" })), null, 16)
+            ]),
+            _ctx.required ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+              key: 0,
+              style: { "width": "0", "height": "0", "position": "absolute", "opacity": "0", "z-index": "-1" },
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(selectedItem) ? selectedItem.value = $event : selectedItem = $event),
+              required: ""
+            }, null, 512)), [
+              [vue.vModelText, vue.unref(selectedItem)]
+            ]) : vue.createCommentVNode("", true)
+          ])
         ]),
-        _: 1
+        _: 3
       });
     };
   }
 });
-const ComboBox = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-ceeb5855"]]);
-const _hoisted_1$u = ["dismissable"];
-const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+const ComboBox = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-14fbb20b"]]);
+const _hoisted_1$t = ["dismissable"];
+const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
   __name: "Alert",
   props: {
     message: {},
@@ -18342,7 +18403,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["alert", [_ctx.type]]),
         dismissable: _ctx.dismissable
       }, [
-        vue.createVNode(vue.unref(_sfc_main$H), {
+        vue.createVNode(vue.unref(_sfc_main$F), {
           class: "alert_icon",
           icon: _ctx.type,
           size: 2,
@@ -18356,12 +18417,12 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
           class: "alert_close",
           icon: "close"
         })
-      ], 10, _hoisted_1$u)) : vue.createCommentVNode("", true);
+      ], 10, _hoisted_1$t)) : vue.createCommentVNode("", true);
     };
   }
 });
-const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-94bfcb05"]]);
-const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-94bfcb05"]]);
+const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
   __name: "Badge",
   props: {
     color: {},
@@ -18376,13 +18437,13 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(["pill", [_ctx.color]])
       }, [
-        _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$H), {
+        _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$F), {
           key: 0,
           class: "inline",
           icon: _ctx.icon
         }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
         vue.createTextVNode(" " + vue.toDisplayString(_ctx.text) + " ", 1),
-        props2["icon.end"] ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$H), {
+        props2["icon.end"] ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$F), {
           key: 1,
           class: "inline",
           icon: props2["icon.end"]
@@ -18391,11 +18452,11 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-ad24530a"]]);
-const _hoisted_1$t = { class: "bgl_vid" };
+const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-10743b06"]]);
+const _hoisted_1$s = { class: "bgl_vid" };
 const _hoisted_2$n = ["src"];
-const _hoisted_3$i = ["src", "autoplay", "muted", "loop", "controls"];
-const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_3$h = ["src", "autoplay", "muted", "loop", "controls"];
+const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
   __name: "BglVideo",
   props: {
     src: {},
@@ -18434,7 +18495,7 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     });
     console.log("Video URL:", videoUrl.value);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
         embedType.value ? (vue.openBlock(), vue.createElementBlock("iframe", {
           key: 0,
           src: videoUrl.value,
@@ -18451,18 +18512,18 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
           style: vue.normalizeStyle({ aspectRatio: aspectRatio.value }),
           controls: _ctx.controls,
           playsinline: ""
-        }, null, 12, _hoisted_3$i))
+        }, null, 12, _hoisted_3$h))
       ]);
     };
   }
 });
-const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-23835d69"]]);
-const _hoisted_1$s = {
+const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-23835d69"]]);
+const _hoisted_1$r = {
   key: 0,
   class: "blocker"
 };
 const _hoisted_2$m = { class: "Handlers" };
-const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
   __name: "Carousel",
   props: {
     autoHeight: {
@@ -18612,7 +18673,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
           ref_key: "bglSlider",
           ref: bglSlider
         }, [
-          vue.unref(isDragging) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s)) : vue.createCommentVNode("", true),
+          vue.unref(isDragging) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r)) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ], 34),
         vue.createElementVNode("div", _hoisted_2$m, [
@@ -18627,13 +18688,8 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-dc11f21a"]]);
-const _hoisted_1$r = {
-  key: 1,
-  type: "submit",
-  hidden: ""
-};
-const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-7e8d16cb"]]);
+const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
   __name: "BglForm",
   props: {
     label: {},
@@ -18645,10 +18701,12 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
   },
   emits: ["update:modelValue", "submit", "dirty"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    const slots = vue.useSlots();
     const { showModal } = useModal();
     const props2 = __props;
     const instAt = /* @__PURE__ */ new Date();
     const timeSinceInst = () => (/* @__PURE__ */ new Date()).getTime() - instAt.getTime();
+    let formData = vue.ref(props2.modelValue);
     const emit2 = __emit;
     let isDirty = vue.ref(false);
     const data2 = vue.computed({
@@ -18657,9 +18715,10 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
           emit2("dirty");
           isDirty.value = true;
         }
+        formData.value = val;
         emit2("update:modelValue", val);
       },
-      get: () => props2.modelValue || {}
+      get: () => props2.modelValue || formData.value
     });
     const form = vue.ref();
     const validateForm = () => {
@@ -18667,10 +18726,18 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
       return (_b = (_a2 = form.value) == null ? void 0 : _a2.reportValidity) == null ? void 0 : _b.call(_a2);
     };
     const clearForm = () => Object.assign(data2.value, {});
+    let formStatus = vue.ref("idle");
     const runSubmit = () => {
-      validateForm();
-      emit2("submit", data2.value);
-      clearForm();
+      var _a2;
+      console.log("runSubmit");
+      try {
+        validateForm();
+        (_a2 = props2.onSubmit) == null ? void 0 : _a2.call(props2, data2.value);
+        clearForm();
+        formStatus.value = "success";
+      } catch (e) {
+        formStatus.value = "error";
+      }
     };
     const i18nT = (val) => val;
     const deleteItem = () => {
@@ -18695,39 +18762,42 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     };
     __expose({ validateForm, deleteItem, isDirty: isDirty.value });
     return (_ctx, _cache) => {
-      return _ctx.id ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.schema, (field, i2) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$i), {
-          key: field.id || `${i2}p`,
-          field,
-          modelValue: data2.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => data2.value = $event)
-        }, null, 8, ["field", "modelValue"]);
-      }), 128)) : (vue.openBlock(), vue.createElementBlock("form", {
-        key: 1,
-        ref_key: "form",
-        ref: form,
-        onSubmit: vue.withModifiers(runSubmit, ["prevent"])
-      }, [
-        _ctx.label ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
-          key: 0,
-          tag: "h4",
-          label: _ctx.label
-        }, null, 8, ["label"])) : vue.createCommentVNode("", true),
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.schema, (field, i2) => {
-          return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$i), {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        _ctx.id ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.schema, (field, i2) => {
+          return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$g), {
             key: field.id || `${i2}p`,
             field,
             modelValue: data2.value,
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => data2.value = $event)
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => data2.value = $event)
           }, null, 8, ["field", "modelValue"]);
-        }), 128)),
-        vue.renderSlot(_ctx.$slots, "submit"),
-        _ctx.onSubmit ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_1$r)) : vue.createCommentVNode("", true)
-      ], 544));
+        }), 128)) : !vue.unref(slots).success || vue.unref(formStatus) !== "success" ? (vue.openBlock(), vue.createElementBlock("form", {
+          key: 1,
+          ref_key: "form",
+          ref: form,
+          onSubmit: vue.withModifiers(runSubmit, ["prevent"])
+        }, [
+          _ctx.label ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$o), {
+            key: 0,
+            tag: "h4",
+            label: _ctx.label
+          }, null, 8, ["label"])) : vue.createCommentVNode("", true),
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.schema, (field, i2) => {
+            return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$g), {
+              key: field.id || `${i2}p`,
+              field,
+              modelValue: data2.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => data2.value = $event)
+            }, null, 8, ["field", "modelValue"]);
+          }), 128)),
+          vue.renderSlot(_ctx.$slots, "submit")
+        ], 544)) : vue.createCommentVNode("", true),
+        vue.unref(formStatus) === "success" ? vue.renderSlot(_ctx.$slots, "success", { key: 2 }) : vue.createCommentVNode("", true),
+        vue.unref(formStatus) === "error" ? vue.renderSlot(_ctx.$slots, "error", { key: 3 }) : vue.createCommentVNode("", true)
+      ], 64);
     };
   }
 });
-const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
   __name: "BglField",
   props: {
     field: {},
@@ -18740,7 +18810,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
       if (props2.field.$el === "text")
         return TextInput;
       if (props2.field.$el === "select")
-        return _sfc_main$e;
+        return ComboBox;
       if (props2.field.$el === "toggle")
         return ToggleInput;
       if (props2.field.$el === "check")
@@ -18795,7 +18865,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
           })
         ],
         defaultValue: _ctx.field.defaultValue,
-        options: _ctx.field.options,
+        options: vue.unref(bindAttrs)({ options: _ctx.field.options }, fieldData.value, _ctx.modelValue).options,
         helptext: _ctx.field.helptext
       }), {
         default: vue.withCtx(() => {
@@ -18827,11 +18897,11 @@ const _hoisted_2$l = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.cr
 }, [
   /* @__PURE__ */ vue.createElementVNode("path", { d: "M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" })
 ], -1));
-const _hoisted_3$h = [
+const _hoisted_3$g = [
   _hoisted_2$l
 ];
-const _hoisted_4$c = ["required", "id"];
-const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_4$b = ["required", "id"];
+const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
   __name: "CheckInput",
   props: /* @__PURE__ */ vue.mergeModels({
     label: {},
@@ -18854,14 +18924,14 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("div", {
           class: vue.normalizeClass(["check-square", { checked: checked.value }]),
           onClick: _cache[0] || (_cache[0] = ($event) => checked.value = !checked.value)
-        }, _hoisted_3$h, 2),
+        }, _hoisted_3$g, 2),
         vue.createElementVNode("label", null, [
           vue.withDirectives(vue.createElementVNode("input", {
             required: _ctx.required,
             id: _ctx.id,
             type: "checkbox",
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => checked.value = $event)
-          }, null, 8, _hoisted_4$c), [
+          }, null, 8, _hoisted_4$b), [
             [vue.vModelCheckbox, checked.value]
           ]),
           vue.renderSlot(_ctx.$slots, "label", {}, () => [
@@ -18872,7 +18942,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-e8219826"]]);
+const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-e8219826"]]);
 function toDate(argument) {
   const argStr = Object.prototype.toString.call(argument);
   if (argument instanceof Date || typeof argument === "object" && argStr === "[object Date]") {
@@ -27483,7 +27553,7 @@ Object.entries(Mo).forEach(([e, t]) => {
 });
 const _hoisted_1$p = ["title"];
 const _hoisted_2$k = { key: 0 };
-const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
   __name: "DateInput",
   props: {
     label: {},
@@ -27535,8 +27605,8 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$o = ["title"];
 const _hoisted_2$j = { key: 0 };
-const _hoisted_3$g = ["value", "placeholder"];
-const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_3$f = ["value", "placeholder"];
+const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   __name: "JSONInput",
   props: {
     description: { default: "" },
@@ -27567,12 +27637,12 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
           onInput: handleInput,
           class: vue.normalizeClass({ "no-edit": !_ctx.editMode }),
           placeholder: _ctx.placeholder
-        }, null, 42, _hoisted_3$g)
+        }, null, 42, _hoisted_3$f)
       ], 10, _hoisted_1$o);
     };
   }
 });
-const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-1fc4f739"]]);
+const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-1fc4f739"]]);
 function isEmpty(opt) {
   if (opt === 0)
     return false;
@@ -28565,11 +28635,11 @@ const _hoisted_1$n = {
   class: "multiselect__tags"
 };
 const _hoisted_2$i = { class: "multiselect__tags-wrap" };
-const _hoisted_3$f = { class: "multiselect__spinner" };
-const _hoisted_4$b = { key: 0 };
-const _hoisted_5$a = { class: "multiselect__option" };
-const _hoisted_6$6 = { class: "multiselect__option" };
-const _hoisted_7$3 = /* @__PURE__ */ vue.createTextVNode("No elements found. Consider changing the search query.");
+const _hoisted_3$e = { class: "multiselect__spinner" };
+const _hoisted_4$a = { key: 0 };
+const _hoisted_5$9 = { class: "multiselect__option" };
+const _hoisted_6$5 = { class: "multiselect__option" };
+const _hoisted_7$2 = /* @__PURE__ */ vue.createTextVNode("No elements found. Consider changing the search query.");
 const _hoisted_8$1 = { class: "multiselect__option" };
 const _hoisted_9$1 = /* @__PURE__ */ vue.createTextVNode("List is empty.");
 function render$e(_ctx, _cache, $props, $setup, $data, $options) {
@@ -28660,7 +28730,7 @@ function render$e(_ctx, _cache, $props, $setup, $data, $options) {
             vue.renderSlot(_ctx.$slots, "loading", {}, () => [
               vue.withDirectives(vue.createVNode(
                 "div",
-                _hoisted_3$f,
+                _hoisted_3$e,
                 null,
                 512
                 /* NEED_PATCH */
@@ -28761,8 +28831,8 @@ function render$e(_ctx, _cache, $props, $setup, $data, $options) {
               id: "listbox-" + _ctx.id
             }, [
               vue.renderSlot(_ctx.$slots, "beforeList"),
-              _ctx.multiple && _ctx.max === _ctx.internalValue.length ? (vue.openBlock(), vue.createBlock("li", _hoisted_4$b, [
-                vue.createVNode("span", _hoisted_5$a, [
+              _ctx.multiple && _ctx.max === _ctx.internalValue.length ? (vue.openBlock(), vue.createBlock("li", _hoisted_4$a, [
+                vue.createVNode("span", _hoisted_5$9, [
                   vue.renderSlot(_ctx.$slots, "maxElements", {}, () => [
                     vue.createTextVNode(
                       "Maximum of " + vue.toDisplayString(_ctx.max) + " options selected. First remove a selected option to select another.",
@@ -28836,9 +28906,9 @@ function render$e(_ctx, _cache, $props, $setup, $data, $options) {
                 "li",
                 null,
                 [
-                  vue.createVNode("span", _hoisted_6$6, [
+                  vue.createVNode("span", _hoisted_6$5, [
                     vue.renderSlot(_ctx.$slots, "noResult", { search: _ctx.search }, () => [
-                      _hoisted_7$3
+                      _hoisted_7$2
                     ])
                   ])
                 ],
@@ -28879,7 +28949,7 @@ function render$e(_ctx, _cache, $props, $setup, $data, $options) {
 script$e.render = render$e;
 const Multiselect = script$e;
 const _hoisted_1$m = ["for"];
-const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
   __name: "SelectInput",
   props: {
     required: { type: Boolean },
@@ -28944,8 +29014,8 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$l = ["title"];
 const _hoisted_2$h = { key: 0 };
-const _hoisted_3$e = ["value", "placeholder"];
-const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_3$d = ["value", "placeholder"];
+const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   __name: "RichTextEditor",
   props: {
     description: { default: "" },
@@ -28976,12 +29046,12 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
           onInput: handleInput,
           placeholder: _ctx.placeholder,
           class: vue.normalizeClass({ "no-edit": !_ctx.editMode })
-        }, null, 42, _hoisted_3$e)
+        }, null, 42, _hoisted_3$d)
       ], 10, _hoisted_1$l);
     };
   }
 });
-const RichTextEditor = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-69a60381"]]);
+const RichTextEditor = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-69a60381"]]);
 /*!
   * vue-draggable-next v2.2.0
   * (c) 2023 Anish George
@@ -31506,11 +31576,11 @@ const VueDraggableNext = vue.defineComponent({
 });
 const _hoisted_1$k = ["title"];
 const _hoisted_2$g = { class: "bagel-input" };
-const _hoisted_3$d = { class: "table-side-scroll" };
-const _hoisted_4$a = { class: "table-header" };
-const _hoisted_5$9 = { class: "table-reorder" };
-const _hoisted_6$5 = { class: "table-action" };
-const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_3$c = { class: "table-side-scroll" };
+const _hoisted_4$9 = { class: "table-header" };
+const _hoisted_5$8 = { class: "table-reorder" };
+const _hoisted_6$4 = { class: "table-action" };
+const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   __name: "TableField",
   props: {
     description: { default: "" },
@@ -31578,8 +31648,8 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("div", _hoisted_2$g, [
           vue.createElementVNode("label", null, vue.toDisplayString((_a2 = vue.unref(fieldMeta)) == null ? void 0 : _a2.label), 1)
         ]),
-        vue.createElementVNode("div", _hoisted_3$d, [
-          vue.createElementVNode("div", _hoisted_4$a, [
+        vue.createElementVNode("div", _hoisted_3$c, [
+          vue.createElementVNode("div", _hoisted_4$9, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_b = vue.unref(entityMeta)) == null ? void 0 : _b.fields, (field) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 class: vue.normalizeClass(["header-col", vue.unref(formatString)(field.fieldtype, "pascal")]),
@@ -31606,8 +31676,8 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
                       class: "flex table-row",
                       key: row.id
                     }, [
-                      vue.createElementVNode("div", _hoisted_5$9, [
-                        vue.createVNode(vue.unref(_sfc_main$H), { icon: "more_vert" })
+                      vue.createElementVNode("div", _hoisted_5$8, [
+                        vue.createVNode(vue.unref(_sfc_main$F), { icon: "more_vert" })
                       ]),
                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_a3 = vue.unref(entityMeta)) == null ? void 0 : _a3.fields, (field) => {
                         return vue.openBlock(), vue.createElementBlock("div", {
@@ -31623,8 +31693,8 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
                           }, null, 8, ["field-meta", "bagel-app", "onUpdate:modelValue", "model-value"])
                         ], 2);
                       }), 128)),
-                      vue.createElementVNode("div", _hoisted_6$5, [
-                        vue.createVNode(vue.unref(_sfc_main$H), {
+                      vue.createElementVNode("div", _hoisted_6$4, [
+                        vue.createVNode(vue.unref(_sfc_main$F), {
                           icon: "delete",
                           onClick: ($event) => removeRow(index2)
                         }, null, 8, ["onClick"])
@@ -31654,13 +31724,13 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TableField = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-cdacf10e"]]);
+const TableField = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-cdacf10e"]]);
 const _hoisted_1$j = ["title"];
 const _hoisted_2$f = ["for"];
-const _hoisted_3$c = ["title", "autocomplete", "id", "type", "placeholder", "disabled", "required", "pattern"];
-const _hoisted_4$9 = ["title", "id", "type", "rows", "placeholder", "disabled", "required", "pattern"];
-const _hoisted_5$8 = { key: 2 };
-const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_3$b = ["title", "autocomplete", "id", "type", "placeholder", "disabled", "required", "pattern"];
+const _hoisted_4$8 = ["title", "id", "type", "rows", "placeholder", "disabled", "required", "pattern"];
+const _hoisted_5$7 = { key: 2 };
+const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   __name: "TextInput",
   props: {
     id: {},
@@ -31683,7 +31753,8 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     autoheight: { type: Boolean },
     code: { type: Boolean },
     lines: {},
-    autocomplete: { default: "off" }
+    autocomplete: { default: "off" },
+    autofocus: { type: Boolean }
   },
   emits: ["update:modelValue", "debounce"],
   setup(__props, { emit: __emit }) {
@@ -31736,6 +31807,13 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
       },
       { immediate: true }
     );
+    vue.onMounted(() => {
+      if (props2.autofocus)
+        setTimeout(() => {
+          var _a2;
+          return (_a2 = input.value) == null ? void 0 : _a2.focus();
+        }, 10);
+    });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(["bagel-input text-input", {
@@ -31766,7 +31844,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
             disabled: !vue.unref(editMode),
             required: _ctx.required,
             pattern: _ctx.pattern
-          }, _ctx.nativeInputAttrs, { onDblclick: toggleEditAction }), null, 16, _hoisted_3$c)), [
+          }, _ctx.nativeInputAttrs, { onDblclick: toggleEditAction }), null, 16, _hoisted_3$b)), [
             [vue.vModelDynamic, vue.unref(inputVal)]
           ]) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", vue.mergeProps({
             key: 1,
@@ -31781,17 +31859,17 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
             disabled: !vue.unref(editMode),
             required: _ctx.required,
             pattern: _ctx.pattern
-          }, _ctx.nativeInputAttrs, { onDblclick: toggleEditAction }), null, 16, _hoisted_4$9)), [
+          }, _ctx.nativeInputAttrs, { onDblclick: toggleEditAction }), null, 16, _hoisted_4$8)), [
             [vue.vModelText, vue.unref(inputVal)]
           ]),
-          _ctx.helptext ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_5$8, vue.toDisplayString(_ctx.helptext), 1)) : vue.createCommentVNode("", true)
+          _ctx.helptext ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_5$7, vue.toDisplayString(_ctx.helptext), 1)) : vue.createCommentVNode("", true)
         ], 8, _hoisted_2$f),
-        _ctx.iconStart ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$H), {
+        _ctx.iconStart ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$F), {
           key: 0,
           class: "iconStart",
           icon: _ctx.iconStart
         }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-        _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$H), {
+        _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$F), {
           key: 1,
           icon: _ctx.icon
         }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -31807,9 +31885,9 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-bdd555bb"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-cd4c27ad"]]);
 const _hoisted_1$i = { class: "primary-checkbox" };
-const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   __name: "Checkbox",
   props: {
     "modelValue": {
@@ -31830,16 +31908,16 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
           [vue.vModelCheckbox, val.value]
         ]),
         vue.createElementVNode("span", null, [
-          vue.createVNode(vue.unref(_sfc_main$H), { icon: "check" })
+          vue.createVNode(vue.unref(_sfc_main$F), { icon: "check" })
         ])
       ]);
     };
   }
 });
-const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-e4cbb088"]]);
+const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-e4cbb088"]]);
 const _hoisted_1$h = ["title"];
 const _hoisted_2$e = ["id", "placeholder", "required"];
-const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
   __name: "ColorPicker",
   props: {
     label: {},
@@ -31885,13 +31963,13 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$g = { class: "datetime-wrap" };
 const _hoisted_2$d = { class: "date-wrap" };
-const _hoisted_3$b = {
+const _hoisted_3$a = {
   key: 0,
   class: "time-wrap"
 };
-const _hoisted_4$8 = ["id", "name", "value"];
-const _hoisted_5$7 = ["for"];
-const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_4$7 = ["id", "name", "value"];
+const _hoisted_5$6 = ["for"];
+const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   __name: "DatePicker",
   props: {
     name: {},
@@ -31923,7 +32001,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
             _: 1
           }, 16, ["modelValue"])
         ]),
-        _ctx.showTimeWrap ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$b, [
+        _ctx.showTimeWrap ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$a, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(hours), (hr2) => {
             return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: hr2 }, [
               vue.withDirectives(vue.createElementVNode("input", {
@@ -31932,12 +32010,12 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
                 name: _ctx.name,
                 value: hr2,
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedHour.value = $event)
-              }, null, 8, _hoisted_4$8), [
+              }, null, 8, _hoisted_4$7), [
                 [vue.vModelRadio, selectedHour.value]
               ]),
               vue.createElementVNode("label", {
                 for: `${hr2}_${_ctx.name}`
-              }, vue.toDisplayString(hr2), 9, _hoisted_5$7)
+              }, vue.toDisplayString(hr2), 9, _hoisted_5$6)
             ], 64);
           }), 128))
         ])) : vue.createCommentVNode("", true)
@@ -31947,10 +32025,10 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$f = { class: "bagel-input" };
 const _hoisted_2$c = { class: "pb-025" };
-const _hoisted_3$a = { class: "flex gap-05 flex-wrap" };
-const _hoisted_4$7 = ["id", "name", "value", "checked"];
-const _hoisted_5$6 = ["for"];
-const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_3$9 = { class: "flex gap-05 flex-wrap" };
+const _hoisted_4$6 = ["id", "name", "value", "checked"];
+const _hoisted_5$5 = ["for"];
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   __name: "RadioPillsInput",
   props: {
     options: {},
@@ -31991,7 +32069,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
         vue.createElementVNode("label", _hoisted_2$c, vue.toDisplayString(_ctx.label), 1),
-        vue.createElementVNode("div", _hoisted_3$a, [
+        vue.createElementVNode("div", _hoisted_3$9, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(cumputedOptions.value, ({ optioId, label, value }, index2) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               class: "radio-pill",
@@ -32004,8 +32082,8 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
                 value,
                 checked: vue.unref(selectedValue) === value,
                 onChange: handleSelect
-              }, null, 40, _hoisted_4$7),
-              vue.createElementVNode("label", { for: optioId }, vue.toDisplayString(label), 9, _hoisted_5$6)
+              }, null, 40, _hoisted_4$6),
+              vue.createElementVNode("label", { for: optioId }, vue.toDisplayString(label), 9, _hoisted_5$5)
             ]);
           }), 128))
         ])
@@ -32013,17 +32091,17 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-e47ae8b5"]]);
+const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-e47ae8b5"]]);
 const _hoisted_1$e = { class: "bagel-input" };
 const _hoisted_2$b = {
   key: 0,
   class: "imagePreviewWrap"
 };
-const _hoisted_3$9 = ["src"];
-const _hoisted_4$6 = { class: "previewName" };
-const _hoisted_5$5 = ["src"];
-const _hoisted_6$4 = { class: "no-margin" };
-const _hoisted_7$2 = {
+const _hoisted_3$8 = ["src"];
+const _hoisted_4$5 = { class: "previewName" };
+const _hoisted_5$4 = ["src"];
+const _hoisted_6$3 = { class: "no-margin" };
+const _hoisted_7$1 = {
   key: 0,
   class: "imagePreviewWrap"
 };
@@ -32035,7 +32113,7 @@ const _hoisted_12 = {
   key: 0,
   class: "progress"
 };
-const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "FileUpload",
   props: /* @__PURE__ */ vue.mergeModels({
     label: {},
@@ -32149,17 +32227,17 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
                   class: "preview",
                   src: file.url,
                   alt: ""
-                }, null, 8, _hoisted_3$9)
+                }, null, 8, _hoisted_3$8)
               ])) : vue.createCommentVNode("", true),
-              vue.createElementVNode("div", _hoisted_4$6, [
+              vue.createElementVNode("div", _hoisted_4$5, [
                 _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("img", {
                   key: 0,
                   height: "60",
                   class: "preview",
                   src: file.url,
                   alt: ""
-                }, null, 8, _hoisted_5$5)) : vue.createCommentVNode("", true),
-                vue.createElementVNode("p", _hoisted_6$4, vue.toDisplayString(file.name), 1),
+                }, null, 8, _hoisted_5$4)) : vue.createCommentVNode("", true),
+                vue.createElementVNode("p", _hoisted_6$3, vue.toDisplayString(file.name), 1),
                 vue.createVNode(vue.unref(Btn), {
                   thin: "",
                   onClick: vue.withModifiers(($event) => removeFile(file), ["stop"]),
@@ -32174,7 +32252,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
             return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
               key: fileQ.file
             }, [
-              !_ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$2, [
+              !_ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$1, [
                 vue.createElementVNode("img", {
                   class: "preview",
                   src: fileToUrl(fileQ.file),
@@ -32195,7 +32273,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
                   style: vue.normalizeStyle([`--p:${fileQ.progress}`, { "--b": "2px" }])
                 }, [
                   fileQ.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_12, vue.toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : vue.createCommentVNode("", true),
-                  vue.createVNode(vue.unref(_sfc_main$H), {
+                  vue.createVNode(vue.unref(_sfc_main$F), {
                     class: "success",
                     icon: "check"
                   })
@@ -32208,15 +32286,15 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-1be8d7b1"]]);
+const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-1be8d7b1"]]);
 const _withScopeId = (n2) => (vue.pushScopeId("data-v-b87221d6"), n2 = n2(), vue.popScopeId(), n2);
 const _hoisted_1$d = ["title"];
 const _hoisted_2$a = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("span", { class: "slider round" }, null, -1));
-const _hoisted_3$8 = [
+const _hoisted_3$7 = [
   _hoisted_2$a
 ];
-const _hoisted_4$5 = ["id"];
-const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_4$4 = ["id"];
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   __name: "ToggleInput",
   props: /* @__PURE__ */ vue.mergeModels({
     label: {},
@@ -32237,14 +32315,14 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       }, [
         vue.createElementVNode("div", {
           class: vue.normalizeClass(["switch", { checked: checked.value }])
-        }, _hoisted_3$8, 2),
+        }, _hoisted_3$7, 2),
         vue.createElementVNode("label", null, [
           vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
           vue.withDirectives(vue.createElementVNode("input", {
             id: _ctx.id,
             type: "checkbox",
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => checked.value = $event)
-          }, null, 8, _hoisted_4$5), [
+          }, null, 8, _hoisted_4$4), [
             [vue.vModelCheckbox, checked.value]
           ])
         ])
@@ -32252,7 +32330,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-b87221d6"]]);
+const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-b87221d6"]]);
 function _isPlaceholder(a2) {
   return a2 != null && typeof a2 === "object" && a2["@@functional/placeholder"] === true;
 }
@@ -37371,7 +37449,7 @@ const _hoisted_4$2 = {
 };
 const _hoisted_5$2 = ["x1", "y1", "x2", "y2"];
 const _hoisted_6$2 = ["x1", "y1", "x2", "y2"];
-const _hoisted_7$1 = ["x1", "y1", "x2", "y2"];
+const _hoisted_7 = ["x1", "y1", "x2", "y2"];
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.data.length ? (vue.openBlock(), vue.createElementBlock("g", {
     key: 0,
@@ -37427,7 +37505,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
         y1: _ctx.canvas.y,
         x2: _ctx.canvas.width - 1,
         y2: _ctx.canvas.height
-      }, null, 8, _hoisted_7$1)
+      }, null, 8, _hoisted_7)
     ])
   ], 8, _hoisted_1$4)) : vue.createCommentVNode("v-if", true);
 }
@@ -37691,7 +37769,7 @@ var script$2 = vue.defineComponent({
     return { y: y2, canvas, direction };
   }
 });
-const _hoisted_1$2$1 = {
+const _hoisted_1$2 = {
   key: 0,
   class: "layer-marker"
 };
@@ -37704,7 +37782,7 @@ const _hoisted_4$1 = {
 const _hoisted_5$1 = ["x", "y", "fill"];
 const _hoisted_6$1 = ["x1", "y1", "x2", "y2", "stroke", "stroke-opacity", "stroke-width", "stroke-dasharray"];
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.direction === "horizontal" ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_1$2$1, [
+  return _ctx.direction === "horizontal" ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_1$2, [
     vue.createElementVNode("text", {
       x: _ctx.canvas.x + 5,
       y: _ctx.y - 5,
@@ -38324,11 +38402,11 @@ const _hoisted_1$1$1 = {
   class: "treemap",
   style: { display: "flex", position: "relative" }
 };
-const _hoisted_2$1$1 = ["width", "height", "viewBox"];
-const _hoisted_3$7 = { class: "layer-rectangles" };
-const _hoisted_4$4 = ["transform", "onMouseover"];
-const _hoisted_5$4 = ["width", "height"];
-const _hoisted_6$3 = {
+const _hoisted_2$1 = ["width", "height", "viewBox"];
+const _hoisted_3 = { class: "layer-rectangles" };
+const _hoisted_4 = ["transform", "onMouseover"];
+const _hoisted_5 = ["width", "height"];
+const _hoisted_6 = {
   x: 0 + 10,
   y: 0 + 20,
   "font-size": `15px`,
@@ -38343,7 +38421,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       viewBox: `0 0 ${_ctx.size.width} ${_ctx.size.height}`,
       ref: "el"
     }, [
-      vue.createElementVNode("g", _hoisted_3$7, [
+      vue.createElementVNode("g", _hoisted_3, [
         (vue.openBlock(true), vue.createElementBlock(
           vue.Fragment,
           null,
@@ -38364,27 +38442,27 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                   y: 0,
                   width: r2.width,
                   height: r2.height
-                }), null, 16, _hoisted_5$4),
+                }), null, 16, _hoisted_5),
                 vue.renderSlot(_ctx.$slots, "text", {
                   r: r2,
                   selected: _ctx.selected === i2
                 }, () => [
                   vue.createElementVNode(
                     "text",
-                    _hoisted_6$3,
+                    _hoisted_6,
                     vue.toDisplayString(r2.data.name),
                     1
                     /* TEXT */
                   )
                 ])
               ])
-            ], 42, _hoisted_4$4);
+            ], 42, _hoisted_4);
           }),
           128
           /* KEYED_FRAGMENT */
         ))
       ])
-    ], 8, _hoisted_2$1$1)),
+    ], 8, _hoisted_2$1)),
     vue.renderSlot(_ctx.$slots, "widgets")
   ]);
 }
@@ -38452,13 +38530,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 script.render = render;
 script.__file = "src/components/HoverBar/index.vue";
-const _hoisted_1$2 = /* @__PURE__ */ vue.createElementVNode("stop", {
+const _hoisted_1$1 = /* @__PURE__ */ vue.createElementVNode("stop", {
   offset: "100%",
   "stop-color": "white",
   "stop-opacity": "0.4"
 }, null, -1);
 const BRAND_COLOR = "var(--bgl-primary)";
-const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   __name: "Lineart",
   props: {
     data: {},
@@ -38587,7 +38665,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
                   "stop-color": BRAND_COLOR,
                   "stop-opacity": "1"
                 }),
-                _hoisted_1$2
+                _hoisted_1$1
               ])
             ])
           ]),
@@ -38603,233 +38681,6 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$1 = { class: "main-content" };
-const _hoisted_2$1 = { class: "view-wrapper bgl_card thin" };
-const _hoisted_3 = { class: "whatsapp-wrap" };
-const _hoisted_4 = { class: "create-template-form" };
-const _hoisted_5 = { class: "whatsapp-msg" };
-const _hoisted_6 = { class: "whatsapp-body" };
-const _hoisted_7 = { class: "whatsapp-footer" };
-const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
-  __name: "MsgTemplate",
-  props: {
-    whatsappTemplateSchema: {},
-    router: {},
-    route: {},
-    previewLabel: { default: "Preview" }
-  },
-  setup(__props) {
-    const props2 = __props;
-    const bagel = useBagel();
-    const regex2 = /\{\{(\d+)}}/g;
-    let localWhatsappData = vue.ref();
-    const serverToLocal = (data2) => {
-      var _a2, _b, _c, _d, _e2;
-      return {
-        id: data2.id,
-        status: data2.status,
-        name: data2.name,
-        language: data2.language,
-        headerText: (_a2 = data2.components.find(
-          (c2) => c2.type === "HEADER"
-        )) == null ? void 0 : _a2.text,
-        bodyText: (_b = data2.components.find((c2) => c2.type === "BODY")) == null ? void 0 : _b.text,
-        bodyExamples: (_d = (_c = data2.components.find(
-          (c2) => c2.type === "BODY"
-        )) == null ? void 0 : _c.example) == null ? void 0 : _d.body_text[0],
-        footerText: (_e2 = data2.components.find(
-          (c2) => c2.type === "FOOTER"
-        )) == null ? void 0 : _e2.text,
-        category: data2.category
-      };
-    };
-    const localToServer = (data2) => {
-      const obj = {};
-      obj.language = data2.language;
-      if (data2.id)
-        obj.id = data2.id;
-      obj.name = data2.name;
-      obj.components = [];
-      obj.category = data2.category;
-      if (data2.headerText) {
-        obj.components.push({
-          type: "HEADER",
-          format: "TEXT",
-          text: data2.headerText
-        });
-      }
-      if (data2.bodyText) {
-        const bodyComponent = { type: "BODY", text: data2.bodyText };
-        if (data2.bodyExamples) {
-          bodyComponent.example = { body_text: [data2.bodyExamples] };
-        }
-        obj.components.push(bodyComponent);
-      }
-      if (data2.footerText) {
-        obj.components.push({ type: "FOOTER", text: data2.footerText });
-      }
-      return obj;
-    };
-    const loadTemplateData = async () => {
-      const template_name = props2.route.params.id;
-      if (template_name) {
-        const res = await bagel.get(
-          `communication/whatsapp/get_template_by_name/${template_name}`
-        );
-        localWhatsappData.value = serverToLocal(res.data[0]);
-      }
-    };
-    const replaceHeader = (match2) => {
-      var _a2, _b;
-      const index2 = +match2[2];
-      const example = (_b = (_a2 = localWhatsappData.value) == null ? void 0 : _a2.headerExamples) == null ? void 0 : _b[index2 - 1];
-      return example || match2;
-    };
-    const replaceBody = (match2) => {
-      var _a2, _b;
-      const index2 = +match2[2];
-      const example = (_b = (_a2 = localWhatsappData.value) == null ? void 0 : _a2.bodyExamples) == null ? void 0 : _b[index2 - 1];
-      return example || match2;
-    };
-    const upsertTemplate = async () => {
-      if (!localWhatsappData.value)
-        return;
-      const payload = localToServer(localWhatsappData.value);
-      console.log(payload);
-      if (payload.id) {
-        await bagel.put(
-          `communication/whatsapp/update_template/${payload.id}`,
-          payload
-        );
-      } else {
-        await bagel.post("communication/whatsapp/create_template", payload);
-        void props2.router.push(`/whatsapp/template/${payload.name}`);
-      }
-    };
-    vue.onMounted(loadTemplateData);
-    return (_ctx, _cache) => {
-      var _a2, _b, _c, _d, _e2, _f;
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
-        vue.createVNode(vue.unref(_sfc_main$x), null, {
-          default: vue.withCtx(() => [
-            vue.createTextVNode("Whatsapp Template")
-          ]),
-          _: 1
-        }),
-        vue.createElementVNode("div", _hoisted_2$1, [
-          vue.createElementVNode("div", _hoisted_3, [
-            vue.createElementVNode("div", _hoisted_4, [
-              vue.createVNode(vue.unref(_sfc_main$j), {
-                schema: _ctx.whatsappTemplateSchema,
-                modelValue: vue.unref(localWhatsappData),
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(localWhatsappData) ? localWhatsappData.value = $event : localWhatsappData = $event),
-                onSubmit: upsertTemplate
-              }, null, 8, ["schema", "modelValue"])
-            ]),
-            vue.createElementVNode("div", {
-              class: vue.normalizeClass(["whatsapp-preview", { whatsappHebrew: ((_a2 = vue.unref(localWhatsappData)) == null ? void 0 : _a2.language) === "he" }])
-            }, [
-              vue.createTextVNode(vue.toDisplayString(_ctx.previewLabel) + " ", 1),
-              vue.createElementVNode("div", _hoisted_5, [
-                vue.createElementVNode("b", null, vue.toDisplayString((_c = (_b = vue.unref(localWhatsappData)) == null ? void 0 : _b.headerText) == null ? void 0 : _c.replace(regex2, replaceHeader)), 1),
-                vue.createElementVNode("p", _hoisted_6, vue.toDisplayString((_e2 = (_d = vue.unref(localWhatsappData)) == null ? void 0 : _d.bodyText) == null ? void 0 : _e2.replace(regex2, replaceBody)), 1),
-                vue.createElementVNode("p", _hoisted_7, vue.toDisplayString((_f = vue.unref(localWhatsappData)) == null ? void 0 : _f.footerText), 1)
-              ])
-            ], 2)
-          ])
-        ])
-      ]);
-    };
-  }
-});
-const MsgTemplate = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-208db149"]]);
-const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
-  __name: "TextVariableExamples",
-  props: {
-    context: Object
-  },
-  setup(__props) {
-    const props2 = __props;
-    const exampleEl = vue.ref();
-    let boundValue = vue.ref();
-    let boundNode = vue.ref();
-    let val = vue.ref([]);
-    const handleUpdate = (value, index2) => {
-      var _a2, _b, _c;
-      if (!boundValue.value)
-        return;
-      if (index2 > ((_a2 = val.value) == null ? void 0 : _a2.length))
-        val.value = [...val.value, ...Array(index2 - val.value.length).fill(""), value];
-      else
-        (_b = val.value) == null ? void 0 : _b.splice(index2 - 1, 1, value);
-      (_c = props2.context) == null ? void 0 : _c.node.input(val.value);
-    };
-    const extractVariables = (text) => {
-      const matches2 = (text == null ? void 0 : text.match(/{{(\d+)}}/g)) || [];
-      return matches2.map((match2) => +match2.match(/\d+/)[0]);
-    };
-    const txtType = vue.computed(() => {
-      var _a2;
-      return ((_a2 = props2.context) == null ? void 0 : _a2.id) === "bodyExamples" ? "bodyText" : "headerText";
-    });
-    const variables = vue.computed(() => {
-      var _a2, _b;
-      let vars = extractVariables(boundValue.value);
-      if (txtType.value === "headerText")
-        vars.slice(0, 1);
-      const nonSequentialDigits = vars == null ? void 0 : vars.reduce((acc, currDigit, i2) => {
-        const prevDigit = i2 > 0 ? vars[i2 - 1] : 0;
-        if (currDigit - prevDigit !== 1) {
-          acc.push(currDigit);
-        }
-        return acc;
-      }, []);
-      if (nonSequentialDigits == null ? void 0 : nonSequentialDigits.length) {
-        const regex2 = new RegExp(nonSequentialDigits.map((d2) => `\\{\\{${d2}\\}\\}`).join("|"), "g");
-        const newVal = `${boundValue.value}`.replace(regex2, "");
-        void ((_a2 = boundNode.value) == null ? void 0 : _a2.input(newVal));
-        vars = extractVariables(boundValue.value);
-      }
-      const parentEl2 = (_b = exampleEl.value) == null ? void 0 : _b.closest(".formkit-outer");
-      if (!vars.length && parentEl2) {
-        parentEl2.classList.add("hide");
-      } else if (parentEl2) {
-        parentEl2.classList.remove("hide");
-      }
-      return vars;
-    });
-    const setupListners = (node) => {
-      node == null ? void 0 : node.on("input", (v2) => {
-        boundValue.value = v2.payload;
-      });
-    };
-    vue.onMounted(() => {
-      var _a2;
-      boundNode.value = (_a2 = props2.context) == null ? void 0 : _a2.node.parent.children.find((c2) => c2.name === txtType.value);
-      setupListners(boundNode.value);
-    });
-    vue.watch(() => {
-      var _a2;
-      return (_a2 = props2.context) == null ? void 0 : _a2.value;
-    }, (v2) => val.value = v2, { immediate: true });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        ref_key: "exampleEl",
-        ref: exampleEl
-      }, [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(variables.value, (v2) => {
-          var _a2;
-          return vue.openBlock(), vue.createBlock(vue.unref(TextInput), {
-            key: v2,
-            placeholder: `Variable ${v2}`,
-            modelValue: (_a2 = vue.unref(val)) == null ? void 0 : _a2[v2 - 1],
-            "onUpdate:modelValue": ($event) => handleUpdate($event, v2)
-          }, null, 8, ["placeholder", "modelValue", "onUpdate:modelValue"]);
-        }), 128))
-      ], 512);
-    };
-  }
-});
 const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
   __name: "Layout",
   props: {
@@ -38901,10 +38752,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(Btn), {
               key: i2,
               to: nav2.to,
-              class: "nav-button"
+              class: "nav-button px-075"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(vue.unref(_sfc_main$H), {
+                vue.createVNode(vue.unref(_sfc_main$F), {
                   icon: nav2.icon,
                   size: 1.4
                 }, null, 8, ["icon"]),
@@ -38927,56 +38778,55 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SidebarMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-67b81581"]]);
-exports.Accordion = _sfc_main$p;
+const SidebarMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8d6bd3d8"]]);
+exports.Accordion = _sfc_main$n;
 exports.AccordionItem = AccordionItem;
 exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
-exports.BagelForm = _sfc_main$j;
+exports.BagelForm = _sfc_main$h;
 exports.BagelVue = BagelVue;
-exports.BglField = _sfc_main$i;
-exports.BglForm = _sfc_main$j;
+exports.BglField = _sfc_main$g;
+exports.BglForm = _sfc_main$h;
 exports.BglVideo = BglVideo;
 exports.Btn = Btn;
-exports.Card = _sfc_main$s;
+exports.Card = _sfc_main$q;
 exports.Carousel = Carousel;
 exports.CheckInput = CheckInput;
 exports.Checkbox = Checkbox;
-exports.ColorPicker = _sfc_main$9;
+exports.ColorPicker = _sfc_main$7;
 exports.ComboBox = ComboBox;
 exports.Comments = Comments;
 exports.DataPreview = DataPreview;
-exports.DateInput = _sfc_main$g;
-exports.DatePicker = _sfc_main$8;
+exports.DateInput = _sfc_main$e;
+exports.DatePicker = _sfc_main$6;
 exports.FileUpload = FileUpload;
-exports.Icon = _sfc_main$H;
+exports.Icon = _sfc_main$F;
 exports.JSONInput = JSONInput;
 exports.Layout = _sfc_main$1;
-exports.Lineart = _sfc_main$4;
-exports.ListItem = _sfc_main$A;
-exports.ListView = _sfc_main$B;
-exports.MaterialIcon = _sfc_main$H;
-exports.Modal = _sfc_main$E;
+exports.Lineart = _sfc_main$2;
+exports.ListItem = _sfc_main$y;
+exports.ListView = _sfc_main$z;
+exports.MaterialIcon = _sfc_main$F;
+exports.Modal = _sfc_main$C;
 exports.ModalForm = ModalForm;
 exports.ModalPlugin = ModalPlugin;
-exports.MsgTemplate = MsgTemplate;
 exports.NavBar = NavBar;
-exports.PageTitle = _sfc_main$x;
-exports.RTXEditor = _sfc_main$I;
+exports.PageTitle = _sfc_main$v;
+exports.RTXEditor = _sfc_main$G;
 exports.RadioPillsInput = RadioPillsInput;
 exports.RichTextEditor = RichTextEditor;
 exports.RouterWrapper = RouterWrapper;
-exports.SelectInput = _sfc_main$e;
+exports.SelectInput = _sfc_main$c;
 exports.SidebarMenu = SidebarMenu;
 exports.TabbedLayout = TabbedLayout;
 exports.TableField = TableField;
 exports.TableSchema = TableSchema;
 exports.TextInput = TextInput;
-exports.TextVariableExamples = _sfc_main$2;
-exports.Title = _sfc_main$q;
+exports.Title = _sfc_main$o;
 exports.ToggleInput = ToggleInput;
 exports.TopBar = TopBar;
+exports.bagelFormUtils = BagelFormUtils;
 exports.bagelInjectionKey = bagelInjectionKey;
 exports.bindAttrs = bindAttrs;
 exports.classify = classify;