@bagelink/vue 0.0.819 → 0.0.823

package/dist/index.cjs

@@ -40,7 +40,7 @@ const bagelFormUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defi
     return txtField;
   }
 }, Symbol.toStringTag, { value: "Module" }));
-const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
   __name: "Accordion",
   setup(__props) {
     const state2 = vue.reactive({
@@ -54,10 +54,10 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$M = ["aria-expanded", "aria-controls"];
+const _hoisted_1$N = ["aria-expanded", "aria-controls"];
 const _hoisted_2$w = { class: "accordion-label" };
 const _hoisted_3$m = ["id", "aria-hidden"];
-const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
   __name: "AccordionItem",
   props: {
     label: {},
@@ -133,7 +133,7 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
           }, [
             vue.createVNode(vue.unref(_sfc_main$c), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : vue.createCommentVNode("", true)
-        ], 8, _hoisted_1$M),
+        ], 8, _hoisted_1$N),
         vue.createVNode(vue.Transition, { name: "expand" }, {
           default: vue.withCtx(() => [
             vue.unref(isOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -158,9 +158,9 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-9d8335fa"]]);
-const _hoisted_1$L = { class: "relative" };
-const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
+const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-9d8335fa"]]);
+const _hoisted_1$M = { class: "relative" };
+const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
   __name: "AddressSearch",
   emits: ["addressSelected"],
   setup(__props, { emit: __emit }) {
@@ -182,8 +182,8 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
       (_a2 = suggestion.value) == null ? void 0 : _a2.show();
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$L, [
-        vue.createVNode(vue.unref(_sfc_main$M), {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$M, [
+        vue.createVNode(vue.unref(_sfc_main$N), {
           ref_key: "suggestion",
           ref: suggestion,
           noAutoFocus: true,
@@ -218,7 +218,7 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$K = {
+const _hoisted_1$L = {
   key: 0,
   class: "loading"
 };
@@ -226,7 +226,7 @@ const _hoisted_2$v = {
   key: 1,
   class: "bgl_btn-flex"
 };
-const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
   __name: "Btn",
   props: {
     disabled: { type: Boolean, default: false },
@@ -321,7 +321,7 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
         onClick: vue.withModifiers(_ctx.onClick, ["stop"])
       }, {
         default: vue.withCtx(() => [
-          _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$K)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$v, [
+          _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$L)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$v, [
             _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
               key: 0,
               icon: _ctx.icon
@@ -341,10 +341,10 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-c00fb1b9"]]);
-const _hoisted_1$J = ["dismissable"];
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-c00fb1b9"]]);
+const _hoisted_1$K = ["dismissable"];
 const _hoisted_2$u = { class: "m-0" };
-const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
   __name: "Alert",
   props: {
     message: {},
@@ -380,13 +380,13 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
           icon: "close",
           onClick: _cache[0] || (_cache[0] = ($event) => isDismissed.value = true)
         })
-      ], 10, _hoisted_1$J)) : vue.createCommentVNode("", true);
+      ], 10, _hoisted_1$K)) : vue.createCommentVNode("", true);
     };
   }
 });
-const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-57141c32"]]);
-const _hoisted_1$I = ["src", "alt"];
-const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
+const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-57141c32"]]);
+const _hoisted_1$J = ["src", "alt"];
+const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
   __name: "Avatar",
   props: {
     fallback: {},
@@ -404,7 +404,7 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
           key: 0,
           src: _ctx.src,
           alt: _ctx.name
-        }, null, 8, _hoisted_1$I)) : (vue.openBlock(), vue.createElementBlock("p", {
+        }, null, 8, _hoisted_1$J)) : (vue.openBlock(), vue.createElementBlock("p", {
           key: 1,
           style: vue.normalizeStyle({ "line-height": `${_ctx.size}px`, "font-size": `calc(1.5rem * ${_ctx.size} / 50)` })
         }, vue.toDisplayString((_ctx.fallback || vue.unref(initials)(_ctx.name || "")).toUpperCase()), 5))
@@ -412,8 +412,8 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-46ad8c25"]]);
-const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
+const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-46ad8c25"]]);
+const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
   __name: "Badge",
   props: {
     color: {},
@@ -444,10 +444,10 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-1b4c8cfe"]]);
-const _hoisted_1$H = ["src"];
+const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-1b4c8cfe"]]);
+const _hoisted_1$I = ["src"];
 const _hoisted_2$t = ["src", "autoplay", "muted", "loop", "controls"];
-const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
   __name: "BglVideo",
   props: {
     src: {},
@@ -501,7 +501,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
           allowfullscreen: "",
           title: "Video",
           allow: "autoplay"
-        }, null, 12, _hoisted_1$H)) : _ctx.src ? (vue.openBlock(), vue.createElementBlock("video", {
+        }, null, 12, _hoisted_1$I)) : _ctx.src ? (vue.openBlock(), vue.createElementBlock("video", {
           key: 1,
           src: _ctx.src,
           autoplay: _ctx.autoplay,
@@ -515,12 +515,12 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-30c80244"]]);
-const _hoisted_1$G = {
+const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-30c80244"]]);
+const _hoisted_1$H = {
   key: 0,
   class: "card_label"
 };
-const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
   __name: "Card",
   props: {
     label: {},
@@ -548,7 +548,7 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
         }])
       }, {
         default: vue.withCtx(() => [
-          _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$G, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
+          _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$H, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
@@ -556,12 +556,12 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$F = {
+const _hoisted_1$G = {
   key: 0,
   class: "blocker"
 };
 const _hoisted_2$s = { class: "Handlers" };
-const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
   __name: "Carousel",
   props: {
     autoHeight: {
@@ -590,6 +590,7 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     const props2 = __props;
     const emit2 = __emit;
     const bglSlider = vue.ref();
+    let itemCount = vue.ref(props2.items);
     let activeSlideIndex = vue.ref(0);
     let isDragging = vue.ref(false);
     let startX = vue.ref(0);
@@ -614,6 +615,7 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     }
     function scrollEase(target, duration = 500) {
       if (!bglSlider.value) return;
+      if (isPressed.value) return;
       const start2 = bglSlider.value.scrollLeft;
       const change = target - start2;
       const startTime = performance.now();
@@ -654,16 +656,26 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
         emit2("update:index", activeSlideIndex.value);
       }
     );
+    function goToSlideScrollEnd() {
+      if (!bglSlider.value) return;
+      const isDragForward = startX.value > bglSlider.value.offsetLeft;
+      if (itemCount.value === 1) {
+        if (isDragForward) activeSlideIndex.value = Math.ceil(bglSlider.value.scrollLeft / bglSlider.value.offsetWidth);
+        else activeSlideIndex.value = Math.floor(bglSlider.value.scrollLeft / bglSlider.value.offsetWidth);
+      } else {
+        activeSlideIndex.value = Math.round(bglSlider.value.scrollLeft / bglSlider.value.offsetWidth);
+      }
+      startX.value = 0;
+      const nextSlide = Math.round(bglSlider.value.scrollLeft / bglSlider.value.offsetWidth);
+      goToSlide(nextSlide);
+    }
+    let timeout = null;
+    function scrollEnd() {
+      if (timeout) clearTimeout(timeout);
+      timeout = setTimeout(goToSlideScrollEnd, 400);
+    }
     function stopDragging(e) {
       isPressed.value = false;
-      const slider = bglSlider.value;
-      if (!slider) return;
-      const isDragForward = startX.value > e.pageX + slider.offsetLeft;
-      if (isDragForward)
-        activeSlideIndex.value = Math.ceil(slider.scrollLeft / slider.offsetWidth);
-      else activeSlideIndex.value = Math.floor(slider.scrollLeft / slider.offsetWidth);
-      if (props2.items === 1) goToSlide(activeSlideIndex.value);
-      startX.value = 0;
       document.removeEventListener("mousemove", move);
       document.removeEventListener("mouseup", stopDragging);
       document.removeEventListener("dragend", stopDragging);
@@ -685,7 +697,6 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
       isPressed.value = true;
       document.addEventListener("mousemove", move);
       document.addEventListener("mouseup", stopDragging);
-      document.addEventListener("dragend", stopDragging);
     }
     function next() {
       if (!bglSlider.value) return;
@@ -702,11 +713,17 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     }
     function evalWidth() {
       if (!bglSlider.value) return;
+      if (window.innerWidth < 600) itemCount.value = 1;
+      else if (window.innerWidth < 991) itemCount.value = Math.min(props2.items, 2);
+      else if (window.innerWidth < 1280) itemCount.value = Math.min(props2.items, 3);
+      else itemCount.value = props2.items;
+      console.log(itemCount.value, window.innerWidth);
       goToSlide(activeSlideIndex.value);
     }
     vue.onMounted(() => {
       window.addEventListener("resize", evalWidth);
       evalHeight();
+      evalWidth();
       disableDrag();
     });
     vue.onUnmounted(() => {
@@ -723,14 +740,19 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
           class: vue.normalizeClass([{
             dragging: vue.unref(isDragging),
             clicking: vue.unref(isPressed),
-            [`slides-${__props.items}`]: true,
-            allowScroll: __props.allowScroll
+            allowScroll: __props.allowScroll,
+            odd: vue.unref(itemCount) % 2 !== 0,
+            [`slides-${vue.unref(itemCount)}`]: vue.unref(itemCount) === 1
           }, "bgl-slider"]),
+          style: vue.normalizeStyle({
+            "--item-count": vue.unref(itemCount)
+          }),
+          onScroll: scrollEnd,
           onMousedown: startDragging
         }, [
-          vue.unref(isDragging) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$F)) : vue.createCommentVNode("", true),
+          vue.unref(isDragging) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$G)) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
-        ], 34),
+        ], 38),
         vue.createElementVNode("div", _hoisted_2$s, [
           vue.createElementVNode("span", { onClick: prev }, [
             vue.renderSlot(_ctx.$slots, "prev", {
@@ -749,7 +771,7 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-619a1cb2"]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-e588f5a7"]]);
 function _isPlaceholder(a2) {
   return a2 != null && typeof a2 === "object" && a2["@@functional/placeholder"] === true;
 }
@@ -6690,13 +6712,13 @@ var script = vue.defineComponent({
     return { bar, canvas, direction, mouse };
   }
 });
-const _hoisted_1$E = {
+const _hoisted_1$F = {
   key: 0,
   class: "layer-hover-bar"
 };
 const _hoisted_2$r = ["x", "y", "width", "height"];
 function render$e(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.mouse.hover ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_1$E, [
+  return _ctx.mouse.hover ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_1$F, [
     vue.createElementVNode("rect", vue.mergeProps({ class: "hover-bar" }, _ctx.barStyle, {
       x: _ctx.bar.x,
       y: _ctx.bar.y,
@@ -6708,7 +6730,7 @@ function render$e(_ctx, _cache, $props, $setup, $data, $options) {
 script.render = render$e;
 script.__file = "src/components/HoverBar/index.vue";
 const BRAND_COLOR = "var(--bgl-primary)";
-const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
   __name: "Lineart",
   props: {
     data: {},
@@ -6848,7 +6870,7 @@ const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$D = {
+const _hoisted_1$E = {
   key: 0,
   class: "data"
 };
@@ -6869,7 +6891,7 @@ const _hoisted_9$3 = {
   key: 0,
   class: "m-0"
 };
-const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
   __name: "DataPreview",
   props: /* @__PURE__ */ vue.mergeModels({
     showFields: {},
@@ -6905,7 +6927,7 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     const computedSchema = vue.computed(() => getFallbackSchema([itemData.value], props2.showFields));
     return (_ctx, _cache) => {
       var _a2;
-      return __props.data ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, [
+      return __props.data ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [
         _ctx.title ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$3), {
           key: 0,
           label: _ctx.title
@@ -6918,7 +6940,7 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
               vue.createElementVNode("div", _hoisted_3$k, [
                 vue.createElementVNode("p", _hoisted_4$e, vue.toDisplayString((field == null ? void 0 : field.label) || vue.unref(keyToLabel)(field.id)), 1)
               ]),
-              vue.createVNode(vue.unref(_sfc_main$K), {
+              vue.createVNode(vue.unref(_sfc_main$L), {
                 modelValue: itemData.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => itemData.value = $event),
                 label: "",
@@ -6947,7 +6969,7 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-6c27f163"]]);
+const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-6c27f163"]]);
 const sides = ["top", "right", "bottom", "left"];
 const alignments = ["start", "end"];
 const placements$1 = /* @__PURE__ */ sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
@@ -9489,7 +9511,7 @@ const Gt$1 = {
   install: Ct$1,
   options: h
 };
-const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
   __name: "Dropdown",
   props: {
     value: {},
@@ -9546,7 +9568,7 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
   __name: "Flag",
   props: {
     country: {},
@@ -9576,8 +9598,8 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Flag = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-f99f1900"]]);
-const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
+const Flag = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-f99f1900"]]);
+const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
   __name: "BglField",
   props: {
     field: {},
@@ -9597,9 +9619,9 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
       if (props2.field.$el === "select") return SelectInput;
       if (props2.field.$el === "toggle") return ToggleInput;
       if (props2.field.$el === "check") return CheckInput;
-      if (props2.field.$el === "richtext") return _sfc_main$v;
+      if (props2.field.$el === "richtext") return _sfc_main$w;
       if (props2.field.$el === "file") return $el;
-      if (props2.field.$el === "date") return _sfc_main$E;
+      if (props2.field.$el === "date") return _sfc_main$F;
       return props2.field.$el ?? "div";
     });
     const formData = vue.computed({
@@ -9684,7 +9706,7 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
   __name: "BglForm",
   props: {
     label: {},
@@ -9782,7 +9804,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
             label: _ctx.label
           }, null, 8, ["label"])) : vue.createCommentVNode("", true),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(computedSchema.value, (field, i2) => {
-            return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$K), {
+            return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$L), {
               key: field.id || `${i2}p`,
               modelValue: vue.unref(data2),
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(data2) ? data2.value = $event : data2 = $event),
@@ -9806,7 +9828,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
             label: _ctx.label
           }, null, 8, ["label"])) : vue.createCommentVNode("", true),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(computedSchema.value, (field, i2) => {
-            return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$K), {
+            return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$L), {
               key: field.id || `${i2}p`,
               modelValue: vue.unref(data2),
               "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(data2) ? data2.value = $event : data2 = $event),
@@ -9825,8 +9847,8 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$C = { key: 0 };
-const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$D = { key: 0 };
+const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
   __name: "BglMultiStepForm",
   props: /* @__PURE__ */ vue.mergeModels({
     bagelFormProps: { default: () => ({}) },
@@ -9893,8 +9915,8 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
           mode: "out-in"
         }, {
           default: vue.withCtx(() => [
-            !vue.unref(isStepping) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
-              vue.createVNode(vue.unref(_sfc_main$J), vue.mergeProps({
+            !vue.unref(isStepping) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, [
+              vue.createVNode(vue.unref(_sfc_main$K), vue.mergeProps({
                 ref_key: "formRef",
                 ref: formRef,
                 modelValue: formData.value,
@@ -9933,8 +9955,8 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$B = { class: "primary-checkbox" };
-const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$C = { class: "primary-checkbox" };
+const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
   __name: "Checkbox",
   props: {
     "modelValue": { type: Boolean, ...{ default: false } },
@@ -9944,7 +9966,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const val = vue.useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("label", _hoisted_1$B, [
+      return vue.openBlock(), vue.createElementBlock("label", _hoisted_1$C, [
         vue.renderSlot(_ctx.$slots, "label", {}, void 0, true),
         vue.withDirectives(vue.createElementVNode("input", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => val.value = $event),
@@ -9956,11 +9978,11 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-73f1d9ad"]]);
-const _hoisted_1$A = ["title"];
+const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-73f1d9ad"]]);
+const _hoisted_1$B = ["title"];
 const _hoisted_2$p = ["id", "value", "required"];
 const _hoisted_3$j = ["for"];
-const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
   __name: "CheckInput",
   props: /* @__PURE__ */ vue.mergeModels({
     label: {},
@@ -10002,14 +10024,14 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
             vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
           ], true)
         ], 8, _hoisted_3$j)
-      ], 10, _hoisted_1$A);
+      ], 10, _hoisted_1$B);
     };
   }
 });
-const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-03ed2982"]]);
-const _hoisted_1$z = ["title"];
+const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-03ed2982"]]);
+const _hoisted_1$A = ["title"];
 const _hoisted_2$o = ["id", "placeholder", "required"];
-const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
   __name: "ColorPicker",
   props: {
     label: {},
@@ -10051,7 +10073,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
             [vue.vModelText, inputVal.value]
           ])
         ])
-      ], 10, _hoisted_1$z)) : vue.createCommentVNode("", true);
+      ], 10, _hoisted_1$A)) : vue.createCommentVNode("", true);
     };
   }
 });
@@ -18494,9 +18516,9 @@ const eo = ({
 Object.entries(go).forEach(([e, t]) => {
   e !== "default" && (Hn[e] = t);
 });
-const _hoisted_1$y = ["title"];
+const _hoisted_1$z = ["title"];
 const _hoisted_2$n = { key: 0 };
-const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
   __name: "DateInput",
   props: {
     required: { type: Boolean },
@@ -18554,11 +18576,11 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
           "minutes-grid-increment": _ctx.minutesGridIncrement,
           "start-time": { hours: 8, minutes: 0 }
         }), null, 16, ["modelValue", "required", "enable-time-picker", "allowed-dates", "time-picker-inline", "minutes-increment", "minutes-grid-increment"])
-      ], 10, _hoisted_1$y);
+      ], 10, _hoisted_1$z);
     };
   }
 });
-const _hoisted_1$x = { class: "datetime-wrap" };
+const _hoisted_1$y = { class: "datetime-wrap" };
 const _hoisted_2$m = { class: "date-wrap" };
 const _hoisted_3$i = {
   key: 0,
@@ -18566,7 +18588,7 @@ const _hoisted_3$i = {
 };
 const _hoisted_4$d = ["id", "name", "value"];
 const _hoisted_5$b = ["for"];
-const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   __name: "DatePicker",
   props: {
     label: {},
@@ -18594,7 +18616,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
       return `${hour}:${minute}`;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, [
         vue.createElementVNode("div", _hoisted_2$m, [
           vue.createVNode(vue.unref(Hn), vue.mergeProps({
             modelValue: selectedDate.value,
@@ -18635,7 +18657,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$w = { class: "bagel-input" };
+const _hoisted_1$x = { class: "bagel-input" };
 const _hoisted_2$l = {
   key: 0,
   class: "bgl-multi-preview"
@@ -18652,14 +18674,19 @@ const _hoisted_8$3 = {
   key: 1,
   class: "bgl-single-preview"
 };
-const _hoisted_9$2 = ["src"];
-const _hoisted_10$2 = {
+const _hoisted_9$2 = {
+  key: 0,
+  class: "h-100"
+};
+const _hoisted_10$2 = ["src"];
+const _hoisted_11$1 = { class: "position-start m-05 gap-025 flex" };
+const _hoisted_12 = {
   key: 0,
   class: "progress"
 };
-const _hoisted_11$1 = ["src"];
-const _hoisted_12 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
-const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_13 = ["src"];
+const _hoisted_14 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
+const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
   __name: "FileUpload",
   props: {
     label: {},
@@ -18814,7 +18841,8 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     }
     return (_ctx, _cache) => {
       const _directive_lightbox = vue.resolveDirective("lightbox");
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
+      const _directive_tooltip = vue.resolveDirective("tooltip");
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
         vue.createElementVNode("label", null, vue.toDisplayString(_ctx.label), 1),
         vue.createElementVNode("div", {
           class: vue.normalizeClass(["fileUploadWrap", {
@@ -18898,14 +18926,33 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
                   key: file.id,
                   class: vue.normalizeClass(["single-image-item-preview", { "bgl_fill-image": _ctx.fill }])
                 }, [
-                  isImage(file.extension || file.url) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("img", {
-                    key: 0,
-                    class: "single-preview",
-                    src: file.url,
-                    alt: ""
-                  }, null, 8, _hoisted_9$2)), [
-                    [_directive_lightbox]
-                  ]) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
+                  isImage(file.extension || file.url) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$2, [
+                    vue.withDirectives(vue.createElementVNode("img", {
+                      class: "single-preview",
+                      src: file.url,
+                      alt: ""
+                    }, null, 8, _hoisted_10$2), [
+                      [_directive_lightbox]
+                    ]),
+                    vue.createElementVNode("div", _hoisted_11$1, [
+                      vue.withDirectives(vue.createVNode(vue.unref(Btn), {
+                        color: "gray",
+                        thin: "",
+                        icon: "delete",
+                        onClick: vue.withModifiers(($event) => removeFile(file), ["stop"])
+                      }, null, 8, ["onClick"]), [
+                        [_directive_tooltip, "Delete"]
+                      ]),
+                      vue.withDirectives(vue.createVNode(vue.unref(Btn), {
+                        color: "gray",
+                        thin: "",
+                        icon: "autorenew",
+                        onClick: browse
+                      }, null, 512), [
+                        [_directive_tooltip, "Replace"]
+                      ])
+                    ])
+                  ])) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
                     key: 1,
                     size: 4,
                     weight: "2",
@@ -18923,7 +18970,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
                     class: vue.normalizeClass(["pie", { complete: fileQ.progress === 100 }]),
                     style: vue.normalizeStyle([`--p:${fileQ.progress}`, { "--b": "2px" }])
                   }, [
-                    fileQ.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_10$2, vue.toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : vue.createCommentVNode("", true),
+                    fileQ.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_12, vue.toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : vue.createCommentVNode("", true),
                     vue.createVNode(vue.unref(_sfc_main$c), {
                       class: "success",
                       icon: "check"
@@ -18934,7 +18981,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
                     class: "single-preview",
                     src: fileToUrl(fileQ.file),
                     alt: ""
-                  }, null, 8, _hoisted_11$1)) : vue.createCommentVNode("", true)
+                  }, null, 8, _hoisted_13)) : vue.createCommentVNode("", true)
                 ], 2);
               }), 128))
             ])) : vue.createCommentVNode("", true)
@@ -18945,7 +18992,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
             fileQueue: fileQueue.value,
             browse
           }, () => [
-            vue.createElementVNode("p", _hoisted_12, [
+            vue.createElementVNode("p", _hoisted_14, [
               vue.createVNode(vue.unref(_sfc_main$c), { icon: "upload_2" }),
               _cache[0] || (_cache[0] = vue.createTextVNode(" Drop files here or click to upload "))
             ])
@@ -18955,11 +19002,11 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const $el = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-1db5afa3"]]);
-const _hoisted_1$v = ["title"];
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-bfb0bd63"]]);
+const _hoisted_1$w = ["title"];
 const _hoisted_2$k = { key: 0 };
 const _hoisted_3$g = ["value", "placeholder"];
-const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
   __name: "JSONInput",
   props: {
     description: { default: "" },
@@ -18991,13 +19038,13 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
           placeholder: _ctx.placeholder,
           onInput: handleInput
         }, null, 42, _hoisted_3$g)
-      ], 10, _hoisted_1$v);
+      ], 10, _hoisted_1$w);
     };
   }
 });
-const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-1cbaeab2"]]);
-const _hoisted_1$u = ["value", "autofocus", "onKeydown", "onPaste"];
-const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-1cbaeab2"]]);
+const _hoisted_1$v = ["value", "autofocus", "onKeydown", "onPaste"];
+const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
   __name: "OTP",
   props: {
     digitCount: {},
@@ -19095,15 +19142,15 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
             oninput: "this.value = this.value.slice(0, 1);",
             onKeydown: ($event) => handleKeyDown2($event, ind),
             onPaste: ($event) => handlePaste2($event, ind)
-          }, null, 40, _hoisted_1$u);
+          }, null, 40, _hoisted_1$v);
         }), 128))
       ], 512);
     };
   }
 });
-const OTP = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-5c22c199"]]);
-const _hoisted_1$t = { class: "relative" };
-const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+const OTP = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-5c22c199"]]);
+const _hoisted_1$u = { class: "relative" };
+const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
   __name: "PasswordInput",
   props: /* @__PURE__ */ vue.mergeModels({
     id: {},
@@ -19143,7 +19190,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     );
     const inputType = vue.computed(() => showPwd.value ? "text" : "password");
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
         vue.createVNode(vue.unref(TextInput), vue.mergeProps({
           modelValue: password.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => password.value = $event)
@@ -19163,7 +19210,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$s = ["for"];
+const _hoisted_1$t = ["for"];
 const _hoisted_2$j = ["id", "name", "value"];
 const _hoisted_3$f = { class: "flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025" };
 const _hoisted_4$b = ["src", "alt"];
@@ -19176,7 +19223,7 @@ const _hoisted_7$4 = {
   key: 1,
   class: "txt-gray txt-12 m-0"
 };
-const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
   __name: "RadioGroup",
   props: /* @__PURE__ */ vue.mergeModels({
     groupName: {},
@@ -19229,19 +19276,19 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
               icon: "delete",
               onClick: ($event) => _ctx.$emit("delete", opt)
             }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
-          ], 8, _hoisted_1$s);
+          ], 8, _hoisted_1$t);
         }), 128))
       ]);
     };
   }
 });
-const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-3e9e030f"]]);
-const _hoisted_1$r = { class: "bagel-input" };
+const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-3e9e030f"]]);
+const _hoisted_1$s = { class: "bagel-input" };
 const _hoisted_2$i = { class: "pb-025" };
 const _hoisted_3$e = { class: "flex gap-05 flex-wrap" };
 const _hoisted_4$a = ["id", "name", "value", "checked"];
 const _hoisted_5$8 = ["for"];
-const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
   __name: "RadioPillsInput",
   props: {
     options: {},
@@ -19282,7 +19329,7 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
       selectedValue.value = props2.modelValue;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
         vue.createElementVNode("label", _hoisted_2$i, vue.toDisplayString(_ctx.label), 1),
         vue.createElementVNode("div", _hoisted_3$e, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (option2, index2) => {
@@ -19308,12 +19355,12 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-cf892d71"]]);
-const _hoisted_1$q = { class: "flex gap-1 align-center range-slide" };
+const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-cf892d71"]]);
+const _hoisted_1$r = { class: "flex gap-1 align-center range-slide" };
 const _hoisted_2$h = { key: 0 };
 const _hoisted_3$d = ["max", "min", "step"];
 const _hoisted_4$9 = { key: 1 };
-const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
   __name: "RangeInput",
   props: /* @__PURE__ */ vue.mergeModels({
     min: {},
@@ -19333,7 +19380,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
       return `linear-gradient(to right, var(--bgl-primary) ${percentage}%, var(--input-bg) ${percentage}%)`;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
         _ctx.min !== void 0 ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2$h, vue.toDisplayString(_ctx.min), 1)) : vue.createCommentVNode("", true),
         vue.withDirectives(vue.createElementVNode("input", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => val.value = $event),
@@ -19350,7 +19397,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-d653c76a"]]);
+const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-d653c76a"]]);
 function OrderedMap(content) {
   this.content = content;
 }
@@ -43228,12 +43275,12 @@ vue.defineComponent({
     }, (_b = (_a2 = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a2));
   }
 });
-const _hoisted_1$p = { class: "RichText" };
+const _hoisted_1$q = { class: "RichText" };
 const _hoisted_2$g = {
   key: 0,
   class: "RichText-tools"
 };
-const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
   __name: "RichText",
   props: {
     modelValue: {}
@@ -43458,7 +43505,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     });
     return (_ctx, _cache) => {
       const _directive_tooltip = vue.resolveDirective("tooltip");
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
         vue.unref(editor) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$g, [
           (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(config, (item) => {
             var _a2;
@@ -43652,7 +43699,7 @@ function createTable() {
     }
   }
 }
-const _hoisted_1$o = { class: "flex gap-05" };
+const _hoisted_1$p = { class: "flex gap-05" };
 const _hoisted_2$f = ["disabled"];
 const _hoisted_3$c = { key: 1 };
 const _hoisted_4$8 = {
@@ -43662,7 +43709,7 @@ const _hoisted_4$8 = {
 const _hoisted_5$7 = ["value"];
 const _hoisted_6$6 = ["aria-selected", "onClick", "onKeydown"];
 const _hoisted_7$3 = { class: "block" };
-const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
   __name: "SelectInput",
   props: {
     options: {},
@@ -43810,7 +43857,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$M), {
+      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$N), {
         ref_key: "dropdown",
         ref: dropdown,
         placement: "bottom-start",
@@ -43820,7 +43867,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
         trigger: vue.withCtx(() => [
           vue.createElementVNode("label", null, [
             vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
-            vue.createElementVNode("div", _hoisted_1$o, [
+            vue.createElementVNode("div", _hoisted_1$p, [
               _ctx.searchable && vue.unref(open) ? (vue.openBlock(), vue.createBlock(vue.unref(TextInput), {
                 key: 0,
                 ref_key: "searchInput",
@@ -43874,7 +43921,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
           ])
         ]),
         default: vue.withCtx(() => [
-          vue.createVNode(vue.unref(_sfc_main$Q), {
+          vue.createVNode(vue.unref(_sfc_main$R), {
             class: "p-05",
             style: vue.normalizeStyle({ width: _ctx.fullWidth ? "100%" : "auto" })
           }, {
@@ -43919,12 +43966,12 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-94b45d29"]]);
-const _hoisted_1$n = {
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-94b45d29"]]);
+const _hoisted_1$o = {
   class: "toolbar flex gap-025 pb-05 flex-wrap",
   role: "toolbar"
 };
-const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
   __name: "Toolbar",
   props: {
     config: {}
@@ -43954,7 +44001,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     }
     return (_ctx, _cache) => {
       const _directive_tooltip = vue.resolveDirective("tooltip");
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
         vue.createVNode(SelectInput, {
           class: "m-0 w150",
           options: ["Text", "Heading 1", "Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6", "Blockquote", "Code"],
@@ -43983,14 +44030,14 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$m = { class: "rich-text-editor rounded pt-05 px-1 pb-1" };
+const _hoisted_1$n = { class: "rich-text-editor rounded pt-05 px-1 pb-1" };
 const _hoisted_2$e = { class: "editor-container flex flex-stretch gap-1 m_column" };
 const _hoisted_3$b = { class: "content-area radius-05 p-1 shadow-light w-100 grid" };
 const _hoisted_4$7 = {
   key: 0,
   class: "preview-area w-100 radius-05 p-1"
 };
-const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   props: {
     modelValue: {},
@@ -44117,8 +44164,8 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
-        vue.createVNode(_sfc_main$t, {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+        vue.createVNode(_sfc_main$u, {
           config: config.value,
           onAction: handleToolbarAction
         }, null, 8, ["config"]),
@@ -44149,7 +44196,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-8f1898f5"]]);
+const index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-8f1898f5"]]);
 /*!
  * Signature Pad v5.0.3 | https://github.com/szimek/signature_pad
  * (c) 2024 Szymon Nowak | Released under the MIT license
@@ -44743,7 +44790,7 @@ class SignaturePad extends SignatureEventTarget {
     return svg.outerHTML;
   }
 }
-const _hoisted_1$l = ["disabled"];
+const _hoisted_1$m = ["disabled"];
 const _hoisted_2$d = {
   key: 1,
   placeholder: "required",
@@ -44751,7 +44798,7 @@ const _hoisted_2$d = {
   required: "",
   class: "pixel"
 };
-const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
   __name: "SignaturePad",
   props: /* @__PURE__ */ vue.mergeModels({
     sigOption: {},
@@ -44904,7 +44951,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
           ref: vCanvas,
           class: "canvas",
           disabled: _ctx.disabled
-        }, null, 8, _hoisted_1$l),
+        }, null, 8, _hoisted_1$m),
         _ctx.required && vue.unref(_isEmpty) ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_2$d)) : vue.createCommentVNode("", true)
       ], 34);
     };
@@ -47389,13 +47436,13 @@ const VueDraggableNext = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$k = ["title"];
+const _hoisted_1$l = ["title"];
 const _hoisted_2$c = { class: "bagel-input" };
 const _hoisted_3$a = { class: "table-side-scroll" };
 const _hoisted_4$6 = { class: "table-header" };
 const _hoisted_5$6 = { class: "table-reorder" };
 const _hoisted_6$5 = { class: "table-action" };
-const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
   __name: "TableField",
   props: {
     description: { default: "" },
@@ -47535,11 +47582,11 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
           ])),
           _: 1
         })
-      ], 8, _hoisted_1$k);
+      ], 8, _hoisted_1$l);
     };
   }
 });
-const TableField = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-a65c658c"]]);
+const TableField = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-a65c658c"]]);
 function bind(fn3, thisArg) {
   return function wrap2() {
     return fn3.apply(thisArg, arguments);
@@ -52006,13 +52053,13 @@ function parsePhoneNumber$1() {
 function parsePhoneNumber() {
   return withMetadataArgument(parsePhoneNumber$1, arguments);
 }
-const _hoisted_1$j = ["aria-expanded"];
+const _hoisted_1$k = ["aria-expanded"];
 const _hoisted_2$b = { class: "p-075 tel-countryp-dropdown" };
 const _hoisted_3$9 = ["aria-selected", "onClick", "onMousemove"];
 const _hoisted_4$5 = { class: "tel-country" };
 const _hoisted_5$5 = { key: 1 };
 const _hoisted_6$4 = ["id", "required", "placeholder", "disabled", "autocomplete", "pattern", "minlength", "maxlength", "name", "readonly", "tabindex", "aria-describedby"];
-const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
   __name: "TelInput",
   props: /* @__PURE__ */ vue.mergeModels({
     label: {},
@@ -52273,7 +52320,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
               vue.withKeys(reset, ["tab"])
             ]
           }, [
-            !computedDropDownOptions.value.hide ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$M), {
+            !computedDropDownOptions.value.hide ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$N), {
               key: 0,
               ref_key: "phoneDropdown",
               ref: phoneDropdown,
@@ -52360,19 +52407,19 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
             }, null, 44, _hoisted_6$4), [
               [vue.vModelText, phone.value]
             ])
-          ], 40, _hoisted_1$j)
+          ], 40, _hoisted_1$k)
         ])
       ], 2);
     };
   }
 });
-const TelInput = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-627af458"]]);
-const _hoisted_1$i = ["title"];
+const TelInput = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-627af458"]]);
+const _hoisted_1$j = ["title"];
 const _hoisted_2$a = ["for"];
 const _hoisted_3$8 = ["id", "title", "autocomplete", "type", "placeholder", "disabled", "required", "pattern"];
 const _hoisted_4$4 = ["id", "title", "type", "rows", "placeholder", "disabled", "required", "pattern"];
 const _hoisted_5$4 = { key: 2 };
-const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
   __name: "TextInput",
   props: {
     id: {},
@@ -52503,15 +52550,15 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
           key: 1,
           icon: _ctx.icon
         }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
-      ], 10, _hoisted_1$i);
+      ], 10, _hoisted_1$j);
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-e5ae4283"]]);
-const _hoisted_1$h = ["title"];
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-e5ae4283"]]);
+const _hoisted_1$i = ["title"];
 const _hoisted_2$9 = ["id", "required"];
 const _hoisted_3$7 = ["for"];
-const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   __name: "ToggleInput",
   props: /* @__PURE__ */ vue.mergeModels({
     label: {},
@@ -52555,20 +52602,20 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
             vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
           ], true)
         ], 8, _hoisted_3$7)
-      ], 10, _hoisted_1$h);
+      ], 10, _hoisted_1$i);
     };
   }
 });
-const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-486451e5"]]);
-const _hoisted_1$g = { class: "m-0 pb-025 txt14 line-height-1" };
-const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-486451e5"]]);
+const _hoisted_1$h = { class: "m-0 pb-025 txt14 line-height-1" };
+const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
   __name: "BottomMenu",
   props: {
     navLinks: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$Q), { class: "hide m_grid gap-05 bgl_bottombar px-1 txt14 justify-content-start align-items-center overflow-x" }, {
+      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$R), { class: "hide m_grid gap-05 bgl_bottombar px-1 txt14 justify-content-start align-items-center overflow-x" }, {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "brand", {}, void 0, true),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.navLinks, (nav2, i2) => {
@@ -52584,7 +52631,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
                   size: 1.4,
                   class: "m-0 line-height-14"
                 }, null, 8, ["icon"]),
-                vue.createElementVNode("p", _hoisted_1$g, vue.toDisplayString(nav2.label), 1)
+                vue.createElementVNode("p", _hoisted_1$h, vue.toDisplayString(nav2.label), 1)
               ]),
               _: 2
             }, 1032, ["to", "onClick"]);
@@ -52595,8 +52642,8 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const BottomMenu = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-557bcad0"]]);
-const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+const BottomMenu = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-557bcad0"]]);
+const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
   __name: "Layout",
   props: {
     gap: { default: 1 },
@@ -52637,9 +52684,9 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Layout = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-1814129a"]]);
-const _hoisted_1$f = { key: 0 };
-const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+const Layout = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-1814129a"]]);
+const _hoisted_1$g = { key: 0 };
+const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
   __name: "SidebarMenu",
   props: {
     navLinks: {},
@@ -52668,7 +52715,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
           icon: "keyboard_arrow_right",
           onClick: toggleMenu
         }),
-        vue.createVNode(vue.unref(_sfc_main$Q), { class: "py-1 px-05 h-100 flex column gap-05 rounded relative bg-primary font-light overflow-y" }, {
+        vue.createVNode(vue.unref(_sfc_main$R), { class: "py-1 px-05 h-100 flex column gap-05 rounded relative bg-primary font-light overflow-y" }, {
           default: vue.withCtx(() => [
             !vue.unref(isOpen) || !vue.unref(slots)["brand-open"] ? vue.renderSlot(_ctx.$slots, "brand", { key: 0 }, void 0, true) : vue.createCommentVNode("", true),
             vue.unref(isOpen) ? vue.renderSlot(_ctx.$slots, "brand-open", { key: 1 }, void 0, true) : vue.createCommentVNode("", true),
@@ -52686,7 +52733,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
                   }, null, 8, ["icon"]),
                   vue.createVNode(vue.Transition, { name: "showP" }, {
                     default: vue.withCtx(() => [
-                      _ctx.open ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_1$f, vue.toDisplayString(nav2.label), 1)) : vue.createCommentVNode("", true)
+                      _ctx.open ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_1$g, vue.toDisplayString(nav2.label), 1)) : vue.createCommentVNode("", true)
                     ]),
                     _: 2
                   }, 1024)
@@ -52714,7 +52761,37 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SidebarMenu = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-51cedd11"]]);
+const SidebarMenu = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-51cedd11"]]);
+const _hoisted_1$f = {
+  key: 0,
+  class: "skeleton-wrap"
+};
+const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  __name: "Skeleton",
+  props: {
+    count: { default: 1 },
+    height: { default: "50px" },
+    width: { default: "auto" },
+    borderRadius: { default: "var(--skeleton-radius)" }
+  },
+  setup(__props) {
+    const slots = vue.useSlots();
+    return (_ctx, _cache) => {
+      return vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.count, (i2) => {
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: i2 }, [
+          vue.unref(slots).default ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+            vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ])) : (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            class: "skeleton",
+            style: vue.normalizeStyle({ height: _ctx.height, width: _ctx.width, borderRadius: _ctx.borderRadius })
+          }, null, 4))
+        ], 64);
+      }), 128);
+    };
+  }
+});
+const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-a06bec19"]]);
 const _hoisted_1$e = { class: "bgl_card tabs-top" };
 const _hoisted_2$8 = { class: "tabs grid auto-flow-columns fit-content" };
 const _hoisted_3$6 = ["onClick"];
@@ -53173,7 +53250,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
         onClick: _cache[1] || (_cache[1] = () => _ctx.dismissable ? closeModal() : ""),
         onKeydown: vue.withKeys(closeModal, ["esc"])
       }, [
-        vue.createVNode(vue.unref(_sfc_main$Q), {
+        vue.createVNode(vue.unref(_sfc_main$R), {
           class: "modal",
           style: vue.normalizeStyle({ ...maxWidth.value }),
           onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
@@ -53349,7 +53426,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
         "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => emit2("update:visible", $event))
       }, vue.createSlots({
         default: vue.withCtx(() => [
-          vue.createVNode(vue.unref(_sfc_main$J), {
+          vue.createVNode(vue.unref(_sfc_main$K), {
             ref_key: "form",
             ref: form,
             modelValue: formData.value,
@@ -53549,8 +53626,8 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     vue.useCssVars((_ctx) => ({
-      "4779ddec": computedBackgroundColor.value,
-      "04aaf136": cumputedTextColor.value
+      "64b28dae": computedBackgroundColor.value,
+      "e70b1a78": cumputedTextColor.value
     }));
     const props2 = __props;
     const slots = vue.useSlots();
@@ -53641,7 +53718,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Pill = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-8c7388de"]]);
+const Pill = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-40a0a2e2"]]);
 const _sfc_main$5 = {};
 function _sfc_render$1(_ctx, _cache) {
   const _component_router_view = vue.resolveComponent("router-view");
@@ -53999,7 +54076,8 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     schema: {},
     showFields: {},
     useServerSort: { type: Boolean, default: false },
-    selectable: { type: Boolean, default: false }
+    selectable: { type: Boolean, default: false },
+    onLastItemVisible: {}
   }, {
     "loading": { default: false },
     "loadingModifiers": {},
@@ -54013,7 +54091,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   emits: /* @__PURE__ */ vue.mergeModels(["update:selectedItems", "orderBy", "select"], ["update:loading", "update:itemHeight", "update:selectedItems"]),
   setup(__props, { emit: __emit }) {
     vue.useCssVars((_ctx) => ({
-      "dd90c516": vue.unref(computedItemHiehgt)
+      "ced4aeb8": vue.unref(computedItemHiehgt)
     }));
     const emit2 = __emit;
     const slots = vue.useSlots();
@@ -54098,7 +54176,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     vue.watch(
       () => computedData.value.length,
       (newLength, oldLength) => {
-        if (newLength === oldLength) return;
+        if (newLength === oldLength || __props.onLastItemVisible !== void 0) return;
         scrollTo(0);
       }
     );
@@ -54130,6 +54208,18 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
       const value = event.target.checked;
       selectedItems.value = value ? computedData.value.map((d2) => d2.id) : [];
     }
+    const lastItem = vue.ref();
+    let observer;
+    vue.onMounted(() => {
+      if (__props.onLastItemVisible === void 0) return;
+      observer = new IntersectionObserver(([entry]) => {
+        if (entry.isIntersecting && computedData.value.length) __props.onLastItemVisible();
+      });
+      if (lastItem.value) observer.observe(lastItem.value);
+    });
+    vue.onUnmounted(() => {
+      observer == null ? void 0 : observer.disconnect();
+    });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: "table-list-wrap h-100" }, vue.unref(containerProps), {
         class: { "loading-table": loading.value }
@@ -54200,7 +54290,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
                         row,
                         field
                       }, void 0, true) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$1, [
-                        vue.createVNode(vue.unref(_sfc_main$K), {
+                        vue.createVNode(vue.unref(_sfc_main$L), {
                           class: "embedded-field",
                           field,
                           modelValue: row,
@@ -54210,7 +54300,12 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
                     ]);
                   }), 128))
                 ], 10, _hoisted_7$1);
-              }), 128))
+              }), 128)),
+              _ctx.onLastItemVisible !== void 0 ? (vue.openBlock(), vue.createElementBlock("tr", {
+                key: 0,
+                ref_key: "lastItem",
+                ref: lastItem
+              }, null, 512)) : vue.createCommentVNode("", true)
             ])
           ])
         ], 16))
@@ -54218,7 +54313,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-692391a3"]]);
+const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-54f3c477"]]);
 const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   __name: "Title",
   props: {
@@ -55348,7 +55443,7 @@ function frmRow(...children2) {
 function bglForm(idOrField, ...schema) {
   if (typeof idOrField === "string") {
     return {
-      $el: vue.markRaw(_sfc_main$J),
+      $el: vue.markRaw(_sfc_main$K),
       id: idOrField,
       attrs: {
         schema: [idOrField, ...schema]
@@ -55356,7 +55451,7 @@ function bglForm(idOrField, ...schema) {
     };
   }
   return {
-    $el: vue.markRaw(_sfc_main$J),
+    $el: vue.markRaw(_sfc_main$K),
     attrs: {
       schema: [idOrField, ...schema]
     }
@@ -55432,15 +55527,17 @@ function formatString(str, format2) {
   }
   return str;
 }
-function debounce(func, wait) {
-  let timeoutId;
+function debounce(callback, wait, immediate) {
+  let timeout;
   return function(...args) {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => {
-      func(...args);
-    }, wait);
+    const later = () => {
+      timeout = void 0;
+      if (!immediate) callback.apply(this, args);
+    };
+    const callNow = immediate && timeout === void 0;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) callback.apply(this, args);
   };
 }
 function keyToLabel(key) {
@@ -55481,7 +55578,8 @@ function iffer(field, itemData) {
   if (field["v-if"] === void 0) return true;
   if (typeof field["v-if"] === "boolean") return field["v-if"];
   if (typeof field["v-if"] === "string") return true;
-  if (typeof field["v-if"] === "function") return (_a2 = field["v-if"]) == null ? void 0 : _a2.call(field, itemData == null ? void 0 : itemData[field.id], itemData);
+  if (typeof field["v-if"] === "function")
+    return (_a2 = field["v-if"]) == null ? void 0 : _a2.call(field, itemData == null ? void 0 : itemData[field.id], itemData);
   return true;
 }
 function denullify(itemData, fieldID) {
@@ -55491,15 +55589,15 @@ function denullify(itemData, fieldID) {
 const isDate = (dateToTest) => !Number.isNaN(Date.parse(dateToTest));
 function getFallbackSchema(data2, showFields) {
   const keys4 = Array.from(new Set((data2 ?? []).flatMap(Object.keys)));
-  const schema = keys4.map(
-    (id) => ({
-      id,
-      label: keyToLabel(id)
-    })
-  );
+  const schema = keys4.map((id) => ({
+    id,
+    label: keyToLabel(id)
+  }));
   return showFields ? schema.filter((f2) => showFields.includes(f2.id) || !f2.id) : schema;
 }
-const sleep = (ms = 100) => new Promise((resolve) => setTimeout(resolve, ms));
+function sleep(ms = 100) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
 function appendScript(src) {
   return new Promise((resolve, reject3) => {
     if (document.querySelector(`script[src="${src}"]`)) {
@@ -55957,29 +56055,29 @@ const IMAGE_FORMATS = ["jpeg", "png", "webp", "avif", "apng", "gif", "avifs", "s
 const IMAGE_FORMATS_REGEXP = new RegExp(`(${IMAGE_FORMATS.join("|")})$`, "i");
 const VIDEO_FORMATS = ["mp4", "webm", "ogg", "mov", "avi", "flv", "wmv", "mkv", "ts", "m3u8"];
 const VIDEO_FORMATS_REGEXP = new RegExp(`(${VIDEO_FORMATS.join("|")})$`, "i");
-exports.Accordion = _sfc_main$Y;
+exports.Accordion = _sfc_main$Z;
 exports.AccordionItem = AccordionItem;
-exports.AddressSearch = _sfc_main$W;
+exports.AddressSearch = _sfc_main$X;
 exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
-exports.BagelForm = _sfc_main$J;
+exports.BagelForm = _sfc_main$K;
 exports.BagelVue = BagelVue;
-exports.BglField = _sfc_main$K;
-exports.BglForm = _sfc_main$J;
-exports.BglMultiStepForm = _sfc_main$I;
+exports.BglField = _sfc_main$L;
+exports.BglForm = _sfc_main$K;
+exports.BglMultiStepForm = _sfc_main$J;
 exports.BglVideo = BglVideo;
 exports.BottomMenu = BottomMenu;
 exports.Btn = Btn;
-exports.Card = _sfc_main$Q;
+exports.Card = _sfc_main$R;
 exports.Carousel = Carousel;
 exports.CheckInput = CheckInput;
 exports.Checkbox = Checkbox;
-exports.ColorPicker = _sfc_main$F;
+exports.ColorPicker = _sfc_main$G;
 exports.DataPreview = DataPreview;
-exports.DateInput = _sfc_main$E;
-exports.DatePicker = _sfc_main$D;
-exports.Dropdown = _sfc_main$M;
+exports.DateInput = _sfc_main$F;
+exports.DatePicker = _sfc_main$E;
+exports.Dropdown = _sfc_main$N;
 exports.FileUpload = $el;
 exports.Flag = Flag;
 exports.IMAGE_FORMATS = IMAGE_FORMATS;
@@ -55987,7 +56085,7 @@ exports.IMAGE_FORMATS_REGEXP = IMAGE_FORMATS_REGEXP;
 exports.Icon = _sfc_main$c;
 exports.JSONInput = JSONInput;
 exports.Layout = Layout;
-exports.Lineart = _sfc_main$O;
+exports.Lineart = _sfc_main$P;
 exports.ListItem = _sfc_main$f;
 exports.ListView = ListView;
 exports.MapEmbed = _sfc_main$d;
@@ -55999,17 +56097,18 @@ exports.ModalPlugin = ModalPlugin;
 exports.NavBar = NavBar;
 exports.OTP = OTP;
 exports.PageTitle = _sfc_main$7;
-exports.PasswordInput = _sfc_main$z;
+exports.PasswordInput = _sfc_main$A;
 exports.Pill = Pill;
 exports.RadioGroup = RadioGroup;
 exports.RadioPillsInput = RadioPillsInput;
 exports.RangeInput = RangeInput;
-exports.RichText = _sfc_main$v;
+exports.RichText = _sfc_main$w;
 exports.RichText2 = index$1;
 exports.RouterWrapper = RouterWrapper;
 exports.SelectInput = SelectInput;
 exports.SidebarMenu = SidebarMenu;
-exports.SignaturePad = _sfc_main$r;
+exports.SignaturePad = _sfc_main$s;
+exports.Skeleton = Skeleton;
 exports.TabbedLayout = TabbedLayout;
 exports.TableField = TableField;
 exports.TableSchema = TableSchema;