@bagelink/vue 1.2.124 → 1.2.128

package/dist/index.mjs

@@ -18,8 +18,8 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$15 = ["aria-expanded", "aria-controls"];
-const _hoisted_2$P = { class: "accordion-label" };
-const _hoisted_3$H = ["id", "aria-hidden"];
+const _hoisted_2$Q = { class: "accordion-label" };
+const _hoisted_3$I = ["id", "aria-hidden"];
 const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   __name: "AccordionItem",
   props: {
@@ -86,7 +86,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
             createVNode(unref(_sfc_main$v), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "head", {}, () => [
-            createElementVNode("span", _hoisted_2$P, toDisplayString(_ctx.label), 1)
+            createElementVNode("span", _hoisted_2$Q, toDisplayString(_ctx.label), 1)
           ], true),
           iconPosition.value === "end" ? (openBlock(), createElementBlock("span", {
             key: 1,
@@ -104,7 +104,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
               "aria-hidden": unref(isOpen) ? "false" : "true"
             }, [
               renderSlot(_ctx.$slots, "default", {}, void 0, true)
-            ], 8, _hoisted_3$H)) : createCommentVNode("", true)
+            ], 8, _hoisted_3$I)) : createCommentVNode("", true)
           ]),
           _: 3
         })
@@ -278,7 +278,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
 });
 const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$1g, [["__scopeId", "data-v-99c4aa53"]]);
 const _hoisted_1$12 = ["dismissable"];
-const _hoisted_2$O = { class: "m-0" };
+const _hoisted_2$P = { class: "m-0" };
 const _sfc_main$1f = /* @__PURE__ */ defineComponent({
   __name: "Alert",
   props: {
@@ -309,7 +309,7 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
           size: 1.7,
           color: color2[_ctx.type]
         }, null, 8, ["icon", "color"])) : createCommentVNode("", true),
-        createElementVNode("p", _hoisted_2$O, toDisplayString(_ctx.message), 1),
+        createElementVNode("p", _hoisted_2$P, toDisplayString(_ctx.message), 1),
         createVNode(Btn, {
           flat: "",
           thin: "",
@@ -381,8 +381,8 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
 });
 const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["__scopeId", "data-v-689f051f"]]);
 const _hoisted_1$10 = ["src"];
-const _hoisted_2$N = ["autoplay", "muted", "loop", "controls", "playsinline"];
-const _hoisted_3$G = ["src", "type"];
+const _hoisted_2$O = ["autoplay", "muted", "loop", "controls", "playsinline"];
+const _hoisted_3$H = ["src", "type"];
 const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   __name: "BglVideo",
   props: {
@@ -474,8 +474,8 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
           createElementVNode("source", {
             src: _ctx.src,
             type: `video/${videoFormat.value}`
-          }, null, 8, _hoisted_3$G)
-        ], 12, _hoisted_2$N)) : createCommentVNode("", true)
+          }, null, 8, _hoisted_3$H)
+        ], 12, _hoisted_2$O)) : createCommentVNode("", true)
       ], 2);
     };
   }
@@ -548,8 +548,8 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
 });
 const CalendarPopover = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["__scopeId", "data-v-6f51f6b3"]]);
 const _hoisted_1$$ = { class: "agenda-view" };
-const _hoisted_2$M = ["data-date", "onClick"];
-const _hoisted_3$F = { class: "event-content" };
+const _hoisted_2$N = ["data-date", "onClick"];
+const _hoisted_3$G = { class: "event-content" };
 const _hoisted_4$s = { class: "event-time" };
 const _hoisted_5$r = { class: "event-details" };
 const _hoisted_6$n = { class: "event-title" };
@@ -672,7 +672,7 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
               "data-date": event.start_time,
               onClick: withModifiers(($event) => handleEventSelection(event, $event), ["stop"])
             }, [
-              createElementVNode("div", _hoisted_3$F, [
+              createElementVNode("div", _hoisted_3$G, [
                 createElementVNode("div", _hoisted_4$s, toDisplayString(unref(formatDate)(event.start_time, { fmt: "HH:mm" })), 1),
                 createElementVNode("div", _hoisted_5$r, [
                   createElementVNode("div", _hoisted_6$n, toDisplayString(event.title), 1),
@@ -681,7 +681,7 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
                   }, toDisplayString(event.dayLabel), 3)
                 ])
               ])
-            ], 12, _hoisted_2$M);
+            ], 12, _hoisted_2$N);
           }), 128))
         ], 512)
       ]);
@@ -690,8 +690,8 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
 });
 const AgendaView = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["__scopeId", "data-v-1e2b483b"]]);
 const _hoisted_1$_ = { class: "w-100p overflow-hidden m_overflow h-100p grid" };
-const _hoisted_2$L = { class: "border-bottom me-1 txt-center p-05 dayGrid" };
-const _hoisted_3$E = { class: "overflow h-100p pe-05" };
+const _hoisted_2$M = { class: "border-bottom me-1 txt-center p-05 dayGrid" };
+const _hoisted_3$F = { class: "overflow h-100p pe-05" };
 const _hoisted_4$r = { class: "time-column" };
 const _hoisted_5$q = { class: "events-column" };
 const _hoisted_6$m = ["onClick"];
@@ -836,11 +836,11 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$_, [
-        createElementVNode("div", _hoisted_2$L, [
+        createElementVNode("div", _hoisted_2$M, [
           _cache[0] || (_cache[0] = createElementVNode("div", null, null, -1)),
           createElementVNode("div", null, toDisplayString(unref(formatDate)(_ctx.startDate)), 1)
         ]),
-        createElementVNode("div", _hoisted_3$E, [
+        createElementVNode("div", _hoisted_3$F, [
           createElementVNode("div", {
             class: "time-slots dayGrid border-end relative",
             onMousedown: handleMouseDown
@@ -902,8 +902,8 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
 });
 const DayView = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["__scopeId", "data-v-8b1a770f"]]);
 const _hoisted_1$Z = { class: "month-view" };
-const _hoisted_2$K = { class: "month-header" };
-const _hoisted_3$D = { class: "month-grid" };
+const _hoisted_2$L = { class: "month-header" };
+const _hoisted_3$E = { class: "month-grid" };
 const _hoisted_4$q = { class: "day-number" };
 const _hoisted_5$p = { class: "day-events" };
 const _hoisted_6$l = {
@@ -988,7 +988,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$Z, [
-        createElementVNode("div", _hoisted_2$K, [
+        createElementVNode("div", _hoisted_2$L, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(weekDays.value, (day) => {
             return openBlock(), createElementBlock("div", {
               key: day,
@@ -996,7 +996,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
             }, toDisplayString(day), 1);
           }), 128))
         ]),
-        createElementVNode("div", _hoisted_3$D, [
+        createElementVNode("div", _hoisted_3$E, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(currentMonth.value, (day) => {
             return openBlock(), createElementBlock("div", {
               key: day.date.toISOString(),
@@ -1031,8 +1031,8 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
 });
 const MonthView = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["__scopeId", "data-v-0b1117c4"]]);
 const _hoisted_1$Y = { class: "w-100p overflow-hidden m_overflow h-100p grid" };
-const _hoisted_2$J = { class: "overflow h-100p pe-05" };
-const _hoisted_3$C = ["onMousedown"];
+const _hoisted_2$K = { class: "overflow h-100p pe-05" };
+const _hoisted_3$D = ["onMousedown"];
 const _hoisted_4$p = ["onClick"];
 const _hoisted_5$o = { class: "overflow-hidden color-white p-025 txt12 h-100p" };
 const _hoisted_6$k = { class: "white-space ellipsis-1" };
@@ -1316,7 +1316,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
             ]);
           }), 128))
         ], 512),
-        createElementVNode("div", _hoisted_2$J, [
+        createElementVNode("div", _hoisted_2$K, [
           createElementVNode("div", {
             ref_key: "dayColumnsContainer",
             ref: dayColumnsContainer,
@@ -1371,7 +1371,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
                     ])
                   ], 44, _hoisted_4$p);
                 }), 128))
-              ], 40, _hoisted_3$C);
+              ], 40, _hoisted_3$D);
             }), 128)),
             dragState.value.isDragging && dragState.value.start && dragState.value.end ? (openBlock(), createElementBlock("div", {
               key: 1,
@@ -1394,8 +1394,8 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
 });
 const WeekView = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["__scopeId", "data-v-2d5bca17"]]);
 const _hoisted_1$X = { class: "calendar" };
-const _hoisted_2$I = { class: "flex m_block m_pb-1" };
-const _hoisted_3$B = { class: "txt-light my-0" };
+const _hoisted_2$J = { class: "flex m_block m_pb-1" };
+const _hoisted_3$C = { class: "txt-light my-0" };
 const _hoisted_4$o = { class: "ms-auto flex gap-025" };
 const _sfc_main$16 = /* @__PURE__ */ defineComponent({
   __name: "Index",
@@ -1490,8 +1490,8 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$X, [
-        createElementVNode("div", _hoisted_2$I, [
-          createElementVNode("h3", _hoisted_3$B, [
+        createElementVNode("div", _hoisted_2$J, [
+          createElementVNode("h3", _hoisted_3$C, [
             createElementVNode("b", null, toDisplayString(unref(fmtDate)(currentDate.value, { fmt: "MMMM" })), 1),
             createTextVNode(" " + toDisplayString(unref(fmtDate)(currentDate.value, { fmt: "YYYY" })), 1)
           ]),
@@ -1612,11 +1612,11 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$V = ["dir"];
-const _hoisted_2$H = {
+const _hoisted_2$I = {
   key: 0,
   class: "dots"
 };
-const _hoisted_3$A = ["onClick"];
+const _hoisted_3$B = ["onClick"];
 const GAP_PERCENT = 1;
 const VELOCITY_SAMPLE_DURATION = 100;
 const _sfc_main$14 = /* @__PURE__ */ defineComponent({
@@ -2053,13 +2053,13 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
         }, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ], 38),
-        props2.dots && unref(slideCount) > 1 ? (openBlock(), createElementBlock("div", _hoisted_2$H, [
+        props2.dots && unref(slideCount) > 1 ? (openBlock(), createElementBlock("div", _hoisted_2$I, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(slideCount), (i2) => {
             return openBlock(), createElementBlock("span", {
               key: i2,
               class: normalizeClass(["dot", { current: unref(activeSlideIndex) === i2 - 1 }]),
               onClick: ($event) => goToSlide(i2 - 1)
-            }, null, 10, _hoisted_3$A);
+            }, null, 10, _hoisted_3$B);
           }), 128))
         ])) : createCommentVNode("", true),
         createElementVNode("div", {
@@ -7922,7 +7922,7 @@ const _hoisted_1$1$1 = {
   style: { display: "flex", position: "relative" }
 };
 const _hoisted_2$1$1 = ["width", "height", "viewBox"];
-const _hoisted_3$z = { class: "layer-rectangles" };
+const _hoisted_3$A = { class: "layer-rectangles" };
 const _hoisted_4$n = ["transform", "onMouseover"];
 const _hoisted_5$n = ["width", "height"];
 const _hoisted_6$j = {
@@ -7940,7 +7940,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       viewBox: `0 0 ${_ctx.size.width} ${_ctx.size.height}`,
       ref: "el"
     }, [
-      createElementVNode("g", _hoisted_3$z, [
+      createElementVNode("g", _hoisted_3$A, [
         (openBlock(true), createElementBlock(
           Fragment,
           null,
@@ -8036,7 +8036,7 @@ const _hoisted_1$U = {
   key: 0,
   class: "layer-hover-bar"
 };
-const _hoisted_2$G = ["x", "y", "width", "height"];
+const _hoisted_2$H = ["x", "y", "width", "height"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.mouse.hover ? (openBlock(), createElementBlock("g", _hoisted_1$U, [
     createElementVNode("rect", mergeProps({ class: "hover-bar" }, _ctx.barStyle, {
@@ -8044,7 +8044,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       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$G)
+    }), null, 16, _hoisted_2$H)
   ])) : createCommentVNode("v-if", true);
 }
 script.render = render;
@@ -8388,7 +8388,7 @@ function useTableData(options) {
   function resolveSchema() {
     try {
       schemaState.value = "loading";
-      const dataValue = options.data.value || [];
+      const dataValue = toValue(options.data) || [];
       const schema = useBglSchema({
         schema: toValue(options.schema),
         columns: toValue(options.columns),
@@ -8462,12 +8462,11 @@ function useTableData(options) {
   }
   const computedSortField = computed(() => sortField.value ? `_transformed_${sortField.value}` : "");
   const computedData = computed(() => {
-    const currentData = options.data.value || [];
+    const currentData = toValue(options.data) || [];
     if (!Array.isArray(currentData) || currentData.length === 0) {
       return [];
     }
-    const useServerSortValue = computed(() => toValue(options.useServerSort));
-    if (!sortField.value || useServerSortValue.value === true) {
+    if (!sortField.value || toValue(options.useServerSort) === true) {
       return currentData.map(transform);
     }
     return currentData.map(transform).sort((a2, z2) => {
@@ -8513,7 +8512,7 @@ function useTableData(options) {
   };
 }
 const _hoisted_1$T = { class: "data-preview" };
-const _hoisted_2$F = {
+const _hoisted_2$G = {
   key: 1,
   class: "empty-preview"
 };
@@ -8524,7 +8523,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     includeUnset: { type: Boolean },
     schema: {},
     columns: {},
-    useServerSort: {},
+    useServerSort: { type: Boolean },
     selectable: { type: Boolean },
     onLastItemVisible: { type: Function }
   },
@@ -8564,7 +8563,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
           return openBlock(), createBlock(resolveDynamicComponent(unref(renderField)(field, unref(slots))), {
             key: field.id
           });
-        }), 128)) : (openBlock(), createElementBlock("div", _hoisted_2$F, " No data to display "))
+        }), 128)) : (openBlock(), createElementBlock("div", _hoisted_2$G, " No data to display "))
       ]);
     };
   }
@@ -9505,8 +9504,8 @@ const _hoisted_1$S = {
   key: 0,
   class: "loading-table-wrapper z-99 h-100 w-100 absolute inset"
 };
-const _hoisted_2$E = { class: "infinite-wrapper" };
-const _hoisted_3$y = { class: "row first-row" };
+const _hoisted_2$F = { class: "infinite-wrapper" };
+const _hoisted_3$z = { class: "row first-row" };
 const _hoisted_4$m = { key: 0 };
 const _hoisted_5$m = ["onClick"];
 const _hoisted_6$i = { class: "flex" };
@@ -9520,7 +9519,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
     data: {},
     schema: {},
     columns: {},
-    useServerSort: {},
+    useServerSort: { type: Boolean },
     selectable: { type: Boolean },
     onLastItemVisible: { type: Function }
   }, {
@@ -9534,7 +9533,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   emits: /* @__PURE__ */ mergeModels(["orderBy", "select", "lastItemVisible"], ["update:loading", "update:itemHeight", "update:selectedItems"]),
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "4c16a687": unref(computedItemHeight)
+      "25c2d418": unref(computedItemHeight)
     }));
     const props2 = __props;
     const emit2 = __emit;
@@ -9542,10 +9541,6 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
     const loading = useModel(__props, "loading");
     const itemHeight = useModel(__props, "itemHeight");
     const selectedItems = useModel(__props, "selectedItems");
-    const data2 = computed(() => props2.data);
-    const schema = computed(() => props2.schema);
-    const columns = computed(() => props2.columns);
-    const useServerSort = computed(() => props2.useServerSort);
     const {
       computedSchema,
       computedData,
@@ -9554,10 +9549,10 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
       toggleSort,
       cleanTransformedData
     } = useTableData({
-      data: data2,
-      schema,
-      columns,
-      useServerSort,
+      data: computed(() => props2.data),
+      schema: computed(() => toValue(props2.schema)),
+      columns: computed(() => toValue(props2.columns)),
+      useServerSort: computed(() => toValue(props2.useServerSort)),
       onSort: (field, direction) => {
         emit2("orderBy", `${field.trim()} ${direction.trim()}`);
       }
@@ -9640,8 +9635,8 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
         createElementVNode("div", mergeProps(unref(wrapperProps), {
           class: { "pointer-events-none": showLoading.value }
         }), [
-          createElementVNode("table", _hoisted_2$E, [
-            createElementVNode("thead", _hoisted_3$y, [
+          createElementVNode("table", _hoisted_2$F, [
+            createElementVNode("thead", _hoisted_3$z, [
               unref(isSelectable) ? (openBlock(), createElementBlock("th", _hoisted_4$m, [
                 createElementVNode("input", {
                   ref_key: "allSelectorEl",
@@ -9723,7 +9718,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-979bbdcd"]]);
+const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-f795f660"]]);
 function useDraggable(options = {}) {
   const isDragging = ref(false);
   const dragElement = ref(null);
@@ -10281,7 +10276,8 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   props: {
     multiple: { type: Boolean },
     accept: {},
-    disabled: { type: Boolean }
+    disabled: { type: Boolean },
+    browse: { type: Boolean }
   },
   emits: ["addFiles"],
   setup(__props, { emit: __emit }) {
@@ -10310,6 +10306,24 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
         isDragging.value = false;
       }
     }
+    function handleClick(e) {
+      if (!props2.browse || props2.disabled) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      const input = document.createElement("input");
+      input.type = "file";
+      input.multiple = !!props2.multiple;
+      input.accept = props2.accept || "*";
+      input.onchange = (e22) => {
+        const { files: files2 } = e22.target;
+        if (files2) {
+          emit2("addFiles", files2);
+        }
+      };
+      input.click();
+    }
     function handleDrop(e) {
       if (props2.disabled) return;
       e.preventDefault();
@@ -10328,7 +10342,8 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
         onDragenter: handleDragEnter,
         onDragover: handleDragOver,
         onDragleave: handleDragLeave,
-        onDrop: handleDrop
+        onDrop: handleDrop,
+        onClick: handleClick
       }, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true),
         isDragging.value && !_ctx.disabled ? (openBlock(), createElementBlock("div", _hoisted_1$R, _cache[0] || (_cache[0] = [
@@ -10338,7 +10353,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DragOver = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["__scopeId", "data-v-efa2a825"]]);
+const DragOver = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["__scopeId", "data-v-9cf27687"]]);
 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]), []);
@@ -12980,7 +12995,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$Q = { class: "px-1 pt-025 pb-1" };
-const _hoisted_2$D = { class: "ms-1" };
+const _hoisted_2$E = { class: "ms-1" };
 const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "FieldSetVue",
   props: {
@@ -12990,7 +13005,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("fieldset", _hoisted_1$Q, [
-        createElementVNode("legend", _hoisted_2$D, toDisplayString(_ctx.legend || _ctx.label), 1),
+        createElementVNode("legend", _hoisted_2$E, toDisplayString(_ctx.legend || _ctx.label), 1),
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
       ]);
     };
@@ -13668,11 +13683,11 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$P = { class: "bgl-multi-step-form" };
-const _hoisted_2$C = {
+const _hoisted_2$D = {
   key: 0,
   class: "bgl-step-progress"
 };
-const _hoisted_3$x = { class: "bgl-steps-indicator" };
+const _hoisted_3$y = { class: "bgl-steps-indicator" };
 const _hoisted_4$l = ["onClick"];
 const _hoisted_5$l = {
   key: 0,
@@ -13846,7 +13861,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$P, [
-        _ctx.showProgress ? (openBlock(), createElementBlock("div", _hoisted_2$C, [
+        _ctx.showProgress ? (openBlock(), createElementBlock("div", _hoisted_2$D, [
           renderSlot(_ctx.$slots, "progress", normalizeProps(guardReactiveProps({
             currentStep: currentStep.value,
             totalSteps: numberOfSteps.value,
@@ -13855,7 +13870,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
             allowStepNavigation: props2.allowStepNavigation,
             isStepValidated: isStepValidated.value
           })), () => [
-            createElementVNode("div", _hoisted_3$x, [
+            createElementVNode("div", _hoisted_3$y, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(numberOfSteps.value, (_2, index2) => {
                 return openBlock(), createElementBlock("div", {
                   key: index2,
@@ -13949,8 +13964,8 @@ const _hoisted_1$O = {
   key: 0,
   class: "label mb-05"
 };
-const _hoisted_2$B = { class: "ps-025 border-start mb-05" };
-const _hoisted_3$w = {
+const _hoisted_2$C = { class: "ps-025 border-start mb-05" };
+const _hoisted_3$x = {
   key: 0,
   class: "flex-center h-300px"
 };
@@ -14051,8 +14066,8 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
         class: normalizeClass(props2.class)
       }, [
         _ctx.label ? (openBlock(), createElementBlock("p", _hoisted_1$O, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$B, [
-          schemaState.value !== "loaded" ? (openBlock(), createElementBlock("div", _hoisted_3$w, [
+        createElementVNode("div", _hoisted_2$C, [
+          schemaState.value !== "loaded" ? (openBlock(), createElementBlock("div", _hoisted_3$x, [
             schemaState.value === "loading" ? (openBlock(), createBlock(unref(Loading), { key: 0 })) : schemaState.value === "error" ? (openBlock(), createBlock(unref(_sfc_main$v), {
               key: 1,
               icon: "error",
@@ -14138,8 +14153,8 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
 });
 const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-73f1d9ad"]]);
 const _hoisted_1$M = ["title"];
-const _hoisted_2$A = ["id", "value", "required"];
-const _hoisted_3$v = ["for"];
+const _hoisted_2$B = ["id", "value", "required"];
+const _hoisted_3$w = ["for"];
 const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "CheckInput",
   props: /* @__PURE__ */ mergeModels({
@@ -14173,7 +14188,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
           required: _ctx.required,
           type: "checkbox",
           class: "me-05"
-        }, null, 8, _hoisted_2$A), [
+        }, null, 8, _hoisted_2$B), [
           [vModelCheckbox, checked.value]
         ]),
         createElementVNode("label", {
@@ -14182,7 +14197,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "label", {}, () => [
             createTextVNode(toDisplayString(_ctx.label), 1)
           ], true)
-        ], 8, _hoisted_3$v)
+        ], 8, _hoisted_3$w)
       ], 10, _hoisted_1$M);
     };
   }
@@ -14245,8 +14260,8 @@ const _hoisted_1$L = {
   key: 0,
   class: "label"
 };
-const _hoisted_2$z = { class: "editor-content-papa relative" };
-const _hoisted_3$u = {
+const _hoisted_2$A = { class: "editor-content-papa relative" };
+const _hoisted_3$v = {
   class: "code-display",
   wrap: ""
 };
@@ -14320,8 +14335,8 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
           ref: editorRef,
           class: "code-editor-grandpa"
         }, [
-          createElementVNode("div", _hoisted_2$z, [
-            createElementVNode("pre", _hoisted_3$u, [
+          createElementVNode("div", _hoisted_2$A, [
+            createElementVNode("pre", _hoisted_3$v, [
               createElementVNode("code", { innerHTML: formattedCode.value }, null, 8, _hoisted_4$j)
             ]),
             !_ctx.readonly ? (openBlock(), createElementBlock("textarea", {
@@ -14343,8 +14358,8 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
 });
 const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-de01e351"]]);
 const _hoisted_1$K = ["title"];
-const _hoisted_2$y = { class: "flex bg-input rounded px-025 colorInputPickWrap" };
-const _hoisted_3$t = ["id", "placeholder", "required"];
+const _hoisted_2$z = { class: "flex bg-input rounded px-025 colorInputPickWrap" };
+const _hoisted_3$u = ["id", "placeholder", "required"];
 const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "ColorInput",
   props: {
@@ -14375,7 +14390,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("label", null, [
           createTextVNode(toDisplayString(_ctx.label) + " ", 1),
-          createElementVNode("div", _hoisted_2$y, [
+          createElementVNode("div", _hoisted_2$z, [
             withDirectives(createElementVNode("input", mergeProps({
               id: _ctx.id,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputVal.value = $event),
@@ -14383,7 +14398,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
               type: "color",
               placeholder: _ctx.placeholder || _ctx.label,
               required: _ctx.required
-            }, _ctx.nativeInputAttrs), null, 16, _hoisted_3$t), [
+            }, _ctx.nativeInputAttrs), null, 16, _hoisted_3$u), [
               [vModelText, inputVal.value]
             ]),
             withDirectives(createElementVNode("input", {
@@ -14927,8 +14942,8 @@ class Time {
   }
 }
 const _hoisted_1$J = { class: "ltr flex gap-075 m_flex-wrap calendar-container justify-content-center h-100p" };
-const _hoisted_2$x = { class: "calendar-section m_border-none pe-05 m_p-0" };
-const _hoisted_3$s = { class: "flex space-between pb-1" };
+const _hoisted_2$y = { class: "calendar-section m_border-none pe-05 m_p-0" };
+const _hoisted_3$t = { class: "flex space-between pb-1" };
 const _hoisted_4$i = { class: "flex gap-05" };
 const _hoisted_5$i = { class: "month-year" };
 const _hoisted_6$f = {
@@ -14965,6 +14980,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
+    const computedHighlightedDates = computed(() => toValue(props2.highlightedDates));
     const currentMonth = ref(/* @__PURE__ */ new Date());
     const currentView = ref("days");
     const time = new Time(props2.firstDayOfWeek, props2.locale);
@@ -15061,16 +15077,16 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       const isNotInMonth2 = (date2) => {
         return time.isTrailingOrLeadingDate(date2, currentMonth.value.getMonth());
       };
-      const isHighlighted2 = (date2) => {
-        if (!date2 || !Array.isArray(props2.highlightedDates) || !props2.highlightedDates.length) {
+      const isHighlighted2 = computed(() => (date2) => {
+        if (!date2 || !Array.isArray(computedHighlightedDates.value) || !computedHighlightedDates.value.length) {
           return false;
         }
-        return props2.highlightedDates.some((highlightedDate) => {
+        return computedHighlightedDates.value.some((highlightedDate) => {
           const parsedDate = parseDate(highlightedDate);
           if (!parsedDate) return false;
           return date2.getFullYear() === parsedDate.getFullYear() && date2.getMonth() === parsedDate.getMonth() && date2.getDate() === parsedDate.getDate();
         });
-      };
+      });
       return {
         currentMonthDays: currentMonthDays2,
         currentMonthValue: currentMonthValue2,
@@ -15182,8 +15198,8 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$J, [
-        createElementVNode("div", _hoisted_2$x, [
-          createElementVNode("div", _hoisted_3$s, [
+        createElementVNode("div", _hoisted_2$y, [
+          createElementVNode("div", _hoisted_3$t, [
             currentView.value === "days" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
               createVNode(unref(Btn), {
                 flat: "",
@@ -15312,10 +15328,10 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-2cc2cfc1"]]);
+const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-16646325"]]);
 const _hoisted_1$I = ["title"];
-const _hoisted_2$w = { key: 0 };
-const _hoisted_3$r = {
+const _hoisted_2$x = { key: 0 };
+const _hoisted_3$s = {
   key: 0,
   class: "required"
 };
@@ -15435,9 +15451,9 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
         onFocusin: _cache[4] || (_cache[4] = //@ts-ignore
         (...args) => unref(handleFocus) && unref(handleFocus)(...args))
       }, [
-        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$w, [
+        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$x, [
           createTextVNode(toDisplayString(_ctx.label) + " ", 1),
-          _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_3$r, "*")) : createCommentVNode("", true)
+          _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_3$s, "*")) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
         createVNode(unref(_sfc_main$_), {
           shown: isOpen.value,
@@ -15504,8 +15520,8 @@ const VIDEO_FORMATS = ["mp4", "webm", "ogg", "mov", "avi", "flv", "wmv", "mkv",
 const VIDEO_FORMATS_REGEXP = new RegExp(`(${VIDEO_FORMATS.join("|")})$`, "i");
 const EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\])|(([a-z\-0-9]+\.)+[a-z]{2,}))$/i;
 const _hoisted_1$H = ["title"];
-const _hoisted_2$v = ["for"];
-const _hoisted_3$q = { class: "flex" };
+const _hoisted_2$w = ["for"];
+const _hoisted_3$r = { class: "flex" };
 const _hoisted_4$h = { key: 0 };
 const _hoisted_5$h = {
   key: 1,
@@ -15780,7 +15796,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
         title: _ctx.title
       }, [
         createElementVNode("label", { for: _ctx.id }, [
-          createElementVNode("div", _hoisted_3$q, [
+          createElementVNode("div", _hoisted_3$r, [
             createTextVNode(toDisplayString(_ctx.label) + " ", 1),
             _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_4$h, "*")) : createCommentVNode("", true),
             _ctx.helptext ? (openBlock(), createElementBlock("span", _hoisted_5$h, toDisplayString(_ctx.helptext), 1)) : createCommentVNode("", true),
@@ -15822,21 +15838,21 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
             key: 1,
             icon: _ctx.icon
           }, null, 8, ["icon"])) : createCommentVNode("", true)
-        ], 8, _hoisted_2$v)
+        ], 8, _hoisted_2$w)
       ], 10, _hoisted_1$H);
     };
   }
 });
 const EmailInput = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-e3d13caa"]]);
 const _hoisted_1$G = { class: "bagel-input" };
-const _hoisted_2$u = {
+const _hoisted_2$v = {
   key: 0,
   placeholder: "required",
   type: "text",
   required: "",
   class: "pixel"
 };
-const _hoisted_3$p = { class: "m-05 flex opacity-7 z-99" };
+const _hoisted_3$q = { class: "m-05 flex opacity-7 z-99" };
 const _hoisted_4$g = { class: "ellipsis-1 word-break-all h-20 m-0 color-black" };
 const _hoisted_5$g = { class: "flex gap-025 rounded pe-1 ps-05 py-025 bg-gray-80 -my-1" };
 const _hoisted_6$d = { class: "ellipsis-1 word-break-all h-20 m-0 color-black txt16" };
@@ -16046,7 +16062,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
       const _directive_lightbox = resolveDirective("lightbox");
       return openBlock(), createElementBlock("div", _hoisted_1$G, [
         createElementVNode("label", null, toDisplayString(_ctx.label), 1),
-        _ctx.required && !storageFiles.value.length ? (openBlock(), createElementBlock("input", _hoisted_2$u)) : createCommentVNode("", true),
+        _ctx.required && !storageFiles.value.length ? (openBlock(), createElementBlock("input", _hoisted_2$v)) : createCommentVNode("", true),
         _ctx.theme === "basic" ? (openBlock(), createBlock(unref(_sfc_main$15), {
           key: 1,
           outline: "",
@@ -16068,7 +16084,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
                 key: file.id,
                 class: "txt-gray txt-12 flex"
               }, [
-                createElementVNode("div", _hoisted_3$p, [
+                createElementVNode("div", _hoisted_3$q, [
                   withDirectives(createVNode(unref(Btn), {
                     color: "gray",
                     thin: "",
@@ -16303,8 +16319,8 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
 });
 const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-50fd0597"]]);
 const _hoisted_1$F = ["title"];
-const _hoisted_2$t = { key: 0 };
-const _hoisted_3$o = ["value", "placeholder"];
+const _hoisted_2$u = { key: 0 };
+const _hoisted_3$p = ["value", "placeholder"];
 const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "JSONInput",
   props: {
@@ -16328,7 +16344,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$t, [
+        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$u, [
           createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : createCommentVNode("", true),
         createElementVNode("textarea", {
@@ -16336,18 +16352,18 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           class: normalizeClass({ "no-edit": !_ctx.editMode }),
           placeholder: _ctx.placeholder,
           onInput: handleInput
-        }, null, 42, _hoisted_3$o)
+        }, null, 42, _hoisted_3$p)
       ], 10, _hoisted_1$F);
     };
   }
 });
 const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-1cbaeab2"]]);
 const _hoisted_1$E = ["for"];
-const _hoisted_2$s = {
+const _hoisted_2$t = {
   key: 0,
   class: "block"
 };
-const _hoisted_3$n = ["id", "placeholder", "disabled", "required", "readonly", "pattern", "onKeydown"];
+const _hoisted_3$o = ["id", "placeholder", "disabled", "required", "readonly", "pattern", "onKeydown"];
 const _hoisted_4$f = {
   key: 1,
   class: "opacity-7 light"
@@ -16461,7 +16477,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
         }])
       }, [
         createElementVNode("div", { for: _ctx.id }, [
-          _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$s, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
+          _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$t, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
           createElementVNode("div", {
             class: normalizeClass(["gap-025", { "column flex": _ctx.layout === "vertical", "flex": _ctx.layout === "horizontal" }])
           }, [
@@ -16496,7 +16512,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
                 withKeys(withModifiers(increment, ["prevent"]), ["up"]),
                 withKeys(withModifiers(decrement, ["prevent"]), ["down"])
               ]
-            }, null, 42, _hoisted_3$n), [
+            }, null, 42, _hoisted_3$o), [
               [
                 vModelText,
                 unref(formattedValue),
@@ -16668,7 +16684,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
 });
 const OTP = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-ab0a46bf"]]);
 const _hoisted_1$C = { class: "relative passwordInput" };
-const _hoisted_2$r = { class: "m-password position-bottom-end flex column justify-content-center" };
+const _hoisted_2$s = { class: "m-password position-bottom-end flex column justify-content-center" };
 const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "PasswordInput",
   props: /* @__PURE__ */ mergeModels({
@@ -16718,7 +16734,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
           class: "mb-0",
           name: props2.name
         }), null, 16, ["modelValue", "type", "name"]),
-        createElementVNode("div", _hoisted_2$r, [
+        createElementVNode("div", _hoisted_2$s, [
           createVNode(unref(Btn), {
             flat: "",
             thin: "",
@@ -16732,8 +16748,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$B = ["for"];
-const _hoisted_2$q = ["id", "disabled", "name", "value", "required"];
-const _hoisted_3$m = { class: "flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025" };
+const _hoisted_2$r = ["id", "disabled", "name", "value", "required"];
+const _hoisted_3$n = { class: "flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025" };
 const _hoisted_4$e = ["src", "alt"];
 const _hoisted_5$e = { class: "" };
 const _hoisted_6$c = {
@@ -16805,10 +16821,10 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
               onFocus: handleFocus,
               onBlur: handleBlur,
               onChange: handleChange
-            }, null, 40, _hoisted_2$q), [
+            }, null, 40, _hoisted_2$r), [
               [vModelRadio, selectedOption.value]
             ]),
-            createElementVNode("div", _hoisted_3$m, [
+            createElementVNode("div", _hoisted_3$n, [
               opt.imgSrc ? (openBlock(), createElementBlock("img", {
                 key: 0,
                 class: "bg-popup shadow-light py-025 radius-05 m_w40",
@@ -16838,8 +16854,8 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
 });
 const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-adc49780"]]);
 const _hoisted_1$A = { class: "bagel-input" };
-const _hoisted_2$p = { class: "pb-025" };
-const _hoisted_3$l = { class: "flex gap-05 flex-wrap" };
+const _hoisted_2$q = { class: "pb-025" };
+const _hoisted_3$m = { class: "flex gap-05 flex-wrap" };
 const _hoisted_4$d = ["id", "name", "value", "checked"];
 const _hoisted_5$d = ["for"];
 const _sfc_main$H = /* @__PURE__ */ defineComponent({
@@ -16886,8 +16902,8 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$A, [
-        createElementVNode("label", _hoisted_2$p, toDisplayString(_ctx.label), 1),
-        createElementVNode("div", _hoisted_3$l, [
+        createElementVNode("label", _hoisted_2$q, toDisplayString(_ctx.label), 1),
+        createElementVNode("div", _hoisted_3$m, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option2, index2) => {
             return openBlock(), createElementBlock("div", {
               key: index2,
@@ -16913,11 +16929,11 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
 });
 const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-68b4cdd0"]]);
 const _hoisted_1$z = ["dir"];
-const _hoisted_2$o = {
+const _hoisted_2$p = {
   key: 0,
   class: "label"
 };
-const _hoisted_3$k = { class: "range-slider relative w-100" };
+const _hoisted_3$l = { class: "range-slider relative w-100" };
 const _hoisted_4$c = ["id", "value", "min", "max", "step", "required", "disabled", "aria-label"];
 const _hoisted_5$c = ["value", "min", "max", "step", "required", "disabled"];
 const _hoisted_6$b = { class: "track absolute pointer-events-none overflow-hidden round" };
@@ -16986,8 +17002,8 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         dir: _ctx.rtl ? "rtl" : "ltr"
       }, [
-        props2.label ? (openBlock(), createElementBlock("label", _hoisted_2$o, toDisplayString(props2.label), 1)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$k, [
+        props2.label ? (openBlock(), createElementBlock("label", _hoisted_2$p, toDisplayString(props2.label), 1)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_3$l, [
           createElementVNode("input", {
             id: _ctx.id,
             value: validFrom.value,
@@ -17149,8 +17165,8 @@ const toolbarOptions = [
   { name: "fullScreen", label: "Full Screen", icon: "fullscreen", class: "ms-auto" }
 ];
 const _hoisted_1$y = { class: "grid grid-wrap p-05" };
-const _hoisted_2$n = ["onMousemove", "onClick"];
-const _hoisted_3$j = { class: "txt-center txt-12 color-gray" };
+const _hoisted_2$o = ["onMousemove", "onClick"];
+const _hoisted_3$k = { class: "txt-center txt-12 color-gray" };
 const fb = 1;
 const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "gridBox",
@@ -17200,11 +17216,11 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
                   hoveredCol.value = col;
                 },
                 onClick: ($event) => emit2("select", `${row}x${col}`)
-              }, null, 42, _hoisted_2$n);
+              }, null, 42, _hoisted_2$o);
             }), 128))
           ], 32);
         }), 128)),
-        createElementVNode("p", _hoisted_3$j, toDisplayString(hoveredRow.value) + "x" + toDisplayString(hoveredCol.value), 1)
+        createElementVNode("p", _hoisted_3$k, toDisplayString(hoveredRow.value) + "x" + toDisplayString(hoveredCol.value), 1)
       ]);
     };
   }
@@ -18838,8 +18854,8 @@ function isNodeEmpty(node) {
   return brElements.length === 1 && node.childNodes.length <= 2;
 }
 const _hoisted_1$w = { class: "bagel-input" };
-const _hoisted_2$m = { class: "content-area radius-05" };
-const _hoisted_3$i = {
+const _hoisted_2$n = { class: "content-area radius-05" };
+const _hoisted_3$j = {
   key: 1,
   class: "flex"
 };
@@ -18978,7 +18994,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             class: normalizeClass(["editor-container", { "split-view": unref(editor).state.isSplitView }])
           }, [
-            createElementVNode("div", _hoisted_2$m, [
+            createElementVNode("div", _hoisted_2$n, [
               createElementVNode("iframe", {
                 id: "rich-text-iframe",
                 ref_key: "iframe",
@@ -19001,7 +19017,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
               height: unref(editor).state.isFullscreen ? "calc(100vh - 4rem)" : "250px"
             }, null, 8, ["modelValue", "height"])) : createCommentVNode("", true)
           ], 2),
-          _ctx.debug ? (openBlock(), createElementBlock("div", _hoisted_3$i, [
+          _ctx.debug ? (openBlock(), createElementBlock("div", _hoisted_3$j, [
             _cache[6] || (_cache[6] = createElementVNode("p", { class: "text12 txt-gray mb-0 p-0" }, " Debug ", -1)),
             createVNode(unref(Btn), {
               thin: "",
@@ -19047,8 +19063,8 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
 });
 const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-175a13f1"]]);
 const _hoisted_1$v = { key: 0 };
-const _hoisted_2$l = { class: "flex gap-05" };
-const _hoisted_3$h = ["disabled"];
+const _hoisted_2$m = { class: "flex gap-05" };
+const _hoisted_3$i = ["disabled"];
 const _hoisted_4$b = { key: 1 };
 const _hoisted_5$b = {
   key: 2,
@@ -19231,8 +19247,8 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
         trigger: withCtx(() => [
           createElementVNode("label", null, [
             createTextVNode(toDisplayString(_ctx.label) + " ", 1),
-            _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_1$v, "*")) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_2$l, [
+            _ctx.required && _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1$v, "*")) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_2$m, [
               _ctx.searchable && unref(open) ? (openBlock(), createBlock(unref(TextInput), {
                 key: 0,
                 ref_key: "searchInput",
@@ -19279,7 +19295,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                   key: 3,
                   thin: ""
                 }, { icon: unref(open) ? "unfold_less" : "unfold_more" }), null, 16)) : createCommentVNode("", true)
-              ], 42, _hoisted_3$h)),
+              ], 42, _hoisted_3$i)),
               _ctx.required ? (openBlock(), createElementBlock("input", {
                 key: 2,
                 tabindex: "-1",
@@ -19351,7 +19367,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-c16650b4"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-cced5e42"]]);
 /*!
  * Signature Pad v5.0.7 | https://github.com/szimek/signature_pad
  * (c) 2025 Szymon Nowak | Released under the MIT license
@@ -19949,7 +19965,7 @@ class SignaturePad extends SignatureEventTarget {
   }
 }
 const _hoisted_1$u = ["disabled"];
-const _hoisted_2$k = {
+const _hoisted_2$l = {
   key: 1,
   placeholder: "required",
   type: "text",
@@ -20153,7 +20169,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           class: "canvas",
           disabled: _ctx.disabled
         }, null, 8, _hoisted_1$u),
-        _ctx.required && unref(_isEmpty) ? (openBlock(), createElementBlock("input", _hoisted_2$k)) : createCommentVNode("", true)
+        _ctx.required && unref(_isEmpty) ? (openBlock(), createElementBlock("input", _hoisted_2$l)) : createCommentVNode("", true)
       ], 34);
     };
   }
@@ -22638,8 +22654,8 @@ const VueDraggableNext = defineComponent({
   }
 });
 const _hoisted_1$t = ["title"];
-const _hoisted_2$j = { class: "bagel-input" };
-const _hoisted_3$g = { class: "table-side-scroll" };
+const _hoisted_2$k = { class: "bagel-input" };
+const _hoisted_3$h = { class: "table-side-scroll" };
 const _hoisted_4$a = { class: "table-header" };
 const _hoisted_5$a = { class: "table-reorder" };
 const _hoisted_6$9 = { class: "table-action" };
@@ -22708,10 +22724,10 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
         class: "table-field-wrap",
         title: _ctx.description
       }, [
-        createElementVNode("div", _hoisted_2$j, [
+        createElementVNode("div", _hoisted_2$k, [
           createElementVNode("label", null, toDisplayString((_a = unref(fieldMeta)) == null ? void 0 : _a.label), 1)
         ]),
-        createElementVNode("div", _hoisted_3$g, [
+        createElementVNode("div", _hoisted_3$h, [
           createElementVNode("div", _hoisted_4$a, [
             (openBlock(true), createElementBlock(Fragment, null, renderList((_b = unref(entityMeta)) == null ? void 0 : _b.fields, (field) => {
               return openBlock(), createElementBlock("div", {
@@ -27273,8 +27289,8 @@ function parsePhoneNumber() {
   return withMetadataArgument(parsePhoneNumber$1, arguments);
 }
 const _hoisted_1$s = { key: 0 };
-const _hoisted_2$i = ["aria-expanded"];
-const _hoisted_3$f = { class: "flex gap-05 country-code-display" };
+const _hoisted_2$j = ["aria-expanded"];
+const _hoisted_3$g = { class: "flex gap-05 country-code-display" };
 const _hoisted_4$9 = { class: "p-075 tel-countryp-dropdown" };
 const _hoisted_5$9 = {
   class: "overflow-y p-0 max-h-300px",
@@ -27470,7 +27486,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
               onShow: focusSearchInput
             }, {
               trigger: withCtx(() => [
-                createElementVNode("span", _hoisted_3$f, [
+                createElementVNode("span", _hoisted_3$g, [
                   !disableDropdown.value ? (openBlock(), createBlock(unref(_sfc_main$v), {
                     key: 0,
                     icon: unref(open) ? "collapse_all" : "expand_all"
@@ -27542,7 +27558,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
                 { tel: true }
               ]
             ])
-          ], 8, _hoisted_2$i)
+          ], 8, _hoisted_2$j)
         ])
       ], 2);
     };
@@ -27550,8 +27566,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
 });
 const TelInput = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-24f599bf"]]);
 const _hoisted_1$r = ["title"];
-const _hoisted_2$h = ["for"];
-const _hoisted_3$e = { key: 0 };
+const _hoisted_2$i = ["for"];
+const _hoisted_3$f = { key: 0 };
 const _hoisted_4$8 = ["id", "name", "title", "autocomplete", "type", "placeholder", "disabled", "required", "pattern"];
 const _hoisted_5$8 = ["id", "name", "title", "type", "rows", "placeholder", "disabled", "required", "pattern"];
 const _hoisted_6$7 = {
@@ -27650,7 +27666,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("label", { for: _ctx.id }, [
           createTextVNode(toDisplayString(_ctx.label) + " ", 1),
-          _ctx.required && _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_3$e, "*")) : createCommentVNode("", true),
+          _ctx.required && _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_3$f, "*")) : createCommentVNode("", true),
           !_ctx.multiline && !_ctx.autoheight && !_ctx.code && inputRows.value < 2 ? withDirectives((openBlock(), createElementBlock("input", mergeProps({
             key: 1,
             id: _ctx.id,
@@ -27710,15 +27726,15 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
             key: 5,
             icon: _ctx.icon
           }, null, 8, ["icon"])) : createCommentVNode("", true)
-        ], 8, _hoisted_2$h)
+        ], 8, _hoisted_2$i)
       ], 10, _hoisted_1$r);
     };
   }
 });
 const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-84ff4b81"]]);
 const _hoisted_1$q = ["title"];
-const _hoisted_2$g = ["id", "required"];
-const _hoisted_3$d = ["for"];
+const _hoisted_2$h = ["id", "required"];
+const _hoisted_3$e = ["for"];
 const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "ToggleInput",
   props: /* @__PURE__ */ mergeModels({
@@ -27755,14 +27771,14 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => checked.value = $event),
           type: "checkbox",
           required: _ctx.required
-        }, null, 8, _hoisted_2$g), [
+        }, null, 8, _hoisted_2$h), [
           [vModelCheckbox, checked.value]
         ]),
         createElementVNode("label", { for: inputId.value }, [
           renderSlot(_ctx.$slots, "label", {}, () => [
             createTextVNode(toDisplayString(_ctx.label), 1)
           ], true)
-        ], 8, _hoisted_3$d)
+        ], 8, _hoisted_3$e)
       ], 10, _hoisted_1$q);
     };
   }
@@ -27899,8 +27915,8 @@ function useFileUpload(props2 = {}) {
   };
 }
 const _hoisted_1$p = { class: "bagel-input" };
-const _hoisted_2$f = { key: 0 };
-const _hoisted_3$c = {
+const _hoisted_2$g = { key: 0 };
+const _hoisted_3$d = {
   key: 1,
   placeholder: "required",
   type: "text",
@@ -28012,8 +28028,8 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       const _directive_tooltip = resolveDirective("tooltip");
       const _directive_lightbox = resolveDirective("lightbox");
       return openBlock(), createElementBlock("div", _hoisted_1$p, [
-        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$f, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
-        _ctx.required && !unref(pathKeys).length ? (openBlock(), createElementBlock("input", _hoisted_3$c)) : createCommentVNode("", true),
+        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$g, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
+        _ctx.required && !unref(pathKeys).length ? (openBlock(), createElementBlock("input", _hoisted_3$d)) : createCommentVNode("", true),
         _ctx.theme === "basic" ? (openBlock(), createBlock(unref(_sfc_main$15), {
           key: 2,
           outline: "",
@@ -32782,8 +32798,8 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$n = { key: 0 };
-const _hoisted_2$e = ["src", "alt", "width", "height"];
-const _hoisted_3$b = ["src", "alt", "width", "height"];
+const _hoisted_2$f = ["src", "alt", "width", "height"];
+const _hoisted_3$c = ["src", "alt", "width", "height"];
 const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "Image",
   props: {
@@ -32868,7 +32884,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
           alt: _ctx.alt,
           width: unref(normalizeDimension)(_ctx.width),
           height: unref(normalizeDimension)(_ctx.height)
-        }), null, 16, _hoisted_2$e)) : (openBlock(), createBlock(unref(Skeleton), {
+        }), null, 16, _hoisted_2$f)) : (openBlock(), createBlock(unref(Skeleton), {
           key: 1,
           class: "img-web-kit",
           width: unref(normalizeDimension)(_ctx.width),
@@ -32881,7 +32897,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         alt: _ctx.alt,
         width: unref(normalizeDimension)(_ctx.width),
         height: unref(normalizeDimension)(_ctx.height)
-      }), null, 16, _hoisted_3$b)) : unref(loadingError) ? (openBlock(), createElementBlock("div", {
+      }), null, 16, _hoisted_3$c)) : unref(loadingError) ? (openBlock(), createElementBlock("div", {
         key: 2,
         class: "flex-center error-image",
         style: normalizeStyle({
@@ -32901,11 +32917,11 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
 });
 const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-2f5e271c"]]);
 const _hoisted_1$m = ["textContent"];
-const _hoisted_2$d = {
+const _hoisted_2$e = {
   key: 0,
   class: "h-100p flex column justify-content-center"
 };
-const _hoisted_3$a = {
+const _hoisted_3$b = {
   key: 1,
   class: "loading-container"
 };
@@ -33073,7 +33089,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       const lowerSourceValue = String(sourceValue).toLowerCase().trim();
       const exactMatch = options.find((option2) => {
         const optionObj = typeof option2 === "object" && option2 !== null ? option2 : { label: String(option2) };
-        if (!optionObj || typeof optionObj.label !== "string") return false;
+        if (!optionObj) return false;
         const optionLabel = `${optionObj.label}`.toLowerCase().trim();
         return optionLabel === lowerSourceValue;
       });
@@ -33270,14 +33286,18 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       });
       if (fileHeaders.value.length > 0) {
         schemaFields.value.forEach((field) => {
+          const fieldIdCamel = formatString(field.id, "camel");
+          const fieldIdPascal = formatString(field.id, "pascal");
+          const fieldLabelCamel = formatString(field.label.replace(/\s+/g, "_"), "camel");
+          const fieldLabelPascal = formatString(field.label.replace(/\s+/g, "_"), "pascal");
           const exactMatch = fileHeaders.value.find(
-            (header) => header.toLowerCase() === field.id.toLowerCase() || header.toLowerCase() === field.label.toLowerCase()
+            (header) => header.toLowerCase() === field.id.toLowerCase() || header.toLowerCase() === field.label.toLowerCase() || header.toLowerCase() === fieldIdCamel.toLowerCase() || header.toLowerCase() === fieldIdPascal.toLowerCase() || header.toLowerCase() === fieldLabelCamel.toLowerCase() || header.toLowerCase() === fieldLabelPascal.toLowerCase() || formatString(header.replace(/\s+/g, "_"), "camel").toLowerCase() === fieldIdCamel.toLowerCase() || formatString(header.replace(/\s+/g, "_"), "camel").toLowerCase() === fieldLabelCamel.toLowerCase()
           );
           if (exactMatch && !field.disabled) {
             fieldMapping[field.id] = exactMatch;
           } else {
             const partialMatch = fileHeaders.value.find(
-              (header) => header.toLowerCase().includes(field.id.toLowerCase()) || header.toLowerCase().includes(field.label.toLowerCase())
+              (header) => header.toLowerCase().includes(field.id.toLowerCase()) || header.toLowerCase().includes(field.label.toLowerCase()) || header.toLowerCase().includes(fieldIdCamel.toLowerCase()) || header.toLowerCase().includes(fieldLabelCamel.toLowerCase()) || field.id.toLowerCase().includes(header.toLowerCase()) || field.label.toLowerCase().includes(header.toLowerCase())
             );
             if (partialMatch && !field.disabled) {
               fieldMapping[field.id] = partialMatch;
@@ -33518,9 +33538,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         updateFieldMapping(fieldId, target.value);
       }
     }
-    const { addFile, browse, fileQueue } = useFileUpload();
-    async function handleFilesUploaded() {
-      file.value = fileQueue.value[0].file;
+    async function handleFilesUploaded(files2) {
+      file.value = files2[0];
       if (!file.value) return;
       isLoading.value = true;
       try {
@@ -33531,7 +33550,6 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         isLoading.value = false;
       }
     }
-    watch(fileQueue.value, handleFilesUploaded);
     watchEffect(() => {
       if (selectedSheet.value) {
         loadSheetData();
@@ -33567,11 +33585,14 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       selectedRelationField.value = field;
       showRelatedDialog.value = true;
     }
-    async function processRelatedFile(fieldId, file2) {
-      if (!file2) return;
+    async function processRelatedFile(fieldId, files2) {
+      if (!files2) return;
+      const file2 = files2[0];
       relatedFiles[fieldId] = file2;
       try {
-        const { data: data2 } = await readSheetData(file2, "", true);
+        const sheets = await getSheetNames(file2);
+        const selectedSheet2 = sheets.length > 0 ? sheets[0] : "";
+        const { headers, data: data2 } = await readSheetData(file2, selectedSheet2, true);
         relatedFileData[fieldId] = data2;
         if (!relatedFileMappings[fieldId]) {
           relatedFileMappings[fieldId] = {};
@@ -33986,12 +34007,12 @@ ${unmatchedValues.length} values could not be automatically matched.`);
             class: "line-height-1 m-0 pb-2 txt-center",
             textContent: toDisplayString(props2.title || "Upload and Map Data")
           }, null, 8, _hoisted_1$m),
-          !file.value ? (openBlock(), createElementBlock("div", _hoisted_2$d, [
+          !file.value ? (openBlock(), createElementBlock("div", _hoisted_2$e, [
             createVNode(unref(DragOver), {
               accept: ".csv,.xls,.xlsx",
               class: "max-h300px w-500px",
-              onAddFiles: unref(addFile),
-              onClick: _cache[0] || (_cache[0] = ($event) => unref(browse)(false))
+              browse: "",
+              onAddFiles: handleFilesUploaded
             }, {
               default: withCtx(() => [
                 createVNode(unref(_sfc_main$15), { class: "flex flex-column items-center justify-center outline-dashed outline-3 bg-input hover h-100p justify-content-center txt-center" }, {
@@ -34000,17 +34021,17 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                       name: "upload",
                       size: "5"
                     }),
-                    _cache[30] || (_cache[30] = createElementVNode("p", null, "Drag and drop an Excel or CSV file here", -1)),
-                    _cache[31] || (_cache[31] = createElementVNode("u", null, "or click to select a file", -1)),
-                    _cache[32] || (_cache[32] = createElementVNode("p", { class: "txt-12 color-gray" }, " Accepts .xlsx, .xls, and .csv files ", -1))
+                    _cache[29] || (_cache[29] = createElementVNode("p", null, "Drag and drop an Excel or CSV file here", -1)),
+                    _cache[30] || (_cache[30] = createElementVNode("u", null, "or click to select a file", -1)),
+                    _cache[31] || (_cache[31] = createElementVNode("p", { class: "txt-12 color-gray" }, " Accepts .xlsx, .xls, and .csv files ", -1))
                   ]),
                   _: 1
                 })
               ]),
               _: 1
-            }, 8, ["onAddFiles"])
+            })
           ])) : createCommentVNode("", true),
-          isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_3$a, _cache[33] || (_cache[33] = [
+          isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_3$b, _cache[32] || (_cache[32] = [
             createElementVNode("div", { class: "spinner" }, null, -1),
             createElementVNode("p", null, "Processing your file...", -1)
           ]))) : createCommentVNode("", true),
@@ -34019,7 +34040,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
               withDirectives((openBlock(), createBlock(unref(Btn), {
                 class: "px-1",
                 color: "gray",
-                onClick: _cache[1] || (_cache[1] = ($event) => file.value = null)
+                onClick: _cache[0] || (_cache[0] = ($event) => file.value = null)
               }, {
                 default: withCtx(() => [
                   createVNode(unref(_sfc_main$v), {
@@ -34036,22 +34057,22 @@ ${unmatchedValues.length} values could not be automatically matched.`);
               sheetNames.value.length > 1 ? (openBlock(), createBlock(unref(SelectInput), {
                 key: 0,
                 modelValue: selectedSheet.value,
-                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => selectedSheet.value = $event),
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedSheet.value = $event),
                 options: sheetNames.value,
                 label: "Select Sheet"
               }, null, 8, ["modelValue", "options"])) : createCommentVNode("", true),
               createVNode(unref(CheckInput), {
                 modelValue: hasHeaders.value,
-                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => hasHeaders.value = $event),
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => hasHeaders.value = $event),
                 label: "Mark this if file has a header row",
                 class: "m-0",
                 style: { "--bgl-accent-color": "var(--bgl-black)", "--bgl-primary": "var(--bgl-black)" }
               }, null, 8, ["modelValue"])
             ])) : createCommentVNode("", true),
             file.value && !isLoading.value && fileHeaders.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_6$5, [
-              _cache[37] || (_cache[37] = createElementVNode("p", { class: "label pb-1 border-bottom mb-1" }, " Match each required field to a column from your file, set default values, or configure transformations ", -1)),
+              _cache[36] || (_cache[36] = createElementVNode("p", { class: "label pb-1 border-bottom mb-1" }, " Match each required field to a column from your file, set default values, or configure transformations ", -1)),
               createElementVNode("div", _hoisted_7$4, [
-                _cache[34] || (_cache[34] = createElementVNode("div", { class: "grid grid-wrap-5 gap-1 bold pb-1 m_none" }, [
+                _cache[33] || (_cache[33] = createElementVNode("div", { class: "grid grid-wrap-5 gap-1 bold pb-1 m_none" }, [
                   createElementVNode("p", null, "Schema Field"),
                   createElementVNode("p", null, "Column from File"),
                   createElementVNode("p", null, "Default Value"),
@@ -34086,6 +34107,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                         "onUpdate:modelValue": ($event) => fieldMapping[field.id] = $event,
                         icon: "table_chart",
                         options: fileHeaders.value,
+                        searchable: "",
                         required: isFieldRequired(field),
                         disabled: field.disabled,
                         onChange: ($event) => handleSelectChange($event, field.id)
@@ -34131,19 +34153,19 @@ ${unmatchedValues.length} values could not be automatically matched.`);
               ]),
               mappingComplete.value ? (openBlock(), createElementBlock("div", _hoisted_18, [
                 createVNode(unref(Btn), { onClick: showPreview }, {
-                  default: withCtx(() => _cache[35] || (_cache[35] = [
+                  default: withCtx(() => _cache[34] || (_cache[34] = [
                     createTextVNode(" Preview Data ")
                   ])),
                   _: 1
                 })
-              ])) : (openBlock(), createElementBlock("div", _hoisted_19, _cache[36] || (_cache[36] = [
+              ])) : (openBlock(), createElementBlock("div", _hoisted_19, _cache[35] || (_cache[35] = [
                 createElementVNode("div", { class: "mapping-incomplete-message" }, " Please map the required fields to continue ", -1)
               ])))
             ])) : createCommentVNode("", true)
           ]),
           createVNode(unref(_sfc_main$f), {
             visible: showTransformDialog.value,
-            "onUpdate:visible": _cache[11] || (_cache[11] = ($event) => showTransformDialog.value = $event),
+            "onUpdate:visible": _cache[10] || (_cache[10] = ($event) => showTransformDialog.value = $event),
             title: "Configure Transformations",
             width: "800"
           }, {
@@ -34151,18 +34173,18 @@ ${unmatchedValues.length} values could not be automatically matched.`);
               selectedTransformField.value ? (openBlock(), createElementBlock("div", _hoisted_20, [
                 createElementVNode("div", _hoisted_21, [
                   createElementVNode("p", null, [
-                    _cache[38] || (_cache[38] = createTextVNode("Create transformations for ")),
+                    _cache[37] || (_cache[37] = createTextVNode("Create transformations for ")),
                     createElementVNode("strong", null, toDisplayString(selectedTransformField.value.label), 1)
                   ]),
                   createVNode(unref(Btn), {
                     icon: "auto_awesome",
                     thin: "",
                     value: "Autodetect",
-                    onClick: _cache[4] || (_cache[4] = ($event) => autoPopulateTransformations(selectedTransformField.value.id))
+                    onClick: _cache[3] || (_cache[3] = ($event) => autoPopulateTransformations(selectedTransformField.value.id))
                   })
                 ]),
                 createElementVNode("div", null, [
-                  _cache[39] || (_cache[39] = createElementVNode("div", { class: "grid grid-wrap-7 gap-1 bold pb-05 m_none" }, [
+                  _cache[38] || (_cache[38] = createElementVNode("div", { class: "grid grid-wrap-7 gap-1 bold pb-05 m_none" }, [
                     createElementVNode("p", { class: "grid-span-2" }, " Source Value "),
                     createElementVNode("p", { class: "grid-span-4" }, " Target Value "),
                     createElementVNode("p", null, "Action")
@@ -34191,14 +34213,14 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                         fieldMapping[selectedTransformField.value.id] ? (openBlock(), createBlock(unref(SelectInput), {
                           key: 0,
                           modelValue: selectedSourceValue.value,
-                          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => selectedSourceValue.value = $event),
+                          "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => selectedSourceValue.value = $event),
                           searchable: "",
                           options: sourceValueOptions.value,
                           placeholder: "Select source value"
                         }, null, 8, ["modelValue", "options"])) : (openBlock(), createBlock(TextInput, {
                           key: 1,
                           modelValue: selectedSourceValue.value,
-                          "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => selectedSourceValue.value = $event),
+                          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => selectedSourceValue.value = $event),
                           type: "text",
                           placeholder: "Source value"
                         }, null, 8, ["modelValue"]))
@@ -34207,14 +34229,14 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                         selectedTransformField.value.options && selectedTransformField.value.options.length > 0 ? (openBlock(), createBlock(unref(SelectInput), {
                           key: 0,
                           modelValue: selectedTargetValue.value,
-                          "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => selectedTargetValue.value = $event),
+                          "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => selectedTargetValue.value = $event),
                           searchable: "",
                           options: selectedTransformField.value.options,
                           placeholder: "Select target value"
                         }, null, 8, ["modelValue", "options"])) : (openBlock(), createBlock(TextInput, {
                           key: 1,
                           modelValue: selectedTargetValue.value,
-                          "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => selectedTargetValue.value = $event),
+                          "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => selectedTargetValue.value = $event),
                           type: "text",
                           placeholder: "Target value"
                         }, null, 8, ["modelValue"]))
@@ -34224,7 +34246,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                         thin: "",
                         icon: "add",
                         color: "primary",
-                        onClick: _cache[9] || (_cache[9] = ($event) => addTransformation(selectedTransformField.value.id))
+                        onClick: _cache[8] || (_cache[8] = ($event) => addTransformation(selectedTransformField.value.id))
                       }, null, 512), [
                         [_directive_tooltip, "Add"]
                       ])
@@ -34235,7 +34257,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                   createVNode(unref(Btn), {
                     class: "ms-auto",
                     value: "Close",
-                    onClick: _cache[10] || (_cache[10] = ($event) => showTransformDialog.value = false)
+                    onClick: _cache[9] || (_cache[9] = ($event) => showTransformDialog.value = false)
                   })
                 ])
               ])) : createCommentVNode("", true)
@@ -34244,7 +34266,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
           }, 8, ["visible"]),
           createVNode(unref(_sfc_main$f), {
             visible: showRelatedDialog.value,
-            "onUpdate:visible": _cache[17] || (_cache[17] = ($event) => showRelatedDialog.value = $event),
+            "onUpdate:visible": _cache[16] || (_cache[16] = ($event) => showRelatedDialog.value = $event),
             title: "Configure Related Data",
             width: "900"
           }, {
@@ -34256,9 +34278,8 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                   !relatedFiles[selectedRelationField.value.id] ? (openBlock(), createElementBlock("div", _hoisted_30, [
                     createVNode(unref(DragOver), {
                       accept: ".csv,.xls,.xlsx",
-                      onAddFiles: _cache[12] || (_cache[12] = (files2) => {
-                        if (files2[0]) processRelatedFile(selectedRelationField.value.id, files2[0]);
-                      })
+                      browse: "",
+                      onAddFiles: _cache[11] || (_cache[11] = (files2) => processRelatedFile(selectedRelationField.value.id, files2))
                     }, {
                       default: withCtx(() => [
                         createVNode(unref(_sfc_main$15), { class: "flex flex-column items-center justify-center outline-dashed outline-3 hover bg-input" }, {
@@ -34267,9 +34288,9 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                               name: "upload",
                               size: "5"
                             }),
-                            _cache[40] || (_cache[40] = createElementVNode("p", null, "Drag and drop an Excel or CSV file here", -1)),
-                            _cache[41] || (_cache[41] = createElementVNode("p", null, "or click to select a file", -1)),
-                            _cache[42] || (_cache[42] = createElementVNode("p", { class: "txt-12 color-gray" }, " Accepts .xlsx, .xls, and .csv files ", -1))
+                            _cache[39] || (_cache[39] = createElementVNode("p", null, "Drag and drop an Excel or CSV file here", -1)),
+                            _cache[40] || (_cache[40] = createElementVNode("p", null, "or click to select a file", -1)),
+                            _cache[41] || (_cache[41] = createElementVNode("p", { class: "txt-12 color-gray" }, " Accepts .xlsx, .xls, and .csv files ", -1))
                           ]),
                           _: 1
                         })
@@ -34288,28 +34309,28 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                         thin: "",
                         round: "",
                         value: "Change File",
-                        onClick: _cache[13] || (_cache[13] = ($event) => relatedFiles[selectedRelationField.value.id] = null)
+                        onClick: _cache[12] || (_cache[12] = ($event) => relatedFiles[selectedRelationField.value.id] = null)
                       })
                     ]),
                     relatedFileData[selectedRelationField.value.id] ? (openBlock(), createElementBlock("div", _hoisted_33, [
-                      _cache[45] || (_cache[45] = createElementVNode("h4", null, "Configure Relationship", -1)),
+                      _cache[44] || (_cache[44] = createElementVNode("h4", null, "Configure Relationship", -1)),
                       createElementVNode("div", _hoisted_34, [
                         createVNode(unref(SelectInput), {
                           modelValue: parentKeyField[selectedRelationField.value.id],
-                          "onUpdate:modelValue": _cache[14] || (_cache[14] = ($event) => parentKeyField[selectedRelationField.value.id] = $event),
+                          "onUpdate:modelValue": _cache[13] || (_cache[13] = ($event) => parentKeyField[selectedRelationField.value.id] = $event),
                           options: fileHeaders.value,
                           label: "Source Key Field (from this file)"
                         }, null, 8, ["modelValue", "options"]),
                         createVNode(unref(SelectInput), {
                           modelValue: relatedKeyField[selectedRelationField.value.id],
-                          "onUpdate:modelValue": _cache[15] || (_cache[15] = ($event) => relatedKeyField[selectedRelationField.value.id] = $event),
+                          "onUpdate:modelValue": _cache[14] || (_cache[14] = ($event) => relatedKeyField[selectedRelationField.value.id] = $event),
                           options: Object.keys(relatedFileData[selectedRelationField.value.id][0] || {}),
                           label: "Related Key Field (from related file)"
                         }, null, 8, ["modelValue", "options"])
                       ]),
-                      _cache[46] || (_cache[46] = createElementVNode("h4", null, "Map Related Fields", -1)),
+                      _cache[45] || (_cache[45] = createElementVNode("h4", null, "Map Related Fields", -1)),
                       createElementVNode("table", null, [
-                        _cache[44] || (_cache[44] = createElementVNode("thead", null, [
+                        _cache[43] || (_cache[43] = createElementVNode("thead", null, [
                           createElementVNode("tr", null, [
                             createElementVNode("th", null, "Child Field"),
                             createElementVNode("th", null, "Related File Column"),
@@ -34354,7 +34375,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                                     icon: "transform",
                                     onClick: ($event) => openRelatedTransformDialog(selectedRelationField.value.id, schemaItem)
                                   }, {
-                                    default: withCtx(() => _cache[43] || (_cache[43] = [
+                                    default: withCtx(() => _cache[42] || (_cache[42] = [
                                       createTextVNode(" Transform ")
                                     ])),
                                     _: 2
@@ -34371,7 +34392,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                     createVNode(unref(Btn), {
                       class: "ms-auto",
                       value: "Close",
-                      onClick: _cache[16] || (_cache[16] = ($event) => showRelatedDialog.value = false)
+                      onClick: _cache[15] || (_cache[15] = ($event) => showRelatedDialog.value = false)
                     })
                   ])
                 ])) : createCommentVNode("", true)
@@ -34381,7 +34402,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
           }, 8, ["visible"]),
           createVNode(unref(_sfc_main$f), {
             visible: showPreviewModal.value,
-            "onUpdate:visible": _cache[21] || (_cache[21] = ($event) => showPreviewModal.value = $event),
+            "onUpdate:visible": _cache[20] || (_cache[20] = ($event) => showPreviewModal.value = $event),
             title: "Data Preview & Edit",
             width: "90vw"
           }, {
@@ -34389,7 +34410,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
               createElementVNode("div", null, [
                 createVNode(unref(_sfc_main$5), {
                   modelValue: previewData.value,
-                  "onUpdate:modelValue": _cache[18] || (_cache[18] = ($event) => previewData.value = $event),
+                  "onUpdate:modelValue": _cache[17] || (_cache[17] = ($event) => previewData.value = $event),
                   class: "popupPreviewSpreadsheet",
                   "column-config": spreadsheetColumns.value,
                   "allow-add-row": ""
@@ -34402,11 +34423,11 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                     flat: "",
                     thin: "",
                     value: "Cancel",
-                    onClick: _cache[19] || (_cache[19] = ($event) => showPreviewModal.value = false)
+                    onClick: _cache[18] || (_cache[18] = ($event) => showPreviewModal.value = false)
                   }),
                   createVNode(unref(Btn), {
                     value: "Import Data",
-                    onClick: _cache[20] || (_cache[20] = ($event) => processData())
+                    onClick: _cache[19] || (_cache[19] = ($event) => processData())
                   })
                 ])
               ])
@@ -34415,7 +34436,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
           }, 8, ["visible"]),
           createVNode(unref(_sfc_main$f), {
             visible: showRelatedTransformDialog.value,
-            "onUpdate:visible": _cache[29] || (_cache[29] = ($event) => showRelatedTransformDialog.value = $event),
+            "onUpdate:visible": _cache[28] || (_cache[28] = ($event) => showRelatedTransformDialog.value = $event),
             title: "Configure Related Transformations",
             width: "800"
           }, {
@@ -34424,7 +34445,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
               return [
                 selectedRelatedTransformField.value ? (openBlock(), createElementBlock("div", _hoisted_40, [
                   createElementVNode("p", null, [
-                    _cache[47] || (_cache[47] = createTextVNode("Create transformations for ")),
+                    _cache[46] || (_cache[46] = createTextVNode("Create transformations for ")),
                     createElementVNode("strong", null, toDisplayString(selectedRelatedTransformField.value.field.label), 1),
                     createTextVNode(" in " + toDisplayString((_a = selectedRelationField.value) == null ? void 0 : _a.label), 1)
                   ]),
@@ -34435,7 +34456,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                         icon: "auto_awesome",
                         value: "Autolink",
                         color: "primary",
-                        onClick: _cache[22] || (_cache[22] = ($event) => autoPopulateRelatedTransformations(
+                        onClick: _cache[21] || (_cache[21] = ($event) => autoPopulateRelatedTransformations(
                           selectedRelatedTransformField.value.parentId,
                           selectedRelatedTransformField.value.field.id
                         ))
@@ -34444,7 +34465,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                   ]),
                   createElementVNode("div", null, [
                     createElementVNode("table", null, [
-                      _cache[48] || (_cache[48] = createElementVNode("thead", null, [
+                      _cache[47] || (_cache[47] = createElementVNode("thead", null, [
                         createElementVNode("tr", null, [
                           createElementVNode("th", null, "Source Value"),
                           createElementVNode("th", null, "Target Value"),
@@ -34477,13 +34498,13 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                             ((_c = relatedFileMappings[selectedRelatedTransformField.value.parentId]) == null ? void 0 : _c[selectedRelatedTransformField.value.field.id]) ? (openBlock(), createBlock(unref(SelectInput), {
                               key: 0,
                               modelValue: selectedRelatedSourceValue.value,
-                              "onUpdate:modelValue": _cache[23] || (_cache[23] = ($event) => selectedRelatedSourceValue.value = $event),
+                              "onUpdate:modelValue": _cache[22] || (_cache[22] = ($event) => selectedRelatedSourceValue.value = $event),
                               searchable: "",
                               options: relatedSourceValueOptions.value,
                               placeholder: "Select source value"
                             }, null, 8, ["modelValue", "options"])) : withDirectives((openBlock(), createElementBlock("input", {
                               key: 1,
-                              "onUpdate:modelValue": _cache[24] || (_cache[24] = ($event) => selectedRelatedSourceValue.value = $event),
+                              "onUpdate:modelValue": _cache[23] || (_cache[23] = ($event) => selectedRelatedSourceValue.value = $event),
                               type: "text",
                               placeholder: "Source value"
                             }, null, 512)), [
@@ -34494,13 +34515,13 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                             selectedRelatedTransformField.value.field.options && selectedRelatedTransformField.value.field.options.length > 0 ? (openBlock(), createBlock(unref(SelectInput), {
                               key: 0,
                               modelValue: selectedRelatedTargetValue.value,
-                              "onUpdate:modelValue": _cache[25] || (_cache[25] = ($event) => selectedRelatedTargetValue.value = $event),
+                              "onUpdate:modelValue": _cache[24] || (_cache[24] = ($event) => selectedRelatedTargetValue.value = $event),
                               searchable: "",
                               options: selectedRelatedTransformField.value.field.options,
                               placeholder: "Select target value"
                             }, null, 8, ["modelValue", "options"])) : withDirectives((openBlock(), createElementBlock("input", {
                               key: 1,
-                              "onUpdate:modelValue": _cache[26] || (_cache[26] = ($event) => selectedRelatedTargetValue.value = $event),
+                              "onUpdate:modelValue": _cache[25] || (_cache[25] = ($event) => selectedRelatedTargetValue.value = $event),
                               type: "text",
                               placeholder: "Target value"
                             }, null, 512)), [
@@ -34512,7 +34533,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                               thin: "",
                               icon: "add",
                               color: "primary",
-                              onClick: _cache[27] || (_cache[27] = ($event) => addRelatedTransformation(
+                              onClick: _cache[26] || (_cache[26] = ($event) => addRelatedTransformation(
                                 selectedRelatedTransformField.value.parentId,
                                 selectedRelatedTransformField.value.field.id
                               ))
@@ -34526,9 +34547,9 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                   ]),
                   createElementVNode("div", null, [
                     createVNode(unref(Btn), {
-                      onClick: _cache[28] || (_cache[28] = ($event) => showRelatedTransformDialog.value = false)
+                      onClick: _cache[27] || (_cache[27] = ($event) => showRelatedTransformDialog.value = false)
                     }, {
-                      default: withCtx(() => _cache[49] || (_cache[49] = [
+                      default: withCtx(() => _cache[48] || (_cache[48] = [
                         createTextVNode(" Close ")
                       ])),
                       _: 1
@@ -34739,8 +34760,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
 });
 const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-8788ed73"]]);
 const _hoisted_1$j = { class: "bgl_card tabs-top" };
-const _hoisted_2$c = { class: "tabs grid auto-flow-columns fit-content" };
-const _hoisted_3$9 = ["onClick"];
+const _hoisted_2$d = { class: "tabs grid auto-flow-columns fit-content" };
+const _hoisted_3$a = ["onClick"];
 const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "TabbedLayout",
   props: {
@@ -34776,7 +34797,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("div", _hoisted_1$j, [
           renderSlot(_ctx.$slots, "top-section", {}, void 0, true),
-          createElementVNode("div", _hoisted_2$c, [
+          createElementVNode("div", _hoisted_2$d, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabs, (tab) => {
               var _a;
               return openBlock(), createElementBlock("div", {
@@ -34785,7 +34806,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                   active: tab === unref(activeTab) || tab === ((_a = _ctx.router) == null ? void 0 : _a.currentRoute.value.path.split("/").slice(-1)[0])
                 }, "tab"]),
                 onClick: ($event) => changeTab(tab)
-              }, toDisplayString(tab), 11, _hoisted_3$9);
+              }, toDisplayString(tab), 11, _hoisted_3$a);
             }), 128))
           ])
         ]),
@@ -34980,11 +35001,11 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
 });
 const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-6ece2018"]]);
 const _hoisted_1$g = { class: "txt-start" };
-const _hoisted_2$b = {
+const _hoisted_2$c = {
   key: 0,
   class: "txt10 m-0 p-0 txt-gray ellipsis"
 };
-const _hoisted_3$8 = { class: "m-0 p-0 ellipsis-1 line-height-14 pb-025" };
+const _hoisted_3$9 = { class: "m-0 p-0 ellipsis-1 line-height-14 pb-025" };
 const _hoisted_4$5 = {
   key: 1,
   class: "txt12 m-0 p-0 opacity-7 ellipsis-1"
@@ -35059,11 +35080,11 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             icon: _ctx.icon
           }, null, 8, ["icon"])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_1$g, [
-            _ctx.lead ? (openBlock(), createElementBlock("p", _hoisted_2$b, [
+            _ctx.lead ? (openBlock(), createElementBlock("p", _hoisted_2$c, [
               createTextVNode(toDisplayString(_ctx.lead) + " ", 1),
               renderSlot(_ctx.$slots, "lead")
             ])) : createCommentVNode("", true),
-            createElementVNode("p", _hoisted_3$8, [
+            createElementVNode("p", _hoisted_3$9, [
               createTextVNode(toDisplayString(_ctx.title) + " ", 1),
               renderSlot(_ctx.$slots, "default")
             ]),
@@ -35095,20 +35116,22 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
 });
 const _sfc_main$i = {};
 const _hoisted_1$f = { class: "list-wrap bgl_card thin grid overflow-hidden pt-0 pb-05 px-0 m_pb-0" };
-const _hoisted_2$a = { class: "p-0" };
-const _hoisted_3$7 = { class: "list-content auto-flow-rows align-items-start overflow-y h-100" };
+const _hoisted_2$b = { class: "p-0" };
+const _hoisted_3$8 = { class: "list-content auto-flow-rows align-items-start overflow-y h-100" };
 function _sfc_render$3(_ctx, _cache) {
   return openBlock(), createElementBlock("div", _hoisted_1$f, [
-    createElementVNode("div", _hoisted_2$a, [
+    createElementVNode("div", _hoisted_2$b, [
       renderSlot(_ctx.$slots, "header")
     ]),
-    createElementVNode("div", _hoisted_3$7, [
+    createElementVNode("div", _hoisted_3$8, [
       renderSlot(_ctx.$slots, "default")
     ])
   ]);
 }
 const ListView = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$3]]);
-const _hoisted_1$e = { class: "flex-center" };
+const _hoisted_1$e = ["width", "height"];
+const _hoisted_2$a = ["r", "stroke", "stroke-width"];
+const _hoisted_3$7 = ["r", "stroke", "stroke-width", "stroke-dasharray"];
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "Loading",
   props: {
@@ -35116,7 +35139,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     thickness: {},
     duration: { default: 1.2 },
     type: { default: "ring" },
-    color: {}
+    color: {},
+    progress: {}
   },
   setup(__props) {
     const theme = toRef(__props, "type");
@@ -35130,8 +35154,18 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       const borderValue = __props.thickness ?? Math.max(Number.parseInt(computedSize.value) / 9, 2);
       return standardSize(borderValue);
     });
+    const svgStrokeWidth = computed(() => {
+      const borderNumeric = Number.parseFloat(computedBorder.value);
+      const sizeNumeric = Number.parseFloat(computedSize.value);
+      return Math.round(borderNumeric / sizeNumeric * 100) * 0.9;
+    });
+    const svgRadius = computed(() => 50 - svgStrokeWidth.value / 2);
+    const svgCircumference = computed(() => Math.PI * 2 * svgRadius.value);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["flex-center", { progress: _ctx.progress !== void 0 }]),
+        style: normalizeStyle({ "--progress": _ctx.progress })
+      }, [
         theme.value === "bar" ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: "lds-bar",
@@ -35154,7 +35188,33 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           class: "lds-ring",
           style: normalizeStyle({ "--size": computedSize.value, "--thickness": computedBorder.value })
         }, [
-          (openBlock(), createElementBlock(Fragment, null, renderList(4, (n2) => {
+          _ctx.progress !== void 0 ? (openBlock(), createElementBlock("svg", {
+            key: 0,
+            width: computedSize.value,
+            height: computedSize.value,
+            viewBox: "0 0 100 100"
+          }, [
+            createElementVNode("circle", {
+              cx: "50",
+              cy: "50",
+              r: svgRadius.value,
+              fill: "none",
+              stroke: _ctx.color || "currentColor",
+              "stroke-width": svgStrokeWidth.value,
+              "stroke-opacity": "0.2"
+            }, null, 8, _hoisted_2$a),
+            createElementVNode("circle", {
+              cx: "50",
+              cy: "50",
+              r: svgRadius.value,
+              fill: "none",
+              stroke: _ctx.color || "currentColor",
+              "stroke-width": svgStrokeWidth.value,
+              "stroke-linecap": "round",
+              "stroke-dasharray": `${_ctx.progress / 100 * svgCircumference.value} ${svgCircumference.value}`,
+              transform: "rotate(-90 50 50)"
+            }, null, 8, _hoisted_3$7)
+          ], 8, _hoisted_1$e)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, renderList(4, (n2) => {
             return createElementVNode("div", {
               key: n2,
               style: normalizeStyle({
@@ -35169,11 +35229,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             }, null, 4);
           }), 64))
         ], 4)) : createCommentVNode("", true)
-      ]);
+      ], 6);
     };
   }
 });
-const Loading = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-2d349a92"]]);
+const Loading = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-71d082b4"]]);
 const _hoisted_1$d = ["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";
@@ -35287,13 +35347,13 @@ const _hoisted_3$6 = {
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "Modal",
   props: {
-    thin: { type: Boolean },
-    side: { type: Boolean },
+    thin: { type: Boolean, default: false },
+    side: { type: Boolean, default: false },
     title: {},
     width: {},
-    dismissable: { type: Boolean },
+    dismissable: { type: Boolean, default: true },
     actions: {},
-    visible: { type: Boolean }
+    visible: { type: Boolean, default: false }
   },
   emits: ["update:visible"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -35353,28 +35413,30 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             return [
               unref(slots).toolbar || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1$c, [
                 renderSlot(_ctx.$slots, "toolbar"),
-                createVNode(unref(Btn), {
+                _ctx.dismissable ? (openBlock(), createBlock(unref(Btn), {
+                  key: 0,
                   style: normalizeStyle({ float: _ctx.side ? "left" : "right" }),
                   flat: "",
                   icon: "close",
                   thin: "",
                   onClick: closeModal
-                }, null, 8, ["style"]),
+                }, null, 8, ["style"])) : createCommentVNode("", true),
                 _ctx.title ? (openBlock(), createBlock(unref(_sfc_main$4), {
-                  key: 0,
+                  key: 1,
                   class: "modal-title",
                   tag: "h3",
                   label: _ctx.title
                 }, null, 8, ["label"])) : createCommentVNode("", true)
               ])) : (openBlock(), createElementBlock("div", _hoisted_2$9, [
-                createVNode(unref(Btn), {
+                _ctx.dismissable ? (openBlock(), createBlock(unref(Btn), {
+                  key: 0,
                   class: "position-start",
                   icon: "close",
                   thin: "",
                   round: "",
                   color: "white",
                   onClick: closeModal
-                })
+                })) : createCommentVNode("", true)
               ])),
               renderSlot(_ctx.$slots, "default"),
               unref(slots).footer || ((_a = _ctx.actions) == null ? void 0 : _a.length) ? (openBlock(), createElementBlock("footer", _hoisted_3$6, [