@bagelink/vue 0.0.1016 → 0.0.1023

package/dist/index.cjs

@@ -55,8 +55,8 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$Q = ["aria-expanded", "aria-controls"];
-const _hoisted_2$v = { class: "accordion-label" };
+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__ */ vue.defineComponent({
   __name: "AccordionItem",
@@ -124,7 +124,7 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
             vue.createVNode(vue.unref(_sfc_main$c), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "head", {}, () => [
-            vue.createElementVNode("span", _hoisted_2$v, vue.toDisplayString(_ctx.label), 1)
+            vue.createElementVNode("span", _hoisted_2$w, vue.toDisplayString(_ctx.label), 1)
           ], true),
           iconPosition.value === "end" ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 1,
@@ -132,7 +132,7 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
           }, [
             vue.createVNode(vue.unref(_sfc_main$c), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : vue.createCommentVNode("", true)
-        ], 8, _hoisted_1$Q),
+        ], 8, _hoisted_1$P),
         vue.createVNode(vue.Transition, { name: "expand" }, {
           default: vue.withCtx(() => [
             vue.unref(isOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -158,7 +158,7 @@ const _export_sfc = (sfc, props2) => {
   return target;
 };
 const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-1e73ca3e"]]);
-const _hoisted_1$P = { class: "relative" };
+const _hoisted_1$O = { class: "relative" };
 const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
   __name: "AddressSearch",
   emits: ["addressSelected"],
@@ -181,7 +181,7 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
       (_a2 = suggestion.value) == null ? void 0 : _a2.show();
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$P, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$O, [
         vue.createVNode(vue.unref(_sfc_main$S), {
           ref_key: "suggestion",
           ref: suggestion,
@@ -217,7 +217,7 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$O = {
+const _hoisted_1$N = {
   key: 1,
   class: "bgl_btn-flex"
 };
@@ -241,6 +241,7 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
     href: {},
     round: { type: Boolean, default: false },
     is: { default: "button" },
+    ripple: { type: Boolean, default: true },
     onClick: { type: Function, default: () => "" }
   },
   setup(__props) {
@@ -285,7 +286,7 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
           _ctx.loading ? (vue.openBlock(), vue.createBlock(vue.unref(Loading), {
             key: 0,
             size: "15"
-          })) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$O, [
+          })) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$N, [
             _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
               key: 0,
               icon: _ctx.icon
@@ -302,14 +303,14 @@ const _sfc_main$$ = /* @__PURE__ */ vue.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$N = ["dismissable"];
-const _hoisted_2$u = { class: "m-0" };
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["__scopeId", "data-v-c23a3626"]]);
+const _hoisted_1$M = ["dismissable"];
+const _hoisted_2$v = { class: "m-0" };
 const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
   __name: "Alert",
   props: {
@@ -338,7 +339,7 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
           size: 2,
           color: color2[_ctx.type]
         }, null, 8, ["icon", "color"])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("p", _hoisted_2$u, vue.toDisplayString(_ctx.message), 1),
+        vue.createElementVNode("p", _hoisted_2$v, vue.toDisplayString(_ctx.message), 1),
         vue.createVNode(Btn, {
           flat: "",
           thin: "",
@@ -346,12 +347,12 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
           icon: "close",
           onClick: _cache[0] || (_cache[0] = ($event) => isDismissed.value = true)
         })
-      ], 10, _hoisted_1$N)) : vue.createCommentVNode("", true);
+      ], 10, _hoisted_1$M)) : vue.createCommentVNode("", true);
     };
   }
 });
 const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["__scopeId", "data-v-57141c32"]]);
-const _hoisted_1$M = ["src", "alt"];
+const _hoisted_1$L = ["src", "alt"];
 const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
   __name: "Avatar",
   props: {
@@ -370,7 +371,7 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
           key: 0,
           src: _ctx.src,
           alt: _ctx.name
-        }, null, 8, _hoisted_1$M)) : (vue.openBlock(), vue.createElementBlock("p", {
+        }, null, 8, _hoisted_1$L)) : (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))
@@ -409,8 +410,8 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-2f3caf93"]]);
-const _hoisted_1$L = ["src"];
-const _hoisted_2$t = ["autoplay", "muted", "loop", "controls", "playsinline"];
+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__ */ vue.defineComponent({
   __name: "BglVideo",
@@ -489,7 +490,7 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
           allowfullscreen: "",
           title: "Video",
           allow: "autoplay"
-        }, null, 12, _hoisted_1$L)) : _ctx.src ? (vue.openBlock(), vue.createElementBlock("video", {
+        }, null, 12, _hoisted_1$K)) : _ctx.src ? (vue.openBlock(), vue.createElementBlock("video", {
           key: 1,
           ref_key: "video",
           ref: video,
@@ -504,13 +505,13 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
             src: _ctx.src,
             type: `video/${videoFormat.value}`
           }, null, 8, _hoisted_3$o)
-        ], 12, _hoisted_2$t)) : vue.createCommentVNode("", true)
+        ], 12, _hoisted_2$u)) : vue.createCommentVNode("", true)
       ], 2);
     };
   }
 });
 const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-006552f6"]]);
-const _hoisted_1$K = {
+const _hoisted_1$J = {
   key: 0,
   class: "card_label"
 };
@@ -543,7 +544,7 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
         }])
       }, {
         default: vue.withCtx(() => [
-          _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$K, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
+          _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$J, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
@@ -553,8 +554,8 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$J = ["dir"];
-const _hoisted_2$s = {
+const _hoisted_1$I = ["dir"];
+const _hoisted_2$t = {
   key: 0,
   class: "blocker"
 };
@@ -727,7 +728,7 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
           onMouseover: clearAutoplay,
           onFocusin: clearAutoplay
         }, [
-          vue.unref(isDragging) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$s)) : vue.createCommentVNode("", true),
+          vue.unref(isDragging) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$t)) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ], 38),
         vue.createElementVNode("div", _hoisted_3$n, [
@@ -744,7 +745,7 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
             }, void 0, true)
           ])
         ])
-      ], 14, _hoisted_1$J);
+      ], 14, _hoisted_1$I);
     };
   }
 });
@@ -6583,9 +6584,9 @@ const _hoisted_1$1$1 = {
 };
 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_4$f = ["transform", "onMouseover"];
+const _hoisted_5$e = ["width", "height"];
+const _hoisted_6$b = {
   x: 0 + 10,
   y: 0 + 20,
   "font-size": `15px`,
@@ -6621,21 +6622,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),
                 vue.renderSlot(_ctx.$slots, "text", {
                   r: r2,
                   selected: _ctx.selected === i2
                 }, () => [
                   vue.createElementVNode(
                     "text",
-                    _hoisted_6$a,
+                    _hoisted_6$b,
                     vue.toDisplayString(r2.data.name),
                     1
                     /* TEXT */
                   )
                 ])
               ])
-            ], 42, _hoisted_4$e);
+            ], 42, _hoisted_4$f);
           }),
           128
           /* KEYED_FRAGMENT */
@@ -6692,19 +6693,19 @@ var script = vue.defineComponent({
     return { bar, canvas, direction, mouse };
   }
 });
-const _hoisted_1$I = {
+const _hoisted_1$H = {
   key: 0,
   class: "layer-hover-bar"
 };
-const _hoisted_2$r = ["x", "y", "width", "height"];
+const _hoisted_2$s = ["x", "y", "width", "height"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.mouse.hover ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_1$I, [
+  return _ctx.mouse.hover ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_1$H, [
     vue.createElementVNode("rect", vue.mergeProps({ class: "hover-bar" }, _ctx.barStyle, {
       x: _ctx.bar.x,
       y: _ctx.bar.y,
       width: _ctx.bar.width > 0 ? _ctx.bar.width : 0,
       height: _ctx.bar.height > 0 ? _ctx.bar.height : 0
-    }), null, 16, _hoisted_2$r)
+    }), null, 16, _hoisted_2$s)
   ])) : vue.createCommentVNode("v-if", true);
 }
 script.render = render;
@@ -6850,18 +6851,18 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$H = {
+const _hoisted_1$G = {
   key: 0,
   class: "data"
 };
-const _hoisted_2$q = {
+const _hoisted_2$r = {
   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_4$e = { class: "m-0" };
+const _hoisted_5$d = { key: 1 };
+const _hoisted_6$a = {
   key: 0,
   class: "data-row"
 };
@@ -6907,7 +6908,7 @@ const _sfc_main$T = /* @__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$H, [
+      return __props.data ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$G, [
         _ctx.title ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$3), {
           key: 0,
           label: _ctx.title
@@ -6916,9 +6917,9 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
           return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
             key: field.id
           }, [
-            vue.unref(iffer)(field, itemData.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$q, [
+            vue.unref(iffer)(field, itemData.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$r, [
               vue.createElementVNode("div", _hoisted_3$l, [
-                vue.createElementVNode("p", _hoisted_4$d, vue.toDisplayString((field == null ? void 0 : field.label) || vue.unref(keyToLabel)(field.id)), 1)
+                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$P), {
                 modelValue: itemData.value,
@@ -6930,10 +6931,10 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
             ])) : vue.createCommentVNode("", true)
           ], 64);
         }), 128)),
-        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$c, [
+        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$d, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(computedSchema.value, ({ id, label }) => {
             return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: id }, [
-              !isUnset(itemData.value[id]) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$9, [
+              !isUnset(itemData.value[id]) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$a, [
                 vue.createElementVNode("div", _hoisted_7$6, [
                   vue.createElementVNode("p", _hoisted_8$4, vue.toDisplayString(label), 1)
                 ]),
@@ -9606,7 +9607,7 @@ function useTabs(group) {
   });
   return { currentTab };
 }
-const _hoisted_1$G = ["onClick"];
+const _hoisted_1$F = ["onClick"];
 const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
   __name: "TabsNav",
   props: {
@@ -9671,30 +9672,33 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
       window.removeEventListener("resize", updateIndicator);
     });
     return (_ctx, _cache) => {
+      const _component_Icon = vue.resolveComponent("Icon");
       return vue.openBlock(), vue.createElementBlock("div", {
         ref_key: "tabsWrap",
         ref: tabsWrap,
         class: vue.normalizeClass(["grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden", { "bgl_flat-tabs": _ctx.flat, "bgl_vertical-tabs": _ctx.vertical }])
       }, [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props2.tabs, (tab, i2) => {
-          return vue.openBlock(), vue.createElementBlock("button", {
-            key: i2,
-            type: "button",
-            class: vue.normalizeClass([{ active: isActive(tab) }, "bgl_tab relative z-1"]),
-            onClick: ($event) => selectTab(tab)
-          }, [
-            typeof tab !== "string" && tab.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
-              key: 0,
-              icon: tab.icon
-            }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-            vue.createTextVNode(" " + vue.toDisplayString(tabLabel(tab)), 1)
-          ], 10, _hoisted_1$G);
-        }), 128))
+        vue.renderSlot(_ctx.$slots, "tabs", vue.normalizeProps(vue.guardReactiveProps({ selectTab, isActive, tabLabel, tabs: tabs.value })), () => [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props2.tabs, (tab, i2) => {
+            return vue.openBlock(), vue.createElementBlock("button", {
+              key: i2,
+              type: "button",
+              class: vue.normalizeClass([{ active: isActive(tab) }, "bgl_tab relative z-1"]),
+              onClick: ($event) => selectTab(tab)
+            }, [
+              typeof tab !== "string" && tab.icon ? (vue.openBlock(), vue.createBlock(_component_Icon, {
+                key: 0,
+                icon: tab.icon
+              }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+              vue.createTextVNode(" " + vue.toDisplayString(tabLabel(tab)), 1)
+            ], 10, _hoisted_1$F);
+          }), 128))
+        ], true)
       ], 2);
     };
   }
 });
-const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-dbce6d28"]]);
+const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-bbb66a44"]]);
 const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
   __name: "BglField",
   props: {
@@ -9712,7 +9716,7 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
         customAttrs.value.multiline = true;
         return TextInput;
       }
-      if (props2.field.$el === "array") return FieldArray;
+      if (props2.field.$el === "array") return _sfc_main$M;
       if (props2.field.$el === "select") return SelectInput;
       if (props2.field.$el === "toggle") return ToggleInput;
       if (props2.field.$el === "check") return CheckInput;
@@ -9720,6 +9724,7 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
       if (props2.field.$el === "file") return FileUpload;
       if (props2.field.$el === "date") return _sfc_main$H;
       if (props2.field.$el === "tabs") return TabsNav;
+      if (props2.field.$el === "form") return _sfc_main$O;
       return props2.field.$el ?? "div";
     });
     const formData = vue.computed({
@@ -9742,6 +9747,7 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
       temp[keys4[keys4.length - 1]] = val;
       return data2;
     }
+    const isForm = vue.computed(() => props2.field.$el === "form" || props2.field.$el === _sfc_main$O);
     function getFieldData(obj, key) {
       if (typeof obj !== "object" || obj === null) return obj;
       const keys4 = key.split(objPathRegex);
@@ -9757,12 +9763,17 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     }
     const fieldData = vue.computed({
       set: (val) => {
+        if (isForm.value) {
+          emit2("update:modelValue", val);
+          return;
+        }
         if (!props2.field.id) return;
         const data2 = setFieldData(props2.field.id, val);
         emit2("update:modelValue", data2);
       },
       get: () => {
         if (props2.field.id) return getFieldData(props2.modelValue, props2.field.id);
+        if (isForm.value) return props2.modelValue;
         return props2.field.defaultValue ?? "";
       }
     });
@@ -9971,7 +9982,7 @@ const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$F = { key: 0 };
+const _hoisted_1$E = { key: 0 };
 const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
   __name: "BglMultiStepForm",
   props: /* @__PURE__ */ vue.mergeModels({
@@ -10039,7 +10050,7 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
           mode: "out-in"
         }, {
           default: vue.withCtx(() => [
-            !vue.unref(isStepping) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$F, [
+            !vue.unref(isStepping) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [
               vue.createVNode(vue.unref(_sfc_main$O), vue.mergeProps({
                 ref_key: "formRef",
                 ref: formRef,
@@ -10079,7 +10090,8 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$E = { class: "label mb-05" };
+const _hoisted_1$D = { class: "label mb-05" };
+const _hoisted_2$q = { class: "-ms-05 ps-05 border-start" };
 const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
   __name: "FieldArray",
   props: {
@@ -10116,57 +10128,40 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
       data2.value.push({});
       emitValue();
     }
-    vue.computed(
-      () => ({
-        label: props2.label,
-        placeholder: props2.placeholder,
-        children: props2.children,
-        class: props2.class,
-        attrs: props2.attrs,
-        required: props2.required,
-        disabled: props2.disabled,
-        helptext: props2.helptext,
-        options: props2.options,
-        defaultValue: props2.defaultValue,
-        $el: props2.el
-      })
-    );
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", null, [
-        vue.createElementVNode("p", _hoisted_1$E, vue.toDisplayString(_ctx.label), 1),
-        vue.createElementVNode("div", null, [
+        vue.createElementVNode("p", _hoisted_1$D, vue.toDisplayString(_ctx.label), 1),
+        vue.createElementVNode("div", _hoisted_2$q, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(data2.value, (_2, i2) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$W, {
+            return vue.openBlock(), vue.createElementBlock("div", {
               key: i2,
               outline: "",
               thin: "",
-              class: "mb-05 itemBox bg-white transition"
-            }, {
-              default: vue.withCtx(() => [
-                _ctx.schema ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$O), {
-                  key: 0,
-                  modelValue: data2.value[i2],
-                  "onUpdate:modelValue": [($event) => data2.value[i2] = $event, emitValue],
-                  schema: _ctx.schema
-                }, null, 8, ["modelValue", "onUpdate:modelValue", "schema"])) : vue.createCommentVNode("", true),
-                props2.delete ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
-                  key: 1,
-                  icon: "delete",
-                  value: "Delete",
-                  class: "txt10 opacity-7 color-red",
-                  thin: "",
-                  flat: "",
-                  onClick: ($event) => deleteItem(i2)
-                }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
-              ]),
-              _: 2
-            }, 1024);
+              class: "mb-05 itemBox transition p-05"
+            }, [
+              _ctx.schema ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$O), {
+                key: 0,
+                modelValue: data2.value[i2],
+                "onUpdate:modelValue": [($event) => data2.value[i2] = $event, emitValue],
+                schema: _ctx.schema
+              }, null, 8, ["modelValue", "onUpdate:modelValue", "schema"])) : vue.createCommentVNode("", true),
+              props2.delete ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
+                key: 1,
+                icon: "delete",
+                value: "Delete",
+                class: "txt10 opacity-7 color-red",
+                thin: "",
+                flat: "",
+                onClick: ($event) => deleteItem(i2)
+              }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
+            ]);
           }), 128)),
           _ctx.add ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
             key: 0,
+            thin: "",
             icon: "add",
             color: "gray",
-            class: "w-100",
+            class: "txt12",
             onClick: addItem
           }, {
             default: vue.withCtx(() => [
@@ -10179,8 +10174,7 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const FieldArray = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-e8cf25b3"]]);
-const _hoisted_1$D = { class: "primary-checkbox" };
+const _hoisted_1$C = { class: "primary-checkbox" };
 const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
   __name: "Checkbox",
   props: {
@@ -10191,7 +10185,7 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const val = vue.useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("label", _hoisted_1$D, [
+      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),
@@ -10204,7 +10198,7 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-73f1d9ad"]]);
-const _hoisted_1$C = ["title"];
+const _hoisted_1$B = ["title"];
 const _hoisted_2$p = ["id", "value", "required"];
 const _hoisted_3$k = ["for"];
 const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
@@ -10249,18 +10243,18 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
             vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
           ], true)
         ], 8, _hoisted_3$k)
-      ], 10, _hoisted_1$C);
+      ], 10, _hoisted_1$B);
     };
   }
 });
 const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-03ed2982"]]);
-const _hoisted_1$B = {
+const _hoisted_1$A = {
   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 _hoisted_4$d = ["onKeydown"];
 const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
   __name: "Index",
   props: {
@@ -10341,7 +10335,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
       }
     }, { immediate: true });
     return (_ctx, _cache) => {
-      return vue.unref(loaded) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, [
+      return vue.unref(loaded) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
         vue.createElementVNode("div", {
           class: "relative block h-100",
           style: vue.normalizeStyle({ height: vue.unref(height) })
@@ -10366,7 +10360,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
             "data-gramm": "false",
             onKeydown: vue.withKeys(vue.withModifiers(handleTab, ["prevent"]), ["tab"]),
             onInput: _cache[1] || (_cache[1] = ($event) => emit2("update:modelValue", vue.unref(code)))
-          }, null, 40, _hoisted_4$c)), [
+          }, null, 40, _hoisted_4$d)), [
             [vue.vModelText, vue.unref(code)]
           ]) : vue.createCommentVNode("", true)
         ], 4)
@@ -10375,7 +10369,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-4f1dc18a"]]);
-const _hoisted_1$A = ["title"];
+const _hoisted_1$z = ["title"];
 const _hoisted_2$n = ["id", "placeholder", "required"];
 const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
   __name: "ColorPicker",
@@ -10419,7 +10413,7 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
             [vue.vModelText, inputVal.value]
           ])
         ])
-      ], 10, _hoisted_1$A)) : vue.createCommentVNode("", true);
+      ], 10, _hoisted_1$z)) : vue.createCommentVNode("", true);
     };
   }
 });
@@ -18977,7 +18971,7 @@ const eo = ({
 Object.entries(go).forEach(([e, t]) => {
   e !== "default" && (Hn[e] = t);
 });
-const _hoisted_1$z = ["title"];
+const _hoisted_1$y = ["title"];
 const _hoisted_2$m = { key: 0 };
 const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
   __name: "DateInput",
@@ -19037,18 +19031,18 @@ const _sfc_main$H = /* @__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$z);
+      ], 10, _hoisted_1$y);
     };
   }
 });
-const _hoisted_1$y = { class: "datetime-wrap" };
+const _hoisted_1$x = { class: "datetime-wrap" };
 const _hoisted_2$l = { class: "date-wrap" };
 const _hoisted_3$i = {
   key: 0,
   class: "time-wrap"
 };
-const _hoisted_4$b = ["id", "name", "value"];
-const _hoisted_5$b = ["for"];
+const _hoisted_4$c = ["id", "name", "value"];
+const _hoisted_5$c = ["for"];
 const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
   __name: "DatePicker",
   props: {
@@ -19077,7 +19071,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
       return `${hour}:${minute}`;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
         vue.createElementVNode("div", _hoisted_2$l, [
           vue.createVNode(vue.unref(Hn), vue.mergeProps({
             modelValue: selectedDate.value,
@@ -19105,12 +19099,12 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
                 type: "radio",
                 name: _ctx.label,
                 value: hr2
-              }, null, 8, _hoisted_4$b), [
+              }, null, 8, _hoisted_4$c), [
                 [vue.vModelRadio, selectedHour.value]
               ]),
               vue.createElementVNode("label", {
                 for: `${hr2}_${_ctx.id}`
-              }, vue.toDisplayString(hr2), 9, _hoisted_5$b)
+              }, vue.toDisplayString(hr2), 9, _hoisted_5$c)
             ], 64);
           }), 128))
         ])) : vue.createCommentVNode("", true)
@@ -19118,7 +19112,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$x = ["src", "alt", "width", "height"];
+const _hoisted_1$w = ["src", "alt", "width", "height"];
 const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
   __name: "Image",
   props: {
@@ -19182,7 +19176,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
         alt: _ctx.alt,
         width: vue.unref(normalizeDimension)(_ctx.width),
         height: vue.unref(normalizeDimension)(_ctx.height)
-      }), null, 16, _hoisted_1$x)) : (vue.openBlock(), vue.createBlock(vue.unref(Skeleton), {
+      }), null, 16, _hoisted_1$w)) : (vue.openBlock(), vue.createBlock(vue.unref(Skeleton), {
         key: 1,
         class: "img-web-kit",
         width: vue.unref(normalizeDimension)(_ctx.width),
@@ -19192,7 +19186,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-a96b25a8"]]);
-const _hoisted_1$w = { class: "bagel-input" };
+const _hoisted_1$v = { class: "bagel-input" };
 const _hoisted_2$k = {
   key: 0,
   placeholder: "required",
@@ -19201,12 +19195,12 @@ const _hoisted_2$k = {
   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_4$b = { 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"
 };
@@ -19404,7 +19398,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       const _directive_tooltip = vue.resolveDirective("tooltip");
       const _directive_lightbox = vue.resolveDirective("lightbox");
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
         vue.createElementVNode("label", null, vue.toDisplayString(_ctx.label), 1),
         _ctx.required && !storageFiles.value.length ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_2$k)) : vue.createCommentVNode("", true),
         _ctx.theme === "basic" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$W), {
@@ -19461,7 +19455,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
                   }, null, 8, ["href", "download"]), [
                     [_directive_tooltip, "Download"]
                   ]),
-                  vue.withDirectives((vue.openBlock(), vue.createElementBlock("p", _hoisted_4$a, [
+                  vue.withDirectives((vue.openBlock(), vue.createElementBlock("p", _hoisted_4$b, [
                     vue.createTextVNode(vue.toDisplayString(file.name), 1)
                   ])), [
                     [_directive_lightbox, { src: file.url, download: true }]
@@ -19476,7 +19470,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
                 ])
               ]);
             }), 128)),
-            !storageFiles.value.length && !fileQueue.value.length ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$a, " No file selected ")) : vue.createCommentVNode("", true)
+            !storageFiles.value.length && !fileQueue.value.length ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$b, " No file selected ")) : vue.createCommentVNode("", true)
           ]),
           _: 1
         })) : (vue.openBlock(), vue.createElementBlock("div", {
@@ -19496,7 +19490,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
             files: storageFiles.value,
             fileQueue: fileQueue.value
           }, () => [
-            _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$8, [
+            _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$9, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(storageFiles.value, (file) => {
                 return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
                   key: file.id,
@@ -19653,7 +19647,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-6bfdaea2"]]);
-const _hoisted_1$v = ["title"];
+const _hoisted_1$u = ["title"];
 const _hoisted_2$j = { key: 0 };
 const _hoisted_3$g = ["value", "placeholder"];
 const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
@@ -19688,12 +19682,12 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
           placeholder: _ctx.placeholder,
           onInput: handleInput
         }, null, 42, _hoisted_3$g)
-      ], 10, _hoisted_1$v);
+      ], 10, _hoisted_1$u);
     };
   }
 });
 const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-1cbaeab2"]]);
-const _hoisted_1$u = ["value", "autofocus", "onKeydown", "onPaste"];
+const _hoisted_1$t = ["value", "autofocus", "onKeydown", "onPaste"];
 const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
   __name: "OTP",
   props: {
@@ -19792,7 +19786,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
             oninput: "this.value = this.value.slice(0, 1);",
             onKeydown: ($event) => handleKeyDown($event, ind),
             onPaste: ($event) => handlePaste($event, ind)
-          }, null, 40, _hoisted_1$u);
+          }, null, 40, _hoisted_1$t);
         }), 128))
       ], 512);
     };
@@ -19862,12 +19856,12 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$t = ["for"];
+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"
 };
@@ -19913,9 +19907,9 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
                 width: "60",
                 src: opt.imgSrc,
                 alt: opt.imgAlt
-              }, null, 8, _hoisted_4$9)) : vue.createCommentVNode("", true),
-              vue.createElementVNode("div", _hoisted_5$9, [
-                opt.label ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_6$7, vue.toDisplayString(opt.label), 1)) : vue.createCommentVNode("", true),
+              }, null, 8, _hoisted_4$a)) : vue.createCommentVNode("", true),
+              vue.createElementVNode("div", _hoisted_5$a, [
+                opt.label ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_6$8, vue.toDisplayString(opt.label), 1)) : vue.createCommentVNode("", true),
                 opt.subLabel ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_7$4, vue.toDisplayString(opt.subLabel), 1)) : vue.createCommentVNode("", true)
               ]),
               vue.renderSlot(_ctx.$slots, "radioItem", vue.mergeProps({ ref_for: true }, opt), void 0, true)
@@ -19928,18 +19922,18 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
               icon: "delete",
               onClick: ($event) => _ctx.$emit("delete", opt)
             }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
-          ], 8, _hoisted_1$t);
+          ], 8, _hoisted_1$s);
         }), 128))
       ]);
     };
   }
 });
 const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-3e9e030f"]]);
-const _hoisted_1$s = { class: "bagel-input" };
+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__ */ vue.defineComponent({
   __name: "RadioPillsInput",
   props: {
@@ -19981,7 +19975,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
       selectedValue.value = props2.modelValue;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
         vue.createElementVNode("label", _hoisted_2$h, 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) => {
@@ -19996,10 +19990,10 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
                 value: getValue(option2),
                 checked: vue.unref(selectedValue) === getValue(option2),
                 onChange: handleSelect
-              }, null, 40, _hoisted_4$8),
+              }, null, 40, _hoisted_4$9),
               vue.createElementVNode("label", {
                 for: `${_ctx.id}-${getValue(option2)}`
-              }, vue.toDisplayString(getLabel(option2)), 9, _hoisted_5$8)
+              }, vue.toDisplayString(getLabel(option2)), 9, _hoisted_5$9)
             ]);
           }), 128))
         ])
@@ -20008,76 +20002,113 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-cf892d71"]]);
-const _hoisted_1$r = { 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__ */ vue.defineComponent({
   __name: "RangeInput",
-  props: /* @__PURE__ */ vue.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 = vue.useModel(__props, "modelValue");
-    const range2 = vue.ref();
-    const direction = vue.computed(() => {
-      if (!range2.value) return "ltr";
-      const parent = range2.value.parentElement;
-      return getComputedStyle(parent).direction;
-    });
-    const background = vue.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 = vue.computed(() => Array.isArray(__props.modelValue));
+    let from = vue.ref(__props.min);
+    let to2 = vue.ref(__props.max);
+    const validFrom = vue.computed(() => Math.min(Math.max(from.value, __props.min), to2.value));
+    const validTo = vue.computed(() => Math.max(Math.min(to2.value, __props.max), from.value));
+    function emitValue() {
+      emit2("update:modelValue", isRange.value ? [validFrom.value, validTo.value] : validFrom.value);
+    }
+    vue.watch(() => validFrom.value, (newVal) => {
+      if (from.value !== newVal) from.value = newVal;
     });
-    vue.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;
+    vue.watch(() => validTo.value, (newVal) => {
+      if (to2.value !== newVal) to2.value = newVal;
     });
-    const height = vue.computed(() => {
-      return Number.isNaN(Number(__props.thickness)) ? __props.thickness : `${__props.thickness}px`;
+    const fromPercentage = vue.computed(() => (validFrom.value - __props.min) / (__props.max - __props.min) * 100);
+    const toPercentage = vue.computed(() => (validTo.value - __props.min) / (__props.max - __props.min) * 100);
+    const rangeStyle = vue.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 vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(["flex gap-1 align-center range-slide", { disabled: _ctx.disabled }])
-      }, [
-        _ctx.min !== void 0 ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_1$r, vue.toDisplayString(_ctx.min), 1)) : vue.createCommentVNode("", true),
-        vue.withDirectives(vue.createElementVNode("input", {
-          id: _ctx.id,
-          ref_key: "range",
-          ref: range2,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => val.value = $event),
-          disabled: _ctx.disabled,
-          style: vue.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), [
-          [vue.vModelText, val.value]
+      return vue.openBlock(), vue.createElementBlock("div", null, [
+        vue.createElementVNode("label", _hoisted_1$q, vue.toDisplayString(_ctx.label), 1),
+        vue.createElementVNode("div", _hoisted_2$g, [
+          vue.withDirectives(vue.createElementVNode("input", {
+            id: _ctx.id,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.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), [
+            [vue.vModelText, vue.unref(from)]
+          ]),
+          isRange.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+            key: 0,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.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)), [
+            [vue.vModelText, vue.unref(to2)]
+          ]) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", _hoisted_5$8, [
+            vue.createElementVNode("div", {
+              class: "active-range absolute h-100 pointer-events-none bg-primary",
+              style: vue.normalizeStyle(rangeStyle.value)
+            }, null, 4)
+          ]),
+          vue.unref(from) !== _ctx.min ? (vue.openBlock(), vue.createElementBlock("p", {
+            key: 1,
+            class: "txt-center txt-12 range-slider-position-txt absolute line-height-1 opacity-0",
+            style: vue.normalizeStyle({ marginInlineStart: `calc(${fromPercentage.value}% - 4px)` })
+          }, [
+            vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(from)), 1)
+          ], 4)) : vue.createCommentVNode("", true),
+          isRange.value && vue.unref(to2) !== _ctx.max ? (vue.openBlock(), vue.createElementBlock("p", {
+            key: 2,
+            class: "txt-center txt-12 range-slider-position-txt opacity-0 line-height-1 absolute",
+            style: vue.normalizeStyle({ marginInlineStart: `calc(${toPercentage.value}% - 12px)` })
+          }, [
+            vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(to2)), 1)
+          ], 4)) : vue.createCommentVNode("", true)
         ]),
-        _ctx.max !== void 0 ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_3$d, vue.toDisplayString(_ctx.max), 1)) : vue.createCommentVNode("", true)
-      ], 2);
+        vue.createElementVNode("p", _hoisted_6$7, [
+          vue.createElementVNode("span", null, vue.toDisplayString(_ctx.min), 1),
+          vue.createElementVNode("span", null, vue.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-dae624bd"]]);
 const defaultToolbarConfig = [
   "h2",
   "h3",
@@ -20144,7 +20175,7 @@ const toolbarOptions = [
   { name: "separator" },
   { name: "fullScreen", label: "Full Screen", icon: "fullscreen", class: "ms-auto" }
 ];
-const _hoisted_1$q = { class: "grid grid-wrap p-05" };
+const _hoisted_1$p = { class: "grid grid-wrap p-05" };
 const _hoisted_2$f = ["onMousemove", "onClick"];
 const _hoisted_3$c = { class: "txt-center txt-12 color-gray" };
 const fb = 1;
@@ -20165,7 +20196,7 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
       return hoveredCol.value > base - 1 ? enlarge : base;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(rowSize.value, (row) => {
           return vue.openBlock(), vue.createElementBlock("div", {
             key: `row-${row}`,
@@ -20202,7 +20233,7 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const GridBox = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-4548b70f"]]);
-const _hoisted_1$p = {
+const _hoisted_1$o = {
   class: "toolbar flex gap-025 pb-05 flex-wrap",
   role: "toolbar"
 };
@@ -20221,7 +20252,7 @@ const _sfc_main$w = /* @__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$o, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.config.map(configToOption).filter(Boolean), (action, index2) => {
           return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index2 }, [
             action.name === "insertTable" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$S), {
@@ -20898,7 +20929,7 @@ function useEditorKeyboard(doc, handleToolbarAction) {
     }
   });
 }
-const _hoisted_1$o = { class: "content-area radius-05" };
+const _hoisted_1$n = { class: "content-area radius-05" };
 const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   props: {
@@ -20944,7 +20975,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       var _a2, _b;
       return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(["rich-text-editor rounded pt-05 px-05 pb-075", { "fullscreen-mode": vue.unref(editor).state.isFullscreen }])
+        class: vue.normalizeClass(["rich-text-editor rounded pt-05 px-05 pb-075 mb-05", { "fullscreen-mode": vue.unref(editor).state.isFullscreen }])
       }, [
         vue.unref(editor).state.hasInit ? (vue.openBlock(), vue.createBlock(Toolbar, {
           key: 0,
@@ -20955,7 +20986,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("div", {
           class: vue.normalizeClass(["editor-container", { "split-view": (_a2 = vue.unref(editor)) == null ? void 0 : _a2.state.isSplitView }])
         }, [
-          vue.createElementVNode("div", _hoisted_1$o, [
+          vue.createElementVNode("div", _hoisted_1$n, [
             vue.createElementVNode("iframe", {
               id: "rich-text-iframe",
               ref_key: "iframe",
@@ -20979,8 +21010,8 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-7a98aefd"]]);
-const _hoisted_1$n = { class: "flex gap-05" };
+const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-8d91c8f8"]]);
+const _hoisted_1$m = { class: "flex gap-05" };
 const _hoisted_2$e = ["disabled"];
 const _hoisted_3$b = { key: 1 };
 const _hoisted_4$7 = {
@@ -21176,7 +21207,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$n, [
+            vue.createElementVNode("div", _hoisted_1$m, [
               _ctx.searchable && vue.unref(open) ? (vue.openBlock(), vue.createBlock(vue.unref(TextInput), {
                 key: 0,
                 ref_key: "searchInput",
@@ -21891,7 +21922,7 @@ class SignaturePad extends SignatureEventTarget {
     return svg.outerHTML;
   }
 }
-const _hoisted_1$m = ["disabled"];
+const _hoisted_1$l = ["disabled"];
 const _hoisted_2$d = {
   key: 1,
   placeholder: "required",
@@ -22052,7 +22083,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
           ref: vCanvas,
           class: "canvas",
           disabled: _ctx.disabled
-        }, null, 8, _hoisted_1$m),
+        }, null, 8, _hoisted_1$l),
         _ctx.required && vue.unref(_isEmpty) ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_2$d)) : vue.createCommentVNode("", true)
       ], 34);
     };
@@ -24537,7 +24568,7 @@ const VueDraggableNext = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$l = ["title"];
+const _hoisted_1$k = ["title"];
 const _hoisted_2$c = { class: "bagel-input" };
 const _hoisted_3$a = { class: "table-side-scroll" };
 const _hoisted_4$6 = { class: "table-header" };
@@ -24683,7 +24714,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
           ])),
           _: 1
         })
-      ], 8, _hoisted_1$l);
+      ], 8, _hoisted_1$k);
     };
   }
 });
@@ -29134,7 +29165,7 @@ function parsePhoneNumber$1() {
 function parsePhoneNumber() {
   return withMetadataArgument(parsePhoneNumber$1, arguments);
 }
-const _hoisted_1$k = ["aria-expanded"];
+const _hoisted_1$j = ["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" };
@@ -29488,14 +29519,14 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
             }, null, 44, _hoisted_6$4), [
               [vue.vModelText, phone.value]
             ])
-          ], 40, _hoisted_1$k)
+          ], 40, _hoisted_1$j)
         ])
       ], 2);
     };
   }
 });
 const TelInput = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-627af458"]]);
-const _hoisted_1$j = ["title"];
+const _hoisted_1$i = ["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"];
@@ -29637,12 +29668,12 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
             icon: _ctx.icon
           }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
         ], 8, _hoisted_2$a)
-      ], 10, _hoisted_1$j);
+      ], 10, _hoisted_1$i);
     };
   }
 });
 const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-0e10a3b5"]]);
-const _hoisted_1$i = ["title"];
+const _hoisted_1$h = ["title"];
 const _hoisted_2$9 = ["id", "required"];
 const _hoisted_3$7 = ["for"];
 const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
@@ -29689,12 +29720,12 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
             vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
           ], true)
         ], 8, _hoisted_3$7)
-      ], 10, _hoisted_1$i);
+      ], 10, _hoisted_1$h);
     };
   }
 });
 const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-486451e5"]]);
-const _hoisted_1$h = ["src", "title", "width", "height", "marginwidth", "marginheight", "csp", "scrolling", "srcset"];
+const _hoisted_1$g = ["src", "title", "width", "height", "marginwidth", "marginheight", "csp", "scrolling", "srcset"];
 const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   __name: "IframeVue",
   props: {
@@ -29754,11 +29785,11 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
         scrolling: _ctx.scrolling,
         srcset: _ctx.srcset,
         onLoad: _cache[0] || (_cache[0] = ($event) => emit2("load", $event))
-      }, null, 40, _hoisted_1$h);
+      }, null, 40, _hoisted_1$g);
     };
   }
 });
-const _hoisted_1$g = { class: "m-0 pb-025 txt14 line-height-1 w60 menu-text" };
+const _hoisted_1$f = { class: "m-0 pb-025 txt14 line-height-1 w60 menu-text" };
 const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
   __name: "BottomMenu",
   props: {
@@ -29782,7 +29813,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
                   size: 1.4,
                   class: "m-0 line-height-14"
                 }, null, 8, ["icon"]),
-                vue.createElementVNode("p", _hoisted_1$g, vue.toDisplayString(nav.label), 1)
+                vue.createElementVNode("p", _hoisted_1$f, vue.toDisplayString(nav.label), 1)
               ]),
               _: 2
             }, 1032, ["to", "onClick"]);
@@ -29837,7 +29868,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Layout = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-1814129a"]]);
-const _hoisted_1$f = { key: 0 };
+const _hoisted_1$e = { key: 0 };
 const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
   __name: "SidebarMenu",
   props: {
@@ -29885,7 +29916,7 @@ const _sfc_main$l = /* @__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(nav.label), 1)) : vue.createCommentVNode("", true)
+                      _ctx.open ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_1$e, vue.toDisplayString(nav.label), 1)) : vue.createCommentVNode("", true)
                     ]),
                     _: 2
                   }, 1024)
@@ -29945,7 +29976,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-4da8c0d1"]]);
-const _hoisted_1$e = { class: "bgl_card tabs-top" };
+const _hoisted_1$d = { class: "bgl_card tabs-top" };
 const _hoisted_2$8 = { class: "tabs grid auto-flow-columns fit-content" };
 const _hoisted_3$6 = ["onClick"];
 const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
@@ -29981,7 +30012,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(["h-100 grid list-view gap-1", { "side-tabs": _ctx.sideTabs }])
       }, [
-        vue.createElementVNode("div", _hoisted_1$e, [
+        vue.createElementVNode("div", _hoisted_1$d, [
           vue.renderSlot(_ctx.$slots, "top-section", {}, void 0, true),
           vue.createElementVNode("div", _hoisted_2$8, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.tabs, (tab) => {
@@ -30009,7 +30040,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const TabbedLayout = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-0a54cdeb"]]);
-const _hoisted_1$d = { key: 0 };
+const _hoisted_1$c = { key: 0 };
 const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
   __name: "Tabs",
   props: {
@@ -30052,14 +30083,13 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
           group: vue.unref(group),
           class: "mb-05"
         }, null, 8, ["modelValue", "flat", "tabs", "group"]),
-        vue.unref(currentTab) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+        vue.unref(currentTab) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
           vue.unref(slots)[vue.unref(currentTab)] ? vue.renderSlot(_ctx.$slots, vue.unref(currentTab), { key: 0 }) : vue.unref(currentTab) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabComponent)), { key: 1 })) : vue.createCommentVNode("", true)
         ])) : vue.createCommentVNode("", true)
       ], 64);
     };
   }
 });
-const _hoisted_1$c = { key: 0 };
 const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
   __name: "TabsBody",
   props: {
@@ -30069,9 +30099,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     const props2 = __props;
     const { currentTab } = useTabs(props2.group);
     return (_ctx, _cache) => {
-      return vue.unref(currentTab) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
-        vue.renderSlot(_ctx.$slots, vue.unref(currentTab))
-      ])) : vue.createCommentVNode("", true);
+      return vue.unref(currentTab) ? vue.renderSlot(_ctx.$slots, vue.unref(currentTab), { key: 0 }) : vue.createCommentVNode("", true);
     };
   }
 });
@@ -32689,7 +32717,6 @@ const groups = {};
 let clickHandler = (_e2) => void 0;
 const lightboxDirective = {
   mounted(el, binding) {
-    el.classList.add("hover");
     const item = bindingToItem(binding, el);
     groupHandler(item);
     clickHandler = (e) => {
@@ -33672,7 +33699,7 @@ exports.DataPreview = DataPreview;
 exports.DateInput = _sfc_main$H;
 exports.DatePicker = _sfc_main$G;
 exports.Dropdown = _sfc_main$S;
-exports.FieldArray = FieldArray;
+exports.FieldArray = _sfc_main$M;
 exports.FileUpload = FileUpload;
 exports.Flag = Flag;
 exports.IMAGE_FORMATS = IMAGE_FORMATS;