@bagelink/vue 0.0.1145 → 0.0.1151

package/dist/index.cjs

@@ -61,8 +61,8 @@ const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$X = ["aria-expanded", "aria-controls"];
-const _hoisted_2$E = { class: "accordion-label" };
+const _hoisted_1$W = ["aria-expanded", "aria-controls"];
+const _hoisted_2$D = { class: "accordion-label" };
 const _hoisted_3$u = ["id", "aria-hidden"];
 const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
   __name: "AccordionItem",
@@ -127,18 +127,18 @@ const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
             key: 0,
             class: vue.normalizeClass(["accordion-icon", [_ctx.iconClass, { open: vue.unref(isOpen) && _ctx.iconType === "expand_more" }]])
           }, [
-            vue.createVNode(vue.unref(_sfc_main$p), { icon: computedIcon.value }, null, 8, ["icon"])
+            vue.createVNode(vue.unref(_sfc_main$q), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "head", {}, () => [
-            vue.createElementVNode("span", _hoisted_2$E, vue.toDisplayString(_ctx.label), 1)
+            vue.createElementVNode("span", _hoisted_2$D, vue.toDisplayString(_ctx.label), 1)
           ], true),
           iconPosition.value === "end" ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 1,
             class: vue.normalizeClass(["accordion-icon", [_ctx.iconClass, { open: vue.unref(isOpen) && _ctx.iconType === "expand_more" }]])
           }, [
-            vue.createVNode(vue.unref(_sfc_main$p), { icon: computedIcon.value }, null, 8, ["icon"])
+            vue.createVNode(vue.unref(_sfc_main$q), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : vue.createCommentVNode("", true)
-        ], 8, _hoisted_1$X),
+        ], 8, _hoisted_1$W),
         vue.createVNode(vue.Transition, { name: "expand" }, {
           default: vue.withCtx(() => [
             vue.unref(isOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -164,7 +164,7 @@ const _export_sfc = (sfc, props2) => {
   return target;
 };
 const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["__scopeId", "data-v-3334f637"]]);
-const _hoisted_1$W = { class: "relative" };
+const _hoisted_1$V = { class: "relative" };
 const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
   __name: "AddressSearch",
   emits: ["addressSelected"],
@@ -187,8 +187,8 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
       (_a2 = suggestion.value) == null ? void 0 : _a2.show();
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$W, [
-        vue.createVNode(vue.unref(_sfc_main$V), {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$V, [
+        vue.createVNode(vue.unref(_sfc_main$U), {
           ref_key: "suggestion",
           ref: suggestion,
           noAutoFocus: true,
@@ -203,7 +203,7 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
             }, null, 8, ["modelValue"])
           ]),
           default: vue.withCtx(() => [
-            vue.createVNode(vue.unref(ListView), { class: "-mt-2 hm-300px" }, {
+            vue.createVNode(vue.unref(_sfc_main$e), { class: "-mt-2 hm-300px" }, {
               default: vue.withCtx(() => [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(searchResults), (result2, index2) => {
                   return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$f), {
@@ -223,7 +223,7 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$V = {
+const _hoisted_1$U = {
   key: 1,
   class: "bgl_btn-flex"
 };
@@ -293,8 +293,8 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
             key: 0,
             class: "h-100p",
             size: "15"
-          })) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$V, [
-            _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+          })) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$U, [
+            _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
               key: 0,
               icon: _ctx.icon,
               class: "transition-400"
@@ -303,7 +303,7 @@ const _sfc_main$14 = /* @__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),
-            _ctx.iconEnd ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+            _ctx.iconEnd ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
               key: 2,
               icon: _ctx.iconEnd,
               class: "transition-400"
@@ -318,8 +318,8 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-7b18a02c"]]);
-const _hoisted_1$U = ["dismissable"];
-const _hoisted_2$D = { class: "m-0" };
+const _hoisted_1$T = ["dismissable"];
+const _hoisted_2$C = { class: "m-0" };
 const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
   __name: "Alert",
   props: {
@@ -341,14 +341,14 @@ const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["alert", [_ctx.type]]),
         dismissable: _ctx.dismissable
       }, [
-        _ctx.icon !== "none" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+        _ctx.icon !== "none" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
           key: 0,
           class: "alert_icon",
           icon: _ctx.icon || _ctx.type,
           size: 2,
           color: color2[_ctx.type]
         }, null, 8, ["icon", "color"])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("p", _hoisted_2$D, vue.toDisplayString(_ctx.message), 1),
+        vue.createElementVNode("p", _hoisted_2$C, vue.toDisplayString(_ctx.message), 1),
         vue.createVNode(Btn, {
           flat: "",
           thin: "",
@@ -356,12 +356,12 @@ const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
           icon: "close",
           onClick: _cache[0] || (_cache[0] = ($event) => isDismissed.value = true)
         })
-      ], 10, _hoisted_1$U)) : vue.createCommentVNode("", true);
+      ], 10, _hoisted_1$T)) : vue.createCommentVNode("", true);
     };
   }
 });
 const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-064bdd20"]]);
-const _hoisted_1$T = ["src", "alt"];
+const _hoisted_1$S = ["src", "alt"];
 const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
   __name: "Avatar",
   props: {
@@ -380,7 +380,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
           key: 0,
           src: _ctx.src,
           alt: _ctx.name
-        }, null, 8, _hoisted_1$T)) : (vue.openBlock(), vue.createElementBlock("p", {
+        }, null, 8, _hoisted_1$S)) : (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 || "")).toUpperCase()), 5))
@@ -403,13 +403,13 @@ const _sfc_main$11 = /* @__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$p), {
+        _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
           key: 0,
           class: "inline",
           icon: _ctx.icon
         }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
         vue.createTextVNode(" " + vue.toDisplayString(_ctx.text) + " ", 1),
-        _ctx.iconEnd ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+        _ctx.iconEnd ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
           key: 1,
           class: "inline",
           icon: _ctx.iconEnd
@@ -419,7 +419,7 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-689f051f"]]);
-const _hoisted_1$S = { key: 1 };
+const _hoisted_1$R = { key: 1 };
 const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
   __name: "BglComponent",
   props: {
@@ -440,16 +440,16 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
         return TextInput;
       }
       if (props2.field.$el === "number") return NumberInput;
-      if (props2.field.$el === "array") return _sfc_main$P;
+      if (props2.field.$el === "array") return _sfc_main$Q;
       if (props2.field.$el === "select") return SelectInput;
       if (props2.field.$el === "toggle") return ToggleInput;
       if (props2.field.$el === "check") return CheckInput;
       if (props2.field.$el === "richtext") return RichText;
       if (props2.field.$el === "upload") return UploadInput;
       if (props2.field.$el === "file") return FileUpload;
-      if (props2.field.$el === "date") return _sfc_main$K;
+      if (props2.field.$el === "date") return _sfc_main$L;
       if (props2.field.$el === "tabs") return TabsNav;
-      if (props2.field.$el === "form") return _sfc_main$S;
+      if (props2.field.$el === "form") return _sfc_main$R;
       return props2.field.$el ?? "div";
     });
     function getFieldData(path) {
@@ -566,7 +566,7 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
                   id: [props2.id, child.id].filter(Boolean).join("."),
                   field: child,
                   "parent-path": props2.id
-                }, null, 8, ["id", "field", "parent-path"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$S, vue.toDisplayString(child), 1))
+                }, null, 8, ["id", "field", "parent-path"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$R, vue.toDisplayString(child), 1))
               ], 64);
             }), 128))
           ], 64))
@@ -576,8 +576,8 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$R = ["src"];
-const _hoisted_2$C = ["autoplay", "muted", "loop", "controls", "playsinline"];
+const _hoisted_1$Q = ["src"];
+const _hoisted_2$B = ["autoplay", "muted", "loop", "controls", "playsinline"];
 const _hoisted_3$t = ["src", "type"];
 const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
   __name: "BglVideo",
@@ -656,7 +656,7 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
           allowfullscreen: "",
           title: "Video",
           allow: "autoplay"
-        }, null, 12, _hoisted_1$R)) : _ctx.src ? (vue.openBlock(), vue.createElementBlock("video", {
+        }, null, 12, _hoisted_1$Q)) : _ctx.src ? (vue.openBlock(), vue.createElementBlock("video", {
           key: 1,
           ref_key: "video",
           ref: video,
@@ -671,13 +671,13 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
             src: _ctx.src,
             type: `video/${videoFormat.value}`
           }, null, 8, _hoisted_3$t)
-        ], 12, _hoisted_2$C)) : vue.createCommentVNode("", true)
+        ], 12, _hoisted_2$B)) : vue.createCommentVNode("", true)
       ], 2);
     };
   }
 });
 const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["__scopeId", "data-v-006552f6"]]);
-const _hoisted_1$Q = {
+const _hoisted_1$P = {
   key: 0,
   class: "card_label"
 };
@@ -710,7 +710,7 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
         }])
       }, {
         default: vue.withCtx(() => [
-          _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$Q, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
+          _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$P, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
@@ -720,13 +720,13 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$P = ["dir"];
-const _hoisted_2$B = {
+const _hoisted_1$O = ["dir"];
+const _hoisted_2$A = {
   key: 0,
   class: "dots"
 };
 const _hoisted_3$s = ["onClick"];
-const _hoisted_4$j = { class: "Handlers" };
+const _hoisted_4$i = { class: "Handlers" };
 const GAP_PERCENT = 1;
 const VELOCITY_SAMPLE_DURATION = 100;
 const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
@@ -1149,7 +1149,7 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
         }, [
           vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ], 38),
-        props2.dots && vue.unref(slideCount) > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$B, [
+        props2.dots && vue.unref(slideCount) > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$A, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(slideCount), (i2) => {
             return vue.openBlock(), vue.createElementBlock("span", {
               key: i2,
@@ -1158,7 +1158,7 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
             }, null, 10, _hoisted_3$s);
           }), 128))
         ])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_4$j, [
+        vue.createElementVNode("div", _hoisted_4$i, [
           vue.createElementVNode("span", { onClick: prev }, [
             vue.renderSlot(_ctx.$slots, "prev", {
               index: vue.unref(activeSlideIndex),
@@ -1172,7 +1172,7 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
             }, void 0, true)
           ])
         ])
-      ], 14, _hoisted_1$P);
+      ], 14, _hoisted_1$O);
     };
   }
 });
@@ -5500,21 +5500,21 @@ function styleInject(css2, ref) {
     return;
   }
   var head = document.head || document.getElementsByTagName("head")[0];
-  var style = document.createElement("style");
-  style.type = "text/css";
+  var style2 = document.createElement("style");
+  style2.type = "text/css";
   if (insertAt === "top") {
     if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
+      head.insertBefore(style2, head.firstChild);
     } else {
-      head.appendChild(style);
+      head.appendChild(style2);
     }
   } else {
-    head.appendChild(style);
+    head.appendChild(style2);
   }
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css2;
+  if (style2.styleSheet) {
+    style2.styleSheet.cssText = css2;
   } else {
-    style.appendChild(document.createTextNode(css2));
+    style2.appendChild(document.createTextNode(css2));
   }
 }
 var css_248z$1 = "\n.chart {\n  position: relative;\n}\n";
@@ -5688,8 +5688,8 @@ var script$9 = vue.defineComponent({
     }
     function computeDotStyle(active) {
       const dotStyle = props2.dotStyle;
-      const style = getStyle.value();
-      return Object.assign({ r: active ? 5 : 3, stroke: style.stroke, strokeWidth: style.strokeWidth, fill: "white" }, dotStyle);
+      const style2 = getStyle.value();
+      return Object.assign({ r: active ? 5 : 3, stroke: style2.stroke, strokeWidth: style2.strokeWidth, fill: "white" }, dotStyle);
     }
     const getStyle = vue.computed(() => {
       if (is$1(Function, props2.lineStyle)) {
@@ -5892,11 +5892,11 @@ var script$7 = vue.defineComponent({
     const getStyle = vue.computed(() => {
       return () => Object.assign({ colors: ["#4daf4a", "#377eb8", "#ff7f00", "#984ea3", "#e41a1c"], innerRadius: 2, cornerRadius: 0, padAngle: 0.01 }, props2.pieStyle);
     });
-    const style = getStyle.value();
+    const style2 = getStyle.value();
     const arcs = vue.ref([]);
     const colors = ordinal(getStyle.value().colors);
     const arcGen = () => {
-      return arc().outerRadius(size2.value).innerRadius(style.innerRadius).cornerRadius(style.cornerRadius).padAngle(style.padAngle);
+      return arc().outerRadius(size2.value).innerRadius(style2.innerRadius).cornerRadius(style2.cornerRadius).padAngle(style2.padAngle);
     };
     const transform = vue.ref(`translate(${size2.value + chart.canvas.x}, ${size2.value + chart.canvas.y})`);
     let pieSort;
@@ -6087,7 +6087,7 @@ const _hoisted_4$2$1 = {
 };
 const _hoisted_5$2$1 = ["x1", "y1", "x2", "y2"];
 const _hoisted_6$2$1 = ["x1", "y1", "x2", "y2"];
-const _hoisted_7$a = ["x1", "y1", "x2", "y2"];
+const _hoisted_7$9 = ["x1", "y1", "x2", "y2"];
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.data.length ? (vue.openBlock(), vue.createElementBlock("g", {
     key: 0,
@@ -6143,7 +6143,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$a)
+      }, null, 8, _hoisted_7$9)
     ])
   ], 8, _hoisted_1$4$1)) : vue.createCommentVNode("v-if", true);
 }
@@ -6179,7 +6179,7 @@ var script$4 = vue.defineComponent({
     const isRight = vue.computed(() => {
       return position.value.x >= canvas.value.width / 4 * 3;
     });
-    const style = vue.computed(() => {
+    const style2 = vue.computed(() => {
       if (direction.value === "vertical") {
         return {
           top: position.value.y - 0.5 + "px",
@@ -6235,7 +6235,7 @@ var script$4 = vue.defineComponent({
       direction.value = chart.config.direction;
       canvas.value = chart.canvas;
     });
-    return { el, show, canvas, direction, style, styleContent, position, items, isRight };
+    return { el, show, canvas, direction, style: style2, styleContent, position, items, isRight };
   }
 });
 const _hoisted_1$3$1 = { key: 0 };
@@ -6975,16 +6975,16 @@ var script$1 = vue.defineComponent({
     }
     const toKebabCase = (data3) => mapKeys(kebabize, data3);
     const getStyle = (r2) => {
-      const style = {
+      const style2 = {
         stroke: r2.color,
         strokeWidth: 5,
         fill: r2.color,
         fillOpacity: 0.9
       };
       if (props2.rcStyle && typeof props2.rcStyle === "function") {
-        return Object.assign(Object.assign({}, style), props2.rcStyle(r2));
+        return Object.assign(Object.assign({}, style2), props2.rcStyle(r2));
       }
-      return style;
+      return style2;
     };
     function onMouseOver(i2) {
       selected.value = i2;
@@ -7011,9 +7011,9 @@ const _hoisted_1$1$1 = {
 };
 const _hoisted_2$1$1 = ["width", "height", "viewBox"];
 const _hoisted_3$r = { class: "layer-rectangles" };
-const _hoisted_4$i = ["transform", "onMouseover"];
-const _hoisted_5$h = ["width", "height"];
-const _hoisted_6$e = {
+const _hoisted_4$h = ["transform", "onMouseover"];
+const _hoisted_5$g = ["width", "height"];
+const _hoisted_6$d = {
   x: 0 + 10,
   y: 0 + 20,
   "font-size": `15px`,
@@ -7049,21 +7049,21 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                   y: 0,
                   width: r2.width,
                   height: r2.height
-                }), null, 16, _hoisted_5$h),
+                }), null, 16, _hoisted_5$g),
                 vue.renderSlot(_ctx.$slots, "text", {
                   r: r2,
                   selected: _ctx.selected === i2
                 }, () => [
                   vue.createElementVNode(
                     "text",
-                    _hoisted_6$e,
+                    _hoisted_6$d,
                     vue.toDisplayString(r2.data.name),
                     1
                     /* TEXT */
                   )
                 ])
               ])
-            ], 42, _hoisted_4$i);
+            ], 42, _hoisted_4$h);
           }),
           128
           /* KEYED_FRAGMENT */
@@ -7120,19 +7120,19 @@ var script = vue.defineComponent({
     return { bar, canvas, direction, mouse };
   }
 });
-const _hoisted_1$O = {
+const _hoisted_1$N = {
   key: 0,
   class: "layer-hover-bar"
 };
-const _hoisted_2$A = ["x", "y", "width", "height"];
+const _hoisted_2$z = ["x", "y", "width", "height"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.mouse.hover ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_1$O, [
+  return _ctx.mouse.hover ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_1$N, [
     vue.createElementVNode("rect", vue.mergeProps({ class: "hover-bar" }, _ctx.barStyle, {
       x: _ctx.bar.x,
       y: _ctx.bar.y,
       width: _ctx.bar.width > 0 ? _ctx.bar.width : 0,
       height: _ctx.bar.height > 0 ? _ctx.bar.height : 0
-    }), null, 16, _hoisted_2$A)
+    }), null, 16, _hoisted_2$z)
   ])) : vue.createCommentVNode("v-if", true);
 }
 script.render = render;
@@ -7278,107 +7278,125 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$N = {
-  key: 0,
-  class: "data"
-};
-const _hoisted_2$z = {
-  key: 0,
-  class: "data-row m_py-05"
-};
-const _hoisted_3$q = { class: "key" };
-const _hoisted_4$h = { class: "m-0" };
-const _hoisted_5$g = { key: 1 };
-const _hoisted_6$d = {
-  key: 0,
-  class: "data-row"
-};
-const _hoisted_7$9 = { class: "key" };
-const _hoisted_8$6 = { class: "m-0" };
-const _hoisted_9$5 = {
-  key: 0,
-  class: "m-0"
-};
-const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
-  __name: "DataPreview",
-  props: /* @__PURE__ */ vue.mergeModels({
-    showFields: {},
-    schema: {},
-    title: {},
-    excludeUnset: { type: Boolean }
-  }, {
-    "data": { default: {} },
-    "dataModifiers": {}
-  }),
-  emits: ["update:data"],
-  setup(__props) {
-    const props2 = __props;
-    const itemData = vue.useModel(__props, "data");
-    function dataTransform(dataValue) {
-      if (!dataValue) return dataValue;
-      if (Array.isArray(dataValue)) return dataValue.map(dataTransform);
-      if (typeof dataValue === "object") {
-        Object.keys(dataValue).forEach((key) => {
-          dataValue[key] = dataTransform(dataValue[key]);
-        });
-      }
-      if (isDate(dataValue)) {
-        const date2 = new Date(dataValue);
-        return date2.toDateString();
+const SLOT_VALUE_COMPONENTS$1 = /* @__PURE__ */ new Set(["div", "span", "p"]);
+const SRC_VALUE_COMPONENTS$1 = /* @__PURE__ */ new Set(["img", "iframe"]);
+function useSchemaField(options) {
+  const { mode = "form", getRowData, onUpdate } = options;
+  function getComponent(field) {
+    var _a2;
+    const componentMap = {
+      text: TextInput,
+      textarea: TextInput,
+      number: NumberInput,
+      array: _sfc_main$Q,
+      select: SelectInput,
+      toggle: ToggleInput,
+      check: CheckInput,
+      richtext: RichText,
+      upload: UploadInput,
+      file: FileUpload,
+      date: _sfc_main$L,
+      tabs: TabsNav,
+      form: _sfc_main$R
+    };
+    if (field.$el === "textarea" && !((_a2 = field.attrs) == null ? void 0 : _a2.multiline)) {
+      field.attrs = { ...field.attrs, multiline: true };
+    }
+    return typeof field.$el === "object" ? field.$el : componentMap[field.$el] ?? field.$el ?? "div";
+  }
+  function renderField(field, slots) {
+    const Component = getComponent(field);
+    if (!Component) return null;
+    const rowData = (getRowData == null ? void 0 : getRowData()) || {};
+    const {
+      $el,
+      children: children2,
+      options: options2,
+      attrs,
+      class: fieldClass,
+      id,
+      transform,
+      slots: fieldSlots,
+      required: required2,
+      label,
+      placeholder,
+      disabled,
+      ...fieldProps
+    } = field;
+    const currentValue = field.id ? rowData[field.id] : void 0;
+    const transformedValue = transform ? transform(currentValue, rowData) : currentValue;
+    const boundFieldProps = bindAttrs(fieldProps, currentValue, rowData);
+    const isSlotValueComponent = typeof Component === "string" && SLOT_VALUE_COMPONENTS$1.has(Component);
+    const isSrcValueComponent = typeof Component === "string" && SRC_VALUE_COMPONENTS$1.has(Component);
+    const props2 = {
+      ...boundFieldProps,
+      required: required2,
+      label,
+      placeholder,
+      disabled
+    };
+    if (mode === "form") {
+      props2.modelValue = currentValue;
+      props2["onUpdate:modelValue"] = (value) => {
+        onUpdate == null ? void 0 : onUpdate(field, value);
+      };
+    } else {
+      if (isSlotValueComponent) ;
+      else if (isSrcValueComponent) {
+        props2.src = transformedValue;
+      } else {
+        props2.modelValue = transformedValue;
       }
-      return dataValue;
     }
-    function isUnset(value) {
-      if (!props2.excludeUnset) return false;
-      return value === void 0 || value === null || value === "" || value.length === 0;
+    Object.keys(props2).forEach((key) => props2[key] === void 0 && delete props2[key]);
+    if (field.options) {
+      props2.options = typeof field.options === "function" ? field.options(currentValue, rowData) : field.options;
     }
-    const computedSchema = vue.computed(() => getFallbackSchema([itemData.value], props2.showFields));
-    return (_ctx, _cache) => {
-      var _a2;
-      return __props.data ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$N, [
-        _ctx.title ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$4), {
-          key: 0,
-          label: _ctx.title
-        }, null, 8, ["label"])) : vue.createCommentVNode("", true),
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.schema, (field) => {
-          return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
-            key: field.id
-          }, [
-            vue.unref(iffer)(field, itemData.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$z, [
-              vue.createElementVNode("div", _hoisted_3$q, [
-                vue.createElementVNode("p", _hoisted_4$h, vue.toDisplayString((field == null ? void 0 : field.label) || vue.unref(keyToLabel)(field.id)), 1)
-              ]),
-              vue.createVNode(vue.unref(_sfc_main$Q), {
-                modelValue: itemData.value,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => itemData.value = $event),
-                label: "",
-                style: { "width": "min-content", "min-width": "140px" },
-                field
-              }, null, 8, ["modelValue", "field"])
-            ])) : vue.createCommentVNode("", true)
-          ], 64);
-        }), 128)),
-        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$g, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(computedSchema.value, ({ id, label }) => {
-            return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: id }, [
-              !isUnset(itemData.value[id]) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$d, [
-                vue.createElementVNode("div", _hoisted_7$9, [
-                  vue.createElementVNode("p", _hoisted_8$6, vue.toDisplayString(label), 1)
-                ]),
-                vue.createElementVNode("div", null, [
-                  id ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_9$5, vue.toDisplayString(dataTransform(itemData.value[id])), 1)) : vue.createCommentVNode("", true)
-                ])
-              ])) : vue.createCommentVNode("", true)
-            ], 64);
-          }), 128))
-        ])) : vue.createCommentVNode("", true),
-        vue.renderSlot(_ctx.$slots, "footer", {}, void 0, true)
-      ])) : vue.createCommentVNode("", true);
-    };
+    if (field.attrs) {
+      const boundAttrs = bindAttrs(field.attrs, currentValue, rowData);
+      Object.entries(boundAttrs).forEach(([key, value]) => {
+        if (typeof value === "function") {
+          props2[key] = value(currentValue, rowData);
+        } else {
+          props2[key] = value;
+        }
+      });
+    }
+    props2.class = classify(currentValue, rowData, fieldClass, props2.class);
+    const componentSlots = {};
+    if (children2 == null ? void 0 : children2.length) {
+      componentSlots.default = () => children2.map((child) => {
+        if (typeof child === "string") return child;
+        return renderField(child, slots);
+      });
+    }
+    if (isSlotValueComponent && transformedValue !== void 0) {
+      componentSlots.default = () => (transformedValue == null ? void 0 : transformedValue.toString()) || "";
+    }
+    if (fieldSlots) {
+      Object.entries(fieldSlots).forEach(([name, slot]) => {
+        componentSlots[name] = typeof slot === "function" ? () => slot(currentValue, rowData) : () => slot;
+      });
+    }
+    const slotContent = field.id && (slots == null ? void 0 : slots[field.id]) ? slots[field.id]({ row: rowData, field }) : void 0;
+    if (mode === "preview") {
+      return vue.h("div", { class: "preview-field" }, [
+        vue.h("div", { class: "field-label" }, field.label || keyToLabel(field.id || "")),
+        vue.h("div", { class: "field-value" }, [
+          slotContent || (typeof field.$el === "object" ? vue.h(Component, props2, componentSlots) : (transformedValue == null ? void 0 : transformedValue.toString()) || "")
+        ])
+      ]);
+    }
+    return slotContent || vue.h(Component, props2, componentSlots);
   }
-});
-const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-6c27f163"]]);
+  return {
+    renderField,
+    getComponent
+  };
+}
 const NON_DIGIT_REGEX = /[^\d.-]/g;
+const SLOT_VALUE_COMPONENTS = /* @__PURE__ */ new Set(["div", "span", "p"]);
+const SRC_VALUE_COMPONENTS = /* @__PURE__ */ new Set(["img", "iframe"]);
 function useTableData(options) {
   const sortField = vue.ref("");
   const sortDirection = vue.ref("ASC");
@@ -7388,41 +7406,50 @@ function useTableData(options) {
     data: options.data.value
   }));
   function transform(rowData) {
-    var _a2;
     const transformed = { ...rowData };
     const schemaFields = computedSchema.value.filter((f2) => f2.id);
     for (const field of schemaFields) {
-      const fieldData = rowData[`${field.id}`];
-      const newFieldVal = (_a2 = field.transform) == null ? void 0 : _a2.call(field, fieldData, rowData);
-      transformed[`_transformed_${field.id}`] = newFieldVal;
+      const fieldId = field.id;
+      const fieldData = rowData[fieldId];
+      const transformKey = `_transformed_${String(fieldId)}`;
+      const slotKey = `_slot_${String(fieldId)}`;
+      const srcKey = `_src_${String(fieldId)}`;
+      const originalKey = `_original_${String(fieldId)}`;
+      transformed[originalKey] = fieldData;
+      const isSlotValueComponent = typeof field.$el === "string" && SLOT_VALUE_COMPONENTS.has(field.$el);
+      const isSrcValueComponent = typeof field.$el === "string" && SRC_VALUE_COMPONENTS.has(field.$el);
+      transformed[slotKey] = isSlotValueComponent;
+      transformed[srcKey] = isSrcValueComponent;
+      if (field.transform) {
+        const newFieldVal = field.transform(fieldData, rowData);
+        transformed[transformKey] = newFieldVal;
+      } else {
+        transformed[transformKey] = fieldData;
+      }
     }
     return transformed;
   }
-  const computedSortField = vue.computed(() => `_transformed_${sortField.value}`);
+  const computedSortField = vue.computed(() => sortField.value ? `_transformed_${sortField.value}` : "");
   const computedData = vue.computed(() => {
     const currentData = options.data.value;
     if (!sortField.value || options.useServerSort === true) {
       return currentData.map(transform);
     }
     return currentData.map(transform).sort((a2, z2) => {
-      let aValue = a2[computedSortField.value] ?? a2[sortField.value] ?? "";
-      let bValue = z2[computedSortField.value] ?? z2[sortField.value] ?? "";
+      const aValue = a2[computedSortField.value] ?? "";
+      const bValue = z2[computedSortField.value] ?? "";
       if (isDate(aValue) && isDate(bValue)) {
-        aValue = new Date(aValue).getTime();
-        bValue = new Date(bValue).getTime();
+        return sortDirection.value === "ASC" ? new Date(aValue).getTime() - new Date(bValue).getTime() : new Date(bValue).getTime() - new Date(aValue).getTime();
       }
       const numAValue = Number.parseInt(`${aValue}`.replaceAll(NON_DIGIT_REGEX, ""), 10);
       const numBValue = Number.parseInt(`${bValue}`.replaceAll(NON_DIGIT_REGEX, ""), 10);
       if (!Number.isNaN(numAValue) && !Number.isNaN(numBValue)) {
-        if (sortDirection.value === "ASC") return numAValue - numBValue;
-        return numBValue - numAValue;
+        return sortDirection.value === "ASC" ? numAValue - numBValue : numBValue - numAValue;
       }
       if (typeof aValue === "string") {
-        if (sortDirection.value === "ASC") return aValue.localeCompare(bValue);
-        return bValue.localeCompare(aValue);
+        return sortDirection.value === "ASC" ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
       }
-      if (sortDirection.value === "ASC") return aValue < bValue ? -1 : 1;
-      return aValue < bValue ? 1 : -1;
+      return sortDirection.value === "ASC" ? aValue < bValue ? -1 : 1 : aValue < bValue ? 1 : -1;
     });
   });
   function toggleSort(fieldname) {
@@ -7448,6 +7475,47 @@ function useTableData(options) {
     toggleSort
   };
 }
+const _hoisted_1$M = { class: "data-preview" };
+const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
+  __name: "DataPreview",
+  props: {
+    data: {},
+    schema: { type: Function },
+    showFields: {},
+    useServerSort: { type: Boolean },
+    selectable: { type: Boolean },
+    onLastItemVisible: { type: Function }
+  },
+  setup(__props) {
+    const props2 = __props;
+    const slots = vue.useSlots();
+    const data2 = vue.computed(() => Array.isArray(props2.data) ? props2.data : [props2.data]);
+    const {
+      computedSchema,
+      computedData
+    } = useTableData({
+      data: data2,
+      schema: props2.schema,
+      showFields: props2.showFields,
+      useServerSort: false
+    });
+    const firstItem = vue.computed(() => computedData.value[0] || {});
+    const { renderField } = useSchemaField({
+      mode: "preview",
+      getRowData: () => firstItem.value
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$M, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(computedSchema), (field) => {
+          return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(renderField)(field, vue.unref(slots))), {
+            key: field.id
+          });
+        }), 128))
+      ]);
+    };
+  }
+});
+const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-ad78731b"]]);
 function useTableSelection(options) {
   const allSelectorEl = vue.ref();
   const computedSelectedItems = vue.computed(() => options.selectedItems.value);
@@ -8076,12 +8144,12 @@ function useTableVirtualization(options) {
     registerLastItemObserver
   };
 }
-const _hoisted_1$M = {
+const _hoisted_1$L = {
   key: 0,
   class: "loading-table-wrapper z-99 h-100 w-100 absolute inset"
 };
 const _hoisted_2$y = { class: "infinite-wrapper" };
-const _hoisted_3$p = { class: "row first-row" };
+const _hoisted_3$q = { class: "row first-row" };
 const _hoisted_4$g = { key: 0 };
 const _hoisted_5$f = ["onClick"];
 const _hoisted_6$c = { class: "flex" };
@@ -8111,7 +8179,7 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
   emits: /* @__PURE__ */ vue.mergeModels(["update:selectedItems", "orderBy", "select", "lastItemVisible"], ["update:loading", "update:itemHeight", "update:selectedItems"]),
   setup(__props, { emit: __emit }) {
     vue.useCssVars((_ctx) => ({
-      "15d141b2": vue.unref(computedItemHeight)
+      "0984904d": vue.unref(computedItemHeight)
     }));
     const props2 = __props;
     const emit2 = __emit;
@@ -8126,6 +8194,7 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
       }
     );
     const data2 = vue.computed(() => props2.data);
+    vue.ref("");
     const {
       computedSchema,
       computedData,
@@ -8171,6 +8240,13 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
         (_a2 = props2.onLastItemVisible) == null ? void 0 : _a2.call(props2);
       }
     });
+    function renderFieldForRow(field, row) {
+      const { renderField } = useSchemaField({
+        mode: "table",
+        getRowData: () => row
+      });
+      return renderField(field, slots);
+    }
     const computedItemHeight = vue.computed(() => `${itemHeight.value}px`);
     vue.watch(
       () => loading.value,
@@ -8197,11 +8273,11 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: "table-list-wrap h-100" }, vue.unref(containerProps), {
         class: { "loading-table": loading.value }
       }), [
-        loading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$M, _cache[4] || (_cache[4] = [
+        loading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$L, _cache[4] || (_cache[4] = [
           vue.createElementVNode("div", { class: "loading-table-animation absolute oval" }, null, -1)
         ]))) : (vue.openBlock(), vue.createElementBlock("div", vue.normalizeProps(vue.mergeProps({ key: 1 }, vue.unref(wrapperProps))), [
           vue.createElementVNode("table", _hoisted_2$y, [
-            vue.createElementVNode("thead", _hoisted_3$p, [
+            vue.createElementVNode("thead", _hoisted_3$q, [
               vue.unref(isSelectable) ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_4$g, [
                 vue.createElementVNode("input", {
                   ref_key: "allSelectorEl",
@@ -8224,7 +8300,7 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
                     vue.createElementVNode("div", {
                       class: vue.normalizeClass(["list-arrows", { sorted: vue.unref(sortField) === field.id }])
                     }, [
-                      vue.createVNode(vue.unref(_sfc_main$p), {
+                      vue.createVNode(vue.unref(_sfc_main$q), {
                         class: vue.normalizeClass({ desc: vue.unref(sortDirection) === "DESC" }),
                         icon: "keyboard_arrow_up"
                       }, null, 8, ["class"])
@@ -8264,13 +8340,7 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
                         row,
                         field
                       }, void 0, true) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$4, [
-                        vue.createVNode(vue.unref(_sfc_main$10), {
-                          id: field.id,
-                          class: "embedded-field",
-                          field,
-                          modelValue: row,
-                          label: ""
-                        }, null, 8, ["id", "field", "modelValue"])
+                        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderFieldForRow(field, row))))
                       ]))
                     ]);
                   }), 128))
@@ -8289,7 +8359,539 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-cf461a0e"]]);
+const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-18572328"]]);
+function useDraggable(options = {}) {
+  const isDragging = vue.ref(false);
+  const dragElement = vue.ref(null);
+  const ghostElement = vue.ref(null);
+  const dropIndicator = vue.ref(null);
+  const dropTarget = vue.ref(null);
+  const defaultOptions2 = {
+    animation: 150,
+    mode: "line",
+    ghostClass: "draggable-ghost",
+    dragClass: "draggable-dragging",
+    dropIndicatorClass: "draggable-drop-indicator",
+    ...options
+  };
+  let startX = 0;
+  let startY = 0;
+  let initialX = 0;
+  let initialY = 0;
+  let shiftAmount = 0;
+  let cleanupFn;
+  let scrollRAF = null;
+  let lastDropIndex = -1;
+  let lastUpdateTime = 0;
+  const UPDATE_THRESHOLD = 150;
+  const POSITION_CACHE = /* @__PURE__ */ new Map();
+  function createGhost(el) {
+    const ghost = el.cloneNode(true);
+    const rect = el.getBoundingClientRect();
+    ghost.style.position = "fixed";
+    ghost.style.margin = "0";
+    ghost.style.top = `${rect.top}px`;
+    ghost.style.left = `${rect.left}px`;
+    ghost.style.width = `${rect.width}px`;
+    ghost.style.height = `${rect.height}px`;
+    ghost.style.transform = "translate3d(0, 0, 0)";
+    ghost.style.pointerEvents = "none";
+    ghost.style.zIndex = "9999";
+    ghost.style.cursor = "grabbing";
+    ghost.style.willChange = "transform";
+    ghost.classList.add(defaultOptions2.ghostClass);
+    document.body.appendChild(ghost);
+    return ghost;
+  }
+  function createDropIndicator(el) {
+    const line2 = document.createElement("div");
+    line2.classList.add(defaultOptions2.dropIndicatorClass);
+    line2.style.position = "fixed";
+    line2.style.pointerEvents = "none";
+    line2.style.zIndex = "9999";
+    line2.style.height = "2px";
+    line2.style.background = "var(--primary-color, #0066ff)";
+    line2.style.boxShadow = "0 0 4px rgba(0, 102, 255, 0.5)";
+    line2.style.transition = "all 0.15s ease";
+    line2.style.display = "none";
+    const dot = document.createElement("div");
+    dot.style.position = "absolute";
+    dot.style.left = "-4px";
+    dot.style.top = "-3px";
+    dot.style.width = "8px";
+    dot.style.height = "8px";
+    dot.style.borderRadius = "50%";
+    dot.style.background = "var(--primary-color, #0066ff)";
+    line2.appendChild(dot);
+    document.body.appendChild(line2);
+    return line2;
+  }
+  function updateDropIndicator(target, isAfter2) {
+    if (!dropIndicator.value) return;
+    const rect = target.getBoundingClientRect();
+    dropIndicator.value.style.display = "block";
+    dropIndicator.value.style.width = `${rect.width}px`;
+    dropIndicator.value.style.left = `${rect.left}px`;
+    if (isAfter2) {
+      dropIndicator.value.style.top = `${rect.bottom}px`;
+    } else {
+      dropIndicator.value.style.top = `${rect.top}px`;
+    }
+  }
+  function findDraggableParent(element) {
+    let current = element;
+    while (current && (!("__drag_group" in current) || current.dataset.draggable === "false")) {
+      current = current.parentElement;
+    }
+    return current;
+  }
+  function handleGhostMode(dragEl2) {
+    dragEl2.style.opacity = "0.4";
+    dragEl2.style.transform = "scale(0.95)";
+    return dragEl2.offsetHeight;
+  }
+  function handleLineMode(dragEl2) {
+    dragEl2.style.opacity = "0.5";
+    return 2;
+  }
+  function cacheElementPositions(draggedList) {
+    POSITION_CACHE.clear();
+    draggedList.forEach((el, index2) => {
+      const rect = el.getBoundingClientRect();
+      POSITION_CACHE.set(index2, {
+        top: rect.top,
+        bottom: rect.bottom
+      });
+    });
+  }
+  function calculateDropIndex(e, draggedList, dragIndex, newDropTarget) {
+    const now = Date.now();
+    if (now - lastUpdateTime < UPDATE_THRESHOLD) {
+      return lastDropIndex !== -1 ? lastDropIndex : dragIndex;
+    }
+    if (POSITION_CACHE.size === 0) {
+      cacheElementPositions(draggedList);
+    }
+    const mouseY = e.clientY;
+    const targetIndex = draggedList.indexOf(newDropTarget);
+    const targetPos = POSITION_CACHE.get(targetIndex);
+    if (!targetPos) return dragIndex;
+    const elementHeight = targetPos.bottom - targetPos.top;
+    const relativeY = mouseY - targetPos.top;
+    const upperSticky = elementHeight * 0.3;
+    const lowerSticky = elementHeight * 0.7;
+    let dropIndex = targetIndex;
+    if (targetIndex === dragIndex) {
+      if (relativeY > lowerSticky) dropIndex += 1;
+    } else if (targetIndex === lastDropIndex) {
+      if (targetIndex > dragIndex) {
+        if (relativeY < upperSticky) dropIndex = targetIndex;
+        else dropIndex = targetIndex + 1;
+      } else {
+        if (relativeY > lowerSticky) dropIndex = targetIndex + 1;
+        else dropIndex = targetIndex;
+      }
+    } else {
+      if (relativeY > elementHeight * 0.6) dropIndex += 1;
+    }
+    lastDropIndex = dropIndex;
+    lastUpdateTime = now;
+    return dropIndex;
+  }
+  function cleanup() {
+    document.removeEventListener("mousemove", onDragMove);
+    document.removeEventListener("mouseup", onDragEnd);
+    document.removeEventListener("keydown", onKeyDown);
+    document.removeEventListener("touchmove", onTouchMove);
+    document.removeEventListener("touchend", onTouchEnd);
+    document.removeEventListener("touchcancel", onTouchEnd);
+    window.removeEventListener("blur", cleanup);
+    if (ghostElement.value) {
+      ghostElement.value.style.opacity = "0";
+      ghostElement.value.style.transform += " scale(0.8)";
+      setTimeout(() => {
+        var _a2, _b;
+        (_b = (_a2 = ghostElement.value) == null ? void 0 : _a2.parentNode) == null ? void 0 : _b.removeChild(ghostElement.value);
+        ghostElement.value = null;
+      }, 150);
+    }
+    if (dropIndicator.value) {
+      dropIndicator.value.style.opacity = "0";
+      setTimeout(() => {
+        var _a2, _b;
+        (_b = (_a2 = dropIndicator.value) == null ? void 0 : _a2.parentNode) == null ? void 0 : _b.removeChild(dropIndicator.value);
+        dropIndicator.value = null;
+      }, 150);
+    }
+    if (dragElement.value) {
+      const list = dragElement.value.__drag_list;
+      list == null ? void 0 : list.forEach((el) => {
+        el.style.transition = "";
+        el.style.transform = "";
+        el.style.opacity = "";
+      });
+      dragElement.value.classList.remove(defaultOptions2.dragClass);
+      dragElement.value = null;
+    }
+    isDragging.value = false;
+    dropTarget.value = null;
+    document.body.style.userSelect = "";
+    document.body.style.webkitUserSelect = "";
+    document.body.style.cursor = "";
+    if (scrollRAF) {
+      cancelAnimationFrame(scrollRAF);
+      scrollRAF = null;
+    }
+    lastDropIndex = -1;
+    lastUpdateTime = 0;
+    POSITION_CACHE.clear();
+  }
+  function onKeyDown(e) {
+    if (e.key === "Escape" && isDragging.value) {
+      cleanup();
+    }
+  }
+  function onDragStart(e) {
+    var _a2;
+    if (defaultOptions2.disabled) return;
+    if (e.button !== 0) return;
+    if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
+    const dragEl2 = findDraggableParent(e.target);
+    if (!dragEl2 || dragEl2.dataset.draggable === "false") return;
+    if (defaultOptions2.handle) {
+      const handleEl = e.target.closest(defaultOptions2.handle);
+      if (!handleEl || !dragEl2.contains(handleEl)) return;
+    }
+    e.preventDefault();
+    isDragging.value = true;
+    dragElement.value = dragEl2;
+    startX = e.clientX;
+    startY = e.clientY;
+    const rect = dragEl2.getBoundingClientRect();
+    initialX = rect.left;
+    initialY = rect.top;
+    ghostElement.value = createGhost(dragEl2);
+    if (ghostElement.value) {
+      ghostElement.value.style.left = `${initialX}px`;
+      ghostElement.value.style.top = `${initialY}px`;
+    }
+    if (defaultOptions2.mode === "line") {
+      dropIndicator.value = createDropIndicator();
+    }
+    dragEl2.classList.add(defaultOptions2.dragClass);
+    shiftAmount = defaultOptions2.mode === "ghost" ? handleGhostMode(dragEl2) : handleLineMode(dragEl2);
+    (_a2 = defaultOptions2.onStart) == null ? void 0 : _a2.call(defaultOptions2, e);
+    document.body.style.userSelect = "none";
+    document.body.style.webkitUserSelect = "none";
+    document.body.style.cursor = "grabbing";
+    window.addEventListener("blur", cleanup);
+    document.addEventListener("mousemove", onDragMove);
+    document.addEventListener("mouseup", onDragEnd);
+    document.addEventListener("keydown", onKeyDown);
+  }
+  function findScrollParent(element) {
+    let parent = element.parentElement;
+    while (parent) {
+      const { overflow, overflowY } = window.getComputedStyle(parent);
+      if (/auto|scroll/.test(overflow + overflowY)) {
+        return parent;
+      }
+      parent = parent.parentElement;
+    }
+    return document.scrollingElement || document.documentElement || document.body;
+  }
+  function autoScroll2(e) {
+    if (!dragElement.value) return;
+    if (scrollRAF) cancelAnimationFrame(scrollRAF);
+    scrollRAF = requestAnimationFrame(() => {
+      const scrollParent = findScrollParent(dragElement.value);
+      const rect = scrollParent.getBoundingClientRect();
+      const margin = 50;
+      const speed = Math.min(20, rect.height * 0.1);
+      const { scrollTop } = scrollParent;
+      const maxScroll = scrollParent.scrollHeight - scrollParent.clientHeight;
+      if (e.clientY - rect.top < margin) {
+        const newScroll = Math.max(0, scrollTop - speed);
+        scrollParent.scrollTop = newScroll;
+      } else if (rect.bottom - e.clientY < margin) {
+        const newScroll = Math.min(maxScroll, scrollTop + speed);
+        scrollParent.scrollTop = newScroll;
+      }
+    });
+  }
+  function onDragMove(e) {
+    if (!isDragging.value || !dragElement.value) return;
+    if (ghostElement.value) {
+      const dx = e.clientX - startX;
+      const dy = e.clientY - startY;
+      ghostElement.value.style.transform = `translate3d(${dx}px, ${dy}px, 0)`;
+    }
+    const list = dragElement.value.__drag_list;
+    const draggedList = list.filter((el) => el.dataset.draggable !== "false");
+    const dragIndex = draggedList.indexOf(dragElement.value);
+    const elementAtPoint = document.elementFromPoint(e.clientX, e.clientY);
+    const newDropTarget = findDraggableParent(elementAtPoint);
+    if (!newDropTarget || newDropTarget.__drag_group !== dragElement.value.__drag_group) {
+      if (dropIndicator.value) {
+        dropIndicator.value.style.display = "none";
+      }
+      return;
+    }
+    const dropIndex = calculateDropIndex(e, draggedList, dragIndex, newDropTarget);
+    if (dropTarget.value !== newDropTarget || dropTarget.value.__intended_index !== dropIndex) {
+      dropTarget.value = newDropTarget;
+      dropTarget.value.__intended_index = dropIndex;
+      if (dropIndicator.value && defaultOptions2.mode === "line") {
+        const isAfter2 = dropIndex > dragIndex;
+        updateDropIndicator(newDropTarget, isAfter2);
+      }
+      const shift2 = shiftAmount;
+      draggedList.forEach((el) => {
+        el.style.transition = `transform ${defaultOptions2.animation}ms cubic-bezier(0.2, 0, 0, 1)`;
+        el.style.transform = "translate3d(0, 0, 0)";
+        if (el === dragElement.value) {
+          if (defaultOptions2.mode === "ghost") {
+            const offset2 = (dropIndex - dragIndex) * shift2;
+            el.style.transform = `translate3d(0, ${offset2}px, 0)`;
+          }
+        } else {
+          const currentIndex = draggedList.indexOf(el);
+          if (dragIndex < dropIndex) {
+            if (currentIndex > dragIndex && currentIndex <= dropIndex) {
+              el.style.transform = `translate3d(0, -${shift2}px, 0)`;
+            }
+          } else if (dragIndex > dropIndex) {
+            if (currentIndex >= dropIndex && currentIndex < dragIndex) {
+              el.style.transform = `translate3d(0, ${shift2}px, 0)`;
+            }
+          }
+        }
+      });
+    }
+    autoScroll2(e);
+  }
+  function onDragEnd(e) {
+    var _a2;
+    if (!isDragging.value || !dragElement.value || !dropTarget.value) {
+      cleanup();
+      return;
+    }
+    const list = dragElement.value.__drag_list;
+    if (!list || !list.length) {
+      cleanup();
+      return;
+    }
+    const draggedList = list.filter((el) => el.dataset.draggable !== "false");
+    const actualDragIndex = draggedList.indexOf(dragElement.value);
+    const actualDropIndex = dropTarget.value.__intended_index;
+    if (actualDragIndex !== -1 && actualDropIndex !== -1) {
+      list.forEach((el) => {
+        el.style.transition = "none";
+        el.style.transform = "";
+      });
+      void document.body.offsetHeight;
+      const dragEvent = new MouseEvent("mouseup", e);
+      dragEvent.oldIndex = actualDragIndex;
+      dragEvent.newIndex = actualDropIndex;
+      dragEvent.item = dragElement.value.__drag_data;
+      (_a2 = defaultOptions2.onEnd) == null ? void 0 : _a2.call(defaultOptions2, dragEvent);
+    }
+    cleanup();
+  }
+  function onTouchStart(e) {
+    var _a2;
+    if (defaultOptions2.disabled || !e.target) return;
+    const touch = e.touches[0];
+    if (!touch) return;
+    const target = e.target;
+    const draggableParent = findDraggableParent(target);
+    if (!draggableParent) return;
+    const { handle } = defaultOptions2;
+    if (handle && !target.closest(handle)) return;
+    e.preventDefault();
+    isDragging.value = true;
+    dragElement.value = draggableParent;
+    startX = touch.clientX;
+    startY = touch.clientY;
+    const rect = draggableParent.getBoundingClientRect();
+    initialX = rect.left;
+    initialY = rect.top;
+    ghostElement.value = createGhost(draggableParent);
+    if (ghostElement.value) {
+      ghostElement.value.style.left = `${initialX}px`;
+      ghostElement.value.style.top = `${initialY}px`;
+    }
+    if (defaultOptions2.mode === "line") {
+      dropIndicator.value = createDropIndicator();
+    }
+    dragElement.value.classList.add(defaultOptions2.dragClass);
+    shiftAmount = defaultOptions2.mode === "ghost" ? handleGhostMode(dragElement.value) : handleLineMode(dragElement.value);
+    (_a2 = defaultOptions2.onStart) == null ? void 0 : _a2.call(defaultOptions2, e);
+    document.body.style.userSelect = "none";
+    document.body.style.webkitUserSelect = "none";
+    document.body.style.cursor = "grabbing";
+    window.addEventListener("blur", cleanup);
+    document.addEventListener("touchmove", onTouchMove, { passive: false });
+    document.addEventListener("touchend", onTouchEnd);
+    document.addEventListener("touchcancel", onTouchEnd);
+  }
+  function onTouchMove(e) {
+    e.preventDefault();
+    const touch = e.touches[0];
+    if (!touch) return;
+    const mouseEvent = {
+      clientX: touch.clientX,
+      clientY: touch.clientY,
+      target: document.elementFromPoint(touch.clientX, touch.clientY)
+    };
+    onDragMove(mouseEvent);
+    autoScroll2(mouseEvent);
+  }
+  function onTouchEnd(e) {
+    const touch = e.changedTouches[0];
+    if (!touch) return;
+    const mouseEvent = {
+      clientX: touch.clientX,
+      clientY: touch.clientY,
+      target: document.elementFromPoint(touch.clientX, touch.clientY)
+    };
+    onDragEnd(mouseEvent);
+    document.removeEventListener("touchmove", onTouchMove);
+    document.removeEventListener("touchend", onTouchEnd);
+    document.removeEventListener("touchcancel", onTouchEnd);
+  }
+  function initDraggableContainer(container) {
+    cleanupFn == null ? void 0 : cleanupFn();
+    isDragging.value = false;
+    dragElement.value = null;
+    ghostElement.value = null;
+    dropIndicator.value = null;
+    dropTarget.value = null;
+    const elements = Array.from(container.children);
+    elements.forEach((el) => {
+      delete el.__drag_group;
+      delete el.__drag_index;
+      delete el.__drag_list;
+    });
+    let currentIndex = 0;
+    elements.forEach((el, index2) => {
+      if (el.dataset.draggable !== "false") {
+        el.style.userSelect = "none";
+        el.style.webkitUserSelect = "none";
+        el.__drag_group = options.group;
+        el.__drag_index = currentIndex++;
+        el.__drag_list = elements.filter((e) => e.dataset.draggable !== "false");
+        if (options.items) {
+          el.__drag_data = options.items[index2];
+        }
+        el.addEventListener("mousedown", onDragStart);
+        el.addEventListener("touchstart", onTouchStart);
+      }
+    });
+    cleanupFn = () => {
+      elements.forEach((el) => {
+        el.removeEventListener("mousedown", onDragStart);
+        el.removeEventListener("touchstart", onTouchStart);
+        delete el.__drag_group;
+        delete el.__drag_index;
+        delete el.__drag_list;
+      });
+      cleanup();
+    };
+  }
+  vue.onUnmounted(() => {
+    cleanupFn == null ? void 0 : cleanupFn();
+  });
+  return {
+    isDragging,
+    dragElement,
+    initDraggableContainer
+  };
+}
+const style = document.createElement("style");
+style.textContent = `
+  .draggable-ghost {
+    opacity: 0.5;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    transition: transform 0.1s;
+
+  }
+`;
+document.head.appendChild(style);
+const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
+  __name: "Draggable",
+  props: {
+    modelValue: {},
+    group: {},
+    handle: {},
+    mode: { default: "line" },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "start", "end"],
+  setup(__props, { emit: __emit }) {
+    const props2 = __props;
+    const emit2 = __emit;
+    const dragContainer = vue.ref();
+    const { initDraggableContainer } = useDraggable({
+      group: props2.group,
+      handle: props2.handle,
+      mode: props2.mode,
+      disabled: props2.disabled,
+      items: props2.modelValue,
+      onStart: (event) => {
+        emit2("start", event);
+      },
+      onEnd: (event) => {
+        const newList = [...props2.modelValue];
+        const [removed] = newList.splice(event.oldIndex, 1);
+        newList.splice(event.newIndex, 0, removed);
+        emit2("update:modelValue", newList);
+        emit2("end", event);
+        vue.nextTick(() => {
+          if (dragContainer.value) {
+            initDraggableContainer(dragContainer.value);
+          }
+        });
+      }
+    });
+    vue.watch(() => props2.modelValue, () => {
+      if (dragContainer.value) {
+        initDraggableContainer(dragContainer.value);
+      }
+    }, { deep: true });
+    vue.onMounted(() => {
+      if (dragContainer.value) {
+        initDraggableContainer(dragContainer.value);
+      }
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "dragContainer",
+        ref: dragContainer
+      }, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.modelValue, (item, index2) => {
+          return vue.renderSlot(_ctx.$slots, "default", {
+            key: index2,
+            item,
+            index: index2
+          });
+        }), 128))
+      ], 512);
+    };
+  }
+});
+const vDraggable = {
+  mounted(el, binding) {
+    const { initDraggableContainer } = useDraggable(binding.value || {});
+    initDraggableContainer(el);
+  },
+  updated(el, binding) {
+    if (binding.value !== binding.oldValue) {
+      const { initDraggableContainer } = useDraggable(binding.value || {});
+      initDraggableContainer(el);
+    }
+  }
+};
 const sides = ["top", "right", "bottom", "left"];
 const alignments = ["start", "end"];
 const placements = /* @__PURE__ */ sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
@@ -10836,7 +11438,7 @@ const Gt$1 = {
   install: Ct$1,
   options: h
 };
-const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
   __name: "Dropdown",
   props: /* @__PURE__ */ vue.mergeModels({
     value: {},
@@ -10914,9 +11516,9 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$L = { class: "px-1 pt-025 pb-1" };
+const _hoisted_1$K = { class: "px-1 pt-025 pb-1" };
 const _hoisted_2$x = { class: "ms-1" };
-const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
   __name: "FieldSetVue",
   props: {
     label: {},
@@ -10924,15 +11526,15 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("fieldset", _hoisted_1$L, [
+      return vue.openBlock(), vue.createElementBlock("fieldset", _hoisted_1$K, [
         vue.createElementVNode("legend", _hoisted_2$x, vue.toDisplayString(_ctx.legend || _ctx.label), 1),
         vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
       ]);
     };
   }
 });
-const FieldSetVue = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-f7e758e5"]]);
-const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
+const FieldSetVue = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-f7e758e5"]]);
+const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
   __name: "Flag",
   props: {
     country: {},
@@ -10962,8 +11564,8 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Flag = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-f99f1900"]]);
-const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
+const Flag = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-f99f1900"]]);
+const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
   __name: "BagelForm",
   props: {
     modelValue: { default: () => ({}) },
@@ -10988,28 +11590,6 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
       const initial = JSON.stringify(initialFormData.value);
       return current !== initial;
     });
-    function getComponent(field) {
-      var _a2;
-      const componentMap = {
-        text: TextInput,
-        textarea: TextInput,
-        number: NumberInput,
-        array: _sfc_main$P,
-        select: SelectInput,
-        toggle: ToggleInput,
-        check: CheckInput,
-        richtext: RichText,
-        upload: UploadInput,
-        file: FileUpload,
-        date: _sfc_main$K,
-        tabs: TabsNav,
-        bglform: _sfc_main$S
-      };
-      if (field.$el === "textarea" && !((_a2 = field.attrs) == null ? void 0 : _a2.multiline)) {
-        field.attrs = { ...field.attrs, multiline: true };
-      }
-      return componentMap[field.$el] ?? field.$el ?? "div";
-    }
     function updateFormData(fieldId, value) {
       formData.value = {
         ...formData.value,
@@ -11021,61 +11601,6 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
       emit2("submit", formData.value);
       initialFormData.value = { ...formData.value };
     }
-    function renderSchemaField(field) {
-      var _a2;
-      const Component = getComponent(field);
-      if (!Component) return null;
-      if (!shouldRenderField(field)) return null;
-      const {
-        $el,
-        vIf,
-        "v-if": vIf2,
-        children: children2,
-        options,
-        attrs,
-        class: fieldClass,
-        id,
-        onUpdate,
-        // Common form field props that need special handling
-        required: required2,
-        label,
-        placeholder,
-        disabled,
-        ...fieldProps
-      } = field;
-      const currentValue = field.id ? formData.value[field.id] : void 0;
-      const props22 = {
-        ...fieldProps,
-        required: required2,
-        label,
-        placeholder,
-        disabled,
-        "modelValue": currentValue,
-        "onUpdate:modelValue": (value) => {
-          var _a3;
-          if (!field.id) return;
-          updateFormData(field.id, value);
-          (_a3 = field.onUpdate) == null ? void 0 : _a3.call(field, value, formData.value);
-        }
-      };
-      Object.keys(props22).forEach((key) => props22[key] === void 0 && delete props22[key]);
-      if (field.options) {
-        props22.options = typeof field.options === "function" ? field.options(formData.value[field.id], formData.value) : field.options;
-      }
-      if (field.attrs) {
-        Object.entries(field.attrs).forEach(([key, value]) => {
-          props22[key] = typeof value === "function" ? value(formData.value[field.id], formData.value) : value;
-        });
-      }
-      if (field.class) {
-        props22.class = typeof field.class === "function" ? field.class(formData.value[field.id], formData.value) : field.class;
-      }
-      const slots = ((_a2 = field.children) == null ? void 0 : _a2.length) ? {
-        default: () => field.children.map((child) => typeof child === "string" ? child : renderSchemaField(child)).filter(Boolean),
-        ...field.slots
-      } : field.slots;
-      return vue.h(Component, props22, slots);
-    }
     function shouldRenderField(field) {
       const condition = field.vIf ?? field["v-if"];
       if (condition === void 0) return true;
@@ -11085,6 +11610,20 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
       if (!form.value) return false;
       return form.value.reportValidity();
     }
+    const { renderField } = useSchemaField({
+      mode: "form",
+      getRowData: () => formData.value,
+      onUpdate: (field, value) => {
+        var _a2;
+        if (!field.id) return;
+        updateFormData(field.id, value);
+        (_a2 = field.onUpdate) == null ? void 0 : _a2.call(field, value, formData.value);
+      }
+    });
+    function renderSchemaField(field) {
+      if (!shouldRenderField(field)) return null;
+      return renderField(field);
+    }
     __expose({ form: form.value, isDirty: isDirty.value, validateForm });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("form", {
@@ -11106,282 +11645,13 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const state$1 = vue.reactive(/* @__PURE__ */ new Map());
-function useTabs(group) {
-  if (!state$1.has(group)) {
-    state$1.set(group, vue.reactive({ currentTab: void 0 }));
-  }
-  const currentTab = vue.computed({
-    get: () => state$1.get(group).currentTab,
-    set: (val) => {
-      state$1.get(group).currentTab = val;
-    }
-  });
-  return { currentTab };
-}
-const _hoisted_1$K = ["onClick"];
-const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
-  __name: "TabsNav",
-  props: {
-    title: {},
-    tabs: {},
-    modelValue: {},
-    sideTabs: { type: Boolean },
-    group: {},
-    flat: { type: Boolean },
-    vertical: { type: Boolean }
-  },
-  emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    const props2 = __props;
-    const emit2 = __emit;
-    const { currentTab } = useTabs(props2.group);
-    currentTab.value = props2.modelValue || typeof props2.tabs[0] === "string" ? props2.tabs[0] : props2.tabs[0].id;
-    const tabsWrap = vue.ref(void 0);
-    const tabs = vue.ref([]);
-    function updateIndicator() {
-      const activeTab = tabs.value.find((tab) => tab.classList.contains("active"));
-      if (activeTab && tabsWrap.value) {
-        const { offsetLeft, offsetWidth } = activeTab;
-        tabsWrap.value.style.setProperty("--indicator-left", `${offsetLeft}px`);
-        if (tabsWrap.value) {
-          tabsWrap.value.style.setProperty("--indicator-width", `${offsetWidth}px`);
-        }
-      }
-    }
-    function selectTab(tab) {
-      currentTab.value = typeof tab === "string" ? tab : tab.id;
-      emit2("update:modelValue", currentTab.value);
-      vue.nextTick(() => {
-        updateIndicator();
-      });
-    }
-    function isActive(tab) {
-      if (typeof tab === "string") return currentTab.value === tab;
-      return currentTab.value === tab.id;
-    }
-    function tabLabel(tab) {
-      if (typeof tab === "string") return tab;
-      return tab.label;
-    }
-    vue.watch(
-      () => props2.modelValue,
-      (value) => {
-        if (value && !isActive(value)) currentTab.value = value;
-        vue.nextTick(() => {
-          updateIndicator();
-        });
-      },
-      { immediate: true }
-    );
-    vue.onMounted(() => {
-      var _a2;
-      tabs.value = Array.from(((_a2 = tabsWrap.value) == null ? void 0 : _a2.querySelectorAll(".bgl_tab")) || []);
-      updateIndicator();
-      window.addEventListener("resize", updateIndicator);
-    });
-    vue.onBeforeUnmount(() => {
-      window.removeEventListener("resize", updateIndicator);
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        ref_key: "tabsWrap",
-        ref: tabsWrap,
-        class: vue.normalizeClass(["grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden", { "bgl_flat-tabs": _ctx.flat, "bgl_vertical-tabs": _ctx.vertical }])
-      }, [
-        vue.renderSlot(_ctx.$slots, "tabs", vue.normalizeProps(vue.guardReactiveProps({ selectTab, isActive, tabLabel, tabs: tabs.value })), () => [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props2.tabs, (tab, i2) => {
-            return vue.openBlock(), vue.createElementBlock("button", {
-              key: i2,
-              type: "button",
-              class: vue.normalizeClass([{ active: isActive(tab) }, "bgl_tab relative z-1"]),
-              onClick: ($event) => selectTab(tab)
-            }, [
-              typeof tab !== "string" && tab.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
-                key: 0,
-                icon: tab.icon
-              }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-              vue.createTextVNode(" " + vue.toDisplayString(tabLabel(tab)), 1)
-            ], 10, _hoisted_1$K);
-          }), 128))
-        ], true)
-      ], 2);
-    };
-  }
-});
-const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-e680c2a4"]]);
-const FORM_STATE_KEY = Symbol("bagelFormState");
-function safeClone(obj) {
-  if (obj === null || typeof obj !== "object") return obj;
-  const seen = /* @__PURE__ */ new WeakSet();
-  return JSON.parse(JSON.stringify(obj, (key, value) => {
-    if (typeof value === "object" && value !== null) {
-      if (seen.has(value)) {
-        return void 0;
-      }
-      seen.add(value);
-    }
-    return value;
-  }));
-}
-function provideBagelFormState(initialData) {
-  const data2 = vue.ref(initialData);
-  const isDirty = vue.ref(false);
-  const getFieldData = (path) => {
-    if (!path) return "";
-    const keys4 = path.split(/[.[]/);
-    let current = data2.value;
-    for (let i2 = 0; i2 < keys4.length; i2++) {
-      const key = keys4[i2];
-      if (!current || typeof current !== "object" || !(key in current)) {
-        return "";
-      }
-      current = current[key];
-    }
-    return current ?? "";
-  };
-  const updateField = (path, value) => {
-    const keys4 = path.split(/[.[]/);
-    if (typeof data2.value !== "object" || data2.value === null) {
-      data2.value = {};
-    }
-    let current = data2.value;
-    for (let i2 = 0; i2 < keys4.length - 1; i2++) {
-      const key = keys4[i2];
-      if (!(key in current) || typeof current[key] !== "object" || current[key] === null) {
-        current[key] = {};
-      }
-      current = current[key];
-    }
-    const safeValue = safeClone(value);
-    current[keys4[keys4.length - 1]] = safeValue;
-    isDirty.value = true;
-  };
-  const state2 = {
-    data: data2,
-    getFieldData,
-    updateField,
-    isDirty
-  };
-  vue.provide(FORM_STATE_KEY, state2);
-  return state2;
-}
-function useBagelFormState() {
-  const state2 = vue.inject(FORM_STATE_KEY);
-  if (!state2) throw new Error("BagelFormState must be provided");
-  return state2;
-}
-const _hoisted_1$J = { key: 1 };
-const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
-  __name: "BglField",
-  props: {
-    field: {},
-    fieldID: {},
-    modelValue: {},
-    parentPath: {}
-  },
-  emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    const props2 = __props;
-    const emit2 = __emit;
-    const formState = vue.inject(FORM_STATE_KEY) ?? provideBagelFormState(props2.modelValue);
-    const customAttrs = vue.ref({});
-    const is4 = vue.computed(() => {
-      if (props2.field.$el === "text") return TextInput;
-      if (props2.field.$el === "textarea") {
-        customAttrs.value.multiline = true;
-        return TextInput;
-      }
-      if (props2.field.$el === "number") return NumberInput;
-      if (props2.field.$el === "array") return _sfc_main$P;
-      if (props2.field.$el === "select") return SelectInput;
-      if (props2.field.$el === "toggle") return ToggleInput;
-      if (props2.field.$el === "check") return CheckInput;
-      if (props2.field.$el === "richtext") return RichText;
-      if (props2.field.$el === "upload") return UploadInput;
-      if (props2.field.$el === "file") return FileUpload;
-      if (props2.field.$el === "date") return _sfc_main$K;
-      if (props2.field.$el === "tabs") return TabsNav;
-      if (props2.field.$el === "bglform") return _sfc_main$S;
-      return props2.field.$el ?? "div";
-    });
-    const fieldData = vue.computed({
-      get: () => {
-        if (!props2.fieldID) return props2.field.defaultValue ?? (props2.field.$el === "form" ? {} : "");
-        const value = formState.getFieldData(props2.fieldID);
-        if (props2.field.$el === "form" && !value) return {};
-        return value ?? "";
-      },
-      set: (val) => {
-        if (!props2.fieldID) return;
-        const currentValue = formState.getFieldData(props2.fieldID);
-        if (JSON.stringify(val) === JSON.stringify(currentValue)) return;
-        emit2("update:modelValue", val);
-        if (props2.field.onUpdate) {
-          props2.field.onUpdate(val, currentValue);
-        }
-        formState.updateField(props2.fieldID, val);
-      }
-    });
-    const vIf = vue.computed(() => {
-      if (props2.field["v-if"] === void 0 && props2.field.vIf === void 0) return true;
-      if (typeof props2.field["v-if"] === "boolean" || typeof props2.field.vIf === "boolean") return props2.field["v-if"];
-      if (typeof props2.field["v-if"] === "string" || typeof props2.field.vIf === "string") return true;
-      if (typeof props2.field["v-if"] === "function") return props2.field["v-if"](fieldData.value, formState.data.value);
-      if (typeof props2.field.vIf === "function") return props2.field.vIf(fieldData.value, formState.data.value);
-      return true;
-    });
-    const computedOptions = vue.computed(
-      () => bindAttrs({ options: props2.field.options }, fieldData.value, formState.data.value).options
-    );
-    const computedAttrs = vue.computed(() => {
-      const attrs = { ...customAttrs.value, ...props2.field.attrs };
-      return bindAttrs(attrs, fieldData.value, formState.data.value);
-    });
-    const computedClass = vue.computed(
-      () => {
-        var _a2;
-        return classify(fieldData.value, formState.data.value, props2.field.class, (_a2 = props2.field.attrs) == null ? void 0 : _a2.class);
-      }
-    );
-    return (_ctx, _cache) => {
-      const _component_BglField = vue.resolveComponent("BglField", true);
-      return vIf.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(is4.value), vue.mergeProps({ key: 0 }, computedAttrs.value, {
-        modelValue: fieldData.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => fieldData.value = $event),
-        fieldID: props2.fieldID,
-        required: _ctx.field.required,
-        class: computedClass.value,
-        label: _ctx.field.label,
-        placeholder: _ctx.field.placeholder || _ctx.field.label,
-        defaultValue: _ctx.field.defaultValue,
-        disabled: _ctx.field.disabled,
-        options: computedOptions.value,
-        helptext: _ctx.field.helptext
-      }), {
-        default: vue.withCtx(() => [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.field.children, (child, ii) => {
-            return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: ii }, [
-              typeof child !== "string" ? (vue.openBlock(), vue.createBlock(_component_BglField, {
-                key: 0,
-                fieldID: [props2.fieldID, child.id].filter(Boolean).join("."),
-                field: child,
-                "parent-path": props2.fieldID
-              }, null, 8, ["fieldID", "field", "parent-path"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$J, vue.toDisplayString(child), 1))
-            ], 64);
-          }), 128))
-        ]),
-        _: 1
-      }, 16, ["modelValue", "fieldID", "required", "class", "label", "placeholder", "defaultValue", "disabled", "options", "helptext"])) : vue.createCommentVNode("", true);
-    };
-  }
-});
-const _hoisted_1$I = { class: "label mb-05" };
+const _hoisted_1$J = { class: "label mb-05" };
 const _hoisted_2$w = {
   key: 0,
-  class: "-ms-05 ps-05 border-start"
+  class: "ps-025 border-start"
 };
-const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_3$p = { class: "bg-gray-80 -my-05 px-025 pt-065 txt-center" };
+const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
   __name: "FieldArray",
   props: {
     el: { default: "div" },
@@ -11434,33 +11704,45 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
         $el: props2.el
       })
     );
+    const { renderField } = useSchemaField({
+      mode: "form",
+      getRowData: () => data2.value,
+      onUpdate: (field, value) => {
+        if (!field.id) return;
+        const index2 = Number.parseInt(field.id);
+        if (Number.isNaN(index2)) return;
+        data2.value[index2] = value;
+        emitValue();
+      }
+    });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(props2.class)
       }, [
-        vue.createElementVNode("p", _hoisted_1$I, vue.toDisplayString(_ctx.label), 1),
+        vue.createElementVNode("p", _hoisted_1$J, vue.toDisplayString(_ctx.label), 1),
         _ctx.schema ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$w, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(data2.value, (_2, i2) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               key: i2,
               outline: "",
               thin: "",
-              class: "mb-05 itemBox transition p-05"
+              class: "mb-05 itemBox transition ps-05 pb-025 pt-025 radius-05 gap-05 overflow-hidden"
             }, [
-              vue.createVNode(vue.unref(_sfc_main$S), {
+              vue.createVNode(vue.unref(_sfc_main$R), {
                 modelValue: data2.value[i2],
                 "onUpdate:modelValue": [($event) => data2.value[i2] = $event, emitValue],
                 schema: _ctx.schema
               }, null, 8, ["modelValue", "onUpdate:modelValue", "schema"]),
-              props2.delete ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
-                key: 0,
-                icon: "delete",
-                value: "Delete",
-                class: "txt10 opacity-7 color-red",
-                thin: "",
-                flat: "",
-                onClick: ($event) => deleteItem(i2)
-              }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
+              vue.createElementVNode("div", _hoisted_3$p, [
+                props2.delete ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
+                  key: 0,
+                  icon: "delete",
+                  class: "txt10 opacity-7",
+                  thin: "",
+                  flat: "",
+                  onClick: ($event) => deleteItem(i2)
+                }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
+              ])
             ]);
           }), 128)),
           _ctx.add ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
@@ -11472,24 +11754,22 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
             onClick: addItem
           }, {
             default: vue.withCtx(() => [
-              vue.createElementVNode("p", null, "Add " + vue.toDisplayString(_ctx.label), 1)
+              vue.createElementVNode("p", null, vue.toDisplayString(_ctx.label), 1)
             ]),
             _: 1
           })) : vue.createCommentVNode("", true)
         ])) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(data2.value, (_2, i2) => {
-          return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$Q), {
+          return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(renderField)({ ...computedField.value, id: String(i2) })), {
             key: i2,
-            modelValue: data2.value[i2],
-            "onUpdate:modelValue": [($event) => data2.value[i2] = $event, emitValue],
-            field: computedField.value
-          }, null, 8, ["modelValue", "onUpdate:modelValue", "field"]);
+            "onUpdate:modelValue": emitValue
+          });
         }), 128))
       ], 2);
     };
   }
 });
-const _hoisted_1$H = { class: "primary-checkbox" };
-const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$I = { class: "primary-checkbox" };
+const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
   __name: "Checkbox",
   props: {
     "modelValue": { type: Boolean, ...{ default: false } },
@@ -11499,7 +11779,7 @@ const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const val = vue.useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("label", _hoisted_1$H, [
+      return vue.openBlock(), vue.createElementBlock("label", _hoisted_1$I, [
         vue.renderSlot(_ctx.$slots, "label", {}, void 0, true),
         vue.withDirectives(vue.createElementVNode("input", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => val.value = $event),
@@ -11511,11 +11791,11 @@ const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-73f1d9ad"]]);
-const _hoisted_1$G = ["title"];
+const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-73f1d9ad"]]);
+const _hoisted_1$H = ["title"];
 const _hoisted_2$v = ["id", "value", "required"];
 const _hoisted_3$o = ["for"];
-const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
   __name: "CheckInput",
   props: /* @__PURE__ */ vue.mergeModels({
     label: {},
@@ -11557,12 +11837,12 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
             vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
           ], true)
         ], 8, _hoisted_3$o)
-      ], 10, _hoisted_1$G);
+      ], 10, _hoisted_1$H);
     };
   }
 });
-const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-03ed2982"]]);
-const _hoisted_1$F = { class: "mb-05" };
+const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-03ed2982"]]);
+const _hoisted_1$G = { class: "mb-05" };
 const _hoisted_2$u = {
   key: 0,
   class: "label txt-start"
@@ -11574,7 +11854,7 @@ const _hoisted_3$n = {
 const _hoisted_4$f = { class: "overflow-hidden absolute inset-0 p-0 m-0 h-100 codeText" };
 const _hoisted_5$e = ["innerHTML"];
 const _hoisted_6$b = ["onKeydown"];
-const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
   __name: "Index",
   props: {
     language: {},
@@ -11656,7 +11936,7 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
       }
     }, { immediate: true });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$F, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$G, [
         _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$u, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
         vue.unref(loaded) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$n, [
           vue.createElementVNode("div", {
@@ -11692,10 +11972,10 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-1fbc9b61"]]);
-const _hoisted_1$E = ["title"];
+const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-1fbc9b61"]]);
+const _hoisted_1$F = ["title"];
 const _hoisted_2$t = ["id", "placeholder", "required"];
-const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
   __name: "ColorPicker",
   props: {
     label: {},
@@ -11737,7 +12017,7 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
             [vue.vModelText, inputVal.value]
           ])
         ])
-      ], 10, _hoisted_1$E)) : vue.createCommentVNode("", true);
+      ], 10, _hoisted_1$F)) : vue.createCommentVNode("", true);
     };
   }
 });
@@ -20295,9 +20575,9 @@ const eo = ({
 Object.entries(go).forEach(([e, t]) => {
   e !== "default" && (Hn[e] = t);
 });
-const _hoisted_1$D = ["title"];
+const _hoisted_1$E = ["title"];
 const _hoisted_2$s = { key: 0 };
-const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
   __name: "DateInput",
   props: {
     required: { type: Boolean },
@@ -20355,11 +20635,11 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
           "minutes-grid-increment": _ctx.minutesGridIncrement,
           "start-time": { hours: 8, minutes: 0 }
         }), null, 16, ["modelValue", "required", "enable-time-picker", "allowed-dates", "time-picker-inline", "minutes-increment", "minutes-grid-increment"])
-      ], 10, _hoisted_1$D);
+      ], 10, _hoisted_1$E);
     };
   }
 });
-const _hoisted_1$C = ["title"];
+const _hoisted_1$D = ["title"];
 const _hoisted_2$r = { key: 0 };
 const _hoisted_3$m = {
   key: 0,
@@ -20387,13 +20667,13 @@ const _hoisted_15$2 = {
   class: "year-grid grid gap-05 p-0"
 };
 const _hoisted_16$2 = ["disabled", "onClick"];
-const _hoisted_17 = {
+const _hoisted_17$2 = {
   key: 0,
   class: "time-picker flex column gap-1 w-120px"
 };
 const _hoisted_18 = { class: "flex gap-025" };
 const _hoisted_19 = { class: "txt-center opacity-6 txt14" };
-const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
   __name: "DatePick",
   props: {
     required: { type: Boolean },
@@ -20675,7 +20955,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
                   }), 128))
                 ]))
               ]),
-              _ctx.enableTime && vue.unref(currentView) === "days" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17, [
+              _ctx.enableTime && vue.unref(currentView) === "days" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17$2, [
                 vue.createElementVNode("div", _hoisted_18, [
                   vue.createVNode(vue.unref(NumberInput), {
                     center: "",
@@ -20730,12 +21010,12 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
           ]),
           _: 1
         }, 8, ["shown"])
-      ], 10, _hoisted_1$C);
+      ], 10, _hoisted_1$D);
     };
   }
 });
-const DatePick = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-8de3f3c6"]]);
-const _hoisted_1$B = { class: "datetime-wrap" };
+const DatePick = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-8de3f3c6"]]);
+const _hoisted_1$C = { class: "datetime-wrap" };
 const _hoisted_2$q = { class: "date-wrap" };
 const _hoisted_3$l = {
   key: 0,
@@ -20743,7 +21023,7 @@ const _hoisted_3$l = {
 };
 const _hoisted_4$d = ["id", "name", "value"];
 const _hoisted_5$c = ["for"];
-const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
   __name: "DatePicker",
   props: {
     label: {},
@@ -20771,7 +21051,7 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
       return `${hour}:${minute}`;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
         vue.createElementVNode("div", _hoisted_2$q, [
           vue.createVNode(vue.unref(Hn), vue.mergeProps({
             modelValue: selectedDate.value,
@@ -20812,7 +21092,7 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$A = { class: "bagel-input" };
+const _hoisted_1$B = { class: "bagel-input" };
 const _hoisted_2$p = {
   key: 0,
   placeholder: "required",
@@ -20823,7 +21103,7 @@ const _hoisted_2$p = {
 const _hoisted_3$k = { class: "m-05 flex opacity-7 z-99" };
 const _hoisted_4$c = { class: "ellipsis-1 word-break-all h-20 m-0 color-black" };
 const _hoisted_5$b = { class: "flex gap-025 rounded pe-1 ps-05 py-025 bg-gray-80 -my-1" };
-const _hoisted_6$9 = { class: "ellipsis-1 word-break-all h-20 m-0 color-black txt18" };
+const _hoisted_6$9 = { class: "ellipsis-1 word-break-all h-20 m-0 color-black txt16" };
 const _hoisted_7$6 = {
   key: 1,
   class: "txt-gray txt-12"
@@ -20852,7 +21132,8 @@ const _hoisted_15$1 = {
   class: "progress"
 };
 const _hoisted_16$1 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
-const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_17$1 = { class: "pretty balance" };
+const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
   __name: "FileUpload",
   props: /* @__PURE__ */ vue.mergeModels({
     label: {},
@@ -20868,7 +21149,10 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     theme: { default: "dropzone" },
     accept: { default: "*" },
     required: { type: Boolean },
-    disabled: { type: Boolean }
+    disabled: { type: Boolean },
+    dropPlaceholder: {},
+    noFilePlaceholder: {},
+    btnPlaceholder: {}
   }, {
     "modelValue": {
       default: () => []
@@ -21024,7 +21308,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       const _directive_tooltip = vue.resolveDirective("tooltip");
       const _directive_lightbox = vue.resolveDirective("lightbox");
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, [
         vue.createElementVNode("label", null, vue.toDisplayString(_ctx.label), 1),
         _ctx.required && !storageFiles.value.length ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_2$p)) : vue.createCommentVNode("", true),
         _ctx.theme === "basic" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$_), {
@@ -21040,13 +21324,9 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
               class: "px-1-5",
               icon: "upload",
               outline: "",
+              value: _ctx.btnPlaceholder || "Upload",
               onClick: browse
-            }, {
-              default: vue.withCtx(() => _cache[2] || (_cache[2] = [
-                vue.createTextVNode(" Upload ")
-              ])),
-              _: 1
-            })) : vue.createCommentVNode("", true),
+            }, null, 8, ["value"])) : vue.createCommentVNode("", true),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(storageFiles.value, (file) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 key: file.id,
@@ -21087,7 +21367,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                     [_directive_lightbox, { src: file.url, download: true }]
                   ]),
                   vue.createElementVNode("div", _hoisted_5$b, [
-                    vue.createVNode(vue.unref(_sfc_main$p), {
+                    vue.createVNode(vue.unref(_sfc_main$q), {
                       icon: "draft",
                       size: 1.5
                     }),
@@ -21107,7 +21387,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                 ])
               ]);
             }), 128)),
-            !storageFiles.value.length && !fileQueue.value.length ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$6, " No file selected ")) : vue.createCommentVNode("", true)
+            !storageFiles.value.length && !fileQueue.value.length ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$6, vue.toDisplayString(_ctx.noFilePlaceholder || "No file selected"), 1)) : vue.createCommentVNode("", true)
           ]),
           _: 1
         })) : (vue.openBlock(), vue.createElementBlock("div", {
@@ -21138,7 +21418,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                     class: "multi-preview",
                     src: file.url,
                     alt: ""
-                  }, null, 8, ["src"])) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+                  }, null, 8, ["src"])) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
                     key: 1,
                     icon: "draft",
                     class: "multi-preview"
@@ -21168,7 +21448,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                       src: fileToUrl(fileQ.file),
                       alt: ""
                     }, null, 8, ["width", "src"])) : vue.createCommentVNode("", true)
-                  ], 64)) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+                  ], 64)) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
                     key: 1,
                     icon: "draft",
                     class: "multi-preview"
@@ -21179,7 +21459,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                     style: vue.normalizeStyle([`--p:${fileQ.progress}`, { "--b": "2px" }])
                   }, [
                     fileQ.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11$2, vue.toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : vue.createCommentVNode("", true),
-                    vue.createVNode(vue.unref(_sfc_main$p), {
+                    vue.createVNode(vue.unref(_sfc_main$q), {
                       class: "success",
                       icon: "check"
                     })
@@ -21231,7 +21511,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                     }, null, 8, ["src"]), [
                       [_directive_lightbox, { src: file.url, download: true }]
                     ])
-                  ])) : vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+                  ])) : vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
                     key: 1,
                     size: 4,
                     weight: "2",
@@ -21252,7 +21532,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                     style: vue.normalizeStyle([`--p:${fileQ.progress}`, { "--b": "2px" }])
                   }, [
                     fileQ.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_15$1, vue.toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : vue.createCommentVNode("", true),
-                    vue.createVNode(vue.unref(_sfc_main$p), {
+                    vue.createVNode(vue.unref(_sfc_main$q), {
                       class: "success",
                       icon: "check"
                     })
@@ -21276,8 +21556,8 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
             browse
           }, () => [
             vue.createElementVNode("p", _hoisted_16$1, [
-              vue.createVNode(vue.unref(_sfc_main$p), { icon: "upload_2" }),
-              _cache[3] || (_cache[3] = vue.createTextVNode(" Drop files here or click to upload "))
+              vue.createVNode(vue.unref(_sfc_main$q), { icon: "upload_2" }),
+              vue.createElementVNode("span", _hoisted_17$1, vue.toDisplayString(_ctx.dropPlaceholder || "Drag and Drop files here or click to upload"), 1)
             ])
           ], true) : vue.createCommentVNode("", true)
         ], 38))
@@ -21285,11 +21565,11 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-9d12086d"]]);
-const _hoisted_1$z = ["title"];
+const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-9939a5fb"]]);
+const _hoisted_1$A = ["title"];
 const _hoisted_2$o = { key: 0 };
 const _hoisted_3$j = ["value", "placeholder"];
-const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
   __name: "JSONInput",
   props: {
     description: { default: "" },
@@ -21321,19 +21601,19 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
           placeholder: _ctx.placeholder,
           onInput: handleInput
         }, null, 42, _hoisted_3$j)
-      ], 10, _hoisted_1$z);
+      ], 10, _hoisted_1$A);
     };
   }
 });
-const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-1cbaeab2"]]);
-const _hoisted_1$y = ["for"];
+const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-1cbaeab2"]]);
+const _hoisted_1$z = ["for"];
 const _hoisted_2$n = ["id", "placeholder", "disabled", "required", "readonly", "onKeydown"];
 const _hoisted_3$i = { key: 1 };
 const _hoisted_4$b = {
   key: 5,
   class: "flex column spinner"
 };
-const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
   __name: "NumberInput",
   props: {
     modelValue: {},
@@ -21402,7 +21682,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
         }])
       }, [
         vue.createElementVNode("div", { for: _ctx.id }, [
-          vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
+          vue.createElementVNode("label", null, vue.toDisplayString(_ctx.label), 1),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["gap-025", { "column flex": _ctx.layout === "vertical", "flex": _ctx.layout === "horizontal" }])
           }, [
@@ -21451,12 +21731,12 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
               ]
             ]),
             _ctx.helptext ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_3$i, vue.toDisplayString(_ctx.helptext), 1)) : vue.createCommentVNode("", true),
-            _ctx.iconStart ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+            _ctx.iconStart ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
               key: 2,
               class: "iconStart",
               icon: _ctx.iconStart
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-            _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+            _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
               key: 3,
               icon: _ctx.icon
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -21489,14 +21769,14 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
               }, null, 8, ["disabled"])
             ])) : vue.createCommentVNode("", true)
           ], 2)
-        ], 8, _hoisted_1$y)
+        ], 8, _hoisted_1$z)
       ], 2);
     };
   }
 });
-const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-cacbf10f"]]);
-const _hoisted_1$x = ["value", "autofocus", "onKeydown", "onPaste"];
-const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-8ae5f930"]]);
+const _hoisted_1$y = ["value", "autofocus", "onKeydown", "onPaste"];
+const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
   __name: "OTP",
   props: {
     digitCount: {},
@@ -21594,16 +21874,16 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
             oninput: "this.value = this.value.slice(0, 1);",
             onKeydown: ($event) => handleKeyDown($event, ind),
             onPaste: ($event) => handlePaste($event, ind)
-          }, null, 40, _hoisted_1$x);
+          }, null, 40, _hoisted_1$y);
         }), 128))
       ], 512);
     };
   }
 });
-const OTP = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-5c22c199"]]);
-const _hoisted_1$w = { class: "relative" };
+const OTP = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-5c22c199"]]);
+const _hoisted_1$x = { class: "relative" };
 const _hoisted_2$m = { class: "m-password position-bottom-end flex column justify-content-center" };
-const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   __name: "PasswordInput",
   props: /* @__PURE__ */ vue.mergeModels({
     id: {},
@@ -21644,7 +21924,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     );
     const inputType = vue.computed(() => showPwd.value ? "text" : "password");
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
         vue.createVNode(vue.unref(TextInput), vue.mergeProps({
           modelValue: password.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => password.value = $event)
@@ -21665,7 +21945,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$v = ["for"];
+const _hoisted_1$w = ["for"];
 const _hoisted_2$l = ["id", "name", "value", "required"];
 const _hoisted_3$h = { class: "flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025" };
 const _hoisted_4$a = ["src", "alt"];
@@ -21678,7 +21958,7 @@ const _hoisted_7$5 = {
   key: 1,
   class: "txt-gray txt-12 m-0"
 };
-const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
   __name: "RadioGroup",
   props: /* @__PURE__ */ vue.mergeModels({
     groupName: {},
@@ -21733,19 +22013,19 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
               icon: "delete",
               onClick: ($event) => _ctx.$emit("delete", opt)
             }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
-          ], 8, _hoisted_1$v);
+          ], 8, _hoisted_1$w);
         }), 128))
       ]);
     };
   }
 });
-const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-3c77be46"]]);
-const _hoisted_1$u = { class: "bagel-input" };
+const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-3c77be46"]]);
+const _hoisted_1$v = { class: "bagel-input" };
 const _hoisted_2$k = { class: "pb-025" };
 const _hoisted_3$g = { class: "flex gap-05 flex-wrap" };
 const _hoisted_4$9 = ["id", "name", "value", "checked"];
 const _hoisted_5$9 = ["for"];
-const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
   __name: "RadioPillsInput",
   props: {
     options: {},
@@ -21786,7 +22066,7 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
       selectedValue.value = props2.modelValue;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
         vue.createElementVNode("label", _hoisted_2$k, vue.toDisplayString(_ctx.label), 1),
         vue.createElementVNode("div", _hoisted_3$g, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (option2, index2) => {
@@ -21812,8 +22092,8 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-cf892d71"]]);
-const _hoisted_1$t = ["dir"];
+const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-cf892d71"]]);
+const _hoisted_1$u = ["dir"];
 const _hoisted_2$j = {
   key: 0,
   class: "label"
@@ -21823,7 +22103,7 @@ const _hoisted_4$8 = ["id", "value", "min", "max", "step", "required", "disabled
 const _hoisted_5$8 = ["value", "min", "max", "step", "required", "disabled"];
 const _hoisted_6$7 = { class: "track absolute pointer-events-none overflow-hidden round" };
 const _hoisted_7$4 = { class: "txt-center txt-14 user-select-none range-slider-txt flex space-between opacity-4 mx-05" };
-const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
   __name: "RangeInput",
   props: {
     modelValue: {},
@@ -21983,11 +22263,11 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
             vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(formatValue)(vue.unref(max2))), 1)
           ], true)
         ])
-      ], 8, _hoisted_1$t);
+      ], 8, _hoisted_1$u);
     };
   }
 });
-const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-25d991e5"]]);
+const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-25d991e5"]]);
 const tableTools = [
   "mergeCells",
   "splitCells",
@@ -22077,12 +22357,12 @@ const toolbarOptions = [
   { name: "separator" },
   { name: "fullScreen", label: "Full Screen", icon: "fullscreen", class: "ms-auto" }
 ];
-const _hoisted_1$s = { class: "grid grid-wrap p-05" };
+const _hoisted_1$t = { class: "grid grid-wrap p-05" };
 const _hoisted_2$i = ["onMousemove", "onClick"];
 const _hoisted_3$e = { class: "txt-center txt-12 color-gray" };
 const fb = 1;
 const base = 5;
-const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
   __name: "gridBox",
   emits: ["select"],
   setup(__props, { emit: __emit }) {
@@ -22098,7 +22378,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
       return hoveredCol.value > base - 1 ? enlarge : base;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(rowSize.value, (row) => {
           return vue.openBlock(), vue.createElementBlock("div", {
             key: `row-${row}`,
@@ -22134,12 +22414,12 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const GridBox = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-4548b70f"]]);
-const _hoisted_1$r = {
+const GridBox = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-4548b70f"]]);
+const _hoisted_1$s = {
   class: "toolbar flex gap-025 pb-05 flex-wrap",
   role: "toolbar"
 };
-const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
   __name: "EditorToolbar",
   props: {
     config: { default: defaultToolbarConfig },
@@ -22154,10 +22434,10 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     }
     return (_ctx, _cache) => {
       const _directive_tooltip = vue.resolveDirective("tooltip");
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.config.map(configToOption).filter(Boolean), (action, index2) => {
           return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index2 }, [
-            action.name === "insertTable" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$V), {
+            action.name === "insertTable" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$U), {
               key: 0,
               placement: "bottom-start",
               thin: "",
@@ -22197,7 +22477,7 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-bcd681b9"]]);
+const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-bcd681b9"]]);
 function createCommandExecutor(state2, commands) {
   return {
     execute(command, value) {
@@ -22218,7 +22498,7 @@ function createCommandExecutor(state2, commands) {
     }
   };
 }
-function isStyleActive(style, doc) {
+function isStyleActive(style2, doc) {
   const selection = doc.getSelection();
   if (!selection || !selection.rangeCount) return false;
   const range2 = selection.getRangeAt(0);
@@ -22235,7 +22515,7 @@ function isStyleActive(style, doc) {
     italic: ["em", "i"],
     underline: ["u"]
   };
-  return checkParent(parent, styleTags[style] ?? [style]);
+  return checkParent(parent, styleTags[style2] ?? [style2]);
 }
 function analyzeSelection(doc, range2) {
   const container = range2.commonAncestorContainer;
@@ -22789,9 +23069,9 @@ function useEditor() {
       "ol",
       "li"
     ];
-    styleTypes.forEach((style) => {
-      if (state2.doc && isStyleActive(style, state2.doc)) {
-        styles.add(style);
+    styleTypes.forEach((style2) => {
+      if (state2.doc && isStyleActive(style2, state2.doc)) {
+        styles.add(style2);
       }
     });
     state2.selectedStyles = styles;
@@ -23117,13 +23397,13 @@ function useEditorKeyboard(doc, handleToolbarAction) {
     }
   });
 }
-const _hoisted_1$q = { class: "bagel-input" };
+const _hoisted_1$r = { class: "bagel-input" };
 const _hoisted_2$h = { class: "content-area radius-05" };
 const _hoisted_3$d = {
   key: 1,
   class: "flex"
 };
-const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   props: {
     modelValue: {},
@@ -23152,9 +23432,9 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
       doc.designMode = "on";
       doc.body.contentEditable = "true";
       doc.body.dir = hasRTL.value ? "rtl" : "ltr";
-      const style = doc.createElement("style");
-      style.textContent = (await Promise.resolve().then(() => require("./editor-B3mMCQSg.cjs"))).default;
-      doc.head.appendChild(style);
+      const style2 = doc.createElement("style");
+      style2.textContent = (await Promise.resolve().then(() => require("./editor-B3mMCQSg.cjs"))).default;
+      doc.head.appendChild(style2);
       editor.init(doc);
       useEditorKeyboard(doc, commands.execute);
       if (!doc.body.firstElementChild) {
@@ -23200,10 +23480,10 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     });
     return (_ctx, _cache) => {
       var _a2, _b;
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
         vue.createElementVNode("label", null, vue.toDisplayString(_ctx.label), 1),
         vue.createElementVNode("div", {
-          class: vue.normalizeClass(["rich-text-editor rounded pt-05 px-05 pb-075 mb-05", { "fullscreen-mode": vue.unref(editor).state.isFullscreen }])
+          class: vue.normalizeClass(["rich-text-editor rounded pt-05 px-05 pb-075", { "fullscreen-mode": vue.unref(editor).state.isFullscreen }])
         }, [
           vue.unref(editor).state.hasInit ? (vue.openBlock(), vue.createBlock(EditorToolbar, {
             key: 0,
@@ -23278,8 +23558,8 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-59d7c73f"]]);
-const _hoisted_1$p = { class: "flex gap-05" };
+const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-08117333"]]);
+const _hoisted_1$q = { class: "flex gap-05" };
 const _hoisted_2$g = ["disabled"];
 const _hoisted_3$c = { key: 1 };
 const _hoisted_4$7 = {
@@ -23289,7 +23569,7 @@ const _hoisted_4$7 = {
 const _hoisted_5$7 = ["value"];
 const _hoisted_6$6 = ["aria-selected", "onClick", "onKeydown"];
 const _hoisted_7$3 = { class: "block" };
-const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
   __name: "SelectInput",
   props: {
     options: {},
@@ -23465,7 +23745,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$V), {
+      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$U), {
         ref_key: "dropdown",
         ref: dropdown,
         shown: vue.unref(open),
@@ -23477,7 +23757,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
         trigger: vue.withCtx(() => [
           vue.createElementVNode("label", null, [
             vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
-            vue.createElementVNode("div", _hoisted_1$p, [
+            vue.createElementVNode("div", _hoisted_1$q, [
               _ctx.searchable && vue.unref(open) ? (vue.openBlock(), vue.createBlock(vue.unref(TextInput), {
                 key: 0,
                 ref_key: "searchInput",
@@ -23504,7 +23784,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
                   _cache[6] || (_cache[6] = vue.withKeys(vue.withModifiers(($event) => navigate("up"), ["prevent"]), ["up"]))
                 ]
               }, [
-                _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+                _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
                   key: 0,
                   icon: _ctx.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -23521,7 +23801,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
                     })
                   })
                 ])) : vue.createCommentVNode("", true),
-                !_ctx.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), vue.mergeProps({
+                !_ctx.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), vue.mergeProps({
                   key: 3,
                   thin: ""
                 }, { icon: vue.unref(open) ? "unfold_less" : "unfold_more" }), null, 16)) : vue.createCommentVNode("", true)
@@ -23569,12 +23849,12 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
                     ]
                   }, [
                     _ctx.multiselect ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                      isSelected(option2) ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+                      isSelected(option2) ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
                         key: 0,
                         size: 1.1,
                         icon: "select_check_box"
                       })) : vue.createCommentVNode("", true),
-                      !isSelected(option2) ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+                      !isSelected(option2) ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
                         key: 1,
                         class: "opacity-3",
                         icon: "check_box_outline_blank",
@@ -23595,7 +23875,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-70535216"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-70535216"]]);
 /*!
  * Signature Pad v5.0.4 | https://github.com/szimek/signature_pad
  * (c) 2024 Szymon Nowak | Released under the MIT license
@@ -24192,7 +24472,7 @@ class SignaturePad extends SignatureEventTarget {
     return svg.outerHTML;
   }
 }
-const _hoisted_1$o = ["disabled"];
+const _hoisted_1$p = ["disabled"];
 const _hoisted_2$f = {
   key: 1,
   placeholder: "required",
@@ -24200,7 +24480,7 @@ const _hoisted_2$f = {
   required: "",
   class: "pixel"
 };
-const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
   __name: "SignaturePad",
   props: /* @__PURE__ */ vue.mergeModels({
     sigOption: {},
@@ -24353,7 +24633,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
           ref: vCanvas,
           class: "canvas",
           disabled: _ctx.disabled
-        }, null, 8, _hoisted_1$o),
+        }, null, 8, _hoisted_1$p),
         _ctx.required && vue.unref(_isEmpty) ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_2$f)) : vue.createCommentVNode("", true)
       ], 34);
     };
@@ -24534,8 +24814,8 @@ function toggleClass(el, name, state2) {
   }
 }
 function css(el, prop3, val) {
-  var style = el && el.style;
-  if (style) {
+  var style2 = el && el.style;
+  if (style2) {
     if (val === void 0) {
       if (document.defaultView && document.defaultView.getComputedStyle) {
         val = document.defaultView.getComputedStyle(el, "");
@@ -24544,10 +24824,10 @@ function css(el, prop3, val) {
       }
       return prop3 === void 0 ? val : val[prop3];
     } else {
-      if (!(prop3 in style) && prop3.indexOf("webkit") === -1) {
+      if (!(prop3 in style2) && prop3.indexOf("webkit") === -1) {
         prop3 = "-webkit-" + prop3;
       }
-      style[prop3] = val + (typeof val === "string" ? "" : "px");
+      style2[prop3] = val + (typeof val === "string" ? "" : "px");
     }
   }
 }
@@ -26838,13 +27118,13 @@ const VueDraggableNext = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$n = ["title"];
+const _hoisted_1$o = ["title"];
 const _hoisted_2$e = { class: "bagel-input" };
 const _hoisted_3$b = { class: "table-side-scroll" };
 const _hoisted_4$6 = { class: "table-header" };
 const _hoisted_5$6 = { class: "table-reorder" };
 const _hoisted_6$5 = { class: "table-action" };
-const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
   __name: "TableField",
   props: {
     description: { default: "" },
@@ -26941,7 +27221,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
                       class: "flex table-row"
                     }, [
                       vue.createElementVNode("div", _hoisted_5$6, [
-                        vue.createVNode(vue.unref(_sfc_main$p), { icon: "more_vert" })
+                        vue.createVNode(vue.unref(_sfc_main$q), { 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", {
@@ -26958,7 +27238,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
                         ], 2);
                       }), 128)),
                       vue.createElementVNode("div", _hoisted_6$5, [
-                        vue.createVNode(vue.unref(_sfc_main$p), {
+                        vue.createVNode(vue.unref(_sfc_main$q), {
                           icon: "delete",
                           onClick: ($event) => removeRow(index2)
                         }, null, 8, ["onClick"])
@@ -26984,11 +27264,11 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
           ])),
           _: 1
         })
-      ], 8, _hoisted_1$n);
+      ], 8, _hoisted_1$o);
     };
   }
 });
-const TableField = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-e9632f79"]]);
+const TableField = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-e9632f79"]]);
 function bind(fn2, thisArg) {
   return function wrap() {
     return fn2.apply(thisArg, arguments);
@@ -31435,13 +31715,13 @@ function parsePhoneNumber$1() {
 function parsePhoneNumber() {
   return withMetadataArgument(parsePhoneNumber$1, arguments);
 }
-const _hoisted_1$m = ["aria-expanded"];
+const _hoisted_1$n = ["aria-expanded"];
 const _hoisted_2$d = { class: "p-075 tel-countryp-dropdown" };
 const _hoisted_3$a = ["aria-selected", "onClick", "onMousemove"];
 const _hoisted_4$5 = { class: "tel-country" };
 const _hoisted_5$5 = { key: 1 };
 const _hoisted_6$4 = ["id", "required", "placeholder", "disabled", "autocomplete", "pattern", "minlength", "maxlength", "name", "readonly", "tabindex", "aria-describedby"];
-const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
   __name: "TelInput",
   props: /* @__PURE__ */ vue.mergeModels({
     label: {},
@@ -31703,7 +31983,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
               vue.withKeys(reset, ["tab"])
             ]
           }, [
-            !computedDropDownOptions.value.hide ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$V), {
+            !computedDropDownOptions.value.hide ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$U), {
               key: 0,
               ref_key: "phoneDropdown",
               ref: phoneDropdown,
@@ -31716,7 +31996,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
                   class: "flex gap-05",
                   onClick: _cache[0] || (_cache[0] = ($event) => vue.isRef(open) ? open.value = true : open = true)
                 }, [
-                  vue.createVNode(vue.unref(_sfc_main$p), {
+                  vue.createVNode(vue.unref(_sfc_main$q), {
                     icon: vue.unref(open) ? "collapse_all" : "expand_all"
                   }, null, 8, ["icon"]),
                   computedDropDownOptions.value.showFlags && vue.unref(activeCountryCode) ? (vue.openBlock(), vue.createBlock(vue.unref(Flag), {
@@ -31790,19 +32070,19 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
             }, null, 44, _hoisted_6$4), [
               [vue.vModelText, phone.value]
             ])
-          ], 40, _hoisted_1$m)
+          ], 40, _hoisted_1$n)
         ])
       ], 2);
     };
   }
 });
-const TelInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-492fcc54"]]);
-const _hoisted_1$l = ["title"];
+const TelInput = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-492fcc54"]]);
+const _hoisted_1$m = ["title"];
 const _hoisted_2$c = ["for"];
 const _hoisted_3$9 = ["id", "title", "autocomplete", "type", "placeholder", "disabled", "required", "pattern"];
 const _hoisted_4$4 = ["id", "title", "type", "rows", "placeholder", "disabled", "required", "pattern"];
 const _hoisted_5$4 = { key: 2 };
-const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
   __name: "TextInput",
   props: {
     id: {},
@@ -31928,25 +32208,25 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
             [vue.vModelText, vue.unref(inputVal)]
           ]),
           _ctx.helptext ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_5$4, vue.toDisplayString(_ctx.helptext), 1)) : vue.createCommentVNode("", true),
-          _ctx.iconStart ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+          _ctx.iconStart ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
             key: 3,
             class: "iconStart",
             icon: _ctx.iconStart
           }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-          _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+          _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
             key: 4,
             icon: _ctx.icon
           }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
         ], 8, _hoisted_2$c)
-      ], 10, _hoisted_1$l);
+      ], 10, _hoisted_1$m);
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-cc17f96e"]]);
-const _hoisted_1$k = ["title"];
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-cc17f96e"]]);
+const _hoisted_1$l = ["title"];
 const _hoisted_2$b = ["id", "required"];
 const _hoisted_3$8 = ["for"];
-const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
   __name: "ToggleInput",
   props: /* @__PURE__ */ vue.mergeModels({
     label: {},
@@ -31990,11 +32270,11 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
             vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
           ], true)
         ], 8, _hoisted_3$8)
-      ], 10, _hoisted_1$k);
+      ], 10, _hoisted_1$l);
     };
   }
 });
-const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-ebe691ee"]]);
+const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-ebe691ee"]]);
 const files = {
   setBaseUrl: (baseUrl) => {
     if (!baseUrl) return;
@@ -32020,7 +32300,7 @@ const files = {
     });
   }
 };
-const _hoisted_1$j = { class: "bagel-input" };
+const _hoisted_1$k = { class: "bagel-input" };
 const _hoisted_2$a = { key: 0 };
 const _hoisted_3$7 = {
   key: 1,
@@ -32031,7 +32311,7 @@ const _hoisted_3$7 = {
 };
 const _hoisted_4$3 = { class: "m-05 flex opacity-7 z-99" };
 const _hoisted_5$3 = { class: "flex gap-025 rounded pe-1 ps-05 py-025 bg-gray-80 -my-1" };
-const _hoisted_6$3 = { class: "ellipsis-1 word-break-all h-20 m-0 color-black txt18" };
+const _hoisted_6$3 = { class: "ellipsis-1 word-break-all h-20 m-0 color-black txt16" };
 const _hoisted_7$2 = {
   key: 1,
   class: "txt-gray txt-12"
@@ -32060,7 +32340,8 @@ const _hoisted_15 = {
   class: "progress"
 };
 const _hoisted_16 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
-const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_17 = { class: "pretty balance" };
+const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
   __name: "UploadInput",
   props: {
     label: {},
@@ -32075,7 +32356,10 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     accept: { default: "*" },
     required: { type: Boolean },
     disabled: { type: Boolean },
-    baseURL: {}
+    baseURL: {},
+    dropPlaceholder: {},
+    noFilePlaceholder: {},
+    btnPlaceholder: {}
   },
   emits: ["update:modelValue", "addFileStart"],
   setup(__props, { emit: __emit }) {
@@ -32168,7 +32452,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       const _directive_tooltip = vue.resolveDirective("tooltip");
       const _directive_lightbox = vue.resolveDirective("lightbox");
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
         _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$a, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
         _ctx.required && !pathKeys.value.length ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_3$7)) : vue.createCommentVNode("", true),
         _ctx.theme === "basic" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$_), {
@@ -32184,13 +32468,9 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
               class: "px-1-5",
               icon: "upload",
               outline: "",
+              value: _ctx.btnPlaceholder || "Upload",
               onClick: browse
-            }, {
-              default: vue.withCtx(() => _cache[3] || (_cache[3] = [
-                vue.createTextVNode(" Upload ")
-              ])),
-              _: 1
-            })) : vue.createCommentVNode("", true),
+            }, null, 8, ["value"])) : vue.createCommentVNode("", true),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(pathKeys.value, (path_key) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 key: path_key,
@@ -32221,7 +32501,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
                     download: path_key.split("/").pop()
                   }, null, 8, ["href", "download"]),
                   vue.createElementVNode("div", _hoisted_5$3, [
-                    vue.createVNode(vue.unref(_sfc_main$p), {
+                    vue.createVNode(vue.unref(_sfc_main$q), {
                       icon: "draft",
                       size: 1.5
                     }),
@@ -32234,7 +32514,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
                 ])
               ]);
             }), 128)),
-            !pathKeys.value.length && !fileQueue.value.length ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$2, " No file selected ")) : vue.createCommentVNode("", true)
+            !pathKeys.value.length && !fileQueue.value.length ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$2, vue.toDisplayString(_ctx.noFilePlaceholder || "No file selected"), 1)) : vue.createCommentVNode("", true)
           ]),
           _: 1
         })) : (vue.openBlock(), vue.createElementBlock("div", {
@@ -32264,7 +32544,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
                     key: 0,
                     pathKey: path_key,
                     class: "multi-preview"
-                  }, null, 8, ["pathKey"])) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+                  }, null, 8, ["pathKey"])) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
                     key: 1,
                     icon: "description",
                     class: "multi-preview"
@@ -32291,7 +32571,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
                     class: "multi-preview",
                     src: fileToUrl(file.file),
                     alt: ""
-                  }, null, 8, ["src"])) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+                  }, null, 8, ["src"])) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
                     key: 1,
                     icon: "description",
                     class: "multi-preview"
@@ -32302,7 +32582,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
                     style: vue.normalizeStyle([{ "--p": file.progress }, { "--b": "2px" }])
                   }, [
                     file.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11$1, vue.toDisplayString(file.progress.toFixed(0)), 1)) : vue.createCommentVNode("", true),
-                    vue.createVNode(vue.unref(_sfc_main$p), {
+                    vue.createVNode(vue.unref(_sfc_main$q), {
                       class: "success",
                       icon: "check_circle"
                     })
@@ -32350,7 +32630,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
                     }, null, 8, ["pathKey"]), [
                       [_directive_lightbox, { src: pathToUrl(path_key), download: true }]
                     ])
-                  ])) : vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+                  ])) : vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
                     key: 1,
                     size: 4,
                     weight: "2",
@@ -32371,7 +32651,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
                     style: vue.normalizeStyle([{ "--p": file.progress }, { "--b": "2px" }])
                   }, [
                     file.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_15, vue.toDisplayString(file.progress.toFixed(0)), 1)) : vue.createCommentVNode("", true),
-                    vue.createVNode(vue.unref(_sfc_main$p), {
+                    vue.createVNode(vue.unref(_sfc_main$q), {
                       class: "success",
                       icon: "check_circle"
                     })
@@ -32395,8 +32675,8 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
             browse
           }, () => [
             vue.createElementVNode("p", _hoisted_16, [
-              vue.createVNode(vue.unref(_sfc_main$p), { icon: "upload_2" }),
-              _cache[4] || (_cache[4] = vue.createTextVNode(" Drop files here or click to upload "))
+              vue.createVNode(vue.unref(_sfc_main$q), { icon: "upload_2" }),
+              vue.createElementVNode("span", _hoisted_17, vue.toDisplayString(_ctx.dropPlaceholder || "Drag and Drop files here or click to upload"), 1)
             ])
           ], true) : vue.createCommentVNode("", true)
         ], 38))
@@ -32404,7 +32684,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const UploadInput = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-33f11d1f"]]);
+const UploadInput = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-d65d0a87"]]);
 const FONT_AWESOME_ICONS = [
   "trash-can",
   "message",
@@ -36830,7 +37110,7 @@ const MATERIAL_ICONS = [
   "zoom_out",
   "zoom_out_map"
 ];
-const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
   __name: "Icon",
   props: {
     icon: {},
@@ -36861,8 +37141,8 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$i = ["src", "title", "width", "height", "marginwidth", "marginheight", "csp", "scrolling", "srcset"];
-const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$j = ["src", "title", "width", "height", "marginwidth", "marginheight", "csp", "scrolling", "srcset"];
+const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
   __name: "IframeVue",
   props: {
     src: {},
@@ -36921,14 +37201,14 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
         scrolling: _ctx.scrolling,
         srcset: _ctx.srcset,
         onLoad: _cache[0] || (_cache[0] = ($event) => emit2("load", $event))
-      }, null, 40, _hoisted_1$i);
+      }, null, 40, _hoisted_1$j);
     };
   }
 });
-const _hoisted_1$h = { key: 0 };
+const _hoisted_1$i = { key: 0 };
 const _hoisted_2$9 = ["src", "alt", "width", "height"];
 const _hoisted_3$6 = ["src", "alt", "width", "height"];
-const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   __name: "Image",
   props: {
     src: {},
@@ -37010,7 +37290,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     }
     vue.watch(() => [props2.src, props2.pathKey], loadImage, { immediate: true });
     return (_ctx, _cache) => {
-      return _ctx.caption ? (vue.openBlock(), vue.createElementBlock("figcaption", _hoisted_1$h, [
+      return _ctx.caption ? (vue.openBlock(), vue.createElementBlock("figcaption", _hoisted_1$i, [
         vue.unref(imageSrc) ? (vue.openBlock(), vue.createElementBlock("img", vue.mergeProps({
           key: 0,
           src: vue.unref(imageSrc)
@@ -37039,7 +37319,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
           height: vue.unref(normalizeDimension)(_ctx.height)
         })
       }, [
-        vue.createVNode(vue.unref(_sfc_main$p), { name: "broken_image" })
+        vue.createVNode(vue.unref(_sfc_main$q), { name: "broken_image" })
       ], 4)) : (vue.openBlock(), vue.createBlock(vue.unref(Skeleton), {
         key: 3,
         class: "img-web-kit",
@@ -37049,9 +37329,9 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-6f277b5b"]]);
-const _hoisted_1$g = { class: "m-0 pb-025 txt14 line-height-1 w60 menu-text" };
-const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-6f277b5b"]]);
+const _hoisted_1$h = { class: "m-0 pb-025 txt14 line-height-1 w60 menu-text" };
+const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
   __name: "BottomMenu",
   props: {
     navLinks: {}
@@ -37069,12 +37349,12 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
               onClick: nav.onClick
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(vue.unref(_sfc_main$p), {
+                vue.createVNode(vue.unref(_sfc_main$q), {
                   icon: nav.icon,
                   size: 1.4,
                   class: "m-0 line-height-14"
                 }, null, 8, ["icon"]),
-                vue.createElementVNode("p", _hoisted_1$g, vue.toDisplayString(nav.label), 1)
+                vue.createElementVNode("p", _hoisted_1$h, vue.toDisplayString(nav.label), 1)
               ]),
               _: 2
             }, 1032, ["to", "onClick"]);
@@ -37086,8 +37366,8 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const BottomMenu = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-fe3a895e"]]);
-const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+const BottomMenu = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-fe3a895e"]]);
+const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
   __name: "Layout",
   props: {
     gap: { default: 1 },
@@ -37128,9 +37408,9 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Layout = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-1814129a"]]);
-const _hoisted_1$f = { key: 0 };
-const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+const Layout = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-1814129a"]]);
+const _hoisted_1$g = { key: 0 };
+const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
   __name: "SidebarMenu",
   props: {
     navLinks: {},
@@ -37171,13 +37451,13 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
                 class: "nav-button px-075 me-auto w-100"
               }, {
                 default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(_sfc_main$p), {
+                  vue.createVNode(vue.unref(_sfc_main$q), {
                     icon: nav.icon,
                     size: 1.4
                   }, null, 8, ["icon"]),
                   vue.createVNode(vue.Transition, { name: "showP" }, {
                     default: vue.withCtx(() => [
-                      _ctx.open ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_1$f, vue.toDisplayString(nav.label), 1)) : vue.createCommentVNode("", true)
+                      _ctx.open ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_1$g, vue.toDisplayString(nav.label), 1)) : vue.createCommentVNode("", true)
                     ]),
                     _: 2
                   }, 1024)
@@ -37204,8 +37484,8 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SidebarMenu = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-ac02125e"]]);
-const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+const SidebarMenu = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-ac02125e"]]);
+const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
   __name: "Skeleton",
   props: {
     count: { default: 1 },
@@ -37236,11 +37516,11 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-4da8c0d1"]]);
-const _hoisted_1$e = { class: "bgl_card tabs-top" };
+const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-4da8c0d1"]]);
+const _hoisted_1$f = { class: "bgl_card tabs-top" };
 const _hoisted_2$8 = { class: "tabs grid auto-flow-columns fit-content" };
 const _hoisted_3$5 = ["onClick"];
-const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
   __name: "TabbedLayout",
   props: {
     title: {},
@@ -37273,7 +37553,7 @@ const _sfc_main$i = /* @__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$e, [
+        vue.createElementVNode("div", _hoisted_1$f, [
           vue.renderSlot(_ctx.$slots, "top-section", {}, void 0, true),
           vue.createElementVNode("div", _hoisted_2$8, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.tabs, (tab) => {
@@ -37300,9 +37580,22 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TabbedLayout = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-915732c1"]]);
-const _hoisted_1$d = { key: 0 };
-const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+const TabbedLayout = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-915732c1"]]);
+const state$1 = vue.reactive(/* @__PURE__ */ new Map());
+function useTabs(group) {
+  if (!state$1.has(group)) {
+    state$1.set(group, vue.reactive({ currentTab: void 0 }));
+  }
+  const currentTab = vue.computed({
+    get: () => state$1.get(group).currentTab,
+    set: (val) => {
+      state$1.get(group).currentTab = val;
+    }
+  });
+  return { currentTab };
+}
+const _hoisted_1$e = { key: 0 };
+const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
   __name: "Tabs",
   props: {
     tabs: {},
@@ -37344,14 +37637,14 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
           group: vue.unref(group),
           class: "mb-05"
         }, null, 8, ["modelValue", "flat", "tabs", "group"]),
-        vue.unref(currentTab) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+        vue.unref(currentTab) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
           vue.unref(slots)[vue.unref(currentTab)] ? vue.renderSlot(_ctx.$slots, vue.unref(currentTab), { key: 0 }) : vue.unref(currentTab) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabComponent)), { key: 1 })) : vue.createCommentVNode("", true)
         ])) : vue.createCommentVNode("", true)
       ], 64);
     };
   }
 });
-const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
   __name: "TabsBody",
   props: {
     group: {}
@@ -37364,6 +37657,97 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const _hoisted_1$d = ["onClick"];
+const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  __name: "TabsNav",
+  props: {
+    title: {},
+    tabs: {},
+    modelValue: {},
+    sideTabs: { type: Boolean },
+    group: {},
+    flat: { type: Boolean },
+    vertical: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props2 = __props;
+    const emit2 = __emit;
+    const { currentTab } = useTabs(props2.group);
+    currentTab.value = props2.modelValue || typeof props2.tabs[0] === "string" ? props2.tabs[0] : props2.tabs[0].id;
+    const tabsWrap = vue.ref(void 0);
+    const tabs = vue.ref([]);
+    function updateIndicator() {
+      const activeTab = tabs.value.find((tab) => tab.classList.contains("active"));
+      if (activeTab && tabsWrap.value) {
+        const { offsetLeft, offsetWidth } = activeTab;
+        tabsWrap.value.style.setProperty("--indicator-left", `${offsetLeft}px`);
+        if (tabsWrap.value) {
+          tabsWrap.value.style.setProperty("--indicator-width", `${offsetWidth}px`);
+        }
+      }
+    }
+    function selectTab(tab) {
+      currentTab.value = typeof tab === "string" ? tab : tab.id;
+      emit2("update:modelValue", currentTab.value);
+      vue.nextTick(() => {
+        updateIndicator();
+      });
+    }
+    function isActive(tab) {
+      if (typeof tab === "string") return currentTab.value === tab;
+      return currentTab.value === tab.id;
+    }
+    function tabLabel(tab) {
+      if (typeof tab === "string") return tab;
+      return tab.label;
+    }
+    vue.watch(
+      () => props2.modelValue,
+      (value) => {
+        if (value && !isActive(value)) currentTab.value = value;
+        vue.nextTick(() => {
+          updateIndicator();
+        });
+      },
+      { immediate: true }
+    );
+    vue.onMounted(() => {
+      var _a2;
+      tabs.value = Array.from(((_a2 = tabsWrap.value) == null ? void 0 : _a2.querySelectorAll(".bgl_tab")) || []);
+      updateIndicator();
+      window.addEventListener("resize", updateIndicator);
+    });
+    vue.onBeforeUnmount(() => {
+      window.removeEventListener("resize", updateIndicator);
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "tabsWrap",
+        ref: tabsWrap,
+        class: vue.normalizeClass(["grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden", { "bgl_flat-tabs": _ctx.flat, "bgl_vertical-tabs": _ctx.vertical }])
+      }, [
+        vue.renderSlot(_ctx.$slots, "tabs", vue.normalizeProps(vue.guardReactiveProps({ selectTab, isActive, tabLabel, tabs: tabs.value })), () => [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props2.tabs, (tab, i2) => {
+            return vue.openBlock(), vue.createElementBlock("button", {
+              key: i2,
+              type: "button",
+              class: vue.normalizeClass([{ active: isActive(tab) }, "bgl_tab relative z-1"]),
+              onClick: ($event) => selectTab(tab)
+            }, [
+              typeof tab !== "string" && tab.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
+                key: 0,
+                icon: tab.icon
+              }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+              vue.createTextVNode(" " + vue.toDisplayString(tabLabel(tab)), 1)
+            ], 10, _hoisted_1$d);
+          }), 128))
+        ], true)
+      ], 2);
+    };
+  }
+});
+const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-e680c2a4"]]);
 const _hoisted_1$c = { class: "no-margin ellipsis line-height-14 pb-025" };
 const _hoisted_2$7 = { class: "txt12 no-margin txt-gray ellipsis" };
 const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
@@ -37393,7 +37777,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
             src: _ctx.src,
             size: 40
           }, null, 8, ["name", "src"])) : vue.createCommentVNode("", true),
-          _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+          _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
             key: 1,
             size: "1.2",
             class: "color-primary",
@@ -37415,21 +37799,28 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$e = {};
 const _hoisted_1$b = { class: "list-wrap bgl_card thin grid overflow-hidden h-100 pt-0 pb-05 px-0 m_pb-0" };
-const _hoisted_2$6 = { class: "p-1" };
+const _hoisted_2$6 = {
+  key: 0,
+  class: "p-1"
+};
 const _hoisted_3$4 = { class: "list-content auto-flow-rows align-items-start overflow-y h-100" };
-function _sfc_render$3(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
-    vue.createElementVNode("div", _hoisted_2$6, [
-      vue.renderSlot(_ctx.$slots, "header")
-    ]),
-    vue.createElementVNode("div", _hoisted_3$4, [
-      vue.renderSlot(_ctx.$slots, "default")
-    ])
-  ]);
-}
-const ListView = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$3]]);
+const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+  __name: "ListView",
+  setup(__props) {
+    const slots = vue.useSlots();
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+        vue.unref(slots).header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$6, [
+          vue.renderSlot(_ctx.$slots, "header")
+        ])) : vue.createCommentVNode("", true),
+        vue.createElementVNode("div", _hoisted_3$4, [
+          vue.renderSlot(_ctx.$slots, "default")
+        ])
+      ]);
+    };
+  }
+});
 const _hoisted_1$a = { class: "flex-center" };
 const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   __name: "Loading",
@@ -37846,7 +38237,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
         "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => emit2("update:visible", $event))
       }, vue.createSlots({
         default: vue.withCtx(() => [
-          _ctx.visible ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$S), {
+          _ctx.visible ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$R), {
             key: 0,
             ref_key: "form",
             ref: form,
@@ -37942,7 +38333,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
           onClick: toggleMenu,
           onKeypress: vue.withKeys(toggleMenu, ["enter"])
         }, [
-          vue.createVNode(vue.unref(_sfc_main$p), {
+          vue.createVNode(vue.unref(_sfc_main$q), {
             icon: "chevron_right",
             class: "top-arrow"
           })
@@ -37961,7 +38352,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
                   }
                 }, {
                   default: vue.withCtx(() => [
-                    vue.createVNode(vue.unref(_sfc_main$p), {
+                    vue.createVNode(vue.unref(_sfc_main$q), {
                       icon: link.icon
                     }, null, 8, ["icon"]),
                     vue.createElementVNode("div", _hoisted_4$2, vue.toDisplayString(link.label), 1)
@@ -37983,7 +38374,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
                 }
               }, {
                 default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(_sfc_main$p), {
+                  vue.createVNode(vue.unref(_sfc_main$q), {
                     icon: link.icon
                   }, null, 8, ["icon"]),
                   vue.createElementVNode("div", _hoisted_6$2, vue.toDisplayString(link.label), 1)
@@ -38060,8 +38451,8 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     vue.useCssVars((_ctx) => ({
-      "3a60c2df": computedBackgroundColor.value,
-      "69137cfa": cumputedTextColor.value
+      "2a89394f": computedBackgroundColor.value,
+      "369cf12c": cumputedTextColor.value
     }));
     const props2 = __props;
     const slots = vue.useSlots();
@@ -38128,15 +38519,15 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
               }, _ctx.btn), null, 16)
             ])) : vue.createCommentVNode("", true)
           ])),
-          _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+          _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
             key: 2,
             icon: _ctx.icon
           }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "default", {}, void 0, true),
-          !vue.unref(slots).default && _ctx.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
+          !vue.unref(slots).default ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
             vue.createTextVNode(vue.toDisplayString(_ctx.value || _ctx.modelValue), 1)
           ], 64)) : vue.createCommentVNode("", true),
-          _ctx.iconEnd ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+          _ctx.iconEnd ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
             key: 4,
             icon: _ctx.iconEnd
           }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -38154,7 +38545,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Pill = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-47a928b4"]]);
+const Pill = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-2ca4d3a1"]]);
 const _sfc_main$5 = {};
 function _sfc_render$2(_ctx, _cache) {
   const _component_router_view = vue.resolveComponent("router-view");
@@ -38646,6 +39037,67 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Zoomer = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-379819e1"]]);
+const FORM_STATE_KEY = Symbol("bagelFormState");
+function safeClone(obj) {
+  if (obj === null || typeof obj !== "object") return obj;
+  const seen = /* @__PURE__ */ new WeakSet();
+  return JSON.parse(JSON.stringify(obj, (key, value) => {
+    if (typeof value === "object" && value !== null) {
+      if (seen.has(value)) {
+        return void 0;
+      }
+      seen.add(value);
+    }
+    return value;
+  }));
+}
+function provideBagelFormState(initialData) {
+  const data2 = vue.ref(initialData);
+  const isDirty = vue.ref(false);
+  const getFieldData = (path) => {
+    if (!path) return "";
+    const keys4 = path.split(/[.[]/);
+    let current = data2.value;
+    for (let i2 = 0; i2 < keys4.length; i2++) {
+      const key = keys4[i2];
+      if (!current || typeof current !== "object" || !(key in current)) {
+        return "";
+      }
+      current = current[key];
+    }
+    return current ?? "";
+  };
+  const updateField = (path, value) => {
+    const keys4 = path.split(/[.[]/);
+    if (typeof data2.value !== "object" || data2.value === null) {
+      data2.value = {};
+    }
+    let current = data2.value;
+    for (let i2 = 0; i2 < keys4.length - 1; i2++) {
+      const key = keys4[i2];
+      if (!(key in current) || typeof current[key] !== "object" || current[key] === null) {
+        current[key] = {};
+      }
+      current = current[key];
+    }
+    const safeValue = safeClone(value);
+    current[keys4[keys4.length - 1]] = safeValue;
+    isDirty.value = true;
+  };
+  const state2 = {
+    data: data2,
+    getFieldData,
+    updateField,
+    isDirty
+  };
+  vue.provide(FORM_STATE_KEY, state2);
+  return state2;
+}
+function useBagelFormState() {
+  const state2 = vue.inject(FORM_STATE_KEY);
+  if (!state2) throw new Error("BagelFormState must be provided");
+  return state2;
+}
 function useBglSchema({ schema, showFields, data: data2 } = {}) {
   let _schema = schema;
   if (typeof _schema === "function") {
@@ -39112,13 +39564,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                           title: item == null ? void 0 : item.name,
                           class: "vw90"
                         }, null, 8, _hoisted_5)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
-                          vue.createVNode(vue.unref(_sfc_main$p), {
+                          vue.createVNode(vue.unref(_sfc_main$q), {
                             class: "m-0 m_none",
                             icon: "draft",
                             size: 10,
                             weight: "12"
                           }),
-                          vue.createVNode(vue.unref(_sfc_main$p), {
+                          vue.createVNode(vue.unref(_sfc_main$q), {
                             class: "m-0 none m_block m_-mb-1",
                             icon: "draft",
                             size: 4,
@@ -39157,7 +39609,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         src: item.src,
                         alt: "",
                         onClick: ($event) => selectItem(index2)
-                      }, null, 8, ["src", "class", "onClick"])) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
+                      }, null, 8, ["src", "class", "onClick"])) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$q), {
                         key: 1,
                         class: vue.normalizeClass(["thumbnail object-fit-cover hover opacity-5 ed flex bg-popup justify-content-center align-items-center flex-shrink-0", { active: vue.unref(currentIndex) === index2 }]),
                         icon: "description",
@@ -40296,11 +40748,10 @@ exports.AddressSearch = _sfc_main$15;
 exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
-exports.BagelForm = _sfc_main$S;
+exports.BagelForm = _sfc_main$R;
 exports.BagelVue = BagelVue;
 exports.BglComponent = _sfc_main$10;
-exports.BglField = _sfc_main$Q;
-exports.BglForm = _sfc_main$S;
+exports.BglForm = _sfc_main$R;
 exports.BglVideo = BglVideo;
 exports.BottomMenu = BottomMenu;
 exports.Btn = Btn;
@@ -40309,28 +40760,29 @@ exports.Carousel = Carousel;
 exports.CheckInput = CheckInput;
 exports.Checkbox = Checkbox;
 exports.CodeEditor = CodeEditor;
-exports.ColorPicker = _sfc_main$L;
+exports.ColorPicker = _sfc_main$M;
 exports.DataPreview = DataPreview;
 exports.DataTable = DataTable;
-exports.DateInput = _sfc_main$K;
+exports.DateInput = _sfc_main$L;
 exports.DatePick = DatePick;
-exports.DatePicker = _sfc_main$I;
-exports.Dropdown = _sfc_main$V;
+exports.DatePicker = _sfc_main$J;
+exports.Draggable = _sfc_main$V;
+exports.Dropdown = _sfc_main$U;
 exports.FORM_STATE_KEY = FORM_STATE_KEY;
-exports.FieldArray = _sfc_main$P;
+exports.FieldArray = _sfc_main$Q;
 exports.FieldSetVue = FieldSetVue;
 exports.FileUpload = FileUpload;
 exports.Flag = Flag;
 exports.IMAGE_FORMATS = IMAGE_FORMATS;
 exports.IMAGE_FORMATS_REGEXP = IMAGE_FORMATS_REGEXP;
-exports.Icon = _sfc_main$p;
-exports.IframeVue = _sfc_main$o;
+exports.Icon = _sfc_main$q;
+exports.IframeVue = _sfc_main$p;
 exports.Image = Image$1;
 exports.JSONInput = JSONInput;
 exports.Layout = Layout;
 exports.Lineart = _sfc_main$Y;
 exports.ListItem = _sfc_main$f;
-exports.ListView = ListView;
+exports.ListView = _sfc_main$e;
 exports.Loading = Loading;
 exports.MapEmbed = _sfc_main$c;
 exports.Modal = _sfc_main$b;
@@ -40341,7 +40793,7 @@ exports.NavBar = NavBar;
 exports.NumberInput = NumberInput;
 exports.OTP = OTP;
 exports.PageTitle = _sfc_main$7;
-exports.PasswordInput = _sfc_main$D;
+exports.PasswordInput = _sfc_main$E;
 exports.Pill = Pill;
 exports.RadioGroup = RadioGroup;
 exports.RadioPillsInput = RadioPillsInput;
@@ -40350,13 +40802,13 @@ exports.RichText = RichText;
 exports.RouterWrapper = RouterWrapper;
 exports.SelectInput = SelectInput;
 exports.SidebarMenu = SidebarMenu;
-exports.SignaturePad = _sfc_main$v;
+exports.SignaturePad = _sfc_main$w;
 exports.Skeleton = Skeleton;
 exports.TabbedLayout = TabbedLayout;
 exports.TableField = TableField;
 exports.TableSchema = DataTable;
-exports.Tabs = _sfc_main$h;
-exports.TabsBody = _sfc_main$g;
+exports.Tabs = _sfc_main$i;
+exports.TabsBody = _sfc_main$h;
 exports.TabsNav = TabsNav;
 exports.TelInput = TelInput;
 exports.TextInput = TextInput;
@@ -40396,8 +40848,10 @@ exports.useBagel = useBagel;
 exports.useBagelFormState = useBagelFormState;
 exports.useBglSchema = useBglSchema;
 exports.useDebounceFn = useDebounceFn;
+exports.useDraggable = useDraggable;
 exports.useEscape = useEscape;
 exports.useI18nT = useI18nT;
 exports.useLang = useLang;
 exports.useLocalStorage = useLocalStorage;
 exports.useModal = useModal;
+exports.vDraggable = vDraggable;