@autoafleveren/ui 0.1.0 → 0.1.2

package/dist/config/eslint.cjs

@@ -10,10 +10,7 @@ const defaultTypescriptOverride = {
     'vitest',
   ],
   extends: [
-    'plugin:@programic/base',
-    'plugin:import/typescript',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    ...typescriptOverride.extends,
     'plugin:vitest/recommended',
   ],
 };
@@ -33,6 +30,13 @@ if (variableIndex > -1) {
   });
 }
 
+const testOverrideRules = {
+  '@typescript-eslint/explicit-function-return-type': 'off',
+  '@typescript-eslint/explicit-module-boundary-types': 'off',
+  '@programic/typescript-explicit-module-boundary-types': 'off',
+  '@programic/typescript-explicit-function-return-type': 'off',
+};
+
 /** @type {import('eslint').Config} */
 module.exports = {
   root: true,
@@ -56,6 +60,42 @@ module.exports = {
     tailwindcss: {
       config: tailwindConfigPath,
     },
+    programic: {
+      vue: {
+        extendedComputedProperties: {
+          vueuse: [
+            'computedAsync',
+            'computedEager',
+            'computedInject',
+            'computedWithControl',
+            'reactiveComputed',
+          ],
+        },
+        extendedWatchers: {
+          vueuse: [
+            'until',
+            'watchArray',
+            'watchAtMost',
+            'watchDebounced',
+            'watchDeep',
+            'watchIgnorable',
+            'watchImmediate',
+            'watchOnce',
+            'watchPausable',
+            'watchThrottled',
+            'watchTriggerable',
+            'watchWithFilter',
+            'whenever',
+          ],
+        },
+        extendedHooks: {
+          'vue-router': [
+            'onBeforeRouteLeave',
+            'onBeforeRouteUpdate',
+          ],
+        },
+      },
+    },
   },
   parserOptions: {
     ecmaVersion: 2020,
@@ -69,6 +109,7 @@ module.exports = {
       files: ['**/*.spec.ts'],
       rules: {
         ...typescriptOverride.rules,
+        ...testOverrideRules,
         'no-promise-executor-return': 'off',
         '@typescript-eslint/naming-convention': namingConventionsTestFileRule,
         'unicorn/prevent-abbreviations': ['error', {
@@ -81,6 +122,7 @@ module.exports = {
           ],
         }],
         'vue/one-component-per-file': 'off',
+        '@typescript-eslint/no-unsafe-member-access': 'off',
         'vitest/consistent-test-it': 'error',
         'vitest/no-alias-methods': 'error',
         'vitest/no-conditional-expect': 'error',
@@ -115,8 +157,24 @@ module.exports = {
         }],
       },
     },
+    {
+      ...defaultTypescriptOverride,
+      files: ['**/__mocks__/*.ts', '**/mocks/**/*.ts'],
+      rules: {
+        ...typescriptOverride.rules,
+        ...testOverrideRules,
+      },
+    }
   ],
   rules: {
+    'id-length': ['error', {
+      min: 2,
+      properties: 'always',
+      exceptions: ['t', 'rt', 'd', 'n', 'te', 'tm'],
+    }],
+    'import/no-extraneous-dependencies': ['error', {
+      devDependencies: ["**/tests/**", "**/__tests__/**"],
+    }],
     'tailwindcss/no-custom-classname': ['error', {
       whitelist: ['^app-.+$'],
     }],

package/dist/config/tailwind/config.cjs

@@ -2,44 +2,80 @@ const screens = require('./screens.json');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: [
-        './components/**/*.{js,vue,ts}',
-        './main.ts',
-        './App.vue'
-    ],
-    theme: {
-        fontFamily: {
-            sans: 'Inter',
-            serif: 'Inter',
-            mono: 'Inter',
-        },
-        colors: {
-            current: 'currentColor',
-            transparent: 'transparent',
-            primary: 'var(--color-primary)',
-            'primary-active': 'var(--color-primary-active)',
-            secondary: 'var(--color-secondary)',
-            'secondary-active': 'var(--color-secondary-active)',
-            black: {
-                black: '#000000',
-                DEFAULT: '#1E1E1E',
-                50: '#FCFCFD',
-            },
-            white: '#FFFFFF',
-            zinc: {
-                50: '#FAFAFA',
-                100: '#F4F4F5',
-                200: '#E4E4E7',
-                300: '#D4D4D8',
-                400: '#A1A1AA',
-                500: '#71717A',
-                600: '#52525B',
-                700: '#3F3F46',
-                800: '#27272A',
-                900: '#18181B',
-            },
-        },
-        screens,
+  content: [
+    './components/**/*.{js,vue,ts}',
+    './main.ts',
+    './App.vue'
+  ],
+  theme: {
+    fontFamily: {
+      sans: 'Inter',
+      serif: 'Inter',
+      mono: 'Inter',
     },
-    plugins: [],
+    colors: {
+      current: 'currentColor',
+      transparent: 'transparent',
+      primary: 'var(--color-primary)',
+      'primary-active': 'var(--color-primary-active)',
+      secondary: 'var(--color-secondary)',
+      'secondary-active': 'var(--color-secondary-active)',
+      black: {
+        black: '#000000',
+        DEFAULT: '#1E1E1E',
+        50: '#FCFCFD',
+      },
+      white: '#FFFFFF',
+      zinc: {
+        50:  '#FAFAFA',
+        100: '#F4F4F5',
+        200: '#E4E4E7',
+        300: '#D4D4D8',
+        400: '#A1A1AA',
+        500: '#71717A',
+        600: '#52525B',
+        700: '#3F3F46',
+        800: '#27272A',
+        900: '#18181B',
+      },
+      yellow: {
+        50:  '#fefce8',
+        100: '#fef9c3',
+        200: '#fef08a',
+        300: '#fde047',
+        400: '#facc15',
+        500: '#eab308',
+        600: '#ca8a04',
+        700: '#a16207',
+        800: '#854d0e',
+        900: '#713f12',
+      },
+      red: {
+        50:  '#fef2f2',
+        100: '#fee2e2',
+        200: '#fecaca',
+        300: '#fca5a5',
+        400: '#f87171',
+        500: '#ef4444',
+        600: '#dc2626',
+        700: '#b91c1c',
+        800: '#991b1b',
+        900: '#7f1d1d',
+      },
+      green: {
+        50:  '#f0fdf4',
+        100: '#dcfce7',
+        200: '#bbf7d0',
+        300: '#86efac',
+        400: '#4ade80',
+        500: '#22c55e',
+        600: '#16a34a',
+        700: '#15803d',
+        800: '#166534',
+        900: '#14532d',
+      },
+    },
+    screens,
+  },
+  plugins: [],
 }

package/dist/types/components/AppNavigationMenu/NavigationItem.vue.d.ts

@@ -1,4 +1,4 @@
-import type { NavigationItem } from '../../composables/useNavigation/index.d';
+import type { NavigationItem } from '~composables/useNavigation';
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
     item: NavigationItem;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{

package/dist/types/components/AppNavigationMenu/SupportItem.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

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

@@ -1,2 +1,2 @@
-export { default as useNavigation } from './useNavigation';
-export { default as useLayout } from './useLayout';
+export * from './useNavigation';
+export * from './useLayout';

package/dist/types/composables/useLayout/index.d.ts

@@ -1,5 +1,5 @@
 import type { LayoutImage } from './index.d';
-declare function useLayout(): {
+export declare function useLayout(): {
     setLayoutImage: (image: LayoutImage) => void;
     setPrimaryColors: (color: string, colorActive: string) => void;
     setSecondaryColors: (color: string, colorActive: string) => void;
@@ -11,4 +11,4 @@ declare function useLayout(): {
         secondaryColorActive: import("vue").Ref<string | null>;
     };
 };
-export default useLayout;
+export type { LayoutImage };

package/dist/types/composables/useNavigation/index.d.ts

@@ -1,8 +1,9 @@
 import type { Component } from 'vue';
+import type { MaybeRef } from '~/modules/typings/reactivity';
 import type { NavigationItem, Logo } from './index.d';
-declare function useNavigation(): {
-    setNavigationItems: (items: NavigationItem[]) => void;
-    setNavigationComponent: (component: Component) => void;
+export declare function useNavigation(): {
+    setNavigationItems: (items: MaybeRef<NavigationItem[]>) => void;
+    setNavigationComponent: (value: 'a' | Component) => void;
     setLogo: (logo: Logo) => void;
     openMainMenu: () => void;
     closeMainMenu: () => void;
@@ -12,12 +13,134 @@ declare function useNavigation(): {
     toggleMobileMenu: () => void;
     navigationItems: import("vue").Ref<{
         name: string;
-        to: string;
-        icon: string | import("vue").FunctionalComponent<{}, {}>;
+        icon: string | import("vue").FunctionalComponent<any, any> | {
+            new (...args: any[]): any;
+            __isFragment?: undefined;
+            __isTeleport?: undefined;
+            __isSuspense?: undefined;
+        } | {
+            [x: string]: any;
+            setup?: ((this: void, props: Readonly<import("@vue/shared").LooseRequired<any>>, ctx: {
+                attrs: {
+                    [x: string]: unknown;
+                };
+                slots: Readonly<{
+                    [name: string]: import("vue").Slot | undefined;
+                }>;
+                emit: ((event: unknown, ...args: any[]) => void) | ((event: string, ...args: any[]) => void);
+                expose: (exposed?: Record<string, any> | undefined) => void;
+            }) => any) | undefined;
+            name?: string | undefined;
+            template?: string | object | undefined;
+            render?: Function | undefined;
+            components?: Record<string, Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>> | undefined;
+            directives?: Record<string, import("vue").Directive<any, any>> | undefined;
+            inheritAttrs?: boolean | undefined;
+            emits?: any;
+            expose?: string[] | undefined;
+            serverPrefetch?: (() => void | Promise<any>) | undefined;
+            compilerOptions?: {
+                isCustomElement?: ((tag: string) => boolean) | undefined;
+                whitespace?: "preserve" | "condense" | undefined;
+                comments?: boolean | undefined;
+                delimiters?: [string, string] | undefined;
+            } | undefined;
+            call?: ((this: unknown, ...args: unknown[]) => never) | undefined;
+            __isFragment?: undefined;
+            __isTeleport?: undefined;
+            __isSuspense?: undefined;
+            __defaults?: {} | undefined;
+            compatConfig?: {
+                GLOBAL_MOUNT?: boolean | "suppress-warning" | undefined;
+                GLOBAL_MOUNT_CONTAINER?: boolean | "suppress-warning" | undefined;
+                GLOBAL_EXTEND?: boolean | "suppress-warning" | undefined;
+                GLOBAL_PROTOTYPE?: boolean | "suppress-warning" | undefined;
+                GLOBAL_SET?: boolean | "suppress-warning" | undefined;
+                GLOBAL_DELETE?: boolean | "suppress-warning" | undefined;
+                GLOBAL_OBSERVABLE?: boolean | "suppress-warning" | undefined;
+                GLOBAL_PRIVATE_UTIL?: boolean | "suppress-warning" | undefined;
+                CONFIG_SILENT?: boolean | "suppress-warning" | undefined;
+                CONFIG_DEVTOOLS?: boolean | "suppress-warning" | undefined;
+                CONFIG_KEY_CODES?: boolean | "suppress-warning" | undefined;
+                CONFIG_PRODUCTION_TIP?: boolean | "suppress-warning" | undefined;
+                CONFIG_IGNORED_ELEMENTS?: boolean | "suppress-warning" | undefined;
+                CONFIG_WHITESPACE?: boolean | "suppress-warning" | undefined;
+                CONFIG_OPTION_MERGE_STRATS?: boolean | "suppress-warning" | undefined;
+                INSTANCE_SET?: boolean | "suppress-warning" | undefined;
+                INSTANCE_DELETE?: boolean | "suppress-warning" | undefined;
+                INSTANCE_DESTROY?: boolean | "suppress-warning" | undefined;
+                INSTANCE_EVENT_EMITTER?: boolean | "suppress-warning" | undefined;
+                INSTANCE_EVENT_HOOKS?: boolean | "suppress-warning" | undefined;
+                INSTANCE_CHILDREN?: boolean | "suppress-warning" | undefined;
+                INSTANCE_LISTENERS?: boolean | "suppress-warning" | undefined;
+                INSTANCE_SCOPED_SLOTS?: boolean | "suppress-warning" | undefined;
+                INSTANCE_ATTRS_CLASS_STYLE?: boolean | "suppress-warning" | undefined;
+                OPTIONS_DATA_FN?: boolean | "suppress-warning" | undefined;
+                OPTIONS_DATA_MERGE?: boolean | "suppress-warning" | undefined;
+                OPTIONS_BEFORE_DESTROY?: boolean | "suppress-warning" | undefined;
+                OPTIONS_DESTROYED?: boolean | "suppress-warning" | undefined;
+                WATCH_ARRAY?: boolean | "suppress-warning" | undefined;
+                PROPS_DEFAULT_THIS?: boolean | "suppress-warning" | undefined;
+                V_ON_KEYCODE_MODIFIER?: boolean | "suppress-warning" | undefined;
+                CUSTOM_DIR?: boolean | "suppress-warning" | undefined;
+                ATTR_FALSE_VALUE?: boolean | "suppress-warning" | undefined;
+                ATTR_ENUMERATED_COERCION?: boolean | "suppress-warning" | undefined;
+                TRANSITION_CLASSES?: boolean | "suppress-warning" | undefined;
+                TRANSITION_GROUP_ROOT?: boolean | "suppress-warning" | undefined;
+                COMPONENT_ASYNC?: boolean | "suppress-warning" | undefined;
+                COMPONENT_FUNCTIONAL?: boolean | "suppress-warning" | undefined;
+                COMPONENT_V_MODEL?: boolean | "suppress-warning" | undefined;
+                RENDER_FUNCTION?: boolean | "suppress-warning" | undefined;
+                FILTERS?: boolean | "suppress-warning" | undefined;
+                PRIVATE_APIS?: boolean | "suppress-warning" | undefined;
+                MODE?: 2 | 3 | ((comp: Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | null) => 2 | 3) | undefined;
+            } | undefined;
+            data?: ((this: any, vm: any) => any) | undefined;
+            computed?: import("vue").ComputedOptions | undefined;
+            methods?: import("vue").MethodOptions | undefined;
+            watch?: {
+                [x: string]: (string | import("vue").WatchCallback<any, any> | ({
+                    handler: string | import("vue").WatchCallback<any, any>;
+                } & import("vue").WatchOptions<boolean>)) | (string | import("vue").WatchCallback<any, any> | ({
+                    handler: string | import("vue").WatchCallback<any, any>;
+                } & import("vue").WatchOptions<boolean>))[];
+            } | undefined;
+            provide?: import("vue").ComponentProvideOptions | undefined;
+            inject?: {} | string[] | undefined;
+            filters?: Record<string, Function> | undefined;
+            mixins?: any[] | undefined;
+            extends?: any;
+            beforeCreate?: (() => void) | undefined;
+            created?: (() => void) | undefined;
+            beforeMount?: (() => void) | undefined;
+            mounted?: (() => void) | undefined;
+            beforeUpdate?: (() => void) | undefined;
+            updated?: (() => void) | undefined;
+            activated?: (() => void) | undefined;
+            deactivated?: (() => void) | undefined;
+            beforeDestroy?: (() => void) | undefined;
+            beforeUnmount?: (() => void) | undefined;
+            destroyed?: (() => void) | undefined;
+            unmounted?: (() => void) | undefined;
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | undefined;
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | undefined;
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | undefined;
+            delimiters?: [string, string] | undefined;
+            __differentiator?: string | number | symbol | undefined;
+            __isBuiltIn?: boolean | undefined;
+            __file?: string | undefined;
+            __name?: string | undefined;
+        };
+        to?: unknown;
+        href?: string | undefined;
+        active?: boolean | undefined;
+        rounded?: boolean | undefined;
+        bottom?: boolean | undefined;
+        onClick?: (() => unknown) | undefined;
     }[]>;
     mainMenuOpen: import("vue").Ref<boolean>;
     mobileMenuOpen: import("vue").Ref<boolean>;
-    navigationComponent: import("vue").ShallowRef<string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
+    navigationComponent: import("vue").ShallowRef<Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | "a">;
     logo: import("vue").Ref<string | import("vue").FunctionalComponent<any, any> | {
         new (...args: any[]): any;
         __isFragment?: undefined;
@@ -136,5 +259,6 @@ declare function useNavigation(): {
         __file?: string | undefined;
         __name?: string | undefined;
     } | null>;
+    contactRoute: import("vue").Ref<string | null | undefined>;
 };
-export default useNavigation;
+export type { NavigationItem, Logo };

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}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.top-14{top:3.5rem}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-auto{margin-bottom:auto}.ml-3{margin-left:.75rem}.mr-3{margin-right:.75rem}.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-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-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-0{--tw-translate-y:0px}.translate-y-0,.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))}.translate-y-full{--tw-translate-y:100%}.transform{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-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-lg{border-radius:.5rem}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.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-2{padding:.5rem}.p-4{padding:1rem}.px-10{padding-left:2.5rem;padding-right:2.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}.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}.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:hover{background-color:var(--color-primary)}.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}@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-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))}}@media (min-width:1200px){.lg\:hidden{display:none}}
+/*! 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}}

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"),k={small:["h-5","w-5"],medium:["h-7","w-7"],large:["h-10","w-10"]},w=e.createElementVNode("circle",{stroke:"currentColor",class:"opacity-25","stroke-width":"4",cx:"12",cy:"12",r:"10"},null,-1),x=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=[w,x],v=e.defineComponent({__name:"AppLoader",props:{size:{default:"medium"}},setup(t){return(n,l)=>(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass([e.unref(k)[t.size],"animate-spin"]),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},B,2))}}),b={class:"app-button__icon h-4"},C=e.defineComponent({__name:"ButtonIconSlot",props:{loading:{type:Boolean}},setup(t){return(n,l)=>(e.openBlock(),e.createElementBlock("span",b,[t.loading?(e.openBlock(),e.createBlock(v,{key:0,class:"w-4"})):e.renderSlot(n.$slots,"default",{key:1},void 0,!0)]))}});const M=(t,n)=>{const l=t.__vccOpts||t;for(const[o,a]of n)l[o]=a;return l},_=M(C,[["__scopeId","data-v-04d5f165"]]),E={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"]},N={small:["px-5","py-2"],medium:["px-5","py-3"],large:["px-5","py-4"]},V=["type","disabled"],$=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,l)=>(e.openBlock(),e.createElementBlock("button",{type:t.type,disabled:t.disabled||t.loading,class:e.normalizeClass([[...e.unref(E)[t.colorType],...e.unref(N)[t.size]],"app-button inline-flex items-center whitespace-nowrap rounded-lg border text-sm font-semibold focus:outline-none disabled:cursor-not-allowed disabled:select-none"])},[n.$slots.leadingIcon||t.loading?(e.openBlock(),e.createBlock(_,{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(_,{key:1,class:"ml-3","data-test-trailing-icon":""},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"trailingIcon")]),_:3})):e.createCommentVNode("",!0)],10,V))}}),r={navigationItems:e.ref([]),mainMenuOpen:e.ref(!1),mobileMenuOpen:e.ref(!1),navigationComponent:e.shallowRef("a"),logo:e.ref(null)};function d(){function t(s){r.navigationItems.value=s}function n(s){r.navigationComponent.value=s}function l(s){r.logo.value=s}function o(){r.mainMenuOpen.value=!0}function a(){r.mainMenuOpen.value=!1}function i(){r.mainMenuOpen.value=!r.mainMenuOpen.value}function m(){r.mobileMenuOpen.value=!0}function h(){r.mobileMenuOpen.value=!1}function u(){r.mobileMenuOpen.value=!r.mobileMenuOpen.value}return{...r,setNavigationItems:t,setNavigationComponent:n,setLogo:l,openMainMenu:o,closeMainMenu:a,toggleMainMenu:i,openMobileMenu:m,closeMobileMenu:h,toggleMobileMenu:u}}const c={layoutImage:e.ref(null),colors:{primaryColor:e.ref(null),primaryColorActive:e.ref(null),secondaryColor:e.ref(null),secondaryColorActive:e.ref(null)}};function g(){function t(o){c.layoutImage.value=o}function n(o,a){c.colors.primaryColor.value=o,c.colors.primaryColorActive.value=a,document.documentElement.style.setProperty("--color-primary",o),document.documentElement.style.setProperty("--color-primary-active",a)}function l(o,a){c.colors.secondaryColor.value=o,c.colors.secondaryColorActive.value=a,document.documentElement.style.setProperty("--color-secondary",o),document.documentElement.style.setProperty("--color-secondary-active",a)}return{...c,setLayoutImage:t,setPrimaryColors:n,setSecondaryColors:l}}function I(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 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:"M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"})])}function O(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 S={class:"pl-7 text-lg font-semibold text-zinc-900 md:hidden"},f=e.defineComponent({__name:"NavigationItem",props:{item:null},setup(t){const{navigationComponent:n}=d();return(l,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(n)),{to:t.item.to,class:"flex h-10 w-full cursor-pointer items-center rounded-lg text-center hover:bg-primary md:w-10 md:justify-center"},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.item.icon),{class:"h-5 w-5 text-zinc-900 md:text-white","data-test-icon":""})),e.createElementVNode("span",S,e.toDisplayString(t.item.name),1)]),_:1},8,["to"]))}}),L={class:"flex items-center justify-between bg-zinc-50 p-2 text-black md:hidden"},A=["innerHTML"],j=e.createElementVNode("div",null," avatar ",-1),P={class:"relative flex h-full w-full flex-1 flex-col bg-white focus:outline-none","data-test-navigation-wrapper":""},T={class:"h-0 flex-1 overflow-y-auto p-4","data-test-navigation-links-wrapper":""},D={"aria-label":"MainMenu",class:"mt-5"},H={class:"mb-auto"},q=e.defineComponent({__name:"Mobile",setup(t){const{logo:n,navigationItems:l,mobileMenuOpen:o,toggleMobileMenu:a,closeMobileMenu:i}=d(),m=e.computed(()=>o.value?O:I);return(h,u)=>(e.openBlock(),e.createElementBlock("div",L,[e.createElementVNode("div",{class:"inline-flex cursor-pointer items-center justify-center rounded-sm !p-2 hover:text-primary focus:outline-none","data-test-menu-icon-wrapper":"",onClick:u[0]||(u[0]=(...s)=>e.unref(a)&&e.unref(a)(...s))},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(m)),{class:"block h-6 w-6 text-black","aria-hidden":"true"}))]),e.createElementVNode("div",{"data-test-logo-wrapper":"",innerHTML:e.unref(n)},null,8,A),j,e.createVNode(e.unref(p.TransitionRoot),{show:e.unref(o),as:"template"},{default:e.withCtx(()=>[e.createVNode(e.unref(p.Dialog),{as:"div",class:"fixed inset-0 top-14 z-50 flex lg:hidden",onClose:e.unref(i)},{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",P,[e.createElementVNode("div",T,[e.createElementVNode("nav",D,[e.createElementVNode("ul",H,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(l),s=>(e.openBlock(),e.createElementBlock("li",{key:s.name,"data-test-navigation-item":""},[e.createVNode(f,{item:s},null,8,["item"])]))),128))])])])])]),_:1})]),_:1},8,["onClose"])]),_:1},8,["show"])]))}}),F={class:"mx-auto mb-auto"},R={class:"mx-auto mt-auto"},y=e.defineComponent({__name:"AppNavigationMenu",setup(t){const{navigationItems:n,mainMenuOpen:l}=d();return(o,a)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("aside",{class:e.normalizeClass([{"px-3 md:!w-20":e.unref(l)},"sticky 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",F,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(n),i=>(e.openBlock(),e.createElementBlock("li",{key:i.name,"data-test-navigation-item":""},[e.createVNode(f,{item:i},null,8,["item"])]))),128))]),e.createElementVNode("ul",R,[e.createElementVNode("li",null,[e.createVNode(f,{item:{name:"help",to:"/",icon:e.unref(z)}},null,8,["item"])])])],2),e.createVNode(q)]))}}),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}=g();return(l,o)=>(e.openBlock(),e.createElementBlock("div",G,[e.createVNode(e.unref(y)),e.createElementVNode("main",J,[e.createElementVNode("div",K,[e.renderSlot(l.$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=$;exports.AppLoader=v;exports.AppNavigationMenu=y;exports.AuthLayout=W;exports.useLayout=g;exports.useNavigation=d;
+"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;

package/dist/ui.js

@@ -1,57 +1,61 @@
-import { defineComponent as p, openBlock as a, createElementBlock as i, normalizeClass as C, unref as n, createElementVNode as o, createBlock as v, renderSlot as g, withCtx as h, createCommentVNode as x, ref as d, shallowRef as O, resolveDynamicComponent as b, toDisplayString as A, computed as L, createVNode as m, Fragment as z, renderList as B } from "vue";
-import { TransitionRoot as j, Dialog as N, TransitionChild as P } from "@headlessui/vue";
-const S = {
+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 = {
   small: ["h-5", "w-5"],
   medium: ["h-7", "w-7"],
   large: ["h-10", "w-10"]
-}, T = /* @__PURE__ */ o("circle", {
+}, V = /* @__PURE__ */ s("circle", {
   stroke: "currentColor",
   class: "opacity-25",
   "stroke-width": "4",
   cx: "12",
   cy: "12",
   r: "10"
-}, null, -1), E = /* @__PURE__ */ o("path", {
+}, null, -1), D = /* @__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 = [
-  T,
-  E
-], V = /* @__PURE__ */ p({
+  V,
+  D
+], F = /* @__PURE__ */ h({
   __name: "AppLoader",
   props: {
     size: { default: "medium" }
   },
   setup(e) {
-    return (t, s) => (a(), i("svg", {
-      class: C([n(S)[e.size], "animate-spin"]),
+    return (t, a) => (o(), r("svg", {
+      class: _([n(R)[e.size], "animate-spin"]),
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "none"
     }, H, 2));
   }
-}), D = { class: "app-button__icon h-4" }, R = /* @__PURE__ */ p({
+}), q = { class: "app-button__icon h-4" }, G = /* @__PURE__ */ h({
   __name: "ButtonIconSlot",
   props: {
     loading: { type: Boolean }
   },
   setup(e) {
-    return (t, s) => (a(), i("span", D, [
-      e.loading ? (a(), v(V, {
+    return (t, a) => (o(), r("span", q, [
+      e.loading ? (o(), y(F, {
         key: 0,
         class: "w-4"
-      })) : g(t.$slots, "default", { key: 1 }, void 0, !0)
+      })) : v(t.$slots, "default", { key: 1 }, void 0, !0)
     ]));
   }
 });
-const F = (e, t) => {
-  const s = e.__vccOpts || e;
-  for (const [l, r] of t)
-    s[l] = r;
-  return s;
-}, I = /* @__PURE__ */ F(R, [["__scopeId", "data-v-04d5f165"]]), q = {
+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 = {
+  plain: [
+    "text-primary",
+    "border-0"
+  ],
   primary: [
     "text-white",
     "bg-primary",
@@ -65,11 +69,11 @@ const F = (e, t) => {
     "enabled:hover:text-white",
     "enabled:hover:bg-primary"
   ]
-}, G = {
+}, Q = {
   small: ["px-5", "py-2"],
   medium: ["px-5", "py-3"],
   large: ["px-5", "py-4"]
-}, J = ["type", "disabled"], he = /* @__PURE__ */ p({
+}, U = ["type", "disabled"], ve = /* @__PURE__ */ h({
   __name: "AppButton",
   props: {
     size: { default: "medium" },
@@ -79,114 +83,115 @@ const F = (e, t) => {
     loading: { type: Boolean, default: !1 }
   },
   setup(e) {
-    return (t, s) => (a(), i("button", {
+    return (t, a) => (o(), r("button", {
       type: e.type,
       disabled: e.disabled || e.loading,
-      class: C([[
-        ...n(q)[e.colorType],
-        ...n(G)[e.size]
-      ], "app-button inline-flex items-center whitespace-nowrap rounded-lg border text-sm font-semibold focus:outline-none disabled:cursor-not-allowed disabled:select-none"])
+      class: _([[
+        ...n(K)[e.colorType],
+        ...n(Q)[e.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 ? (a(), v(I, {
+      t.$slots.leadingIcon || e.loading ? (o(), y(A, {
         key: 0,
         loading: e.loading,
         class: "mr-3",
         "data-test-leading-icon": ""
       }, {
-        default: h(() => [
-          g(t.$slots, "leadingIcon")
+        default: f(() => [
+          v(t.$slots, "leadingIcon")
         ]),
         _: 3
-      }, 8, ["loading"])) : x("", !0),
-      g(t.$slots, "default"),
-      t.$slots.trailingIcon ? (a(), v(I, {
+      }, 8, ["loading"])) : b("", !0),
+      v(t.$slots, "default"),
+      t.$slots.trailingIcon ? (o(), y(A, {
         key: 1,
         class: "ml-3",
         "data-test-trailing-icon": ""
       }, {
-        default: h(() => [
-          g(t.$slots, "trailingIcon")
+        default: f(() => [
+          v(t.$slots, "trailingIcon")
         ]),
         _: 3
-      })) : x("", !0)
-    ], 10, J));
+      })) : b("", !0)
+    ], 10, U));
   }
-}), c = {
-  navigationItems: d([]),
-  mainMenuOpen: d(!1),
-  mobileMenuOpen: d(!1),
-  navigationComponent: O("a"),
-  logo: d(null)
+}), d = {
+  navigationItems: p([]),
+  mainMenuOpen: p(!1),
+  mobileMenuOpen: p(!1),
+  navigationComponent: j("a"),
+  logo: p(null),
+  contactRoute: p()
 };
-function k() {
+function M() {
   function e(u) {
-    c.navigationItems.value = u;
+    d.navigationItems.value = S(u) ? u == null ? void 0 : u.value : u;
   }
   function t(u) {
-    c.navigationComponent.value = u;
+    d.navigationComponent.value = u;
   }
-  function s(u) {
-    c.logo.value = u;
+  function a(u) {
+    d.logo.value = u;
   }
   function l() {
-    c.mainMenuOpen.value = !0;
+    d.mainMenuOpen.value = !0;
   }
-  function r() {
-    c.mainMenuOpen.value = !1;
+  function i() {
+    d.mainMenuOpen.value = !1;
   }
-  function f() {
-    c.mainMenuOpen.value = !c.mainMenuOpen.value;
+  function c() {
+    d.mainMenuOpen.value = !d.mainMenuOpen.value;
   }
-  function w() {
-    c.mobileMenuOpen.value = !0;
+  function C() {
+    d.mobileMenuOpen.value = !0;
   }
-  function $() {
-    c.mobileMenuOpen.value = !1;
+  function B() {
+    d.mobileMenuOpen.value = !1;
   }
-  function y() {
-    c.mobileMenuOpen.value = !c.mobileMenuOpen.value;
+  function w() {
+    d.mobileMenuOpen.value = !d.mobileMenuOpen.value;
   }
   return {
-    ...c,
+    ...d,
     setNavigationItems: e,
     setNavigationComponent: t,
-    setLogo: s,
+    setLogo: a,
     openMainMenu: l,
-    closeMainMenu: r,
-    toggleMainMenu: f,
-    openMobileMenu: w,
-    closeMobileMenu: $,
-    toggleMobileMenu: y
+    closeMainMenu: i,
+    toggleMainMenu: c,
+    openMobileMenu: C,
+    closeMobileMenu: B,
+    toggleMobileMenu: w
   };
 }
-const _ = {
-  layoutImage: d(null),
+const g = {
+  layoutImage: p(null),
   colors: {
-    primaryColor: d(null),
-    primaryColorActive: d(null),
-    secondaryColor: d(null),
-    secondaryColorActive: d(null)
+    primaryColor: p(null),
+    primaryColorActive: p(null),
+    secondaryColor: p(null),
+    secondaryColorActive: p(null)
   }
 };
-function K() {
+function W() {
   function e(l) {
-    _.layoutImage.value = l;
+    g.layoutImage.value = l;
   }
-  function t(l, r) {
-    _.colors.primaryColor.value = l, _.colors.primaryColorActive.value = r, document.documentElement.style.setProperty("--color-primary", l), document.documentElement.style.setProperty("--color-primary-active", r);
+  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 s(l, r) {
-    _.colors.secondaryColor.value = l, _.colors.secondaryColorActive.value = r, document.documentElement.style.setProperty("--color-secondary", l), document.documentElement.style.setProperty("--color-secondary-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);
   }
   return {
-    ..._,
+    ...g,
     setLayoutImage: e,
     setPrimaryColors: t,
-    setSecondaryColors: s
+    setSecondaryColors: a
   };
 }
-function Q(e, t) {
-  return a(), i("svg", {
+function X(e, t) {
+  return o(), r("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -194,31 +199,15 @@ function Q(e, t) {
     stroke: "currentColor",
     "aria-hidden": "true"
   }, [
-    o("path", {
+    s("path", {
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
       d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
     })
   ]);
 }
-function U(e, t) {
-  return a(), i("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    "stroke-width": "1.5",
-    stroke: "currentColor",
-    "aria-hidden": "true"
-  }, [
-    o("path", {
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      d: "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
-    })
-  ]);
-}
-function W(e, t) {
-  return a(), i("svg", {
+function Y(e, t) {
+  return o(), r("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -226,82 +215,115 @@ function W(e, t) {
     stroke: "currentColor",
     "aria-hidden": "true"
   }, [
-    o("path", {
+    s("path", {
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
       d: "M6 18L18 6M6 6l12 12"
     })
   ]);
 }
-const X = { class: "pl-7 text-lg font-semibold text-zinc-900 md:hidden" }, M = /* @__PURE__ */ p({
+const Z = {
+  class: "pl-7 text-lg font-semibold text-zinc-900 md:hidden",
+  "data-test-name": ""
+}, I = /* @__PURE__ */ h({
   __name: "NavigationItem",
   props: {
     item: null
   },
   setup(e) {
-    const { navigationComponent: t } = k();
-    return (s, l) => (a(), v(b(n(t)), {
+    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,
-      class: "flex h-10 w-full cursor-pointer items-center rounded-lg text-center hover:bg-primary md:w-10 md:justify-center"
+      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
+      }, "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
     }, {
-      default: h(() => [
-        (a(), v(b(e.item.icon), {
-          class: "h-5 w-5 text-zinc-900 md:text-white",
+      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"]),
           "data-test-icon": ""
-        })),
-        o("span", X, A(e.item.name), 1)
+        }, {
+          default: f(() => [
+            N(O(e.item.icon), 1)
+          ]),
+          _: 1
+        }, 8, ["class"])),
+        s("span", Z, O(e.item.name), 1)
       ]),
       _: 1
-    }, 8, ["to"]));
+    }, 8, ["to", "href", "class", "onClick"]));
   }
-}), Y = { class: "flex items-center justify-between bg-zinc-50 p-2 text-black md:hidden" }, Z = ["innerHTML"], ee = /* @__PURE__ */ o("div", null, " avatar ", -1), te = {
+}), z = /* @__PURE__ */ h({
+  __name: "SupportItem",
+  setup(e) {
+    const { contactRoute: t, navigationComponent: a } = M();
+    return (l, i) => n(t) ? (o(), y(x(n(a)), {
+      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",
+      "data-test-help-icon": ""
+    }, {
+      default: f(() => [
+        N(" ? ")
+      ]),
+      _: 1
+    }, 8, ["to", "href"])) : b("", !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 = {
   class: "relative flex h-full w-full flex-1 flex-col bg-white focus:outline-none",
   "data-test-navigation-wrapper": ""
-}, ne = {
+}, ae = {
   class: "h-0 flex-1 overflow-y-auto p-4",
   "data-test-navigation-links-wrapper": ""
-}, oe = {
+}, le = {
   "aria-label": "MainMenu",
   class: "mt-5"
-}, ae = { class: "mb-auto" }, le = /* @__PURE__ */ p({
+}, se = { class: "mb-auto" }, ie = /* @__PURE__ */ h({
   __name: "Mobile",
   setup(e) {
     const {
       logo: t,
-      navigationItems: s,
+      navigationItems: a,
       mobileMenuOpen: l,
-      toggleMobileMenu: r,
-      closeMobileMenu: f
-    } = k(), w = L(() => l.value ? W : Q);
-    return ($, y) => (a(), i("div", Y, [
-      o("div", {
-        class: "inline-flex cursor-pointer items-center justify-center rounded-sm !p-2 hover:text-primary focus:outline-none",
+      toggleMobileMenu: i,
+      closeMobileMenu: c
+    } = M(), C = L(() => l.value ? Y : X);
+    return (B, w) => (o(), r("div", ee, [
+      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: y[0] || (y[0] = //@ts-ignore
-        (...u) => n(r) && n(r)(...u))
+        onClick: w[0] || (w[0] = //@ts-ignore
+        (...u) => n(i) && n(i)(...u))
       }, [
-        (a(), v(b(n(w)), {
+        (o(), y(x(n(C)), {
           class: "block h-6 w-6 text-black",
           "aria-hidden": "true"
         }))
       ]),
-      o("div", {
+      s("div", {
+        class: "w-1/3",
         "data-test-logo-wrapper": "",
         innerHTML: n(t)
-      }, null, 8, Z),
-      ee,
-      m(n(j), {
+      }, null, 8, te),
+      ne,
+      m(n(P), {
         show: n(l),
         as: "template"
       }, {
-        default: h(() => [
-          m(n(N), {
+        default: f(() => [
+          m(n(T), {
             as: "div",
-            class: "fixed inset-0 top-14 z-50 flex lg:hidden",
-            onClose: n(f)
+            class: "fixed inset-0 top-20 z-50 flex -translate-y-2 lg:hidden",
+            onClose: n(c)
           }, {
-            default: h(() => [
-              m(n(P), {
+            default: f(() => [
+              m(n(E), {
                 as: "template",
                 enter: "transition ease-in-out duration-300 transform",
                 "enter-from": "translate-y-full",
@@ -310,19 +332,20 @@ const X = { class: "pl-7 text-lg font-semibold text-zinc-900 md:hidden" }, M = /
                 "leave-from": "translate-y-0",
                 "leave-to": "translate-y-full"
               }, {
-                default: h(() => [
-                  o("div", te, [
-                    o("div", ne, [
-                      o("nav", oe, [
-                        o("ul", ae, [
-                          (a(!0), i(z, null, B(n(s), (u) => (a(), i("li", {
+                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,
                             "data-test-navigation-item": ""
                           }, [
-                            m(M, { item: u }, null, 8, ["item"])
+                            m(I, { item: u }, null, 8, ["item"])
                           ]))), 128))
                         ])
-                      ])
+                      ]),
+                      m(z)
                     ])
                   ])
                 ]),
@@ -333,70 +356,71 @@ const X = { class: "pl-7 text-lg font-semibold text-zinc-900 md:hidden" }, M = /
           }, 8, ["onClose"])
         ]),
         _: 1
-      }, 8, ["show"])
+      }, 8, ["show"]),
+      m(z)
     ]));
   }
-}), se = { class: "mx-auto mb-auto" }, ie = { class: "mx-auto mt-auto" }, re = /* @__PURE__ */ p({
+}), re = { class: "mx-auto mb-auto" }, ce = { class: "mx-auto mt-auto" }, ue = /* @__PURE__ */ h({
   __name: "AppNavigationMenu",
   setup(e) {
-    const { navigationItems: t, mainMenuOpen: s } = k();
-    return (l, r) => (a(), i("div", null, [
-      o("aside", {
-        class: C([{ "px-3 md:!w-20": n(s) }, "sticky hidden h-screen w-0 flex-col justify-center overflow-hidden py-5 transition-all duration-500 md:flex"]),
+    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"]),
         "data-test-main-menu": ""
       }, [
-        o("ul", se, [
-          (a(!0), i(z, null, B(n(t), (f) => (a(), i("li", {
-            key: f.name,
-            "data-test-navigation-item": ""
+        s("ul", re, [
+          (o(!0), r(k, null, $(n(t).filter((c) => c.bottom !== !0), (c) => (o(), r("li", {
+            key: c.name,
+            "data-test-top-navigation-item": ""
           }, [
-            m(M, { item: f }, null, 8, ["item"])
+            m(I, { item: c }, null, 8, ["item"])
           ]))), 128))
         ]),
-        o("ul", ie, [
-          o("li", null, [
-            m(M, {
-              item: {
-                name: "help",
-                to: "/",
-                icon: n(U)
-              }
-            }, null, 8, ["item"])
+        s("ul", ce, [
+          (o(!0), r(k, null, $(n(t).filter((c) => c.bottom), (c) => (o(), r("li", {
+            key: c.name,
+            "data-test-bottom-navigation-item": ""
+          }, [
+            m(I, { item: c }, null, 8, ["item"])
+          ]))), 128)),
+          s("li", null, [
+            m(z, { class: "!static" })
           ])
         ])
       ], 2),
-      m(le)
+      m(ie)
     ]));
   }
-}), ce = { class: "flex min-h-screen flex-col md:flex-row md:bg-secondary" }, ue = { 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" }, de = { class: "mx-auto md:max-w-lg" }, me = {
+}), 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 = {
   class: "hidden w-1/2 md:block",
   "data-test-layout-image-wrapper": ""
-}, pe = ["src"], ve = /* @__PURE__ */ p({
+}, he = ["src"], _e = /* @__PURE__ */ h({
   __name: "Auth",
   setup(e) {
-    const { layoutImage: t } = K();
-    return (s, l) => (a(), i("div", ce, [
-      m(n(re)),
-      o("main", ue, [
-        o("div", de, [
-          g(s.$slots, "default")
+    const { layoutImage: t } = W();
+    return (a, l) => (o(), r("div", de, [
+      m(n(ue)),
+      s("main", me, [
+        s("div", pe, [
+          v(a.$slots, "default")
         ])
       ]),
-      o("div", me, [
-        n(t) ? (a(), i("img", {
+      s("div", fe, [
+        n(t) ? (o(), r("img", {
           key: 0,
           src: n(t),
           class: "h-screen w-full object-fill"
-        }, null, 8, pe)) : x("", !0)
+        }, null, 8, he)) : b("", !0)
       ])
     ]));
   }
 });
 export {
-  he as AppButton,
-  V as AppLoader,
-  re as AppNavigationMenu,
-  ve as AuthLayout,
-  K as useLayout,
-  k as useNavigation
+  ve as AppButton,
+  F as AppLoader,
+  ue as AppNavigationMenu,
+  _e as AuthLayout,
+  W as useLayout,
+  M as useNavigation
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autoafleveren/ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "files": [
     "dist/*",
@@ -23,9 +23,8 @@
       "require": "./dist/icons.cjs",
       "types": "./dist/types/icons/index.d.ts"
     },
-    "./dist/style.css": "./dist/style.css",
+    "./dist/ui.css": "./dist/ui.css",
     "./tailwind.config.js": "./tailwind.config.js",
-    "./dist/config/nuxt.cjs": "./dist/config/nuxt.cjs",
     "./dist/config/eslint.cjs": "./dist/config/eslint.cjs",
     "./dist/config/tailwind/config.cjs": "./dist/config/tailwind/config.cjs"
   },
@@ -35,7 +34,7 @@
     "dev": "vite --port=80",
     "build:prepare": "rm -rf dist",
     "build": "yarn build:prepare && yarn build:ui && yarn build:icons && yarn build:config && yarn build:typescript && yarn build:css",
-    "build:ui": "LIB_NAME=ui NODE_ENV=production vite build",
+    "build:ui": "LIB_NAME=ui NODE_ENV=production vite build && mv dist/style.css dist/ui.css",
     "build:icons": "LIB_NAME=icons NODE_ENV=production vite build",
     "build:config": "cp -R ./src/config dist/config",
     "build:typescript": "vue-tsc -p tsconfig.build.json && mv dist/src dist/types",
@@ -55,60 +54,60 @@
   },
   "packageManager": "yarn@4.0.0-rc.40",
   "dependencies": {
-    "@headlessui/vue": "^1.7.12",
+    "@headlessui/vue": "^1.7.13",
     "@heroicons/vue": "^2.0.17",
     "@vitejs/plugin-vue": "^4.1.0",
     "autoprefixer": "^10.4.14",
     "tailwindcss": "^3.3.1",
-    "vite": "^4.2.1",
+    "vite": "^4.3.1",
     "vue": "^3.2.47",
-    "vue-docgen-api": "^4.64.1"
+    "vue-docgen-api": "^4.67.0"
   },
   "devDependencies": {
     "@babel/core": "^7.21.4",
     "@babel/preset-typescript": "^7.21.4",
     "@mdx-js/react": "^2.3.0",
-    "@programic/eslint-plugin": "^6.1.0",
+    "@programic/eslint-plugin": "^6.2.0",
     "@rushstack/eslint-patch": "^1.2.0",
-    "@storybook/addon-actions": "^7.0.3",
-    "@storybook/addon-docs": "^7.0.3",
-    "@storybook/addon-essentials": "^7.0.3",
-    "@storybook/addon-interactions": "^7.0.3",
-    "@storybook/addon-links": "^7.0.3",
+    "@storybook/addon-actions": "^7.0.6",
+    "@storybook/addon-docs": "^7.0.6",
+    "@storybook/addon-essentials": "^7.0.6",
+    "@storybook/addon-interactions": "^7.0.6",
+    "@storybook/addon-links": "^7.0.6",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-styling": "^1.0.0",
-    "@storybook/addons": "^7.0.3",
-    "@storybook/builder-vite": "^7.0.3",
-    "@storybook/client-api": "^7.0.3",
-    "@storybook/preview-web": "^7.0.3",
+    "@storybook/addon-styling": "^1.0.1",
+    "@storybook/addons": "^7.0.6",
+    "@storybook/builder-vite": "^7.0.6",
+    "@storybook/client-api": "^7.0.6",
+    "@storybook/preview-web": "^7.0.6",
     "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.3",
-    "@storybook/vue3": "^7.0.3",
-    "@storybook/vue3-vite": "^7.0.3",
+    "@storybook/theming": "^7.0.6",
+    "@storybook/vue3": "^7.0.6",
+    "@storybook/vue3-vite": "^7.0.6",
     "@types/eslint": "^8.37.0",
     "@types/jsdom": "^21.1.1",
     "@types/node": "^18.15.11",
-    "@types/react": "^18.0.35",
+    "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.57.1",
-    "@typescript-eslint/parser": "^5.57.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
     "@vue/test-utils": "^2.3.2",
     "@vue/tsconfig": "^0.1.3",
     "babel-loader": "^9.1.2",
-    "eslint": "^8.37.0",
+    "eslint": "^8.39.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-import-newlines": "^1.3.1",
     "eslint-plugin-tailwindcss": "^3.11.0",
     "eslint-plugin-unicorn": "^46.0.0",
-    "eslint-plugin-vitest": "^0.0.57",
-    "eslint-plugin-vue": "^9.10.0",
+    "eslint-plugin-vitest": "^0.1.4",
+    "eslint-plugin-vue": "^9.11.0",
     "jsdom": "^21.1.1",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.22",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.0.3",
+    "storybook": "^7.0.6",
     "storybook-dark-mode": "^3.0.0",
     "typescript": "^4.9.5",
     "vite-plugin-externals": "^0.6.2",

package/dist/config/nuxt.cjs

@@ -1,20 +0,0 @@
-module.exports = {
-  typescript: {
-    strict: true,
-  },
-
-  ignore: [
-    '__tests__',
-  ],
-
-  css: [
-    '~/assets/css/main.css',
-  ],
-
-  postcss: {
-    plugins: {
-      tailwindcss: {},
-      autoprefixer: {},
-    },
-  },
-};