uibee 1.6.12 → 2.0.0

package/dist/src/components/index.d.ts

@@ -1,5 +1,13 @@
-export { default as LoginPage } from './login/loginPage';
-export { default as Toaster, addToast } from './toast/toaster';
 export { default as Input } from './inputs/input';
 export { default as SwitchInput } from './inputs/switch';
 export { default as TagInput } from './inputs/tag';
+export { default as Logo } from './logo/logo';
+export { default as LogoSmall } from './logo/logoSmall';
+export { default as ThemeToggle } from './toggle/theme';
+export { default as LanguageToggle } from './toggle/language';
+export { default as Navbar } from './navbar/navbar';
+export { default as NavItem } from './navbar/navbarItem';
+export { default as NavDropdown } from './navbar/navbarDropdown';
+export { default as VersionTag } from './version/version';
+export { default as LoginPage } from './login/loginPage';
+export { default as Toaster, addToast } from './toast/toaster';

package/dist/src/components/index.js

@@ -1,6 +1,17 @@
-export { default as LoginPage } from './login/loginPage';
-export { default as Toaster, addToast } from './toast/toaster';
 // Input components
 export { default as Input } from './inputs/input';
 export { default as SwitchInput } from './inputs/switch';
 export { default as TagInput } from './inputs/tag';
+// Logos
+export { default as Logo } from './logo/logo';
+export { default as LogoSmall } from './logo/logoSmall';
+// Toggles
+export { default as ThemeToggle } from './toggle/theme';
+export { default as LanguageToggle } from './toggle/language';
+// Navbar
+export { default as Navbar } from './navbar/navbar';
+export { default as NavItem } from './navbar/navbarItem';
+export { default as NavDropdown } from './navbar/navbarDropdown';
+export { default as VersionTag } from './version/version';
+export { default as LoginPage } from './login/loginPage';
+export { default as Toaster, addToast } from './toast/toaster';

package/dist/src/components/login/loginPage.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LogIn } from 'lucide-react';
 import Link from 'next/link';
-import Image from 'next/image';
-import logo from '../../../images/logo-tekst-white.svg';
+import Logo from '../logo/logo';
 export default function LoginPage({ title, description, redirectURL, version, btg, handleSubmit }) {
-    return (_jsx("main", { className: 'w-full h-full flex items-center justify-center bg-login-800 p-8', children: _jsxs("div", { className: 'flex flex-col justify-center items-center bg-login-600 px-4 py-12 rounded-xl w-full max-w-md gap-4 md:gap-6', children: [_jsx("div", { className: 'relative aspect-[3/1] w-full', children: _jsx(Image, { src: logo, alt: 'Logo', fill: true, className: 'object-contain sm:px-12' }) }), _jsxs("h1", { className: 'text-3xl font-extrabold text-login text-center tracking-tight', children: [title, " ", btg ? ' - Break the Glass' : ''] }), description && (_jsx("p", { className: 'text-login-100 text-center font-medium text-lg mb-2 max-w-xs', children: description })), btg ? (_jsxs("form", { className: 'w-full flex flex-col gap-3 max-w-xs', onSubmit: e => {
+    return (_jsx("main", { className: 'w-full h-full flex items-center justify-center bg-login-800 p-8', children: _jsxs("div", { className: 'flex flex-col justify-center items-center bg-login-600 px-4 py-12 rounded-xl w-full max-w-md gap-4 md:gap-6', children: [_jsx("div", { className: 'relative aspect-[3/1] w-full', children: _jsx(Logo, { className: 'object-contain px-6 sm:px-12' }) }), _jsxs("h1", { className: 'text-3xl font-extrabold text-login text-center tracking-tight', children: [title, " ", btg ? ' - Break the Glass' : ''] }), description && (_jsx("p", { className: 'text-center font-medium text-lg mb-2 max-w-xs', children: description })), btg ? (_jsxs("form", { className: 'w-full flex flex-col gap-3 max-w-xs', onSubmit: e => {
                         e.preventDefault();
                         handleSubmit?.(new FormData(e.currentTarget));
                         e.currentTarget.reset();
-                    }, children: [_jsx("input", { type: 'text', name: 'name', placeholder: 'Name', className: 'py-2 px-3 rounded bg-login-900 text-login-50 font-medium focus:outline-none', required: true }), _jsx("input", { type: 'password', name: 'token', placeholder: 'Token', className: 'py-2 px-3 rounded bg-login-900 text-login-50 font-medium focus:outline-none', required: true }), _jsx("button", { type: 'submit', className: 'py-2 px-4 rounded-xl bg-login font-bold text-lg ' +
-                                'hover:bg-login/80 text-login-50 transition-all duration-200 mt-2', children: "Login" })] })) : (_jsx(Link, { href: redirectURL, className: 'w-full flex justify-center', children: _jsxs("button", { className: 'flex items-center justify-center gap-2 w-full max-w-xs py-3 px-6 rounded-xl bg-login font-bold text-lg ' +
-                            'hover:bg-login/80 text-login-50 transition-all duration-200 mb-2 mt-2', children: ["Login", _jsx(LogIn, { className: 'w-6 h-6' })] }) })), _jsxs("span", { className: 'text-login-100 text-sm mt-2', children: ["v", version] })] }) }));
+                    }, children: [_jsx("input", { type: 'text', name: 'name', placeholder: 'Name', className: 'py-2 px-3 rounded bg-login-900 font-medium focus:outline-none', required: true }), _jsx("input", { type: 'password', name: 'token', placeholder: 'Token', className: 'py-2 px-3 rounded bg-login-900 font-medium focus:outline-none', required: true }), _jsx("button", { type: 'submit', className: 'py-2 px-4 rounded-xl bg-login font-bold text-lg ' +
+                                'hover:bg-login/80 transition-all duration-200 mt-2', children: "Login" })] })) : (_jsx(Link, { href: redirectURL, className: 'w-full flex justify-center', children: _jsxs("button", { className: 'flex items-center justify-center gap-2 w-full max-w-xs py-3 px-6 rounded-xl bg-login font-bold text-lg ' +
+                            'hover:bg-login/80 transition-all duration-200 mb-2 mt-2', children: ["Login", _jsx(LogIn, { className: 'w-6 h-6' })] }) })), _jsxs("span", { className: 'text-sm mt-2', children: ["v", version] })] }) }));
 }

package/dist/src/components/logo/logo.d.ts

@@ -0,0 +1,5 @@
+interface LogoProps {
+    className?: string;
+}
+export default function Logo({ className }: LogoProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/logo/logo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Logo({ className }) {
+    const corner = 'fill-[var(--foreground)] transition-all duration-1000';
+    const letter = 'fill-none stroke-[var(--color-login)] stroke-[3.5px]';
+    return (_jsxs("svg", { className: `block w-full max-w-2xl mx-auto ${className || ''}`, viewBox: '0 0 147.02299 59.20511', children: [_jsx("path", { className: corner, d: 'm 28.77713,58.37738 v 0.76465 H 25.531 v -5.61816 h 0.91309 v 4.85351 z' }), _jsx("path", { className: corner, d: 'm 30.47831,59.142 h -0.917 v -5.61813 h 0.917 z' }), _jsx("path", { className: corner, d: 'M 36.46268,53.52387 V 59.142 H 35.99881 A 0.36347,0.36347 0 0 1 35.6785,58.98185 L 32.59256,55.018 c 0.0078,0.07617 0.01368,0.15039 0.01758,0.22461 0.0039,0.07422 0.0059,0.14258 0.0059,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.09864,0.0059 0.3128,0.3128 0 0 1 0.07617,0.02148 0.22919,0.22919 0 0 1 0.0664,0.04688 0.63781,0.63781 0 0 1 0.06641,0.07812 l 3.08984,3.96779 c -0.0078,-0.08105 -0.01367,-0.16015 -0.01757,-0.23828 -0.0039,-0.07813 -0.0059,-0.15039 -0.0059,-0.21875 v -3.6631 z' }), _jsx("path", { className: corner, d: 'm 39.84549,57.1684 a 2.91264,2.91264 0 0 1 -0.11523,0.84765 1.748,1.748 0 0 1 -0.34375,0.64063 1.52483,1.52483 0 0 1 -0.56543,0.40527 2.00691,2.00691 0 0 1 -0.78223,0.14258 3.23707,3.23707 0 0 1 -0.40234,-0.0254 3.44454,3.44454 0 0 1 -0.41309,-0.0801 l 0.04688,-0.5459 a 0.2079,0.2079 0 0 1 0.06055,-0.125 0.19754,0.19754 0 0 1 0.14257,-0.0469 0.74035,0.74035 0 0 1 0.18067,0.0293 1.36468,1.36468 0 0 0 0.71387,-0.041 0.74722,0.74722 0 0 0 0.3125,-0.2207 0.9864,0.9864 0 0 0 0.1914,-0.38574 2.19551,2.19551 0 0 0 0.06445,-0.57227 v -3.667 h 0.90918 z' }), _jsx("path", { className: corner, d: 'm 44.6326,58.40473 -0.0039,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z' }), _jsx("path", { className: corner, d: 'M 46.53592,54.26117 V 56.06 h 2.19629 v 0.7373 h -2.19629 v 2.3447 h -0.917 v -5.61813 h 3.50391 v 0.7373 z' }), _jsx("path", { className: corner, d: 'm 55.25956,56.33344 a 3.18179,3.18179 0 0 1 -0.20215,1.15039 2.6634,2.6634 0 0 1 -0.57227,0.90722 2.59685,2.59685 0 0 1 -0.88476,0.59473 3.17156,3.17156 0 0 1 -2.29492,0 2.62415,2.62415 0 0 1 -0.88672,-0.59473 2.65327,2.65327 0 0 1 -0.57422,-0.90722 3.37717,3.37717 0 0 1 0,-2.30176 2.67118,2.67118 0 0 1 0.57422,-0.90918 2.61491,2.61491 0 0 1 0.88672,-0.59668 3.1717,3.1717 0 0 1 2.29492,0 2.58781,2.58781 0 0 1 0.88476,0.59668 2.68144,2.68144 0 0 1 0.57227,0.90918 3.1871,3.1871 0 0 1 0.20215,1.15137 z m -0.93164,0 a 2.706,2.706 0 0 0 -0.13086,-0.87012 1.821,1.821 0 0 0 -0.375,-0.65527 1.63008,1.63008 0 0 0 -0.59082,-0.41407 2.16795,2.16795 0 0 0 -1.55664,0 1.65415,1.65415 0 0 0 -0.59278,0.41407 1.84212,1.84212 0 0 0 -0.3789,0.65527 2.92611,2.92611 0 0 0 0,1.74316 1.83766,1.83766 0 0 0 0.3789,0.6543 1.64222,1.64222 0 0 0 0.59278,0.40918 2.19564,2.19564 0 0 0 1.55664,0 1.61838,1.61838 0 0 0 0.59082,-0.40918 1.81652,1.81652 0 0 0 0.375,-0.6543 2.71589,2.71589 0 0 0 0.13086,-0.87304 z' }), _jsx("path", { className: corner, d: 'm 60.534,59.142 h -0.81543 a 0.377,0.377 0 0 1 -0.35156,-0.1875 l -1.31055,-1.8916 a 0.4267,0.4267 0 0 0 -0.14453,-0.14063 0.50286,0.50286 0 0 0 -0.23437,-0.043 H 57.17072 V 59.142 H 56.2576 v -5.61813 h 1.6543 a 3.54427,3.54427 0 0 1 0.9541,0.11328 1.80649,1.80649 0 0 1 0.65723,0.32226 1.25606,1.25606 0 0 1 0.37988,0.501 1.76427,1.76427 0 0 1 0.03516,1.19727 1.50418,1.50418 0 0 1 -0.25293,0.46093 1.61283,1.61283 0 0 1 -0.40821,0.3584 2.04861,2.04861 0 0 1 -0.5498,0.23828 0.92346,0.92346 0 0 1 0.28906,0.28516 z m -2.64551,-2.92578 a 1.763,1.763 0 0 0 0.5459,-0.07617 1.11007,1.11007 0 0 0 0.39063,-0.21289 0.87892,0.87892 0 0 0 0.23437,-0.3252 1.10093,1.10093 0 0 0 0.07715,-0.41992 0.84276,0.84276 0 0 0 -0.30371,-0.70215 1.46527,1.46527 0 0 0 -0.9209,-0.24219 h -0.74121 v 1.97852 z' }), _jsx("path", { className: corner, d: 'm 64.72049,58.40473 -0.0039,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z' }), _jsx("path", { className: corner, d: 'M 70.35721,53.52387 V 59.142 H 69.89335 A 0.36347,0.36347 0 0 1 69.57303,58.98185 L 66.4871,55.018 c 0.0078,0.07617 0.01367,0.15039 0.01757,0.22461 0.0039,0.07422 0.0059,0.14258 0.0059,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.09864,0.0059 0.3128,0.3128 0 0 1 0.07617,0.02148 0.22936,0.22936 0 0 1 0.06641,0.04688 0.63869,0.63869 0 0 1 0.0664,0.07812 l 3.08985,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z' }), _jsx("path", { className: corner, d: 'm 72.6121,59.142 h -0.917 v -5.61813 h 0.917 z' }), _jsx("path", { className: corner, d: 'M 78.59794,53.52387 V 59.142 H 78.13358 A 0.36344,0.36344 0 0 1 77.81327,58.98185 L 74.72733,55.018 c 0.008,0.07617 0.0137,0.15039 0.0176,0.22461 0.004,0.07422 0.006,0.14258 0.006,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.713,0.713 0 0 1 0.0986,0.0059 0.31254,0.31254 0 0 1 0.0762,0.02148 0.22936,0.22936 0 0 1 0.0664,0.04688 0.63869,0.63869 0 0 1 0.0664,0.07812 l 3.08984,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z' }), _jsx("path", { className: corner, d: 'M 84.53544,56.37641 V 58.6 a 3.24425,3.24425 0 0 1 -1.9502,0.60449 3.419,3.419 0 0 1 -1.23535,-0.21289 2.7275,2.7275 0 0 1 -0.94141,-0.59277 2.59231,2.59231 0 0 1 -0.60156,-0.90723 3.08634,3.08634 0 0 1 -0.21,-1.1582 3.23536,3.23536 0 0 1 0.20215,-1.165 2.5484,2.5484 0 0 1 1.49414,-1.498 3.29189,3.29189 0 0 1 1.20215,-0.209 3.52605,3.52605 0 0 1 0.62988,0.05273 3.11559,3.11559 0 0 1 0.54,0.14649 2.535,2.535 0 0 1 0.84668,0.52246 l -0.26074,0.418 a 0.26545,0.26545 0 0 1 -0.16016,0.12109 0.27377,0.27377 0 0 1 -0.21094,-0.04688 c -0.0752,-0.04492 -0.15527,-0.09082 -0.24023,-0.14062 a 2.01137,2.01137 0 0 0 -0.29,-0.13867 2.127,2.127 0 0 0 -0.37891,-0.10547 2.72656,2.72656 0 0 0 -0.50683,-0.041 2.09434,2.09434 0 0 0 -0.80176,0.14649 1.70173,1.70173 0 0 0 -0.61035,0.418 1.84692,1.84692 0 0 0 -0.39063,0.65722 2.5766,2.5766 0 0 0 -0.13672,0.86231 2.62333,2.62333 0 0 0 0.14453,0.89844 1.88731,1.88731 0 0 0 0.41016,0.67187 1.74772,1.74772 0 0 0 0.6416,0.419 2.55647,2.55647 0 0 0 1.459,0.0703 2.80344,2.80344 0 0 0 0.53222,-0.207 V 57.07074 H 82.928 a 0.19287,0.19287 0 0 1 -0.13964,-0.04883 0.16848,0.16848 0 0 1 -0.0508,-0.12695 v -0.51855 z' }), _jsx("path", { className: corner, d: 'm 89.1243,58.40473 -0.004,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z' }), _jsx("path", { className: corner, d: 'M 94.761,53.52387 V 59.142 H 94.29713 A 0.36347,0.36347 0 0 1 93.97682,58.98185 L 90.8909,55.018 c 0.008,0.07617 0.0137,0.15039 0.0176,0.22461 0.004,0.07422 0.006,0.14258 0.006,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.0986,0.0059 0.3128,0.3128 0 0 1 0.0762,0.02148 0.22919,0.22919 0 0 1 0.0664,0.04688 0.63781,0.63781 0 0 1 0.0664,0.07812 l 3.08984,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z' }), _jsx("path", { className: corner, d: 'M 98.95829,54.26117 V 56.06 h 2.19629 v 0.7373 h -2.19629 v 2.3447 h -0.917 v -5.61813 h 3.5039 v 0.7373 z' }), _jsx("path", { className: corner, d: 'm 107.68192,56.33344 a 3.18158,3.18158 0 0 1 -0.20215,1.15039 2.66353,2.66353 0 0 1 -0.57226,0.90722 2.597,2.597 0 0 1 -0.88477,0.59473 3.17156,3.17156 0 0 1 -2.29492,0 2.62415,2.62415 0 0 1 -0.88672,-0.59473 2.65327,2.65327 0 0 1 -0.57422,-0.90722 3.37717,3.37717 0 0 1 0,-2.30176 2.67118,2.67118 0 0 1 0.57422,-0.90918 2.61491,2.61491 0 0 1 0.88672,-0.59668 3.1717,3.1717 0 0 1 2.29492,0 2.588,2.588 0 0 1 0.88477,0.59668 2.68157,2.68157 0 0 1 0.57226,0.90918 3.18689,3.18689 0 0 1 0.20215,1.15137 z m -0.93164,0 a 2.706,2.706 0 0 0 -0.13086,-0.87012 1.82066,1.82066 0 0 0 -0.375,-0.65527 1.63,1.63 0 0 0 -0.59082,-0.41407 2.16795,2.16795 0 0 0 -1.55664,0 1.65411,1.65411 0 0 0 -0.59277,0.41407 1.84214,1.84214 0 0 0 -0.37891,0.65527 2.92632,2.92632 0 0 0 0,1.74316 1.83768,1.83768 0 0 0 0.37891,0.6543 1.64218,1.64218 0 0 0 0.59277,0.40918 2.19564,2.19564 0 0 0 1.55664,0 1.61829,1.61829 0 0 0 0.59082,-0.40918 1.81623,1.81623 0 0 0 0.375,-0.6543 2.71589,2.71589 0 0 0 0.13086,-0.87304 z' }), _jsx("path", { className: corner, d: 'm 112.95731,59.142 h -0.81543 a 0.377,0.377 0 0 1 -0.35156,-0.1875 l -1.31055,-1.8916 a 0.4267,0.4267 0 0 0 -0.14453,-0.14063 0.50286,0.50286 0 0 0 -0.23437,-0.043 H 109.594 V 59.142 h -0.91309 v -5.61813 h 1.6543 a 3.54427,3.54427 0 0 1 0.9541,0.11328 1.80649,1.80649 0 0 1 0.65723,0.32226 1.25606,1.25606 0 0 1 0.37988,0.501 1.76427,1.76427 0 0 1 0.0352,1.19727 1.50418,1.50418 0 0 1 -0.25293,0.46093 1.61283,1.61283 0 0 1 -0.40821,0.3584 2.04861,2.04861 0 0 1 -0.5498,0.23828 0.92346,0.92346 0 0 1 0.28906,0.28516 z m -2.64551,-2.92578 a 1.763,1.763 0 0 0 0.5459,-0.07617 1.11007,1.11007 0 0 0 0.39063,-0.21289 0.87892,0.87892 0 0 0 0.23437,-0.3252 1.10093,1.10093 0 0 0 0.0772,-0.41992 0.84276,0.84276 0 0 0 -0.30371,-0.70215 1.46527,1.46527 0 0 0 -0.9209,-0.24219 H 109.594 v 1.97852 z' }), _jsx("path", { className: corner, d: 'm 116.4954,59.142 h -0.917 v -5.61813 h 0.917 z' }), _jsx("path", { className: corner, d: 'm 121.69559,54.28461 h -1.75195 V 59.142 h -0.9082 v -4.85739 h -1.75586 v -0.76074 h 4.416 z' }), _jsx("polyline", { className: letter, style: { strokeMiterlimit: 10 }, points: '47.871 98.1 33.189 98.1 33.189 83.418', transform: 'translate(-31.392,-41.894)' }), _jsx("polyline", { className: letter, style: { strokeMiterlimit: 10 }, points: '33.142 58.326 33.142 43.644 47.824 43.644', transform: 'translate(-31.392,-41.894)' }), _jsx("polyline", { className: letter, style: { strokeMiterlimit: 10 }, points: '161.983 98.122 176.665 98.122 176.665 83.44', transform: 'translate(-31.392,-41.894)' }), _jsx("polyline", { className: letter, style: { strokeMiterlimit: 10 }, points: '176.665 58.372 176.665 43.69 161.983 43.69', transform: 'translate(-31.392,-41.894)' }), _jsx("path", { className: corner, d: 'm 30.02449,40.19351 v 4.12842 H 12.4991 V 13.99038 h 4.92871 v 26.20313 z' }), _jsx("path", { className: corner, d: 'm 61.53523,29.1564 a 17.15942,17.15942 0 0 1 -1.09473,6.21338 14.35971,14.35971 0 0 1 -3.08593,4.89746 14.091,14.091 0 0 1 -4.78125,3.21191 17.1289,17.1289 0 0 1 -12.38575,0 13.98317,13.98317 0 0 1 -7.88867,-8.10937 18.18161,18.18161 0 0 1 0,-12.42725 14.39119,14.39119 0 0 1 3.09668,-4.90771 14.13157,14.13157 0 0 1 4.792,-3.22315 17.13565,17.13565 0 0 1 12.38575,0 14.02046,14.02046 0 0 1 4.78125,3.22315 14.47032,14.47032 0 0 1 3.08593,4.90771 17.16209,17.16209 0 0 1 1.09472,6.21387 z m -5.03418,0 a 14.62587,14.62587 0 0 0 -0.70508,-4.69727 9.9446,9.9446 0 0 0 -2.02246,-3.53906 8.80545,8.80545 0 0 0 -3.1914,-2.23242 11.719,11.719 0 0 0 -8.4043,0 8.90077,8.90077 0 0 0 -3.20117,2.23242 9.96735,9.96735 0 0 0 -2.043,3.53906 15.81644,15.81644 0 0 0 0,9.415 9.847,9.847 0 0 0 2.043,3.52832 8.85094,8.85094 0 0 0 3.20117,2.21192 11.87213,11.87213 0 0 0 8.4043,0 8.75623,8.75623 0 0 0 3.1914,-2.21192 9.82454,9.82454 0 0 0 2.02249,-3.52828 14.69371,14.69371 0 0 0 0.70505,-4.71777 z' }), _jsx("path", { className: corner, d: 'm 91.76082,29.38784 v 12.00635 a 17.5354,17.5354 0 0 1 -10.53125,3.26465 18.41512,18.41512 0 0 1 -6.667,-1.148 14.80254,14.80254 0 0 1 -5.08691,-3.20166 14.0148,14.0148 0 0 1 -3.24316,-4.897 16.691,16.691 0 0 1 -1.1377,-6.25586 17.42935,17.42935 0 0 1 1.09473,-6.2876 13.74023,13.74023 0 0 1 8.06738,-8.08838 17.7222,17.7222 0 0 1 6.48828,-1.127 19.10354,19.10354 0 0 1 3.40137,0.28418 16.85244,16.85244 0 0 1 2.917,0.79 13.68442,13.68442 0 0 1 2.48633,1.22168 13.95372,13.95372 0 0 1 2.085,1.60058 l -1.41113,2.25391 a 1.40229,1.40229 0 0 1 -0.86426,0.65283 1.47784,1.47784 0 0 1 -1.13672,-0.25244 q -0.6123,-0.35816 -1.2959,-0.7583 a 11.33129,11.33129 0 0 0 -1.56933,-0.748 11.53387,11.53387 0 0 0 -2.043,-0.56836 14.78335,14.78335 0 0 0 -2.73828,-0.22119 11.32128,11.32128 0 0 0 -4.32813,0.78955 9.26752,9.26752 0 0 0 -3.29687,2.25391 9.99164,9.99164 0 0 0 -2.10645,3.54931 13.90267,13.90267 0 0 0 -0.7373,4.65528 14.11731,14.11731 0 0 0 0.77929,4.855 10.1425,10.1425 0 0 0 2.21192,3.62305 9.43419,9.43419 0 0 0 3.46484,2.26416 13.81975,13.81975 0 0 0 7.87793,0.3789 15.14816,15.14816 0 0 0 2.875,-1.11621 v -6.02383 h -4.2334 a 1.04883,1.04883 0 0 1 -0.75879,-0.26367 0.90553,0.90553 0 0 1 -0.27343,-0.68457 v -2.80127 z' }), _jsx("path", { className: corner, d: 'M 102.546,44.32193 H 97.59581 V 13.99038 h 4.95019 z' }), _jsx("path", { className: corner, d: 'm 134.8575,13.99038 v 30.33155 h -2.50684 a 2.14219,2.14219 0 0 1 -0.96875,-0.2002 2.26108,2.26108 0 0 1 -0.75879,-0.66357 L 113.962,22.05777 q 0.063,0.61083 0.0947,1.21093 0.0322,0.60058 0.0322,1.106 v 19.94723 h -4.3398 V 13.99038 h 2.57031 a 3.89092,3.89092 0 0 1 0.53711,0.03174 1.53328,1.53328 0 0 1 0.41016,0.11572 1.18964,1.18964 0 0 1 0.35839,0.25293 4.01792,4.01792 0 0 1 0.3584,0.4209 l 16.68164,21.42188 q -0.063,-0.65259 -0.0947,-1.28467 -0.0308,-0.63208 -0.0312,-1.17969 V 13.99038 Z' })] }));
+}

package/dist/src/components/logo/logoSmall.d.ts

@@ -0,0 +1 @@
+export default function LogoSmall(): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/logo/logoSmall.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function LogoSmall() {
+    const corner = 'fill-login';
+    const letter = 'fill-[var(--foreground)] transition-all duration-1000';
+    return (_jsxs("svg", { className: 'block h-full', viewBox: '0 0 100 100', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: [_jsx("path", { className: corner, d: 'M0 0H6.6667V28.3333H0V0Z' }), _jsx("path", { className: corner, d: 'M28.3333 0V6.6667H0V0H28.3333Z' }), _jsx("path", { className: corner, d: 'M100 0V6.6667H71.6667V0H100Z' }), _jsx("path", { className: corner, d: 'M100 28.3333H93.3333V0H100V28.3333Z' }), _jsx("path", { className: corner, d: 'M0 100V93.3333H28.3333V100H0Z' }), _jsx("path", { className: corner, d: 'M0 71.6667H6.6667V100H0V71.6667Z' }), _jsx("path", { className: corner, d: 'M100 100H93.3333V71.6667H100V100Z' }), _jsx("path", { className: corner, d: 'M71.6667 100V93.3333H100V100H71.6667Z' }), _jsx("path", { className: letter, d: 'M31.6667 18.3333H43.3334V81.6666H31.6667V18.3333Z' }), _jsx("path", { className: letter, d: 'M31.6667 70H68.3334V81.6667H31.6667V70Z' })] }));
+}

package/dist/src/components/navbar/navbar.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Language } from 'uibee/components';
+export type NavbarProps = {
+    lang: Language;
+    onlyLogo?: boolean;
+    theme: string;
+    token: string | null;
+    children: React.ReactNode;
+};
+export default function Navbar({ lang, onlyLogo, token, children }: NavbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/navbar/navbar.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import Link from 'next/link';
+import LogoSmall from '../logo/logoSmall';
+import LanguageToggle from '../toggle/language';
+import ThemeToggle from '../toggle/theme';
+import { LogOut } from 'lucide-react';
+function hamburgerStyle(isOpen, isSecond) {
+    return `bg-login-50 h-0.5 absolute w-8 transition-all duration-[400ms] left-2 ${isOpen
+        ? `top-6 ${isSecond ? 'rotate-45' : '-rotate-45'}`
+        : isSecond ? 'top-7' : 'top-4'}`;
+}
+export default function Navbar({ lang, onlyLogo, token, children }) {
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+    return (_jsx("div", { className: `${isMobileMenuOpen ? 'bg-[#181818f0]' : 'bg-[#18181899]'} backdrop-blur-xl fixed top-0 z-900 w-full`, children: _jsxs("div", { className: `flex w-full max-w-6xl m-auto p-2 transition duration-500 800px:justify-between 800px:p-4 ${isMobileMenuOpen ? 'h-screen bg-login-900/20 800px:h-20' : ''}`, children: [_jsx("div", { className: 'block h-12 p-1 800px:p-0', children: _jsx(Link, { href: '/', onClick: () => setIsMobileMenuOpen(false), children: _jsx(LogoSmall, {}) }) }), onlyLogo ? null : (_jsxs(_Fragment, { children: [_jsx("nav", { className: 'hidden 800px:flex 800px:justify-between 800px:items-center 800px:w-fill max-w-[50rem]', children: children }), _jsxs("nav", { className: 'flex w-[calc(100vw-8rem)] justify-end h-12 800px:w-fit', children: [_jsx(ThemeToggle, {}), _jsx(LanguageToggle, { language: lang }), _jsx(AuthButton, { token: token })] }), _jsxs("button", { className: 'w-12 h-12 relative cursor-pointer bg-none border-none 800px:hidden', onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen), children: [_jsx("div", { className: hamburgerStyle(isMobileMenuOpen) }), _jsx("div", { className: hamburgerStyle(isMobileMenuOpen, true) })] }), _jsx("nav", { className: `fixed top-16 w-[calc(100%-2rem)] max-w-[35rem] mx-auto left-0 right-0 800px:hidden
+                            transition-all duration-500 ease-in-out overflow-hidden 
+                            ${isMobileMenuOpen ? 'max-h-[calc(100vh-4rem)] opacity-100' : 'max-h-0 opacity-0'}`, onClick: () => setIsMobileMenuOpen(false), children: React.Children.map(children, (child, index) => (_jsx("div", { className: `transition-all duration-500 ease-out ${isMobileMenuOpen
+                                    ? 'opacity-100 transform translate-y-0'
+                                    : 'opacity-0 transform -translate-y-4'}`, style: {
+                                    transitionDelay: isMobileMenuOpen ? `${index * 80}ms` : '0ms'
+                                }, children: child }, index))) })] }))] }) }));
+}
+function AuthButton({ token }) {
+    return (_jsx("div", { className: 'rounded-[0.3rem] hover:bg-[#6464641a] h-12 w-12', children: token ? (_jsx(Link, { href: '/api/logout', prefetch: false, onClick: (e) => {
+                e.preventDefault();
+                window.location.href = '/api/logout';
+            }, className: 'grid items-center justify-center h-full w-full', children: _jsx(LogOut, { size: 24 }) })) : (_jsx(Link, { href: '/api/login', className: 'grid items-center justify-center h-full w-full', children: _jsx("div", { className: `relative w-[30px] h-5
+                        before:content-[""] before:absolute before:top-0 before:left-1/2 before:-translate-x-1/2
+                        before:w-[10px] before:h-[10px] before:border-2 before:border-login-50
+                        before:rounded-full before:bg-transparent
+                        after:content-[""] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2
+                        after:w-[18px] after:h-2 after:border-2 after:border-login-50
+                        after:rounded-t-[22px] after:border-b-0 after:bg-transparent
+                    ` }) })) }));
+}

package/dist/src/components/navbar/navbarDropdown.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type NavDropdownProps = {
+    children: ReactNode;
+    title: string;
+};
+export default function NavDropdown({ children, title }: NavDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/navbar/navbarDropdown.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDown } from 'lucide-react';
+import React, { useRef, useState } from 'react';
+export default function NavDropdown({ children, title }) {
+    const [isMobileDropdownOpen, setIsMobileDropdownOpen] = useState(false);
+    const navItemRef = useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'relative group hidden 800px:block', children: _jsxs("div", { className: 'outline-none', tabIndex: 0, ref: navItemRef, children: [_jsxs("div", { className: `list-none no-underline text-base leading-4 p-3 font-bold cursor-pointer flex flex-row items-center 
+                        transition-colors`, children: [title, _jsx(ChevronDown, { className: 'w-6 h-6 stroke-login ml-1 text-2xl transition-transform duration-300 ease-in-out' })] }), _jsx("div", { className: `absolute pt-2 -ml-4 -translate-y-4 opacity-0 pointer-events-none
+                        transition-all duration-200 ease-in-out z-10
+                        group-hover:opacity-100 group-hover:pointer-events-auto group-hover:translate-y-0
+                        group-focus-within:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0`, children: _jsx("ul", { className: 'p-3 px-6 pb-4 rounded-[0.4rem] shadow-[0_0.1rem_0.5rem_rgba(3,3,3,0.5)] bg-login-700/98', children: React.Children.map(children, (child, index) => (_jsx("div", { onClick: () => navItemRef.current?.blur(), className: 'group dropdown', children: child }, index))) }) })] }) }), _jsxs("div", { className: 'block 800px:hidden', children: [_jsx("button", { className: 'bg-none border-none cursor-pointer w-full text-left', onClick: (e) => {
+                            e.stopPropagation();
+                            setIsMobileDropdownOpen(!isMobileDropdownOpen);
+                        }, children: _jsxs("li", { className: `list-none no-underline text-2xl leading-6 overflow-hidden
+                        w-full pl-4 pr-4 rounded-[0.3rem] transition-all duration-[600ms]
+                        flex items-center gap-2 opacity-100 min-h-16 py-5 `, children: [_jsx("span", { children: title }), _jsx(ChevronDown, { className: `w-6 h-6 transition-transform duration-400 flex-shrink-0 
+                            ${isMobileDropdownOpen ? 'rotate-180' : ''}` })] }) }), _jsx("div", { className: `list-none no-underline text-xl px-6 ${isMobileDropdownOpen ? 'pb-4' : ''}`, children: React.Children.map(children, (child, index) => (_jsx("div", { className: `leading-6 transition-all duration-500 group dropdown
+                            ${isMobileDropdownOpen ? 'h-11 opacity-100' : 'h-0 opacity-0'}
+                        `, children: child }, index))) })] })] }));
+}

package/dist/src/components/navbar/navbarItem.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export type NavItemProps = {
+    href: string;
+    children: ReactNode;
+    external?: boolean;
+    target?: string;
+    rel?: string;
+    title?: string;
+    icon?: ReactNode;
+};
+export default function NavItem({ href, children, external, target, rel, title, icon }: NavItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/navbar/navbarItem.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowUpRight } from 'lucide-react';
+import Link from 'next/link';
+const commonStyling = 'list-none flex no-underline items-center gap-2 whitespace-nowrap cursor-pointer';
+export default function NavItem({ href, children, external = false, target, rel, title, icon }) {
+    const linkProps = { href, target, rel, title };
+    return (_jsxs(_Fragment, { children: [_jsx(Link, { ...linkProps, className: 'hidden 800px:block', children: _jsxs("li", { className: `${commonStyling} text-base leading-4 p-3 font-bold transition-colors link-corner-hover
+                    group-[.dropdown]:p-2.5 group-[.dropdown]:pr-3 group-[.dropdown]:pl-1`, children: [icon, children, external && _jsx(ArrowUpRight, { className: 'w-6 h-6 stroke-login' })] }) }), _jsx(Link, { ...linkProps, className: 'block 800px:hidden', children: _jsxs("li", { className: `${commonStyling} text-2xl leading-6 overflow-hidden w-auto pl-4 rounded-[0.3rem] transition-all 
+                    duration-[600ms] opacity-100 h-16 py-5 group-[.dropdown]:p-0 group-[.dropdown]:text-lg group-[.dropdown]:h-auto 
+                    group-[.dropdown]:py-2.5 group-[.dropdown]:pl-4`, children: [children, external && _jsx(ArrowUpRight, { className: 'w-6 h-6 stroke-login' })] }) })] }));
+}

package/dist/src/components/toggle/language.d.ts

@@ -0,0 +1,4 @@
+import { Language } from 'uibee/components';
+export default function LanguageToggle({ language }: {
+    language: Language;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/toggle/language.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { getCookie, setCookie } from '../../utils/cookies/cookies';
+import { useRouter } from 'next/navigation';
+import { Globe } from 'lucide-react';
+export default function LanguageToggle({ language }) {
+    const [lang, setLang] = useState(language);
+    const [jump, setJump] = useState(false);
+    const router = useRouter();
+    useEffect(() => {
+        const savedLang = getCookie('lang');
+        if (savedLang) {
+            setLang(savedLang);
+        }
+    }, []);
+    function handleClick() {
+        const newLang = lang === 'no' ? 'en' : 'no';
+        setCookie('lang', newLang);
+        setLang(newLang);
+        language = newLang;
+        setJump(true);
+        setTimeout(() => setJump(false), 400);
+        router.refresh();
+    }
+    const buttonClasses = `cursor-pointer p-2 leading-8 text-base w-[4.3rem] text-center rounded 
+        bg-transparent border-none hover:bg-gray-400/10 flex flex-row items-center justify-center gap-1`;
+    return (_jsxs("button", { value: lang, onClick: handleClick, className: buttonClasses, children: [_jsx(Globe, { className: `text-xl leading-8 -mt-0.5 ${jump ? 'animate-jump' : ''}` }), ' ' + lang] }));
+}

package/dist/src/components/toggle/theme.d.ts

@@ -0,0 +1,3 @@
+export default function ThemeToggle({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/toggle/theme.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { getCookie, setCookie } from '../../utils/cookies/cookies';
+import { useRouter } from 'next/navigation';
+export default function ThemeToggle({ className }) {
+    const router = useRouter();
+    const [theme, setTheme] = useState('dark');
+    useEffect(() => {
+        const savedTheme = getCookie('theme');
+        if (savedTheme) {
+            setTheme(savedTheme);
+        }
+        document.documentElement.classList.remove('dark', 'light');
+        document.documentElement.classList.add(theme);
+    }, [theme]);
+    function toggleTheme() {
+        const newTheme = theme === 'dark' ? 'light' : 'dark';
+        setCookie('theme', newTheme);
+        setTheme(newTheme);
+        router.refresh();
+    }
+    return (_jsx("div", { className: `grid place-items-center justify-end rounded-md hover:bg-login-300/20 w-fit ${className}`, children: _jsxs("label", { className: 'cursor-pointer', children: [_jsx("input", { type: 'checkbox', checked: theme === 'light', onChange: toggleTheme, className: 'sr-only' }), _jsx(ThemeIcon, { theme: theme })] }) }));
+}
+function ThemeIcon({ theme }) {
+    const sunrayClass = `fill-white transition-opacity duration-400 ${theme === 'light' ? 'opacity-0' : 'opacity-100'}`;
+    return (_jsxs("svg", { className: 'h-12 p-3', viewBox: '0 0 100 100', xmlns: 'http://www.w3.org/2000/svg', children: [_jsx("defs", { children: _jsxs("mask", { id: 'theme-toggle_clip-path', children: [_jsx("rect", { x: '0', y: '0', width: '100', height: '100', fill: 'white' }), _jsx("circle", { className: `transition-transform duration-400 ${theme === 'dark' ? 'translate-x-8 -translate-y-4' : ''}`, cx: '68', cy: '40', r: '18' })] }) }), _jsx("circle", { className: `origin-center transition-all duration-400 ${theme === 'light'
+                    ? 'scale-[1.9] fill-black'
+                    : 'scale-100 fill-white'}`, mask: 'url(#theme-toggle_clip-path)', cx: '50', cy: '50', r: '23' }), _jsx("rect", { className: sunrayClass, x: '86', y: '47', width: '14', height: '6', rx: '3' }), _jsx("rect", { className: sunrayClass, y: '47', width: '14', height: '6', rx: '3' }), _jsx("rect", { className: sunrayClass, x: '47', y: '86', width: '6', height: '14', rx: '3' }), _jsx("rect", { className: sunrayClass, x: '75', y: '75', width: '6', height: '14', rx: '3', transform: 'rotate(-45 78 78)' }), _jsx("rect", { className: sunrayClass, x: '84.8995', y: '12', width: '6', height: '14', rx: '3', transform: 'rotate(45 84.8995 12)' }), _jsx("rect", { className: sunrayClass, x: '22.8995', y: '74', width: '6', height: '14', rx: '3', transform: 'rotate(45 22.8995 74)' }), _jsx("rect", { className: sunrayClass, x: '13', y: '16.2426', width: '6', height: '14', rx: '3', transform: 'rotate(-45 13 16.2426)' }), _jsx("rect", { className: sunrayClass, x: '47', y: '0', width: '6', height: '14', rx: '3' })] }));
+}

package/dist/src/components/version/version.d.ts

@@ -0,0 +1,7 @@
+type VersionTagProps = {
+    version?: string;
+    url?: string;
+    className?: string;
+};
+export default function VersionTag({ version, url, className }: VersionTagProps): import("react/jsx-runtime").JSX.Element | undefined;
+export {};

package/dist/src/components/version/version.js

@@ -0,0 +1,12 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import Link from 'next/link';
+export default function VersionTag({ version, url, className }) {
+    if (!version) {
+        return;
+    }
+    const style = `w-fit bg-login-600 px-2 py-1 rounded-md text-white tracking-[0.05em] font-semibold text-lg ${className}`;
+    if (url) {
+        return (_jsxs(Link, { className: style, target: '_blank', href: url, children: ["v", version] }));
+    }
+    return (_jsxs("div", { className: style, children: ["v", version] }));
+}

package/dist/src/scripts/rewriteAlias.js

@@ -2,30 +2,30 @@ import fs from 'fs';
 import path from 'path';
 import { globSync } from 'glob';
 const DIST_DIR = path.resolve('dist');
-const IMAGES_DIR = path.join(DIST_DIR, 'images');
+const SRC_DIR = path.join(DIST_DIR, 'src');
 const jsFiles = globSync(`${DIST_DIR}/**/*.js`, { nodir: true });
 jsFiles.forEach((file) => {
     let content = fs.readFileSync(file, 'utf-8');
     const fileDir = path.dirname(file);
-    content = content.replace(/from ['"]@images\/(.*?)['"]/g, (_, p1) => {
-        const targetPath = path.join(IMAGES_DIR, p1);
+    // Handle @utils/* imports
+    content = content.replace(/from ['"]@utils\/(.*?)['"]/g, (_, p1) => {
+        const targetPath = path.join(SRC_DIR, 'utils', p1);
+        const relative = path.relative(fileDir, targetPath).replace(/\\/g, '/');
+        return `from '${relative}'`;
+    });
+    // Handle @components/* imports
+    content = content.replace(/from ['"]@components\/(.*?)['"]/g, (_, p1) => {
+        const targetPath = path.join(SRC_DIR, 'components', p1);
+        const relative = path.relative(fileDir, targetPath).replace(/\\/g, '/');
+        return `from '${relative}'`;
+    });
+    // Handle @hooks/* imports
+    content = content.replace(/from ['"]@hooks\/(.*?)['"]/g, (_, p1) => {
+        const targetPath = path.join(SRC_DIR, 'hooks', p1);
         const relative = path.relative(fileDir, targetPath).replace(/\\/g, '/');
         return `from '${relative}'`;
     });
-    const inlineImages = content.match(/src: ['"]images\/(.*?)['"]/g);
-    if (inlineImages) {
-        inlineImages.forEach((match) => {
-            const imgPathMatch = match.match(/src: ['"]images\/(.*?)['"]/);
-            if (imgPathMatch) {
-                const imgRelativePath = imgPathMatch[1];
-                const resolvedPath = path.join(IMAGES_DIR, imgRelativePath);
-                console.error(`⚠️  Detected inline image in ${file}: ${match}`);
-                console.error(`   Resolved file path: ${resolvedPath}`);
-                console.error(`   This is not allowed. Use 'import image from '../../images/${imgRelativePath}'' instead.`);
-            }
-        });
-    }
     fs.writeFileSync(file, content, 'utf-8');
 });
-console.log('🐝 Image imports rewritten');
+console.log('🐝 All path aliases rewritten');
 console.log('🐝 Build complete');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "1.6.12",
+  "version": "2.0.0",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {
@@ -26,10 +26,9 @@
   "scripts": {
     "build:clean": "rm -rf dist",
     "build:css": "node --loader ts-node/esm src/scripts/buildCss.ts",
-    "build:assets": "cp -r images dist/images",
     "build:rewrite": "node dist/src/scripts/rewriteAlias.js",
     "build:ts": "tsc --declaration",
-    "build": "npm run build:clean && npm run build:css && npm run build:ts && npm run build:assets && npm run build:rewrite",
+    "build": "npm run build:clean && npm run build:css && npm run build:ts && npm run build:rewrite",
     "lint": "eslint --fix ./src"
   },
   "peerDependencies": {
@@ -38,11 +37,11 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
-    "@next/eslint-plugin-next": "^15.5.4",
+    "@next/eslint-plugin-next": "16.0.0",
     "@stylistic/eslint-plugin": "^5.4.0",
     "@tailwindcss/postcss": "^4.1.13",
     "@types/node": "^24.5.2",
-    "@types/react": "^19.1.13",
+    "@types/react": "19.2.2",
     "eslint": "^9.36.0",
     "glob": "^11.0.3",
     "postcss": "^8.5.6",
@@ -52,6 +51,9 @@
     "typescript-eslint": "^8.44.1"
   },
   "dependencies": {
-    "lucide-react": "^0.544.0"
+    "lucide-react": "^0.544.0",
+    "next": "16.0.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0"
   }
 }

package/src/components/index.ts

@@ -1,7 +1,21 @@
-export { default as LoginPage } from './login/loginPage'
-export { default as Toaster, addToast } from './toast/toaster'
-
 // Input components
 export { default as Input } from './inputs/input'
 export { default as SwitchInput } from './inputs/switch'
 export { default as TagInput } from './inputs/tag'
+
+// Logos
+export { default as Logo } from './logo/logo'
+export { default as LogoSmall } from './logo/logoSmall'
+
+// Toggles
+export { default as ThemeToggle } from './toggle/theme'
+export { default as LanguageToggle } from './toggle/language'
+
+// Navbar
+export { default as Navbar } from './navbar/navbar'
+export { default as NavItem } from './navbar/navbarItem'
+export { default as NavDropdown } from './navbar/navbarDropdown'
+
+export { default as VersionTag } from './version/version'
+export { default as LoginPage } from './login/loginPage'
+export { default as Toaster, addToast } from './toast/toaster'

package/src/components/login/loginPage.tsx

@@ -1,8 +1,7 @@
 import { LoginPageProps } from 'uibee/components'
 import { LogIn } from 'lucide-react'
 import Link from 'next/link'
-import Image from 'next/image'
-import logo from '@images/logo-tekst-white.svg'
+import Logo from '@components/logo/logo'
 
 export default function LoginPage({title, description, redirectURL, version, btg, handleSubmit}: LoginPageProps) {
     return (
@@ -13,18 +12,13 @@ export default function LoginPage({title, description, redirectURL, version, btg
                 }
             >
                 <div className='relative aspect-[3/1] w-full'>
-                    <Image
-                        src={logo}
-                        alt='Logo'
-                        fill
-                        className='object-contain sm:px-12'
-                    />
+                    <Logo className='object-contain px-6 sm:px-12' />
                 </div>
                 <h1 className='text-3xl font-extrabold text-login text-center tracking-tight'>
                     {title} {btg ? ' - Break the Glass' : ''}
                 </h1>
                 {description && (
-                    <p className='text-login-100 text-center font-medium text-lg mb-2 max-w-xs'>
+                    <p className='text-center font-medium text-lg mb-2 max-w-xs'>
                         {description}
                     </p>
                 )}
@@ -41,21 +35,21 @@ export default function LoginPage({title, description, redirectURL, version, btg
                             type='text'
                             name='name'
                             placeholder='Name'
-                            className='py-2 px-3 rounded bg-login-900 text-login-50 font-medium focus:outline-none'
+                            className='py-2 px-3 rounded bg-login-900 font-medium focus:outline-none'
                             required
                         />
                         <input
                             type='password'
                             name='token'
                             placeholder='Token'
-                            className='py-2 px-3 rounded bg-login-900 text-login-50 font-medium focus:outline-none'
+                            className='py-2 px-3 rounded bg-login-900 font-medium focus:outline-none'
                             required
                         />
                         <button
                             type='submit'
                             className={
                                 'py-2 px-4 rounded-xl bg-login font-bold text-lg ' +
-                                'hover:bg-login/80 text-login-50 transition-all duration-200 mt-2'
+                                'hover:bg-login/80 transition-all duration-200 mt-2'
                             }
                         >
                             Login
@@ -66,7 +60,7 @@ export default function LoginPage({title, description, redirectURL, version, btg
                         <button
                             className={
                                 'flex items-center justify-center gap-2 w-full max-w-xs py-3 px-6 rounded-xl bg-login font-bold text-lg ' +
-                                'hover:bg-login/80 text-login-50 transition-all duration-200 mb-2 mt-2'
+                                'hover:bg-login/80 transition-all duration-200 mb-2 mt-2'
                             }
                         >
                             Login
@@ -74,7 +68,7 @@ export default function LoginPage({title, description, redirectURL, version, btg
                         </button>
                     </Link>
                 )}
-                <span className='text-login-100 text-sm mt-2'>v{version}</span>
+                <span className='text-sm mt-2'>v{version}</span>
             </div>
         </main>
     )

package/src/components/logo/logo.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable @stylistic/max-len */
+
+interface LogoProps {
+    className?: string
+}
+
+export default function Logo({ className }: LogoProps) {
+    const corner = 'fill-[var(--foreground)] transition-all duration-1000'
+    const letter = 'fill-none stroke-[var(--color-login)] stroke-[3.5px]'
+
+    return (
+        <svg className={`block w-full max-w-2xl mx-auto ${className || ''}`} viewBox='0 0 147.02299 59.20511'>
+            <path className={corner} d='m 28.77713,58.37738 v 0.76465 H 25.531 v -5.61816 h 0.91309 v 4.85351 z' />
+            <path className={corner} d='m 30.47831,59.142 h -0.917 v -5.61813 h 0.917 z'/>
+            <path className={corner} d='M 36.46268,53.52387 V 59.142 H 35.99881 A 0.36347,0.36347 0 0 1 35.6785,58.98185 L 32.59256,55.018 c 0.0078,0.07617 0.01368,0.15039 0.01758,0.22461 0.0039,0.07422 0.0059,0.14258 0.0059,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.09864,0.0059 0.3128,0.3128 0 0 1 0.07617,0.02148 0.22919,0.22919 0 0 1 0.0664,0.04688 0.63781,0.63781 0 0 1 0.06641,0.07812 l 3.08984,3.96779 c -0.0078,-0.08105 -0.01367,-0.16015 -0.01757,-0.23828 -0.0039,-0.07813 -0.0059,-0.15039 -0.0059,-0.21875 v -3.6631 z' />
+            <path className={corner} d='m 39.84549,57.1684 a 2.91264,2.91264 0 0 1 -0.11523,0.84765 1.748,1.748 0 0 1 -0.34375,0.64063 1.52483,1.52483 0 0 1 -0.56543,0.40527 2.00691,2.00691 0 0 1 -0.78223,0.14258 3.23707,3.23707 0 0 1 -0.40234,-0.0254 3.44454,3.44454 0 0 1 -0.41309,-0.0801 l 0.04688,-0.5459 a 0.2079,0.2079 0 0 1 0.06055,-0.125 0.19754,0.19754 0 0 1 0.14257,-0.0469 0.74035,0.74035 0 0 1 0.18067,0.0293 1.36468,1.36468 0 0 0 0.71387,-0.041 0.74722,0.74722 0 0 0 0.3125,-0.2207 0.9864,0.9864 0 0 0 0.1914,-0.38574 2.19551,2.19551 0 0 0 0.06445,-0.57227 v -3.667 h 0.90918 z' />
+            <path className={corner} d='m 44.6326,58.40473 -0.0039,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z' />
+            <path className={corner} d='M 46.53592,54.26117 V 56.06 h 2.19629 v 0.7373 h -2.19629 v 2.3447 h -0.917 v -5.61813 h 3.50391 v 0.7373 z' />
+            <path className={corner} d='m 55.25956,56.33344 a 3.18179,3.18179 0 0 1 -0.20215,1.15039 2.6634,2.6634 0 0 1 -0.57227,0.90722 2.59685,2.59685 0 0 1 -0.88476,0.59473 3.17156,3.17156 0 0 1 -2.29492,0 2.62415,2.62415 0 0 1 -0.88672,-0.59473 2.65327,2.65327 0 0 1 -0.57422,-0.90722 3.37717,3.37717 0 0 1 0,-2.30176 2.67118,2.67118 0 0 1 0.57422,-0.90918 2.61491,2.61491 0 0 1 0.88672,-0.59668 3.1717,3.1717 0 0 1 2.29492,0 2.58781,2.58781 0 0 1 0.88476,0.59668 2.68144,2.68144 0 0 1 0.57227,0.90918 3.1871,3.1871 0 0 1 0.20215,1.15137 z m -0.93164,0 a 2.706,2.706 0 0 0 -0.13086,-0.87012 1.821,1.821 0 0 0 -0.375,-0.65527 1.63008,1.63008 0 0 0 -0.59082,-0.41407 2.16795,2.16795 0 0 0 -1.55664,0 1.65415,1.65415 0 0 0 -0.59278,0.41407 1.84212,1.84212 0 0 0 -0.3789,0.65527 2.92611,2.92611 0 0 0 0,1.74316 1.83766,1.83766 0 0 0 0.3789,0.6543 1.64222,1.64222 0 0 0 0.59278,0.40918 2.19564,2.19564 0 0 0 1.55664,0 1.61838,1.61838 0 0 0 0.59082,-0.40918 1.81652,1.81652 0 0 0 0.375,-0.6543 2.71589,2.71589 0 0 0 0.13086,-0.87304 z' />
+            <path className={corner} d='m 60.534,59.142 h -0.81543 a 0.377,0.377 0 0 1 -0.35156,-0.1875 l -1.31055,-1.8916 a 0.4267,0.4267 0 0 0 -0.14453,-0.14063 0.50286,0.50286 0 0 0 -0.23437,-0.043 H 57.17072 V 59.142 H 56.2576 v -5.61813 h 1.6543 a 3.54427,3.54427 0 0 1 0.9541,0.11328 1.80649,1.80649 0 0 1 0.65723,0.32226 1.25606,1.25606 0 0 1 0.37988,0.501 1.76427,1.76427 0 0 1 0.03516,1.19727 1.50418,1.50418 0 0 1 -0.25293,0.46093 1.61283,1.61283 0 0 1 -0.40821,0.3584 2.04861,2.04861 0 0 1 -0.5498,0.23828 0.92346,0.92346 0 0 1 0.28906,0.28516 z m -2.64551,-2.92578 a 1.763,1.763 0 0 0 0.5459,-0.07617 1.11007,1.11007 0 0 0 0.39063,-0.21289 0.87892,0.87892 0 0 0 0.23437,-0.3252 1.10093,1.10093 0 0 0 0.07715,-0.41992 0.84276,0.84276 0 0 0 -0.30371,-0.70215 1.46527,1.46527 0 0 0 -0.9209,-0.24219 h -0.74121 v 1.97852 z' />
+            <path className={corner} d='m 64.72049,58.40473 -0.0039,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z' />
+            <path className={corner} d='M 70.35721,53.52387 V 59.142 H 69.89335 A 0.36347,0.36347 0 0 1 69.57303,58.98185 L 66.4871,55.018 c 0.0078,0.07617 0.01367,0.15039 0.01757,0.22461 0.0039,0.07422 0.0059,0.14258 0.0059,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.09864,0.0059 0.3128,0.3128 0 0 1 0.07617,0.02148 0.22936,0.22936 0 0 1 0.06641,0.04688 0.63869,0.63869 0 0 1 0.0664,0.07812 l 3.08985,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z' />
+            <path className={corner} d='m 72.6121,59.142 h -0.917 v -5.61813 h 0.917 z' />
+            <path className={corner} d='M 78.59794,53.52387 V 59.142 H 78.13358 A 0.36344,0.36344 0 0 1 77.81327,58.98185 L 74.72733,55.018 c 0.008,0.07617 0.0137,0.15039 0.0176,0.22461 0.004,0.07422 0.006,0.14258 0.006,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.713,0.713 0 0 1 0.0986,0.0059 0.31254,0.31254 0 0 1 0.0762,0.02148 0.22936,0.22936 0 0 1 0.0664,0.04688 0.63869,0.63869 0 0 1 0.0664,0.07812 l 3.08984,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z' />
+            <path className={corner} d='M 84.53544,56.37641 V 58.6 a 3.24425,3.24425 0 0 1 -1.9502,0.60449 3.419,3.419 0 0 1 -1.23535,-0.21289 2.7275,2.7275 0 0 1 -0.94141,-0.59277 2.59231,2.59231 0 0 1 -0.60156,-0.90723 3.08634,3.08634 0 0 1 -0.21,-1.1582 3.23536,3.23536 0 0 1 0.20215,-1.165 2.5484,2.5484 0 0 1 1.49414,-1.498 3.29189,3.29189 0 0 1 1.20215,-0.209 3.52605,3.52605 0 0 1 0.62988,0.05273 3.11559,3.11559 0 0 1 0.54,0.14649 2.535,2.535 0 0 1 0.84668,0.52246 l -0.26074,0.418 a 0.26545,0.26545 0 0 1 -0.16016,0.12109 0.27377,0.27377 0 0 1 -0.21094,-0.04688 c -0.0752,-0.04492 -0.15527,-0.09082 -0.24023,-0.14062 a 2.01137,2.01137 0 0 0 -0.29,-0.13867 2.127,2.127 0 0 0 -0.37891,-0.10547 2.72656,2.72656 0 0 0 -0.50683,-0.041 2.09434,2.09434 0 0 0 -0.80176,0.14649 1.70173,1.70173 0 0 0 -0.61035,0.418 1.84692,1.84692 0 0 0 -0.39063,0.65722 2.5766,2.5766 0 0 0 -0.13672,0.86231 2.62333,2.62333 0 0 0 0.14453,0.89844 1.88731,1.88731 0 0 0 0.41016,0.67187 1.74772,1.74772 0 0 0 0.6416,0.419 2.55647,2.55647 0 0 0 1.459,0.0703 2.80344,2.80344 0 0 0 0.53222,-0.207 V 57.07074 H 82.928 a 0.19287,0.19287 0 0 1 -0.13964,-0.04883 0.16848,0.16848 0 0 1 -0.0508,-0.12695 v -0.51855 z' />
+            <path className={corner} d='m 89.1243,58.40473 -0.004,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z' />
+            <path className={corner} d='M 94.761,53.52387 V 59.142 H 94.29713 A 0.36347,0.36347 0 0 1 93.97682,58.98185 L 90.8909,55.018 c 0.008,0.07617 0.0137,0.15039 0.0176,0.22461 0.004,0.07422 0.006,0.14258 0.006,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.0986,0.0059 0.3128,0.3128 0 0 1 0.0762,0.02148 0.22919,0.22919 0 0 1 0.0664,0.04688 0.63781,0.63781 0 0 1 0.0664,0.07812 l 3.08984,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z' />
+            <path className={corner} d='M 98.95829,54.26117 V 56.06 h 2.19629 v 0.7373 h -2.19629 v 2.3447 h -0.917 v -5.61813 h 3.5039 v 0.7373 z' />
+            <path className={corner} d='m 107.68192,56.33344 a 3.18158,3.18158 0 0 1 -0.20215,1.15039 2.66353,2.66353 0 0 1 -0.57226,0.90722 2.597,2.597 0 0 1 -0.88477,0.59473 3.17156,3.17156 0 0 1 -2.29492,0 2.62415,2.62415 0 0 1 -0.88672,-0.59473 2.65327,2.65327 0 0 1 -0.57422,-0.90722 3.37717,3.37717 0 0 1 0,-2.30176 2.67118,2.67118 0 0 1 0.57422,-0.90918 2.61491,2.61491 0 0 1 0.88672,-0.59668 3.1717,3.1717 0 0 1 2.29492,0 2.588,2.588 0 0 1 0.88477,0.59668 2.68157,2.68157 0 0 1 0.57226,0.90918 3.18689,3.18689 0 0 1 0.20215,1.15137 z m -0.93164,0 a 2.706,2.706 0 0 0 -0.13086,-0.87012 1.82066,1.82066 0 0 0 -0.375,-0.65527 1.63,1.63 0 0 0 -0.59082,-0.41407 2.16795,2.16795 0 0 0 -1.55664,0 1.65411,1.65411 0 0 0 -0.59277,0.41407 1.84214,1.84214 0 0 0 -0.37891,0.65527 2.92632,2.92632 0 0 0 0,1.74316 1.83768,1.83768 0 0 0 0.37891,0.6543 1.64218,1.64218 0 0 0 0.59277,0.40918 2.19564,2.19564 0 0 0 1.55664,0 1.61829,1.61829 0 0 0 0.59082,-0.40918 1.81623,1.81623 0 0 0 0.375,-0.6543 2.71589,2.71589 0 0 0 0.13086,-0.87304 z' />
+            <path className={corner} d='m 112.95731,59.142 h -0.81543 a 0.377,0.377 0 0 1 -0.35156,-0.1875 l -1.31055,-1.8916 a 0.4267,0.4267 0 0 0 -0.14453,-0.14063 0.50286,0.50286 0 0 0 -0.23437,-0.043 H 109.594 V 59.142 h -0.91309 v -5.61813 h 1.6543 a 3.54427,3.54427 0 0 1 0.9541,0.11328 1.80649,1.80649 0 0 1 0.65723,0.32226 1.25606,1.25606 0 0 1 0.37988,0.501 1.76427,1.76427 0 0 1 0.0352,1.19727 1.50418,1.50418 0 0 1 -0.25293,0.46093 1.61283,1.61283 0 0 1 -0.40821,0.3584 2.04861,2.04861 0 0 1 -0.5498,0.23828 0.92346,0.92346 0 0 1 0.28906,0.28516 z m -2.64551,-2.92578 a 1.763,1.763 0 0 0 0.5459,-0.07617 1.11007,1.11007 0 0 0 0.39063,-0.21289 0.87892,0.87892 0 0 0 0.23437,-0.3252 1.10093,1.10093 0 0 0 0.0772,-0.41992 0.84276,0.84276 0 0 0 -0.30371,-0.70215 1.46527,1.46527 0 0 0 -0.9209,-0.24219 H 109.594 v 1.97852 z' />
+            <path className={corner} d='m 116.4954,59.142 h -0.917 v -5.61813 h 0.917 z' />
+            <path className={corner} d='m 121.69559,54.28461 h -1.75195 V 59.142 h -0.9082 v -4.85739 h -1.75586 v -0.76074 h 4.416 z' />
+            <polyline className={letter} style={{strokeMiterlimit: 10}} points='47.871 98.1 33.189 98.1 33.189 83.418' transform='translate(-31.392,-41.894)' />
+            <polyline className={letter} style={{strokeMiterlimit: 10}} points='33.142 58.326 33.142 43.644 47.824 43.644' transform='translate(-31.392,-41.894)' />
+            <polyline className={letter} style={{strokeMiterlimit: 10}} points='161.983 98.122 176.665 98.122 176.665 83.44' transform='translate(-31.392,-41.894)' />
+            <polyline className={letter} style={{strokeMiterlimit: 10}} points='176.665 58.372 176.665 43.69 161.983 43.69' transform='translate(-31.392,-41.894)' />
+            <path className={corner} d='m 30.02449,40.19351 v 4.12842 H 12.4991 V 13.99038 h 4.92871 v 26.20313 z' />
+            <path className={corner} d='m 61.53523,29.1564 a 17.15942,17.15942 0 0 1 -1.09473,6.21338 14.35971,14.35971 0 0 1 -3.08593,4.89746 14.091,14.091 0 0 1 -4.78125,3.21191 17.1289,17.1289 0 0 1 -12.38575,0 13.98317,13.98317 0 0 1 -7.88867,-8.10937 18.18161,18.18161 0 0 1 0,-12.42725 14.39119,14.39119 0 0 1 3.09668,-4.90771 14.13157,14.13157 0 0 1 4.792,-3.22315 17.13565,17.13565 0 0 1 12.38575,0 14.02046,14.02046 0 0 1 4.78125,3.22315 14.47032,14.47032 0 0 1 3.08593,4.90771 17.16209,17.16209 0 0 1 1.09472,6.21387 z m -5.03418,0 a 14.62587,14.62587 0 0 0 -0.70508,-4.69727 9.9446,9.9446 0 0 0 -2.02246,-3.53906 8.80545,8.80545 0 0 0 -3.1914,-2.23242 11.719,11.719 0 0 0 -8.4043,0 8.90077,8.90077 0 0 0 -3.20117,2.23242 9.96735,9.96735 0 0 0 -2.043,3.53906 15.81644,15.81644 0 0 0 0,9.415 9.847,9.847 0 0 0 2.043,3.52832 8.85094,8.85094 0 0 0 3.20117,2.21192 11.87213,11.87213 0 0 0 8.4043,0 8.75623,8.75623 0 0 0 3.1914,-2.21192 9.82454,9.82454 0 0 0 2.02249,-3.52828 14.69371,14.69371 0 0 0 0.70505,-4.71777 z' />
+            <path className={corner} d='m 91.76082,29.38784 v 12.00635 a 17.5354,17.5354 0 0 1 -10.53125,3.26465 18.41512,18.41512 0 0 1 -6.667,-1.148 14.80254,14.80254 0 0 1 -5.08691,-3.20166 14.0148,14.0148 0 0 1 -3.24316,-4.897 16.691,16.691 0 0 1 -1.1377,-6.25586 17.42935,17.42935 0 0 1 1.09473,-6.2876 13.74023,13.74023 0 0 1 8.06738,-8.08838 17.7222,17.7222 0 0 1 6.48828,-1.127 19.10354,19.10354 0 0 1 3.40137,0.28418 16.85244,16.85244 0 0 1 2.917,0.79 13.68442,13.68442 0 0 1 2.48633,1.22168 13.95372,13.95372 0 0 1 2.085,1.60058 l -1.41113,2.25391 a 1.40229,1.40229 0 0 1 -0.86426,0.65283 1.47784,1.47784 0 0 1 -1.13672,-0.25244 q -0.6123,-0.35816 -1.2959,-0.7583 a 11.33129,11.33129 0 0 0 -1.56933,-0.748 11.53387,11.53387 0 0 0 -2.043,-0.56836 14.78335,14.78335 0 0 0 -2.73828,-0.22119 11.32128,11.32128 0 0 0 -4.32813,0.78955 9.26752,9.26752 0 0 0 -3.29687,2.25391 9.99164,9.99164 0 0 0 -2.10645,3.54931 13.90267,13.90267 0 0 0 -0.7373,4.65528 14.11731,14.11731 0 0 0 0.77929,4.855 10.1425,10.1425 0 0 0 2.21192,3.62305 9.43419,9.43419 0 0 0 3.46484,2.26416 13.81975,13.81975 0 0 0 7.87793,0.3789 15.14816,15.14816 0 0 0 2.875,-1.11621 v -6.02383 h -4.2334 a 1.04883,1.04883 0 0 1 -0.75879,-0.26367 0.90553,0.90553 0 0 1 -0.27343,-0.68457 v -2.80127 z' />
+            <path className={corner} d='M 102.546,44.32193 H 97.59581 V 13.99038 h 4.95019 z' />
+            <path className={corner} d='m 134.8575,13.99038 v 30.33155 h -2.50684 a 2.14219,2.14219 0 0 1 -0.96875,-0.2002 2.26108,2.26108 0 0 1 -0.75879,-0.66357 L 113.962,22.05777 q 0.063,0.61083 0.0947,1.21093 0.0322,0.60058 0.0322,1.106 v 19.94723 h -4.3398 V 13.99038 h 2.57031 a 3.89092,3.89092 0 0 1 0.53711,0.03174 1.53328,1.53328 0 0 1 0.41016,0.11572 1.18964,1.18964 0 0 1 0.35839,0.25293 4.01792,4.01792 0 0 1 0.3584,0.4209 l 16.68164,21.42188 q -0.063,-0.65259 -0.0947,-1.28467 -0.0308,-0.63208 -0.0312,-1.17969 V 13.99038 Z' />
+        </svg>
+
+    )
+}

package/src/components/logo/logoSmall.tsx

@@ -0,0 +1,19 @@
+export default function LogoSmall() {
+    const corner = 'fill-login'
+    const letter = 'fill-[var(--foreground)] transition-all duration-1000'
+
+    return (
+        <svg className='block h-full' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'>
+            <path className={corner} d='M0 0H6.6667V28.3333H0V0Z'/>
+            <path className={corner} d='M28.3333 0V6.6667H0V0H28.3333Z'/>
+            <path className={corner} d='M100 0V6.6667H71.6667V0H100Z'/>
+            <path className={corner} d='M100 28.3333H93.3333V0H100V28.3333Z'/>
+            <path className={corner} d='M0 100V93.3333H28.3333V100H0Z'/>
+            <path className={corner} d='M0 71.6667H6.6667V100H0V71.6667Z'/>
+            <path className={corner} d='M100 100H93.3333V71.6667H100V100Z'/>
+            <path className={corner} d='M71.6667 100V93.3333H100V100H71.6667Z'/>
+            <path className={letter} d='M31.6667 18.3333H43.3334V81.6666H31.6667V18.3333Z'/>
+            <path className={letter} d='M31.6667 70H68.3334V81.6667H31.6667V70Z'/>
+        </svg>
+    )
+}