@stlhorizon/vue-ui 3.6.0 → 3.7.0

package/dist/index.esm.js

@@ -13231,28 +13231,28 @@ const Dd = {
       _: 1
     }, 8, ["modelValue", "size", "class", "resizable"]));
   }
-}, Xv = { class: "w-full" }, Qv = {
+}, Xv = {
   key: 0,
   class: "mb-6"
-}, Jv = { class: "text-xl font-semibold text-gray-900" }, Zv = ["onUpdate:modelValue"], e0 = {
+}, Qv = { class: "text-xl font-semibold text-gray-900" }, Jv = ["onUpdate:modelValue"], Zv = {
   key: 4,
   class: "flex items-center"
-}, t0 = {
+}, e0 = {
   key: 5,
   class: "flex items-center"
-}, a0 = ["id", "aria-checked", "disabled", "onClick"], n0 = {
+}, t0 = ["id", "aria-checked", "disabled", "onClick"], a0 = {
   key: 6,
   class: "space-y-2"
-}, r0 = {
+}, n0 = {
   key: 7,
   class: "space-y-2"
-}, s0 = {
+}, r0 = {
   key: 0,
   class: "text-xs text-gray-500"
-}, l0 = {
+}, s0 = {
   key: 9,
   class: "space-y-2"
-}, o0 = { class: "flex items-center gap-4" }, i0 = { class: "text-sm font-medium text-gray-700 min-w-[3rem] text-right" }, u0 = { class: "flex justify-end gap-3 pt-6" }, d0 = {
+}, l0 = { class: "flex items-center gap-4" }, o0 = { class: "text-sm font-medium text-gray-700 min-w-[3rem] text-right" }, i0 = { class: "flex justify-end gap-3 pt-6" }, u0 = {
   __name: "ReusableForm",
   props: {
     title: {
@@ -13263,6 +13263,15 @@ const Dd = {
       type: String,
       default: "Item"
     },
+    formSize: {
+      type: String,
+      default: "4xl",
+      validator: (e) => ["sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl", "full"].includes(e)
+    },
+    formHeight: {
+      type: String,
+      default: "auto"
+    },
     fields: {
       type: Array,
       required: !0,
@@ -13407,12 +13416,14 @@ const Dd = {
     }, C = () => {
       l.value = g(), o.value = {}, m.value = !1, n("reset");
     };
-    return (v, f) => (s(), c("div", Xv, [
-      e.title ? (s(), c("div", Qv, [
-        d("h2", Jv, x(e.title), 1)
+    return (v, f) => (s(), c("div", {
+      class: b(e.formHeight === "auto" ? "" : e.formHeight)
+    }, [
+      e.title ? (s(), c("div", Xv, [
+        d("h2", Qv, x(e.title), 1)
       ])) : p("", !0),
       d("form", {
-        class: "space-y-6",
+        class: "space-y-6 overflow-y-auto",
         onSubmit: Ce(S, ["prevent"])
       }, [
         (s(!0), c(G, null, X(e.fields, (i) => (s(), c("div", {
@@ -13422,7 +13433,7 @@ const Dd = {
             key: 0,
             "onUpdate:modelValue": (u) => l.value[i.name] = u,
             type: "hidden"
-          }, null, 8, Zv)), [
+          }, null, 8, Jv)), [
             [We, l.value[i.name]]
           ]) : (s(), L(Ba, {
             key: 1,
@@ -13477,7 +13488,7 @@ const Dd = {
                 "has-error": w,
                 "aria-describedby": V,
                 "onUpdate:modelValue": (z) => l.value[i.name] = z
-              }, null, 8, ["id", "model-value", "options", "disabled", "placeholder", "has-error", "aria-describedby", "onUpdate:modelValue"])) : i.type === "checkbox" ? (s(), c("div", e0, [
+              }, null, 8, ["id", "model-value", "options", "disabled", "placeholder", "has-error", "aria-describedby", "onUpdate:modelValue"])) : i.type === "checkbox" ? (s(), c("div", Zv, [
                 P(ge, {
                   id: u,
                   modelValue: l.value[i.name],
@@ -13496,7 +13507,7 @@ const Dd = {
                   ]),
                   _: 2
                 }, 1032, ["for"])
-              ])) : i.type === "switch" ? (s(), c("div", t0, [
+              ])) : i.type === "switch" ? (s(), c("div", e0, [
                 d("button", {
                   id: u,
                   type: "button",
@@ -13516,7 +13527,7 @@ const Dd = {
                       l.value[i.name] ? "translate-x-6" : "translate-x-1"
                     ])
                   }, null, 2)
-                ], 10, a0),
+                ], 10, t0),
                 P(De, {
                   for: u,
                   class: "ml-3 text-sm text-gray-700"
@@ -13526,7 +13537,7 @@ const Dd = {
                   ]),
                   _: 2
                 }, 1032, ["for"])
-              ])) : i.type === "radio" ? (s(), c("div", n0, [
+              ])) : i.type === "radio" ? (s(), c("div", a0, [
                 (s(!0), c(G, null, X(i.options, (z) => (s(), c("div", {
                   key: z.value,
                   class: "flex items-center"
@@ -13551,7 +13562,7 @@ const Dd = {
                     _: 2
                   }, 1032, ["for"])
                 ]))), 128))
-              ])) : i.type === "file" ? (s(), c("div", r0, [
+              ])) : i.type === "file" ? (s(), c("div", n0, [
                 P(ge, {
                   id: u,
                   type: "file",
@@ -13564,7 +13575,7 @@ const Dd = {
                   "aria-describedby": V,
                   onChange: (z) => I(i, z)
                 }, null, 8, ["id", "accept", "disabled", "class", "aria-describedby", "onChange"]),
-                i.helpText ? (s(), c("p", s0, x(i.helpText), 1)) : p("", !0)
+                i.helpText ? (s(), c("p", r0, x(i.helpText), 1)) : p("", !0)
               ])) : i.type === "slider" ? (s(), L(Pa, {
                 key: 8,
                 "model-value": l.value[i.name],
@@ -13573,8 +13584,8 @@ const Dd = {
                 step: i.step,
                 disabled: r.value || i.disabled,
                 "onUpdate:modelValue": (z) => $(i, z)
-              }, null, 8, ["model-value", "min", "max", "step", "disabled", "onUpdate:modelValue"])) : i.type === "range" ? (s(), c("div", l0, [
-                d("div", o0, [
+              }, null, 8, ["model-value", "min", "max", "step", "disabled", "onUpdate:modelValue"])) : i.type === "range" ? (s(), c("div", s0, [
+                d("div", l0, [
                   P(ge, {
                     id: u,
                     modelValue: l.value[i.name],
@@ -13587,7 +13598,7 @@ const Dd = {
                     class: "flex-1",
                     "aria-describedby": V
                   }, null, 8, ["id", "modelValue", "onUpdate:modelValue", "min", "max", "step", "disabled", "aria-describedby"]),
-                  d("span", i0, x(l.value[i.name]), 1)
+                  d("span", o0, x(l.value[i.name]), 1)
                 ])
               ])) : i.type === "date" ? (s(), L(Ot, {
                 key: 10,
@@ -13645,7 +13656,7 @@ const Dd = {
             _: 2
           }, 1032, ["id", "label", "required", "error", "error-message"]))
         ]))), 128)),
-        d("div", u0, [
+        d("div", i0, [
           P(ye, {
             type: "button",
             variant: "outline",
@@ -13670,39 +13681,39 @@ const Dd = {
           }, 8, ["disabled", "loading"])
         ])
       ], 32)
-    ]));
+    ], 2));
   }
-}, c0 = {
+}, d0 = {
   key: 0,
   class: "flex items-center justify-between p-4 border-b border-gray-200 flex-shrink-0 lg:hidden"
-}, f0 = { class: "text-lg font-bold text-gray-900" }, m0 = { class: "flex-1 overflow-y-auto overflow-x-hidden p-4" }, g0 = { class: "space-y-2" }, v0 = { key: 0 }, b0 = {
+}, c0 = { class: "text-lg font-bold text-gray-900" }, f0 = { class: "flex-1 overflow-y-auto overflow-x-hidden p-4" }, m0 = { class: "space-y-2" }, g0 = { key: 0 }, v0 = {
   key: 0,
   class: "absolute top-2 right-2 inline-flex items-center justify-center w-5 h-5 text-xs font-bold rounded-full bg-red-500 text-white"
-}, h0 = ["onClick"], p0 = {
+}, b0 = ["onClick"], h0 = {
   key: 0,
   class: "absolute top-2 right-2 inline-flex items-center justify-center w-5 h-5 text-xs font-bold rounded-full bg-red-500 text-white"
-}, y0 = {
+}, p0 = {
   key: 1,
   class: "absolute top-1.5 right-1.5 w-2 h-2 bg-blue-500 rounded-full"
-}, x0 = {
+}, y0 = {
   key: 1,
   class: "border-t border-gray-200 p-4 flex-shrink-0"
-}, w0 = {
+}, x0 = {
   key: 0,
   class: "absolute top-1.5 right-1.5 w-2 h-2 bg-blue-500 rounded-full"
-}, k0 = { class: "sticky top-0 bg-white border-b border-gray-200 z-10" }, $0 = { class: "flex items-center justify-between p-4" }, S0 = { class: "flex-1 text-sm font-bold text-gray-900 ml-2" }, C0 = { class: "p-3" }, z0 = { class: "space-y-1" }, A0 = {
+}, w0 = { class: "sticky top-0 bg-white border-b border-gray-200 z-10" }, k0 = { class: "flex items-center justify-between p-4" }, $0 = { class: "flex-1 text-sm font-bold text-gray-900 ml-2" }, S0 = { class: "p-3" }, C0 = { class: "space-y-1" }, z0 = {
   key: 0,
   class: "absolute left-0 top-1/2 transform -translate-y-1/2 w-1 h-8 bg-gradient-to-b from-blue-500 to-blue-600 rounded-r-full"
-}, V0 = {
+}, A0 = {
   key: 1,
   class: "ml-2 inline-flex items-center justify-center px-2 py-0.5 text-xs font-bold rounded-full bg-red-500 text-white"
-}, B0 = { class: "p-3" }, P0 = { class: "space-y-1" }, T0 = {
+}, V0 = { class: "p-3" }, B0 = { class: "space-y-1" }, P0 = {
   key: 0,
   class: "px-3 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider"
-}, j0 = {
+}, T0 = {
   key: 0,
   class: "absolute left-0 top-1/2 transform -translate-y-1/2 w-1 h-8 bg-gradient-to-b from-blue-500 to-blue-600 rounded-r-full"
-}, I0 = {
+}, j0 = {
   __name: "Sidebar",
   props: {
     sidebarWidth: {
@@ -13825,8 +13836,8 @@ const Dd = {
           )),
           style: fe({ width: e.sidebarWidth + "px", top: l.value ? "0px" : "4rem" })
         }, [
-          l.value ? (s(), c("div", c0, [
-            d("h2", f0, x(e.header?.title), 1),
+          l.value ? (s(), c("div", d0, [
+            d("h2", c0, x(e.header?.title), 1),
             d("button", {
               class: "p-2 rounded-lg text-gray-500 hover:text-gray-900 hover:bg-gray-100 transition-colors",
               "aria-label": "Close sidebar",
@@ -13847,12 +13858,12 @@ const Dd = {
               ], -1)
             ])])
           ])) : p("", !0),
-          d("nav", m0, [
-            d("div", g0, [
+          d("nav", f0, [
+            d("div", m0, [
               (s(!0), c(G, null, X(e.navigationItems, (B) => (s(), c(G, {
                 key: B.name || B.label
               }, [
-                B.type === "link" ? (s(), c("div", v0, [
+                B.type === "link" ? (s(), c("div", g0, [
                   v(B) ? (s(), c("div", {
                     key: 1,
                     class: b(_(A)(
@@ -13879,9 +13890,9 @@ const Dd = {
                         K(B) ? "text-blue-700 font-semibold" : "text-gray-500 group-hover:text-gray-900"
                       ))
                     }, x(B.label), 3),
-                    B.badge ? (s(), c("span", p0, x(B.badge), 1)) : p("", !0),
-                    K(B) && v(B) ? (s(), c("div", y0)) : p("", !0)
-                  ], 10, h0)) : (s(), L(J, {
+                    B.badge ? (s(), c("span", h0, x(B.badge), 1)) : p("", !0),
+                    K(B) && v(B) ? (s(), c("div", p0)) : p("", !0)
+                  ], 10, b0)) : (s(), L(J, {
                     key: 0,
                     to: B.route,
                     class: b(_(A)(
@@ -13909,7 +13920,7 @@ const Dd = {
                           K(B) ? "text-blue-700 font-semibold" : "text-gray-500 group-hover:text-gray-900"
                         ))
                       }, x(B.label), 3),
-                      B.badge ? (s(), c("span", b0, x(B.badge), 1)) : p("", !0)
+                      B.badge ? (s(), c("span", v0, x(B.badge), 1)) : p("", !0)
                     ]),
                     _: 2
                   }, 1032, ["to", "class", "onClick"]))
@@ -13917,7 +13928,7 @@ const Dd = {
               ], 64))), 128))
             ])
           ]),
-          e.showManagementSettings ? (s(), c("div", x0, [
+          e.showManagementSettings ? (s(), c("div", y0, [
             d("div", {
               class: b(_(A)(
                 "flex flex-col items-center justify-center rounded-xl transition-all duration-200 cursor-pointer group relative py-4 px-3",
@@ -13943,7 +13954,7 @@ const Dd = {
                   e.isManagementSettingsActive ? "text-blue-700 font-semibold" : "text-gray-500 group-hover:text-gray-900"
                 ))
               }, " Settings ", 2),
-              e.isManagementSettingsActive ? (s(), c("div", w0)) : p("", !0)
+              e.isManagementSettingsActive ? (s(), c("div", x0)) : p("", !0)
             ], 2)
           ])) : p("", !0)
         ], 6),
@@ -13966,8 +13977,8 @@ const Dd = {
               ),
               style: fe(k.value)
             }, [
-              d("div", k0, [
-                d("div", $0, [
+              d("div", w0, [
+                d("div", k0, [
                   d("button", {
                     class: "p-2 -ml-2 rounded-lg text-gray-500 hover:text-gray-700 hover:bg-gray-100 transition-colors",
                     "aria-label": "Close submenu",
@@ -13987,11 +13998,11 @@ const Dd = {
                       })
                     ], -1)
                   ])]),
-                  d("h3", S0, x(m.value?.label), 1)
+                  d("h3", $0, x(m.value?.label), 1)
                 ])
               ]),
-              d("nav", C0, [
-                d("div", z0, [
+              d("nav", S0, [
+                d("div", C0, [
                   (s(!0), c(G, null, X(m.value?.subItems, (B) => (s(), L(J, {
                     key: B.name,
                     to: B.route,
@@ -14004,7 +14015,7 @@ const Dd = {
                     onClick: (F) => z(B)
                   }, {
                     default: E(() => [
-                      K(B) ? (s(), c("div", A0)) : p("", !0),
+                      K(B) ? (s(), c("div", z0)) : p("", !0),
                       d("div", {
                         class: b(
                           _(A)(
@@ -14025,7 +14036,7 @@ const Dd = {
                           K(B) ? "text-blue-700" : "text-gray-700"
                         ))
                       }, x(B.label), 3),
-                      B.badge ? (s(), c("span", V0, x(B.badge), 1)) : p("", !0)
+                      B.badge ? (s(), c("span", A0, x(B.badge), 1)) : p("", !0)
                     ]),
                     _: 2
                   }, 1032, ["to", "class", "onClick"]))), 128))
@@ -14078,12 +14089,12 @@ const Dd = {
                   ee[3] || (ee[3] = d("h3", { class: "flex-1 text-sm font-bold text-gray-900 ml-2" }, " Management Settings ", -1))
                 ])
               ]),
-              d("nav", B0, [
-                d("div", P0, [
+              d("nav", V0, [
+                d("div", B0, [
                   (s(!0), c(G, null, X(e.managementSettings, (B) => (s(), c(G, {
                     key: B.name
                   }, [
-                    B.type === "section" ? (s(), c("div", T0, x(B.label), 1)) : B.route ? (s(), L(J, {
+                    B.type === "section" ? (s(), c("div", P0, x(B.label), 1)) : B.route ? (s(), L(J, {
                       key: 1,
                       to: B.route,
                       class: b(
@@ -14095,7 +14106,7 @@ const Dd = {
                       onClick: (F) => W(B)
                     }, {
                       default: E(() => [
-                        K(B) ? (s(), c("div", j0)) : p("", !0),
+                        K(B) ? (s(), c("div", T0)) : p("", !0),
                         d("div", {
                           class: b(
                             _(A)(
@@ -14146,7 +14157,7 @@ const Dd = {
       ]);
     };
   }
-}, O0 = {
+}, I0 = {
   __name: "Timeline",
   props: {
     orientation: {
@@ -14165,13 +14176,13 @@ const Dd = {
       M(a.$slots, "default")
     ], 2));
   }
-}, M0 = {
+}, O0 = {
   key: 0,
   class: "absolute left-3 top-0 w-0.5 h-full bg-slate-200"
-}, F0 = { class: "z-10 flex items-center justify-center w-6 h-6 rounded-full border-2 border-blue-500 bg-white text-blue-500" }, L0 = { class: "text-slate-900 font-medium" }, E0 = {
+}, M0 = { class: "z-10 flex items-center justify-center w-6 h-6 rounded-full border-2 border-blue-500 bg-white text-blue-500" }, F0 = { class: "text-slate-900 font-medium" }, L0 = {
   key: 0,
   class: "text-slate-500 text-sm"
-}, N0 = { class: "mt-2 text-slate-600 text-sm" }, D0 = {
+}, E0 = { class: "mt-2 text-slate-600 text-sm" }, N0 = {
   __name: "TimelineItem",
   props: {
     title: {
@@ -14195,8 +14206,8 @@ const Dd = {
         e.orientation === "vertical" ? "items-start mb-8 last:mb-0" : "flex-col items-center mx-8 last:mx-0"
       ])
     }, [
-      e.orientation === "vertical" ? (s(), c("div", M0)) : p("", !0),
-      d("div", F0, [
+      e.orientation === "vertical" ? (s(), c("div", O0)) : p("", !0),
+      d("div", M0, [
         M(a.$slots, "icon", {}, () => [
           t[0] || (t[0] = d("div", { class: "w-2 h-2 rounded-full bg-blue-500" }, null, -1))
         ])
@@ -14207,23 +14218,23 @@ const Dd = {
           e.orientation === "horizontal" ? "mt-2 text-center" : ""
         ])
       }, [
-        d("h3", L0, [
+        d("h3", F0, [
           M(a.$slots, "title", {}, () => [
             Q(x(e.title), 1)
           ])
         ]),
-        e.subtitle ? (s(), c("p", E0, [
+        e.subtitle ? (s(), c("p", L0, [
           M(a.$slots, "subtitle", {}, () => [
             Q(x(e.subtitle), 1)
           ])
         ])) : p("", !0),
-        d("div", N0, [
+        d("div", E0, [
           M(a.$slots, "default")
         ])
       ], 2)
     ], 2));
   }
-}, R0 = {
+}, D0 = {
   name: "AuthLayout",
   props: {
     title: {
@@ -14312,20 +14323,20 @@ const Dd = {
       currentYear: h(() => (/* @__PURE__ */ new Date()).getFullYear())
     };
   }
-}, _0 = { class: "container mx-auto px-4 relative z-10" }, U0 = { class: "grid lg:grid-cols-10 gap-8 items-center min-h-screen" }, q0 = { class: "lg:col-span-6 text-white text-center lg:text-left space-y-6" }, H0 = { class: "mb-6" }, W0 = { class: "text-4xl lg:text-6xl font-bold mb-2" }, Y0 = { class: "text-white" }, G0 = { class: "flex items-center justify-center lg:justify-start mb-6" }, K0 = { class: "text-3xl lg:text-4xl font-bold text-white" }, X0 = { class: "lg:col-span-4" }, Q0 = { class: "bg-white rounded-lg shadow-xl p-6 lg:p-8 max-w-md mx-auto" }, J0 = {
+}, R0 = { class: "container mx-auto px-4 relative z-10" }, _0 = { class: "grid lg:grid-cols-10 gap-8 items-center min-h-screen" }, U0 = { class: "lg:col-span-6 text-white text-center lg:text-left space-y-6" }, q0 = { class: "mb-6" }, H0 = { class: "text-4xl lg:text-6xl font-bold mb-2" }, W0 = { class: "text-white" }, Y0 = { class: "flex items-center justify-center lg:justify-start mb-6" }, G0 = { class: "text-3xl lg:text-4xl font-bold text-white" }, K0 = { class: "lg:col-span-4" }, X0 = { class: "bg-white rounded-lg shadow-xl p-6 lg:p-8 max-w-md mx-auto" }, Q0 = {
   key: 0,
   class: "mb-6"
-}, Z0 = { class: "text-center" }, eb = { class: "text-2xl font-bold text-gray-900" }, tb = {
+}, J0 = { class: "text-center" }, Z0 = { class: "text-2xl font-bold text-gray-900" }, eb = {
   key: 0,
   class: "text-gray-600 mt-2"
-}, ab = { class: "space-y-6" }, nb = {
+}, tb = { class: "space-y-6" }, ab = {
   key: 1,
   class: "mt-6"
-}, rb = {
+}, nb = {
   key: 0,
   class: "mt-6 text-center"
-}, sb = { class: "absolute bottom-4 right-4 text-right" }, lb = { class: "flex items-end justify-end mb-2" }, ob = { class: "text-right mr-3" }, ib = { class: "text-red-500 font-bold text-xs" }, ub = { class: "text-white text-xs" }, db = { class: "text-white/70 text-xs" }, cb = { class: "w-8 h-8 bg-red-500 rounded flex items-center justify-center text-white font-bold text-xs" }, fb = { class: "text-white/70 text-xs" }, mb = { class: "absolute bottom-4 left-4 flex gap-2" }, gb = ["href"];
-function vb(e, a, t, n, r, l) {
+}, rb = { class: "absolute bottom-4 right-4 text-right" }, sb = { class: "flex items-end justify-end mb-2" }, lb = { class: "text-right mr-3" }, ob = { class: "text-red-500 font-bold text-xs" }, ib = { class: "text-white text-xs" }, ub = { class: "text-white/70 text-xs" }, db = { class: "w-8 h-8 bg-red-500 rounded flex items-center justify-center text-white font-bold text-xs" }, cb = { class: "text-white/70 text-xs" }, fb = { class: "absolute bottom-4 left-4 flex gap-2" }, mb = ["href"];
+function gb(e, a, t, n, r, l) {
   const o = ve("router-view"), m = ve("font-awesome-icon");
   return s(), c("div", {
     class: "min-h-screen relative flex items-center justify-center",
@@ -14338,70 +14349,70 @@ function vb(e, a, t, n, r, l) {
         opacity: t.backgroundOpacity
       })
     }, null, 4),
-    d("div", _0, [
-      d("div", U0, [
-        d("div", q0, [
-          d("div", H0, [
-            d("div", W0, [
+    d("div", R0, [
+      d("div", _0, [
+        d("div", U0, [
+          d("div", q0, [
+            d("div", H0, [
               d("span", {
                 style: fe({ color: t.primaryColor })
               }, x(t.primaryLogoPrefix), 5),
-              d("span", Y0, x(t.primaryLogoText), 1)
+              d("span", W0, x(t.primaryLogoText), 1)
             ]),
             d("div", {
               class: "h-0.5 w-30 mx-auto lg:mx-0",
               style: fe({ backgroundColor: t.primaryColor })
             }, null, 4)
           ]),
-          d("div", G0, [
+          d("div", Y0, [
             d("div", {
               class: "flex items-center justify-center w-15 h-15 rounded-lg mr-4 text-white font-bold text-xl",
               style: fe({ backgroundColor: t.primaryColor })
             }, x(t.secondaryLogoPrefix), 5),
-            d("span", K0, x(t.secondaryLogoText), 1)
+            d("span", G0, x(t.secondaryLogoText), 1)
           ]),
           a[0] || (a[0] = d("div", { class: "max-w-md mx-auto lg:mx-0" }, [
             d("p", { class: "text-sm lg:text-base font-light text-white/70 italic leading-relaxed" })
           ], -1))
         ]),
-        d("div", X0, [
-          d("div", Q0, [
-            e.$slots["card-header"] || t.title ? (s(), c("div", J0, [
+        d("div", K0, [
+          d("div", X0, [
+            e.$slots["card-header"] || t.title ? (s(), c("div", Q0, [
               M(e.$slots, "card-header", {}, () => [
-                d("div", Z0, [
-                  d("h1", eb, x(t.title), 1),
-                  t.subtitle ? (s(), c("p", tb, x(t.subtitle), 1)) : p("", !0)
+                d("div", J0, [
+                  d("h1", Z0, x(t.title), 1),
+                  t.subtitle ? (s(), c("p", eb, x(t.subtitle), 1)) : p("", !0)
                 ])
               ])
             ])) : p("", !0),
-            d("div", ab, [
+            d("div", tb, [
               P(o)
             ]),
-            e.$slots["card-footer"] ? (s(), c("div", nb, [
+            e.$slots["card-footer"] ? (s(), c("div", ab, [
               M(e.$slots, "card-footer")
             ])) : p("", !0)
           ]),
-          e.$slots.links ? (s(), c("div", rb, [
+          e.$slots.links ? (s(), c("div", nb, [
             M(e.$slots, "links")
           ])) : p("", !0)
         ])
       ])
     ]),
-    d("div", sb, [
-      d("div", lb, [
-        d("div", ob, [
-          d("div", ib, x(t.companyName), 1),
-          d("div", ub, x(t.companyType), 1),
-          d("div", db, x(t.companyTagline), 1)
+    d("div", rb, [
+      d("div", sb, [
+        d("div", lb, [
+          d("div", ob, x(t.companyName), 1),
+          d("div", ib, x(t.companyType), 1),
+          d("div", ub, x(t.companyTagline), 1)
         ]),
-        d("div", cb, x(t.companyInitials), 1)
+        d("div", db, x(t.companyInitials), 1)
       ]),
-      d("div", fb, [
+      d("div", cb, [
         d("div", null, x(t.appName) + " (" + x(t.appVersion) + ")", 1),
         d("div", null, x(t.copyright), 1)
       ])
     ]),
-    d("div", mb, [
+    d("div", fb, [
       (s(!0), c(G, null, X(t.socialLinks, (g) => (s(), c("a", {
         key: g.name,
         href: g.url,
@@ -14413,14 +14424,14 @@ function vb(e, a, t, n, r, l) {
         P(m, {
           icon: ["fab", g.icon]
         }, null, 8, ["icon"])
-      ], 10, gb))), 128))
+      ], 10, mb))), 128))
     ])
   ], 4);
 }
-const bb = /* @__PURE__ */ Mt(R0, [["render", vb]]), hb = { class: "min-h-screen bg-gray-50" }, pb = { class: "flex-1" }, yb = {
+const vb = /* @__PURE__ */ Mt(D0, [["render", gb]]), bb = { class: "min-h-screen bg-gray-50" }, hb = { class: "flex-1" }, pb = {
   key: 0,
   class: "bg-white border-b border-gray-200"
-}, xb = { class: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4" }, wb = { class: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8" }, kb = {
+}, yb = { class: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4" }, xb = { class: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8" }, wb = {
   __name: "DefaultLayout",
   props: {
     navigationItems: {
@@ -14444,7 +14455,7 @@ const bb = /* @__PURE__ */ Mt(R0, [["render", vb]]), hb = { class: "min-h-screen
   setup(e) {
     return (a, t) => {
       const n = ve("Logo"), r = ve("MainNavigation"), l = ve("Button"), o = ve("Header"), m = ve("Breadcrumb"), g = ve("Text"), y = ve("Footer");
-      return s(), c("div", hb, [
+      return s(), c("div", bb, [
         P(o, null, {
           logo: E(() => [
             M(a.$slots, "logo", {}, () => [
@@ -14477,15 +14488,15 @@ const bb = /* @__PURE__ */ Mt(R0, [["render", vb]]), hb = { class: "min-h-screen
           ]),
           _: 3
         }),
-        d("main", pb, [
-          e.showBreadcrumb ? (s(), c("div", yb, [
-            d("div", xb, [
+        d("main", hb, [
+          e.showBreadcrumb ? (s(), c("div", pb, [
+            d("div", yb, [
               M(a.$slots, "breadcrumb", {}, () => [
                 P(m, { items: e.breadcrumbItems }, null, 8, ["items"])
               ])
             ])
           ])) : p("", !0),
-          d("div", wb, [
+          d("div", xb, [
             M(a.$slots, "default")
           ])
         ]),
@@ -14506,7 +14517,7 @@ const bb = /* @__PURE__ */ Mt(R0, [["render", vb]]), hb = { class: "min-h-screen
       ]);
     };
   }
-}, $b = {
+}, kb = {
   name: "ErrorLayout",
   props: {
     errorType: {
@@ -14772,20 +14783,20 @@ const bb = /* @__PURE__ */ Mt(R0, [["render", vb]]), hb = { class: "min-h-screen
       helpClasses: oe
     };
   }
-}, Sb = { class: "flex justify-center" }, Cb = { class: "flex items-center gap-3" }, zb = { class: "text-2xl font-bold text-slate-900" }, Ab = {
+}, $b = { class: "flex justify-center" }, Sb = { class: "flex items-center gap-3" }, Cb = { class: "text-2xl font-bold text-slate-900" }, zb = {
   key: 1,
   class: "bg-red-100 border border-red-200 rounded-lg p-4 mx-auto max-w-md mb-6"
-}, Vb = { class: "flex flex-col sm:flex-row gap-4 justify-center" }, Bb = ["disabled"], Pb = {
+}, Ab = { class: "flex flex-col sm:flex-row gap-4 justify-center" }, Vb = ["disabled"], Bb = {
   key: 0,
   class: "animate-spin"
-}, Tb = { key: 1 }, jb = ["disabled"], Ib = { key: 0 }, Ob = { key: 1 }, Mb = {
+}, Pb = { key: 1 }, Tb = ["disabled"], jb = { key: 0 }, Ib = { key: 1 }, Ob = {
   key: 0,
   class: "mt-8 max-w-md mx-auto"
-}, Fb = { class: "bg-white rounded-lg border border-slate-200 shadow-sm p-6" }, Lb = { class: "text-lg font-semibold text-slate-900 mb-4" }, Eb = { class: "space-y-3" }, Nb = { class: "text-sm text-slate-600" }, Db = ["href"], Rb = {
+}, Mb = { class: "bg-white rounded-lg border border-slate-200 shadow-sm p-6" }, Fb = { class: "text-lg font-semibold text-slate-900 mb-4" }, Lb = { class: "space-y-3" }, Eb = { class: "text-sm text-slate-600" }, Nb = ["href"], Db = {
   key: 5,
   class: "text-xs text-slate-400 font-mono mt-4"
 };
-function _b(e, a, t, n, r, l) {
+function Rb(e, a, t, n, r, l) {
   return s(), c("div", {
     class: b(n.layoutClasses)
   }, [
@@ -14805,13 +14816,13 @@ function _b(e, a, t, n, r, l) {
         class: b(n.headerClasses)
       }, [
         M(e.$slots, "header", {}, () => [
-          d("div", Sb, [
+          d("div", $b, [
             M(e.$slots, "logo", {}, () => [
-              d("div", Cb, [
+              d("div", Sb, [
                 a[5] || (a[5] = d("div", { class: "w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center" }, [
                   d("span", { class: "text-white font-bold text-lg" }, "STL")
                 ], -1)),
-                d("span", zb, x(t.brandName), 1)
+                d("span", Cb, x(t.brandName), 1)
               ])
             ])
           ])
@@ -14857,7 +14868,7 @@ function _b(e, a, t, n, r, l) {
             ])
           ], 2)
         ], 2),
-        n.isOnline ? p("", !0) : (s(), c("div", Ab, [...a[6] || (a[6] = [
+        n.isOnline ? p("", !0) : (s(), c("div", zb, [...a[6] || (a[6] = [
           d("div", { class: "flex items-center justify-center gap-2 text-red-700" }, [
             d("span", { class: "w-3 h-3 bg-red-500 rounded-full animate-pulse" }),
             d("span", { class: "font-medium" }, "No Internet Connection")
@@ -14868,7 +14879,7 @@ function _b(e, a, t, n, r, l) {
           class: b(n.actionsClasses)
         }, [
           M(e.$slots, "actions", {}, () => [
-            d("div", Vb, [
+            d("div", Ab, [
               t.showHomeButton ? (s(), c("button", {
                 key: 0,
                 class: "bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors flex items-center justify-center gap-2",
@@ -14891,18 +14902,18 @@ function _b(e, a, t, n, r, l) {
                 class: "border border-slate-300 text-slate-700 px-6 py-3 rounded-lg font-medium hover:bg-slate-50 transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
                 onClick: a[2] || (a[2] = (...o) => n.retry && n.retry(...o))
               }, [
-                n.isRetrying ? (s(), c("span", Pb, "↻")) : (s(), c("span", Tb, "🔄")),
+                n.isRetrying ? (s(), c("span", Bb, "↻")) : (s(), c("span", Pb, "🔄")),
                 Q(" " + x(n.isRetrying ? "Retrying..." : t.retryButtonText), 1)
-              ], 8, Bb)) : p("", !0),
+              ], 8, Vb)) : p("", !0),
               t.showSupportButton ? (s(), c("button", {
                 key: 3,
                 disabled: n.reportSent,
                 class: "bg-slate-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-slate-700 transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
                 onClick: a[3] || (a[3] = (o) => e.$emit("contact-support"))
               }, [
-                n.reportSent ? (s(), c("span", Ib, "✓")) : (s(), c("span", Ob, "📝")),
+                n.reportSent ? (s(), c("span", jb, "✓")) : (s(), c("span", Ib, "📝")),
                 Q(" " + x(n.reportSent ? "Report Sent" : "Contact Support"), 1)
-              ], 8, jb)) : p("", !0)
+              ], 8, Tb)) : p("", !0)
             ])
           ])
         ], 2)) : p("", !0),
@@ -14911,10 +14922,10 @@ function _b(e, a, t, n, r, l) {
           class: b(n.additionalInfoClasses)
         }, [
           M(e.$slots, "additional-info", {}, () => [
-            n.additionalInfoConfig ? (s(), c("div", Mb, [
-              d("div", Fb, [
-                d("h3", Lb, x(n.additionalInfoConfig.title), 1),
-                d("ul", Eb, [
+            n.additionalInfoConfig ? (s(), c("div", Ob, [
+              d("div", Mb, [
+                d("h3", Fb, x(n.additionalInfoConfig.title), 1),
+                d("ul", Lb, [
                   (s(!0), c(G, null, X(n.additionalInfoConfig.items, (o, m) => (s(), c("li", {
                     key: m,
                     class: "flex items-start gap-3 text-sm text-slate-600"
@@ -14934,7 +14945,7 @@ function _b(e, a, t, n, r, l) {
           class: b(n.helpClasses)
         }, [
           M(e.$slots, "help", {}, () => [
-            d("p", Nb, [
+            d("p", Eb, [
               Q(x(t.helpText) + " ", 1),
               t.supportUrl ? (s(), c("a", {
                 key: 0,
@@ -14943,16 +14954,16 @@ function _b(e, a, t, n, r, l) {
               }, [...a[8] || (a[8] = [
                 d("span", { class: "inline-block w-4 h-4 mr-1" }, "❓", -1),
                 Q(" Get Help ", -1)
-              ])], 8, Db)) : p("", !0)
+              ])], 8, Nb)) : p("", !0)
             ])
           ])
         ], 2)) : p("", !0),
-        n.isDev ? (s(), c("div", Rb, " Error ID: " + x(n.errorId), 1)) : p("", !0)
+        n.isDev ? (s(), c("div", Db, " Error ID: " + x(n.errorId), 1)) : p("", !0)
       ], 2)
     ], 2)
   ], 2);
 }
-const Ub = /* @__PURE__ */ Mt($b, [["render", _b]]), fn = {
+const _b = /* @__PURE__ */ Mt(kb, [["render", Rb]]), fn = {
   mounted(e, a) {
     if (!a.value) return;
     const t = Object.keys(a.modifiers)[0] || "top", n = document.createElement("div");
@@ -15134,14 +15145,14 @@ const Ub = /* @__PURE__ */ Mt($b, [["render", _b]]), fn = {
   Footer: Hg,
   Header: Sv,
   ReusableFormModal: Kv,
-  ReusableForm: d0,
-  Sidebar: I0,
-  Timeline: O0,
-  TimelineItem: D0,
-  AuthLayout: bb,
-  DefaultLayout: kb,
-  ErrorLayout: Ub
-}, Yb = {
+  ReusableForm: u0,
+  Sidebar: j0,
+  Timeline: I0,
+  TimelineItem: N0,
+  AuthLayout: vb,
+  DefaultLayout: wb,
+  ErrorLayout: _b
+}, Wb = {
   install(e, a = {}) {
     const { prefix: t = "" } = a;
     Object.keys(mn).forEach((n) => {
@@ -15154,7 +15165,7 @@ export {
   Mc as Accordion,
   Fc as AccordionItem,
   mu as Alert,
-  bb as AuthLayout,
+  vb as AuthLayout,
   oi as Avatar,
   xr as Badge,
   ff as BarChart,
@@ -15178,11 +15189,11 @@ export {
   zr as DataTableRow,
   Lg as DataTableToolBar,
   Ot as DatePicker,
-  kb as DefaultLayout,
+  wb as DefaultLayout,
   pi as Divider,
   Ku as Dropdown,
   Qu as DropdownItem,
-  Ub as ErrorLayout,
+  _b as ErrorLayout,
   od as FileUpload,
   Hg as Footer,
   Ba as FormField,
@@ -15209,11 +15220,11 @@ export {
   Oi as Progress,
   Fi as ProgressBar,
   qi as Radio,
-  d0 as ReusableForm,
+  u0 as ReusableForm,
   Kv as ReusableFormModal,
   cc as Search,
   Me as Select,
-  I0 as Sidebar,
+  j0 as Sidebar,
   Pa as Slider,
   Aa as Spinner,
   bc as Stepper,
@@ -15223,13 +15234,13 @@ export {
   Bc as TabPanel,
   ru as Text,
   Va as Textarea,
-  O0 as Timeline,
-  D0 as TimelineItem,
+  I0 as Timeline,
+  N0 as TimelineItem,
   Xd as Toast,
   kr as Tooltip,
   da as Typography,
   A as cn,
-  Yb as default,
+  Wb as default,
   Se as toast,
   fn as tooltip,
   _d as useToaster