@autoafleveren/ui 0.1.2 → 0.1.3

package/dist/config/tailwind/config.cjs

@@ -76,6 +76,11 @@ module.exports = {
       },
     },
     screens,
+    extend: {
+      width: {
+        141: '34.375rem',
+      },
+    },
   },
   plugins: [],
 }

package/dist/types/layouts/Base/Base.vue.d.ts

@@ -0,0 +1,10 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>, {
+    default: (_: {}) => any;
+    sidebar: (_: {}) => any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/layouts/index.d.ts

@@ -1,2 +1,3 @@
 import AuthLayout from './Auth/Auth.vue';
-export { AuthLayout, };
+import BaseLayout from './Base/Base.vue';
+export { AuthLayout, BaseLayout, };

package/dist/ui-library.css

@@ -1,3 +1,3 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
-/*! tailwindcss v3.3.1 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:Inter;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}:root{--color-primary:#e25c2a;--color-primary-active:#c2410c;--color-secondary:#1e243b;--color-secondary-active:#1e243b}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.visible{visibility:visible}.\!static{position:static!important}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.bottom-5{bottom:1.25rem}.right-5{right:1.25rem}.top-0{top:0}.top-20{top:5rem}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:.5rem}.mb-auto{margin-bottom:auto}.ml-3{margin-left:.75rem}.mr-3{margin-right:.75rem}.mt-2{margin-top:.5rem}.mt-5{margin-top:1.25rem}.mt-auto{margin-top:auto}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.\!h-6{height:1.5rem!important}.h-0{height:0}.h-10{height:2.5rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-full{height:100%}.h-screen{height:100vh}.min-h-screen{min-height:100vh}.\!w-20{width:5rem!important}.w-0{width:0}.w-1\/2{width:50%}.w-1\/3{width:33.333333%}.w-10{width:2.5rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.grow{flex-grow:1}.-translate-y-2{--tw-translate-y:-0.5rem}.-translate-y-2,.translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y:0px}.translate-y-full{--tw-translate-y:100%}.transform,.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-3{gap:.75rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.\!rounded-full{border-radius:9999px!important}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-0{border-width:0}.border-primary{border-color:var(--color-primary)}.border-transparent{border-color:#0000}.bg-primary{background-color:var(--color-primary)}.bg-transparent{background-color:initial}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-zinc-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity))}.object-fill{-o-object-fit:fill;object-fit:fill}.\!p-2{padding:.5rem!important}.p-4{padding:1rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.pl-7{padding-left:1.75rem}.text-center{text-align:center}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-semibold{font-weight:600}.capitalize{text-transform:capitalize}.text-black{--tw-text-opacity:1;color:rgb(30 30 30/var(--tw-text-opacity))}.text-primary{color:var(--color-primary)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-zinc-900{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity))}.opacity-25{opacity:.25}.opacity-75{opacity:.75}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:bg-primary-active:hover{background-color:var(--color-primary-active)}.hover\:text-primary:hover{color:var(--color-primary)}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.enabled\:hover\:bg-primary:hover:enabled{background-color:var(--color-primary)}.enabled\:hover\:bg-primary-active:hover:enabled{background-color:var(--color-primary-active)}.enabled\:hover\:text-white:hover:enabled{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:select-none:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:992px){.md\:block{display:block}.md\:\!flex{display:flex!important}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-auto{height:auto}.md\:\!w-20{width:5rem!important}.md\:w-1\/2{width:50%}.md\:w-10{width:2.5rem}.md\:max-w-lg{max-width:32rem}.md\:grow-0{flex-grow:0}.md\:flex-row{flex-direction:row}.md\:justify-center{justify-content:center}.md\:rounded-l-2xl{border-top-left-radius:1rem;border-bottom-left-radius:1rem}.md\:bg-primary{background-color:var(--color-primary)}.md\:bg-secondary{background-color:var(--color-secondary)}.md\:px-24{padding-left:6rem;padding-right:6rem}.md\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.md\:hover\:bg-primary-active:hover{background-color:var(--color-primary-active)}}@media (min-width:1200px){.lg\:hidden{display:none}}
+/*! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:Inter;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}:root{--color-primary:#e25c2a;--color-primary-active:#c2410c;--color-secondary:#1e243b;--color-secondary-active:#1e243b}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.visible{visibility:visible}.\!static{position:static!important}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.bottom-5{bottom:1.25rem}.right-5{right:1.25rem}.top-0{top:0}.top-20{top:5rem}.z-50{z-index:50}.order-1{order:1}.order-2{order:2}.order-3{order:3}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:.5rem}.mb-auto{margin-bottom:auto}.ml-3{margin-left:.75rem}.mr-3{margin-right:.75rem}.mt-2{margin-top:.5rem}.mt-5{margin-top:1.25rem}.mt-auto{margin-top:auto}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.\!h-6{height:1.5rem!important}.h-0{height:0}.h-10{height:2.5rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-full{height:100%}.h-screen{height:100vh}.min-h-screen{min-height:100vh}.\!w-20{width:5rem!important}.w-0{width:0}.w-1\/2{width:50%}.w-1\/3{width:33.333333%}.w-10{width:2.5rem}.w-141{width:34.375rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-full{width:100%}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.grow-0{flex-grow:0}.-translate-y-2{--tw-translate-y:-0.5rem}.-translate-y-2,.translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y:0px}.translate-y-full{--tw-translate-y:100%}.transform,.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-3{gap:.75rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.\!rounded-full{border-radius:9999px!important}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-sm{border-radius:.125rem}.rounded-l-2xl{border-top-left-radius:1rem;border-bottom-left-radius:1rem}.border{border-width:1px}.border-0{border-width:0}.border-primary{border-color:var(--color-primary)}.border-transparent{border-color:#0000}.bg-primary{background-color:var(--color-primary)}.bg-transparent{background-color:initial}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-zinc-100{--tw-bg-opacity:1;background-color:rgb(244 244 245/var(--tw-bg-opacity))}.bg-zinc-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity))}.object-fill{-o-object-fit:fill;object-fit:fill}.\!p-2{padding:.5rem!important}.p-4{padding:1rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pl-7{padding-left:1.75rem}.text-center{text-align:center}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-semibold{font-weight:600}.capitalize{text-transform:capitalize}.text-black{--tw-text-opacity:1;color:rgb(30 30 30/var(--tw-text-opacity))}.text-primary{color:var(--color-primary)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-zinc-900{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity))}.opacity-25{opacity:.25}.opacity-75{opacity:.75}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:bg-primary-active:hover{background-color:var(--color-primary-active)}.hover\:text-primary:hover{color:var(--color-primary)}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.enabled\:hover\:bg-primary:hover:enabled{background-color:var(--color-primary)}.enabled\:hover\:bg-primary-active:hover:enabled{background-color:var(--color-primary-active)}.enabled\:hover\:text-white:hover:enabled{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:select-none:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:992px){.md\:sticky{position:sticky}.md\:top-0{top:0}.md\:order-2{order:2}.md\:order-3{order:3}.md\:-ml-5{margin-left:-1.25rem}.md\:block{display:block}.md\:\!flex{display:flex!important}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-auto{height:auto}.md\:max-h-screen{max-height:100vh}.md\:\!w-20{width:5rem!important}.md\:w-1\/2{width:50%}.md\:w-10{width:2.5rem}.md\:max-w-lg{max-width:32rem}.md\:grow-0{flex-grow:0}.md\:flex-row{flex-direction:row}.md\:justify-center{justify-content:center}.md\:rounded-l-2xl{border-top-left-radius:1rem;border-bottom-left-radius:1rem}.md\:bg-primary{background-color:var(--color-primary)}.md\:bg-secondary{background-color:var(--color-secondary)}.md\:px-24{padding-left:6rem;padding-right:6rem}.md\:pr-7{padding-right:1.75rem}.md\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.md\:hover\:bg-primary-active:hover{background-color:var(--color-primary-active)}}@media (min-width:1200px){.lg\:hidden{display:none}}

package/dist/ui.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),p=require("@headlessui/vue"),w={small:["h-5","w-5"],medium:["h-7","w-7"],large:["h-10","w-10"]},x=e.createElementVNode("circle",{stroke:"currentColor",class:"opacity-25","stroke-width":"4",cx:"12",cy:"12",r:"10"},null,-1),b=e.createElementVNode("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),C=[x,b],g=e.defineComponent({__name:"AppLoader",props:{size:{default:"medium"}},setup(t){return(n,o)=>(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass([e.unref(w)[t.size],"animate-spin"]),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},C,2))}}),B={class:"app-button__icon h-4"},N=e.defineComponent({__name:"ButtonIconSlot",props:{loading:{type:Boolean}},setup(t){return(n,o)=>(e.openBlock(),e.createElementBlock("span",B,[t.loading?(e.openBlock(),e.createBlock(g,{key:0,class:"w-4"})):e.renderSlot(n.$slots,"default",{key:1},void 0,!0)]))}});const M=(t,n)=>{const o=t.__vccOpts||t;for(const[a,l]of n)o[a]=l;return o},v=M(N,[["__scopeId","data-v-04d5f165"]]),E={plain:["text-primary","border-0"],primary:["text-white","bg-primary","border-transparent","enabled:hover:bg-primary-active"],secondary:["text-primary","bg-transparent","border-primary","enabled:hover:text-white","enabled:hover:bg-primary"]},V={small:["px-5","py-2"],medium:["px-5","py-3"],large:["px-5","py-4"]},$=["type","disabled"],I=e.defineComponent({__name:"AppButton",props:{size:{default:"medium"},type:{default:"button"},colorType:{default:"primary"},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1}},setup(t){return(n,o)=>(e.openBlock(),e.createElementBlock("button",{type:t.type,disabled:t.disabled||t.loading,class:e.normalizeClass([[...e.unref(E)[t.colorType],...e.unref(V)[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"])},[n.$slots.leadingIcon||t.loading?(e.openBlock(),e.createBlock(v,{key:0,loading:t.loading,class:"mr-3","data-test-leading-icon":""},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"leadingIcon")]),_:3},8,["loading"])):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default"),n.$slots.trailingIcon?(e.openBlock(),e.createBlock(v,{key:1,class:"ml-3","data-test-trailing-icon":""},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"trailingIcon")]),_:3})):e.createCommentVNode("",!0)],10,$))}}),s={navigationItems:e.ref([]),mainMenuOpen:e.ref(!1),mobileMenuOpen:e.ref(!1),navigationComponent:e.shallowRef("a"),logo:e.ref(null),contactRoute:e.ref()};function u(){function t(i){s.navigationItems.value=e.isRef(i)?i==null?void 0:i.value:i}function n(i){s.navigationComponent.value=i}function o(i){s.logo.value=i}function a(){s.mainMenuOpen.value=!0}function l(){s.mainMenuOpen.value=!1}function r(){s.mainMenuOpen.value=!s.mainMenuOpen.value}function m(){s.mobileMenuOpen.value=!0}function y(){s.mobileMenuOpen.value=!1}function d(){s.mobileMenuOpen.value=!s.mobileMenuOpen.value}return{...s,setNavigationItems:t,setNavigationComponent:n,setLogo:o,openMainMenu:a,closeMainMenu:l,toggleMainMenu:r,openMobileMenu:m,closeMobileMenu:y,toggleMobileMenu:d}}const c={layoutImage:e.ref(null),colors:{primaryColor:e.ref(null),primaryColorActive:e.ref(null),secondaryColor:e.ref(null),secondaryColorActive:e.ref(null)}};function _(){function t(a){c.layoutImage.value=a}function n(a,l){c.colors.primaryColor.value=a,c.colors.primaryColorActive.value=l,document.documentElement.style.setProperty("--color-primary",a),document.documentElement.style.setProperty("--color-primary-active",l)}function o(a,l){c.colors.secondaryColor.value=a,c.colors.secondaryColorActive.value=l,document.documentElement.style.setProperty("--color-secondary",a),document.documentElement.style.setProperty("--color-secondary-active",l)}return{...c,setLayoutImage:t,setPrimaryColors:n,setSecondaryColors:o}}function z(t,n){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"})])}function S(t,n){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18L18 6M6 6l12 12"})])}const O={class:"pl-7 text-lg font-semibold text-zinc-900 md:hidden","data-test-name":""},f=e.defineComponent({__name:"NavigationItem",props:{item:null},setup(t){const n=t,{navigationComponent:o}=u(),a=e.computed(()=>typeof n.item.icon!="string");return(l,r)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(o)),{to:t.item.to,href:t.item.href,class:e.normalizeClass([{"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:t.item.onClick},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)?t.item.icon:"span"),{class:e.normalizeClass([{"!h-6":!e.unref(a)},"h-4 w-4 text-zinc-900 md:text-white"]),"data-test-icon":""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.item.icon),1)]),_:1},8,["class"])),e.createElementVNode("span",O,e.toDisplayString(t.item.name),1)]),_:1},8,["to","href","class","onClick"]))}}),h=e.defineComponent({__name:"SupportItem",setup(t){const{contactRoute:n,navigationComponent:o}=u();return(a,l)=>e.unref(n)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(o)),{key:0,to:e.unref(o)!=="a"?e.unref(n):void 0,href:e.unref(o)?e.unref(n):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","data-test-help-icon":""},{default:e.withCtx(()=>[e.createTextVNode(" ? ")]),_:1},8,["to","href"])):e.createCommentVNode("",!0)}}),L={class:"flex items-center justify-between bg-zinc-50 px-2 py-4 text-black md:hidden"},A=["innerHTML"],j=e.createElementVNode("div",{class:"w-1/3"},null,-1),T={class:"relative flex h-full w-full flex-1 flex-col bg-white focus:outline-none","data-test-navigation-wrapper":""},P={class:"h-0 flex-1 overflow-y-auto p-4","data-test-navigation-links-wrapper":""},D={"aria-label":"MainMenu",class:"mt-5"},R={class:"mb-auto"},F=e.defineComponent({__name:"Mobile",setup(t){const{logo:n,navigationItems:o,mobileMenuOpen:a,toggleMobileMenu:l,closeMobileMenu:r}=u(),m=e.computed(()=>a.value?S:z);return(y,d)=>(e.openBlock(),e.createElementBlock("div",L,[e.createElementVNode("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:d[0]||(d[0]=(...i)=>e.unref(l)&&e.unref(l)(...i))},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(m)),{class:"block h-6 w-6 text-black","aria-hidden":"true"}))]),e.createElementVNode("div",{class:"w-1/3","data-test-logo-wrapper":"",innerHTML:e.unref(n)},null,8,A),j,e.createVNode(e.unref(p.TransitionRoot),{show:e.unref(a),as:"template"},{default:e.withCtx(()=>[e.createVNode(e.unref(p.Dialog),{as:"div",class:"fixed inset-0 top-20 z-50 flex -translate-y-2 lg:hidden",onClose:e.unref(r)},{default:e.withCtx(()=>[e.createVNode(e.unref(p.TransitionChild),{as:"template",enter:"transition ease-in-out duration-300 transform","enter-from":"translate-y-full","enter-to":"translate-y-0",leave:"transition ease-in-out duration-300 transform","leave-from":"translate-y-0","leave-to":"translate-y-full"},{default:e.withCtx(()=>[e.createElementVNode("div",T,[e.createElementVNode("div",P,[e.createElementVNode("nav",D,[e.createElementVNode("ul",R,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(o),i=>(e.openBlock(),e.createElementBlock("li",{key:i.name,"data-test-navigation-item":""},[e.createVNode(f,{item:i},null,8,["item"])]))),128))])]),e.createVNode(h)])])]),_:1})]),_:1},8,["onClose"])]),_:1},8,["show"]),e.createVNode(h)]))}}),H={class:"mx-auto mb-auto"},q={class:"mx-auto mt-auto"},k=e.defineComponent({__name:"AppNavigationMenu",setup(t){const{navigationItems:n,mainMenuOpen:o}=u();return(a,l)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("aside",{class:e.normalizeClass([{"px-3 md:!w-20":e.unref(o)},"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":""},[e.createElementVNode("ul",H,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(n).filter(r=>r.bottom!==!0),r=>(e.openBlock(),e.createElementBlock("li",{key:r.name,"data-test-top-navigation-item":""},[e.createVNode(f,{item:r},null,8,["item"])]))),128))]),e.createElementVNode("ul",q,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(n).filter(r=>r.bottom),r=>(e.openBlock(),e.createElementBlock("li",{key:r.name,"data-test-bottom-navigation-item":""},[e.createVNode(f,{item:r},null,8,["item"])]))),128)),e.createElementVNode("li",null,[e.createVNode(h,{class:"!static"})])])],2),e.createVNode(F)]))}}),G={class:"flex min-h-screen flex-col md:flex-row md:bg-secondary"},J={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"},K={class:"mx-auto md:max-w-lg"},Q={class:"hidden w-1/2 md:block","data-test-layout-image-wrapper":""},U=["src"],W=e.defineComponent({__name:"Auth",setup(t){const{layoutImage:n}=_();return(o,a)=>(e.openBlock(),e.createElementBlock("div",G,[e.createVNode(e.unref(k)),e.createElementVNode("main",J,[e.createElementVNode("div",K,[e.renderSlot(o.$slots,"default")])]),e.createElementVNode("div",Q,[e.unref(n)?(e.openBlock(),e.createElementBlock("img",{key:0,src:e.unref(n),class:"h-screen w-full object-fill"},null,8,U)):e.createCommentVNode("",!0)])]))}});exports.AppButton=I;exports.AppLoader=g;exports.AppNavigationMenu=k;exports.AuthLayout=W;exports.useLayout=_;exports.useNavigation=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),f=require("@headlessui/vue"),x={"extra-small":["h-4","w-4"],small:["h-5","w-5"],medium:["h-7","w-7"],large:["h-10","w-10"]},b=e.createElementVNode("circle",{stroke:"currentColor",class:"opacity-25","stroke-width":"4",cx:"12",cy:"12",r:"10"},null,-1),C=e.createElementVNode("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),B=[b,C],v=e.defineComponent({__name:"AppLoader",props:{size:{default:"medium"}},setup(n){return(t,a)=>(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass([e.unref(x)[n.size],"animate-spin"]),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},B,2))}}),N={class:"app-button__icon h-4"},E=e.defineComponent({__name:"ButtonIconSlot",props:{loading:{type:Boolean}},setup(n){return(t,a)=>(e.openBlock(),e.createElementBlock("span",N,[n.loading?(e.openBlock(),e.createBlock(v,{key:0,class:"w-4"})):e.renderSlot(t.$slots,"default",{key:1},void 0,!0)]))}});const M=(n,t)=>{const a=n.__vccOpts||n;for(const[o,r]of t)a[o]=r;return a},w=M(E,[["__scopeId","data-v-04d5f165"]]),V={plain:["text-primary","border-0"],primary:["text-white","bg-primary","border-transparent","enabled:hover:bg-primary-active"],secondary:["text-primary","bg-transparent","border-primary","enabled:hover:text-white","enabled:hover:bg-primary"]},$={small:["px-5","py-2"],medium:["px-5","py-3"],large:["px-5","py-4"]},z=["type","disabled"],I=e.defineComponent({__name:"AppButton",props:{size:{default:"medium"},type:{default:"button"},colorType:{default:"primary"},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1}},setup(n){return(t,a)=>(e.openBlock(),e.createElementBlock("button",{type:n.type,disabled:n.disabled||n.loading,class:e.normalizeClass([[...e.unref(V)[n.colorType],...e.unref($)[n.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||n.loading?(e.openBlock(),e.createBlock(w,{key:0,loading:n.loading,class:"mr-3","data-test-leading-icon":""},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"leadingIcon")]),_:3},8,["loading"])):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default"),t.$slots.trailingIcon?(e.openBlock(),e.createBlock(w,{key:1,class:"ml-3","data-test-trailing-icon":""},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"trailingIcon")]),_:3})):e.createCommentVNode("",!0)],10,z))}}),i={navigationItems:e.ref([]),mainMenuOpen:e.ref(!1),mobileMenuOpen:e.ref(!1),navigationComponent:e.shallowRef("a"),logo:e.ref(null),contactRoute:e.ref()};function p(){function n(l){i.navigationItems.value=e.isRef(l)?l==null?void 0:l.value:l}function t(l){i.navigationComponent.value=l}function a(l){i.logo.value=l}function o(){i.mainMenuOpen.value=!0}function r(){i.mainMenuOpen.value=!1}function s(){i.mainMenuOpen.value=!i.mainMenuOpen.value}function d(){i.mobileMenuOpen.value=!0}function m(){i.mobileMenuOpen.value=!1}function c(){i.mobileMenuOpen.value=!i.mobileMenuOpen.value}return{...i,setNavigationItems:n,setNavigationComponent:t,setLogo:a,openMainMenu:o,closeMainMenu:r,toggleMainMenu:s,openMobileMenu:d,closeMobileMenu:m,toggleMobileMenu:c}}const u={layoutImage:e.ref(null),colors:{primaryColor:e.ref(null),primaryColorActive:e.ref(null),secondaryColor:e.ref(null),secondaryColorActive:e.ref(null)}};function k(){function n(o){u.layoutImage.value=o}function t(o,r){u.colors.primaryColor.value=o,u.colors.primaryColorActive.value=r,document.documentElement.style.setProperty("--color-primary",o),document.documentElement.style.setProperty("--color-primary-active",r)}function a(o,r){u.colors.secondaryColor.value=o,u.colors.secondaryColorActive.value=r,document.documentElement.style.setProperty("--color-secondary",o),document.documentElement.style.setProperty("--color-secondary-active",r)}return{...u,setLayoutImage:n,setPrimaryColors:t,setSecondaryColors:a}}function S(n,t){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"})])}function L(n,t){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18L18 6M6 6l12 12"})])}const O={class:"pl-7 text-lg font-semibold text-zinc-900 md:hidden","data-test-name":""},h=e.defineComponent({__name:"NavigationItem",props:{item:null},setup(n){const t=n,{navigationComponent:a}=p(),o=e.ref(!1),r=e.computed(()=>o.value||typeof t.item.icon!="string"),s=e.computed(()=>o.value?v:t.item.icon);async function d(m){var c,l,g;(c=t.item)!=null&&c.onClick&&(m.preventDefault(),o.value=!0,await Promise.resolve((g=(l=t.item)==null?void 0:l.onClick)==null?void 0:g.call(l)),o.value=!1)}return(m,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{to:n.item.to,href:n.item.href,class:e.normalizeClass([{"md:bg-primary":n.item.active??!1,"!rounded-full":n.item.rounded??!1,"mb-2":!n.item.bottom,"mt-2":n.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:d},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(r)?e.unref(s):"span"),{class:e.normalizeClass([{"!h-6":!e.unref(r)},"h-4 w-4 text-zinc-900 md:text-white"]),size:o.value?"extra-small":void 0,"data-test-icon":""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(r)?"":n.item.icon),1)]),_:1},8,["class","size"])),e.createElementVNode("span",O,e.toDisplayString(n.item.name),1)]),_:1},8,["to","href","class"]))}}),y=e.defineComponent({__name:"SupportItem",setup(n){const{contactRoute:t,navigationComponent:a}=p();return(o,r)=>e.unref(t)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{key:0,to:e.unref(a)!=="a"?e.unref(t):void 0,href:e.unref(a)?e.unref(t):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:e.withCtx(()=>[e.createTextVNode(" ? ")]),_:1},8,["to","href"])):e.createCommentVNode("",!0)}}),A={class:"flex items-center justify-between bg-zinc-50 px-2 py-4 text-black md:hidden"},j=["innerHTML"],P=e.createElementVNode("div",{class:"w-1/3"},null,-1),T={class:"relative flex h-full w-full flex-1 flex-col bg-white focus:outline-none","data-test-navigation-wrapper":""},D={class:"h-0 flex-1 overflow-y-auto p-4","data-test-navigation-links-wrapper":""},R={"aria-label":"MainMenu",class:"mt-5"},F={class:"mb-auto"},H=e.defineComponent({__name:"Mobile",setup(n){const{logo:t,navigationItems:a,mobileMenuOpen:o,toggleMobileMenu:r,closeMobileMenu:s}=p(),d=e.computed(()=>o.value?L:S);return(m,c)=>(e.openBlock(),e.createElementBlock("div",A,[e.createElementVNode("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:c[0]||(c[0]=(...l)=>e.unref(r)&&e.unref(r)(...l))},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(d)),{class:"block h-6 w-6 text-black","aria-hidden":"true"}))]),e.createElementVNode("div",{class:"w-1/3","data-test-logo-wrapper":"",innerHTML:e.unref(t)},null,8,j),P,e.createVNode(e.unref(f.TransitionRoot),{show:e.unref(o),as:"template"},{default:e.withCtx(()=>[e.createVNode(e.unref(f.Dialog),{as:"div",class:"fixed inset-0 top-20 z-50 flex -translate-y-2 lg:hidden",onClose:e.unref(s)},{default:e.withCtx(()=>[e.createVNode(e.unref(f.TransitionChild),{as:"template",enter:"transition ease-in-out duration-300 transform","enter-from":"translate-y-full","enter-to":"translate-y-0",leave:"transition ease-in-out duration-300 transform","leave-from":"translate-y-0","leave-to":"translate-y-full"},{default:e.withCtx(()=>[e.createElementVNode("div",T,[e.createElementVNode("div",D,[e.createElementVNode("nav",R,[e.createElementVNode("ul",F,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(a),l=>(e.openBlock(),e.createElementBlock("li",{key:l.name,"data-test-navigation-item":""},[e.createVNode(h,{item:l},null,8,["item"])]))),128))])]),e.createVNode(y)])])]),_:1})]),_:1},8,["onClose"])]),_:1},8,["show"]),e.createVNode(y)]))}}),q={class:"mx-auto mb-auto"},G={class:"mx-auto mt-auto"},_=e.defineComponent({__name:"AppNavigationMenu",setup(n){const{navigationItems:t,mainMenuOpen:a}=p();return(o,r)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("aside",{class:e.normalizeClass([{"px-3 md:!w-20":e.unref(a)},"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":""},[e.createElementVNode("ul",q,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(t).filter(s=>s.bottom!==!0),s=>(e.openBlock(),e.createElementBlock("li",{key:s.name,"data-test-top-navigation-item":""},[e.createVNode(h,{item:s},null,8,["item"])]))),128))]),e.createElementVNode("ul",G,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(t).filter(s=>s.bottom),s=>(e.openBlock(),e.createElementBlock("li",{key:s.name,"data-test-bottom-navigation-item":""},[e.createVNode(h,{item:s},null,8,["item"])]))),128)),e.createElementVNode("li",null,[e.createVNode(y,{class:"!static"})])])],2),e.createVNode(H)]))}}),J={class:"flex min-h-screen flex-col md:flex-row md:bg-secondary"},K={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"},Q={class:"mx-auto md:max-w-lg"},U={class:"hidden w-1/2 md:block","data-test-layout-image-wrapper":""},W=["src"],X=e.defineComponent({__name:"Auth",setup(n){const{layoutImage:t}=k();return(a,o)=>(e.openBlock(),e.createElementBlock("div",J,[e.createVNode(e.unref(_)),e.createElementVNode("main",K,[e.createElementVNode("div",Q,[e.renderSlot(a.$slots,"default")])]),e.createElementVNode("div",U,[e.unref(t)?(e.openBlock(),e.createElementBlock("img",{key:0,src:e.unref(t),class:"h-screen w-full object-fill"},null,8,W)):e.createCommentVNode("",!0)])]))}}),Y={class:"flex min-h-screen flex-col md:flex-row md:bg-secondary"},Z={class:"order-3 flex h-full grow bg-zinc-100 px-2 py-8 transition-all md:order-2 md:h-auto md:rounded-l-2xl md:pr-7"},ee={class:"w-full"},te={id:"sidebar-wrapper",class:"order-2 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-3 md:-ml-5 md:max-h-screen","data-test-layout-sidebar-wrapper":""},ne=e.defineComponent({__name:"Base",setup(n){return(t,a)=>(e.openBlock(),e.createElementBlock("div",Y,[e.createVNode(e.unref(_),{class:"order-1"}),e.createElementVNode("main",Z,[e.createElementVNode("div",ee,[e.renderSlot(t.$slots,"default")])]),e.createElementVNode("div",te,[e.renderSlot(t.$slots,"sidebar")])]))}});exports.AppButton=I;exports.AppLoader=v;exports.AppNavigationMenu=_;exports.AuthLayout=X;exports.BaseLayout=ne;exports.useLayout=k;exports.useNavigation=p;

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 f, openBlock as a, createElementBlock as c, normalizeClass as b, unref as n, createElementVNode as s, createBlock as v, renderSlot as y, withCtx as _, createCommentVNode as M, ref as p, shallowRef as T, isRef as E, computed as k, resolveDynamicComponent as C, createTextVNode as j, toDisplayString as A, createVNode as m, Fragment as I, renderList as z } from "vue";
+import { TransitionRoot as R, Dialog as V, TransitionChild as D } from "@headlessui/vue";
+const H = {
+  "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", {
+}, F = /* @__PURE__ */ s("circle", {
   stroke: "currentColor",
   class: "opacity-25",
   "stroke-width": "4",
   cx: "12",
   cy: "12",
   r: "10"
-}, null, -1), D = /* @__PURE__ */ s("path", {
+}, null, -1), q = /* @__PURE__ */ s("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), G = [
+  F,
+  q
+], P = /* @__PURE__ */ f({
   __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, l) => (a(), c("svg", {
+      class: b([n(H)[t.size], "animate-spin"]),
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "none"
-    }, H, 2));
+    }, G, 2));
   }
-}), q = { class: "app-button__icon h-4" }, G = /* @__PURE__ */ h({
+}), J = { class: "app-button__icon h-4" }, K = /* @__PURE__ */ f({
   __name: "ButtonIconSlot",
   props: {
     loading: { type: Boolean }
   },
-  setup(e) {
-    return (t, a) => (o(), r("span", q, [
-      e.loading ? (o(), y(F, {
+  setup(t) {
+    return (e, l) => (a(), c("span", J, [
+      t.loading ? (a(), v(P, {
         key: 0,
         class: "w-4"
-      })) : v(t.$slots, "default", { key: 1 }, void 0, !0)
+      })) : y(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 Q = (t, e) => {
+  const l = t.__vccOpts || t;
+  for (const [o, r] of e)
+    l[o] = r;
+  return l;
+}, N = /* @__PURE__ */ Q(K, [["__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"], Me = /* @__PURE__ */ f({
   __name: "AppButton",
   props: {
     size: { default: "medium" },
@@ -82,86 +83,86 @@ 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, l) => (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(), v(N, {
         key: 0,
-        loading: e.loading,
+        loading: t.loading,
         class: "mr-3",
         "data-test-leading-icon": ""
       }, {
-        default: f(() => [
-          v(t.$slots, "leadingIcon")
+        default: _(() => [
+          y(e.$slots, "leadingIcon")
         ]),
         _: 3
-      }, 8, ["loading"])) : b("", !0),
-      v(t.$slots, "default"),
-      t.$slots.trailingIcon ? (o(), y(A, {
+      }, 8, ["loading"])) : M("", !0),
+      y(e.$slots, "default"),
+      e.$slots.trailingIcon ? (a(), v(N, {
         key: 1,
         class: "ml-3",
         "data-test-trailing-icon": ""
       }, {
-        default: f(() => [
-          v(t.$slots, "trailingIcon")
+        default: _(() => [
+          y(e.$slots, "trailingIcon")
         ]),
         _: 3
-      })) : b("", !0)
-    ], 10, U));
+      })) : M("", !0)
+    ], 10, X));
   }
 }), d = {
   navigationItems: p([]),
   mainMenuOpen: p(!1),
   mobileMenuOpen: p(!1),
-  navigationComponent: j("a"),
+  navigationComponent: T("a"),
   logo: p(null),
   contactRoute: p()
 };
-function M() {
-  function e(u) {
-    d.navigationItems.value = S(u) ? u == null ? void 0 : u.value : u;
+function $() {
+  function t(i) {
+    d.navigationItems.value = E(i) ? i == null ? void 0 : i.value : i;
   }
-  function t(u) {
-    d.navigationComponent.value = u;
+  function e(i) {
+    d.navigationComponent.value = i;
   }
-  function a(u) {
-    d.logo.value = u;
+  function l(i) {
+    d.logo.value = i;
   }
-  function l() {
+  function o() {
     d.mainMenuOpen.value = !0;
   }
-  function i() {
+  function r() {
     d.mainMenuOpen.value = !1;
   }
-  function c() {
+  function u() {
     d.mainMenuOpen.value = !d.mainMenuOpen.value;
   }
-  function C() {
+  function w() {
     d.mobileMenuOpen.value = !0;
   }
-  function B() {
+  function x() {
     d.mobileMenuOpen.value = !1;
   }
-  function w() {
+  function h() {
     d.mobileMenuOpen.value = !d.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: l,
+    openMainMenu: o,
+    closeMainMenu: r,
+    toggleMainMenu: u,
+    openMobileMenu: w,
+    closeMobileMenu: x,
+    toggleMobileMenu: h
   };
 }
 const g = {
@@ -173,25 +174,25 @@ const g = {
     secondaryColorActive: p(null)
   }
 };
-function W() {
-  function e(l) {
-    g.layoutImage.value = l;
+function Y() {
+  function t(o) {
+    g.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) {
+    g.colors.primaryColor.value = o, g.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 l(o, r) {
+    g.colors.secondaryColor.value = o, g.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
+    setLayoutImage: t,
+    setPrimaryColors: e,
+    setSecondaryColors: l
   };
 }
-function X(e, t) {
-  return o(), r("svg", {
+function Z(t, e) {
+  return a(), c("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -206,8 +207,8 @@ function X(e, t) {
     })
   ]);
 }
-function Y(e, t) {
-  return o(), r("svg", {
+function ee(t, e) {
+  return a(), c("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -222,86 +223,91 @@ function Y(e, t) {
     })
   ]);
 }
-const Z = {
+const te = {
   class: "pl-7 text-lg font-semibold text-zinc-900 md:hidden",
   "data-test-name": ""
-}, I = /* @__PURE__ */ h({
+}, B = /* @__PURE__ */ f({
   __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: l } = $(), o = p(!1), r = k(() => o.value || typeof e.item.icon != "string"), u = k(() => o.value ? P : e.item.icon);
+    async function w(x) {
+      var h, i, L;
+      (h = e.item) != null && h.onClick && (x.preventDefault(), o.value = !0, await Promise.resolve((L = (i = e.item) == null ? void 0 : i.onClick) == null ? void 0 : L.call(i)), o.value = !1);
+    }
+    return (x, h) => (a(), v(C(n(l)), {
+      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: _(() => [
+        (a(), v(C(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: _(() => [
+            j(A(n(r) ? "" : t.item.icon), 1)
           ]),
           _: 1
-        }, 8, ["class"])),
-        s("span", Z, O(e.item.name), 1)
+        }, 8, ["class", "size"])),
+        s("span", te, A(t.item.name), 1)
       ]),
       _: 1
-    }, 8, ["to", "href", "class", "onClick"]));
+    }, 8, ["to", "href", "class"]));
   }
-}), z = /* @__PURE__ */ h({
+}), O = /* @__PURE__ */ f({
   __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: l } = $();
+    return (o, r) => n(e) ? (a(), v(C(n(l)), {
       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(l) !== "a" ? n(e) : void 0,
+      href: n(l) ? 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: _(() => [
+        j(" ? ")
       ]),
       _: 1
-    }, 8, ["to", "href"])) : b("", !0);
+    }, 8, ["to", "href"])) : M("", !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 = {
+}), ne = { class: "flex items-center justify-between bg-zinc-50 px-2 py-4 text-black md:hidden" }, oe = ["innerHTML"], ae = /* @__PURE__ */ s("div", { class: "w-1/3" }, null, -1), le = {
   class: "relative flex h-full w-full flex-1 flex-col bg-white focus:outline-none",
   "data-test-navigation-wrapper": ""
-}, ae = {
+}, se = {
   class: "h-0 flex-1 overflow-y-auto p-4",
   "data-test-navigation-links-wrapper": ""
-}, le = {
+}, ie = {
   "aria-label": "MainMenu",
   class: "mt-5"
-}, se = { class: "mb-auto" }, ie = /* @__PURE__ */ h({
+}, re = { class: "mb-auto" }, ce = /* @__PURE__ */ f({
   __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, [
+      logo: e,
+      navigationItems: l,
+      mobileMenuOpen: o,
+      toggleMobileMenu: r,
+      closeMobileMenu: u
+    } = $(), w = k(() => o.value ? ee : Z);
+    return (x, h) => (a(), c("div", ne, [
       s("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: h[0] || (h[0] = //@ts-ignore
+        (...i) => n(r) && n(r)(...i))
       }, [
-        (o(), y(x(n(C)), {
+        (a(), v(C(n(w)), {
           class: "block h-6 w-6 text-black",
           "aria-hidden": "true"
         }))
@@ -309,21 +315,21 @@ const Z = {
       s("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, oe),
+      ae,
+      m(n(R), {
+        show: n(o),
         as: "template"
       }, {
-        default: f(() => [
-          m(n(T), {
+        default: _(() => [
+          m(n(V), {
             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: _(() => [
+              m(n(D), {
                 as: "template",
                 enter: "transition ease-in-out duration-300 transform",
                 "enter-from": "translate-y-full",
@@ -332,20 +338,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: _(() => [
+                  s("div", le, [
+                    s("div", se, [
+                      s("nav", ie, [
+                        s("ul", re, [
+                          (a(!0), c(I, null, z(n(l), (i) => (a(), c("li", {
+                            key: i.name,
                             "data-test-navigation-item": ""
                           }, [
-                            m(I, { item: u }, null, 8, ["item"])
+                            m(B, { item: i }, null, 8, ["item"])
                           ]))), 128))
                         ])
                       ]),
-                      m(z)
+                      m(O)
                     ])
                   ])
                 ]),
@@ -357,70 +363,90 @@ const Z = {
         ]),
         _: 1
       }, 8, ["show"]),
-      m(z)
+      m(O)
     ]));
   }
-}), re = { class: "mx-auto mb-auto" }, ce = { class: "mx-auto mt-auto" }, ue = /* @__PURE__ */ h({
+}), ue = { class: "mx-auto mb-auto" }, de = { class: "mx-auto mt-auto" }, S = /* @__PURE__ */ f({
   __name: "AppNavigationMenu",
-  setup(e) {
-    const { navigationItems: t, mainMenuOpen: a } = M();
-    return (l, i) => (o(), r("div", null, [
+  setup(t) {
+    const { navigationItems: e, mainMenuOpen: l } = $();
+    return (o, r) => (a(), c("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"]),
+        class: b([{ "px-3 md:!w-20": n(l) }, "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,
+        s("ul", ue, [
+          (a(!0), c(I, null, z(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(B, { 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,
+        s("ul", de, [
+          (a(!0), c(I, null, z(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(B, { item: u }, null, 8, ["item"])
           ]))), 128)),
           s("li", null, [
-            m(z, { class: "!static" })
+            m(O, { class: "!static" })
           ])
         ])
       ], 2),
-      m(ie)
+      m(ce)
     ]));
   }
-}), 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 = {
+}), me = { class: "flex min-h-screen flex-col md:flex-row md:bg-secondary" }, pe = { 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" }, fe = { class: "mx-auto md:max-w-lg" }, he = {
   class: "hidden w-1/2 md:block",
   "data-test-layout-image-wrapper": ""
-}, he = ["src"], _e = /* @__PURE__ */ h({
+}, _e = ["src"], Ce = /* @__PURE__ */ f({
   __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 } = Y();
+    return (l, o) => (a(), c("div", me, [
+      m(n(S)),
+      s("main", pe, [
+        s("div", fe, [
+          y(l.$slots, "default")
         ])
       ]),
-      s("div", fe, [
-        n(t) ? (o(), r("img", {
+      s("div", he, [
+        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, _e)) : M("", !0)
+      ])
+    ]));
+  }
+}), ye = { class: "flex min-h-screen flex-col md:flex-row md:bg-secondary" }, ve = { class: "order-3 flex h-full grow bg-zinc-100 px-2 py-8 transition-all md:order-2 md:h-auto md:rounded-l-2xl md:pr-7" }, ge = { class: "w-full" }, we = {
+  id: "sidebar-wrapper",
+  class: "order-2 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-3 md:-ml-5 md:max-h-screen",
+  "data-test-layout-sidebar-wrapper": ""
+}, $e = /* @__PURE__ */ f({
+  __name: "Base",
+  setup(t) {
+    return (e, l) => (a(), c("div", ye, [
+      m(n(S), { class: "order-1" }),
+      s("main", ve, [
+        s("div", ge, [
+          y(e.$slots, "default")
+        ])
+      ]),
+      s("div", we, [
+        y(e.$slots, "sidebar")
       ])
     ]));
   }
 });
 export {
-  ve as AppButton,
-  F as AppLoader,
-  ue as AppNavigationMenu,
-  _e as AuthLayout,
-  W as useLayout,
-  M as useNavigation
+  Me as AppButton,
+  P as AppLoader,
+  S as AppNavigationMenu,
+  Ce as AuthLayout,
+  $e as BaseLayout,
+  Y as useLayout,
+  $ as useNavigation
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autoafleveren/ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "files": [
     "dist/*",