@bagelink/vue 0.0.1020 → 0.0.1025

package/dist/index.mjs

@@ -5,6 +5,9 @@ import { defineComponent, reactive, provide, openBlock, createElementBlock, rend
 import { RouterLink } from "vue-router";
 const bagelFormUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
+  get arrField() {
+    return arrField;
+  },
   get bglForm() {
     return bglForm;
   },
@@ -39,7 +42,7 @@ const bagelFormUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defi
     return txtField;
   }
 }, Symbol.toStringTag, { value: "Module" }));
-const _sfc_main$12 = /* @__PURE__ */ defineComponent({
+const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   __name: "Accordion",
   setup(__props) {
     const state2 = reactive({
@@ -53,10 +56,10 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$P = ["aria-expanded", "aria-controls"];
-const _hoisted_2$w = { class: "accordion-label" };
-const _hoisted_3$p = ["id", "aria-hidden"];
-const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$Q = ["aria-expanded", "aria-controls"];
+const _hoisted_2$y = { class: "accordion-label" };
+const _hoisted_3$r = ["id", "aria-hidden"];
+const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   __name: "AccordionItem",
   props: {
     label: {},
@@ -122,7 +125,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
             createVNode(unref(_sfc_main$c), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "head", {}, () => [
-            createElementVNode("span", _hoisted_2$w, toDisplayString(_ctx.label), 1)
+            createElementVNode("span", _hoisted_2$y, toDisplayString(_ctx.label), 1)
           ], true),
           iconPosition.value === "end" ? (openBlock(), createElementBlock("span", {
             key: 1,
@@ -130,7 +133,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
           }, [
             createVNode(unref(_sfc_main$c), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : createCommentVNode("", true)
-        ], 8, _hoisted_1$P),
+        ], 8, _hoisted_1$Q),
         createVNode(Transition, { name: "expand" }, {
           default: withCtx(() => [
             unref(isOpen) ? (openBlock(), createElementBlock("div", {
@@ -140,7 +143,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
               "aria-hidden": unref(isOpen) ? "false" : "true"
             }, [
               renderSlot(_ctx.$slots, "default", {}, void 0, true)
-            ], 8, _hoisted_3$p)) : createCommentVNode("", true)
+            ], 8, _hoisted_3$r)) : createCommentVNode("", true)
           ]),
           _: 3
         })
@@ -155,9 +158,9 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-1e73ca3e"]]);
-const _hoisted_1$O = { class: "relative" };
-const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-1e73ca3e"]]);
+const _hoisted_1$P = { class: "relative" };
+const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   __name: "AddressSearch",
   emits: ["addressSelected"],
   setup(__props, { emit: __emit }) {
@@ -179,8 +182,8 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
       (_a2 = suggestion.value) == null ? void 0 : _a2.show();
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$O, [
-        createVNode(unref(_sfc_main$S), {
+      return openBlock(), createElementBlock("div", _hoisted_1$P, [
+        createVNode(unref(_sfc_main$T), {
           ref_key: "suggestion",
           ref: suggestion,
           noAutoFocus: true,
@@ -215,11 +218,11 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$N = {
+const _hoisted_1$O = {
   key: 1,
   class: "bgl_btn-flex"
 };
-const _sfc_main$$ = /* @__PURE__ */ defineComponent({
+const _sfc_main$10 = /* @__PURE__ */ defineComponent({
   __name: "Btn",
   props: {
     disabled: { type: Boolean, default: false },
@@ -239,6 +242,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
     href: {},
     round: { type: Boolean, default: false },
     is: { default: "button" },
+    ripple: { type: Boolean, default: true },
     onClick: { type: Function, default: () => "" }
   },
   setup(__props) {
@@ -283,7 +287,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
           _ctx.loading ? (openBlock(), createBlock(unref(Loading), {
             key: 0,
             size: "15"
-          })) : (openBlock(), createElementBlock("div", _hoisted_1$N, [
+          })) : (openBlock(), createElementBlock("div", _hoisted_1$O, [
             _ctx.icon ? (openBlock(), createBlock(unref(_sfc_main$c), {
               key: 0,
               icon: _ctx.icon
@@ -300,15 +304,15 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
         ]),
         _: 3
       }, 16, ["disabled", "class", "tabindex", "onClick", "onKeydown"])), [
-        [_directive_ripple]
+        [_directive_ripple, _ctx.ripple]
       ]);
     };
   }
 });
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["__scopeId", "data-v-521354bb"]]);
-const _hoisted_1$M = ["dismissable"];
-const _hoisted_2$v = { class: "m-0" };
-const _sfc_main$_ = /* @__PURE__ */ defineComponent({
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["__scopeId", "data-v-c23a3626"]]);
+const _hoisted_1$N = ["dismissable"];
+const _hoisted_2$x = { class: "m-0" };
+const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   __name: "Alert",
   props: {
     message: {},
@@ -336,7 +340,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
           size: 2,
           color: color2[_ctx.type]
         }, null, 8, ["icon", "color"])) : createCommentVNode("", true),
-        createElementVNode("p", _hoisted_2$v, toDisplayString(_ctx.message), 1),
+        createElementVNode("p", _hoisted_2$x, toDisplayString(_ctx.message), 1),
         createVNode(Btn, {
           flat: "",
           thin: "",
@@ -344,13 +348,13 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
           icon: "close",
           onClick: _cache[0] || (_cache[0] = ($event) => isDismissed.value = true)
         })
-      ], 10, _hoisted_1$M)) : createCommentVNode("", true);
+      ], 10, _hoisted_1$N)) : createCommentVNode("", true);
     };
   }
 });
-const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["__scopeId", "data-v-57141c32"]]);
-const _hoisted_1$L = ["src", "alt"];
-const _sfc_main$Z = /* @__PURE__ */ defineComponent({
+const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["__scopeId", "data-v-57141c32"]]);
+const _hoisted_1$M = ["src", "alt"];
+const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   __name: "Avatar",
   props: {
     fallback: {},
@@ -368,7 +372,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
           key: 0,
           src: _ctx.src,
           alt: _ctx.name
-        }, null, 8, _hoisted_1$L)) : (openBlock(), createElementBlock("p", {
+        }, null, 8, _hoisted_1$M)) : (openBlock(), createElementBlock("p", {
           key: 1,
           style: normalizeStyle({ "line-height": `${_ctx.size}px`, "font-size": `calc(1.5rem * ${_ctx.size} / 50)` })
         }, toDisplayString((_ctx.fallback || unref(initials)(_ctx.name || "")).toUpperCase()), 5))
@@ -376,8 +380,8 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-46ad8c25"]]);
-const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["__scopeId", "data-v-46ad8c25"]]);
+const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "Badge",
   props: {
     color: {},
@@ -406,11 +410,11 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-2f3caf93"]]);
-const _hoisted_1$K = ["src"];
-const _hoisted_2$u = ["autoplay", "muted", "loop", "controls", "playsinline"];
-const _hoisted_3$o = ["src", "type"];
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
+const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-2f3caf93"]]);
+const _hoisted_1$L = ["src"];
+const _hoisted_2$w = ["autoplay", "muted", "loop", "controls", "playsinline"];
+const _hoisted_3$q = ["src", "type"];
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "BglVideo",
   props: {
     src: {},
@@ -487,7 +491,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
           allowfullscreen: "",
           title: "Video",
           allow: "autoplay"
-        }, null, 12, _hoisted_1$K)) : _ctx.src ? (openBlock(), createElementBlock("video", {
+        }, null, 12, _hoisted_1$L)) : _ctx.src ? (openBlock(), createElementBlock("video", {
           key: 1,
           ref_key: "video",
           ref: video,
@@ -501,18 +505,18 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
           createElementVNode("source", {
             src: _ctx.src,
             type: `video/${videoFormat.value}`
-          }, null, 8, _hoisted_3$o)
-        ], 12, _hoisted_2$u)) : createCommentVNode("", true)
+          }, null, 8, _hoisted_3$q)
+        ], 12, _hoisted_2$w)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-006552f6"]]);
-const _hoisted_1$J = {
+const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-006552f6"]]);
+const _hoisted_1$K = {
   key: 0,
   class: "card_label"
 };
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "Card",
   props: {
     label: {},
@@ -541,7 +545,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
         }])
       }, {
         default: withCtx(() => [
-          _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1$J, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
+          _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1$K, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
@@ -551,13 +555,18 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$I = ["dir"];
-const _hoisted_2$t = {
+const _hoisted_1$J = ["dir"];
+const _hoisted_2$v = {
   key: 0,
   class: "blocker"
 };
-const _hoisted_3$n = { class: "Handlers" };
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const _hoisted_3$p = {
+  key: 0,
+  class: "dots flex-center gap-05 mt-1"
+};
+const _hoisted_4$h = ["onClick"];
+const _hoisted_5$f = { class: "Handlers" };
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "Carousel",
   props: {
     autoHeight: { type: Boolean, default: false },
@@ -567,7 +576,8 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     index: { type: Number, default: 0 },
     rtl: { type: Boolean, default: false },
     autoplay: { type: Boolean, default: false },
-    autoPlaySpeed: { type: Number, default: 4e3 }
+    autoPlaySpeed: { type: Number, default: 4e3 },
+    dots: { type: Boolean, default: false }
   },
   emits: ["update:index"],
   setup(__props, { emit: __emit }) {
@@ -581,11 +591,16 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     let startX = ref(0);
     let scrollStart = ref(0);
     let yHeight = ref("auto");
+    let slideCount = ref(0);
     let timeout;
     let autoPlayInterval;
     function preventDefaultClick(e) {
       e.preventDefault();
     }
+    function countSlides() {
+      if (!bglSlider.value) return;
+      slideCount.value = bglSlider.value.children.length;
+    }
     function disableDrag() {
       var _a2, _b;
       (_a2 = bglSlider.value) == null ? void 0 : _a2.querySelectorAll("img").forEach((img) => {
@@ -630,7 +645,8 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
       requestAnimationFrame(animate);
     }
     function goToSlide(index2) {
-      if (!bglSlider.value || index2 < 0 || index2 >= bglSlider.value.children.length) return;
+      countSlides();
+      if (!bglSlider.value || index2 < 0 || index2 >= slideCount.value) return;
       const offset2 = bglSlider.value.offsetWidth * index2 * (props2.rtl ? -1 : 1);
       const duration = window.innerWidth < 600 ? 400 : window.innerWidth < 991 ? 500 : 700;
       easeScroll(offset2, duration);
@@ -684,19 +700,20 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     }
     function next() {
       if (!bglSlider.value) return;
-      const slideCount = bglSlider.value.children.length;
-      goToSlide((activeSlideIndex.value + 1) % slideCount);
+      countSlides();
+      goToSlide((activeSlideIndex.value + 1) % slideCount.value);
     }
     function prev() {
       if (!bglSlider.value) return;
-      const slideCount = bglSlider.value.children.length;
-      goToSlide((activeSlideIndex.value - 1 + slideCount) % slideCount);
+      countSlides();
+      goToSlide((activeSlideIndex.value - 1 + slideCount.value) % slideCount.value);
     }
     onMounted(() => {
       window.addEventListener("resize", handleResize);
       disableDrag();
       updateHeight();
       handleResize();
+      countSlides();
       if (props2.autoplay) {
         autoPlayInterval = setInterval(next, props2.autoPlaySpeed);
       }
@@ -725,10 +742,19 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
           onMouseover: clearAutoplay,
           onFocusin: clearAutoplay
         }, [
-          unref(isDragging) ? (openBlock(), createElementBlock("div", _hoisted_2$t)) : createCommentVNode("", true),
+          unref(isDragging) ? (openBlock(), createElementBlock("div", _hoisted_2$v)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ], 38),
-        createElementVNode("div", _hoisted_3$n, [
+        __props.dots && unref(slideCount) > 1 ? (openBlock(), createElementBlock("div", _hoisted_3$p, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(slideCount), (i2) => {
+            return openBlock(), createElementBlock("span", {
+              key: i2,
+              class: normalizeClass(["dot cursor", { current: unref(activeSlideIndex) === i2 - 1 }]),
+              onClick: ($event) => goToSlide(i2 - 1)
+            }, null, 10, _hoisted_4$h);
+          }), 128))
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_5$f, [
           createElementVNode("span", { onClick: prev }, [
             renderSlot(_ctx.$slots, "prev", {
               index: unref(activeSlideIndex),
@@ -742,11 +768,11 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
             }, void 0, true)
           ])
         ])
-      ], 14, _hoisted_1$I);
+      ], 14, _hoisted_1$J);
     };
   }
 });
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-98e36ac5"]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-eec2b184"]]);
 function _isPlaceholder(a2) {
   return a2 != null && typeof a2 === "object" && a2["@@functional/placeholder"] === true;
 }
@@ -6580,10 +6606,10 @@ const _hoisted_1$1$1 = {
   style: { display: "flex", position: "relative" }
 };
 const _hoisted_2$1$1 = ["width", "height", "viewBox"];
-const _hoisted_3$m = { class: "layer-rectangles" };
-const _hoisted_4$e = ["transform", "onMouseover"];
-const _hoisted_5$d = ["width", "height"];
-const _hoisted_6$a = {
+const _hoisted_3$o = { class: "layer-rectangles" };
+const _hoisted_4$g = ["transform", "onMouseover"];
+const _hoisted_5$e = ["width", "height"];
+const _hoisted_6$b = {
   x: 0 + 10,
   y: 0 + 20,
   "font-size": `15px`,
@@ -6598,7 +6624,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$m, [
+      createElementVNode("g", _hoisted_3$o, [
         (openBlock(true), createElementBlock(
           Fragment,
           null,
@@ -6619,21 +6645,21 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                   y: 0,
                   width: r2.width,
                   height: r2.height
-                }), null, 16, _hoisted_5$d),
+                }), null, 16, _hoisted_5$e),
                 renderSlot(_ctx.$slots, "text", {
                   r: r2,
                   selected: _ctx.selected === i2
                 }, () => [
                   createElementVNode(
                     "text",
-                    _hoisted_6$a,
+                    _hoisted_6$b,
                     toDisplayString(r2.data.name),
                     1
                     /* TEXT */
                   )
                 ])
               ])
-            ], 42, _hoisted_4$e);
+            ], 42, _hoisted_4$g);
           }),
           128
           /* KEYED_FRAGMENT */
@@ -6690,25 +6716,25 @@ var script = defineComponent({
     return { bar, canvas, direction, mouse };
   }
 });
-const _hoisted_1$H = {
+const _hoisted_1$I = {
   key: 0,
   class: "layer-hover-bar"
 };
-const _hoisted_2$s = ["x", "y", "width", "height"];
+const _hoisted_2$u = ["x", "y", "width", "height"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.mouse.hover ? (openBlock(), createElementBlock("g", _hoisted_1$H, [
+  return _ctx.mouse.hover ? (openBlock(), createElementBlock("g", _hoisted_1$I, [
     createElementVNode("rect", mergeProps({ class: "hover-bar" }, _ctx.barStyle, {
       x: _ctx.bar.x,
       y: _ctx.bar.y,
       width: _ctx.bar.width > 0 ? _ctx.bar.width : 0,
       height: _ctx.bar.height > 0 ? _ctx.bar.height : 0
-    }), null, 16, _hoisted_2$s)
+    }), null, 16, _hoisted_2$u)
   ])) : createCommentVNode("v-if", true);
 }
 script.render = render;
 script.__file = "src/components/HoverBar/index.vue";
 const BRAND_COLOR = "var(--bgl-primary)";
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "Lineart",
   props: {
     data: {},
@@ -6848,18 +6874,18 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$G = {
+const _hoisted_1$H = {
   key: 0,
   class: "data"
 };
-const _hoisted_2$r = {
+const _hoisted_2$t = {
   key: 0,
   class: "data-row m_py-05"
 };
-const _hoisted_3$l = { class: "key" };
-const _hoisted_4$d = { class: "m-0" };
-const _hoisted_5$c = { key: 1 };
-const _hoisted_6$9 = {
+const _hoisted_3$n = { class: "key" };
+const _hoisted_4$f = { class: "m-0" };
+const _hoisted_5$d = { key: 1 };
+const _hoisted_6$a = {
   key: 0,
   class: "data-row"
 };
@@ -6869,7 +6895,7 @@ const _hoisted_9$3 = {
   key: 0,
   class: "m-0"
 };
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "DataPreview",
   props: /* @__PURE__ */ mergeModels({
     showFields: {},
@@ -6905,7 +6931,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     const computedSchema = computed(() => getFallbackSchema([itemData.value], props2.showFields));
     return (_ctx, _cache) => {
       var _a2;
-      return __props.data ? (openBlock(), createElementBlock("div", _hoisted_1$G, [
+      return __props.data ? (openBlock(), createElementBlock("div", _hoisted_1$H, [
         _ctx.title ? (openBlock(), createBlock(unref(_sfc_main$3), {
           key: 0,
           label: _ctx.title
@@ -6914,11 +6940,11 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
           return openBlock(), createElementBlock(Fragment, {
             key: field.id
           }, [
-            unref(iffer)(field, itemData.value) ? (openBlock(), createElementBlock("div", _hoisted_2$r, [
-              createElementVNode("div", _hoisted_3$l, [
-                createElementVNode("p", _hoisted_4$d, toDisplayString((field == null ? void 0 : field.label) || unref(keyToLabel)(field.id)), 1)
+            unref(iffer)(field, itemData.value) ? (openBlock(), createElementBlock("div", _hoisted_2$t, [
+              createElementVNode("div", _hoisted_3$n, [
+                createElementVNode("p", _hoisted_4$f, toDisplayString((field == null ? void 0 : field.label) || unref(keyToLabel)(field.id)), 1)
               ]),
-              createVNode(unref(_sfc_main$P), {
+              createVNode(unref(_sfc_main$Q), {
                 modelValue: itemData.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => itemData.value = $event),
                 label: "",
@@ -6928,10 +6954,10 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("", true)
           ], 64);
         }), 128)),
-        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (openBlock(), createElementBlock("div", _hoisted_5$c, [
+        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (openBlock(), createElementBlock("div", _hoisted_5$d, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(computedSchema.value, ({ id, label }) => {
             return openBlock(), createElementBlock(Fragment, { key: id }, [
-              !isUnset(itemData.value[id]) ? (openBlock(), createElementBlock("div", _hoisted_6$9, [
+              !isUnset(itemData.value[id]) ? (openBlock(), createElementBlock("div", _hoisted_6$a, [
                 createElementVNode("div", _hoisted_7$6, [
                   createElementVNode("p", _hoisted_8$4, toDisplayString(label), 1)
                 ]),
@@ -6947,7 +6973,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-6c27f163"]]);
+const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-6c27f163"]]);
 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]), []);
@@ -9489,7 +9515,7 @@ const Gt$1 = {
   install: Ct$1,
   options: h
 };
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "Dropdown",
   props: /* @__PURE__ */ mergeModels({
     value: {},
@@ -9503,7 +9529,8 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     outline: { type: Boolean },
     round: { type: Boolean },
     placement: {},
-    noAutoFocus: { type: Boolean }
+    noAutoFocus: { type: Boolean },
+    positioningDisabled: { type: Boolean }
   }, {
     "shown": {
       type: Boolean,
@@ -9560,7 +9587,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "Flag",
   props: {
     country: {},
@@ -9590,7 +9617,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Flag = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-f99f1900"]]);
+const Flag = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-f99f1900"]]);
 const state$1 = reactive(/* @__PURE__ */ new Map());
 function useTabs(group) {
   if (!state$1.has(group)) {
@@ -9604,8 +9631,8 @@ function useTabs(group) {
   });
   return { currentTab };
 }
-const _hoisted_1$F = ["onClick"];
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _hoisted_1$G = ["onClick"];
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "TabsNav",
   props: {
     title: {},
@@ -9674,26 +9701,28 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
         ref: tabsWrap,
         class: normalizeClass(["grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden", { "bgl_flat-tabs": _ctx.flat, "bgl_vertical-tabs": _ctx.vertical }])
       }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(props2.tabs, (tab, i2) => {
-          return openBlock(), createElementBlock("button", {
-            key: i2,
-            type: "button",
-            class: normalizeClass([{ active: isActive(tab) }, "bgl_tab relative z-1"]),
-            onClick: ($event) => selectTab(tab)
-          }, [
-            typeof tab !== "string" && tab.icon ? (openBlock(), createBlock(unref(_sfc_main$c), {
-              key: 0,
-              icon: tab.icon
-            }, null, 8, ["icon"])) : createCommentVNode("", true),
-            createTextVNode(" " + toDisplayString(tabLabel(tab)), 1)
-          ], 10, _hoisted_1$F);
-        }), 128))
+        renderSlot(_ctx.$slots, "tabs", normalizeProps(guardReactiveProps({ selectTab, isActive, tabLabel, tabs: tabs.value })), () => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(props2.tabs, (tab, i2) => {
+            return openBlock(), createElementBlock("button", {
+              key: i2,
+              type: "button",
+              class: normalizeClass([{ active: isActive(tab) }, "bgl_tab relative z-1"]),
+              onClick: ($event) => selectTab(tab)
+            }, [
+              typeof tab !== "string" && tab.icon ? (openBlock(), createBlock(unref(_sfc_main$c), {
+                key: 0,
+                icon: tab.icon
+              }, null, 8, ["icon"])) : createCommentVNode("", true),
+              createTextVNode(" " + toDisplayString(tabLabel(tab)), 1)
+            ], 10, _hoisted_1$G);
+          }), 128))
+        ], true)
       ], 2);
     };
   }
 });
-const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-dbce6d28"]]);
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-307612a9"]]);
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "BglField",
   props: {
     field: {},
@@ -9710,15 +9739,15 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
         customAttrs.value.multiline = true;
         return TextInput;
       }
-      if (props2.field.$el === "array") return _sfc_main$M;
+      if (props2.field.$el === "array") return _sfc_main$N;
       if (props2.field.$el === "select") return SelectInput;
       if (props2.field.$el === "toggle") return ToggleInput;
       if (props2.field.$el === "check") return CheckInput;
       if (props2.field.$el === "richtext") return RichText;
       if (props2.field.$el === "file") return FileUpload;
-      if (props2.field.$el === "date") return _sfc_main$H;
+      if (props2.field.$el === "date") return _sfc_main$I;
       if (props2.field.$el === "tabs") return TabsNav;
-      if (props2.field.$el === "form") return _sfc_main$O;
+      if (props2.field.$el === "form") return _sfc_main$P;
       return props2.field.$el ?? "div";
     });
     const formData = computed({
@@ -9741,7 +9770,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
       temp[keys4[keys4.length - 1]] = val;
       return data2;
     }
-    const isForm = computed(() => props2.field.$el === "form" || props2.field.$el === _sfc_main$O);
+    const isForm = computed(() => props2.field.$el === "form" || props2.field.$el === _sfc_main$P);
     function getFieldData(obj, key) {
       if (typeof obj !== "object" || obj === null) return obj;
       const keys4 = key.split(objPathRegex);
@@ -9835,7 +9864,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "BglForm",
   props: {
     label: {},
@@ -9933,7 +9962,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
             label: _ctx.label
           }, null, 8, ["label"])) : createCommentVNode("", true),
           (openBlock(true), createElementBlock(Fragment, null, renderList(computedSchema.value, (field, i2) => {
-            return openBlock(), createBlock(unref(_sfc_main$P), {
+            return openBlock(), createBlock(unref(_sfc_main$Q), {
               key: field.id || `${i2}p`,
               modelValue: unref(data2),
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(data2) ? data2.value = $event : data2 = $event),
@@ -9957,7 +9986,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
             label: _ctx.label
           }, null, 8, ["label"])) : createCommentVNode("", true),
           (openBlock(true), createElementBlock(Fragment, null, renderList(computedSchema.value, (field, i2) => {
-            return openBlock(), createBlock(unref(_sfc_main$P), {
+            return openBlock(), createBlock(unref(_sfc_main$Q), {
               key: field.id || `${i2}p`,
               modelValue: unref(data2),
               "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(data2) ? data2.value = $event : data2 = $event),
@@ -9976,8 +10005,8 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$E = { key: 0 };
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _hoisted_1$F = { key: 0 };
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "BglMultiStepForm",
   props: /* @__PURE__ */ mergeModels({
     bagelFormProps: { default: () => ({}) },
@@ -10044,8 +10073,8 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
           mode: "out-in"
         }, {
           default: withCtx(() => [
-            !unref(isStepping) ? (openBlock(), createElementBlock("div", _hoisted_1$E, [
-              createVNode(unref(_sfc_main$O), mergeProps({
+            !unref(isStepping) ? (openBlock(), createElementBlock("div", _hoisted_1$F, [
+              createVNode(unref(_sfc_main$P), mergeProps({
                 ref_key: "formRef",
                 ref: formRef,
                 modelValue: formData.value,
@@ -10084,9 +10113,9 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$D = { class: "label mb-05" };
-const _hoisted_2$q = { class: "ps-05 border-start" };
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _hoisted_1$E = { class: "label mb-05" };
+const _hoisted_2$s = { class: "-ms-05 ps-05 border-start" };
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "FieldArray",
   props: {
     el: { default: "div" },
@@ -10124,8 +10153,8 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        createElementVNode("p", _hoisted_1$D, toDisplayString(_ctx.label), 1),
-        createElementVNode("div", _hoisted_2$q, [
+        createElementVNode("p", _hoisted_1$E, toDisplayString(_ctx.label), 1),
+        createElementVNode("div", _hoisted_2$s, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(data2.value, (_2, i2) => {
             return openBlock(), createElementBlock("div", {
               key: i2,
@@ -10133,7 +10162,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
               thin: "",
               class: "mb-05 itemBox transition p-05"
             }, [
-              _ctx.schema ? (openBlock(), createBlock(unref(_sfc_main$O), {
+              _ctx.schema ? (openBlock(), createBlock(unref(_sfc_main$P), {
                 key: 0,
                 modelValue: data2.value[i2],
                 "onUpdate:modelValue": [($event) => data2.value[i2] = $event, emitValue],
@@ -10168,8 +10197,8 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$C = { class: "primary-checkbox" };
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _hoisted_1$D = { class: "primary-checkbox" };
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "Checkbox",
   props: {
     "modelValue": { type: Boolean, ...{ default: false } },
@@ -10179,7 +10208,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const val = useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", _hoisted_1$C, [
+      return openBlock(), createElementBlock("label", _hoisted_1$D, [
         renderSlot(_ctx.$slots, "label", {}, void 0, true),
         withDirectives(createElementVNode("input", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => val.value = $event),
@@ -10191,11 +10220,11 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-73f1d9ad"]]);
-const _hoisted_1$B = ["title"];
-const _hoisted_2$p = ["id", "value", "required"];
-const _hoisted_3$k = ["for"];
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-73f1d9ad"]]);
+const _hoisted_1$C = ["title"];
+const _hoisted_2$r = ["id", "value", "required"];
+const _hoisted_3$m = ["for"];
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "CheckInput",
   props: /* @__PURE__ */ mergeModels({
     label: {},
@@ -10229,27 +10258,27 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
           required: _ctx.required,
           type: "checkbox",
           class: "me-05"
-        }, null, 8, _hoisted_2$p), [
+        }, null, 8, _hoisted_2$r), [
           [vModelCheckbox, checked.value]
         ]),
         createElementVNode("label", { for: inputId.value }, [
           renderSlot(_ctx.$slots, "label", {}, () => [
             createTextVNode(toDisplayString(_ctx.label), 1)
           ], true)
-        ], 8, _hoisted_3$k)
-      ], 10, _hoisted_1$B);
+        ], 8, _hoisted_3$m)
+      ], 10, _hoisted_1$C);
     };
   }
 });
-const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-03ed2982"]]);
-const _hoisted_1$A = {
+const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-03ed2982"]]);
+const _hoisted_1$B = {
   key: 0,
   class: "code-editor-wrap grid rounded p-1 overflow hm-300px"
 };
-const _hoisted_2$o = { class: "overflow-hidden absolute inset-0 p-0 m-0 h-100 codeText" };
-const _hoisted_3$j = ["innerHTML"];
-const _hoisted_4$c = ["onKeydown"];
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _hoisted_2$q = { class: "overflow-hidden absolute inset-0 p-0 m-0 h-100 codeText" };
+const _hoisted_3$l = ["innerHTML"];
+const _hoisted_4$e = ["onKeydown"];
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "Index",
   props: {
     language: {},
@@ -10329,17 +10358,17 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       }
     }, { immediate: true });
     return (_ctx, _cache) => {
-      return unref(loaded) ? (openBlock(), createElementBlock("div", _hoisted_1$A, [
+      return unref(loaded) ? (openBlock(), createElementBlock("div", _hoisted_1$B, [
         createElementVNode("div", {
           class: "relative block h-100",
           style: normalizeStyle({ height: unref(height) })
         }, [
-          createElementVNode("pre", _hoisted_2$o, [
+          createElementVNode("pre", _hoisted_2$q, [
             _cache[2] || (_cache[2] = createTextVNode("				")),
             createElementVNode("code", {
               class: normalizeClass(className.value),
               innerHTML: highlightedCode.value
-            }, null, 10, _hoisted_3$j),
+            }, null, 10, _hoisted_3$l),
             _cache[3] || (_cache[3] = createTextVNode("\n			"))
           ]),
           !_ctx.readonly ? withDirectives((openBlock(), createElementBlock("textarea", {
@@ -10354,7 +10383,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             "data-gramm": "false",
             onKeydown: withKeys(withModifiers(handleTab, ["prevent"]), ["tab"]),
             onInput: _cache[1] || (_cache[1] = ($event) => emit2("update:modelValue", unref(code)))
-          }, null, 40, _hoisted_4$c)), [
+          }, null, 40, _hoisted_4$e)), [
             [vModelText, unref(code)]
           ]) : createCommentVNode("", true)
         ], 4)
@@ -10362,10 +10391,10 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-4f1dc18a"]]);
-const _hoisted_1$z = ["title"];
-const _hoisted_2$n = ["id", "placeholder", "required"];
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-4f1dc18a"]]);
+const _hoisted_1$A = ["title"];
+const _hoisted_2$p = ["id", "placeholder", "required"];
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "ColorPicker",
   props: {
     label: {},
@@ -10403,11 +10432,11 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
             placeholder: _ctx.placeholder || _ctx.label,
             class: { "no-edit": !_ctx.editMode },
             required: _ctx.required
-          }, _ctx.nativeInputAttrs), null, 16, _hoisted_2$n), [
+          }, _ctx.nativeInputAttrs), null, 16, _hoisted_2$p), [
             [vModelText, inputVal.value]
           ])
         ])
-      ], 10, _hoisted_1$z)) : createCommentVNode("", true);
+      ], 10, _hoisted_1$A)) : createCommentVNode("", true);
     };
   }
 });
@@ -11005,9 +11034,9 @@ function buildMatchFn(args) {
     }
     const matchedString = matchResult[0];
     const parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth];
-    const key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, (pattern) => pattern.test(matchedString)) : (
+    const key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, (pattern2) => pattern2.test(matchedString)) : (
       // eslint-disable-next-line @typescript-eslint/no-explicit-any -- I challange you to fix the type
-      findKey$1(parsePatterns, (pattern) => pattern.test(matchedString))
+      findKey$1(parsePatterns, (pattern2) => pattern2.test(matchedString))
     );
     let value;
     value = args.valueCallback ? args.valueCallback(key) : key;
@@ -11934,8 +11963,8 @@ function formatTimezone(offset2, delimiter = "") {
   const minutes = addLeadingZeros(absOffset % 60, 2);
   return sign2 + hours + delimiter + minutes;
 }
-const dateLongFormatter = (pattern, formatLong2) => {
-  switch (pattern) {
+const dateLongFormatter = (pattern2, formatLong2) => {
+  switch (pattern2) {
     case "P":
       return formatLong2.date({ width: "short" });
     case "PP":
@@ -11947,8 +11976,8 @@ const dateLongFormatter = (pattern, formatLong2) => {
       return formatLong2.date({ width: "full" });
   }
 };
-const timeLongFormatter = (pattern, formatLong2) => {
-  switch (pattern) {
+const timeLongFormatter = (pattern2, formatLong2) => {
+  switch (pattern2) {
     case "p":
       return formatLong2.time({ width: "short" });
     case "pp":
@@ -11960,12 +11989,12 @@ const timeLongFormatter = (pattern, formatLong2) => {
       return formatLong2.time({ width: "full" });
   }
 };
-const dateTimeLongFormatter = (pattern, formatLong2) => {
-  const matchResult = pattern.match(/(P+)(p+)?/) || [];
+const dateTimeLongFormatter = (pattern2, formatLong2) => {
+  const matchResult = pattern2.match(/(P+)(p+)?/) || [];
   const datePattern = matchResult[1];
   const timePattern = matchResult[2];
   if (!timePattern) {
-    return dateLongFormatter(pattern, formatLong2);
+    return dateLongFormatter(pattern2, formatLong2);
   }
   let dateTimeFormat;
   switch (datePattern) {
@@ -12293,8 +12322,8 @@ function mapValue(parseFnResult, mapFn) {
     rest: parseFnResult.rest
   };
 }
-function parseNumericPattern(pattern, dateString) {
-  const matchResult = dateString.match(pattern);
+function parseNumericPattern(pattern2, dateString) {
+  const matchResult = dateString.match(pattern2);
   if (!matchResult) {
     return null;
   }
@@ -12303,8 +12332,8 @@ function parseNumericPattern(pattern, dateString) {
     rest: dateString.slice(matchResult[0].length)
   };
 }
-function parseTimezonePattern(pattern, dateString) {
-  const matchResult = dateString.match(pattern);
+function parseTimezonePattern(pattern2, dateString) {
+  const matchResult = dateString.match(pattern2);
   if (!matchResult) {
     return null;
   }
@@ -18965,9 +18994,9 @@ const eo = ({
 Object.entries(go).forEach(([e, t]) => {
   e !== "default" && (Hn[e] = t);
 });
-const _hoisted_1$y = ["title"];
-const _hoisted_2$m = { key: 0 };
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _hoisted_1$z = ["title"];
+const _hoisted_2$o = { key: 0 };
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "DateInput",
   props: {
     required: { type: Boolean },
@@ -19009,7 +19038,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.label
       }, [
-        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$m, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
+        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$o, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
         createVNode(unref(Hn), mergeProps({
           ref_key: "datePicker",
           ref: datePicker,
@@ -19025,19 +19054,19 @@ const _sfc_main$H = /* @__PURE__ */ 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_2$l = { class: "date-wrap" };
-const _hoisted_3$i = {
+const _hoisted_1$y = { class: "datetime-wrap" };
+const _hoisted_2$n = { class: "date-wrap" };
+const _hoisted_3$k = {
   key: 0,
   class: "time-wrap"
 };
-const _hoisted_4$b = ["id", "name", "value"];
-const _hoisted_5$b = ["for"];
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _hoisted_4$d = ["id", "name", "value"];
+const _hoisted_5$c = ["for"];
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "DatePicker",
   props: {
     label: {},
@@ -19065,8 +19094,8 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       return `${hour}:${minute}`;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$x, [
-        createElementVNode("div", _hoisted_2$l, [
+      return openBlock(), createElementBlock("div", _hoisted_1$y, [
+        createElementVNode("div", _hoisted_2$n, [
           createVNode(unref(Hn), mergeProps({
             modelValue: selectedDate.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedDate.value = $event),
@@ -19084,7 +19113,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
             _: 1
           }, 16, ["modelValue", "allowed-dates", "disabled-dates"])
         ]),
-        _ctx.showTimeWrap ? (openBlock(), createElementBlock("div", _hoisted_3$i, [
+        _ctx.showTimeWrap ? (openBlock(), createElementBlock("div", _hoisted_3$k, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(hours), (hr2) => {
             return openBlock(), createElementBlock(Fragment, { key: hr2 }, [
               withDirectives(createElementVNode("input", {
@@ -19093,12 +19122,12 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
                 type: "radio",
                 name: _ctx.label,
                 value: hr2
-              }, null, 8, _hoisted_4$b), [
+              }, null, 8, _hoisted_4$d), [
                 [vModelRadio, selectedHour.value]
               ]),
               createElementVNode("label", {
                 for: `${hr2}_${_ctx.id}`
-              }, toDisplayString(hr2), 9, _hoisted_5$b)
+              }, toDisplayString(hr2), 9, _hoisted_5$c)
             ], 64);
           }), 128))
         ])) : createCommentVNode("", true)
@@ -19106,14 +19135,17 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$w = ["src", "alt", "width", "height"];
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _hoisted_1$x = { key: 0 };
+const _hoisted_2$m = ["src", "alt", "width", "height"];
+const _hoisted_3$j = ["src", "alt", "width", "height"];
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "Image",
   props: {
     src: {},
     alt: { default: "" },
     width: {},
-    height: {}
+    height: {},
+    caption: {}
   },
   setup(__props) {
     let imageSrc = ref(null);
@@ -19163,15 +19195,29 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     }
     watch(() => __props.src, loadImage, { immediate: true });
     return (_ctx, _cache) => {
-      return unref(imageSrc) ? (openBlock(), createElementBlock("img", mergeProps({
-        key: 0,
+      return _ctx.caption ? (openBlock(), createElementBlock("figcaption", _hoisted_1$x, [
+        unref(imageSrc) ? (openBlock(), createElementBlock("img", mergeProps({
+          key: 0,
+          src: unref(imageSrc)
+        }, _ctx.$attrs, {
+          alt: _ctx.alt,
+          width: unref(normalizeDimension)(_ctx.width),
+          height: unref(normalizeDimension)(_ctx.height)
+        }), null, 16, _hoisted_2$m)) : (openBlock(), createBlock(unref(Skeleton), {
+          key: 1,
+          class: "img-web-kit",
+          width: unref(normalizeDimension)(_ctx.width),
+          height: unref(normalizeDimension)(_ctx.height)
+        }, null, 8, ["width", "height"]))
+      ])) : unref(imageSrc) ? (openBlock(), createElementBlock("img", mergeProps({
+        key: 1,
         src: unref(imageSrc)
       }, _ctx.$attrs, {
         alt: _ctx.alt,
         width: unref(normalizeDimension)(_ctx.width),
         height: unref(normalizeDimension)(_ctx.height)
-      }), null, 16, _hoisted_1$w)) : (openBlock(), createBlock(unref(Skeleton), {
-        key: 1,
+      }), null, 16, _hoisted_3$j)) : (openBlock(), createBlock(unref(Skeleton), {
+        key: 2,
         class: "img-web-kit",
         width: unref(normalizeDimension)(_ctx.width),
         height: unref(normalizeDimension)(_ctx.height)
@@ -19179,22 +19225,22 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-a96b25a8"]]);
-const _hoisted_1$v = { class: "bagel-input" };
-const _hoisted_2$k = {
+const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-e7144f6e"]]);
+const _hoisted_1$w = { class: "bagel-input" };
+const _hoisted_2$l = {
   key: 0,
   placeholder: "required",
   type: "text",
   required: "",
   class: "pixel"
 };
-const _hoisted_3$h = { class: "m-05 flex opacity-7 z-99" };
-const _hoisted_4$a = { class: "ellipsis-1 word-break-all h-20 m-0" };
-const _hoisted_5$a = {
+const _hoisted_3$i = { class: "m-05 flex opacity-7 z-99" };
+const _hoisted_4$c = { class: "ellipsis-1 word-break-all h-20 m-0" };
+const _hoisted_5$b = {
   key: 1,
   class: "txt-gray txt-12"
 };
-const _hoisted_6$8 = {
+const _hoisted_6$9 = {
   key: 0,
   class: "bgl-multi-preview"
 };
@@ -19218,7 +19264,7 @@ const _hoisted_13$1 = {
   class: "progress"
 };
 const _hoisted_14 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "FileUpload",
   props: /* @__PURE__ */ mergeModels({
     label: {},
@@ -19392,10 +19438,10 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _directive_tooltip = resolveDirective("tooltip");
       const _directive_lightbox = resolveDirective("lightbox");
-      return openBlock(), createElementBlock("div", _hoisted_1$v, [
+      return openBlock(), createElementBlock("div", _hoisted_1$w, [
         createElementVNode("label", null, toDisplayString(_ctx.label), 1),
-        _ctx.required && !storageFiles.value.length ? (openBlock(), createElementBlock("input", _hoisted_2$k)) : createCommentVNode("", true),
-        _ctx.theme === "basic" ? (openBlock(), createBlock(unref(_sfc_main$W), {
+        _ctx.required && !storageFiles.value.length ? (openBlock(), createElementBlock("input", _hoisted_2$l)) : createCommentVNode("", true),
+        _ctx.theme === "basic" ? (openBlock(), createBlock(unref(_sfc_main$X), {
           key: 1,
           outline: "",
           class: "flex p-05 gap-1",
@@ -19420,7 +19466,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
                 key: file.id,
                 class: "txt-gray txt-12 flex"
               }, [
-                createElementVNode("div", _hoisted_3$h, [
+                createElementVNode("div", _hoisted_3$i, [
                   withDirectives(createVNode(unref(Btn), {
                     color: "gray",
                     thin: "",
@@ -19449,7 +19495,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
                   }, null, 8, ["href", "download"]), [
                     [_directive_tooltip, "Download"]
                   ]),
-                  withDirectives((openBlock(), createElementBlock("p", _hoisted_4$a, [
+                  withDirectives((openBlock(), createElementBlock("p", _hoisted_4$c, [
                     createTextVNode(toDisplayString(file.name), 1)
                   ])), [
                     [_directive_lightbox, { src: file.url, download: true }]
@@ -19464,7 +19510,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
                 ])
               ]);
             }), 128)),
-            !storageFiles.value.length && !fileQueue.value.length ? (openBlock(), createElementBlock("span", _hoisted_5$a, " No file selected ")) : createCommentVNode("", true)
+            !storageFiles.value.length && !fileQueue.value.length ? (openBlock(), createElementBlock("span", _hoisted_5$b, " No file selected ")) : createCommentVNode("", true)
           ]),
           _: 1
         })) : (openBlock(), createElementBlock("div", {
@@ -19484,7 +19530,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
             files: storageFiles.value,
             fileQueue: fileQueue.value
           }, () => [
-            _ctx.multiple ? (openBlock(), createElementBlock("div", _hoisted_6$8, [
+            _ctx.multiple ? (openBlock(), createElementBlock("div", _hoisted_6$9, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(storageFiles.value, (file) => {
                 return withDirectives((openBlock(), createElementBlock("div", {
                   key: file.id,
@@ -19640,11 +19686,11 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-6bfdaea2"]]);
-const _hoisted_1$u = ["title"];
-const _hoisted_2$j = { key: 0 };
-const _hoisted_3$g = ["value", "placeholder"];
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-6bfdaea2"]]);
+const _hoisted_1$v = ["title"];
+const _hoisted_2$k = { key: 0 };
+const _hoisted_3$h = ["value", "placeholder"];
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "JSONInput",
   props: {
     description: { default: "" },
@@ -19667,7 +19713,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.description
       }, [
-        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$j, [
+        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$k, [
           createVNode(_component_LangText, { input: _ctx.label }, null, 8, ["input"])
         ])) : createCommentVNode("", true),
         createElementVNode("textarea", {
@@ -19675,12 +19721,164 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
           class: normalizeClass({ "no-edit": !_ctx.editMode }),
           placeholder: _ctx.placeholder,
           onInput: handleInput
-        }, null, 42, _hoisted_3$g)
-      ], 10, _hoisted_1$u);
+        }, null, 42, _hoisted_3$h)
+      ], 10, _hoisted_1$v);
     };
   }
 });
-const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-1cbaeab2"]]);
+const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-1cbaeab2"]]);
+const _hoisted_1$u = ["for"];
+const _hoisted_2$j = ["id", "placeholder", "disabled", "required", "readonly", "onKeydown"];
+const _hoisted_3$g = { key: 1 };
+const _hoisted_4$b = {
+  key: 5,
+  class: "flex column spinner"
+};
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
+  __name: "NumberInput",
+  props: {
+    modelValue: {},
+    min: {},
+    max: {},
+    step: { default: 1 },
+    spinner: { type: Boolean, default: true },
+    iconStart: {},
+    icon: {},
+    label: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    required: { type: Boolean },
+    id: {},
+    helptext: {},
+    layout: {},
+    center: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const emit2 = __emit;
+    let numberValue = ref(0);
+    const btnLayouts = ["horizontal", "vertical"];
+    function increment() {
+      if (!__props.max || numberValue.value + __props.step <= __props.max) {
+        numberValue.value = (numberValue.value || 0) + __props.step;
+        emit2("update:modelValue", numberValue.value);
+      }
+    }
+    function decrement() {
+      if (!__props.min || numberValue.value - __props.step >= __props.min) {
+        numberValue.value = (numberValue.value || 0) - __props.step;
+        emit2("update:modelValue", numberValue.value);
+      }
+    }
+    function formatNumber2(num) {
+      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    }
+    let formattedValue = ref("");
+    function inputHandler() {
+      const numeric = formattedValue.value.replace(/[^\d.-]/g, "");
+      if (numeric === "" || numeric === "-" || numeric === "." || numeric === "-." || numeric.endsWith(".")) return;
+      numberValue.value = Number.parseFloat(numeric);
+      formattedValue.value = formatNumber2(numberValue.value);
+      emit2("update:modelValue", numberValue.value);
+    }
+    watch(() => numberValue.value, () => {
+      formattedValue.value = formatNumber2(numberValue.value);
+    }, { immediate: true });
+    watch(() => __props.modelValue, (newVal) => {
+      if (newVal !== numberValue.value) {
+        numberValue.value = newVal;
+      }
+    }, { immediate: true });
+    return (_ctx, _cache) => {
+      const _directive_pattern = resolveDirective("pattern");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["bagel-input num-input", {
+          textInputSpinnerWrap: _ctx.icon || _ctx.spinner,
+          txtInputIconStart: _ctx.iconStart
+        }])
+      }, [
+        createElementVNode("label", { for: _ctx.id }, [
+          createTextVNode(toDisplayString(_ctx.label) + " ", 1),
+          createElementVNode("div", {
+            class: normalizeClass(["gap-025", { "column flex": _ctx.layout === "vertical", "flex": _ctx.layout === "horizontal" }])
+          }, [
+            _ctx.layout && btnLayouts.includes(_ctx.layout) ? (openBlock(), createBlock(unref(Btn), {
+              key: 0,
+              icon: "add",
+              class: normalizeClass(["radius", [{ "bgl-big-ctrl-num-btn": _ctx.layout === "vertical" }]]),
+              onClick: increment
+            }, null, 8, ["class"])) : createCommentVNode("", true),
+            withDirectives(createElementVNode("input", {
+              id: _ctx.id,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(formattedValue) ? formattedValue.value = $event : formattedValue = $event),
+              type: "text",
+              class: normalizeClass({ "txt-center": _ctx.center, "min0": _ctx.layout }),
+              placeholder: _ctx.placeholder || _ctx.label,
+              disabled: _ctx.disabled,
+              required: _ctx.required,
+              readonly: _ctx.disabled,
+              inputmode: "numeric",
+              autocomplete: "off",
+              autocorrect: "off",
+              spellcheck: "false",
+              onInput: inputHandler,
+              onKeydown: [
+                withKeys(withModifiers(increment, ["prevent"]), ["up"]),
+                withKeys(withModifiers(decrement, ["prevent"]), ["down"])
+              ]
+            }, null, 42, _hoisted_2$j), [
+              [
+                vModelText,
+                unref(formattedValue),
+                void 0,
+                { trim: true }
+              ],
+              [
+                _directive_pattern,
+                void 0,
+                void 0,
+                { number: true }
+              ]
+            ]),
+            _ctx.helptext ? (openBlock(), createElementBlock("p", _hoisted_3$g, toDisplayString(_ctx.helptext), 1)) : createCommentVNode("", true),
+            _ctx.iconStart ? (openBlock(), createBlock(unref(_sfc_main$c), {
+              key: 2,
+              class: "iconStart",
+              icon: _ctx.iconStart
+            }, null, 8, ["icon"])) : createCommentVNode("", true),
+            _ctx.icon ? (openBlock(), createBlock(unref(_sfc_main$c), {
+              key: 3,
+              icon: _ctx.icon
+            }, null, 8, ["icon"])) : createCommentVNode("", true),
+            _ctx.layout && btnLayouts.includes(_ctx.layout) ? (openBlock(), createBlock(unref(Btn), {
+              key: 4,
+              icon: "remove",
+              class: normalizeClass(["radius", [{ "bgl-big-ctrl-num-btn": _ctx.layout === "vertical" }]]),
+              onClick: decrement
+            }, null, 8, ["class"])) : createCommentVNode("", true),
+            _ctx.spinner && (!_ctx.layout || !btnLayouts.includes(_ctx.layout)) ? (openBlock(), createElementBlock("div", _hoisted_4$b, [
+              createVNode(unref(Btn), {
+                icon: "add",
+                flat: "",
+                thin: "",
+                class: "bgl-ctrl-num-btn",
+                onClick: increment
+              }),
+              createVNode(unref(Btn), {
+                icon: "remove",
+                flat: "",
+                thin: "",
+                class: "bgl-ctrl-num-btn",
+                onClick: decrement
+              })
+            ])) : createCommentVNode("", true)
+          ], 2)
+        ], 8, _hoisted_1$u)
+      ], 2);
+    };
+  }
+});
+const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-7b056cf2"]]);
 const _hoisted_1$t = ["value", "autofocus", "onKeydown", "onPaste"];
 const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "OTP",
@@ -19853,9 +20051,9 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
 const _hoisted_1$s = ["for"];
 const _hoisted_2$i = ["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$9 = ["src", "alt"];
-const _hoisted_5$9 = { class: "" };
-const _hoisted_6$7 = {
+const _hoisted_4$a = ["src", "alt"];
+const _hoisted_5$a = { class: "" };
+const _hoisted_6$8 = {
   key: 0,
   class: "m-0 m_txt-14"
 };
@@ -19901,9 +20099,9 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
                 width: "60",
                 src: opt.imgSrc,
                 alt: opt.imgAlt
-              }, null, 8, _hoisted_4$9)) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_5$9, [
-                opt.label ? (openBlock(), createElementBlock("p", _hoisted_6$7, toDisplayString(opt.label), 1)) : createCommentVNode("", true),
+              }, null, 8, _hoisted_4$a)) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_5$a, [
+                opt.label ? (openBlock(), createElementBlock("p", _hoisted_6$8, toDisplayString(opt.label), 1)) : createCommentVNode("", true),
                 opt.subLabel ? (openBlock(), createElementBlock("p", _hoisted_7$4, toDisplayString(opt.subLabel), 1)) : createCommentVNode("", true)
               ]),
               renderSlot(_ctx.$slots, "radioItem", mergeProps({ ref_for: true }, opt), void 0, true)
@@ -19926,8 +20124,8 @@ const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data
 const _hoisted_1$r = { class: "bagel-input" };
 const _hoisted_2$h = { class: "pb-025" };
 const _hoisted_3$e = { class: "flex gap-05 flex-wrap" };
-const _hoisted_4$8 = ["id", "name", "value", "checked"];
-const _hoisted_5$8 = ["for"];
+const _hoisted_4$9 = ["id", "name", "value", "checked"];
+const _hoisted_5$9 = ["for"];
 const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "RadioPillsInput",
   props: {
@@ -19984,10 +20182,10 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
                 value: getValue(option2),
                 checked: unref(selectedValue) === getValue(option2),
                 onChange: handleSelect
-              }, null, 40, _hoisted_4$8),
+              }, null, 40, _hoisted_4$9),
               createElementVNode("label", {
                 for: `${_ctx.id}-${getValue(option2)}`
-              }, toDisplayString(getLabel(option2)), 9, _hoisted_5$8)
+              }, toDisplayString(getLabel(option2)), 9, _hoisted_5$9)
             ]);
           }), 128))
         ])
@@ -19996,76 +20194,113 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-cf892d71"]]);
-const _hoisted_1$q = { key: 0 };
-const _hoisted_2$g = ["id", "disabled", "max", "min", "step", "required", "name"];
-const _hoisted_3$d = { key: 1 };
+const _hoisted_1$q = { class: "label" };
+const _hoisted_2$g = { class: "range-slider relative w-100" };
+const _hoisted_3$d = ["id", "min", "max", "step", "required", "disabled"];
+const _hoisted_4$8 = ["min", "max", "step", "required", "disabled"];
+const _hoisted_5$8 = { class: "track absolute pointer-events-none overflow-hidden round" };
+const _hoisted_6$7 = { class: "txt-center txt-14 range-slider-txt flex space-between opacity-4 mx-05" };
 const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "RangeInput",
-  props: /* @__PURE__ */ mergeModels({
-    min: {},
-    max: {},
-    step: {},
+  props: {
+    min: { default: 0 },
+    max: { default: 100 },
+    modelValue: {},
+    step: { default: 1 },
+    required: { type: Boolean },
+    label: {},
     disabled: { type: Boolean },
     id: {},
-    name: {},
-    required: { type: Boolean },
-    thickness: { default: "8px" }
-  }, {
-    "modelValue": { default: 0 },
-    "modelModifiers": {}
-  }),
+    rtl: { type: Boolean }
+  },
   emits: ["update:modelValue"],
-  setup(__props) {
-    const val = useModel(__props, "modelValue");
-    const range2 = ref();
-    const direction = computed(() => {
-      if (!range2.value) return "ltr";
-      const parent = range2.value.parentElement;
-      return getComputedStyle(parent).direction;
-    });
-    const background = computed(() => {
-      const minVal = __props.min ?? 0;
-      const maxVal = __props.max ?? 100;
-      const percentage = (val.value - minVal) / (maxVal - minVal) * 100;
-      if (direction.value === "rtl") {
-        return `linear-gradient(to left, var(--bgl-primary) ${percentage}%, var(--input-bg) ${percentage}%)`;
-      }
-      return `linear-gradient(to right, var(--bgl-primary) ${percentage}%, var(--input-bg) ${percentage}%)`;
+  setup(__props, { emit: __emit }) {
+    const emit2 = __emit;
+    const isRange = computed(() => Array.isArray(__props.modelValue));
+    let from = ref(__props.min);
+    let to2 = ref(__props.max);
+    const validFrom = computed(() => Math.min(Math.max(from.value, __props.min), to2.value));
+    const validTo = computed(() => Math.max(Math.min(to2.value, __props.max), from.value));
+    function emitValue() {
+      emit2("update:modelValue", isRange.value ? [validFrom.value, validTo.value] : validFrom.value);
+    }
+    watch(() => validFrom.value, (newVal) => {
+      if (from.value !== newVal) from.value = newVal;
     });
-    watch(() => val.value, (newValue) => {
-      if (__props.min !== void 0 && newValue < __props.min) val.value = __props.min;
-      if (__props.max !== void 0 && newValue > __props.max) val.value = __props.max;
+    watch(() => validTo.value, (newVal) => {
+      if (to2.value !== newVal) to2.value = newVal;
     });
-    const height = computed(() => {
-      return Number.isNaN(Number(__props.thickness)) ? __props.thickness : `${__props.thickness}px`;
+    const fromPercentage = computed(() => (validFrom.value - __props.min) / (__props.max - __props.min) * 100);
+    const toPercentage = computed(() => (validTo.value - __props.min) / (__props.max - __props.min) * 100);
+    const rangeStyle = computed(() => {
+      const width = (validTo.value - validFrom.value) / (__props.max - __props.min) * 100;
+      if (__props.rtl || isRange.value) return { left: `${fromPercentage.value}%`, width: `${width}%` };
+      return { right: `${width}%`, width: `${fromPercentage.value}%` };
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["flex gap-1 align-center range-slide", { disabled: _ctx.disabled }])
-      }, [
-        _ctx.min !== void 0 ? (openBlock(), createElementBlock("p", _hoisted_1$q, toDisplayString(_ctx.min), 1)) : createCommentVNode("", true),
-        withDirectives(createElementVNode("input", {
-          id: _ctx.id,
-          ref_key: "range",
-          ref: range2,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => val.value = $event),
-          disabled: _ctx.disabled,
-          style: normalizeStyle({ background: background.value, height: height.value }),
-          max: _ctx.max,
-          min: _ctx.min,
-          step: _ctx.step,
-          required: _ctx.required,
-          type: "range",
-          name: _ctx.name
-        }, null, 12, _hoisted_2$g), [
-          [vModelText, val.value]
+      return openBlock(), createElementBlock("div", null, [
+        createElementVNode("label", _hoisted_1$q, toDisplayString(_ctx.label), 1),
+        createElementVNode("div", _hoisted_2$g, [
+          withDirectives(createElementVNode("input", {
+            id: _ctx.id,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(from) ? from.value = $event : from = $event),
+            class: "from",
+            type: "range",
+            min: _ctx.min,
+            max: _ctx.max,
+            step: _ctx.step,
+            required: _ctx.required,
+            disabled: _ctx.disabled,
+            "aria-label": "Minimum value",
+            onChange: emitValue
+          }, null, 40, _hoisted_3$d), [
+            [vModelText, unref(from)]
+          ]),
+          isRange.value ? withDirectives((openBlock(), createElementBlock("input", {
+            key: 0,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(to2) ? to2.value = $event : to2 = $event),
+            class: "to",
+            type: "range",
+            min: _ctx.min,
+            max: _ctx.max,
+            step: _ctx.step,
+            required: _ctx.required,
+            disabled: _ctx.disabled,
+            "aria-label": "Maximum value",
+            onChange: emitValue
+          }, null, 40, _hoisted_4$8)), [
+            [vModelText, unref(to2)]
+          ]) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_5$8, [
+            createElementVNode("div", {
+              class: "active-range absolute h-100 pointer-events-none bg-primary",
+              style: normalizeStyle(rangeStyle.value)
+            }, null, 4)
+          ]),
+          unref(from) !== _ctx.min ? (openBlock(), createElementBlock("p", {
+            key: 1,
+            class: "txt-center txt-12 range-slider-position-txt absolute line-height-1 opacity-0",
+            style: normalizeStyle({ "--progress": `${fromPercentage.value}` })
+          }, [
+            createElementVNode("span", null, toDisplayString(unref(from)), 1)
+          ], 4)) : createCommentVNode("", true),
+          isRange.value && unref(to2) !== _ctx.max ? (openBlock(), createElementBlock("p", {
+            key: 2,
+            class: "txt-center txt-12 range-slider-position-txt opacity-0 line-height-1 absolute",
+            style: normalizeStyle({ "--progress": `${toPercentage.value}` })
+          }, [
+            createElementVNode("span", null, toDisplayString(unref(to2)), 1)
+          ], 4)) : createCommentVNode("", true)
         ]),
-        _ctx.max !== void 0 ? (openBlock(), createElementBlock("p", _hoisted_3$d, toDisplayString(_ctx.max), 1)) : createCommentVNode("", true)
-      ], 2);
+        createElementVNode("p", _hoisted_6$7, [
+          createElementVNode("span", null, toDisplayString(_ctx.min), 1),
+          createElementVNode("span", null, toDisplayString(_ctx.max), 1)
+        ])
+      ]);
     };
   }
 });
-const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-ded4d62d"]]);
+const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-df7a13a5"]]);
 const defaultToolbarConfig = [
   "h2",
   "h3",
@@ -20212,7 +20447,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", _hoisted_1$o, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.config.map(configToOption).filter(Boolean), (action, index2) => {
           return openBlock(), createElementBlock(Fragment, { key: index2 }, [
-            action.name === "insertTable" ? (openBlock(), createBlock(unref(_sfc_main$S), {
+            action.name === "insertTable" ? (openBlock(), createBlock(unref(_sfc_main$T), {
               key: 0,
               placement: "bottom-start",
               thin: "",
@@ -21152,7 +21387,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$S), {
+      return openBlock(), createBlock(unref(_sfc_main$T), {
         ref_key: "dropdown",
         ref: dropdown,
         shown: unref(open),
@@ -21231,7 +21466,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
             height: "25px",
             class: "mx-1 my-1"
           })) : createCommentVNode("", true),
-          createVNode(unref(_sfc_main$W), {
+          createVNode(unref(_sfc_main$X), {
             class: "p-05",
             style: normalizeStyle({ width: _ctx.fullWidth ? "100%" : "auto" })
           }, {
@@ -22155,9 +22390,9 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 var version = "1.14.0";
-function userAgent(pattern) {
+function userAgent(pattern2) {
   if (typeof window !== "undefined" && window.navigator) {
-    return !!/* @__PURE__ */ navigator.userAgent.match(pattern);
+    return !!/* @__PURE__ */ navigator.userAgent.match(pattern2);
   }
 }
 var IE11OrLess = userAgent(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i);
@@ -27607,7 +27842,7 @@ var Format = /* @__PURE__ */ function() {
   }
   _createClass$1(Format2, [{
     key: "pattern",
-    value: function pattern() {
+    value: function pattern2() {
       return this._format[0];
     }
   }, {
@@ -27659,7 +27894,7 @@ var Type = /* @__PURE__ */ function() {
   }
   _createClass$1(Type2, [{
     key: "pattern",
-    value: function pattern() {
+    value: function pattern2() {
       if (this.metadata.v1) return this.type;
       return this.type[0];
     }
@@ -28337,7 +28572,7 @@ function _defineProperties(target, props2) {
   }
 }
 function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  _defineProperties(Constructor.prototype, protoProps);
   Object.defineProperty(Constructor, "prototype", { writable: false });
   return Constructor;
 }
@@ -29389,7 +29624,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
               withKeys(reset, ["tab"])
             ]
           }, [
-            !computedDropDownOptions.value.hide ? (openBlock(), createBlock(unref(_sfc_main$S), {
+            !computedDropDownOptions.value.hide ? (openBlock(), createBlock(unref(_sfc_main$T), {
               key: 0,
               ref_key: "phoneDropdown",
               ref: phoneDropdown,
@@ -29754,7 +29989,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$W), { class: "hide m_grid gap-05 bgl_bottombar px-1 txt14 justify-content-start align-items-center overflow-x" }, {
+      return openBlock(), createBlock(unref(_sfc_main$X), { class: "hide m_grid gap-05 bgl_bottombar px-1 txt14 justify-content-start align-items-center overflow-x" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "brand", {}, void 0, true),
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.navLinks, (nav, i2) => {
@@ -29855,7 +30090,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           icon: "keyboard_arrow_right",
           onClick: unref(toggleMenu)
         }, null, 8, ["onClick"]),
-        createVNode(unref(_sfc_main$W), { class: "py-1 px-05 h-100 flex column gap-05 rounded relative bg-primary font-light overflow-y" }, {
+        createVNode(unref(_sfc_main$X), { class: "py-1 px-05 h-100 flex column gap-05 rounded relative bg-primary font-light overflow-y" }, {
           default: withCtx(() => [
             !unref(isOpen) || !unref(slots)["brand-open"] ? renderSlot(_ctx.$slots, "brand", { key: 0 }, void 0, true) : createCommentVNode("", true),
             unref(isOpen) ? renderSlot(_ctx.$slots, "brand-open", { key: 1 }, void 0, true) : createCommentVNode("", true),
@@ -30376,7 +30611,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         onClick: _cache[1] || (_cache[1] = () => _ctx.dismissable ? closeModal() : ""),
         onKeydown: withKeys(closeModal, ["esc"])
       }, [
-        createVNode(unref(_sfc_main$W), {
+        createVNode(unref(_sfc_main$X), {
           class: "modal",
           style: normalizeStyle({ ...maxWidth.value }),
           onClick: _cache[0] || (_cache[0] = withModifiers(() => {
@@ -30553,7 +30788,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => emit2("update:visible", $event))
       }, createSlots({
         default: withCtx(() => [
-          _ctx.visible ? (openBlock(), createBlock(unref(_sfc_main$O), {
+          _ctx.visible ? (openBlock(), createBlock(unref(_sfc_main$P), {
             key: 0,
             ref_key: "form",
             ref: form,
@@ -31671,7 +31906,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                         row,
                         field
                       }, void 0, true) : (openBlock(), createElementBlock("div", _hoisted_10$1, [
-                        createVNode(unref(_sfc_main$P), {
+                        createVNode(unref(_sfc_main$Q), {
                           class: "embedded-field",
                           field,
                           modelValue: row,
@@ -32707,7 +32942,7 @@ function openClickHandler(e, el, binding) {
   const lightboxInstance2 = getLightboxInstance();
   if (!lightboxInstance2 || !lightboxInstance2.open) return;
   const open = lightboxInstance2.open;
-  const group = item && item.group ? groups[item.group] : void 0;
+  const group = item.group ? groups[item.group] : void 0;
   open(item, group);
 }
 function bindingToItem(binding, el) {
@@ -32747,6 +32982,179 @@ const Lightbox = {
     app.directive("lightbox", lightboxDirective);
   }
 };
+const DEFAULT_PATTERNS = {
+  pint: { pattern: /\d/ },
+  int: { pattern: /[\d\-]/ },
+  pnum: { pattern: /[\d.]/ },
+  money: { pattern: /[\d.\s,]/ },
+  number: { pattern: /[\d\-.]/ },
+  num: { pattern: /[\d\-.]/ },
+  hex: { pattern: /[0-9a-f]/i },
+  email: { pattern: /[\w.\-@]/ },
+  alpha: { pattern: /[a-z_]/i },
+  alphanum: { pattern: /\w/ },
+  lower: { pattern: /[a-z]/, transform: (v2) => v2.toLowerCase() },
+  upper: { pattern: /[A-Z]/, transform: (v2) => v2.toUpperCase() },
+  slug: { pattern: /[a-z0-9-]/i, transform: (v2) => v2.toLowerCase().replace(/\s/g, "-") }
+};
+const stateMap = /* @__PURE__ */ new WeakMap();
+function getTarget(el) {
+  if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+    return el;
+  }
+  const target = el.querySelector("input, textarea");
+  return target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement ? target : null;
+}
+function getModifiers(binding) {
+  const modifiers = Object.keys(binding.modifiers || {});
+  return modifiers.length ? modifiers[modifiers.length - 1] : "";
+}
+function getRegex(state2) {
+  if (state2.pattern) return state2.pattern;
+  if (state2.modifier) return DEFAULT_PATTERNS[state2.modifier].pattern || /./;
+  return /./;
+}
+function bindEvents(el, target, state2) {
+  state2.keydownEvent = (event) => {
+    onKeydown(event, target, state2);
+  };
+  state2.pasteEvent = (event) => {
+    onPaste(event, target, state2);
+  };
+  target.addEventListener("keydown", state2.keydownEvent);
+  target.addEventListener("paste", state2.pasteEvent);
+}
+function unbindEvents(target, state2) {
+  if (state2.keydownEvent) target.removeEventListener("keydown", state2.keydownEvent);
+  if (state2.pasteEvent) target.removeEventListener("paste", state2.pasteEvent);
+  state2.keydownEvent = void 0;
+  state2.pasteEvent = void 0;
+}
+function onKeydown(event, target, state2) {
+  if (event.ctrlKey || event.altKey || event.metaKey || event.key === "Tab" || event.key === "Backspace" || event.key === "Delete" || event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Enter") return;
+  const regex2 = getRegex(state2);
+  const testKey = event.key;
+  if (!regex2.test(testKey)) {
+    event.preventDefault();
+  } else if (state2.modifier) {
+    const { transform } = DEFAULT_PATTERNS[state2.modifier];
+    if (transform) {
+      event.preventDefault();
+      const transformedValue = transform(testKey);
+      const cursorPos = target.selectionStart ?? 0;
+      const newValue = target.value.slice(0, cursorPos) + transformedValue + target.value.slice(cursorPos);
+      target.value = newValue;
+      target.setSelectionRange(cursorPos + transformedValue.length, cursorPos + transformedValue.length);
+    }
+  }
+}
+function onPaste(event, target, state2) {
+  var _a2;
+  const regex2 = getRegex(state2);
+  const clipboardData = ((_a2 = event.clipboardData) == null ? void 0 : _a2.getData("text")) || "";
+  if (!regex2.test(clipboardData)) {
+    event.preventDefault();
+  } else if (state2.modifier) {
+    const { transform } = DEFAULT_PATTERNS[state2.modifier];
+    if (transform) {
+      event.preventDefault();
+      const transformedValue = transform(clipboardData);
+      const cursorPos = target.selectionStart ?? 0;
+      const newValue = target.value.slice(0, cursorPos) + transformedValue + target.value.slice(cursorPos);
+      target.value = newValue;
+      target.setSelectionRange(cursorPos + transformedValue.length, cursorPos + transformedValue.length);
+    }
+  }
+}
+const pattern = {
+  beforeMount(el, binding) {
+    const target = getTarget(el);
+    if (!target) return;
+    const state2 = {
+      modifier: getModifiers(binding)
+    };
+    if (typeof binding.value === "object") {
+      state2.pattern = binding.value.pattern || /./;
+      state2.validateOnly = binding.value.validateOnly || false;
+    }
+    stateMap.set(el, state2);
+    bindEvents(el, target, state2);
+  },
+  updated(el, binding) {
+    const target = getTarget(el);
+    if (!target) return;
+    const state2 = stateMap.get(el);
+    if (!state2) return;
+    unbindEvents(target, state2);
+    state2.modifier = getModifiers(binding);
+    if (typeof binding.value === "object") {
+      state2.pattern = binding.value.pattern || /./;
+      state2.validateOnly = binding.value.validateOnly || false;
+    }
+    bindEvents(el, target, state2);
+  },
+  unmounted(el) {
+    const target = getTarget(el);
+    const state2 = stateMap.get(el);
+    if (target && state2) {
+      unbindEvents(target, state2);
+    }
+    stateMap.delete(el);
+  }
+};
+const ripple = {
+  mounted(el, binding) {
+    const clickHandler2 = (e) => {
+      const rect = el.getBoundingClientRect();
+      const size2 = Math.max(rect.width, rect.height);
+      const ripple2 = document.createElement("span");
+      ripple2.className = "ripple";
+      Object.assign(ripple2.style, {
+        width: `${size2}px`,
+        height: `${size2}px`,
+        left: `${e.clientX - rect.left - size2 / 2}px`,
+        top: `${e.clientY - rect.top - size2 / 2}px`,
+        position: "absolute",
+        borderRadius: "50%",
+        transform: "scale(0)",
+        background: "rgba(0, 0, 0, 0.3)",
+        pointerEvents: "none",
+        animation: "rippleEffect 0.6s ease-out"
+      });
+      el.appendChild(ripple2);
+      setTimeout(() => {
+        ripple2.remove();
+      }, 600);
+    };
+    el.__rippleClickHandler = clickHandler2;
+    if (binding.value !== false) {
+      if (getComputedStyle(el).position === "static") {
+        el.style.position = "relative";
+      }
+      el.style.overflow = "hidden";
+      el.addEventListener("mousedown", clickHandler2);
+    }
+  },
+  updated(el, binding) {
+    const clickHandler2 = el.__rippleClickHandler;
+    if (binding.value === false) {
+      el.removeEventListener("mousedown", clickHandler2);
+    } else {
+      if (getComputedStyle(el).position === "static") {
+        el.style.position = "relative";
+      }
+      el.style.overflow = "hidden";
+      el.addEventListener("mousedown", clickHandler2);
+    }
+  },
+  unmounted(el) {
+    const clickHandler2 = el.__rippleClickHandler;
+    if (clickHandler2) {
+      el.removeEventListener("mousedown", clickHandler2);
+      delete el.__rippleClickHandler;
+    }
+  }
+};
 function getBaseField(id, labelOrRest = {}, rest = {}) {
   if (typeof labelOrRest === "object") return { id, ...labelOrRest };
   return { id, label: labelOrRest, ...rest };
@@ -32793,7 +33201,8 @@ function slctField(id, label, options, config) {
       disabled: config == null ? void 0 : config.disabled,
       searchable: config == null ? void 0 : config.searchable,
       multiselect: config == null ? void 0 : config.multiselect,
-      onSearch: config == null ? void 0 : config.onSearch
+      onSearch: config == null ? void 0 : config.onSearch,
+      clearable: config == null ? void 0 : config.clearable
     }
   };
 }
@@ -32851,7 +33260,7 @@ function frmRow(...children2) {
 function bglForm(idOrField, ...schema) {
   if (typeof idOrField === "string") {
     return {
-      $el: markRaw(_sfc_main$O),
+      $el: markRaw(_sfc_main$P),
       id: idOrField,
       attrs: {
         schema: [idOrField, ...schema]
@@ -32859,7 +33268,7 @@ function bglForm(idOrField, ...schema) {
     };
   }
   return {
-    $el: markRaw(_sfc_main$O),
+    $el: markRaw(_sfc_main$P),
     attrs: {
       schema: [idOrField, ...schema]
     }
@@ -32883,6 +33292,14 @@ function findBglFieldById(id, _schema) {
   }
   return void 0;
 }
+function arrField(id, label, schema, options) {
+  return {
+    label,
+    id,
+    $el: "array",
+    attrs: { schema, delete: true, add: true, ...options }
+  };
+}
 const state = reactive({
   defaultLang: "",
   availableLangs: [],
@@ -33067,59 +33484,6 @@ const clickOutside = {
     document.removeEventListener("click", el.clickOutsideEvent);
   }
 };
-const ripple = {
-  mounted(el, binding) {
-    const clickHandler2 = (e) => {
-      const rect = el.getBoundingClientRect();
-      const size2 = Math.max(rect.width, rect.height);
-      const ripple2 = document.createElement("span");
-      ripple2.className = "ripple";
-      Object.assign(ripple2.style, {
-        width: `${size2}px`,
-        height: `${size2}px`,
-        left: `${e.clientX - rect.left - size2 / 2}px`,
-        top: `${e.clientY - rect.top - size2 / 2}px`,
-        position: "absolute",
-        borderRadius: "50%",
-        transform: "scale(0)",
-        background: "rgba(0, 0, 0, 0.3)",
-        pointerEvents: "none",
-        animation: "rippleEffect 0.6s ease-out"
-      });
-      el.appendChild(ripple2);
-      setTimeout(() => {
-        ripple2.remove();
-      }, 600);
-    };
-    el.__rippleClickHandler = clickHandler2;
-    if (binding.value !== false) {
-      if (getComputedStyle(el).position === "static") {
-        el.style.position = "relative";
-      }
-      el.style.overflow = "hidden";
-      el.addEventListener("mousedown", clickHandler2);
-    }
-  },
-  updated(el, binding) {
-    const clickHandler2 = el.__rippleClickHandler;
-    if (binding.value === false) {
-      el.removeEventListener("mousedown", clickHandler2);
-    } else {
-      if (getComputedStyle(el).position === "static") {
-        el.style.position = "relative";
-      }
-      el.style.overflow = "hidden";
-      el.addEventListener("mousedown", clickHandler2);
-    }
-  },
-  unmounted(el) {
-    const clickHandler2 = el.__rippleClickHandler;
-    if (clickHandler2) {
-      el.removeEventListener("mousedown", clickHandler2);
-      delete el.__rippleClickHandler;
-    }
-  }
-};
 const bagelInjectionKey = Symbol("bagel");
 const i18nTInjectionKey = Symbol("bagel");
 function useBagel() {
@@ -33137,6 +33501,7 @@ const BagelVue = {
     const bagel = new Bagel({ host: options.host, onError: options.onError });
     app.directive("click-outside", clickOutside);
     app.directive("ripple", ripple);
+    app.directive("pattern", pattern);
     app.use(Lightbox);
     app.use(Gt$1, {
       themes: {
@@ -33633,31 +33998,31 @@ function timeAgo(date2, lang = "en") {
   return selectedLang.justNow;
 }
 export {
-  _sfc_main$12 as Accordion,
+  _sfc_main$13 as Accordion,
   AccordionItem,
-  _sfc_main$10 as AddressSearch,
+  _sfc_main$11 as AddressSearch,
   Alert,
   Avatar,
   Badge,
-  _sfc_main$O as BagelForm,
+  _sfc_main$P as BagelForm,
   BagelVue,
-  _sfc_main$P as BglField,
-  _sfc_main$O as BglForm,
-  _sfc_main$N as BglMultiStepForm,
+  _sfc_main$Q as BglField,
+  _sfc_main$P as BglForm,
+  _sfc_main$O as BglMultiStepForm,
   BglVideo,
   BottomMenu,
   Btn,
-  _sfc_main$W as Card,
+  _sfc_main$X as Card,
   Carousel,
   CheckInput,
   Checkbox,
   CodeEditor,
-  _sfc_main$I as ColorPicker,
+  _sfc_main$J as ColorPicker,
   DataPreview,
-  _sfc_main$H as DateInput,
-  _sfc_main$G as DatePicker,
-  _sfc_main$S as Dropdown,
-  _sfc_main$M as FieldArray,
+  _sfc_main$I as DateInput,
+  _sfc_main$H as DatePicker,
+  _sfc_main$T as Dropdown,
+  _sfc_main$N as FieldArray,
   FileUpload,
   Flag,
   IMAGE_FORMATS,
@@ -33667,7 +34032,7 @@ export {
   Image$1 as Image,
   JSONInput,
   Layout,
-  _sfc_main$U as Lineart,
+  _sfc_main$V as Lineart,
   _sfc_main$g as ListItem,
   ListView,
   Loading,
@@ -33678,6 +34043,7 @@ export {
   ModalForm,
   ModalPlugin,
   NavBar,
+  NumberInput,
   OTP,
   _sfc_main$7 as PageTitle,
   _sfc_main$B as PasswordInput,