@bagelink/vue 0.0.1143 → 0.0.1147

package/dist/index.cjs

@@ -1,7 +1,7 @@
 "use strict";
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp2 = Object.defineProperty;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField2 = (obj, key, value) => __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
 const vueRouter = require("vue-router");
@@ -47,7 +47,7 @@ const bagelFormUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defi
     return uploadField;
   }
 }, Symbol.toStringTag, { value: "Module" }));
-const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
   __name: "Accordion",
   setup(__props) {
     const state2 = vue.reactive({
@@ -61,10 +61,10 @@ const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-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$17 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$X = ["aria-expanded", "aria-controls"];
+const _hoisted_2$E = { class: "accordion-label" };
+const _hoisted_3$v = ["id", "aria-hidden"];
+const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
   __name: "AccordionItem",
   props: {
     label: {},
@@ -130,7 +130,7 @@ const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
             vue.createVNode(vue.unref(_sfc_main$p), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "head", {}, () => [
-            vue.createElementVNode("span", _hoisted_2$D, vue.toDisplayString(_ctx.label), 1)
+            vue.createElementVNode("span", _hoisted_2$E, vue.toDisplayString(_ctx.label), 1)
           ], true),
           iconPosition.value === "end" ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 1,
@@ -138,7 +138,7 @@ const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
           }, [
             vue.createVNode(vue.unref(_sfc_main$p), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : vue.createCommentVNode("", true)
-        ], 8, _hoisted_1$W),
+        ], 8, _hoisted_1$X),
         vue.createVNode(vue.Transition, { name: "expand" }, {
           default: vue.withCtx(() => [
             vue.unref(isOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -148,7 +148,7 @@ const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
               "aria-hidden": vue.unref(isOpen) ? "false" : "true"
             }, [
               vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
-            ], 8, _hoisted_3$u)) : vue.createCommentVNode("", true)
+            ], 8, _hoisted_3$v)) : vue.createCommentVNode("", true)
           ]),
           _: 3
         })
@@ -163,9 +163,9 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["__scopeId", "data-v-3334f637"]]);
-const _hoisted_1$V = { class: "relative" };
-const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
+const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["__scopeId", "data-v-3334f637"]]);
+const _hoisted_1$W = { class: "relative" };
+const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
   __name: "AddressSearch",
   emits: ["addressSelected"],
   setup(__props, { emit: __emit }) {
@@ -187,8 +187,8 @@ const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
       (_a2 = suggestion.value) == null ? void 0 : _a2.show();
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$V, [
-        vue.createVNode(vue.unref(_sfc_main$W), {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$W, [
+        vue.createVNode(vue.unref(_sfc_main$V), {
           ref_key: "suggestion",
           ref: suggestion,
           noAutoFocus: true,
@@ -223,11 +223,11 @@ const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$U = {
+const _hoisted_1$V = {
   key: 1,
   class: "bgl_btn-flex"
 };
-const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
   __name: "Btn",
   props: {
     disabled: { type: Boolean, default: false },
@@ -293,7 +293,7 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
             key: 0,
             class: "h-100p",
             size: "15"
-          })) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$U, [
+          })) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$V, [
             _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$p), {
               key: 0,
               icon: _ctx.icon,
@@ -317,10 +317,10 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["__scopeId", "data-v-7b18a02c"]]);
-const _hoisted_1$T = ["dismissable"];
-const _hoisted_2$C = { class: "m-0" };
-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 _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
   __name: "Alert",
   props: {
     message: {},
@@ -348,7 +348,7 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
           size: 2,
           color: color2[_ctx.type]
         }, null, 8, ["icon", "color"])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("p", _hoisted_2$C, vue.toDisplayString(_ctx.message), 1),
+        vue.createElementVNode("p", _hoisted_2$D, vue.toDisplayString(_ctx.message), 1),
         vue.createVNode(Btn, {
           flat: "",
           thin: "",
@@ -356,13 +356,13 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
           icon: "close",
           onClick: _cache[0] || (_cache[0] = ($event) => isDismissed.value = true)
         })
-      ], 10, _hoisted_1$T)) : vue.createCommentVNode("", true);
+      ], 10, _hoisted_1$U)) : vue.createCommentVNode("", true);
     };
   }
 });
-const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-064bdd20"]]);
-const _hoisted_1$S = ["src", "alt"];
-const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
+const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-064bdd20"]]);
+const _hoisted_1$T = ["src", "alt"];
+const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
   __name: "Avatar",
   props: {
     fallback: {},
@@ -380,7 +380,7 @@ const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
           key: 0,
           src: _ctx.src,
           alt: _ctx.name
-        }, null, 8, _hoisted_1$S)) : (vue.openBlock(), vue.createElementBlock("p", {
+        }, null, 8, _hoisted_1$T)) : (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))
@@ -388,8 +388,8 @@ const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-46ad8c25"]]);
-const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
+const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-46ad8c25"]]);
+const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
   __name: "Badge",
   props: {
     color: {},
@@ -418,9 +418,9 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-689f051f"]]);
-const _hoisted_1$R = { key: 1 };
-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 _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
   __name: "BglComponent",
   props: {
     field: {},
@@ -449,7 +449,7 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
       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 === "form") return _sfc_main$Q;
+      if (props2.field.$el === "form") return _sfc_main$S;
       return props2.field.$el ?? "div";
     });
     function getFieldData(path) {
@@ -566,7 +566,7 @@ const _sfc_main$11 = /* @__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$R, vue.toDisplayString(child), 1))
+                }, null, 8, ["id", "field", "parent-path"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$S, vue.toDisplayString(child), 1))
               ], 64);
             }), 128))
           ], 64))
@@ -576,10 +576,10 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$Q = ["src"];
-const _hoisted_2$B = ["autoplay", "muted", "loop", "controls", "playsinline"];
-const _hoisted_3$t = ["src", "type"];
-const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$R = ["src"];
+const _hoisted_2$C = ["autoplay", "muted", "loop", "controls", "playsinline"];
+const _hoisted_3$u = ["src", "type"];
+const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
   __name: "BglVideo",
   props: {
     src: {},
@@ -656,7 +656,7 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
           allowfullscreen: "",
           title: "Video",
           allow: "autoplay"
-        }, null, 12, _hoisted_1$Q)) : _ctx.src ? (vue.openBlock(), vue.createElementBlock("video", {
+        }, null, 12, _hoisted_1$R)) : _ctx.src ? (vue.openBlock(), vue.createElementBlock("video", {
           key: 1,
           ref_key: "video",
           ref: video,
@@ -670,18 +670,18 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
           vue.createElementVNode("source", {
             src: _ctx.src,
             type: `video/${videoFormat.value}`
-          }, null, 8, _hoisted_3$t)
-        ], 12, _hoisted_2$B)) : vue.createCommentVNode("", true)
+          }, null, 8, _hoisted_3$u)
+        ], 12, _hoisted_2$C)) : vue.createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["__scopeId", "data-v-006552f6"]]);
-const _hoisted_1$P = {
+const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["__scopeId", "data-v-006552f6"]]);
+const _hoisted_1$Q = {
   key: 0,
   class: "card_label"
 };
-const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
   __name: "Card",
   props: {
     label: {},
@@ -710,7 +710,7 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
         }])
       }, {
         default: vue.withCtx(() => [
-          _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$P, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
+          _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$Q, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
@@ -720,16 +720,16 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$O = ["dir"];
-const _hoisted_2$A = {
+const _hoisted_1$P = ["dir"];
+const _hoisted_2$B = {
   key: 0,
   class: "dots"
 };
-const _hoisted_3$s = ["onClick"];
+const _hoisted_3$t = ["onClick"];
 const _hoisted_4$j = { class: "Handlers" };
 const GAP_PERCENT = 1;
 const VELOCITY_SAMPLE_DURATION = 100;
-const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
   __name: "Carousel",
   props: {
     autoHeight: { type: Boolean, default: false },
@@ -900,6 +900,7 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
       });
     }
     function startDrag(e) {
+      e.stopPropagation();
       if (e.button !== 0 || !props2.freeDrag || !isSliderAvailable.value) return;
       clearAutoplay();
       startX.value = e.pageX;
@@ -1148,13 +1149,13 @@ const _sfc_main$_ = /* @__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$A, [
+        props2.dots && vue.unref(slideCount) > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$B, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(slideCount), (i2) => {
             return vue.openBlock(), vue.createElementBlock("span", {
               key: i2,
               class: vue.normalizeClass(["dot", { current: vue.unref(activeSlideIndex) === i2 - 1 }]),
               onClick: ($event) => goToSlide(i2 - 1)
-            }, null, 10, _hoisted_3$s);
+            }, null, 10, _hoisted_3$t);
           }), 128))
         ])) : vue.createCommentVNode("", true),
         vue.createElementVNode("div", _hoisted_4$j, [
@@ -1171,11 +1172,11 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
             }, void 0, true)
           ])
         ])
-      ], 14, _hoisted_1$O);
+      ], 14, _hoisted_1$P);
     };
   }
 });
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["__scopeId", "data-v-f03624ac"]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-1ae4b9ae"]]);
 function _isPlaceholder(a2) {
   return a2 != null && typeof a2 === "object" && a2["@@functional/placeholder"] === true;
 }
@@ -7009,7 +7010,7 @@ const _hoisted_1$1$1 = {
   style: { display: "flex", position: "relative" }
 };
 const _hoisted_2$1$1 = ["width", "height", "viewBox"];
-const _hoisted_3$r = { class: "layer-rectangles" };
+const _hoisted_3$s = { class: "layer-rectangles" };
 const _hoisted_4$i = ["transform", "onMouseover"];
 const _hoisted_5$h = ["width", "height"];
 const _hoisted_6$e = {
@@ -7027,7 +7028,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       viewBox: `0 0 ${_ctx.size.width} ${_ctx.size.height}`,
       ref: "el"
     }, [
-      vue.createElementVNode("g", _hoisted_3$r, [
+      vue.createElementVNode("g", _hoisted_3$s, [
         (vue.openBlock(true), vue.createElementBlock(
           vue.Fragment,
           null,
@@ -7119,25 +7120,25 @@ var script = vue.defineComponent({
     return { bar, canvas, direction, mouse };
   }
 });
-const _hoisted_1$N = {
+const _hoisted_1$O = {
   key: 0,
   class: "layer-hover-bar"
 };
-const _hoisted_2$z = ["x", "y", "width", "height"];
+const _hoisted_2$A = ["x", "y", "width", "height"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.mouse.hover ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_1$N, [
+  return _ctx.mouse.hover ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_1$O, [
     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$z)
+    }), null, 16, _hoisted_2$A)
   ])) : vue.createCommentVNode("v-if", true);
 }
 script.render = render;
 script.__file = "src/components/HoverBar/index.vue";
 const BRAND_COLOR = "var(--bgl-primary)";
-const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
   __name: "Lineart",
   props: {
     data: {},
@@ -7277,15 +7278,15 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$M = {
+const _hoisted_1$N = {
   key: 0,
   class: "data"
 };
-const _hoisted_2$y = {
+const _hoisted_2$z = {
   key: 0,
   class: "data-row m_py-05"
 };
-const _hoisted_3$q = { class: "key" };
+const _hoisted_3$r = { class: "key" };
 const _hoisted_4$h = { class: "m-0" };
 const _hoisted_5$g = { key: 1 };
 const _hoisted_6$d = {
@@ -7298,7 +7299,7 @@ const _hoisted_9$5 = {
   key: 0,
   class: "m-0"
 };
-const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
   __name: "DataPreview",
   props: /* @__PURE__ */ vue.mergeModels({
     showFields: {},
@@ -7334,7 +7335,7 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
     const computedSchema = vue.computed(() => getFallbackSchema([itemData.value], props2.showFields));
     return (_ctx, _cache) => {
       var _a2;
-      return __props.data ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$M, [
+      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
@@ -7343,11 +7344,11 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
           return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
             key: field.id
           }, [
-            vue.unref(iffer)(field, itemData.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$y, [
-              vue.createElementVNode("div", _hoisted_3$q, [
+            vue.unref(iffer)(field, itemData.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$z, [
+              vue.createElementVNode("div", _hoisted_3$r, [
                 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$R), {
+              vue.createVNode(vue.unref(_sfc_main$Q), {
                 modelValue: itemData.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => itemData.value = $event),
                 label: "",
@@ -7376,7 +7377,7 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-6c27f163"]]);
+const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-6c27f163"]]);
 const NON_DIGIT_REGEX = /[^\d.-]/g;
 function useTableData(options) {
   const sortField = vue.ref("");
@@ -8075,12 +8076,12 @@ function useTableVirtualization(options) {
     registerLastItemObserver
   };
 }
-const _hoisted_1$L = {
+const _hoisted_1$M = {
   key: 0,
   class: "loading-table-wrapper z-99 h-100 w-100 absolute inset"
 };
-const _hoisted_2$x = { class: "infinite-wrapper" };
-const _hoisted_3$p = { class: "row first-row" };
+const _hoisted_2$y = { class: "infinite-wrapper" };
+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" };
@@ -8088,7 +8089,7 @@ const _hoisted_7$8 = ["onClick"];
 const _hoisted_8$5 = { key: 0 };
 const _hoisted_9$4 = ["value"];
 const _hoisted_10$4 = { key: 1 };
-const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
   __name: "DataTable",
   props: /* @__PURE__ */ vue.mergeModels({
     data: {},
@@ -8196,11 +8197,11 @@ const _sfc_main$X = /* @__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$L, _cache[4] || (_cache[4] = [
+        loading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$M, _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$x, [
-            vue.createElementVNode("thead", _hoisted_3$p, [
+          vue.createElementVNode("table", _hoisted_2$y, [
+            vue.createElementVNode("thead", _hoisted_3$q, [
               vue.unref(isSelectable) ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_4$g, [
                 vue.createElementVNode("input", {
                   ref_key: "allSelectorEl",
@@ -8263,7 +8264,7 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
                         row,
                         field
                       }, void 0, true) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$4, [
-                        vue.createVNode(vue.unref(_sfc_main$11), {
+                        vue.createVNode(vue.unref(_sfc_main$10), {
                           id: field.id,
                           class: "embedded-field",
                           field,
@@ -8288,7 +8289,7 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-cf461a0e"]]);
+const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-cf461a0e"]]);
 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]), []);
@@ -10835,7 +10836,7 @@ const Gt$1 = {
   install: Ct$1,
   options: h
 };
-const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
   __name: "Dropdown",
   props: /* @__PURE__ */ vue.mergeModels({
     value: {},
@@ -10913,9 +10914,9 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$K = { class: "px-1 pt-025 pb-1" };
-const _hoisted_2$w = { class: "ms-1" };
-const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$L = { class: "px-1 pt-025 pb-1" };
+const _hoisted_2$x = { class: "ms-1" };
+const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
   __name: "FieldSetVue",
   props: {
     label: {},
@@ -10923,15 +10924,15 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("fieldset", _hoisted_1$K, [
-        vue.createElementVNode("legend", _hoisted_2$w, vue.toDisplayString(_ctx.legend || _ctx.label), 1),
+      return vue.openBlock(), vue.createElementBlock("fieldset", _hoisted_1$L, [
+        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$V, [["__scopeId", "data-v-f7e758e5"]]);
-const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
+const FieldSetVue = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-f7e758e5"]]);
+const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
   __name: "Flag",
   props: {
     country: {},
@@ -10961,8 +10962,8 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Flag = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-f99f1900"]]);
-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({
   __name: "BagelForm",
   props: {
     modelValue: { default: () => ({}) },
@@ -11002,7 +11003,7 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
         file: FileUpload,
         date: _sfc_main$K,
         tabs: TabsNav,
-        bglform: _sfc_main$Q
+        bglform: _sfc_main$S
       };
       if (field.$el === "textarea" && !((_a2 = field.attrs) == null ? void 0 : _a2.multiline)) {
         field.attrs = { ...field.attrs, multiline: true };
@@ -11118,8 +11119,8 @@ function useTabs(group) {
   });
   return { currentTab };
 }
-const _hoisted_1$J = ["onClick"];
-const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$K = ["onClick"];
+const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
   __name: "TabsNav",
   props: {
     title: {},
@@ -11201,14 +11202,14 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
                 icon: tab.icon
               }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
               vue.createTextVNode(" " + vue.toDisplayString(tabLabel(tab)), 1)
-            ], 10, _hoisted_1$J);
+            ], 10, _hoisted_1$K);
           }), 128))
         ], true)
       ], 2);
     };
   }
 });
-const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-e680c2a4"]]);
+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;
@@ -11270,8 +11271,8 @@ function useBagelFormState() {
   if (!state2) throw new Error("BagelFormState must be provided");
   return state2;
 }
-const _hoisted_1$I = { key: 1 };
-const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$J = { key: 1 };
+const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
   __name: "BglField",
   props: {
     field: {},
@@ -11301,7 +11302,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
       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$Q;
+      if (props2.field.$el === "bglform") return _sfc_main$S;
       return props2.field.$el ?? "div";
     });
     const fieldData = vue.computed({
@@ -11366,7 +11367,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
                 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$I, vue.toDisplayString(child), 1))
+              }, null, 8, ["fieldID", "field", "parent-path"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$J, vue.toDisplayString(child), 1))
             ], 64);
           }), 128))
         ]),
@@ -11375,154 +11376,12 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
-  __name: "BglForm",
-  props: {
-    label: {},
-    fieldID: {},
-    schema: {},
-    modelValue: { default: () => ({}) },
-    onDelete: {},
-    onSubmit: {},
-    status: {},
-    tag: { default: "form" }
-  },
-  emits: ["update:modelValue", "submit", "dirty"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props2 = __props;
-    const emit2 = __emit;
-    const slots = vue.useSlots();
-    const { showModal } = useModal();
-    const existingFormState = vue.inject(FORM_STATE_KEY);
-    const isNested = Boolean(existingFormState && props2.fieldID);
-    const { data: data2, isDirty } = isNested ? existingFormState : provideBagelFormState(props2.modelValue);
-    let emitDirty = vue.ref(false);
-    if (!isNested) {
-      vue.watch(() => props2.modelValue, (newVal) => {
-        if (emitDirty.value) {
-          emitDirty.value = false;
-          return;
-        }
-        data2.value = newVal;
-      }, { deep: true, immediate: true });
-      vue.watch(() => data2.value, (newVal) => {
-        if (emitDirty.value) return;
-        emitDirty.value = true;
-        emit2("dirty");
-        emit2("update:modelValue", newVal);
-      }, { deep: true });
-    }
-    const form = vue.ref();
-    function validateForm() {
-      setTimeout(() => {
-        var _a2;
-        return (_a2 = form.value) == null ? void 0 : _a2.reportValidity();
-      }, 300);
-      if (!form.value) return false;
-      return form.value.reportValidity();
-    }
-    function clearForm() {
-      if (!isNested) {
-        data2.value = {};
-      }
-    }
-    vue.watch(
-      () => props2.status,
-      (status) => {
-        if (status === "success" && !isNested) {
-          isDirty.value = false;
-          clearForm();
-        }
-      },
-      { immediate: true }
-    );
-    function runSubmit() {
-      const isValid2 = validateForm();
-      if (!isValid2) return;
-      emit2("submit", { ...data2.value });
-      if (!isNested) {
-        isDirty.value = false;
-      }
-    }
-    const i18nT = (val) => val;
-    function deleteItem() {
-      showModal(
-        {
-          class: "small-modal",
-          title: i18nT("Are you sure?"),
-          actions: [
-            {
-              value: "Confirm",
-              color: "red",
-              onClick: () => {
-                var _a2;
-                return (_a2 = props2.onDelete) == null ? void 0 : _a2.call(props2, data2.value.id);
-              }
-            },
-            { value: "Cancel", color: "gray" }
-          ]
-        },
-        { default: i18nT("form.deleteMessage") }
-      );
-    }
-    const computedSchema = vue.computed(() => useBglSchema({ schema: props2.schema }));
-    __expose({
-      submit: runSubmit,
-      validateForm,
-      deleteItem,
-      isDirty,
-      clearForm
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-        _ctx.tag === "template" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(computedSchema.value, (field, i2) => {
-            return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$R), {
-              key: field.id || `${i2}p`,
-              fieldID: field.id,
-              field
-            }, null, 8, ["fieldID", "field"]);
-          }), 128)),
-          vue.renderSlot(_ctx.$slots, "submit", {
-            submit: runSubmit,
-            isDirty: vue.unref(isDirty),
-            validateForm
-          })
-        ], 64)) : !vue.unref(slots).success || _ctx.status !== "success" ? (vue.openBlock(), vue.createElementBlock("form", {
-          key: 1,
-          ref_key: "form",
-          ref: form,
-          onSubmit: vue.withModifiers(runSubmit, ["prevent"])
-        }, [
-          _ctx.label ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$4), {
-            key: 0,
-            tag: "h4",
-            label: _ctx.label
-          }, null, 8, ["label"])) : vue.createCommentVNode("", true),
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(computedSchema.value, (field, i2) => {
-            return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$R), {
-              key: field.id || `${i2}p`,
-              fieldID: field.id,
-              field
-            }, null, 8, ["fieldID", "field"]);
-          }), 128)),
-          vue.renderSlot(_ctx.$slots, "submit", {
-            submit: runSubmit,
-            isDirty: vue.unref(isDirty),
-            validateForm
-          })
-        ], 544)) : vue.createCommentVNode("", true),
-        _ctx.status === "success" ? vue.renderSlot(_ctx.$slots, "success", { key: 2 }) : vue.createCommentVNode("", true),
-        _ctx.status === "error" ? vue.renderSlot(_ctx.$slots, "error", { key: 3 }) : vue.createCommentVNode("", true)
-      ], 64);
-    };
-  }
-});
-const _hoisted_1$H = { class: "label mb-05" };
-const _hoisted_2$v = {
+const _hoisted_1$I = { class: "label mb-05" };
+const _hoisted_2$w = {
   key: 0,
-  class: "-ms-05 ps-05 border-start"
+  class: "ps-025 border-start"
 };
+const _hoisted_3$p = { class: "bg-gray-80 -my-05 px-025 pt-065 txt-center" };
 const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
   __name: "FieldArray",
   props: {
@@ -11580,29 +11439,30 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(props2.class)
       }, [
-        vue.createElementVNode("p", _hoisted_1$H, vue.toDisplayString(_ctx.label), 1),
-        _ctx.schema ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$v, [
+        vue.createElementVNode("p", _hoisted_1$I, 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$Q), {
+              vue.createVNode(vue.unref(_sfc_main$S), {
                 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), {
@@ -11614,12 +11474,12 @@ 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$R), {
+          return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$Q), {
             key: i2,
             modelValue: data2.value[i2],
             "onUpdate:modelValue": [($event) => data2.value[i2] = $event, emitValue],
@@ -11630,7 +11490,7 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$G = { class: "primary-checkbox" };
+const _hoisted_1$H = { class: "primary-checkbox" };
 const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
   __name: "Checkbox",
   props: {
@@ -11641,7 +11501,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$G, [
+      return vue.openBlock(), vue.createElementBlock("label", _hoisted_1$H, [
         vue.renderSlot(_ctx.$slots, "label", {}, void 0, true),
         vue.withDirectives(vue.createElementVNode("input", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => val.value = $event),
@@ -11654,8 +11514,8 @@ const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-73f1d9ad"]]);
-const _hoisted_1$F = ["title"];
-const _hoisted_2$u = ["id", "value", "required"];
+const _hoisted_1$G = ["title"];
+const _hoisted_2$v = ["id", "value", "required"];
 const _hoisted_3$o = ["for"];
 const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
   __name: "CheckInput",
@@ -11691,7 +11551,7 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
           required: _ctx.required,
           type: "checkbox",
           class: "me-05"
-        }, null, 8, _hoisted_2$u), [
+        }, null, 8, _hoisted_2$v), [
           [vue.vModelCheckbox, checked.value]
         ]),
         vue.createElementVNode("label", { for: inputId.value }, [
@@ -11699,13 +11559,13 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
             vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
           ], true)
         ], 8, _hoisted_3$o)
-      ], 10, _hoisted_1$F);
+      ], 10, _hoisted_1$G);
     };
   }
 });
 const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-03ed2982"]]);
-const _hoisted_1$E = { class: "mb-05" };
-const _hoisted_2$t = {
+const _hoisted_1$F = { class: "mb-05" };
+const _hoisted_2$u = {
   key: 0,
   class: "label txt-start"
 };
@@ -11798,8 +11658,8 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
       }
     }, { immediate: true });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$t, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$F, [
+        _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", {
             class: "relative block h-100",
@@ -11835,8 +11695,8 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-1fbc9b61"]]);
-const _hoisted_1$D = ["title"];
-const _hoisted_2$s = ["id", "placeholder", "required"];
+const _hoisted_1$E = ["title"];
+const _hoisted_2$t = ["id", "placeholder", "required"];
 const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
   __name: "ColorPicker",
   props: {
@@ -11875,11 +11735,11 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
             placeholder: _ctx.placeholder || _ctx.label,
             class: { "no-edit": !_ctx.editMode },
             required: _ctx.required
-          }, _ctx.nativeInputAttrs), null, 16, _hoisted_2$s), [
+          }, _ctx.nativeInputAttrs), null, 16, _hoisted_2$t), [
             [vue.vModelText, inputVal.value]
           ])
         ])
-      ], 10, _hoisted_1$D)) : vue.createCommentVNode("", true);
+      ], 10, _hoisted_1$E)) : vue.createCommentVNode("", true);
     };
   }
 });
@@ -13625,7 +13485,7 @@ function transpose(fromDate, constructor) {
 const TIMEZONE_UNIT_PRIORITY = 10;
 class Setter {
   constructor() {
-    __publicField(this, "subPriority", 0);
+    __publicField2(this, "subPriority", 0);
   }
   validate(_utcDate, _options) {
     return true;
@@ -13652,8 +13512,8 @@ class ValueSetter extends Setter {
 class DateToSystemTimezoneSetter extends Setter {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", TIMEZONE_UNIT_PRIORITY);
-    __publicField(this, "subPriority", -1);
+    __publicField2(this, "priority", TIMEZONE_UNIT_PRIORITY);
+    __publicField2(this, "subPriority", -1);
   }
   set(date2, flags) {
     if (flags.timestampIsSet) return date2;
@@ -13684,8 +13544,8 @@ class Parser {
 class EraParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 140);
-    __publicField(this, "incompatibleTokens", ["R", "u", "t", "T"]);
+    __publicField2(this, "priority", 140);
+    __publicField2(this, "incompatibleTokens", ["R", "u", "t", "T"]);
   }
   parse(dateString, token, match2) {
     switch (token) {
@@ -13863,8 +13723,8 @@ function isLeapYearIndex(year) {
 class YearParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 130);
-    __publicField(this, "incompatibleTokens", ["Y", "R", "u", "w", "I", "i", "e", "c", "t", "T"]);
+    __publicField2(this, "priority", 130);
+    __publicField2(this, "incompatibleTokens", ["Y", "R", "u", "w", "I", "i", "e", "c", "t", "T"]);
   }
   parse(dateString, token, match2) {
     const valueCallback = (year) => ({
@@ -13908,8 +13768,8 @@ class YearParser extends Parser {
 class LocalWeekYearParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 130);
-    __publicField(this, "incompatibleTokens", [
+    __publicField2(this, "priority", 130);
+    __publicField2(this, "incompatibleTokens", [
       "y",
       "R",
       "u",
@@ -13971,8 +13831,8 @@ class LocalWeekYearParser extends Parser {
 class ISOWeekYearParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 130);
-    __publicField(this, "incompatibleTokens", [
+    __publicField2(this, "priority", 130);
+    __publicField2(this, "incompatibleTokens", [
       "G",
       "y",
       "Y",
@@ -14006,8 +13866,8 @@ class ISOWeekYearParser extends Parser {
 class ExtendedYearParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 130);
-    __publicField(this, "incompatibleTokens", ["G", "y", "Y", "R", "w", "I", "i", "e", "c", "t", "T"]);
+    __publicField2(this, "priority", 130);
+    __publicField2(this, "incompatibleTokens", ["G", "y", "Y", "R", "w", "I", "i", "e", "c", "t", "T"]);
   }
   parse(dateString, token) {
     if (token === "u") {
@@ -14024,8 +13884,8 @@ class ExtendedYearParser extends Parser {
 class QuarterParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 120);
-    __publicField(this, "incompatibleTokens", [
+    __publicField2(this, "priority", 120);
+    __publicField2(this, "incompatibleTokens", [
       "Y",
       "R",
       "q",
@@ -14093,8 +13953,8 @@ class QuarterParser extends Parser {
 class StandAloneQuarterParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 120);
-    __publicField(this, "incompatibleTokens", [
+    __publicField2(this, "priority", 120);
+    __publicField2(this, "incompatibleTokens", [
       "Y",
       "R",
       "Q",
@@ -14162,7 +14022,7 @@ class StandAloneQuarterParser extends Parser {
 class MonthParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "incompatibleTokens", [
+    __publicField2(this, "incompatibleTokens", [
       "Y",
       "R",
       "q",
@@ -14177,7 +14037,7 @@ class MonthParser extends Parser {
       "t",
       "T"
     ]);
-    __publicField(this, "priority", 110);
+    __publicField2(this, "priority", 110);
   }
   parse(dateString, token, match2) {
     const valueCallback = (value) => value - 1;
@@ -14232,8 +14092,8 @@ class MonthParser extends Parser {
 class StandAloneMonthParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 110);
-    __publicField(this, "incompatibleTokens", [
+    __publicField2(this, "priority", 110);
+    __publicField2(this, "incompatibleTokens", [
       "Y",
       "R",
       "q",
@@ -14308,8 +14168,8 @@ function setWeek(date2, week, options) {
 class LocalWeekParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 100);
-    __publicField(this, "incompatibleTokens", [
+    __publicField2(this, "priority", 100);
+    __publicField2(this, "incompatibleTokens", [
       "y",
       "R",
       "u",
@@ -14351,8 +14211,8 @@ function setISOWeek(date2, week) {
 class ISOWeekParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 100);
-    __publicField(this, "incompatibleTokens", [
+    __publicField2(this, "priority", 100);
+    __publicField2(this, "incompatibleTokens", [
       "y",
       "Y",
       "u",
@@ -14404,9 +14264,9 @@ const DAYS_IN_MONTH_LEAP_YEAR = [
 class DateParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 90);
-    __publicField(this, "subPriority", 1);
-    __publicField(this, "incompatibleTokens", [
+    __publicField2(this, "priority", 90);
+    __publicField2(this, "subPriority", 1);
+    __publicField2(this, "incompatibleTokens", [
       "Y",
       "R",
       "q",
@@ -14450,9 +14310,9 @@ class DateParser extends Parser {
 class DayOfYearParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 90);
-    __publicField(this, "subpriority", 1);
-    __publicField(this, "incompatibleTokens", [
+    __publicField2(this, "priority", 90);
+    __publicField2(this, "subpriority", 1);
+    __publicField2(this, "incompatibleTokens", [
       "Y",
       "R",
       "q",
@@ -14511,8 +14371,8 @@ function setDay(date2, day, options) {
 class DayParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 90);
-    __publicField(this, "incompatibleTokens", ["D", "i", "e", "c", "t", "T"]);
+    __publicField2(this, "priority", 90);
+    __publicField2(this, "incompatibleTokens", ["D", "i", "e", "c", "t", "T"]);
   }
   parse(dateString, token, match2) {
     switch (token) {
@@ -14554,8 +14414,8 @@ class DayParser extends Parser {
 class LocalDayParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 90);
-    __publicField(this, "incompatibleTokens", [
+    __publicField2(this, "priority", 90);
+    __publicField2(this, "incompatibleTokens", [
       "y",
       "R",
       "u",
@@ -14627,8 +14487,8 @@ class LocalDayParser extends Parser {
 class StandAloneLocalDayParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 90);
-    __publicField(this, "incompatibleTokens", [
+    __publicField2(this, "priority", 90);
+    __publicField2(this, "incompatibleTokens", [
       "y",
       "R",
       "u",
@@ -14706,8 +14566,8 @@ function setISODay(date2, day) {
 class ISODayParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 90);
-    __publicField(this, "incompatibleTokens", [
+    __publicField2(this, "priority", 90);
+    __publicField2(this, "incompatibleTokens", [
       "y",
       "Y",
       "u",
@@ -14809,8 +14669,8 @@ class ISODayParser extends Parser {
 class AMPMParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 80);
-    __publicField(this, "incompatibleTokens", ["b", "B", "H", "k", "t", "T"]);
+    __publicField2(this, "priority", 80);
+    __publicField2(this, "incompatibleTokens", ["b", "B", "H", "k", "t", "T"]);
   }
   parse(dateString, token, match2) {
     switch (token) {
@@ -14851,8 +14711,8 @@ class AMPMParser extends Parser {
 class AMPMMidnightParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 80);
-    __publicField(this, "incompatibleTokens", ["a", "B", "H", "k", "t", "T"]);
+    __publicField2(this, "priority", 80);
+    __publicField2(this, "incompatibleTokens", ["a", "B", "H", "k", "t", "T"]);
   }
   parse(dateString, token, match2) {
     switch (token) {
@@ -14893,8 +14753,8 @@ class AMPMMidnightParser extends Parser {
 class DayPeriodParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 80);
-    __publicField(this, "incompatibleTokens", ["a", "b", "t", "T"]);
+    __publicField2(this, "priority", 80);
+    __publicField2(this, "incompatibleTokens", ["a", "b", "t", "T"]);
   }
   parse(dateString, token, match2) {
     switch (token) {
@@ -14935,8 +14795,8 @@ class DayPeriodParser extends Parser {
 class Hour1to12Parser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 70);
-    __publicField(this, "incompatibleTokens", ["H", "K", "k", "t", "T"]);
+    __publicField2(this, "priority", 70);
+    __publicField2(this, "incompatibleTokens", ["H", "K", "k", "t", "T"]);
   }
   parse(dateString, token, match2) {
     switch (token) {
@@ -14966,8 +14826,8 @@ class Hour1to12Parser extends Parser {
 class Hour0to23Parser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 70);
-    __publicField(this, "incompatibleTokens", ["a", "b", "h", "K", "k", "t", "T"]);
+    __publicField2(this, "priority", 70);
+    __publicField2(this, "incompatibleTokens", ["a", "b", "h", "K", "k", "t", "T"]);
   }
   parse(dateString, token, match2) {
     switch (token) {
@@ -14990,8 +14850,8 @@ class Hour0to23Parser extends Parser {
 class Hour0To11Parser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 70);
-    __publicField(this, "incompatibleTokens", ["h", "H", "k", "t", "T"]);
+    __publicField2(this, "priority", 70);
+    __publicField2(this, "incompatibleTokens", ["h", "H", "k", "t", "T"]);
   }
   parse(dateString, token, match2) {
     switch (token) {
@@ -15019,8 +14879,8 @@ class Hour0To11Parser extends Parser {
 class Hour1To24Parser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 70);
-    __publicField(this, "incompatibleTokens", ["a", "b", "h", "H", "K", "t", "T"]);
+    __publicField2(this, "priority", 70);
+    __publicField2(this, "incompatibleTokens", ["a", "b", "h", "H", "K", "t", "T"]);
   }
   parse(dateString, token, match2) {
     switch (token) {
@@ -15044,8 +14904,8 @@ class Hour1To24Parser extends Parser {
 class MinuteParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 60);
-    __publicField(this, "incompatibleTokens", ["t", "T"]);
+    __publicField2(this, "priority", 60);
+    __publicField2(this, "incompatibleTokens", ["t", "T"]);
   }
   parse(dateString, token, match2) {
     switch (token) {
@@ -15068,8 +14928,8 @@ class MinuteParser extends Parser {
 class SecondParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 50);
-    __publicField(this, "incompatibleTokens", ["t", "T"]);
+    __publicField2(this, "priority", 50);
+    __publicField2(this, "incompatibleTokens", ["t", "T"]);
   }
   parse(dateString, token, match2) {
     switch (token) {
@@ -15092,8 +14952,8 @@ class SecondParser extends Parser {
 class FractionOfSecondParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 30);
-    __publicField(this, "incompatibleTokens", ["t", "T"]);
+    __publicField2(this, "priority", 30);
+    __publicField2(this, "incompatibleTokens", ["t", "T"]);
   }
   parse(dateString, token) {
     const valueCallback = (value) => Math.trunc(value * Math.pow(10, -token.length + 3));
@@ -15107,8 +14967,8 @@ class FractionOfSecondParser extends Parser {
 class ISOTimezoneWithZParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 10);
-    __publicField(this, "incompatibleTokens", ["t", "T", "x"]);
+    __publicField2(this, "priority", 10);
+    __publicField2(this, "incompatibleTokens", ["t", "T", "x"]);
   }
   parse(dateString, token) {
     switch (token) {
@@ -15145,8 +15005,8 @@ class ISOTimezoneWithZParser extends Parser {
 class ISOTimezoneParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 10);
-    __publicField(this, "incompatibleTokens", ["t", "T", "X"]);
+    __publicField2(this, "priority", 10);
+    __publicField2(this, "incompatibleTokens", ["t", "T", "X"]);
   }
   parse(dateString, token) {
     switch (token) {
@@ -15183,8 +15043,8 @@ class ISOTimezoneParser extends Parser {
 class TimestampSecondsParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 40);
-    __publicField(this, "incompatibleTokens", "*");
+    __publicField2(this, "priority", 40);
+    __publicField2(this, "incompatibleTokens", "*");
   }
   parse(dateString) {
     return parseAnyDigitsSigned(dateString);
@@ -15196,8 +15056,8 @@ class TimestampSecondsParser extends Parser {
 class TimestampMillisecondsParser extends Parser {
   constructor() {
     super(...arguments);
-    __publicField(this, "priority", 20);
-    __publicField(this, "incompatibleTokens", "*");
+    __publicField2(this, "priority", 20);
+    __publicField2(this, "incompatibleTokens", "*");
   }
   parse(dateString) {
     return parseAnyDigitsSigned(dateString);
@@ -20437,8 +20297,8 @@ const eo = ({
 Object.entries(go).forEach(([e, t]) => {
   e !== "default" && (Hn[e] = t);
 });
-const _hoisted_1$C = ["title"];
-const _hoisted_2$r = { key: 0 };
+const _hoisted_1$D = ["title"];
+const _hoisted_2$s = { key: 0 };
 const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
   __name: "DateInput",
   props: {
@@ -20481,7 +20341,7 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.label
       }, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$r, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$s, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
         vue.createVNode(vue.unref(Hn), vue.mergeProps({
           ref_key: "datePicker",
           ref: datePicker,
@@ -20497,12 +20357,12 @@ 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$C);
+      ], 10, _hoisted_1$D);
     };
   }
 });
-const _hoisted_1$B = ["title"];
-const _hoisted_2$q = { key: 0 };
+const _hoisted_1$C = ["title"];
+const _hoisted_2$r = { key: 0 };
 const _hoisted_3$m = {
   key: 0,
   class: "required"
@@ -20519,17 +20379,17 @@ const _hoisted_11$3 = {
   class: "calendar-grid grid gap-025"
 };
 const _hoisted_12$3 = ["disabled", "onClick"];
-const _hoisted_13$3 = {
+const _hoisted_13$2 = {
   key: 1,
   class: "month-grid grid gap-05 p-05"
 };
 const _hoisted_14$2 = ["disabled", "onClick"];
-const _hoisted_15$1 = {
+const _hoisted_15$2 = {
   key: 2,
   class: "year-grid grid gap-05 p-0"
 };
-const _hoisted_16 = ["disabled", "onClick"];
-const _hoisted_17 = {
+const _hoisted_16$2 = ["disabled", "onClick"];
+const _hoisted_17$2 = {
   key: 0,
   class: "time-picker flex column gap-1 w-120px"
 };
@@ -20708,7 +20568,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.label
       }, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$q, [
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$r, [
           vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
           _ctx.required ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$m, "*")) : vue.createCommentVNode("", true)
         ])) : vue.createCommentVNode("", true),
@@ -20791,7 +20651,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
                       onClick: ($event) => selectDate(date2)
                     }, vue.toDisplayString(date2 == null ? void 0 : date2.getDate()), 11, _hoisted_12$3);
                   }), 128))
-                ])) : vue.unref(currentView) === "months" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$3, [
+                ])) : vue.unref(currentView) === "months" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$2, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(months.value, (month) => {
                     return vue.openBlock(), vue.createElementBlock("button", {
                       key: month.value,
@@ -20803,7 +20663,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
                       onClick: ($event) => selectMonth(month.value)
                     }, vue.toDisplayString(month.name), 11, _hoisted_14$2);
                   }), 128))
-                ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$1, [
+                ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$2, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(years.value, (year) => {
                     return vue.openBlock(), vue.createElementBlock("button", {
                       key: year.value,
@@ -20813,11 +20673,11 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
                       }]),
                       disabled: year.disabled,
                       onClick: ($event) => selectYear(year.value)
-                    }, vue.toDisplayString(year.value), 11, _hoisted_16);
+                    }, vue.toDisplayString(year.value), 11, _hoisted_16$2);
                   }), 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: "",
@@ -20872,13 +20732,13 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
           ]),
           _: 1
         }, 8, ["shown"])
-      ], 10, _hoisted_1$B);
+      ], 10, _hoisted_1$C);
     };
   }
 });
 const DatePick = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-8de3f3c6"]]);
-const _hoisted_1$A = { class: "datetime-wrap" };
-const _hoisted_2$p = { class: "date-wrap" };
+const _hoisted_1$B = { class: "datetime-wrap" };
+const _hoisted_2$q = { class: "date-wrap" };
 const _hoisted_3$l = {
   key: 0,
   class: "time-wrap"
@@ -20913,8 +20773,8 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
       return `${hour}:${minute}`;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
-        vue.createElementVNode("div", _hoisted_2$p, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, [
+        vue.createElementVNode("div", _hoisted_2$q, [
           vue.createVNode(vue.unref(Hn), vue.mergeProps({
             modelValue: selectedDate.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedDate.value = $event),
@@ -20954,8 +20814,8 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$z = { class: "bagel-input" };
-const _hoisted_2$o = {
+const _hoisted_1$A = { class: "bagel-input" };
+const _hoisted_2$p = {
   key: 0,
   placeholder: "required",
   type: "text",
@@ -20963,35 +20823,38 @@ const _hoisted_2$o = {
   class: "pixel"
 };
 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" };
-const _hoisted_5$b = {
+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 txt16" };
+const _hoisted_7$6 = {
   key: 1,
   class: "txt-gray txt-12"
 };
-const _hoisted_6$9 = {
+const _hoisted_8$3 = {
   key: 0,
   class: "bgl-multi-preview"
 };
-const _hoisted_7$6 = { class: "m-0" };
-const _hoisted_8$3 = { class: "no-margin multi-preview-txt" };
-const _hoisted_9$2 = {
+const _hoisted_9$2 = { class: "m-0" };
+const _hoisted_10$2 = { class: "no-margin multi-preview-txt" };
+const _hoisted_11$2 = {
   key: 0,
   class: "progress"
 };
-const _hoisted_10$2 = {
+const _hoisted_12$2 = {
   key: 1,
   class: "bgl-single-preview"
 };
-const _hoisted_11$2 = { class: "position-start m-05 flex opacity-7 z-99 gap-025" };
-const _hoisted_12$2 = {
+const _hoisted_13$1 = { class: "position-start m-05 flex opacity-7 z-99 gap-025" };
+const _hoisted_14$1 = {
   key: 0,
   class: "h-100"
 };
-const _hoisted_13$2 = {
+const _hoisted_15$1 = {
   key: 0,
   class: "progress"
 };
-const _hoisted_14$1 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
+const _hoisted_16$1 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
+const _hoisted_17$1 = { class: "pretty balance" };
 const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
   __name: "FileUpload",
   props: /* @__PURE__ */ vue.mergeModels({
@@ -21008,7 +20871,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: () => []
@@ -21164,10 +21030,10 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       const _directive_tooltip = vue.resolveDirective("tooltip");
       const _directive_lightbox = vue.resolveDirective("lightbox");
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
         vue.createElementVNode("label", null, vue.toDisplayString(_ctx.label), 1),
-        _ctx.required && !storageFiles.value.length ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_2$o)) : vue.createCommentVNode("", true),
-        _ctx.theme === "basic" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$$), {
+        _ctx.required && !storageFiles.value.length ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_2$p)) : vue.createCommentVNode("", true),
+        _ctx.theme === "basic" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$_), {
           key: 1,
           outline: "",
           class: "flex p-05 gap-1",
@@ -21180,13 +21046,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,
@@ -21226,6 +21088,17 @@ 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), {
+                      icon: "draft",
+                      size: 1.5
+                    }),
+                    vue.withDirectives((vue.openBlock(), vue.createElementBlock("p", _hoisted_6$9, [
+                      vue.createTextVNode(vue.toDisplayString(file.name), 1)
+                    ])), [
+                      [_directive_lightbox, { src: file.url, download: true }]
+                    ])
+                  ]),
                   vue.createVNode(vue.unref(Btn), {
                     thin: "",
                     flat: "",
@@ -21236,7 +21109,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                 ])
               ]);
             }), 128)),
-            !storageFiles.value.length && !fileQueue.value.length ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$b, " 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", {
@@ -21256,7 +21129,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
             files: storageFiles.value,
             fileQueue: fileQueue.value
           }, () => [
-            _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$9, [
+            _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$3, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(storageFiles.value, (file) => {
                 return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
                   key: file.id,
@@ -21272,7 +21145,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                     icon: "draft",
                     class: "multi-preview"
                   })),
-                  vue.createElementVNode("p", _hoisted_7$6, vue.toDisplayString(file.name), 1),
+                  vue.createElementVNode("p", _hoisted_9$2, vue.toDisplayString(file.name), 1),
                   vue.createVNode(vue.unref(Btn), {
                     thin: "",
                     flat: "",
@@ -21302,12 +21175,12 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                     icon: "draft",
                     class: "multi-preview"
                   })),
-                  vue.createElementVNode("p", _hoisted_8$3, vue.toDisplayString(fileQ.name), 1),
+                  vue.createElementVNode("p", _hoisted_10$2, vue.toDisplayString(fileQ.name), 1),
                   vue.createElementVNode("div", {
                     class: vue.normalizeClass(["pie", { complete: fileQ.progress === 100 }]),
                     style: vue.normalizeStyle([`--p:${fileQ.progress}`, { "--b": "2px" }])
                   }, [
-                    fileQ.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_9$2, vue.toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : vue.createCommentVNode("", true),
+                    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), {
                       class: "success",
                       icon: "check"
@@ -21316,13 +21189,13 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                 ]);
               }), 128))
             ])) : vue.createCommentVNode("", true),
-            !_ctx.multiple && (storageFiles.value.length > 0 || fileQueue.value.length > 0) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$2, [
+            !_ctx.multiple && (storageFiles.value.length > 0 || fileQueue.value.length > 0) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$2, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(storageFiles.value, (file) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
                   key: file.id,
                   class: vue.normalizeClass(["single-image-item-preview", { "bgl_fill-image": _ctx.fill }])
                 }, [
-                  vue.createElementVNode("div", _hoisted_11$2, [
+                  vue.createElementVNode("div", _hoisted_13$1, [
                     vue.withDirectives(vue.createVNode(vue.unref(Btn), {
                       color: "gray",
                       thin: "",
@@ -21352,7 +21225,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                       [_directive_tooltip, "Download"]
                     ])
                   ]),
-                  isImage(file.extension || file.url) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$2, [
+                  isImage(file.extension || file.url) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14$1, [
                     vue.withDirectives(vue.createVNode(vue.unref(Image$1), {
                       class: "single-preview",
                       src: file.url,
@@ -21380,7 +21253,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                     class: vue.normalizeClass(["pie", { complete: fileQ.progress === 100 }]),
                     style: vue.normalizeStyle([`--p:${fileQ.progress}`, { "--b": "2px" }])
                   }, [
-                    fileQ.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_13$2, vue.toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : vue.createCommentVNode("", true),
+                    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), {
                       class: "success",
                       icon: "check"
@@ -21404,9 +21277,9 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
             fileQueue: fileQueue.value,
             browse
           }, () => [
-            vue.createElementVNode("p", _hoisted_14$1, [
+            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.createElementVNode("span", _hoisted_17$1, vue.toDisplayString(_ctx.dropPlaceholder || "Drag and Drop files here or click to upload"), 1)
             ])
           ], true) : vue.createCommentVNode("", true)
         ], 38))
@@ -21414,9 +21287,9 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-d4fb78ee"]]);
-const _hoisted_1$y = ["title"];
-const _hoisted_2$n = { key: 0 };
+const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-9939a5fb"]]);
+const _hoisted_1$z = ["title"];
+const _hoisted_2$o = { key: 0 };
 const _hoisted_3$j = ["value", "placeholder"];
 const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
   __name: "JSONInput",
@@ -21441,7 +21314,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$n, [
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$o, [
           vue.createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : vue.createCommentVNode("", true),
         vue.createElementVNode("textarea", {
@@ -21450,13 +21323,13 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
           placeholder: _ctx.placeholder,
           onInput: handleInput
         }, null, 42, _hoisted_3$j)
-      ], 10, _hoisted_1$y);
+      ], 10, _hoisted_1$z);
     };
   }
 });
 const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-1cbaeab2"]]);
-const _hoisted_1$x = ["for"];
-const _hoisted_2$m = ["id", "placeholder", "disabled", "required", "readonly", "onKeydown"];
+const _hoisted_1$y = ["for"];
+const _hoisted_2$n = ["id", "placeholder", "disabled", "required", "readonly", "onKeydown"];
 const _hoisted_3$i = { key: 1 };
 const _hoisted_4$b = {
   key: 5,
@@ -21485,18 +21358,18 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const emit2 = __emit;
-    let numberValue = vue.ref(Number.parseFloat(`${__props.modelValue}`) || 0);
+    let numberValue = vue.ref(Number.parseFloat(`${__props.modelValue}`) || void 0);
     const btnLayouts = ["horizontal", "vertical"];
-    const canAdd = vue.computed(() => !(__props.max !== void 0 && numberValue.value + __props.step > __props.max));
-    const canDecrement = vue.computed(() => !(__props.min !== void 0 && numberValue.value - __props.step < __props.min));
+    const canAdd = vue.computed(() => !(__props.max !== void 0 && (numberValue.value || 0 + __props.step) > __props.max));
+    const canDecrement = vue.computed(() => !(__props.min !== void 0 && (numberValue.value || 0 - __props.step) < __props.min));
     function increment() {
       if (!canAdd.value) return;
-      numberValue.value += __props.step;
+      numberValue.value = (numberValue.value || 0) + __props.step;
       emit2("update:modelValue", numberValue.value);
     }
     function decrement() {
       if (!canDecrement.value) return;
-      numberValue.value -= __props.step;
+      numberValue.value = (numberValue.value || 0) - __props.step;
       emit2("update:modelValue", numberValue.value);
     }
     function formatNumber2(num) {
@@ -21515,7 +21388,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
       emit2("update:modelValue", numberValue.value);
     }
     vue.watch(() => numberValue.value, () => {
-      formattedValue.value = formatNumber2(numberValue.value);
+      formattedValue.value = numberValue.value !== void 0 ? formatNumber2(numberValue.value) : "";
     }, { immediate: true });
     vue.watch(() => __props.modelValue, (newVal) => {
       if (newVal !== numberValue.value) {
@@ -21531,7 +21404,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" }])
           }, [
@@ -21565,7 +21438,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
                 vue.withKeys(vue.withModifiers(increment, ["prevent"]), ["up"]),
                 vue.withKeys(vue.withModifiers(decrement, ["prevent"]), ["down"])
               ]
-            }, null, 42, _hoisted_2$m), [
+            }, null, 42, _hoisted_2$n), [
               [
                 vue.vModelText,
                 vue.unref(formattedValue),
@@ -21618,13 +21491,13 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
               }, null, 8, ["disabled"])
             ])) : vue.createCommentVNode("", true)
           ], 2)
-        ], 8, _hoisted_1$x)
+        ], 8, _hoisted_1$y)
       ], 2);
     };
   }
 });
-const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-7a435cc2"]]);
-const _hoisted_1$w = ["value", "autofocus", "onKeydown", "onPaste"];
+const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-8ae5f930"]]);
+const _hoisted_1$x = ["value", "autofocus", "onKeydown", "onPaste"];
 const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   __name: "OTP",
   props: {
@@ -21723,15 +21596,15 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
             oninput: "this.value = this.value.slice(0, 1);",
             onKeydown: ($event) => handleKeyDown($event, ind),
             onPaste: ($event) => handlePaste($event, ind)
-          }, null, 40, _hoisted_1$w);
+          }, null, 40, _hoisted_1$x);
         }), 128))
       ], 512);
     };
   }
 });
 const OTP = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-5c22c199"]]);
-const _hoisted_1$v = { class: "relative" };
-const _hoisted_2$l = { class: "m-password position-bottom-end flex column justify-content-center" };
+const _hoisted_1$w = { class: "relative" };
+const _hoisted_2$m = { class: "m-password position-bottom-end flex column justify-content-center" };
 const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
   __name: "PasswordInput",
   props: /* @__PURE__ */ vue.mergeModels({
@@ -21773,7 +21646,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     );
     const inputType = vue.computed(() => showPwd.value ? "text" : "password");
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
         vue.createVNode(vue.unref(TextInput), vue.mergeProps({
           modelValue: password.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => password.value = $event)
@@ -21781,7 +21654,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
           type: inputType.value,
           class: "mb-0"
         }), null, 16, ["modelValue", "type"]),
-        vue.createElementVNode("div", _hoisted_2$l, [
+        vue.createElementVNode("div", _hoisted_2$m, [
           vue.createVNode(vue.unref(Btn), {
             flat: "",
             thin: "",
@@ -21794,8 +21667,8 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$u = ["for"];
-const _hoisted_2$k = ["id", "name", "value", "required"];
+const _hoisted_1$v = ["for"];
+const _hoisted_2$l = ["id", "name", "value", "required"];
 const _hoisted_3$h = { class: "flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025" };
 const _hoisted_4$a = ["src", "alt"];
 const _hoisted_5$a = { class: "" };
@@ -21837,7 +21710,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
               name: _ctx.groupName,
               value: opt.value,
               required: _ctx.required
-            }, null, 8, _hoisted_2$k), [
+            }, null, 8, _hoisted_2$l), [
               [vue.vModelRadio, selectedOption.value]
             ]),
             vue.createElementVNode("div", _hoisted_3$h, [
@@ -21862,15 +21735,15 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
               icon: "delete",
               onClick: ($event) => _ctx.$emit("delete", opt)
             }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
-          ], 8, _hoisted_1$u);
+          ], 8, _hoisted_1$v);
         }), 128))
       ]);
     };
   }
 });
 const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-3c77be46"]]);
-const _hoisted_1$t = { class: "bagel-input" };
-const _hoisted_2$j = { class: "pb-025" };
+const _hoisted_1$u = { class: "bagel-input" };
+const _hoisted_2$k = { class: "pb-025" };
 const _hoisted_3$g = { class: "flex gap-05 flex-wrap" };
 const _hoisted_4$9 = ["id", "name", "value", "checked"];
 const _hoisted_5$9 = ["for"];
@@ -21915,8 +21788,8 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
       selectedValue.value = props2.modelValue;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
-        vue.createElementVNode("label", _hoisted_2$j, vue.toDisplayString(_ctx.label), 1),
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
+        vue.createElementVNode("label", _hoisted_2$k, vue.toDisplayString(_ctx.label), 1),
         vue.createElementVNode("div", _hoisted_3$g, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (option2, index2) => {
             return vue.openBlock(), vue.createElementBlock("div", {
@@ -21942,8 +21815,8 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-cf892d71"]]);
-const _hoisted_1$s = ["dir"];
-const _hoisted_2$i = {
+const _hoisted_1$t = ["dir"];
+const _hoisted_2$j = {
   key: 0,
   class: "label"
 };
@@ -22020,7 +21893,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", {
         dir: vue.unref(rtl) ? "rtl" : "ltr"
       }, [
-        vue.unref(label) ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$i, vue.toDisplayString(vue.unref(label)), 1)) : vue.createCommentVNode("", true),
+        vue.unref(label) ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$j, vue.toDisplayString(vue.unref(label)), 1)) : vue.createCommentVNode("", true),
         vue.createElementVNode("div", _hoisted_3$f, [
           vue.createElementVNode("input", {
             id: vue.unref(id),
@@ -22112,7 +21985,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
             vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(formatValue)(vue.unref(max2))), 1)
           ], true)
         ])
-      ], 8, _hoisted_1$s);
+      ], 8, _hoisted_1$t);
     };
   }
 });
@@ -22206,8 +22079,8 @@ const toolbarOptions = [
   { name: "separator" },
   { name: "fullScreen", label: "Full Screen", icon: "fullscreen", class: "ms-auto" }
 ];
-const _hoisted_1$r = { class: "grid grid-wrap p-05" };
-const _hoisted_2$h = ["onMousemove", "onClick"];
+const _hoisted_1$s = { class: "grid grid-wrap p-05" };
+const _hoisted_2$i = ["onMousemove", "onClick"];
 const _hoisted_3$e = { class: "txt-center txt-12 color-gray" };
 const fb = 1;
 const base = 5;
@@ -22227,7 +22100,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
       return hoveredCol.value > base - 1 ? enlarge : base;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(rowSize.value, (row) => {
           return vue.openBlock(), vue.createElementBlock("div", {
             key: `row-${row}`,
@@ -22254,7 +22127,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
                   hoveredCol.value = col;
                 },
                 onClick: ($event) => emit2("select", `${row}x${col}`)
-              }, null, 42, _hoisted_2$h);
+              }, null, 42, _hoisted_2$i);
             }), 128))
           ], 32);
         }), 128)),
@@ -22264,7 +22137,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const GridBox = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-4548b70f"]]);
-const _hoisted_1$q = {
+const _hoisted_1$r = {
   class: "toolbar flex gap-025 pb-05 flex-wrap",
   role: "toolbar"
 };
@@ -22283,10 +22156,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$q, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.config.map(configToOption).filter(Boolean), (action, index2) => {
           return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index2 }, [
-            action.name === "insertTable" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$W), {
+            action.name === "insertTable" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$V), {
               key: 0,
               placement: "bottom-start",
               thin: "",
@@ -23246,8 +23119,8 @@ function useEditorKeyboard(doc, handleToolbarAction) {
     }
   });
 }
-const _hoisted_1$p = { class: "bagel-input" };
-const _hoisted_2$g = { class: "content-area radius-05" };
+const _hoisted_1$q = { class: "bagel-input" };
+const _hoisted_2$h = { class: "content-area radius-05" };
 const _hoisted_3$d = {
   key: 1,
   class: "flex"
@@ -23329,10 +23202,10 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     });
     return (_ctx, _cache) => {
       var _a2, _b;
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
         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,
@@ -23343,7 +23216,7 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["editor-container", { "split-view": vue.unref(editor).state.isSplitView }])
           }, [
-            vue.createElementVNode("div", _hoisted_2$g, [
+            vue.createElementVNode("div", _hoisted_2$h, [
               vue.createElementVNode("iframe", {
                 id: "rich-text-iframe",
                 ref_key: "iframe",
@@ -23407,9 +23280,9 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-59d7c73f"]]);
-const _hoisted_1$o = { class: "flex gap-05" };
-const _hoisted_2$f = ["disabled"];
+const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-08117333"]]);
+const _hoisted_1$p = { class: "flex gap-05" };
+const _hoisted_2$g = ["disabled"];
 const _hoisted_3$c = { key: 1 };
 const _hoisted_4$7 = {
   key: 2,
@@ -23594,7 +23467,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$W), {
+      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$V), {
         ref_key: "dropdown",
         ref: dropdown,
         shown: vue.unref(open),
@@ -23606,7 +23479,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
         trigger: vue.withCtx(() => [
           vue.createElementVNode("label", null, [
             vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
-            vue.createElementVNode("div", _hoisted_1$o, [
+            vue.createElementVNode("div", _hoisted_1$p, [
               _ctx.searchable && vue.unref(open) ? (vue.openBlock(), vue.createBlock(vue.unref(TextInput), {
                 key: 0,
                 ref_key: "searchInput",
@@ -23654,7 +23527,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
                   key: 3,
                   thin: ""
                 }, { icon: vue.unref(open) ? "unfold_less" : "unfold_more" }), null, 16)) : vue.createCommentVNode("", true)
-              ], 42, _hoisted_2$f)),
+              ], 42, _hoisted_2$g)),
               _ctx.required ? (vue.openBlock(), vue.createElementBlock("input", {
                 key: 2,
                 tabindex: "-1",
@@ -23673,7 +23546,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
             height: "25px",
             class: "mx-1 my-1"
           })) : vue.createCommentVNode("", true),
-          vue.createVNode(vue.unref(_sfc_main$$), {
+          vue.createVNode(vue.unref(_sfc_main$_), {
             class: "p-05",
             style: vue.normalizeStyle({ width: _ctx.fullWidth ? "100%" : "auto" })
           }, {
@@ -24321,8 +24194,8 @@ class SignaturePad extends SignatureEventTarget {
     return svg.outerHTML;
   }
 }
-const _hoisted_1$n = ["disabled"];
-const _hoisted_2$e = {
+const _hoisted_1$o = ["disabled"];
+const _hoisted_2$f = {
   key: 1,
   placeholder: "required",
   type: "text",
@@ -24482,8 +24355,8 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
           ref: vCanvas,
           class: "canvas",
           disabled: _ctx.disabled
-        }, null, 8, _hoisted_1$n),
-        _ctx.required && vue.unref(_isEmpty) ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_2$e)) : vue.createCommentVNode("", true)
+        }, null, 8, _hoisted_1$o),
+        _ctx.required && vue.unref(_isEmpty) ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_2$f)) : vue.createCommentVNode("", true)
       ], 34);
     };
   }
@@ -26967,8 +26840,8 @@ const VueDraggableNext = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$m = ["title"];
-const _hoisted_2$d = { class: "bagel-input" };
+const _hoisted_1$n = ["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" };
@@ -27038,7 +26911,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
         class: "table-field-wrap",
         title: _ctx.description
       }, [
-        vue.createElementVNode("div", _hoisted_2$d, [
+        vue.createElementVNode("div", _hoisted_2$e, [
           vue.createElementVNode("label", null, vue.toDisplayString((_a2 = vue.unref(fieldMeta)) == null ? void 0 : _a2.label), 1)
         ]),
         vue.createElementVNode("div", _hoisted_3$b, [
@@ -27113,7 +26986,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
           ])),
           _: 1
         })
-      ], 8, _hoisted_1$m);
+      ], 8, _hoisted_1$n);
     };
   }
 });
@@ -31564,8 +31437,8 @@ function parsePhoneNumber$1() {
 function parsePhoneNumber() {
   return withMetadataArgument(parsePhoneNumber$1, arguments);
 }
-const _hoisted_1$l = ["aria-expanded"];
-const _hoisted_2$c = { class: "p-075 tel-countryp-dropdown" };
+const _hoisted_1$m = ["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 };
@@ -31832,7 +31705,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
               vue.withKeys(reset, ["tab"])
             ]
           }, [
-            !computedDropDownOptions.value.hide ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$W), {
+            !computedDropDownOptions.value.hide ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$V), {
               key: 0,
               ref_key: "phoneDropdown",
               ref: phoneDropdown,
@@ -31855,7 +31728,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
                 ])
               ]),
               default: vue.withCtx(() => [
-                vue.createElementVNode("div", _hoisted_2$c, [
+                vue.createElementVNode("div", _hoisted_2$d, [
                   _ctx.searchable ? (vue.openBlock(), vue.createBlock(vue.unref(TextInput), {
                     key: 0,
                     modelValue: searchQuery.value,
@@ -31919,15 +31792,15 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
             }, null, 44, _hoisted_6$4), [
               [vue.vModelText, phone.value]
             ])
-          ], 40, _hoisted_1$l)
+          ], 40, _hoisted_1$m)
         ])
       ], 2);
     };
   }
 });
 const TelInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-492fcc54"]]);
-const _hoisted_1$k = ["title"];
-const _hoisted_2$b = ["for"];
+const _hoisted_1$l = ["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 };
@@ -32066,14 +31939,14 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
             key: 4,
             icon: _ctx.icon
           }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
-        ], 8, _hoisted_2$b)
-      ], 10, _hoisted_1$k);
+        ], 8, _hoisted_2$c)
+      ], 10, _hoisted_1$l);
     };
   }
 });
 const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-cc17f96e"]]);
-const _hoisted_1$j = ["title"];
-const _hoisted_2$a = ["id", "required"];
+const _hoisted_1$k = ["title"];
+const _hoisted_2$b = ["id", "required"];
 const _hoisted_3$8 = ["for"];
 const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
   __name: "ToggleInput",
@@ -32111,7 +31984,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => checked.value = $event),
           type: "checkbox",
           required: _ctx.required
-        }, null, 8, _hoisted_2$a), [
+        }, null, 8, _hoisted_2$b), [
           [vue.vModelCheckbox, checked.value]
         ]),
         vue.createElementVNode("label", { for: inputId.value }, [
@@ -32119,7 +31992,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
             vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
           ], true)
         ], 8, _hoisted_3$8)
-      ], 10, _hoisted_1$j);
+      ], 10, _hoisted_1$k);
     };
   }
 });
@@ -32149,8 +32022,8 @@ const files = {
     });
   }
 };
-const _hoisted_1$i = { class: "bagel-input" };
-const _hoisted_2$9 = { key: 0 };
+const _hoisted_1$j = { class: "bagel-input" };
+const _hoisted_2$a = { key: 0 };
 const _hoisted_3$7 = {
   key: 1,
   placeholder: "required",
@@ -32159,35 +32032,37 @@ const _hoisted_3$7 = {
   class: "pixel"
 };
 const _hoisted_4$3 = { class: "m-05 flex opacity-7 z-99" };
-const _hoisted_5$3 = { class: "ellipsis-1 word-break-all h-20 m-0" };
-const _hoisted_6$3 = {
+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 txt16" };
+const _hoisted_7$2 = {
   key: 1,
   class: "txt-gray txt-12"
 };
-const _hoisted_7$2 = {
+const _hoisted_8$2 = {
   key: 0,
   class: "bgl-multi-preview"
 };
-const _hoisted_8$2 = { class: "m-0" };
-const _hoisted_9$1 = { class: "no-margin multi-preview-txt" };
-const _hoisted_10$1 = {
+const _hoisted_9$1 = { class: "m-0" };
+const _hoisted_10$1 = { class: "no-margin multi-preview-txt" };
+const _hoisted_11$1 = {
   key: 0,
   class: "progress"
 };
-const _hoisted_11$1 = {
+const _hoisted_12$1 = {
   key: 1,
   class: "bgl-single-preview"
 };
-const _hoisted_12$1 = { class: "position-start m-05 flex opacity-7 z-99 gap-025" };
-const _hoisted_13$1 = {
+const _hoisted_13 = { class: "position-start m-05 flex opacity-7 z-99 gap-025" };
+const _hoisted_14 = {
   key: 0,
   class: "h-100"
 };
-const _hoisted_14 = {
+const _hoisted_15 = {
   key: 0,
   class: "progress"
 };
-const _hoisted_15 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
+const _hoisted_16 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
+const _hoisted_17 = { class: "pretty balance" };
 const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
   __name: "UploadInput",
   props: {
@@ -32203,7 +32078,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 }) {
@@ -32296,10 +32174,10 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       const _directive_tooltip = vue.resolveDirective("tooltip");
       const _directive_lightbox = vue.resolveDirective("lightbox");
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$9, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$a, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
         _ctx.required && !pathKeys.value.length ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_3$7)) : vue.createCommentVNode("", true),
-        _ctx.theme === "basic" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$$), {
+        _ctx.theme === "basic" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$_), {
           key: 2,
           outline: "",
           class: "flex p-05 gap-1",
@@ -32312,13 +32190,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,
@@ -32348,15 +32222,21 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
                     href: pathToUrl(path_key),
                     download: path_key.split("/").pop()
                   }, null, 8, ["href", "download"]),
-                  vue.withDirectives((vue.openBlock(), vue.createElementBlock("p", _hoisted_5$3, [
-                    vue.createTextVNode(vue.toDisplayString(path_key.split("/").pop()), 1)
-                  ])), [
-                    [_directive_lightbox, { src: pathToUrl(path_key), download: true }]
+                  vue.createElementVNode("div", _hoisted_5$3, [
+                    vue.createVNode(vue.unref(_sfc_main$p), {
+                      icon: "draft",
+                      size: 1.5
+                    }),
+                    vue.withDirectives((vue.openBlock(), vue.createElementBlock("p", _hoisted_6$3, [
+                      vue.createTextVNode(vue.toDisplayString(path_key.split("/").pop()), 1)
+                    ])), [
+                      [_directive_lightbox, { src: pathToUrl(path_key), download: true }]
+                    ])
                   ])
                 ])
               ]);
             }), 128)),
-            !pathKeys.value.length && !fileQueue.value.length ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$3, " 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", {
@@ -32376,7 +32256,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
             files: pathKeys.value,
             fileQueue: fileQueue.value
           }, () => [
-            _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$2, [
+            _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$2, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(pathKeys.value, (path_key) => {
                 return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
                   key: path_key,
@@ -32391,7 +32271,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
                     icon: "description",
                     class: "multi-preview"
                   })),
-                  vue.createElementVNode("p", _hoisted_8$2, vue.toDisplayString(path_key.split("/").pop()), 1),
+                  vue.createElementVNode("p", _hoisted_9$1, vue.toDisplayString(path_key.split("/").pop()), 1),
                   vue.createVNode(vue.unref(Btn), {
                     thin: "",
                     flat: "",
@@ -32418,12 +32298,12 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
                     icon: "description",
                     class: "multi-preview"
                   })),
-                  vue.createElementVNode("p", _hoisted_9$1, vue.toDisplayString(file.name), 1),
+                  vue.createElementVNode("p", _hoisted_10$1, vue.toDisplayString(file.name), 1),
                   vue.createElementVNode("div", {
                     class: vue.normalizeClass(["pie", { complete: file.progress === 100 }]),
                     style: vue.normalizeStyle([{ "--p": file.progress }, { "--b": "2px" }])
                   }, [
-                    file.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_10$1, vue.toDisplayString(file.progress.toFixed(0)), 1)) : vue.createCommentVNode("", true),
+                    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), {
                       class: "success",
                       icon: "check_circle"
@@ -32431,13 +32311,13 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
                   ], 6)
                 ], 2);
               }), 128))
-            ])) : pathKeys.value.length > 0 || fileQueue.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$1, [
+            ])) : pathKeys.value.length > 0 || fileQueue.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$1, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(pathKeys.value, (path_key) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
                   key: path_key,
                   class: vue.normalizeClass(["single-image-item-preview", { "bgl_fill-image": _ctx.fill }])
                 }, [
-                  vue.createElementVNode("div", _hoisted_12$1, [
+                  vue.createElementVNode("div", _hoisted_13, [
                     vue.withDirectives(vue.createVNode(vue.unref(Btn), {
                       color: "gray",
                       thin: "",
@@ -32464,7 +32344,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
                       [_directive_tooltip, "Download"]
                     ])
                   ]),
-                  isImage(path_key) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$1, [
+                  isImage(path_key) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14, [
                     vue.withDirectives(vue.createVNode(vue.unref(Image$1), {
                       class: "single-preview",
                       pathKey: path_key,
@@ -32492,7 +32372,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
                     class: vue.normalizeClass(["pie", { complete: file.progress === 100 }]),
                     style: vue.normalizeStyle([{ "--p": file.progress }, { "--b": "2px" }])
                   }, [
-                    file.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_14, vue.toDisplayString(file.progress.toFixed(0)), 1)) : vue.createCommentVNode("", true),
+                    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), {
                       class: "success",
                       icon: "check_circle"
@@ -32516,9 +32396,9 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
             fileQueue: fileQueue.value,
             browse
           }, () => [
-            vue.createElementVNode("p", _hoisted_15, [
+            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.createElementVNode("span", _hoisted_17, vue.toDisplayString(_ctx.dropPlaceholder || "Drag and Drop files here or click to upload"), 1)
             ])
           ], true) : vue.createCommentVNode("", true)
         ], 38))
@@ -32526,7 +32406,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const UploadInput = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-0d93d910"]]);
+const UploadInput = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-d65d0a87"]]);
 const FONT_AWESOME_ICONS = [
   "trash-can",
   "message",
@@ -36977,13 +36857,13 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
         style: vue.normalizeStyle({ "fontSize": `${_ctx.size}rem`, color: _ctx.color, "font-variation-settings": `'wght' ${_ctx.weight || 400}` })
       }, vue.toDisplayString(iconRender.value), 5)) : iconRenderType.value === "font-awesome" ? (vue.openBlock(), vue.createElementBlock("i", {
         key: 1,
-        class: vue.normalizeClass(["fa", [`fa-${iconRender.value}`, { "fa-brands": isFaBrand.value }]]),
+        class: vue.normalizeClass(["fa far", [`fa-${iconRender.value}`, { "fa-brands": isFaBrand.value }]]),
         style: vue.normalizeStyle({ "fontSize": `${_ctx.size}rem`, color: _ctx.color, "font-variation-settings": `'wght' ${_ctx.weight || 400}` })
       }, null, 6)) : vue.createCommentVNode("", true);
     };
   }
 });
-const _hoisted_1$h = ["src", "title", "width", "height", "marginwidth", "marginheight", "csp", "scrolling", "srcset"];
+const _hoisted_1$i = ["src", "title", "width", "height", "marginwidth", "marginheight", "csp", "scrolling", "srcset"];
 const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   __name: "IframeVue",
   props: {
@@ -37043,12 +36923,12 @@ 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$h);
+      }, null, 40, _hoisted_1$i);
     };
   }
 });
-const _hoisted_1$g = { key: 0 };
-const _hoisted_2$8 = ["src", "alt", "width", "height"];
+const _hoisted_1$h = { 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({
   __name: "Image",
@@ -37132,7 +37012,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$g, [
+      return _ctx.caption ? (vue.openBlock(), vue.createElementBlock("figcaption", _hoisted_1$h, [
         vue.unref(imageSrc) ? (vue.openBlock(), vue.createElementBlock("img", vue.mergeProps({
           key: 0,
           src: vue.unref(imageSrc)
@@ -37140,7 +37020,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
           alt: _ctx.alt,
           width: vue.unref(normalizeDimension)(_ctx.width),
           height: vue.unref(normalizeDimension)(_ctx.height)
-        }), null, 16, _hoisted_2$8)) : (vue.openBlock(), vue.createBlock(vue.unref(Skeleton), {
+        }), null, 16, _hoisted_2$9)) : (vue.openBlock(), vue.createBlock(vue.unref(Skeleton), {
           key: 1,
           class: "img-web-kit",
           width: vue.unref(normalizeDimension)(_ctx.width),
@@ -37172,7 +37052,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-6f277b5b"]]);
-const _hoisted_1$f = { class: "m-0 pb-025 txt14 line-height-1 w60 menu-text" };
+const _hoisted_1$g = { class: "m-0 pb-025 txt14 line-height-1 w60 menu-text" };
 const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
   __name: "BottomMenu",
   props: {
@@ -37180,7 +37060,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$$), { class: "hide m_grid gap-05 bgl_bottombar px-1 txt14 justify-content-start align-items-center overflow-x" }, {
+      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$_), { class: "hide m_grid gap-05 bgl_bottombar px-1 txt14 justify-content-start align-items-center overflow-x" }, {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "brand", {}, void 0, true),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.navLinks, (nav, i2) => {
@@ -37196,7 +37076,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
                   size: 1.4,
                   class: "m-0 line-height-14"
                 }, null, 8, ["icon"]),
-                vue.createElementVNode("p", _hoisted_1$f, vue.toDisplayString(nav.label), 1)
+                vue.createElementVNode("p", _hoisted_1$g, vue.toDisplayString(nav.label), 1)
               ]),
               _: 2
             }, 1032, ["to", "onClick"]);
@@ -37251,7 +37131,7 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Layout = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-1814129a"]]);
-const _hoisted_1$e = { key: 0 };
+const _hoisted_1$f = { key: 0 };
 const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
   __name: "SidebarMenu",
   props: {
@@ -37281,7 +37161,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
           icon: "keyboard_arrow_right",
           onClick: vue.unref(toggleMenu)
         }, null, 8, ["onClick"]),
-        vue.createVNode(vue.unref(_sfc_main$$), { class: "py-1 px-05 h-100 flex column gap-05 rounded relative bg-primary font-light overflow-y" }, {
+        vue.createVNode(vue.unref(_sfc_main$_), { class: "py-1 px-05 h-100 flex column gap-05 rounded relative bg-primary font-light overflow-y" }, {
           default: vue.withCtx(() => [
             !vue.unref(isOpen) || !vue.unref(slots)["brand-open"] ? vue.renderSlot(_ctx.$slots, "brand", { key: 0 }, void 0, true) : vue.createCommentVNode("", true),
             vue.unref(isOpen) ? vue.renderSlot(_ctx.$slots, "brand-open", { key: 1 }, void 0, true) : vue.createCommentVNode("", true),
@@ -37299,7 +37179,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
                   }, null, 8, ["icon"]),
                   vue.createVNode(vue.Transition, { name: "showP" }, {
                     default: vue.withCtx(() => [
-                      _ctx.open ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_1$e, vue.toDisplayString(nav.label), 1)) : vue.createCommentVNode("", true)
+                      _ctx.open ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_1$f, vue.toDisplayString(nav.label), 1)) : vue.createCommentVNode("", true)
                     ]),
                     _: 2
                   }, 1024)
@@ -37359,8 +37239,8 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-4da8c0d1"]]);
-const _hoisted_1$d = { class: "bgl_card tabs-top" };
-const _hoisted_2$7 = { class: "tabs grid auto-flow-columns fit-content" };
+const _hoisted_1$e = { 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({
   __name: "TabbedLayout",
@@ -37395,9 +37275,9 @@ 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$d, [
+        vue.createElementVNode("div", _hoisted_1$e, [
           vue.renderSlot(_ctx.$slots, "top-section", {}, void 0, true),
-          vue.createElementVNode("div", _hoisted_2$7, [
+          vue.createElementVNode("div", _hoisted_2$8, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.tabs, (tab) => {
               var _a2;
               return vue.openBlock(), vue.createElementBlock("div", {
@@ -37423,7 +37303,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const TabbedLayout = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-915732c1"]]);
-const _hoisted_1$c = { key: 0 };
+const _hoisted_1$d = { key: 0 };
 const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
   __name: "Tabs",
   props: {
@@ -37466,7 +37346,7 @@ 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$c, [
+        vue.unref(currentTab) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
           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);
@@ -37486,8 +37366,8 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$b = { class: "no-margin ellipsis line-height-14 pb-025" };
-const _hoisted_2$6 = { class: "txt12 no-margin txt-gray ellipsis" };
+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({
   __name: "ListItem",
   props: {
@@ -37522,11 +37402,11 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
             icon: _ctx.icon
           }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", null, [
-            vue.createElementVNode("p", _hoisted_1$b, [
+            vue.createElementVNode("p", _hoisted_1$c, [
               vue.createTextVNode(vue.toDisplayString(_ctx.title) + " ", 1),
               vue.renderSlot(_ctx.$slots, "default")
             ]),
-            vue.createElementVNode("p", _hoisted_2$6, [
+            vue.createElementVNode("p", _hoisted_2$7, [
               vue.createTextVNode(vue.toDisplayString(_ctx.subtitle) + " ", 1),
               vue.renderSlot(_ctx.$slots, "subtitle")
             ])
@@ -37538,12 +37418,12 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _sfc_main$e = {};
-const _hoisted_1$a = { class: "list-wrap bgl_card thin grid overflow-hidden h-100 pt-0 pb-05 px-0 m_pb-0" };
-const _hoisted_2$5 = { class: "p-1" };
+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_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$a, [
-    vue.createElementVNode("div", _hoisted_2$5, [
+  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, [
@@ -37552,7 +37432,7 @@ function _sfc_render$3(_ctx, _cache) {
   ]);
 }
 const ListView = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$3]]);
-const _hoisted_1$9 = { class: "flex-center" };
+const _hoisted_1$a = { class: "flex-center" };
 const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   __name: "Loading",
   props: {
@@ -37575,7 +37455,7 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
       return standardSize(borderValue);
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
         theme.value === "bar" ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           class: "lds-bar",
@@ -37618,7 +37498,7 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Loading = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-2e27b3c1"]]);
-const _hoisted_1$8 = ["id"];
+const _hoisted_1$9 = ["id"];
 const defaultMarkerSVG = '<svg width="28" height="38" viewBox="0 0 28 38" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.2263 37.7955C17.0897 37.7955 19.4109 37.0138 19.4109 36.0496C19.4109 35.0854 17.0897 34.3037 14.2263 34.3037C11.363 34.3037 9.04175 35.0854 9.04175 36.0496C9.04175 37.0138 11.363 37.7955 14.2263 37.7955Z" fill="black" fill-opacity="0.1"/><path d="M14.2265 0.549591C21.2842 0.549591 27.0131 6.23786 27.0787 13.28V13.4024C27.0787 19.3328 24.4759 24.4306 21.5627 28.2764C18.6511 32.12 15.4577 34.6754 14.3457 35.5097C14.2748 35.5629 14.1778 35.5629 14.1068 35.5097C12.9947 34.675 9.80135 32.1197 6.88984 28.2762C3.97665 24.4304 1.37378 19.3328 1.37378 13.4024C1.37378 6.30387 7.12806 0.549591 14.2265 0.549591Z" fill="#ED1b3E" stroke="#ED6C6F"/><path d="M14.2263 21.6185C18.7639 21.6185 22.4424 17.94 22.4424 13.4024C22.4424 8.86477 18.7639 5.18631 14.2263 5.18631C9.68872 5.18631 6.01025 8.86477 6.01025 13.4024C6.01025 17.94 9.68872 21.6185 14.2263 21.6185Z" fill="white"/></svg>';
 const leafletScriptUrl = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js";
 const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
@@ -37712,15 +37592,15 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
         class: "leaflet-map",
         style: vue.normalizeStyle({ height: `${props2.height || 400}px` }),
         dir: "ltr"
-      }, null, 12, _hoisted_1$8);
+      }, null, 12, _hoisted_1$9);
     };
   }
 });
-const _hoisted_1$7 = {
+const _hoisted_1$8 = {
   key: 0,
   class: "tool-bar"
 };
-const _hoisted_2$4 = {
+const _hoisted_2$5 = {
   key: 1,
   class: "sticky bg-popup z-index-999 -mt-1 -ms-1 px-025 h-30px pt-025 modal-no-title"
 };
@@ -37784,7 +37664,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
         onClick: _cache[1] || (_cache[1] = () => _ctx.dismissable ? closeModal() : ""),
         onKeydown: vue.withKeys(closeModal, ["esc"])
       }, [
-        vue.createVNode(vue.unref(_sfc_main$$), {
+        vue.createVNode(vue.unref(_sfc_main$_), {
           class: "modal",
           style: vue.normalizeStyle({ ...maxWidth.value }),
           onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
@@ -37793,7 +37673,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
           default: vue.withCtx(() => {
             var _a2;
             return [
-              vue.unref(slots).toolbar || _ctx.title ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_1$7, [
+              vue.unref(slots).toolbar || _ctx.title ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_1$8, [
                 vue.renderSlot(_ctx.$slots, "toolbar"),
                 vue.createVNode(vue.unref(Btn), {
                   style: vue.normalizeStyle({ float: _ctx.side ? "left" : "right" }),
@@ -37808,7 +37688,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
                   tag: "h3",
                   label: _ctx.title
                 }, null, 8, ["label"])) : vue.createCommentVNode("", true)
-              ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$4, [
+              ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5, [
                 vue.createVNode(vue.unref(Btn), {
                   class: "position-start",
                   icon: "close",
@@ -37836,7 +37716,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$6 = { class: "pb-05 pretty" };
+const _hoisted_1$7 = { class: "pb-05 pretty" };
 const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   __name: "ModalConfirm",
   props: {
@@ -37882,13 +37762,15 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
           }, null, 8, ["color", "value"])
         ]),
         default: vue.withCtx(() => [
-          vue.createElementVNode("p", _hoisted_1$6, vue.toDisplayString(vue.unref(message2)), 1)
+          vue.createElementVNode("p", _hoisted_1$7, vue.toDisplayString(vue.unref(message2)), 1)
         ]),
         _: 1
       }, 8, ["title"]);
     };
   }
 });
+const _hoisted_1$6 = { class: "flex gap-0" };
+const _hoisted_2$4 = { class: "flex gap-05" };
 const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   __name: "ModalForm",
   props: /* @__PURE__ */ vue.mergeModels({
@@ -37899,6 +37781,11 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     actions: {},
     schema: {},
     onSubmit: { type: Function },
+    onDuplicate: { type: Function },
+    submitText: {},
+    cancelText: {},
+    deleteText: {},
+    duplicateText: {},
     onDelete: { type: Function },
     visible: { type: Boolean },
     onError: { type: Function },
@@ -37961,7 +37848,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$T), {
+          _ctx.visible ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$S), {
             key: 0,
             ref_key: "form",
             ref: form,
@@ -37976,27 +37863,39 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
         _ctx.onDelete || _ctx.onSubmit ? {
           name: "footer",
           fn: vue.withCtx(() => [
-            vue.createElementVNode("div", null, [
+            vue.createElementVNode("div", _hoisted_1$6, [
               vue.createVNode(vue.unref(Btn), {
                 thin: "",
                 flat: "",
-                value: "Cancel",
+                value: _ctx.cancelText || "Cancel",
                 onClick: closeModal
-              }),
-              _ctx.onDelete ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
+              }, null, 8, ["value"]),
+              _ctx.onDelete && formData.value.id ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
                 key: 0,
                 thin: "",
                 icon: "delete",
                 flat: "",
-                value: "Delete",
+                value: _ctx.deleteText || "Delete",
                 color: "red",
                 onClick: runDelete
-              })) : vue.createCommentVNode("", true)
+              }, null, 8, ["value"])) : vue.createCommentVNode("", true)
             ]),
-            vue.createVNode(vue.unref(Btn), {
-              value: "Submit",
-              onClick: runSubmit
-            })
+            vue.createElementVNode("div", _hoisted_2$4, [
+              _ctx.onDuplicate ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
+                key: 0,
+                outline: "",
+                class: "px-1",
+                icon: "copy_all",
+                flat: "",
+                value: _ctx.duplicateText || "Duplicate",
+                onClick: _ctx.onDuplicate
+              }, null, 8, ["value", "onClick"])) : vue.createCommentVNode("", true),
+              _ctx.onSubmit ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
+                key: 1,
+                value: _ctx.submitText || "Submit",
+                onClick: runSubmit
+              }, null, 8, ["value"])) : vue.createCommentVNode("", true)
+            ])
           ]),
           key: "0"
         } : void 0
@@ -38004,7 +37903,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-495b8b8d"]]);
+const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-f8e6d41e"]]);
 const _hoisted_1$5 = { class: "full-nav" };
 const _hoisted_2$3 = { class: "nav-scroll" };
 const _hoisted_3$2 = { class: "nav-links-wrapper" };
@@ -38325,39 +38224,39 @@ function _sfc_render(_ctx, _cache) {
 const TopBar = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
 class TapDetector {
   constructor() {
-    __publicField(this, "singleTapCallbacks", []);
-    __publicField(this, "doubleTapCallbacks", []);
-    __publicField(this, "isTouchMode", false);
-    __publicField(this, "lastTapTimestamp", 0);
-    __publicField(this, "tappedCount", 0);
-    __publicField(this, "touchMovedLength", 0);
-    __publicField(this, "lastPointerX", 0);
-    __publicField(this, "lastPointerY", 0);
-    __publicField(this, "onTouchStart", (event) => {
+    __publicField2(this, "singleTapCallbacks", []);
+    __publicField2(this, "doubleTapCallbacks", []);
+    __publicField2(this, "isTouchMode", false);
+    __publicField2(this, "lastTapTimestamp", 0);
+    __publicField2(this, "tappedCount", 0);
+    __publicField2(this, "touchMovedLength", 0);
+    __publicField2(this, "lastPointerX", 0);
+    __publicField2(this, "lastPointerY", 0);
+    __publicField2(this, "onTouchStart", (event) => {
       this.isTouchMode = true;
       if (event.touches.length === 1) {
         this.onPointerDown(event.touches[0].clientX, event.touches[0].clientY);
       }
     });
-    __publicField(this, "onTouchMove", (event) => {
+    __publicField2(this, "onTouchMove", (event) => {
       if (event.touches.length === 1) {
         this.onPointerMove(event.touches[0].clientX, event.touches[0].clientY);
       }
     });
-    __publicField(this, "onTouchEnd", () => {
+    __publicField2(this, "onTouchEnd", () => {
       if (this.isTouchMode) this.onPointerUp();
     });
-    __publicField(this, "onMouseDown", (event) => {
+    __publicField2(this, "onMouseDown", (event) => {
       if (!this.isTouchMode) {
         this.onPointerDown(event.clientX, event.clientY);
       }
     });
-    __publicField(this, "onMouseMove", (event) => {
+    __publicField2(this, "onMouseMove", (event) => {
       if (!this.isTouchMode && event.button === 0) {
         this.onPointerMove(event.clientX, event.clientY);
       }
     });
-    __publicField(this, "onMouseUp", () => {
+    __publicField2(this, "onMouseUp", () => {
       if (!this.isTouchMode) this.onPointerUp();
     });
   }
@@ -38474,12 +38373,14 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     let panLocked = vue.ref(true);
     let raf = vue.ref();
     let tapDetector = vue.ref();
+    let translateXValue = vue.ref(0);
+    let translateYValue = vue.ref(0);
     const wrapperStyle = vue.computed(() => {
-      const translateXValue = containerWidth.value * animTranslateX.value;
-      const translateYValue = containerHeight.value * animTranslateY.value;
+      translateXValue.value = containerWidth.value * animTranslateX.value;
+      translateYValue.value = containerHeight.value * animTranslateY.value;
       return {
         transform: [
-          `translate(${translateXValue}px, ${translateYValue}px)`,
+          `translate(${translateXValue.value}px, ${translateYValue.value}px)`,
           `scale(${animScale.value})`
         ].join(" ")
       };
@@ -38568,12 +38469,22 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
         const imageToContainerRatio2 = containerWidth.value / __props.aspectRatio / containerHeight.value;
         let translateLimitY = (scale.value * imageToContainerRatio2 - 1) / 2;
         if (translateLimitY < 0) translateLimitY = 0;
-        return { x: (scale.value - 1) / 2, y: translateLimitY };
+        return {
+          x: scale.value - 1,
+          // Allow full movement to edges horizontally
+          y: translateLimitY * 2
+          // Allow full movement to edges vertically
+        };
       }
       const imageToContainerRatio = containerHeight.value * __props.aspectRatio / containerWidth.value;
       let translateLimitX = (scale.value * imageToContainerRatio - 1) / 2;
       if (translateLimitX < 0) translateLimitX = 0;
-      return { x: translateLimitX, y: (scale.value - 1) / 2 };
+      return {
+        x: translateLimitX * 2,
+        // Allow full movement to edges horizontally
+        y: scale.value - 1
+        // Allow full movement to edges vertically
+      };
     }
     function getMarginDirection() {
       const containerRatio = containerWidth.value / containerHeight.value;
@@ -38736,7 +38647,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Zoomer = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-6035bdcf"]]);
+const Zoomer = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-379819e1"]]);
 function useBglSchema({ schema, showFields, data: data2 } = {}) {
   let _schema = schema;
   if (typeof _schema === "function") {
@@ -38757,6 +38668,12 @@ function localRef(key, initialValue) {
   return value;
 }
 const useLocalStorage = localRef;
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 const axios = axios$1.create({
   withCredentials: true
 });
@@ -38771,7 +38688,8 @@ class DataRequest {
     this.itemID = "";
   }
   async post(item) {
-    if (!this.data_table) throw new Error("Data table not set");
+    if (!this.data_table)
+      throw new Error("Data table not set");
     const { data: data2 } = await axios.post(`/data/${this.data_table}`, item);
     return data2;
   }
@@ -38781,7 +38699,8 @@ class DataRequest {
   }
   async get() {
     var _a2, _b;
-    if (!this.data_table) throw new Error("Data table not set");
+    if (!this.data_table)
+      throw new Error("Data table not set");
     const filterStr = Object.keys(this._filter).length > 0 ? `?filter={${Object.entries(this._filter).map(([k2, v2]) => `${k2}:${v2}`).join(",")}}` : "";
     const url = `/data/${this.data_table}${this.itemID ? `/${this.itemID}` : ""}${filterStr}`;
     try {
@@ -38798,7 +38717,8 @@ class DataRequest {
     return this;
   }
   async delete() {
-    if (!this.data_table) throw new Error("Data table not set");
+    if (!this.data_table)
+      throw new Error("Data table not set");
     const { data: data2 } = await axios.delete(
       `/data/${this.data_table}/${this.itemID}`
     );
@@ -38806,8 +38726,10 @@ class DataRequest {
   }
   async put(updatedItem) {
     const { data_table, itemID } = this;
-    if (!data_table) throw new Error("Data table not set");
-    if (!itemID) throw new Error("Item ID not set");
+    if (!data_table)
+      throw new Error("Data table not set");
+    if (!itemID)
+      throw new Error("Item ID not set");
     const { data: data2 } = await axios.put(
       `/data/${data_table}/${itemID}`,
       updatedItem
@@ -38824,8 +38746,8 @@ function responses(key) {
 }
 class BagelAuth {
   constructor(bagel) {
-    __publicField(this, "user");
     this.bagel = bagel;
+    __publicField(this, "user");
     this.bagel = bagel;
   }
   async validateUser() {
@@ -38928,10 +38850,12 @@ class Bagel {
   async get(endpoint, query) {
     this._setAuthorization();
     endpoint = this._endpointCleaner(endpoint);
-    if (/undefined|null/.test(endpoint)) throw new Error(`Invalid endpoint: ${endpoint}`);
+    if (/undefined|null/.test(endpoint))
+      throw new Error(`Invalid endpoint: ${endpoint}`);
     if (query) {
       const queryParams = Object.entries(query).filter(([_2, value]) => !!value).map(([key, value]) => `${key}=${value}`).join("&");
-      if (queryParams) endpoint = `${endpoint}?${queryParams}`;
+      if (queryParams)
+        endpoint = `${endpoint}?${queryParams}`;
     }
     const url = `/${endpoint}`;
     return axios.get(url).then(({ data: data2 }) => data2).catch((err) => {
@@ -38986,7 +38910,8 @@ class Bagel {
     const formData = new FormData();
     formData.append("file", file);
     let url = "/static_files/upload";
-    if (options == null ? void 0 : options.topic) url = `/static_files/upload?topic=${options.topic}`;
+    if (options == null ? void 0 : options.topic)
+      url = `/static_files/upload?topic=${options.topic}`;
     const { data: data2 } = await axios.post(url, formData, {
       headers: {
         "Content-Type": "multipart/form-data"
@@ -38998,7 +38923,7 @@ class Bagel {
 }
 const _hoisted_1 = {
   key: 0,
-  class: "navigation flex space-between px-3 w-100 absolute m_px-1"
+  class: "navigation flex space-between px-3 w-100 absolute m_px-1 m_none z-9"
 };
 const _hoisted_2 = { class: "flex start fixed top-1 w-100 space-between px-1" };
 const _hoisted_3 = {
@@ -39006,18 +38931,17 @@ const _hoisted_3 = {
   class: "center"
 };
 const _hoisted_4 = { key: 3 };
-const _hoisted_5 = { class: "bgl-lightbox-item" };
-const _hoisted_6 = ["src", "title"];
-const _hoisted_7 = {
+const _hoisted_5 = ["src", "title"];
+const _hoisted_6 = {
   key: 3,
   class: "file-info txt-white flex m_block align-items-start gap-025"
 };
-const _hoisted_8 = { class: "txt-start" };
-const _hoisted_9 = { class: "mx-0 light" };
-const _hoisted_10 = { class: "semi word-break-all" };
-const _hoisted_11 = { class: "mx-0" };
-const _hoisted_12 = { class: "semi" };
-const _hoisted_13 = {
+const _hoisted_7 = { class: "txt-start" };
+const _hoisted_8 = { class: "mx-0 light" };
+const _hoisted_9 = { class: "semi word-break-all" };
+const _hoisted_10 = { class: "mx-0" };
+const _hoisted_11 = { class: "semi" };
+const _hoisted_12 = {
   key: 0,
   class: "flex justify-content-center mt-2 overflow p-1 fixed bottom start end gap-1 m_justify-content-start"
 };
@@ -39025,15 +38949,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "Lightbox",
   setup(__props, { expose: __expose }) {
     let isOpen = vue.ref(false);
-    let currentItem = vue.ref();
     let group = vue.ref([]);
     let currentIndex = vue.ref(0);
+    let currentItem = vue.computed(() => group.value[currentIndex.value]);
     function open(item, groupItems) {
       isOpen.value = true;
-      currentItem.value = item;
-      if (groupItems === void 0) return;
-      group.value = groupItems;
-      currentIndex.value = groupItems.findIndex(({ src }) => item.src === src);
+      group.value = groupItems || [item];
+      currentIndex.value = group.value.findIndex(({ src }) => item.src === src);
       document.addEventListener("keydown", handleKeydown);
     }
     function close() {
@@ -39078,7 +39000,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.Transition, { name: "fade" }, {
         default: vue.withCtx(() => {
-          var _a2, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l2, _m, _n2, _o, _p, _q, _r2;
+          var _a2, _b, _c, _d, _e2, _f, _g, _h;
           return [
             vue.unref(isOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
@@ -39092,19 +39014,21 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             }, [
               vue.unref(group) && vue.unref(group).length > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
                 vue.createVNode(vue.unref(Btn), {
-                  class: "navigation-btn oval",
+                  class: "oval opacity-8",
                   icon: "arrow_back",
+                  color: "black",
                   onClick: prev
                 }),
                 vue.createVNode(vue.unref(Btn), {
-                  class: "navigation-btn oval",
+                  class: "oval opacity-8",
                   icon: "arrow_forward",
+                  color: "black",
                   onClick: next
                 })
               ])) : vue.createCommentVNode("", true),
               vue.createElementVNode("div", {
                 class: "bgl-lightbox relative txt-center",
-                onClick: _cache[4] || (_cache[4] = vue.withModifiers(() => {
+                onClick: _cache[5] || (_cache[5] = vue.withModifiers(() => {
                 }, ["stop"]))
               }, [
                 vue.createElementVNode("div", _hoisted_2, [
@@ -39161,74 +39085,86 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   }, null, 8, ["href"])) : vue.createCommentVNode("", true),
                   !((_g = vue.unref(currentItem)) == null ? void 0 : _g.openFile) && !((_h = vue.unref(currentItem)) == null ? void 0 : _h.download) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4)) : vue.createCommentVNode("", true)
                 ]),
-                vue.createElementVNode("div", _hoisted_5, [
-                  ((_i = vue.unref(currentItem)) == null ? void 0 : _i.type) === "image" ? (vue.openBlock(), vue.createBlock(vue.unref(Zoomer), {
-                    key: 0,
-                    zoom: zoom.value,
-                    "onUpdate:zoom": _cache[3] || (_cache[3] = ($event) => zoom.value = $event),
-                    disabled: !((_j = vue.unref(currentItem)) == null ? void 0 : _j.enableZoom),
-                    "mouse-wheel-to-zoom": false
-                  }, {
-                    default: vue.withCtx(() => {
-                      var _a3;
-                      return [
-                        vue.createVNode(vue.unref(Image$1), {
-                          draggable: false,
-                          src: (_a3 = vue.unref(currentItem)) == null ? void 0 : _a3.src,
-                          alt: "Preview",
-                          class: "vw90 lightbox-image"
-                        }, null, 8, ["src"])
-                      ];
-                    }),
-                    _: 1
-                  }, 8, ["zoom", "disabled"])) : ((_k = vue.unref(currentItem)) == null ? void 0 : _k.type) === "video" ? (vue.openBlock(), vue.createBlock(vue.unref(BglVideo), {
-                    key: 1,
-                    src: (_l2 = vue.unref(currentItem)) == null ? void 0 : _l2.src,
-                    autoplay: "",
-                    controls: "",
-                    class: "vw90"
-                  }, null, 8, ["src"])) : ((_m = vue.unref(currentItem)) == null ? void 0 : _m.type) === "pdf" ? (vue.openBlock(), vue.createElementBlock("embed", {
-                    key: 2,
-                    src: vue.unref(normalizeURL)((_n2 = vue.unref(currentItem)) == null ? void 0 : _n2.src),
-                    type: "application/pdf",
-                    width: "100%",
-                    height: "1080",
-                    title: (_o = vue.unref(currentItem)) == null ? void 0 : _o.name,
-                    class: "vw90"
-                  }, null, 8, _hoisted_6)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
-                    vue.createVNode(vue.unref(_sfc_main$p), {
-                      class: "m-0 m_none",
-                      icon: "draft",
-                      size: 10,
-                      weight: "12"
-                    }),
-                    vue.createVNode(vue.unref(_sfc_main$p), {
-                      class: "m-0 none m_block m_-mb-1",
-                      icon: "draft",
-                      size: 4,
-                      weight: "2"
-                    }),
-                    vue.createElementVNode("div", _hoisted_8, [
-                      vue.createElementVNode("p", _hoisted_9, [
-                        _cache[5] || (_cache[5] = vue.createTextVNode(" File: ")),
-                        vue.createElementVNode("span", _hoisted_10, vue.toDisplayString((_p = vue.unref(currentItem)) == null ? void 0 : _p.name), 1)
-                      ]),
-                      vue.createElementVNode("p", _hoisted_11, [
-                        _cache[6] || (_cache[6] = vue.createTextVNode(" Type: ")),
-                        vue.createElementVNode("span", _hoisted_12, vue.toDisplayString((_q = vue.unref(currentItem)) == null ? void 0 : _q.type), 1)
-                      ]),
-                      vue.createVNode(vue.unref(Btn), {
-                        href: (_r2 = vue.unref(currentItem)) == null ? void 0 : _r2.src,
-                        target: "_blank",
-                        round: "",
-                        thin: "",
-                        class: "mt-1",
-                        value: "Open file"
-                      }, null, 8, ["href"])
-                    ])
-                  ]))
-                ]),
-                vue.unref(group) && vue.unref(group).length > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
+                vue.createVNode(vue.unref(Carousel), {
+                  index: vue.unref(currentIndex),
+                  "onUpdate:index": _cache[4] || (_cache[4] = ($event) => vue.isRef(currentIndex) ? currentIndex.value = $event : currentIndex = $event),
+                  items: 1,
+                  class: vue.normalizeClass(["bgl-lightbox-item", { zoomed: zoom.value > 1 }]),
+                  freeDrag: zoom.value === 1
+                }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(group), (item) => {
+                      return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+                        key: item.src
+                      }, [
+                        item.type === "image" ? (vue.openBlock(), vue.createBlock(vue.unref(Zoomer), {
+                          key: 0,
+                          zoom: zoom.value,
+                          "onUpdate:zoom": _cache[3] || (_cache[3] = ($event) => zoom.value = $event),
+                          disabled: !(item == null ? void 0 : item.enableZoom),
+                          "mouse-wheel-to-zoom": false
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(vue.unref(Image$1), {
+                              draggable: false,
+                              src: item == null ? void 0 : item.src,
+                              alt: "Preview",
+                              class: "vw90 lightbox-image"
+                            }, null, 8, ["src"])
+                          ]),
+                          _: 2
+                        }, 1032, ["zoom", "disabled"])) : (item == null ? void 0 : item.type) === "video" ? (vue.openBlock(), vue.createBlock(vue.unref(BglVideo), {
+                          key: 1,
+                          src: item == null ? void 0 : item.src,
+                          autoplay: "",
+                          controls: "",
+                          class: "vw90"
+                        }, null, 8, ["src"])) : (item == null ? void 0 : item.type) === "pdf" ? (vue.openBlock(), vue.createElementBlock("embed", {
+                          key: 2,
+                          src: vue.unref(normalizeURL)(item == null ? void 0 : item.src),
+                          type: "application/pdf",
+                          width: "100%",
+                          height: "1080",
+                          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), {
+                            class: "m-0 m_none",
+                            icon: "draft",
+                            size: 10,
+                            weight: "12"
+                          }),
+                          vue.createVNode(vue.unref(_sfc_main$p), {
+                            class: "m-0 none m_block m_-mb-1",
+                            icon: "draft",
+                            size: 4,
+                            weight: "2"
+                          }),
+                          vue.createElementVNode("div", _hoisted_7, [
+                            vue.createElementVNode("p", _hoisted_8, [
+                              _cache[6] || (_cache[6] = vue.createTextVNode(" File: ")),
+                              vue.createElementVNode("span", _hoisted_9, vue.toDisplayString(item == null ? void 0 : item.name), 1)
+                            ]),
+                            vue.createElementVNode("p", _hoisted_10, [
+                              _cache[7] || (_cache[7] = vue.createTextVNode(" Type: ")),
+                              vue.createElementVNode("span", _hoisted_11, vue.toDisplayString(item == null ? void 0 : item.type), 1)
+                            ]),
+                            vue.createVNode(vue.unref(Btn), {
+                              href: item == null ? void 0 : item.src,
+                              target: "_blank",
+                              round: "",
+                              thin: "",
+                              class: "mt-1",
+                              value: "Open file"
+                            }, null, 8, ["href"])
+                          ])
+                        ]))
+                      ], 64);
+                    }), 128))
+                  ]),
+                  _: 1
+                }, 8, ["index", "class", "freeDrag"]),
+                vue.unref(group) && vue.unref(group).length > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(group), (item, index2) => {
                     return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index2 }, [
                       item.type === "image" ? (vue.openBlock(), vue.createBlock(vue.unref(Image$1), {
@@ -39255,7 +39191,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d5e5a1db"]]);
+const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f833758f"]]);
 const groups = {};
 let clickHandler = (_e2) => void 0;
 const lightboxDirective = {
@@ -40370,22 +40306,21 @@ function timeAgo(date2, lang = "en") {
   }
   return selectedLang.justNow;
 }
-exports.Accordion = _sfc_main$18;
+exports.Accordion = _sfc_main$17;
 exports.AccordionItem = AccordionItem;
-exports.AddressSearch = _sfc_main$16;
+exports.AddressSearch = _sfc_main$15;
 exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
-exports.BagelForm = _sfc_main$Q;
-exports.BagelForm2 = _sfc_main$T;
+exports.BagelForm = _sfc_main$S;
 exports.BagelVue = BagelVue;
-exports.BglComponent = _sfc_main$11;
-exports.BglField = _sfc_main$R;
-exports.BglForm = _sfc_main$Q;
+exports.BglComponent = _sfc_main$10;
+exports.BglField = _sfc_main$Q;
+exports.BglForm = _sfc_main$S;
 exports.BglVideo = BglVideo;
 exports.BottomMenu = BottomMenu;
 exports.Btn = Btn;
-exports.Card = _sfc_main$$;
+exports.Card = _sfc_main$_;
 exports.Carousel = Carousel;
 exports.CheckInput = CheckInput;
 exports.Checkbox = Checkbox;
@@ -40396,7 +40331,7 @@ exports.DataTable = DataTable;
 exports.DateInput = _sfc_main$K;
 exports.DatePick = DatePick;
 exports.DatePicker = _sfc_main$I;
-exports.Dropdown = _sfc_main$W;
+exports.Dropdown = _sfc_main$V;
 exports.FORM_STATE_KEY = FORM_STATE_KEY;
 exports.FieldArray = _sfc_main$P;
 exports.FieldSetVue = FieldSetVue;
@@ -40409,7 +40344,7 @@ exports.IframeVue = _sfc_main$o;
 exports.Image = Image$1;
 exports.JSONInput = JSONInput;
 exports.Layout = Layout;
-exports.Lineart = _sfc_main$Z;
+exports.Lineart = _sfc_main$Y;
 exports.ListItem = _sfc_main$f;
 exports.ListView = ListView;
 exports.Loading = Loading;