@wishbone-media/spark 0.5.0 → 0.5.2

package/dist/index.js

@@ -1,7 +1,7 @@
-import { computed as y, resolveComponent as h, createElementBlock as c, openBlock as r, normalizeClass as g, createElementVNode as s, createVNode as u, unref as l, renderSlot as Y, Fragment as D, renderList as S, createCommentVNode as x, toDisplayString as M, reactive as k, ref as E, inject as te, provide as se, markRaw as J, createBlock as z, withCtx as B, resolveDynamicComponent as T, mergeProps as q, toHandlers as F, createTextVNode as Q, withModifiers as P } from "vue";
+import { computed as y, resolveComponent as C, createElementBlock as i, openBlock as r, normalizeClass as g, createElementVNode as s, createVNode as u, unref as c, renderSlot as M, Fragment as D, renderList as S, createCommentVNode as x, toDisplayString as h, reactive as k, ref as E, inject as te, provide as se, markRaw as J, createBlock as Y, withCtx as B, resolveDynamicComponent as T, mergeProps as q, toHandlers as F, createTextVNode as Q, withModifiers as P } from "vue";
 import { library as N } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon as ne } from "@fortawesome/vue-fontawesome";
-import { faXmark as ae, faTimes as oe, faStreetView as re, faSortUp as le, faSortDown as ie, faSort as ce, faScaleBalanced as Ae, faSatelliteDish as me, faLayerPlus as fe, faLaptopMobile as de, faInfoCircle as ue, faGripDotsVertical as ve, faGearComplex as ge, faFlag as pe, faFaceSmileWink as xe, faFaceSmileRelaxed as ye, faExclamationTriangle as Be, faEllipsisVertical as be, faEllipsis as we, faEdit as Me, faComments as he, faCircleXmark as Ce, faCircleUser as ze, faChevronUp as Ye, faChevronRight as De, faChevronLeft as Pe, faChevronDown as He, faCheckCircle as Se, faCheck as Ee, faBullhorn as ke, faBellRing as Qe, faBarsSort as Ge, faArrowRightToLine as Ze, faArrowLeftToLine as je } from "@fortawesome/pro-regular-svg-icons";
+import { faXmark as ae, faTimes as oe, faStreetView as re, faSortUp as le, faSortDown as ie, faSort as ce, faScaleBalanced as Ae, faSatelliteDish as me, faLayerPlus as de, faLaptopMobile as fe, faInfoCircle as ue, faGripDotsVertical as ve, faGearComplex as ge, faFlag as pe, faFaceSmileWink as xe, faFaceSmileRelaxed as ye, faExclamationTriangle as Be, faEllipsisVertical as be, faEllipsis as we, faEdit as he, faComments as Me, faCircleXmark as Ce, faCircleUser as ze, faChevronUp as Ye, faChevronRight as De, faChevronLeft as Pe, faChevronDown as He, faCheckCircle as Se, faCheck as Ee, faBullhorn as ke, faBellRing as Qe, faBarsSort as Ge, faArrowRightToLine as Ze, faArrowLeftToLine as je } from "@fortawesome/pro-regular-svg-icons";
 import { defineStore as I } from "pinia";
 import { TransitionRoot as U, Dialog as R, TransitionChild as G, DialogPanel as X } from "@headlessui/vue";
 import { useRouter as Ie } from "vue-router";
@@ -19,8 +19,8 @@ const b = {
   farChevronUp: Ye,
   farCircleUser: ze,
   farCircleXmark: Ce,
-  farComments: he,
-  farEdit: Me,
+  farComments: Me,
+  farEdit: he,
   farEllipsis: we,
   farEllipsisVertical: be,
   farExclamationTriangle: Be,
@@ -30,8 +30,8 @@ const b = {
   farGearComplex: ge,
   farGripDotsVertical: ve,
   farInfoCircle: ue,
-  farLaptopMobile: de,
-  farLayerPlus: fe,
+  farLaptopMobile: fe,
+  farLayerPlus: de,
   farSatelliteDish: me,
   farScaleBalanced: Ae,
   farSort: ce,
@@ -41,13 +41,13 @@ const b = {
   farTimes: oe,
   farXmark: ae
 };
-function ys() {
-  N.add(...Object.values(b));
-}
 function Bs(e) {
+  Object.assign(b, e), N.add(...Object.values(e));
+}
+function bs(e) {
   N.add(...Object.values(b)), e.component("FontAwesomeIcon", ne);
 }
-const Le = { class: "flex items-center" }, We = { class: "shrink-0 self-start" }, Oe = { class: "ml-3" }, Je = { class: "ml-auto pl-3 pt-1 self-start" }, Te = { class: "-mx-1.5 -my-1.5" }, bs = {
+const Le = { class: "flex items-center" }, We = { class: "shrink-0 self-start" }, Oe = { class: "ml-3" }, Je = { class: "ml-auto pl-3 pt-1 self-start" }, Te = { class: "-mx-1.5 -my-1.5" }, ws = {
   __name: "SparkAlert",
   props: {
     type: {
@@ -63,12 +63,12 @@ const Le = { class: "flex items-center" }, We = { class: "shrink-0 self-start" }
       warning: "bg-yellow-50 border-yellow-200 text-yellow-700",
       danger: "bg-red-50 border-red-200 text-red-700",
       info: "bg-blue-50 border-blue-200 text-blue-700"
-    })[a.type]), i = y(() => ({
+    })[a.type]), A = y(() => ({
       success: "text-green-400",
       warning: "text-yellow-400",
       danger: "text-red-400",
       info: "text-blue-400"
-    })[a.type]), d = y(() => ({
+    })[a.type]), f = y(() => ({
       success: "farCheckCircle",
       warning: "farExclamationTriangle",
       danger: "farCircleXmark",
@@ -79,30 +79,30 @@ const Le = { class: "flex items-center" }, We = { class: "shrink-0 self-start" }
       danger: "text-red-400 hover:bg-red-100",
       info: "text-blue-400 hover:bg-blue-100"
     })[a.type]);
-    return (m, f) => {
-      const t = h("font-awesome-icon");
-      return r(), c("div", {
+    return (d, l) => {
+      const t = C("font-awesome-icon");
+      return r(), i("div", {
         class: g(["rounded-md border p-4", n.value])
       }, [
         s("div", Le, [
           s("div", We, [
             u(t, {
-              icon: l(b)[d.value],
-              class: g(i.value)
+              icon: c(b)[f.value],
+              class: g(A.value)
             }, null, 8, ["icon", "class"])
           ]),
           s("div", Oe, [
-            Y(m.$slots, "default")
+            M(d.$slots, "default")
           ]),
           s("div", Je, [
             s("div", Te, [
               s("button", {
                 type: "button",
                 class: g(["inline-flex rounded-md px-2 py-1.5", v.value]),
-                onClick: f[0] || (f[0] = (o) => m.$emit("close"))
+                onClick: l[0] || (l[0] = (o) => d.$emit("close"))
               }, [
                 u(t, {
-                  icon: l(b).farXmark
+                  icon: c(b).farXmark
                 }, null, 8, ["icon"])
               ], 2)
             ])
@@ -167,49 +167,49 @@ const Le = { class: "flex items-center" }, We = { class: "shrink-0 self-start" }
   },
   emits: ["close", "select"],
   setup(e, { emit: a }) {
-    const n = e, i = a, d = y(() => n.appItems.map((m) => ({
-      ...m,
-      current: m.name === n.currentApp
-    }))), v = (m) => {
-      window.open(m.href, "_blank"), i("select", m);
+    const n = e, A = a, f = y(() => n.appItems.map((d) => ({
+      ...d,
+      current: d.name === n.currentApp
+    }))), v = (d) => {
+      window.open(d.href, "_blank"), A("select", d);
     };
-    return (m, f) => {
-      const t = h("font-awesome-icon");
-      return r(), c("div", qe, [
+    return (d, l) => {
+      const t = C("font-awesome-icon");
+      return r(), i("div", qe, [
         s("div", Fe, [
           s("div", Ne, [
             s("div", Ue, [
-              f[1] || (f[1] = s("div", null, "Mr Group Network", -1)),
+              l[1] || (l[1] = s("div", null, "Mr Group Network", -1)),
               s("div", Re, [
                 u(t, {
-                  icon: l(b).farTimes,
+                  icon: c(b).farTimes,
                   class: "h-[15px] w-[15px] shrink-0 text-gray-400 cursor-pointer",
-                  onClick: f[0] || (f[0] = (o) => i("close"))
+                  onClick: l[0] || (l[0] = (o) => A("close"))
                 }, null, 8, ["icon"])
               ])
             ]),
-            (r(!0), c(D, null, S(d.value, (o) => (r(), c("div", {
+            (r(!0), i(D, null, S(f.value, (o) => (r(), i("div", {
               key: o.name,
               class: g([o.current ? "bg-gray-50" : "hover:bg-gray-50", "flex px-[22px] py-[15px] cursor-pointer"]),
               onClick: (p) => v(o)
             }, [
               s("div", Ke, [
                 s("div", Ve, [
-                  s("div", _e, M(o.name), 1),
-                  o.current ? (r(), c("span", $e, " Active ")) : x("", !0)
+                  s("div", _e, h(o.name), 1),
+                  o.current ? (r(), i("span", $e, " Active ")) : x("", !0)
                 ]),
-                s("div", et, M(o.description), 1)
+                s("div", et, h(o.description), 1)
               ]),
               s("div", tt, [
                 u(t, {
                   class: g([o.current ? "text-gray-700" : "text-gray-400", "h-5 w-5 shrink-0"]),
-                  icon: l(b)[o.icon]
+                  icon: c(b)[o.icon]
                 }, null, 8, ["class", "icon"])
               ])
             ], 10, Xe))), 128)),
-            f[2] || (f[2] = s("div", null, null, -1))
+            l[2] || (l[2] = s("div", null, null, -1))
           ]),
-          f[3] || (f[3] = s("div", { class: "mt-auto" }, [
+          l[3] || (l[3] = s("div", { class: "mt-auto" }, [
             s("div", { class: "p-6" }, "Learn More"),
             s("div", { class: "bg-gray-50 p-6" }, "Footer")
           ], -1))
@@ -232,49 +232,49 @@ const Le = { class: "flex items-center" }, We = { class: "shrink-0 self-start" }
       },
       { name: "Mr Antenna", logo: ot, current: !0 }
     ]
-  }), a = y(() => e.brands.find((d) => d.current)), n = y(() => e.brands);
+  }), a = y(() => e.brands.find((f) => f.current)), n = y(() => e.brands);
   return {
     state: e,
     currentBrand: a,
     allBrands: n,
-    toggleBrand: (d) => {
+    toggleBrand: (f) => {
       e.brands.forEach((v) => {
-        v.current = v === d;
+        v.current = v === f;
       });
     }
   };
-}), rt = { class: "flex grow flex-col gap-y-5 overflow-y-auto bg-white rounded-lg" }, lt = { class: "flex flex-1 flex-col" }, it = { class: "divide-y divide-gray-200" }, ct = { class: "flex px-[22px] py-2.5 text-[12px] items-center" }, At = { class: "ml-auto flex items-center" }, mt = ["onClick"], ft = { class: "gap-y-1 flex" }, dt = { class: "flex items-center mr-4" }, ut = ["src", "alt"], vt = { class: "ml-auto flex flex-col" }, gt = { class: "text-base text-gray-800 flex items-center" }, pt = { class: "font-medium" }, xt = {
+}), rt = { class: "flex grow flex-col gap-y-5 overflow-y-auto bg-white rounded-lg" }, lt = { class: "flex flex-1 flex-col" }, it = { class: "divide-y divide-gray-200" }, ct = { class: "flex px-[22px] py-2.5 text-[12px] items-center" }, At = { class: "ml-auto flex items-center" }, mt = ["onClick"], dt = { class: "gap-y-1 flex" }, ft = { class: "flex items-center mr-4" }, ut = ["src", "alt"], vt = { class: "ml-auto flex flex-col" }, gt = { class: "text-base text-gray-800 flex items-center" }, pt = { class: "font-medium" }, xt = {
   key: 0,
   class: "inline-flex items-center rounded-full bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700 ml-1"
 }, yt = { class: "text-sm text-gray-500" }, Bt = {
   __name: "SparkBrandSelector",
   emits: ["close", "select"],
   setup(e, { emit: a }) {
-    const n = a, i = K(), d = (v) => {
+    const n = a, A = K(), f = (v) => {
       n("select", v);
     };
-    return (v, m) => {
-      const f = h("font-awesome-icon");
-      return r(), c("div", rt, [
+    return (v, d) => {
+      const l = C("font-awesome-icon");
+      return r(), i("div", rt, [
         s("div", lt, [
           s("div", it, [
             s("div", ct, [
-              m[1] || (m[1] = s("div", null, "Filter by Brand", -1)),
+              d[1] || (d[1] = s("div", null, "Filter by Brand", -1)),
               s("div", At, [
-                u(f, {
-                  icon: l(b).farTimes,
+                u(l, {
+                  icon: c(b).farTimes,
                   class: "size-4 text-gray-400 cursor-pointer",
-                  onClick: m[0] || (m[0] = (t) => n("close"))
+                  onClick: d[0] || (d[0] = (t) => n("close"))
                 }, null, 8, ["icon"])
               ])
             ]),
-            (r(!0), c(D, null, S(l(i).allBrands, (t) => (r(), c("div", {
+            (r(!0), i(D, null, S(c(A).allBrands, (t) => (r(), i("div", {
               key: t.name,
               class: g([t.current ? "bg-gray-50" : "hover:bg-gray-50", "flex px-[22px] py-[15px] cursor-pointer"]),
-              onClick: (o) => d(t)
+              onClick: (o) => f(t)
             }, [
-              s("div", ft, [
-                s("div", dt, [
+              s("div", dt, [
+                s("div", ft, [
                   s("img", {
                     src: t.logo,
                     alt: `${t.name} logo`,
@@ -283,16 +283,16 @@ const Le = { class: "flex items-center" }, We = { class: "shrink-0 self-start" }
                 ]),
                 s("div", vt, [
                   s("div", gt, [
-                    s("div", pt, M(t.name), 1),
-                    t.current ? (r(), c("span", xt, " Current ")) : x("", !0)
+                    s("div", pt, h(t.name), 1),
+                    t.current ? (r(), i("span", xt, " Current ")) : x("", !0)
                   ]),
-                  s("div", yt, M(t.current ? "Current Brand" : "Change to"), 1)
+                  s("div", yt, h(t.current ? "Current Brand" : "Change to"), 1)
                 ])
               ])
             ], 10, mt))), 128)),
-            m[2] || (m[2] = s("div", null, null, -1))
+            d[2] || (d[2] = s("div", null, null, -1))
           ]),
-          m[3] || (m[3] = s("div", { class: "mt-auto" }, null, -1))
+          d[3] || (d[3] = s("div", { class: "mt-auto" }, null, -1))
         ])
       ]);
     };
@@ -319,9 +319,9 @@ const Le = { class: "flex items-center" }, We = { class: "shrink-0 self-start" }
     }
   },
   setup(e) {
-    const a = e, n = E(null), i = te("buttonGroup", null), d = y(() => {
-      if (!i?.isInGroup || !n.value) return null;
-      const t = i.getButtonIndex(n.value), o = i.getButtonCount();
+    const a = e, n = E(null), A = te("buttonGroup", null), f = y(() => {
+      if (!A?.isInGroup || !n.value) return null;
+      const t = A.getButtonIndex(n.value), o = A.getButtonCount();
       return {
         isFirst: t === 0,
         isLast: t === o - 1,
@@ -338,18 +338,18 @@ const Le = { class: "flex items-center" }, We = { class: "shrink-0 self-start" }
       borderRadius: /^rounded-/,
       background: /^bg-/,
       text: /^text-(?!white|black)/
-    }, m = (t, o) => {
+    }, d = (t, o) => {
       if (!o) return t;
-      const p = t.split(" ").filter(Boolean), A = o.split(" ").filter(Boolean);
-      return [...p.filter((Z) => !A.some((_) => {
+      const p = t.split(" ").filter(Boolean), m = o.split(" ").filter(Boolean);
+      return [...p.filter((Z) => !m.some((_) => {
         const L = Object.entries(v).find(
           ([ee, j]) => j.test(Z)
         )?.[0], $ = Object.entries(v).find(
           ([ee, j]) => j.test(_)
         )?.[0];
         return L && L === $;
-      })), ...A].join(" ");
-    }, f = y(() => {
+      })), ...m].join(" ");
+    }, l = y(() => {
       let t = "", o = "";
       switch (a.size) {
         case "xs":
@@ -368,9 +368,9 @@ const Le = { class: "flex items-center" }, We = { class: "shrink-0 self-start" }
           t += " px-3.5 py-2.5 text-sm", o = "md";
           break;
       }
-      if (i?.isInGroup && d.value) {
-        const { isFirst: p, isLast: A } = d.value;
-        t += " relative inline-flex items-center focus:z-10", p && A ? t += ` rounded-${o}` : p ? t += ` rounded-l-${o} rounded-r-none` : A ? t += ` rounded-r-${o} rounded-l-none -ml-px` : t += " rounded-none -ml-px";
+      if (A?.isInGroup && f.value) {
+        const { isFirst: p, isLast: m } = f.value;
+        t += " relative inline-flex items-center focus:z-10", p && m ? t += ` rounded-${o}` : p ? t += ` rounded-l-${o} rounded-r-none` : m ? t += ` rounded-r-${o} rounded-l-none -ml-px` : t += " rounded-none -ml-px";
       } else
         t += ` shadow-xs rounded-${o}`;
       switch (a.variant) {
@@ -395,39 +395,39 @@ const Le = { class: "flex items-center" }, We = { class: "shrink-0 self-start" }
         default:
           t += ` bg-${a.variant}-600 hover:bg-${a.variant}-500 text-white`;
       }
-      return t = m(t, a.buttonClass), t;
+      return t = d(t, a.buttonClass), t;
     });
-    return (t, o) => (r(), c("button", {
+    return (t, o) => (r(), i("button", {
       type: "button",
       ref_key: "buttonRef",
       ref: n,
-      class: g(f.value),
+      class: g(l.value),
       disabled: e.disabled,
       onClick: o[0] || (o[0] = (p) => t.$emit("click"))
     }, [
-      Y(t.$slots, "default")
+      M(t.$slots, "default")
     ], 10, bt));
   }
-}, ws = {
+}, hs = {
   __name: "SparkButtonGroup",
   setup(e) {
     const a = E(null);
     return se("buttonGroup", {
       isInGroup: !0,
-      getButtonIndex: (d) => a.value ? Array.from(a.value.children).indexOf(d) : -1,
+      getButtonIndex: (f) => a.value ? Array.from(a.value.children).indexOf(f) : -1,
       getButtonCount: () => a.value?.children.length || 0
-    }), (d, v) => (r(), c("div", {
+    }), (f, v) => (r(), i("div", {
       class: "inline-flex rounded-md shadow-xs",
       ref_key: "groupRef",
       ref: a
     }, [
-      Y(d.$slots, "default")
+      M(f.$slots, "default")
     ], 512));
   }
-}, wt = { class: "divide-y divide-gray-300 rounded-lg border border-gray-300 text-gray-700 bg-gray-100" }, Mt = {
+}, wt = { class: "divide-y divide-gray-300 rounded-lg border border-gray-300 text-gray-700 bg-gray-100" }, ht = {
   key: 0,
   class: "p-5"
-}, ht = {
+}, Mt = {
   key: 1,
   class: "p-5"
 }, Ms = {
@@ -444,17 +444,17 @@ const Le = { class: "flex items-center" }, We = { class: "shrink-0 self-start" }
   },
   setup(e) {
     const a = e;
-    return (n, i) => (r(), c("div", wt, [
-      n.$slots.header ? (r(), c("div", Mt, [
-        Y(n.$slots, "header")
+    return (n, A) => (r(), i("div", wt, [
+      n.$slots.header ? (r(), i("div", ht, [
+        M(n.$slots, "header")
       ])) : x("", !0),
       s("div", {
         class: g([a.padded ? a.paddedClass : ""])
       }, [
-        Y(n.$slots, "default")
+        M(n.$slots, "default")
       ], 2),
-      n.$slots.footer ? (r(), c("div", ht, [
-        Y(n.$slots, "footer")
+      n.$slots.footer ? (r(), i("div", Mt, [
+        M(n.$slots, "footer")
       ])) : x("", !0)
     ]));
   }
@@ -468,8 +468,8 @@ class Ct {
       eventHandlers: {}
     });
   }
-  show = (a, n = {}, i = {}) => {
-    this.state.content = J(a), this.state.props = n, this.state.eventHandlers = i, this.state.isVisible = !0;
+  show = (a, n = {}, A = {}) => {
+    this.state.content = J(a), this.state.props = n, this.state.eventHandlers = A, this.state.isVisible = !0;
   };
   hide = () => {
     this.state.isVisible = !1, this.state.eventHandlers = {};
@@ -478,17 +478,17 @@ class Ct {
 const H = new Ct(), zt = { class: "fixed inset-0 z-10 w-screen overflow-y-auto" }, Yt = { class: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0" }, Dt = {
   __name: "SparkModalContainer",
   setup(e) {
-    return (a, n) => (r(), z(l(U), {
+    return (a, n) => (r(), Y(c(U), {
       as: "template",
-      show: l(H).state.isVisible
+      show: c(H).state.isVisible
     }, {
       default: B(() => [
-        u(l(R), {
+        u(c(R), {
           class: "relative z-50",
-          onClose: l(H).hide
+          onClose: c(H).hide
         }, {
           default: B(() => [
-            u(l(G), {
+            u(c(G), {
               as: "template",
               enter: "ease-out duration-300",
               "enter-from": "opacity-0",
@@ -504,7 +504,7 @@ const H = new Ct(), zt = { class: "fixed inset-0 z-10 w-screen overflow-y-auto"
             }),
             s("div", zt, [
               s("div", Yt, [
-                u(l(G), {
+                u(c(G), {
                   as: "template",
                   enter: "ease-out duration-300",
                   "enter-from": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
@@ -514,9 +514,9 @@ const H = new Ct(), zt = { class: "fixed inset-0 z-10 w-screen overflow-y-auto"
                   "leave-to": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 }, {
                   default: B(() => [
-                    u(l(X), { class: "relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg" }, {
+                    u(c(X), { class: "relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg" }, {
                       default: B(() => [
-                        (r(), z(T(l(H).state.content), q(l(H).state.props, F(l(H).state.eventHandlers)), null, 16))
+                        (r(), Y(T(c(H).state.content), q(c(H).state.props, F(c(H).state.eventHandlers)), null, 16))
                       ]),
                       _: 1
                     })
@@ -535,7 +535,7 @@ const H = new Ct(), zt = { class: "fixed inset-0 z-10 w-screen overflow-y-auto"
 }, Pt = { class: "px-4 pt-5 pb-4 sm:p-6" }, Ht = {
   key: 0,
   class: "text-lg font-medium text-gray-900"
-}, hs = {
+}, Cs = {
   __name: "SparkModalDialog",
   props: {
     title: {
@@ -585,7 +585,7 @@ const H = new Ct(), zt = { class: "fixed inset-0 z-10 w-screen overflow-y-auto"
     "input"
   ],
   setup(e) {
-    const a = e, n = y(() => !a.buttons || a.buttons.length === 0 ? [{ text: "OK", variant: "primary", event: "ok" }] : a.buttons), i = y(() => {
+    const a = e, n = y(() => !a.buttons || a.buttons.length === 0 ? [{ text: "OK", variant: "primary", event: "ok" }] : a.buttons), A = y(() => {
       switch (n.value.length) {
         case 1:
           return "sm:grid sm:grid-flow-row-dense";
@@ -596,53 +596,53 @@ const H = new Ct(), zt = { class: "fixed inset-0 z-10 w-screen overflow-y-auto"
         default:
           return "flex flex-col gap-3";
       }
-    }), d = {
+    }), f = {
       info: "farInfoCircle",
       success: "farCheckCircle",
       warning: "farExclamationTriangle",
       danger: "farCircleXmark"
-    }, v = y(() => a.icon || d[a.type]), m = y(() => ({
+    }, v = y(() => a.icon || f[a.type]), d = y(() => ({
       info: "bg-blue-100",
       success: "bg-green-100",
       warning: "bg-yellow-100",
       danger: "bg-red-100"
-    })[a.type]), f = y(() => ({
+    })[a.type]), l = y(() => ({
       info: "text-blue-400",
       success: "text-green-400",
       warning: "text-yellow-400",
       danger: "text-red-400"
     })[a.type]);
     return (t, o) => {
-      const p = h("font-awesome-icon");
-      return r(), c("div", Pt, [
-        v.value ? (r(), c("div", {
+      const p = C("font-awesome-icon");
+      return r(), i("div", Pt, [
+        v.value ? (r(), i("div", {
           key: 0,
-          class: g(["mx-auto flex size-12 items-center justify-center rounded-full", m.value])
+          class: g(["mx-auto flex size-12 items-center justify-center rounded-full", d.value])
         }, [
           u(p, {
-            icon: l(b)[v.value],
-            class: g(["h-5 w-5", f.value])
+            icon: c(b)[v.value],
+            class: g(["h-5 w-5", l.value])
           }, null, 8, ["icon", "class"])
         ], 2)) : x("", !0),
         s("div", {
           class: g(["text-center", { "mt-3 sm:mt-5": v.value }])
         }, [
-          e.title ? (r(), c("h3", Ht, M(e.title), 1)) : x("", !0),
-          e.message ? (r(), c("div", {
+          e.title ? (r(), i("h3", Ht, h(e.title), 1)) : x("", !0),
+          e.message ? (r(), i("div", {
             key: 1,
             class: g([{ "mt-2": e.title }, "text-sm text-gray-500"])
-          }, M(e.message), 3)) : x("", !0)
+          }, h(e.message), 3)) : x("", !0)
         ], 2),
         s("div", {
-          class: g(["mt-5 sm:mt-6", i.value])
+          class: g(["mt-5 sm:mt-6", A.value])
         }, [
-          (r(!0), c(D, null, S(n.value, (A, w) => (r(), z(l(V), {
+          (r(!0), i(D, null, S(n.value, (m, w) => (r(), Y(c(V), {
             key: w,
-            variant: A.variant,
-            onClick: (Z) => t.$emit(A.event, A)
+            variant: m.variant,
+            onClick: (Z) => t.$emit(m.event, m)
           }, {
             default: B(() => [
-              Q(M(A.text), 1)
+              Q(h(m.text), 1)
             ]),
             _: 2
           }, 1032, ["variant", "onClick"]))), 128))
@@ -665,18 +665,18 @@ const H = new Ct(), zt = { class: "fixed inset-0 z-10 w-screen overflow-y-auto"
   },
   setup(e) {
     const a = E(null);
-    return (n, i) => (r(), z(l(U), {
+    return (n, A) => (r(), Y(c(U), {
       show: e.overlayInstance.state.isVisible,
       as: "template"
     }, {
       default: B(() => [
-        u(l(R), {
+        u(c(R), {
           initialFocus: a.value,
           class: "relative z-200",
           onClose: e.overlayInstance.close
         }, {
           default: B(() => [
-            u(l(G), {
+            u(c(G), {
               as: "template",
               enter: "transition-opacity ease-linear duration-150",
               "enter-from": "opacity-0",
@@ -685,13 +685,13 @@ const H = new Ct(), zt = { class: "fixed inset-0 z-10 w-screen overflow-y-auto"
               "leave-from": "opacity-100",
               "leave-to": "opacity-0"
             }, {
-              default: B(() => [...i[0] || (i[0] = [
+              default: B(() => [...A[0] || (A[0] = [
                 s("div", { class: "fixed inset-0 bg-gray-600/30" }, null, -1)
               ])]),
               _: 1
             }),
             s("div", St, [
-              u(l(G), {
+              u(c(G), {
                 as: "template",
                 enter: "transition ease-in-out duration-150 transform",
                 "enter-from": e.position === "left" ? "-translate-x-full opacity-0" : "translate-x-full opacity-0",
@@ -701,7 +701,7 @@ const H = new Ct(), zt = { class: "fixed inset-0 z-10 w-screen overflow-y-auto"
                 "leave-to": e.position === "left" ? "-translate-x-full opacity-0" : "translate-x-full opacity-0"
               }, {
                 default: B(() => [
-                  u(l(X), {
+                  u(c(X), {
                     ref_key: "panelRef",
                     ref: a,
                     class: g([
@@ -710,7 +710,7 @@ const H = new Ct(), zt = { class: "fixed inset-0 z-10 w-screen overflow-y-auto"
                     ])
                   }, {
                     default: B(() => [
-                      (r(), z(T(e.overlayInstance.state.content), q({ ...n.$attrs, ...e.overlayInstance.state.props }, F(e.overlayInstance.state.eventHandlers)), null, 16))
+                      (r(), Y(T(e.overlayInstance.state.content), q({ ...n.$attrs, ...e.overlayInstance.state.props }, F(e.overlayInstance.state.eventHandlers)), null, 16))
                     ]),
                     _: 1
                   }, 8, ["class"])
@@ -736,19 +736,19 @@ function O() {
     e.isVisible = !e.isVisible;
   }, n = () => {
     e.isVisible = !1, e.eventHandlers = {};
-  }, i = () => {
+  }, A = () => {
     e.isVisible = !0;
-  }, d = (m, f = {}, t = {}) => {
-    e.content = J(m), e.props = f, e.eventHandlers = t;
+  }, f = (d, l = {}, t = {}) => {
+    e.content = J(d), e.props = l, e.eventHandlers = t;
   };
   return {
     state: e,
     toggle: a,
     close: n,
-    open: i,
-    setContent: d,
-    show: (m, f = {}, t = {}) => {
-      m && d(m, f, t), i();
+    open: A,
+    setContent: f,
+    show: (d, l = {}, t = {}) => {
+      d && f(d, l, t), A();
     }
   };
 }
@@ -756,11 +756,11 @@ class Et {
   constructor() {
     this.left = O(), this.right = O();
   }
-  showLeft = (a, n = {}, i = {}) => {
-    this.left.show(a, n, i);
+  showLeft = (a, n = {}, A = {}) => {
+    this.left.show(a, n, A);
   };
-  showRight = (a, n = {}, i = {}) => {
-    this.right.show(a, n, i);
+  showRight = (a, n = {}, A = {}) => {
+    this.right.show(a, n, A);
   };
   closeLeft = () => {
     this.left.close();
@@ -772,7 +772,7 @@ class Et {
     this.left.close(), this.right.close();
   };
 }
-const C = new Et(), kt = { class: "flex grow m-2.5 p-[10px] rounded-lg" }, Qt = { class: "flex flex-1 flex-col" }, Gt = {
+const z = new Et(), kt = { class: "flex grow m-2.5 p-[10px] rounded-lg" }, Qt = { class: "flex flex-1 flex-col" }, Gt = {
   class: "flex flex-1 flex-col gap-y-7",
   role: "list"
 }, Zt = { role: "list" }, jt = { class: "flex items-center pb-8" }, It = ["href", "onClick"], Lt = {
@@ -784,7 +784,7 @@ const C = new Et(), kt = { class: "flex grow m-2.5 p-[10px] rounded-lg" }, Qt =
 }, Ot = ["href", "onClick"], Jt = {
   key: 1,
   class: "text-[13px]"
-}, Tt = { class: "mt-auto" }, qt = { class: "p-[10px] flex-shrink-0" }, Ft = { class: "flex flex-1 items-center gap-x-6" }, Nt = { class: "relative flex flex-1 items-center justify-between" }, Ut = { class: "cursor-pointer" }, Rt = ["src"], Xt = { class: "mr-[10px] pb-[10px] flex-1 flex flex-col" }, Cs = {
+}, Tt = { class: "mt-auto" }, qt = { class: "p-[10px] flex-shrink-0" }, Ft = { class: "flex flex-1 items-center gap-x-6" }, Nt = { class: "relative flex flex-1 items-center gap-4" }, Ut = { class: "cursor-pointer" }, Rt = ["src"], Xt = { class: "ml-auto" }, Kt = { class: "mr-[10px] pb-[10px] flex-1 flex flex-col" }, zs = {
   __name: "SparkDefaultContainer",
   props: {
     appStore: {
@@ -797,24 +797,24 @@ const C = new Et(), kt = { class: "flex grow m-2.5 p-[10px] rounded-lg" }, Qt =
     }
   },
   setup(e) {
-    const a = e, n = K(), i = () => {
-      C.showRight(st, {
+    const a = e, n = K(), A = () => {
+      z.showRight(st, {
         currentApp: a.appStore.state.app
       });
-    }, d = () => {
-      C.showLeft(
+    }, f = () => {
+      z.showLeft(
         Bt,
         {},
         {
-          select: (f) => {
-            n.toggleBrand(f), C.closeLeft();
+          select: (l) => {
+            n.toggleBrand(l), z.closeLeft();
           }
         }
       );
-    }, v = y(() => a.mainNavStore.state.hidden ? ["w-0 overflow-hidden"] : [a.mainNavStore.state.collapsed ? "w-[80px]" : "w-[240px]"]), m = y(() => a.mainNavStore.state.hidden ? ["pl-2.5"] : [a.mainNavStore.state.collapsed ? "pl-[80px]" : "pl-[240px]"]);
-    return (f, t) => {
-      const o = h("font-awesome-icon"), p = h("router-view");
-      return r(), c(D, null, [
+    }, v = y(() => a.mainNavStore.state.hidden ? ["w-0 overflow-hidden"] : [a.mainNavStore.state.collapsed ? "w-[80px]" : "w-[240px]"]), d = y(() => a.mainNavStore.state.hidden ? ["pl-2.5"] : [a.mainNavStore.state.collapsed ? "pl-[80px]" : "pl-[240px]"]);
+    return (l, t) => {
+      const o = C("font-awesome-icon"), p = C("router-view");
+      return r(), i(D, null, [
         s("div", {
           class: g([v.value, "fixed inset-y-0 flex transition-all z-100"])
         }, [
@@ -826,52 +826,52 @@ const C = new Et(), kt = { class: "flex grow m-2.5 p-[10px] rounded-lg" }, Qt =
                     s("li", jt, [
                       s("a", {
                         class: "grid w-[40px] h-[40px] place-items-center rounded-md bg-primary-600 text-white text-[13px] cursor-pointer",
-                        onClick: t[0] || (t[0] = P((A) => e.mainNavStore.goto("dashboard"), ["prevent"]))
+                        onClick: t[0] || (t[0] = P((m) => e.mainNavStore.goto(e.appStore.state.homeRoute), ["prevent"]))
                       }, [
                         u(o, {
-                          icon: l(b)[e.appStore.state.icon],
+                          icon: c(b)[e.appStore.state.icon],
                           class: "size-5"
                         }, null, 8, ["icon"])
                       ]),
-                      e.mainNavStore.state.collapsed ? x("", !0) : (r(), c("a", {
+                      e.mainNavStore.state.collapsed ? x("", !0) : (r(), i("a", {
                         key: 0,
-                        onClick: t[1] || (t[1] = P((A) => e.mainNavStore.goto("dashboard"), ["prevent"])),
+                        onClick: t[1] || (t[1] = P((m) => e.mainNavStore.goto(e.appStore.state.homeRoute), ["prevent"])),
                         class: "font-medium text-gray-800 ml-[10px] cursor-pointer"
-                      }, M(e.appStore.state.app), 1))
+                      }, h(e.appStore.state.app), 1))
                     ]),
-                    (r(!0), c(D, null, S(e.mainNavStore.state.menu, (A) => (r(), c("li", {
-                      key: A.name,
+                    (r(!0), i(D, null, S(e.mainNavStore.state.menu, (m) => (r(), i("li", {
+                      key: m.name,
                       class: g({
-                        "mt-[10px]": A.children
+                        "mt-[10px]": m.children
                       })
                     }, [
                       s("a", {
                         class: g([{
-                          "bg-gray-100": A.current,
-                          "hover:bg-gray-100": A?.href
+                          "bg-gray-100": m.current,
+                          "hover:bg-gray-100": m?.href
                         }, "h-[37px] sgroup flex items-center gap-x-2 rounded-md p-3 text-gray-800 leading-5 transition-all duration-300 ease-in-out"]),
-                        href: A?.href,
-                        onClick: P((w) => e.mainNavStore.goto(A.href), ["prevent"])
+                        href: m?.href,
+                        onClick: P((w) => e.mainNavStore.goto(m.href), ["prevent"])
                       }, [
-                        A.icon ? (r(), z(o, {
+                        m.icon ? (r(), Y(o, {
                           key: 0,
-                          icon: l(b)[A.icon],
-                          class: g([[(A.current, "text-gray-400")], "size-4"])
+                          icon: c(b)[m.icon],
+                          class: g([[(m.current, "text-gray-400")], "size-4"])
                         }, null, 8, ["icon", "class"])) : x("", !0),
-                        e.mainNavStore.state.collapsed ? A?.children ? (r(), c("div", Lt, [...t[4] || (t[4] = [
+                        e.mainNavStore.state.collapsed ? m?.children ? (r(), i("div", Lt, [...t[4] || (t[4] = [
                           s("div", { class: "w-[10px] h-px bg-gray-400" }, null, -1)
-                        ])])) : x("", !0) : (r(), c("span", {
+                        ])])) : x("", !0) : (r(), i("span", {
                           key: 1,
                           class: g({
-                            "text-[11px]": A?.children,
-                            "text-[13px]": !A?.children,
-                            "font-semibold": A?.children,
-                            "text-gray-500": A?.children
+                            "text-[11px]": m?.children,
+                            "text-[13px]": !m?.children,
+                            "font-semibold": m?.children,
+                            "text-gray-500": m?.children
                           })
-                        }, M(A.name), 3))
+                        }, h(m.name), 3))
                       ], 10, It),
-                      A.children ? (r(), c("ul", Wt, [
-                        (r(!0), c(D, null, S(A.children, (w) => (r(), c("li", {
+                      m.children ? (r(), i("ul", Wt, [
+                        (r(!0), i(D, null, S(m.children, (w) => (r(), i("li", {
                           key: w.name
                         }, [
                           s("a", {
@@ -879,12 +879,12 @@ const C = new Et(), kt = { class: "flex grow m-2.5 p-[10px] rounded-lg" }, Qt =
                             href: w.href,
                             onClick: P((Z) => e.mainNavStore.goto(w.href), ["prevent"])
                           }, [
-                            w.icon ? (r(), z(o, {
+                            w.icon ? (r(), Y(o, {
                               key: 0,
-                              icon: l(b)[w.icon],
+                              icon: c(b)[w.icon],
                               class: g([[(w.current, "text-gray-400")], "size-4"])
                             }, null, 8, ["icon", "class"])) : x("", !0),
-                            e.mainNavStore.state.collapsed ? x("", !0) : (r(), c("span", Jt, M(w.name), 1))
+                            e.mainNavStore.state.collapsed ? x("", !0) : (r(), i("span", Jt, h(w.name), 1))
                           ], 10, Ot)
                         ]))), 128))
                       ])) : x("", !0)
@@ -892,13 +892,14 @@ const C = new Et(), kt = { class: "flex grow m-2.5 p-[10px] rounded-lg" }, Qt =
                   ])
                 ]),
                 s("li", Tt, [
+                  M(l.$slots, "sidebar-footer"),
                   s("a", {
                     class: "font-medium grid place-content-center gap-x-3 rounded-md h-10 p-2.5 text-gray-800 text-[13px] hover:bg-gray-100 transition-all duration-300 ease-in-out",
                     href: "#",
-                    onClick: t[2] || (t[2] = P((A) => e.mainNavStore.toggleCollapsed(), ["prevent"]))
+                    onClick: t[2] || (t[2] = P((m) => e.mainNavStore.toggleCollapsed(), ["prevent"]))
                   }, [
                     u(o, {
-                      icon: l(b)[e.mainNavStore.state.collapsed ? "farArrowRightToLine" : "farArrowLeftToLine"],
+                      icon: c(b)[e.mainNavStore.state.collapsed ? "farArrowRightToLine" : "farArrowLeftToLine"],
                       class: "class-5"
                     }, null, 8, ["icon"])
                   ])
@@ -908,95 +909,108 @@ const C = new Et(), kt = { class: "flex grow m-2.5 p-[10px] rounded-lg" }, Qt =
           ])
         ], 2),
         s("div", {
-          class: g([m.value, "h-full transition-all flex flex-col"])
+          class: g([d.value, "h-full transition-all flex flex-col"])
         }, [
           s("div", qt, [
             s("div", Ft, [
               s("div", Nt, [
-                s("div", Ut, [
-                  u(o, {
-                    icon: l(b).farBarsSort,
-                    class: "size-5",
-                    onClick: t[3] || (t[3] = (A) => e.mainNavStore.toggleHidden())
-                  }, null, 8, ["icon"])
+                M(l.$slots, "header-left", {}, () => [
+                  s("div", Ut, [
+                    u(o, {
+                      icon: c(b).farBarsSort,
+                      class: "size-5",
+                      onClick: t[3] || (t[3] = (m) => e.mainNavStore.toggleHidden())
+                    }, null, 8, ["icon"])
+                  ])
                 ]),
-                s("div", {
-                  class: "cursor-pointer h-9 flex items-center",
-                  onClick: d
-                }, [
-                  l(n).currentBrand ? (r(), c("img", {
+                M(l.$slots, "header-center", {}, () => [
+                  e.appStore.state.showBrandSelector ? (r(), i("div", {
                     key: 0,
-                    src: l(n).currentBrand.logo,
-                    alt: "",
-                    class: "h-[30px] w-auto"
-                  }, null, 8, Rt)) : x("", !0)
+                    class: "absolute left-1/2 -translate-x-1/2 cursor-pointer h-9 flex items-center",
+                    onClick: f
+                  }, [
+                    c(n).currentBrand ? (r(), i("img", {
+                      key: 0,
+                      src: c(n).currentBrand.logo,
+                      alt: "",
+                      class: "h-[30px] w-auto"
+                    }, null, 8, Rt)) : x("", !0)
+                  ])) : x("", !0)
                 ]),
-                s("button", {
-                  class: "rounded-sm bg-white w-[42px] h-[42px] ring-1 ring-inset ring-gray-300",
-                  type: "button",
-                  onClick: i
-                }, [
-                  u(o, {
-                    icon: l(b).farGripDotsVertical,
-                    class: "size-4 text-gray-400"
-                  }, null, 8, ["icon"])
+                s("div", Xt, [
+                  M(l.$slots, "header-right", {}, () => [
+                    e.appStore.state.showAppSelector ? (r(), i("button", {
+                      key: 0,
+                      class: "rounded-sm bg-white w-[42px] h-[42px] ring-1 ring-inset ring-gray-300",
+                      type: "button",
+                      onClick: A
+                    }, [
+                      u(o, {
+                        icon: c(b).farGripDotsVertical,
+                        class: "size-4 text-gray-400"
+                      }, null, 8, ["icon"])
+                    ])) : x("", !0)
+                  ])
                 ])
               ])
             ])
           ]),
-          s("main", Xt, [
+          s("main", Kt, [
             u(p)
           ])
         ], 2),
-        u(l(W), {
+        u(c(W), {
           position: "left",
-          "overlay-instance": l(C).left,
-          onClose: l(C).closeLeft
+          "overlay-instance": c(z).left,
+          onClose: c(z).closeLeft
         }, null, 8, ["overlay-instance", "onClose"]),
-        u(l(W), {
+        u(c(W), {
           position: "right",
-          "overlay-instance": l(C).right,
-          onClose: l(C).closeRight
+          "overlay-instance": c(z).right,
+          onClose: c(z).closeRight
         }, null, 8, ["overlay-instance", "onClose"]),
-        u(l(Dt))
+        u(c(Dt))
       ], 64);
     };
   }
-}, Kt = (e, a) => {
+}, Vt = (e, a) => {
   const n = e.__vccOpts || e;
-  for (const [i, d] of a)
-    n[i] = d;
+  for (const [A, f] of a)
+    n[A] = f;
   return n;
-}, Vt = {}, _t = { class: "h-full" };
-function $t(e, a) {
-  const n = h("router-view");
-  return r(), c("main", _t, [
+}, _t = {}, $t = { class: "h-full" };
+function es(e, a) {
+  const n = C("router-view");
+  return r(), i("main", $t, [
     u(n)
   ]);
 }
-const zs = /* @__PURE__ */ Kt(Vt, [["render", $t]]), Ys = I("sparkApp", () => {
+const Ys = /* @__PURE__ */ Vt(_t, [["render", es]]), Ds = I("sparkApp", () => {
   const e = k({
     app: "",
-    icon: ""
+    icon: "",
+    homeRoute: "dashboard",
+    showBrandSelector: !0,
+    showAppSelector: !0
   });
   return {
     state: e,
     initialize: (n = {}) => {
-      e.app = n.app || "", e.icon = n.icon || "";
+      e.app = n.app || "", e.icon = n.icon || "", e.homeRoute = n.homeRoute ?? "dashboard", e.showBrandSelector = n.showBrandSelector ?? !0, e.showAppSelector = n.showAppSelector ?? !0;
     }
   };
-}), Ds = I("sparkNav", () => {
+}), Ps = I("sparkNav", () => {
   const e = k({
     menu: [],
     collapsed: !1,
     hidden: !1
-  }), a = Ie(), n = (f = []) => {
-    e.menu = f;
-  }, i = (f, t) => {
-    for (const o of f) {
+  }), a = Ie(), n = (l = []) => {
+    e.menu = l;
+  }, A = (l, t) => {
+    for (const o of l) {
       if (o.href === t) return o;
       if (o.children) {
-        const p = i(o.children, t);
+        const p = A(o.children, t);
         if (p) return p;
       }
     }
@@ -1005,20 +1019,20 @@ const zs = /* @__PURE__ */ Kt(Vt, [["render", $t]]), Ys = I("sparkApp", () => {
   return {
     state: e,
     initialize: n,
-    goto: async (f) => {
-      if (f) {
+    goto: async (l) => {
+      if (l) {
         const t = (p) => {
-          p.forEach((A) => {
-            A.current = A.href === f, A.children && t(A.children);
+          p.forEach((m) => {
+            m.current = m.href === l, m.children && t(m.children);
           });
         };
         t(e.menu);
-        const o = i(e.menu, f);
+        const o = A(e.menu, l);
         if (o && typeof o.action == "function") {
           o.action();
           return;
         }
-        await a.push(f);
+        await a.push(l);
       }
     },
     toggleCollapsed: () => {
@@ -1028,20 +1042,20 @@ const zs = /* @__PURE__ */ Kt(Vt, [["render", $t]]), Ys = I("sparkApp", () => {
       e.hidden = !e.hidden;
     }
   };
-}), es = { class: "h-full grid place-content-center relative" }, ts = { class: "absolute top-8 left-8" }, ss = ["src"], ns = {
+}), ts = { class: "h-full grid place-content-center relative" }, ss = { class: "absolute top-8 left-8" }, ns = ["src"], as = {
   key: 1,
   width: "59",
   height: "23",
   viewBox: "0 0 59 23",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, as = { class: "max-w-sm grid gap-y-1 -mt-8" }, os = { class: "mb-7" }, rs = { class: "text-gray-600" }, ls = { class: "grid grid-flow-col justify-between my-1" }, is = {
+}, os = { class: "max-w-sm grid gap-y-1 -mt-8" }, rs = { class: "mb-7" }, ls = { class: "text-gray-600" }, is = { class: "grid grid-flow-col justify-between my-1" }, cs = {
   key: 0,
   class: "text-red-600 text-sm mb-2"
-}, cs = { key: 0 }, As = { key: 1 }, ms = {
+}, As = { key: 0 }, ms = { key: 1 }, ds = {
   key: 0,
   class: "mt-4 text-center text-sm text-gray-600"
-}, Ps = {
+}, Hs = {
   __name: "SparkLoginView",
   props: {
     logo: {
@@ -1067,26 +1081,26 @@ const zs = /* @__PURE__ */ Kt(Vt, [["render", $t]]), Ys = I("sparkApp", () => {
   },
   emits: ["login-success", "login-error"],
   setup(e, { emit: a }) {
-    const n = e, i = a, d = E(!1), v = E(""), m = async (f) => {
-      d.value = !0, v.value = "";
+    const n = e, A = a, f = E(!1), v = E(""), d = async (l) => {
+      f.value = !0, v.value = "";
       try {
-        await n.onLogin(f), i("login-success");
+        await n.onLogin(l), A("login-success");
       } catch (t) {
-        v.value = t.message || "Login failed. Please try again.", i("login-error", t);
+        v.value = t.message || "Login failed. Please try again.", A("login-error", t);
       } finally {
-        d.value = !1;
+        f.value = !1;
       }
     };
-    return (f, t) => {
-      const o = h("FormKit"), p = h("router-link");
-      return r(), c("div", es, [
-        s("div", ts, [
-          n.logo ? (r(), c("img", {
+    return (l, t) => {
+      const o = C("FormKit"), p = C("router-link");
+      return r(), i("div", ts, [
+        s("div", ss, [
+          n.logo ? (r(), i("img", {
             key: 0,
             src: n.logo,
             alt: "Logo",
             class: "h-[23px] w-auto"
-          }, null, 8, ss)) : (r(), c("svg", ns, [...t[0] || (t[0] = [
+          }, null, 8, ns)) : (r(), i("svg", as, [...t[0] || (t[0] = [
             s("path", {
               d: "M49.2029 17.1264V8.03835H44.0829V5.22235H58.0989V8.03835H52.9629V17.1264H49.2029Z",
               fill: "#1C64F2"
@@ -1105,14 +1119,14 @@ const zs = /* @__PURE__ */ Kt(Vt, [["render", $t]]), Ys = I("sparkApp", () => {
             }, null, -1)
           ])]))
         ]),
-        s("div", as, [
-          s("div", os, [
+        s("div", os, [
+          s("div", rs, [
             t[1] || (t[1] = s("h1", { class: "text-4xl text-gray-900 semibold tracking-tight mb-3" }, "Log in", -1)),
-            s("p", rs, " Welcome back" + M(n.appName ? ` to ${n.appName}` : "") + "! Please enter your details. ", 1)
+            s("p", ls, " Welcome back" + h(n.appName ? ` to ${n.appName}` : "") + "! Please enter your details. ", 1)
           ]),
           u(o, {
             type: "form",
-            onSubmit: m,
+            onSubmit: d,
             actions: !1
           }, {
             default: B(() => [
@@ -1132,7 +1146,7 @@ const zs = /* @__PURE__ */ Kt(Vt, [["render", $t]]), Ys = I("sparkApp", () => {
                 validation: "required",
                 "outer-class": "max-w-full"
               }),
-              s("div", ls, [
+              s("div", is, [
                 u(o, {
                   label: "Remember me",
                   name: "remember",
@@ -1148,22 +1162,22 @@ const zs = /* @__PURE__ */ Kt(Vt, [["render", $t]]), Ys = I("sparkApp", () => {
                   _: 1
                 }, 8, ["to"])
               ]),
-              v.value ? (r(), c("div", is, M(v.value), 1)) : x("", !0),
-              u(l(V), {
+              v.value ? (r(), i("div", cs, h(v.value), 1)) : x("", !0),
+              u(c(V), {
                 type: "submit",
                 size: "xl",
-                disabled: d.value,
+                disabled: f.value,
                 "button-class": "w-full"
               }, {
                 default: B(() => [
-                  d.value ? (r(), c("span", As, "Signing in...")) : (r(), c("span", cs, "Sign in"))
+                  f.value ? (r(), i("span", ms, "Signing in...")) : (r(), i("span", As, "Sign in"))
                 ]),
                 _: 1
               }, 8, ["disabled"])
             ]),
             _: 1
           }),
-          n.signupRoute ? (r(), c("div", ms, [
+          n.signupRoute ? (r(), i("div", ds, [
             t[4] || (t[4] = Q(" Don't have an account? ", -1)),
             u(p, {
               to: n.signupRoute,
@@ -1182,24 +1196,24 @@ const zs = /* @__PURE__ */ Kt(Vt, [["render", $t]]), Ys = I("sparkApp", () => {
 };
 export {
   b as Icons,
-  bs as SparkAlert,
+  ws as SparkAlert,
   st as SparkAppSelector,
   Bt as SparkBrandSelector,
   V as SparkButton,
-  ws as SparkButtonGroup,
+  hs as SparkButtonGroup,
   Ms as SparkCard,
-  Cs as SparkDefaultContainer,
-  Ps as SparkLoginView,
+  zs as SparkDefaultContainer,
+  Hs as SparkLoginView,
   Dt as SparkModalContainer,
-  hs as SparkModalDialog,
+  Cs as SparkModalDialog,
   W as SparkOverlay,
-  zs as SparkPublicContainer,
-  ys as addSparkIcons,
-  Bs as setupFontAwesome,
+  Ys as SparkPublicContainer,
+  Bs as addIcons,
+  bs as setupFontAwesome,
   H as sparkModalService,
-  C as sparkOverlayService,
-  Ys as useSparkAppStore,
+  z as sparkOverlayService,
+  Ds as useSparkAppStore,
   K as useSparkBrandFilterStore,
-  Ds as useSparkNavStore,
+  Ps as useSparkNavStore,
   O as useSparkOverlay
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/containers/SparkDefaultContainer.vue

@@ -8,12 +8,12 @@
               <li class="flex items-center pb-8">
                 <a
                   class="grid w-[40px] h-[40px] place-items-center rounded-md bg-primary-600 text-white text-[13px] cursor-pointer"
-                  @click.prevent="mainNavStore.goto('dashboard')"
+                  @click.prevent="mainNavStore.goto(appStore.state.homeRoute)"
                 >
                   <font-awesome-icon :icon="Icons[appStore.state.icon]" class="size-5" />
                 </a>
                 <a
-                  @click.prevent="mainNavStore.goto('dashboard')"
+                  @click.prevent="mainNavStore.goto(appStore.state.homeRoute)"
                   v-if="!mainNavStore.state.collapsed"
                   class="font-medium text-gray-800 ml-[10px] cursor-pointer"
                 >
@@ -81,6 +81,7 @@
             </ul>
           </li>
           <li class="mt-auto">
+            <slot name="sidebar-footer" />
             <a
               class="font-medium grid place-content-center gap-x-3 rounded-md h-10 p-2.5 text-gray-800 text-[13px] hover:bg-gray-100 transition-all duration-300 ease-in-out"
               href="#"
@@ -102,31 +103,44 @@
   <div :class="contentClass" class="h-full transition-all flex flex-col">
     <div class="p-[10px] flex-shrink-0">
       <div class="flex flex-1 items-center gap-x-6">
-        <div class="relative flex flex-1 items-center justify-between">
-          <div class="cursor-pointer">
-            <font-awesome-icon
-              :icon="Icons.farBarsSort"
-              class="size-5"
-              @click="mainNavStore.toggleHidden()"
-            />
-          </div>
+        <div class="relative flex flex-1 items-center gap-4">
+          <slot name="header-left">
+            <div class="cursor-pointer">
+              <font-awesome-icon
+                :icon="Icons.farBarsSort"
+                class="size-5"
+                @click="mainNavStore.toggleHidden()"
+              />
+            </div>
+          </slot>
 
-          <div class="cursor-pointer h-9 flex items-center" @click="toggleBrandSelector">
-            <img
-              v-if="sparkBrandFilterStore.currentBrand"
-              :src="sparkBrandFilterStore.currentBrand.logo"
-              alt=""
-              class="h-[30px] w-auto"
-            />
-          </div>
+          <slot name="header-center">
+            <div
+              v-if="appStore.state.showBrandSelector"
+              class="absolute left-1/2 -translate-x-1/2 cursor-pointer h-9 flex items-center"
+              @click="toggleBrandSelector"
+            >
+              <img
+                v-if="sparkBrandFilterStore.currentBrand"
+                :src="sparkBrandFilterStore.currentBrand.logo"
+                alt=""
+                class="h-[30px] w-auto"
+              />
+            </div>
+          </slot>
 
-          <button
-            class="rounded-sm bg-white w-[42px] h-[42px] ring-1 ring-inset ring-gray-300"
-            type="button"
-            @click="toggleAppSelector"
-          >
-            <font-awesome-icon :icon="Icons.farGripDotsVertical" class="size-4 text-gray-400" />
-          </button>
+          <div class="ml-auto">
+            <slot name="header-right">
+              <button
+                v-if="appStore.state.showAppSelector"
+                class="rounded-sm bg-white w-[42px] h-[42px] ring-1 ring-inset ring-gray-300"
+                type="button"
+                @click="toggleAppSelector"
+              >
+                <font-awesome-icon :icon="Icons.farGripDotsVertical" class="size-4 text-gray-400" />
+              </button>
+            </slot>
+          </div>
         </div>
       </div>
     </div>

package/src/plugins/fontawesome.js

@@ -75,8 +75,9 @@ export const Icons = {
   farXmark: faXmark,
 }
 
-export function addSparkIcons() {
-  library.add(...Object.values(Icons))
+export function addIcons(newIcons) {
+  Object.assign(Icons, newIcons)
+  library.add(...Object.values(newIcons))
 }
 
 export function setupFontAwesome(app) {

package/src/plugins/index.js

@@ -1 +1 @@
-export { Icons, addSparkIcons, setupFontAwesome } from './fontawesome.js'
+export { Icons, addIcons, setupFontAwesome } from './fontawesome.js'

package/src/stores/app.js

@@ -5,11 +5,17 @@ export const useSparkAppStore = defineStore('sparkApp', () => {
   const state = reactive({
     app: '',
     icon: '',
+    homeRoute: 'dashboard',
+    showBrandSelector: true,
+    showAppSelector: true,
   })
 
   const initialize = (config = {}) => {
     state.app = config.app || ''
     state.icon = config.icon || ''
+    state.homeRoute = config.homeRoute ?? 'dashboard'
+    state.showBrandSelector = config.showBrandSelector ?? true
+    state.showAppSelector = config.showAppSelector ?? true
   }
 
   return {