@autoafleveren/ui 0.1.2 → 0.1.4

package/dist/ui.js

@@ -1,57 +1,58 @@
-import { defineComponent as h, openBlock as o, createElementBlock as r, normalizeClass as _, unref as n, createElementVNode as s, createBlock as y, renderSlot as v, withCtx as f, createCommentVNode as b, ref as p, shallowRef as j, isRef as S, computed as L, resolveDynamicComponent as x, createTextVNode as N, toDisplayString as O, createVNode as m, Fragment as k, renderList as $ } from "vue";
-import { TransitionRoot as P, Dialog as T, TransitionChild as E } from "@headlessui/vue";
-const R = {
+import { defineComponent as p, openBlock as a, createElementBlock as c, normalizeClass as b, unref as n, createElementVNode as l, createBlock as y, renderSlot as d, withCtx as v, createCommentVNode as x, resolveDynamicComponent as $, ref as h, shallowRef as E, isRef as D, computed as I, createTextVNode as z, toDisplayString as C, Fragment as L, renderList as B, createVNode as m } from "vue";
+import { TransitionRoot as H, Dialog as R, TransitionChild as V } from "@headlessui/vue";
+const F = {
+  "extra-small": ["h-4", "w-4"],
   small: ["h-5", "w-5"],
   medium: ["h-7", "w-7"],
   large: ["h-10", "w-10"]
-}, V = /* @__PURE__ */ s("circle", {
+}, q = /* @__PURE__ */ l("circle", {
   stroke: "currentColor",
   class: "opacity-25",
   "stroke-width": "4",
   cx: "12",
   cy: "12",
   r: "10"
-}, null, -1), D = /* @__PURE__ */ s("path", {
+}, null, -1), G = /* @__PURE__ */ l("path", {
   class: "opacity-75",
   fill: "currentColor",
   d: `M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962
         7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z`
-}, null, -1), H = [
-  V,
-  D
-], F = /* @__PURE__ */ h({
+}, null, -1), J = [
+  q,
+  G
+], S = /* @__PURE__ */ p({
   __name: "AppLoader",
   props: {
     size: { default: "medium" }
   },
-  setup(e) {
-    return (t, a) => (o(), r("svg", {
-      class: _([n(R)[e.size], "animate-spin"]),
+  setup(t) {
+    return (e, s) => (a(), c("svg", {
+      class: b([n(F)[t.size], "animate-spin"]),
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "none"
-    }, H, 2));
+    }, J, 2));
   }
-}), q = { class: "app-button__icon h-4" }, G = /* @__PURE__ */ h({
+}), K = { class: "app-button__icon h-4" }, Q = /* @__PURE__ */ p({
   __name: "ButtonIconSlot",
   props: {
     loading: { type: Boolean }
   },
-  setup(e) {
-    return (t, a) => (o(), r("span", q, [
-      e.loading ? (o(), y(F, {
+  setup(t) {
+    return (e, s) => (a(), c("span", K, [
+      t.loading ? (a(), y(S, {
         key: 0,
         class: "w-4"
-      })) : v(t.$slots, "default", { key: 1 }, void 0, !0)
+      })) : d(e.$slots, "default", { key: 1 }, void 0, !0)
     ]));
   }
 });
-const J = (e, t) => {
-  const a = e.__vccOpts || e;
-  for (const [l, i] of t)
-    a[l] = i;
-  return a;
-}, A = /* @__PURE__ */ J(G, [["__scopeId", "data-v-04d5f165"]]), K = {
+const N = (t, e) => {
+  const s = t.__vccOpts || t;
+  for (const [o, r] of e)
+    s[o] = r;
+  return s;
+}, j = /* @__PURE__ */ N(Q, [["__scopeId", "data-v-04d5f165"]]), U = {
   plain: [
     "text-primary",
     "border-0"
@@ -69,11 +70,11 @@ const J = (e, t) => {
     "enabled:hover:text-white",
     "enabled:hover:bg-primary"
   ]
-}, Q = {
+}, W = {
   small: ["px-5", "py-2"],
   medium: ["px-5", "py-3"],
   large: ["px-5", "py-4"]
-}, U = ["type", "disabled"], ve = /* @__PURE__ */ h({
+}, X = ["type", "disabled"], Se = /* @__PURE__ */ p({
   __name: "AppButton",
   props: {
     size: { default: "medium" },
@@ -82,116 +83,222 @@ const J = (e, t) => {
     disabled: { type: Boolean, default: !1 },
     loading: { type: Boolean, default: !1 }
   },
-  setup(e) {
-    return (t, a) => (o(), r("button", {
-      type: e.type,
-      disabled: e.disabled || e.loading,
-      class: _([[
-        ...n(K)[e.colorType],
-        ...n(Q)[e.size]
+  setup(t) {
+    return (e, s) => (a(), c("button", {
+      type: t.type,
+      disabled: t.disabled || t.loading,
+      class: b([[
+        ...n(U)[t.colorType],
+        ...n(W)[t.size]
       ], "app-button inline-flex items-center whitespace-nowrap rounded-lg border text-sm font-semibold transition-colors focus:outline-none disabled:cursor-not-allowed disabled:select-none disabled:opacity-50"])
     }, [
-      t.$slots.leadingIcon || e.loading ? (o(), y(A, {
+      e.$slots.leadingIcon || t.loading ? (a(), y(j, {
         key: 0,
-        loading: e.loading,
+        loading: t.loading,
         class: "mr-3",
         "data-test-leading-icon": ""
       }, {
-        default: f(() => [
-          v(t.$slots, "leadingIcon")
+        default: v(() => [
+          d(e.$slots, "leadingIcon")
         ]),
         _: 3
-      }, 8, ["loading"])) : b("", !0),
-      v(t.$slots, "default"),
-      t.$slots.trailingIcon ? (o(), y(A, {
+      }, 8, ["loading"])) : x("", !0),
+      d(e.$slots, "default"),
+      e.$slots.trailingIcon ? (a(), y(j, {
         key: 1,
         class: "ml-3",
         "data-test-trailing-icon": ""
       }, {
-        default: f(() => [
-          v(t.$slots, "trailingIcon")
+        default: v(() => [
+          d(e.$slots, "trailingIcon")
         ]),
         _: 3
-      })) : b("", !0)
-    ], 10, U));
+      })) : x("", !0)
+    ], 10, X));
   }
-}), d = {
-  navigationItems: p([]),
-  mainMenuOpen: p(!1),
-  mobileMenuOpen: p(!1),
-  navigationComponent: j("a"),
-  logo: p(null),
-  contactRoute: p()
+}), Y = {
+  key: 0,
+  class: "app-card__icon absolute right-5 top-5 h-5 text-primary"
+}, Z = /* @__PURE__ */ p({
+  __name: "CardIconSlot",
+  props: {
+    icon: null
+  },
+  setup(t) {
+    const e = t;
+    return (s, o) => s.$slots.default || t.icon ? (a(), c("div", Y, [
+      d(s.$slots, "default", {}, () => [
+        e.icon ? (a(), y($(typeof e.icon == "string" ? "span" : e.icon), {
+          key: 0,
+          "data-test-icon-component": "",
+          innerHTML: e.icon
+        }, null, 8, ["innerHTML"])) : x("", !0)
+      ], !0)
+    ])) : x("", !0);
+  }
+});
+const ee = /* @__PURE__ */ N(Z, [["__scopeId", "data-v-14ba04ea"]]), _ = {
+  navigationItems: h([]),
+  mainMenuOpen: h(!1),
+  mobileMenuOpen: h(!1),
+  navigationComponent: E("a"),
+  logo: h(null),
+  contactRoute: h()
 };
-function M() {
-  function e(u) {
-    d.navigationItems.value = S(u) ? u == null ? void 0 : u.value : u;
+function A() {
+  function t(i) {
+    _.navigationItems.value = D(i) ? i == null ? void 0 : i.value : i;
   }
-  function t(u) {
-    d.navigationComponent.value = u;
+  function e(i) {
+    _.navigationComponent.value = i;
   }
-  function a(u) {
-    d.logo.value = u;
+  function s(i) {
+    _.logo.value = i;
   }
-  function l() {
-    d.mainMenuOpen.value = !0;
+  function o() {
+    _.mainMenuOpen.value = !0;
   }
-  function i() {
-    d.mainMenuOpen.value = !1;
+  function r() {
+    _.mainMenuOpen.value = !1;
   }
-  function c() {
-    d.mainMenuOpen.value = !d.mainMenuOpen.value;
+  function u() {
+    _.mainMenuOpen.value = !_.mainMenuOpen.value;
   }
-  function C() {
-    d.mobileMenuOpen.value = !0;
+  function w() {
+    _.mobileMenuOpen.value = !0;
   }
-  function B() {
-    d.mobileMenuOpen.value = !1;
+  function g() {
+    _.mobileMenuOpen.value = !1;
   }
-  function w() {
-    d.mobileMenuOpen.value = !d.mobileMenuOpen.value;
+  function f() {
+    _.mobileMenuOpen.value = !_.mobileMenuOpen.value;
   }
   return {
-    ...d,
-    setNavigationItems: e,
-    setNavigationComponent: t,
-    setLogo: a,
-    openMainMenu: l,
-    closeMainMenu: i,
-    toggleMainMenu: c,
-    openMobileMenu: C,
-    closeMobileMenu: B,
-    toggleMobileMenu: w
+    ..._,
+    setNavigationItems: t,
+    setNavigationComponent: e,
+    setLogo: s,
+    openMainMenu: o,
+    closeMainMenu: r,
+    toggleMainMenu: u,
+    openMobileMenu: w,
+    closeMobileMenu: g,
+    toggleMobileMenu: f
   };
 }
-const g = {
-  layoutImage: p(null),
+const k = {
+  layoutImage: h(null),
   colors: {
-    primaryColor: p(null),
-    primaryColorActive: p(null),
-    secondaryColor: p(null),
-    secondaryColorActive: p(null)
+    primaryColor: h(null),
+    primaryColorActive: h(null),
+    secondaryColor: h(null),
+    secondaryColorActive: h(null)
   }
 };
-function W() {
-  function e(l) {
-    g.layoutImage.value = l;
+function te() {
+  function t(o) {
+    k.layoutImage.value = o;
   }
-  function t(l, i) {
-    g.colors.primaryColor.value = l, g.colors.primaryColorActive.value = i, document.documentElement.style.setProperty("--color-primary", l), document.documentElement.style.setProperty("--color-primary-active", i);
+  function e(o, r) {
+    k.colors.primaryColor.value = o, k.colors.primaryColorActive.value = r, document.documentElement.style.setProperty("--color-primary", o), document.documentElement.style.setProperty("--color-primary-active", r);
   }
-  function a(l, i) {
-    g.colors.secondaryColor.value = l, g.colors.secondaryColorActive.value = i, document.documentElement.style.setProperty("--color-secondary", l), document.documentElement.style.setProperty("--color-secondary-active", i);
+  function s(o, r) {
+    k.colors.secondaryColor.value = o, k.colors.secondaryColorActive.value = r, document.documentElement.style.setProperty("--color-secondary", o), document.documentElement.style.setProperty("--color-secondary-active", r);
   }
   return {
-    ...g,
-    setLayoutImage: e,
-    setPrimaryColors: t,
-    setSecondaryColors: a
+    ...k,
+    setLayoutImage: t,
+    setPrimaryColors: e,
+    setSecondaryColors: s
   };
 }
-function X(e, t) {
-  return o(), r("svg", {
+const ne = /* @__PURE__ */ p({
+  __name: "CardAction",
+  props: {
+    item: null
+  },
+  setup(t) {
+    const e = t, { navigationComponent: s } = A(), o = h(!1), r = I(() => o.value || typeof e.item.icon != "string"), u = I(() => o.value ? S : e.item.icon);
+    async function w(g) {
+      var f, i, M;
+      (f = e.item) != null && f.onClick && (g.preventDefault(), o.value = !0, await Promise.resolve((M = (i = e.item) == null ? void 0 : i.onClick) == null ? void 0 : M.call(i)), o.value = !1);
+    }
+    return (g, f) => (a(), y($(n(s)), {
+      to: t.item.to,
+      href: t.item.href,
+      class: "app-card__action ml-auto flex justify-center text-zinc-600",
+      onClick: w
+    }, {
+      default: v(() => [
+        (a(), y($(n(r) ? n(u) : "span"), {
+          class: b([{ "!h-6": !n(r) }, "h-4 w-4"]),
+          size: o.value ? "extra-small" : void 0,
+          "data-test-icon": ""
+        }, {
+          default: v(() => [
+            z(C(n(r) ? "" : t.item.icon), 1)
+          ]),
+          _: 1
+        }, 8, ["class", "size"])),
+        l("span", {
+          class: b([{ "pl-4": t.item.icon }, "text-sm"]),
+          "data-test-name": ""
+        }, C(t.item.name), 3)
+      ]),
+      _: 1
+    }, 8, ["to", "href"]));
+  }
+});
+const oe = /* @__PURE__ */ N(ne, [["__scopeId", "data-v-0e561723"]]), ae = {
+  key: 1,
+  class: "text-2xl font-bold text-zinc-900",
+  "data-test-title": ""
+}, se = {
+  class: "mt-2",
+  "data-test-content": ""
+}, Ne = /* @__PURE__ */ p({
+  __name: "AppCard",
+  props: {
+    bordered: { type: Boolean, default: !1 },
+    title: { default: void 0 },
+    icon: { default: void 0 },
+    actions: { default: void 0 }
+  },
+  setup(t) {
+    return (e, s) => (a(), c("div", {
+      class: b([{ "before:hidden": !t.bordered }, "relative w-full overflow-hidden rounded-xl bg-white p-5 text-sm text-zinc-600 shadow shadow-zinc-200 before:absolute before:left-0 before:top-0 before:h-full before:w-1 before:bg-primary"])
+    }, [
+      e.$slots.icon || t.icon ? (a(), y(ee, {
+        key: 0,
+        icon: t.icon,
+        "data-test-icon": ""
+      }, {
+        default: v(() => [
+          d(e.$slots, "icon")
+        ]),
+        _: 3
+      }, 8, ["icon"])) : x("", !0),
+      t.title || e.$slots.title ? (a(), c("h3", ae, [
+        d(e.$slots, "title", {}, () => [
+          z(C(t.title), 1)
+        ])
+      ])) : x("", !0),
+      l("div", se, [
+        d(e.$slots, "default")
+      ]),
+      d(e.$slots, "actions", {}, () => [
+        (a(!0), c(L, null, B(t.actions, (o) => (a(), c("div", {
+          key: o.name,
+          class: "flex w-full"
+        }, [
+          m(oe, { item: o }, null, 8, ["item"])
+        ]))), 128))
+      ])
+    ], 2));
+  }
+});
+function le(t, e) {
+  return a(), c("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -199,15 +306,15 @@ function X(e, t) {
     stroke: "currentColor",
     "aria-hidden": "true"
   }, [
-    s("path", {
+    l("path", {
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
       d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
     })
   ]);
 }
-function Y(e, t) {
-  return o(), r("svg", {
+function ie(t, e) {
+  return a(), c("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -215,115 +322,120 @@ function Y(e, t) {
     stroke: "currentColor",
     "aria-hidden": "true"
   }, [
-    s("path", {
+    l("path", {
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
       d: "M6 18L18 6M6 6l12 12"
     })
   ]);
 }
-const Z = {
+const re = {
   class: "pl-7 text-lg font-semibold text-zinc-900 md:hidden",
   "data-test-name": ""
-}, I = /* @__PURE__ */ h({
+}, O = /* @__PURE__ */ p({
   __name: "NavigationItem",
   props: {
     item: null
   },
-  setup(e) {
-    const t = e, { navigationComponent: a } = M(), l = L(() => typeof t.item.icon != "string");
-    return (i, c) => (o(), y(x(n(a)), {
-      to: e.item.to,
-      href: e.item.href,
-      class: _([{
-        "md:bg-primary": e.item.active ?? !1,
-        "!rounded-full": e.item.rounded ?? !1,
-        "mb-2": !e.item.bottom,
-        "mt-2": e.item.bottom ?? !1
+  setup(t) {
+    const e = t, { navigationComponent: s } = A(), o = h(!1), r = I(() => o.value || typeof e.item.icon != "string"), u = I(() => o.value ? S : e.item.icon);
+    async function w(g) {
+      var f, i, M;
+      (f = e.item) != null && f.onClick && (g.preventDefault(), o.value = !0, await Promise.resolve((M = (i = e.item) == null ? void 0 : i.onClick) == null ? void 0 : M.call(i)), o.value = !1);
+    }
+    return (g, f) => (a(), y($(n(s)), {
+      to: t.item.to,
+      href: t.item.href,
+      class: b([{
+        "md:bg-primary": t.item.active ?? !1,
+        "!rounded-full": t.item.rounded ?? !1,
+        "mb-2": !t.item.bottom,
+        "mt-2": t.item.bottom ?? !1
       }, "flex h-10 w-full cursor-pointer items-center rounded-lg text-center transition-colors md:w-10 md:justify-center md:hover:bg-primary-active"]),
-      onClick: e.item.onClick
+      onClick: w
     }, {
-      default: f(() => [
-        (o(), y(x(n(l) ? e.item.icon : "span"), {
-          class: _([{ "!h-6": !n(l) }, "h-4 w-4 text-zinc-900 md:text-white"]),
+      default: v(() => [
+        (a(), y($(n(r) ? n(u) : "span"), {
+          class: b([{ "!h-6": !n(r) }, "h-4 w-4 text-zinc-900 md:text-white"]),
+          size: o.value ? "extra-small" : void 0,
           "data-test-icon": ""
         }, {
-          default: f(() => [
-            N(O(e.item.icon), 1)
+          default: v(() => [
+            z(C(n(r) ? "" : t.item.icon), 1)
           ]),
           _: 1
-        }, 8, ["class"])),
-        s("span", Z, O(e.item.name), 1)
+        }, 8, ["class", "size"])),
+        l("span", re, C(t.item.name), 1)
       ]),
       _: 1
-    }, 8, ["to", "href", "class", "onClick"]));
+    }, 8, ["to", "href", "class"]));
   }
-}), z = /* @__PURE__ */ h({
+}), P = /* @__PURE__ */ p({
   __name: "SupportItem",
-  setup(e) {
-    const { contactRoute: t, navigationComponent: a } = M();
-    return (l, i) => n(t) ? (o(), y(x(n(a)), {
+  setup(t) {
+    const { contactRoute: e, navigationComponent: s } = A();
+    return (o, r) => n(e) ? (a(), y($(n(s)), {
       key: 0,
-      to: n(a) !== "a" ? n(t) : void 0,
-      href: n(a) ? n(t) : void 0,
-      class: "fixed bottom-5 right-5 z-50 flex h-10 w-10 justify-center rounded-full bg-primary py-2 text-white transition-colors hover:bg-primary-active",
+      to: n(s) !== "a" ? n(e) : void 0,
+      href: n(s) ? n(e) : void 0,
+      class: "fixed bottom-5 right-5 z-50 mt-2 flex h-10 w-10 justify-center rounded-full bg-primary py-2 text-white transition-colors hover:bg-primary-active",
       "data-test-help-icon": ""
     }, {
-      default: f(() => [
-        N(" ? ")
+      default: v(() => [
+        z(" ? ")
       ]),
       _: 1
-    }, 8, ["to", "href"])) : b("", !0);
+    }, 8, ["to", "href"])) : x("", !0);
   }
-}), ee = { class: "flex items-center justify-between bg-zinc-50 px-2 py-4 text-black md:hidden" }, te = ["innerHTML"], ne = /* @__PURE__ */ s("div", { class: "w-1/3" }, null, -1), oe = {
+}), ce = { class: "flex items-center justify-between bg-zinc-50 px-2 py-4 text-black md:hidden" }, ue = ["innerHTML"], de = /* @__PURE__ */ l("div", { class: "w-1/3" }, null, -1), me = {
   class: "relative flex h-full w-full flex-1 flex-col bg-white focus:outline-none",
   "data-test-navigation-wrapper": ""
-}, ae = {
+}, pe = {
   class: "h-0 flex-1 overflow-y-auto p-4",
   "data-test-navigation-links-wrapper": ""
-}, le = {
+}, fe = {
   "aria-label": "MainMenu",
   class: "mt-5"
-}, se = { class: "mb-auto" }, ie = /* @__PURE__ */ h({
+}, _e = { class: "mb-auto" }, he = /* @__PURE__ */ p({
   __name: "Mobile",
-  setup(e) {
+  setup(t) {
     const {
-      logo: t,
-      navigationItems: a,
-      mobileMenuOpen: l,
-      toggleMobileMenu: i,
-      closeMobileMenu: c
-    } = M(), C = L(() => l.value ? Y : X);
-    return (B, w) => (o(), r("div", ee, [
-      s("div", {
+      logo: e,
+      navigationItems: s,
+      mobileMenuOpen: o,
+      toggleMobileMenu: r,
+      closeMobileMenu: u
+    } = A(), w = I(() => o.value ? ie : le);
+    return (g, f) => (a(), c("div", ce, [
+      l("div", {
         class: "inline-flex w-1/3 cursor-pointer items-center justify-start rounded-sm !p-2 hover:text-primary focus:outline-none",
         "data-test-menu-icon-wrapper": "",
-        onClick: w[0] || (w[0] = //@ts-ignore
-        (...u) => n(i) && n(i)(...u))
+        onClick: f[0] || (f[0] = //@ts-ignore
+        (...i) => n(r) && n(r)(...i))
       }, [
-        (o(), y(x(n(C)), {
+        (a(), y($(n(w)), {
           class: "block h-6 w-6 text-black",
           "aria-hidden": "true"
         }))
       ]),
-      s("div", {
+      l("div", {
         class: "w-1/3",
         "data-test-logo-wrapper": "",
-        innerHTML: n(t)
-      }, null, 8, te),
-      ne,
-      m(n(P), {
-        show: n(l),
+        innerHTML: n(e)
+      }, null, 8, ue),
+      de,
+      m(n(H), {
+        show: n(o),
         as: "template"
       }, {
-        default: f(() => [
-          m(n(T), {
+        default: v(() => [
+          m(n(R), {
             as: "div",
             class: "fixed inset-0 top-20 z-50 flex -translate-y-2 lg:hidden",
-            onClose: n(c)
+            onClose: n(u)
           }, {
-            default: f(() => [
-              m(n(E), {
+            default: v(() => [
+              m(n(V), {
                 as: "template",
                 enter: "transition ease-in-out duration-300 transform",
                 "enter-from": "translate-y-full",
@@ -332,20 +444,20 @@ const Z = {
                 "leave-from": "translate-y-0",
                 "leave-to": "translate-y-full"
               }, {
-                default: f(() => [
-                  s("div", oe, [
-                    s("div", ae, [
-                      s("nav", le, [
-                        s("ul", se, [
-                          (o(!0), r(k, null, $(n(a), (u) => (o(), r("li", {
-                            key: u.name,
+                default: v(() => [
+                  l("div", me, [
+                    l("div", pe, [
+                      l("nav", fe, [
+                        l("ul", _e, [
+                          (a(!0), c(L, null, B(n(s), (i) => (a(), c("li", {
+                            key: i.name,
                             "data-test-navigation-item": ""
                           }, [
-                            m(I, { item: u }, null, 8, ["item"])
+                            m(O, { item: i }, null, 8, ["item"])
                           ]))), 128))
                         ])
                       ]),
-                      m(z)
+                      m(P)
                     ])
                   ])
                 ]),
@@ -357,70 +469,117 @@ const Z = {
         ]),
         _: 1
       }, 8, ["show"]),
-      m(z)
+      m(P)
     ]));
   }
-}), re = { class: "mx-auto mb-auto" }, ce = { class: "mx-auto mt-auto" }, ue = /* @__PURE__ */ h({
+}), ve = { class: "mx-auto mb-auto" }, ye = { class: "mx-auto mt-auto" }, T = /* @__PURE__ */ p({
   __name: "AppNavigationMenu",
-  setup(e) {
-    const { navigationItems: t, mainMenuOpen: a } = M();
-    return (l, i) => (o(), r("div", null, [
-      s("aside", {
-        class: _([{ "px-3 md:!w-20": n(a) }, "sticky top-0 hidden h-screen w-0 flex-col justify-center overflow-hidden py-5 transition-all duration-500 md:flex"]),
+  setup(t) {
+    const { navigationItems: e, mainMenuOpen: s } = A();
+    return (o, r) => (a(), c("div", null, [
+      l("aside", {
+        class: b([{ "px-3 md:!w-20": n(s) }, "sticky top-0 hidden h-screen w-0 flex-col justify-center overflow-hidden py-5 transition-all duration-500 md:flex"]),
         "data-test-main-menu": ""
       }, [
-        s("ul", re, [
-          (o(!0), r(k, null, $(n(t).filter((c) => c.bottom !== !0), (c) => (o(), r("li", {
-            key: c.name,
+        l("ul", ve, [
+          (a(!0), c(L, null, B(n(e).filter((u) => u.bottom !== !0), (u) => (a(), c("li", {
+            key: u.name,
             "data-test-top-navigation-item": ""
           }, [
-            m(I, { item: c }, null, 8, ["item"])
+            m(O, { item: u }, null, 8, ["item"])
           ]))), 128))
         ]),
-        s("ul", ce, [
-          (o(!0), r(k, null, $(n(t).filter((c) => c.bottom), (c) => (o(), r("li", {
-            key: c.name,
+        l("ul", ye, [
+          (a(!0), c(L, null, B(n(e).filter((u) => u.bottom), (u) => (a(), c("li", {
+            key: u.name,
             "data-test-bottom-navigation-item": ""
           }, [
-            m(I, { item: c }, null, 8, ["item"])
+            m(O, { item: u }, null, 8, ["item"])
           ]))), 128)),
-          s("li", null, [
-            m(z, { class: "!static" })
+          l("li", null, [
+            m(P, { class: "!static" })
           ])
         ])
       ], 2),
-      m(ie)
+      m(he)
     ]));
   }
-}), de = { class: "flex min-h-screen flex-col md:flex-row md:bg-secondary" }, me = { class: "flex h-full grow items-center justify-center bg-white px-10 transition-all md:h-auto md:w-1/2 md:grow-0 md:rounded-l-2xl md:px-24" }, pe = { class: "mx-auto md:max-w-lg" }, fe = {
+}), ge = { class: "flex text-sm font-bold" }, be = {
+  class: "rounded-l-lg bg-indigo-900 px-2 py-1.5 text-white",
+  "data-test-country-code": ""
+}, xe = {
+  class: "rounded-r-lg bg-yellow-400 px-2 py-1.5 uppercase text-zinc-900",
+  "data-test-license-plate": ""
+}, je = /* @__PURE__ */ p({
+  __name: "AppLicensePlate",
+  props: {
+    license: { default: void 0 },
+    country: { default: "NL" }
+  },
+  setup(t) {
+    return (e, s) => (a(), c("div", ge, [
+      l("span", be, C(t.country), 1),
+      l("span", xe, [
+        d(e.$slots, "default", {}, () => [
+          z(C(t.license), 1)
+        ])
+      ])
+    ]));
+  }
+}), we = { class: "flex min-h-screen flex-col md:flex-row md:bg-secondary" }, $e = { class: "flex h-full grow items-center justify-center bg-white px-10 transition-all md:h-auto md:w-1/2 md:grow-0 md:rounded-l-2xl md:px-24" }, Ce = { class: "mx-auto md:max-w-lg" }, ke = {
   class: "hidden w-1/2 md:block",
   "data-test-layout-image-wrapper": ""
-}, he = ["src"], _e = /* @__PURE__ */ h({
+}, Me = ["src"], Te = /* @__PURE__ */ p({
   __name: "Auth",
-  setup(e) {
-    const { layoutImage: t } = W();
-    return (a, l) => (o(), r("div", de, [
-      m(n(ue)),
-      s("main", me, [
-        s("div", pe, [
-          v(a.$slots, "default")
+  setup(t) {
+    const { layoutImage: e } = te();
+    return (s, o) => (a(), c("div", we, [
+      m(n(T)),
+      l("main", $e, [
+        l("div", Ce, [
+          d(s.$slots, "default")
         ])
       ]),
-      s("div", fe, [
-        n(t) ? (o(), r("img", {
+      l("div", ke, [
+        n(e) ? (a(), c("img", {
           key: 0,
-          src: n(t),
+          src: n(e),
           class: "h-screen w-full object-fill"
-        }, null, 8, he)) : b("", !0)
+        }, null, 8, Me)) : x("", !0)
+      ])
+    ]));
+  }
+}), Ie = { class: "flex min-h-screen flex-col md:flex-row md:bg-secondary" }, ze = /* @__PURE__ */ l("div", { id: "top order-2" }, null, -1), Ae = { class: "order-4 flex h-full grow bg-zinc-100 px-2 py-8 transition-all md:order-3 md:h-auto md:rounded-l-2xl md:px-6 md:pr-12" }, Le = { class: "w-full" }, Be = {
+  id: "sidebar-wrapper",
+  class: "order-3 w-141 max-w-full shrink-0 grow-0 rounded-l-2xl bg-white px-4 py-8 md:sticky md:top-0 md:order-4 md:-ml-5 md:max-h-screen",
+  "data-test-layout-sidebar-wrapper": ""
+}, Ee = /* @__PURE__ */ p({
+  __name: "Base",
+  setup(t) {
+    return (e, s) => (a(), c("div", Ie, [
+      m(n(T), { class: "order-1" }),
+      d(e.$slots, "top", {}, () => [
+        ze
+      ]),
+      l("main", Ae, [
+        l("div", Le, [
+          d(e.$slots, "default")
+        ])
+      ]),
+      l("div", Be, [
+        d(e.$slots, "sidebar")
       ])
     ]));
   }
 });
 export {
-  ve as AppButton,
-  F as AppLoader,
-  ue as AppNavigationMenu,
-  _e as AuthLayout,
-  W as useLayout,
-  M as useNavigation
+  Se as AppButton,
+  Ne as AppCard,
+  je as AppLicensePlate,
+  S as AppLoader,
+  T as AppNavigationMenu,
+  Te as AuthLayout,
+  Ee as BaseLayout,
+  te as useLayout,
+  A as useNavigation
 };