@bagelink/vue 0.0.1102 → 0.0.1104

package/dist/index.cjs

@@ -47,7 +47,7 @@ const bagelFormUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defi
     return uploadField;
   }
 }, Symbol.toStringTag, { value: "Module" }));
-const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
   __name: "Accordion",
   setup(__props) {
     const state2 = vue.reactive({
@@ -61,10 +61,10 @@ const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$W = ["aria-expanded", "aria-controls"];
-const _hoisted_2$C = { class: "accordion-label" };
-const _hoisted_3$s = ["id", "aria-hidden"];
-const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$X = ["aria-expanded", "aria-controls"];
+const _hoisted_2$D = { class: "accordion-label" };
+const _hoisted_3$t = ["id", "aria-hidden"];
+const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
   __name: "AccordionItem",
   props: {
     label: {},
@@ -130,7 +130,7 @@ const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
             vue.createVNode(vue.unref(_sfc_main$d), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "head", {}, () => [
-            vue.createElementVNode("span", _hoisted_2$C, vue.toDisplayString(_ctx.label), 1)
+            vue.createElementVNode("span", _hoisted_2$D, vue.toDisplayString(_ctx.label), 1)
           ], true),
           iconPosition.value === "end" ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 1,
@@ -138,7 +138,7 @@ const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
           }, [
             vue.createVNode(vue.unref(_sfc_main$d), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : vue.createCommentVNode("", true)
-        ], 8, _hoisted_1$W),
+        ], 8, _hoisted_1$X),
         vue.createVNode(vue.Transition, { name: "expand" }, {
           default: vue.withCtx(() => [
             vue.unref(isOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -148,7 +148,7 @@ const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
               "aria-hidden": vue.unref(isOpen) ? "false" : "true"
             }, [
               vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
-            ], 8, _hoisted_3$s)) : vue.createCommentVNode("", true)
+            ], 8, _hoisted_3$t)) : vue.createCommentVNode("", true)
           ]),
           _: 3
         })
@@ -163,9 +163,9 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["__scopeId", "data-v-1e73ca3e"]]);
-const _hoisted_1$V = { class: "relative" };
-const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
+const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["__scopeId", "data-v-1e73ca3e"]]);
+const _hoisted_1$W = { class: "relative" };
+const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
   __name: "AddressSearch",
   emits: ["addressSelected"],
   setup(__props, { emit: __emit }) {
@@ -187,8 +187,8 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
       (_a2 = suggestion.value) == null ? void 0 : _a2.show();
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$V, [
-        vue.createVNode(vue.unref(_sfc_main$W), {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$W, [
+        vue.createVNode(vue.unref(_sfc_main$X), {
           ref_key: "suggestion",
           ref: suggestion,
           noAutoFocus: true,
@@ -223,11 +223,11 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$U = {
+const _hoisted_1$V = {
   key: 1,
   class: "bgl_btn-flex"
 };
-const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
   __name: "Btn",
   props: {
     disabled: { type: Boolean, default: false },
@@ -292,7 +292,7 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
           _ctx.loading ? (vue.openBlock(), vue.createBlock(vue.unref(Loading), {
             key: 0,
             size: "15"
-          })) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$U, [
+          })) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$V, [
             _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$d), {
               key: 0,
               icon: _ctx.icon
@@ -314,10 +314,10 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-c23a3626"]]);
-const _hoisted_1$T = ["dismissable"];
-const _hoisted_2$B = { class: "m-0" };
-const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["__scopeId", "data-v-c23a3626"]]);
+const _hoisted_1$U = ["dismissable"];
+const _hoisted_2$C = { class: "m-0" };
+const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
   __name: "Alert",
   props: {
     message: {},
@@ -345,7 +345,7 @@ const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
           size: 2,
           color: color2[_ctx.type]
         }, null, 8, ["icon", "color"])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("p", _hoisted_2$B, vue.toDisplayString(_ctx.message), 1),
+        vue.createElementVNode("p", _hoisted_2$C, vue.toDisplayString(_ctx.message), 1),
         vue.createVNode(Btn, {
           flat: "",
           thin: "",
@@ -353,13 +353,13 @@ const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
           icon: "close",
           onClick: _cache[0] || (_cache[0] = ($event) => isDismissed.value = true)
         })
-      ], 10, _hoisted_1$T)) : vue.createCommentVNode("", true);
+      ], 10, _hoisted_1$U)) : vue.createCommentVNode("", true);
     };
   }
 });
-const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-57141c32"]]);
-const _hoisted_1$S = ["src", "alt"];
-const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
+const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-57141c32"]]);
+const _hoisted_1$T = ["src", "alt"];
+const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
   __name: "Avatar",
   props: {
     fallback: {},
@@ -377,7 +377,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
           key: 0,
           src: _ctx.src,
           alt: _ctx.name
-        }, null, 8, _hoisted_1$S)) : (vue.openBlock(), vue.createElementBlock("p", {
+        }, null, 8, _hoisted_1$T)) : (vue.openBlock(), vue.createElementBlock("p", {
           key: 1,
           style: vue.normalizeStyle({ "line-height": `${_ctx.size}px`, "font-size": `calc(1.5rem * ${_ctx.size} / 50)` })
         }, vue.toDisplayString((_ctx.fallback || vue.unref(initials)(_ctx.name || "")).toUpperCase()), 5))
@@ -385,8 +385,8 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-46ad8c25"]]);
-const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
+const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-46ad8c25"]]);
+const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
   __name: "Badge",
   props: {
     color: {},
@@ -415,9 +415,9 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-2f3caf93"]]);
-const _hoisted_1$R = { key: 1 };
-const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
+const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-2f3caf93"]]);
+const _hoisted_1$S = { key: 1 };
+const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
   __name: "BglComponent",
   props: {
     field: {},
@@ -437,16 +437,16 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
         return TextInput;
       }
       if (props2.field.$el === "number") return NumberInput;
-      if (props2.field.$el === "array") return _sfc_main$P;
+      if (props2.field.$el === "array") return _sfc_main$Q;
       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 === "upload") return UploadInput;
       if (props2.field.$el === "file") return FileUpload;
-      if (props2.field.$el === "date") return _sfc_main$K;
+      if (props2.field.$el === "date") return _sfc_main$L;
       if (props2.field.$el === "tabs") return TabsNav;
-      if (props2.field.$el === "form") return _sfc_main$R;
+      if (props2.field.$el === "form") return _sfc_main$S;
       return props2.field.$el ?? "div";
     });
     function getFieldData(path) {
@@ -563,7 +563,7 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
                   id: [props2.id, child.id].filter(Boolean).join("."),
                   field: child,
                   "parent-path": props2.id
-                }, null, 8, ["id", "field", "parent-path"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$R, vue.toDisplayString(child), 1))
+                }, null, 8, ["id", "field", "parent-path"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$S, vue.toDisplayString(child), 1))
               ], 64);
             }), 128))
           ], 64))
@@ -573,10 +573,10 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$Q = ["src"];
-const _hoisted_2$A = ["autoplay", "muted", "loop", "controls", "playsinline"];
-const _hoisted_3$r = ["src", "type"];
-const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$R = ["src"];
+const _hoisted_2$B = ["autoplay", "muted", "loop", "controls", "playsinline"];
+const _hoisted_3$s = ["src", "type"];
+const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
   __name: "BglVideo",
   props: {
     src: {},
@@ -653,7 +653,7 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
           allowfullscreen: "",
           title: "Video",
           allow: "autoplay"
-        }, null, 12, _hoisted_1$Q)) : _ctx.src ? (vue.openBlock(), vue.createElementBlock("video", {
+        }, null, 12, _hoisted_1$R)) : _ctx.src ? (vue.openBlock(), vue.createElementBlock("video", {
           key: 1,
           ref_key: "video",
           ref: video,
@@ -667,18 +667,18 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
           vue.createElementVNode("source", {
             src: _ctx.src,
             type: `video/${videoFormat.value}`
-          }, null, 8, _hoisted_3$r)
-        ], 12, _hoisted_2$A)) : vue.createCommentVNode("", true)
+          }, null, 8, _hoisted_3$s)
+        ], 12, _hoisted_2$B)) : vue.createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["__scopeId", "data-v-006552f6"]]);
-const _hoisted_1$P = {
+const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["__scopeId", "data-v-006552f6"]]);
+const _hoisted_1$Q = {
   key: 0,
   class: "card_label"
 };
-const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
   __name: "Card",
   props: {
     label: {},
@@ -707,7 +707,7 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
         }])
       }, {
         default: vue.withCtx(() => [
-          _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$P, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
+          _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$Q, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
@@ -717,18 +717,18 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$O = ["dir"];
-const _hoisted_2$z = {
+const _hoisted_1$P = ["dir"];
+const _hoisted_2$A = {
   key: 0,
   class: "blocker"
 };
-const _hoisted_3$q = {
+const _hoisted_3$r = {
   key: 0,
   class: "dots flex-center gap-05 mt-1"
 };
-const _hoisted_4$i = ["onClick"];
-const _hoisted_5$h = { class: "Handlers" };
-const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_4$j = ["onClick"];
+const _hoisted_5$i = { class: "Handlers" };
+const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
   __name: "Carousel",
   props: {
     autoHeight: { type: Boolean, default: false },
@@ -906,19 +906,19 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
           onMouseover: clearAutoplay,
           onFocusin: clearAutoplay
         }, [
-          vue.unref(isDragging) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$z)) : vue.createCommentVNode("", true),
+          vue.unref(isDragging) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$A)) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ], 38),
-        __props.dots && vue.unref(slideCount) > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$q, [
+        __props.dots && vue.unref(slideCount) > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$r, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(slideCount), (i2) => {
             return vue.openBlock(), vue.createElementBlock("span", {
               key: i2,
               class: vue.normalizeClass(["dot cursor", { current: vue.unref(activeSlideIndex) === i2 - 1 }]),
               onClick: ($event) => goToSlide(i2 - 1)
-            }, null, 10, _hoisted_4$i);
+            }, null, 10, _hoisted_4$j);
           }), 128))
         ])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_5$h, [
+        vue.createElementVNode("div", _hoisted_5$i, [
           vue.createElementVNode("span", { onClick: prev }, [
             vue.renderSlot(_ctx.$slots, "prev", {
               index: vue.unref(activeSlideIndex),
@@ -932,11 +932,11 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
             }, void 0, true)
           ])
         ])
-      ], 14, _hoisted_1$O);
+      ], 14, _hoisted_1$P);
     };
   }
 });
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-063b5ad9"]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["__scopeId", "data-v-063b5ad9"]]);
 function _isPlaceholder(a2) {
   return a2 != null && typeof a2 === "object" && a2["@@functional/placeholder"] === true;
 }
@@ -5847,7 +5847,7 @@ const _hoisted_4$2$1 = {
 };
 const _hoisted_5$2$1 = ["x1", "y1", "x2", "y2"];
 const _hoisted_6$2$1 = ["x1", "y1", "x2", "y2"];
-const _hoisted_7$9 = ["x1", "y1", "x2", "y2"];
+const _hoisted_7$a = ["x1", "y1", "x2", "y2"];
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.data.length ? (vue.openBlock(), vue.createElementBlock("g", {
     key: 0,
@@ -5903,7 +5903,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
         y1: _ctx.canvas.y,
         x2: _ctx.canvas.width - 1,
         y2: _ctx.canvas.height
-      }, null, 8, _hoisted_7$9)
+      }, null, 8, _hoisted_7$a)
     ])
   ], 8, _hoisted_1$4$1)) : vue.createCommentVNode("v-if", true);
 }
@@ -6770,10 +6770,10 @@ const _hoisted_1$1$1 = {
   style: { display: "flex", position: "relative" }
 };
 const _hoisted_2$1$1 = ["width", "height", "viewBox"];
-const _hoisted_3$p = { class: "layer-rectangles" };
-const _hoisted_4$h = ["transform", "onMouseover"];
-const _hoisted_5$g = ["width", "height"];
-const _hoisted_6$d = {
+const _hoisted_3$q = { class: "layer-rectangles" };
+const _hoisted_4$i = ["transform", "onMouseover"];
+const _hoisted_5$h = ["width", "height"];
+const _hoisted_6$e = {
   x: 0 + 10,
   y: 0 + 20,
   "font-size": `15px`,
@@ -6788,7 +6788,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       viewBox: `0 0 ${_ctx.size.width} ${_ctx.size.height}`,
       ref: "el"
     }, [
-      vue.createElementVNode("g", _hoisted_3$p, [
+      vue.createElementVNode("g", _hoisted_3$q, [
         (vue.openBlock(true), vue.createElementBlock(
           vue.Fragment,
           null,
@@ -6809,21 +6809,21 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                   y: 0,
                   width: r2.width,
                   height: r2.height
-                }), null, 16, _hoisted_5$g),
+                }), null, 16, _hoisted_5$h),
                 vue.renderSlot(_ctx.$slots, "text", {
                   r: r2,
                   selected: _ctx.selected === i2
                 }, () => [
                   vue.createElementVNode(
                     "text",
-                    _hoisted_6$d,
+                    _hoisted_6$e,
                     vue.toDisplayString(r2.data.name),
                     1
                     /* TEXT */
                   )
                 ])
               ])
-            ], 42, _hoisted_4$h);
+            ], 42, _hoisted_4$i);
           }),
           128
           /* KEYED_FRAGMENT */
@@ -6880,25 +6880,25 @@ var script = vue.defineComponent({
     return { bar, canvas, direction, mouse };
   }
 });
-const _hoisted_1$N = {
+const _hoisted_1$O = {
   key: 0,
   class: "layer-hover-bar"
 };
-const _hoisted_2$y = ["x", "y", "width", "height"];
+const _hoisted_2$z = ["x", "y", "width", "height"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.mouse.hover ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_1$N, [
+  return _ctx.mouse.hover ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_1$O, [
     vue.createElementVNode("rect", vue.mergeProps({ class: "hover-bar" }, _ctx.barStyle, {
       x: _ctx.bar.x,
       y: _ctx.bar.y,
       width: _ctx.bar.width > 0 ? _ctx.bar.width : 0,
       height: _ctx.bar.height > 0 ? _ctx.bar.height : 0
-    }), null, 16, _hoisted_2$y)
+    }), null, 16, _hoisted_2$z)
   ])) : vue.createCommentVNode("v-if", true);
 }
 script.render = render;
 script.__file = "src/components/HoverBar/index.vue";
 const BRAND_COLOR = "var(--bgl-primary)";
-const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
   __name: "Lineart",
   props: {
     data: {},
@@ -7038,28 +7038,28 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$M = {
+const _hoisted_1$N = {
   key: 0,
   class: "data"
 };
-const _hoisted_2$x = {
+const _hoisted_2$y = {
   key: 0,
   class: "data-row m_py-05"
 };
-const _hoisted_3$o = { class: "key" };
-const _hoisted_4$g = { class: "m-0" };
-const _hoisted_5$f = { key: 1 };
-const _hoisted_6$c = {
+const _hoisted_3$p = { class: "key" };
+const _hoisted_4$h = { class: "m-0" };
+const _hoisted_5$g = { key: 1 };
+const _hoisted_6$d = {
   key: 0,
   class: "data-row"
 };
-const _hoisted_7$8 = { class: "key" };
-const _hoisted_8$5 = { class: "m-0" };
-const _hoisted_9$4 = {
+const _hoisted_7$9 = { class: "key" };
+const _hoisted_8$6 = { class: "m-0" };
+const _hoisted_9$5 = {
   key: 0,
   class: "m-0"
 };
-const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
   __name: "DataPreview",
   props: /* @__PURE__ */ vue.mergeModels({
     showFields: {},
@@ -7095,7 +7095,7 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
     const computedSchema = vue.computed(() => getFallbackSchema([itemData.value], props2.showFields));
     return (_ctx, _cache) => {
       var _a2;
-      return __props.data ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$M, [
+      return __props.data ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$N, [
         _ctx.title ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$4), {
           key: 0,
           label: _ctx.title
@@ -7104,11 +7104,11 @@ const _sfc_main$X = /* @__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$x, [
-              vue.createElementVNode("div", _hoisted_3$o, [
-                vue.createElementVNode("p", _hoisted_4$g, vue.toDisplayString((field == null ? void 0 : field.label) || vue.unref(keyToLabel)(field.id)), 1)
+            vue.unref(iffer)(field, itemData.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$y, [
+              vue.createElementVNode("div", _hoisted_3$p, [
+                vue.createElementVNode("p", _hoisted_4$h, vue.toDisplayString((field == null ? void 0 : field.label) || vue.unref(keyToLabel)(field.id)), 1)
               ]),
-              vue.createVNode(vue.unref(_sfc_main$S), {
+              vue.createVNode(vue.unref(_sfc_main$T), {
                 modelValue: itemData.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => itemData.value = $event),
                 label: "",
@@ -7118,15 +7118,15 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
             ])) : vue.createCommentVNode("", true)
           ], 64);
         }), 128)),
-        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$f, [
+        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$g, [
           (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$c, [
-                vue.createElementVNode("div", _hoisted_7$8, [
-                  vue.createElementVNode("p", _hoisted_8$5, vue.toDisplayString(label), 1)
+              !isUnset(itemData.value[id]) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$d, [
+                vue.createElementVNode("div", _hoisted_7$9, [
+                  vue.createElementVNode("p", _hoisted_8$6, vue.toDisplayString(label), 1)
                 ]),
                 vue.createElementVNode("div", null, [
-                  id ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_9$4, vue.toDisplayString(dataTransform(itemData.value[id])), 1)) : vue.createCommentVNode("", true)
+                  id ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_9$5, vue.toDisplayString(dataTransform(itemData.value[id])), 1)) : vue.createCommentVNode("", true)
                 ])
               ])) : vue.createCommentVNode("", true)
             ], 64);
@@ -7137,7 +7137,7 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-6c27f163"]]);
+const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__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]), []);
@@ -9684,7 +9684,7 @@ const Gt$1 = {
   install: Ct$1,
   options: h
 };
-const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
   __name: "Dropdown",
   props: /* @__PURE__ */ vue.mergeModels({
     value: {},
@@ -9762,9 +9762,9 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$L = { class: "px-1 pt-025 pb-1" };
-const _hoisted_2$w = { class: "ms-1" };
-const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$M = { class: "px-1 pt-025 pb-1" };
+const _hoisted_2$x = { class: "ms-1" };
+const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
   __name: "FieldSetVue",
   props: {
     label: {},
@@ -9772,15 +9772,15 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("fieldset", _hoisted_1$L, [
-        vue.createElementVNode("legend", _hoisted_2$w, vue.toDisplayString(_ctx.legend || _ctx.label), 1),
+      return vue.openBlock(), vue.createElementBlock("fieldset", _hoisted_1$M, [
+        vue.createElementVNode("legend", _hoisted_2$x, vue.toDisplayString(_ctx.legend || _ctx.label), 1),
         vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
       ]);
     };
   }
 });
-const FieldSetVue = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-f7e758e5"]]);
-const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
+const FieldSetVue = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-f7e758e5"]]);
+const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
   __name: "Flag",
   props: {
     country: {},
@@ -9810,7 +9810,92 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Flag = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-f99f1900"]]);
+const Flag = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-f99f1900"]]);
+const FORM_STATE_KEY = Symbol("bagelFormState");
+function safeClone(obj) {
+  if (obj === null || typeof obj !== "object") return obj;
+  const seen = /* @__PURE__ */ new WeakSet();
+  return JSON.parse(JSON.stringify(obj, (key, value) => {
+    if (typeof value === "object" && value !== null) {
+      if (seen.has(value)) {
+        return void 0;
+      }
+      seen.add(value);
+    }
+    return value;
+  }));
+}
+function provideBagelFormState(initialData) {
+  const data2 = vue.ref(initialData);
+  const isDirty = vue.ref(false);
+  const getFieldData = (path) => {
+    if (!path) return "";
+    const keys4 = path.split(/[.[]/);
+    let current = data2.value;
+    for (let i2 = 0; i2 < keys4.length; i2++) {
+      const key = keys4[i2];
+      if (!current || typeof current !== "object" || !(key in current)) {
+        return "";
+      }
+      current = current[key];
+    }
+    return current ?? "";
+  };
+  const updateField = (path, value) => {
+    const keys4 = path.split(/[.[]/);
+    if (typeof data2.value !== "object" || data2.value === null) {
+      data2.value = {};
+    }
+    let current = data2.value;
+    for (let i2 = 0; i2 < keys4.length - 1; i2++) {
+      const key = keys4[i2];
+      if (!(key in current) || typeof current[key] !== "object" || current[key] === null) {
+        current[key] = {};
+      }
+      current = current[key];
+    }
+    const safeValue = safeClone(value);
+    current[keys4[keys4.length - 1]] = safeValue;
+    isDirty.value = true;
+  };
+  const state2 = {
+    data: data2,
+    getFieldData,
+    updateField,
+    isDirty
+  };
+  vue.provide(FORM_STATE_KEY, state2);
+  return state2;
+}
+function useBagelFormState() {
+  const state2 = vue.inject(FORM_STATE_KEY);
+  if (!state2) throw new Error("BagelFormState must be provided");
+  return state2;
+}
+function useFormField(props2) {
+  const formState = vue.inject(FORM_STATE_KEY);
+  const fieldData = vue.computed({
+    get: () => {
+      if (!props2.fieldID || !formState) return props2.modelValue ?? props2.field.defaultValue ?? "";
+      const value = formState.getFieldData(props2.fieldID);
+      if (props2.field.$el === "form" && !value) return {};
+      return value ?? "";
+    },
+    set: (val) => {
+      if (!props2.fieldID || !formState) return;
+      const currentValue = formState.getFieldData(props2.fieldID);
+      if (JSON.stringify(val) === JSON.stringify(currentValue)) return;
+      if (props2.field.onUpdate) {
+        props2.field.onUpdate(val, currentValue);
+      }
+      formState.updateField(props2.fieldID, val);
+    }
+  });
+  return {
+    fieldData,
+    formState
+  };
+}
 const state$1 = vue.reactive(/* @__PURE__ */ new Map());
 function useTabs(group) {
   if (!state$1.has(group)) {
@@ -9824,8 +9909,8 @@ function useTabs(group) {
   });
   return { currentTab };
 }
-const _hoisted_1$K = ["onClick"];
-const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$L = ["onClick"];
+const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
   __name: "TabsNav",
   props: {
     title: {},
@@ -9907,77 +9992,16 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
                 icon: tab.icon
               }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
               vue.createTextVNode(" " + vue.toDisplayString(tabLabel(tab)), 1)
-            ], 10, _hoisted_1$K);
+            ], 10, _hoisted_1$L);
           }), 128))
         ], true)
       ], 2);
     };
   }
 });
-const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-307612a9"]]);
-const FORM_STATE_KEY = Symbol("bagelFormState");
-function safeClone(obj) {
-  if (obj === null || typeof obj !== "object") return obj;
-  const seen = /* @__PURE__ */ new WeakSet();
-  return JSON.parse(JSON.stringify(obj, (key, value) => {
-    if (typeof value === "object" && value !== null) {
-      if (seen.has(value)) {
-        return void 0;
-      }
-      seen.add(value);
-    }
-    return value;
-  }));
-}
-function provideBagelFormState(initialData) {
-  const data2 = vue.ref(initialData);
-  const isDirty = vue.ref(false);
-  const getFieldData = (path) => {
-    if (!path) return "";
-    const keys4 = path.split(/[.[]/);
-    let current = data2.value;
-    for (let i2 = 0; i2 < keys4.length; i2++) {
-      const key = keys4[i2];
-      if (!current || typeof current !== "object" || !(key in current)) {
-        return "";
-      }
-      current = current[key];
-    }
-    return current ?? "";
-  };
-  const updateField = (path, value) => {
-    const keys4 = path.split(/[.[]/);
-    if (typeof data2.value !== "object" || data2.value === null) {
-      data2.value = {};
-    }
-    let current = data2.value;
-    for (let i2 = 0; i2 < keys4.length - 1; i2++) {
-      const key = keys4[i2];
-      if (!(key in current) || typeof current[key] !== "object" || current[key] === null) {
-        current[key] = {};
-      }
-      current = current[key];
-    }
-    const safeValue = safeClone(value);
-    current[keys4[keys4.length - 1]] = safeValue;
-    isDirty.value = true;
-  };
-  const state2 = {
-    data: data2,
-    getFieldData,
-    updateField,
-    isDirty
-  };
-  vue.provide(FORM_STATE_KEY, state2);
-  return state2;
-}
-function useBagelFormState() {
-  const state2 = vue.inject(FORM_STATE_KEY);
-  if (!state2) throw new Error("BagelFormState must be provided");
-  return state2;
-}
-const _hoisted_1$J = { key: 1 };
-const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
+const TabsNav = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-307612a9"]]);
+const _hoisted_1$K = { key: 1 };
+const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
   __name: "BglField",
   props: {
     field: {},
@@ -9988,8 +10012,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const props2 = __props;
-    const emit2 = __emit;
-    const formState = vue.inject(FORM_STATE_KEY) ?? provideBagelFormState(props2.modelValue);
+    const { fieldData } = useFormField(props2);
     const customAttrs = vue.ref({});
     const is4 = vue.computed(() => {
       if (props2.field.$el === "text") return TextInput;
@@ -9998,62 +10021,36 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
         return TextInput;
       }
       if (props2.field.$el === "number") return NumberInput;
-      if (props2.field.$el === "array") return _sfc_main$P;
+      if (props2.field.$el === "array") return _sfc_main$Q;
       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 === "upload") return UploadInput;
       if (props2.field.$el === "file") return FileUpload;
-      if (props2.field.$el === "date") return _sfc_main$K;
+      if (props2.field.$el === "date") return _sfc_main$L;
       if (props2.field.$el === "tabs") return TabsNav;
-      if (props2.field.$el === "bglform") return _sfc_main$R;
+      if (props2.field.$el === "bglform") return _sfc_main$S;
       return props2.field.$el ?? "div";
     });
-    const fieldData = vue.computed({
-      get: () => {
-        if (!props2.fieldID) return props2.field.defaultValue ?? (props2.field.$el === "form" ? {} : "");
-        const value = formState.getFieldData(props2.fieldID);
-        if (props2.field.$el === "form" && !value) return {};
-        return value ?? "";
-      },
-      set: (val) => {
-        if (!props2.fieldID) return;
-        const currentValue = formState.getFieldData(props2.fieldID);
-        if (JSON.stringify(val) === JSON.stringify(currentValue)) return;
-        emit2("update:modelValue", val);
-        if (props2.field.onUpdate) {
-          props2.field.onUpdate(val, currentValue);
-        }
-        formState.updateField(props2.fieldID, val);
-      }
-    });
-    const vIf = vue.computed(() => {
-      if (props2.field["v-if"] === void 0 && props2.field.vIf === void 0) return true;
-      if (typeof props2.field["v-if"] === "boolean" || typeof props2.field.vIf === "boolean") return props2.field["v-if"];
-      if (typeof props2.field["v-if"] === "string" || typeof props2.field.vIf === "string") return true;
-      if (typeof props2.field["v-if"] === "function") return props2.field["v-if"](fieldData.value, formState.data.value);
-      if (typeof props2.field.vIf === "function") return props2.field.vIf(fieldData.value, formState.data.value);
-      return true;
-    });
     const computedOptions = vue.computed(
-      () => bindAttrs({ options: props2.field.options }, fieldData.value, formState.data.value).options
+      () => bindAttrs({ options: props2.field.options }, fieldData, props2.modelValue).options
     );
     const computedAttrs = vue.computed(() => {
       const attrs = { ...customAttrs.value, ...props2.field.attrs };
-      return bindAttrs(attrs, fieldData.value, formState.data.value);
+      return bindAttrs(attrs, fieldData, props2.modelValue);
     });
     const computedClass = vue.computed(
       () => {
         var _a2;
-        return classify(fieldData.value, formState.data.value, props2.field.class, (_a2 = props2.field.attrs) == null ? void 0 : _a2.class);
+        return classify(fieldData, props2.modelValue, props2.field.class, (_a2 = props2.field.attrs) == null ? void 0 : _a2.class);
       }
     );
     return (_ctx, _cache) => {
       const _component_BglField = vue.resolveComponent("BglField", true);
-      return vIf.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(is4.value), vue.mergeProps({ key: 0 }, computedAttrs.value, {
-        modelValue: fieldData.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => fieldData.value = $event),
+      return _ctx.field.vIf === void 0 || _ctx.field.vIf ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(is4.value), vue.mergeProps({ key: 0 }, computedAttrs.value, {
+        modelValue: vue.unref(fieldData),
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(fieldData) ? fieldData.value = $event : null),
         fieldID: props2.fieldID,
         required: _ctx.field.required,
         class: computedClass.value,
@@ -10072,7 +10069,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
                 fieldID: [props2.fieldID, child.id].filter(Boolean).join("."),
                 field: child,
                 "parent-path": props2.fieldID
-              }, null, 8, ["fieldID", "field", "parent-path"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$J, vue.toDisplayString(child), 1))
+              }, null, 8, ["fieldID", "field", "parent-path"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$K, vue.toDisplayString(child), 1))
             ], 64);
           }), 128))
         ]),
@@ -10081,7 +10078,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
   __name: "BglForm",
   props: {
     label: {},
@@ -10111,7 +10108,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
         }
         data2.value = newVal;
       }, { deep: true, immediate: true });
-      vue.watch(() => data2, (newVal) => {
+      vue.watch(() => data2.value, (newVal) => {
         if (emitDirty.value) return;
         emitDirty.value = true;
         emit2("dirty");
@@ -10183,7 +10180,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
         _ctx.tag === "template" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(computedSchema.value, (field, i2) => {
-            return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$S), {
+            return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$T), {
               key: field.id || `${i2}p`,
               fieldID: field.id,
               field
@@ -10206,7 +10203,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
             label: _ctx.label
           }, null, 8, ["label"])) : vue.createCommentVNode("", true),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(computedSchema.value, (field, i2) => {
-            return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$S), {
+            return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$T), {
               key: field.id || `${i2}p`,
               fieldID: field.id,
               field
@@ -10224,8 +10221,8 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$I = { key: 0 };
-const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$J = { key: 0 };
+const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
   __name: "BglMultiStepForm",
   props: /* @__PURE__ */ vue.mergeModels({
     bagelFormProps: { default: () => ({}) },
@@ -10292,8 +10289,8 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
           mode: "out-in"
         }, {
           default: vue.withCtx(() => [
-            !vue.unref(isStepping) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$I, [
-              vue.createVNode(vue.unref(_sfc_main$R), vue.mergeProps({
+            !vue.unref(isStepping) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$J, [
+              vue.createVNode(vue.unref(_sfc_main$S), vue.mergeProps({
                 ref_key: "formRef",
                 ref: formRef,
                 modelValue: formData.value,
@@ -10332,12 +10329,12 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$H = { class: "label mb-05" };
-const _hoisted_2$v = {
+const _hoisted_1$I = { class: "label mb-05" };
+const _hoisted_2$w = {
   key: 0,
   class: "-ms-05 ps-05 border-start"
 };
-const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
   __name: "FieldArray",
   props: {
     el: { default: "div" },
@@ -10394,8 +10391,8 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(props2.class)
       }, [
-        vue.createElementVNode("p", _hoisted_1$H, vue.toDisplayString(_ctx.label), 1),
-        _ctx.schema ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$v, [
+        vue.createElementVNode("p", _hoisted_1$I, vue.toDisplayString(_ctx.label), 1),
+        _ctx.schema ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$w, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(data2.value, (_2, i2) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               key: i2,
@@ -10403,7 +10400,7 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
               thin: "",
               class: "mb-05 itemBox transition p-05"
             }, [
-              vue.createVNode(vue.unref(_sfc_main$R), {
+              vue.createVNode(vue.unref(_sfc_main$S), {
                 modelValue: data2.value[i2],
                 "onUpdate:modelValue": [($event) => data2.value[i2] = $event, emitValue],
                 schema: _ctx.schema
@@ -10433,7 +10430,7 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
             _: 1
           })) : vue.createCommentVNode("", true)
         ])) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(data2.value, (_2, i2) => {
-          return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$S), {
+          return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$T), {
             key: i2,
             modelValue: data2.value[i2],
             "onUpdate:modelValue": [($event) => data2.value[i2] = $event, emitValue],
@@ -10444,8 +10441,8 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$G = { class: "primary-checkbox" };
-const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$H = { class: "primary-checkbox" };
+const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
   __name: "Checkbox",
   props: {
     "modelValue": { type: Boolean, ...{ default: false } },
@@ -10455,7 +10452,7 @@ const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const val = vue.useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("label", _hoisted_1$G, [
+      return vue.openBlock(), vue.createElementBlock("label", _hoisted_1$H, [
         vue.renderSlot(_ctx.$slots, "label", {}, void 0, true),
         vue.withDirectives(vue.createElementVNode("input", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => val.value = $event),
@@ -10467,11 +10464,11 @@ const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-73f1d9ad"]]);
-const _hoisted_1$F = ["title"];
-const _hoisted_2$u = ["id", "value", "required"];
-const _hoisted_3$n = ["for"];
-const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
+const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-73f1d9ad"]]);
+const _hoisted_1$G = ["title"];
+const _hoisted_2$v = ["id", "value", "required"];
+const _hoisted_3$o = ["for"];
+const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
   __name: "CheckInput",
   props: /* @__PURE__ */ vue.mergeModels({
     label: {},
@@ -10505,32 +10502,32 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
           required: _ctx.required,
           type: "checkbox",
           class: "me-05"
-        }, null, 8, _hoisted_2$u), [
+        }, null, 8, _hoisted_2$v), [
           [vue.vModelCheckbox, checked.value]
         ]),
         vue.createElementVNode("label", { for: inputId.value }, [
           vue.renderSlot(_ctx.$slots, "label", {}, () => [
             vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
           ], true)
-        ], 8, _hoisted_3$n)
-      ], 10, _hoisted_1$F);
+        ], 8, _hoisted_3$o)
+      ], 10, _hoisted_1$G);
     };
   }
 });
-const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-03ed2982"]]);
-const _hoisted_1$E = { class: "mb-05" };
-const _hoisted_2$t = {
+const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-03ed2982"]]);
+const _hoisted_1$F = { class: "mb-05" };
+const _hoisted_2$u = {
   key: 0,
   class: "label txt-start"
 };
-const _hoisted_3$m = {
+const _hoisted_3$n = {
   key: 1,
   class: "code-editor-wrap grid rounded p-1 overflow hm-300px ltr txt-start relative h-100p"
 };
-const _hoisted_4$f = { class: "overflow-hidden absolute inset-0 p-0 m-0 h-100 codeText" };
-const _hoisted_5$e = ["innerHTML"];
-const _hoisted_6$b = ["onKeydown"];
-const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_4$g = { class: "overflow-hidden absolute inset-0 p-0 m-0 h-100 codeText" };
+const _hoisted_5$f = ["innerHTML"];
+const _hoisted_6$c = ["onKeydown"];
+const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
   __name: "Index",
   props: {
     language: {},
@@ -10612,19 +10609,19 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
       }
     }, { immediate: true });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$t, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
-        vue.unref(loaded) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$m, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$F, [
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$u, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
+        vue.unref(loaded) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$n, [
           vue.createElementVNode("div", {
             class: "relative block h-100",
             style: vue.normalizeStyle({ height: `calc(${vue.unref(elHeight)} - 2rem)` })
           }, [
-            vue.createElementVNode("pre", _hoisted_4$f, [
+            vue.createElementVNode("pre", _hoisted_4$g, [
               _cache[2] || (_cache[2] = vue.createTextVNode("					")),
               vue.createElementVNode("code", {
                 class: vue.normalizeClass(["absolute inset-0", className.value]),
                 innerHTML: highlightedCode.value
-              }, null, 10, _hoisted_5$e),
+              }, null, 10, _hoisted_5$f),
               _cache[3] || (_cache[3] = vue.createTextVNode("\n				"))
             ]),
             !_ctx.readonly ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", {
@@ -10639,7 +10636,7 @@ const _sfc_main$M = /* @__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_6$b)), [
+            }, null, 40, _hoisted_6$c)), [
               [vue.vModelText, vue.unref(code)]
             ]) : vue.createCommentVNode("", true)
           ], 4)
@@ -10648,10 +10645,10 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-1fbc9b61"]]);
-const _hoisted_1$D = ["title"];
-const _hoisted_2$s = ["id", "placeholder", "required"];
-const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
+const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-1fbc9b61"]]);
+const _hoisted_1$E = ["title"];
+const _hoisted_2$t = ["id", "placeholder", "required"];
+const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
   __name: "ColorPicker",
   props: {
     label: {},
@@ -10689,11 +10686,11 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
             placeholder: _ctx.placeholder || _ctx.label,
             class: { "no-edit": !_ctx.editMode },
             required: _ctx.required
-          }, _ctx.nativeInputAttrs), null, 16, _hoisted_2$s), [
+          }, _ctx.nativeInputAttrs), null, 16, _hoisted_2$t), [
             [vue.vModelText, inputVal.value]
           ])
         ])
-      ], 10, _hoisted_1$D)) : vue.createCommentVNode("", true);
+      ], 10, _hoisted_1$E)) : vue.createCommentVNode("", true);
     };
   }
 });
@@ -19251,9 +19248,9 @@ const eo = ({
 Object.entries(go).forEach(([e, t]) => {
   e !== "default" && (Hn[e] = t);
 });
-const _hoisted_1$C = ["title"];
-const _hoisted_2$r = { key: 0 };
-const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$D = ["title"];
+const _hoisted_2$s = { key: 0 };
+const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
   __name: "DateInput",
   props: {
     required: { type: Boolean },
@@ -19295,7 +19292,7 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
         title: _ctx.label
       }, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$r, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$s, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
         vue.createVNode(vue.unref(Hn), vue.mergeProps({
           ref_key: "datePicker",
           ref: datePicker,
@@ -19311,10 +19308,374 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
           "minutes-grid-increment": _ctx.minutesGridIncrement,
           "start-time": { hours: 8, minutes: 0 }
         }), null, 16, ["modelValue", "required", "enable-time-picker", "allowed-dates", "time-picker-inline", "minutes-increment", "minutes-grid-increment"])
+      ], 10, _hoisted_1$D);
+    };
+  }
+});
+const _hoisted_1$C = ["title"];
+const _hoisted_2$r = { key: 0 };
+const _hoisted_3$m = {
+  key: 0,
+  class: "required"
+};
+const _hoisted_4$f = { class: "date-picker-container" };
+const _hoisted_5$e = ["type", "value", "min", "max", "required", "disabled"];
+const _hoisted_6$b = { class: "calendar-container" };
+const _hoisted_7$8 = { class: "calendar-section" };
+const _hoisted_8$5 = { class: "calendar-header" };
+const _hoisted_9$4 = { class: "month-year-selector" };
+const _hoisted_10$4 = { class: "month-year" };
+const _hoisted_11$3 = {
+  key: 0,
+  class: "calendar-grid"
+};
+const _hoisted_12$3 = ["disabled", "onClick"];
+const _hoisted_13$3 = {
+  key: 1,
+  class: "month-grid"
+};
+const _hoisted_14$2 = ["disabled", "onClick"];
+const _hoisted_15$1 = {
+  key: 2,
+  class: "year-grid"
+};
+const _hoisted_16 = ["disabled", "onClick"];
+const _hoisted_17 = {
+  key: 0,
+  class: "time-picker"
+};
+const _hoisted_18 = { class: "time-input-group" };
+const _hoisted_19 = { class: "timezone-display" };
+const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
+  __name: "DatePick",
+  props: {
+    required: { type: Boolean },
+    label: {},
+    editMode: { type: Boolean, default: true },
+    small: { type: Boolean, default: false },
+    enableTime: { type: Boolean, default: false },
+    modelValue: {},
+    min: {},
+    max: {},
+    timezone: { default: "UTC" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props2 = __props;
+    const emit2 = __emit;
+    let isOpen = vue.ref(false);
+    let currentMonth = vue.ref(/* @__PURE__ */ new Date());
+    let currentView = vue.ref("days");
+    const inputType = vue.computed(() => props2.enableTime ? "datetime-local" : "date");
+    function formatDate(date2) {
+      if (!date2) return "";
+      const dateObj = typeof date2 === "string" ? new Date(date2) : date2;
+      return props2.enableTime ? dateObj.toISOString().slice(0, 16) : dateObj.toISOString().split("T")[0];
+    }
+    const formattedValue = vue.computed(() => formatDate(props2.modelValue));
+    const formattedMin = vue.computed(() => formatDate(props2.min));
+    const formattedMax = vue.computed(() => formatDate(props2.max));
+    const selectedDate = vue.computed(() => {
+      if (!props2.modelValue) return null;
+      return typeof props2.modelValue === "string" ? new Date(props2.modelValue) : props2.modelValue;
+    });
+    const currentMonthDays = vue.computed(() => {
+      const year = currentMonth.value.getFullYear();
+      const month = currentMonth.value.getMonth();
+      const firstDay = new Date(year, month, 1);
+      const lastDay = new Date(year, month + 1, 0);
+      const days = [];
+      for (let i2 = 0; i2 < firstDay.getDay(); i2++) days.push(null);
+      for (let i2 = 1; i2 <= lastDay.getDate(); i2++) days.push(new Date(year, month, i2));
+      return days;
+    });
+    const currentMonthValue = vue.computed(() => ({
+      month: currentMonth.value.getMonth(),
+      year: currentMonth.value.getFullYear(),
+      formatted: {
+        month: currentMonth.value.toLocaleString("default", { month: "long", timeZone: props2.timezone }),
+        year: currentMonth.value.toLocaleString("default", { year: "numeric", timeZone: props2.timezone })
+      }
+    }));
+    const months = vue.computed(
+      () => Array.from({ length: 12 }, (_2, i2) => {
+        const date2 = new Date(currentMonthValue.value.year, i2, 1);
+        return {
+          name: date2.toLocaleString("default", { month: "short" }),
+          value: i2,
+          disabled: isDateDisabled(date2)
+        };
+      })
+    );
+    const years = vue.computed(() => {
+      const startYear = currentMonthValue.value.year - 10;
+      return Array.from({ length: 21 }, (_2, i2) => ({
+        value: startYear + i2,
+        disabled: isYearDisabled(startYear + i2)
+      }));
+    });
+    function isDateDisabled(date2) {
+      if (!date2) return true;
+      const minDate = props2.min ? new Date(props2.min) : null;
+      const maxDate = props2.max ? new Date(props2.max) : null;
+      if (minDate && date2 < minDate) return true;
+      if (maxDate && date2 > maxDate) return true;
+      return false;
+    }
+    function isYearDisabled(year) {
+      const minDate = props2.min ? new Date(props2.min) : null;
+      const maxDate = props2.max ? new Date(props2.max) : null;
+      if (minDate && year < minDate.getFullYear()) return true;
+      if (maxDate && year > maxDate.getFullYear()) return true;
+      return false;
+    }
+    function selectMonth(monthIndex) {
+      currentMonth.value = new Date(currentMonth.value.getFullYear(), monthIndex, 1);
+      currentView.value = "days";
+    }
+    function selectYear(year) {
+      currentMonth.value = new Date(year, currentMonth.value.getMonth(), 1);
+      currentView.value = "months";
+    }
+    function previousMonth() {
+      currentMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() - 1, 1);
+    }
+    function nextMonth() {
+      currentMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() + 1, 1);
+    }
+    function previousYear() {
+      const offset2 = currentView.value === "months" ? 1 : 21;
+      currentMonth.value = new Date(currentMonth.value.getFullYear() - offset2, currentMonth.value.getMonth(), 1);
+    }
+    function nextYear() {
+      const offset2 = currentView.value === "months" ? 1 : 21;
+      currentMonth.value = new Date(currentMonth.value.getFullYear() + offset2, currentMonth.value.getMonth(), 1);
+    }
+    function selectDate(date2) {
+      var _a2, _b;
+      if (!date2 || !props2.editMode) return;
+      const newDate = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate(), 0, 0, 0);
+      if (props2.enableTime) {
+        const currentHours = ((_a2 = selectedDate.value) == null ? void 0 : _a2.getHours()) ?? (/* @__PURE__ */ new Date()).getHours();
+        const currentMinutes = ((_b = selectedDate.value) == null ? void 0 : _b.getMinutes()) ?? (/* @__PURE__ */ new Date()).getMinutes();
+        newDate.setHours(currentHours);
+        newDate.setMinutes(currentMinutes);
+        emit2("update:modelValue", newDate.toISOString());
+      } else {
+        emit2("update:modelValue", newDate.toISOString().split("T")[0]);
+        isOpen.value = false;
+      }
+    }
+    function handleInput(event) {
+      const input = event.target;
+      if (!input.value) {
+        emit2("update:modelValue", "");
+        return;
+      }
+      const date2 = new Date(input.value);
+      emit2("update:modelValue", props2.enableTime ? date2.toISOString() : date2.toISOString().split("T")[0]);
+    }
+    const hours = vue.computed(() => {
+      var _a2;
+      return ((_a2 = selectedDate.value) == null ? void 0 : _a2.getHours()) ?? 0;
+    });
+    const minutes = vue.computed(() => {
+      var _a2;
+      return ((_a2 = selectedDate.value) == null ? void 0 : _a2.getMinutes()) ?? 0;
+    });
+    function handleHourInput(value) {
+      if (!selectedDate.value) return;
+      const newDate = new Date(selectedDate.value);
+      newDate.setHours(value);
+      emit2("update:modelValue", newDate.toISOString());
+    }
+    function handleMinuteInput(value) {
+      if (!selectedDate.value) return;
+      const newDate = new Date(selectedDate.value);
+      newDate.setMinutes(value);
+      emit2("update:modelValue", newDate.toISOString());
+    }
+    function isSelected(date2) {
+      if (!date2 || !selectedDate.value) return false;
+      return date2.toISOString().split("T")[0] === selectedDate.value.toISOString().split("T")[0];
+    }
+    function isToday(date2) {
+      if (!date2) return false;
+      return date2.toISOString().split("T")[0] === (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+    }
+    const timezoneDisplay = vue.computed(() => {
+      if (!props2.enableTime) return "";
+      try {
+        return (/* @__PURE__ */ new Date()).toLocaleString("en-US", {
+          timeZoneName: "short",
+          timeZone: props2.timezone
+        }).split(" ").pop();
+      } catch {
+        return "UTC";
+      }
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["bagel-input", { small: _ctx.small }]),
+        title: _ctx.label
+      }, [
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$r, [
+          vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
+          _ctx.required ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$m, "*")) : vue.createCommentVNode("", true)
+        ])) : vue.createCommentVNode("", true),
+        vue.createVNode(vue.unref(kt$1), {
+          shown: vue.unref(isOpen),
+          triggers: [],
+          placement: "bottom-start",
+          distance: 4,
+          onApplyShow: _cache[4] || (_cache[4] = ($event) => vue.isRef(isOpen) ? isOpen.value = true : isOpen = true),
+          onApplyHide: _cache[5] || (_cache[5] = ($event) => vue.isRef(isOpen) ? isOpen.value = false : isOpen = false)
+        }, {
+          popper: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_6$b, [
+              vue.createElementVNode("div", _hoisted_7$8, [
+                vue.createElementVNode("div", _hoisted_8$5, [
+                  vue.unref(currentView) === "days" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                    vue.createVNode(vue.unref(Btn), {
+                      flat: "",
+                      icon: "chevron_left",
+                      onClick: previousMonth
+                    }),
+                    vue.createElementVNode("div", _hoisted_9$4, [
+                      vue.createElementVNode("button", {
+                        class: "month-btn",
+                        onClick: _cache[1] || (_cache[1] = ($event) => vue.isRef(currentView) ? currentView.value = "months" : currentView = "months")
+                      }, vue.toDisplayString(currentMonthValue.value.formatted.month), 1),
+                      vue.createElementVNode("button", {
+                        class: "year-btn",
+                        onClick: _cache[2] || (_cache[2] = ($event) => vue.isRef(currentView) ? currentView.value = "years" : currentView = "years")
+                      }, vue.toDisplayString(currentMonthValue.value.formatted.year), 1)
+                    ]),
+                    vue.createVNode(vue.unref(Btn), {
+                      flat: "",
+                      icon: "chevron_right",
+                      onClick: nextMonth
+                    })
+                  ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                    vue.createVNode(vue.unref(Btn), {
+                      flat: "",
+                      icon: "chevron_left",
+                      onClick: previousYear
+                    }),
+                    vue.createElementVNode("span", _hoisted_10$4, vue.toDisplayString(currentMonthValue.value.formatted.year), 1),
+                    vue.createVNode(vue.unref(Btn), {
+                      flat: "",
+                      icon: "chevron_right",
+                      onClick: nextYear
+                    })
+                  ], 64))
+                ]),
+                vue.unref(currentView) === "days" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$3, [
+                  (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], (day) => {
+                    return vue.createElementVNode("div", {
+                      key: day,
+                      class: "weekday"
+                    }, vue.toDisplayString(day), 1);
+                  }), 64)),
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(currentMonthDays.value, (date2, index2) => {
+                    return vue.openBlock(), vue.createElementBlock("button", {
+                      key: index2,
+                      type: "button",
+                      class: vue.normalizeClass(["day", {
+                        selected: isSelected(date2),
+                        today: isToday(date2),
+                        disabled: isDateDisabled(date2)
+                      }]),
+                      disabled: isDateDisabled(date2),
+                      onClick: ($event) => selectDate(date2)
+                    }, vue.toDisplayString(date2 == null ? void 0 : date2.getDate()), 11, _hoisted_12$3);
+                  }), 128))
+                ])) : vue.unref(currentView) === "months" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$3, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(months.value, (month) => {
+                    return vue.openBlock(), vue.createElementBlock("button", {
+                      key: month.value,
+                      class: vue.normalizeClass(["month-item", {
+                        selected: month.value === currentMonthValue.value.month,
+                        disabled: month.disabled
+                      }]),
+                      disabled: month.disabled,
+                      onClick: ($event) => selectMonth(month.value)
+                    }, vue.toDisplayString(month.name), 11, _hoisted_14$2);
+                  }), 128))
+                ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$1, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(years.value, (year) => {
+                    return vue.openBlock(), vue.createElementBlock("button", {
+                      key: year.value,
+                      class: vue.normalizeClass(["year-item", {
+                        selected: year.value === currentMonthValue.value.year,
+                        disabled: year.disabled
+                      }]),
+                      disabled: year.disabled,
+                      onClick: ($event) => selectYear(year.value)
+                    }, vue.toDisplayString(year.value), 11, _hoisted_16);
+                  }), 128))
+                ]))
+              ]),
+              _ctx.enableTime && vue.unref(currentView) === "days" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17, [
+                vue.createElementVNode("div", _hoisted_18, [
+                  vue.createVNode(vue.unref(NumberInput), {
+                    center: "",
+                    "model-value": hours.value,
+                    disabled: !selectedDate.value,
+                    min: 0,
+                    max: 23,
+                    layout: "vertical",
+                    padZero: 2,
+                    "onUpdate:modelValue": handleHourInput
+                  }, null, 8, ["model-value", "disabled"]),
+                  _cache[6] || (_cache[6] = vue.createElementVNode("span", null, ":", -1)),
+                  vue.createVNode(vue.unref(NumberInput), {
+                    center: "",
+                    "model-value": minutes.value,
+                    disabled: !selectedDate.value,
+                    min: 0,
+                    max: 59,
+                    padZero: 2,
+                    layout: "vertical",
+                    "onUpdate:modelValue": handleMinuteInput
+                  }, null, 8, ["model-value", "disabled"])
+                ]),
+                vue.createElementVNode("span", _hoisted_19, vue.toDisplayString(timezoneDisplay.value), 1),
+                selectedDate.value ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
+                  key: 0,
+                  flat: "",
+                  onClick: _cache[3] || (_cache[3] = ($event) => vue.isRef(isOpen) ? isOpen.value = false : isOpen = false)
+                }, {
+                  default: vue.withCtx(() => _cache[7] || (_cache[7] = [
+                    vue.createTextVNode(" Done ")
+                  ])),
+                  _: 1
+                })) : vue.createCommentVNode("", true)
+              ])) : vue.createCommentVNode("", true)
+            ])
+          ]),
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_4$f, [
+              vue.createElementVNode("input", {
+                type: inputType.value,
+                value: formattedValue.value,
+                min: formattedMin.value,
+                max: formattedMax.value,
+                required: _ctx.required,
+                disabled: !_ctx.editMode,
+                class: "date-input",
+                onInput: handleInput,
+                onClick: _cache[0] || (_cache[0] = ($event) => vue.isRef(isOpen) ? isOpen.value = true : isOpen = true)
+              }, null, 40, _hoisted_5$e)
+            ])
+          ]),
+          _: 1
+        }, 8, ["shown"])
       ], 10, _hoisted_1$C);
     };
   }
 });
+const DatePick = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-e36ecd8c"]]);
 const _hoisted_1$B = { class: "datetime-wrap" };
 const _hoisted_2$q = { class: "date-wrap" };
 const _hoisted_3$l = {
@@ -19704,7 +20065,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [
         vue.createElementVNode("label", null, vue.toDisplayString(_ctx.label), 1),
         _ctx.required && !storageFiles.value.length ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_2$o)) : vue.createCommentVNode("", true),
-        _ctx.theme === "basic" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$_), {
+        _ctx.theme === "basic" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$$), {
           key: 1,
           outline: "",
           class: "flex p-05 gap-1",
@@ -20014,7 +20375,8 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     id: {},
     helptext: {},
     layout: {},
-    center: { type: Boolean }
+    center: { type: Boolean },
+    padZero: {}
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -20034,7 +20396,11 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
       emit2("update:modelValue", numberValue.value);
     }
     function formatNumber2(num) {
-      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+      let formatted = num.toString();
+      if (__props.padZero && __props.padZero > 0) {
+        formatted = formatted.padStart(__props.padZero, "0");
+      }
+      return formatted.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     }
     let formattedValue = vue.ref("");
     function inputHandler() {
@@ -20149,7 +20515,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-a6e0446d"]]);
+const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-3a20cf4a"]]);
 const _hoisted_1$w = ["value", "autofocus", "onKeydown", "onPaste"];
 const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   __name: "OTP",
@@ -20812,7 +21178,7 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.config.map(configToOption).filter(Boolean), (action, index2) => {
           return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index2 }, [
-            action.name === "insertTable" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$W), {
+            action.name === "insertTable" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$X), {
               key: 0,
               placement: "bottom-start",
               thin: "",
@@ -22110,7 +22476,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$W), {
+      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$X), {
         ref_key: "dropdown",
         ref: dropdown,
         shown: vue.unref(open),
@@ -22189,7 +22555,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
             height: "25px",
             class: "mx-1 my-1"
           })) : vue.createCommentVNode("", true),
-          vue.createVNode(vue.unref(_sfc_main$_), {
+          vue.createVNode(vue.unref(_sfc_main$$), {
             class: "p-05",
             style: vue.normalizeStyle({ width: _ctx.fullWidth ? "100%" : "auto" })
           }, {
@@ -30348,7 +30714,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
               vue.withKeys(reset, ["tab"])
             ]
           }, [
-            !computedDropDownOptions.value.hide ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$W), {
+            !computedDropDownOptions.value.hide ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$X), {
               key: 0,
               ref_key: "phoneDropdown",
               ref: phoneDropdown,
@@ -30815,7 +31181,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
         _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$9, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
         _ctx.required && !pathKeys.value.length ? (vue.openBlock(), vue.createElementBlock("input", _hoisted_3$7)) : vue.createCommentVNode("", true),
-        _ctx.theme === "basic" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$_), {
+        _ctx.theme === "basic" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$$), {
           key: 2,
           outline: "",
           class: "flex p-05 gap-1",
@@ -31111,7 +31477,7 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$_), { class: "hide m_grid gap-05 bgl_bottombar px-1 txt14 justify-content-start align-items-center overflow-x" }, {
+      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$$), { class: "hide m_grid gap-05 bgl_bottombar px-1 txt14 justify-content-start align-items-center overflow-x" }, {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "brand", {}, void 0, true),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.navLinks, (nav, i2) => {
@@ -31212,7 +31578,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
           icon: "keyboard_arrow_right",
           onClick: vue.unref(toggleMenu)
         }, null, 8, ["onClick"]),
-        vue.createVNode(vue.unref(_sfc_main$_), { class: "py-1 px-05 h-100 flex column gap-05 rounded relative bg-primary font-light overflow-y" }, {
+        vue.createVNode(vue.unref(_sfc_main$$), { class: "py-1 px-05 h-100 flex column gap-05 rounded relative bg-primary font-light overflow-y" }, {
           default: vue.withCtx(() => [
             !vue.unref(isOpen) || !vue.unref(slots)["brand-open"] ? vue.renderSlot(_ctx.$slots, "brand", { key: 0 }, void 0, true) : vue.createCommentVNode("", true),
             vue.unref(isOpen) ? vue.renderSlot(_ctx.$slots, "brand-open", { key: 1 }, void 0, true) : vue.createCommentVNode("", true),
@@ -31733,7 +32099,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
         onClick: _cache[1] || (_cache[1] = () => _ctx.dismissable ? closeModal() : ""),
         onKeydown: vue.withKeys(closeModal, ["esc"])
       }, [
-        vue.createVNode(vue.unref(_sfc_main$_), {
+        vue.createVNode(vue.unref(_sfc_main$$), {
           class: "modal",
           style: vue.normalizeStyle({ ...maxWidth.value }),
           onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
@@ -31910,7 +32276,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
         "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => emit2("update:visible", $event))
       }, vue.createSlots({
         default: vue.withCtx(() => [
-          _ctx.visible ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$R), {
+          _ctx.visible ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$S), {
             key: 0,
             ref_key: "form",
             ref: form,
@@ -33029,7 +33395,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
                         row,
                         field
                       }, void 0, true) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$1, [
-                        vue.createVNode(vue.unref(_sfc_main$10), {
+                        vue.createVNode(vue.unref(_sfc_main$11), {
                           id: field.id,
                           class: "embedded-field",
                           field,
@@ -35155,33 +35521,34 @@ function timeAgo(date2, lang = "en") {
   }
   return selectedLang.justNow;
 }
-exports.Accordion = _sfc_main$17;
+exports.Accordion = _sfc_main$18;
 exports.AccordionItem = AccordionItem;
-exports.AddressSearch = _sfc_main$15;
+exports.AddressSearch = _sfc_main$16;
 exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
-exports.BagelForm = _sfc_main$R;
+exports.BagelForm = _sfc_main$S;
 exports.BagelVue = BagelVue;
-exports.BglComponent = _sfc_main$10;
-exports.BglField = _sfc_main$S;
-exports.BglForm = _sfc_main$R;
-exports.BglMultiStepForm = _sfc_main$Q;
+exports.BglComponent = _sfc_main$11;
+exports.BglField = _sfc_main$T;
+exports.BglForm = _sfc_main$S;
+exports.BglMultiStepForm = _sfc_main$R;
 exports.BglVideo = BglVideo;
 exports.BottomMenu = BottomMenu;
 exports.Btn = Btn;
-exports.Card = _sfc_main$_;
+exports.Card = _sfc_main$$;
 exports.Carousel = Carousel;
 exports.CheckInput = CheckInput;
 exports.Checkbox = Checkbox;
 exports.CodeEditor = CodeEditor;
-exports.ColorPicker = _sfc_main$L;
+exports.ColorPicker = _sfc_main$M;
 exports.DataPreview = DataPreview;
-exports.DateInput = _sfc_main$K;
+exports.DateInput = _sfc_main$L;
+exports.DatePick = DatePick;
 exports.DatePicker = _sfc_main$J;
-exports.Dropdown = _sfc_main$W;
+exports.Dropdown = _sfc_main$X;
 exports.FORM_STATE_KEY = FORM_STATE_KEY;
-exports.FieldArray = _sfc_main$P;
+exports.FieldArray = _sfc_main$Q;
 exports.FieldSetVue = FieldSetVue;
 exports.FileUpload = FileUpload;
 exports.Flag = Flag;
@@ -35192,7 +35559,7 @@ exports.IframeVue = _sfc_main$p;
 exports.Image = Image$1;
 exports.JSONInput = JSONInput;
 exports.Layout = Layout;
-exports.Lineart = _sfc_main$Y;
+exports.Lineart = _sfc_main$Z;
 exports.ListItem = _sfc_main$h;
 exports.ListView = ListView;
 exports.Loading = Loading;