@absolutejs/absolute 0.6.1 → 0.6.2

package/build/{DocumentationIndex.cq053dzg.js → DocumentationIndex.2vv9babs.js}

@@ -15662,7 +15662,7 @@ var require_client = __commonJS((exports, module) => {
 
 // node_modules/react/cjs/react-jsx-dev-runtime.development.js
 var require_react_jsx_dev_runtime_development = __commonJS((exports) => {
-  var React5 = __toESM(require_react(), 1);
+  var React3 = __toESM(require_react(), 1);
   (function() {
     function getComponentNameFromType(type) {
       if (type == null)
@@ -15853,17 +15853,17 @@ React keys must be passed directly to JSX without using spread:
     }
     var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler");
     Symbol.for("react.provider");
-    var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), ReactSharedInternals = React5.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
+    var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), ReactSharedInternals = React3.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
       return null;
     };
-    React5 = {
+    React3 = {
       "react-stack-bottom-frame": function(callStackForError) {
         return callStackForError();
       }
     };
     var specialPropKeyWarningShown;
     var didWarnAboutElementRef = {};
-    var unknownOwnerDebugStack = React5["react-stack-bottom-frame"].bind(React5, UnknownOwner)();
+    var unknownOwnerDebugStack = React3["react-stack-bottom-frame"].bind(React3, UnknownOwner)();
     var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
     var didWarnAboutKeySpread = {};
     exports.Fragment = REACT_FRAGMENT_TYPE;
@@ -18656,6 +18656,7 @@ function becomeIdle(self) {
     });
   }
 }
+var to2 = (source, ...args) => new Interpolation(source, args);
 globals_exports.assign({
   createStringInterpolator: createStringInterpolator2,
   to: (source, args) => new Interpolation(source, args)
@@ -18991,8 +18992,27 @@ var host = createHost(primitives, {
 });
 var animated = host.animated;
 
+// src/frontend/components/documentation/Overview.tsx
+var jsx_dev_runtime = __toESM(require_jsx_dev_runtime(), 1);
+var Overview = () => /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+  style: {
+    display: "flex",
+    flex: 1,
+    flexDirection: "column",
+    padding: "1rem 2rem"
+  },
+  children: [
+    /* @__PURE__ */ jsx_dev_runtime.jsxDEV("h1", {
+      children: "Overview"
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsx_dev_runtime.jsxDEV("p", {
+      children: "The documentation provides a comprehensive guide to the features and functionality of the platform. It covers various aspects including installation, configuration, and usage of different packages. The documentation is designed to help users quickly get started and effectively utilize the platform's capabilities."
+    }, undefined, false, undefined, this)
+  ]
+}, undefined, true, undefined, this);
+
 // src/frontend/components/navbar/Navbar.tsx
-var import_react28 = __toESM(require_react(), 1);
+var import_react26 = __toESM(require_react(), 1);
 
 // node_modules/react-icons/lib/iconBase.mjs
 var import_react16 = __toESM(require_react(), 1);
@@ -19314,7 +19334,7 @@ var profileButtonStyle = {
 };
 
 // src/frontend/components/hamburger/HamburgerMenu.tsx
-var import_react22 = __toESM(require_react(), 1);
+var import_react21 = __toESM(require_react(), 1);
 
 // src/types/types.ts
 var isNavbarDropdown = (element) => ("links" in element);
@@ -19474,21 +19494,21 @@ var opButtonStyle = (disabled, providerPrimaryColor = "#747775") => ({
 var isNonEmptyString = (str) => str !== null && str !== undefined && str.trim() !== "";
 
 // src/frontend/components/utils/Divider.tsx
-var jsx_dev_runtime = __toESM(require_jsx_dev_runtime(), 1);
-var Divider = ({ color, text, height }) => /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+var jsx_dev_runtime2 = __toESM(require_jsx_dev_runtime(), 1);
+var Divider = ({ color, text, height }) => /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("div", {
   style: separatorStyle,
   children: [
-    /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+    /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("div", {
       style: separatorLineStyle({
         color,
         height
       })
     }, undefined, false, undefined, this),
-    isNonEmptyString(text) && /* @__PURE__ */ jsx_dev_runtime.jsxDEV("span", {
+    isNonEmptyString(text) && /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("span", {
       style: separatorTextStyle,
       children: text
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+    /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("div", {
       style: separatorLineStyle({
         color,
         height
@@ -21912,11 +21932,11 @@ var providerData = {
 };
 
 // src/frontend/components/utils/ProviderDropdown.tsx
-var jsx_dev_runtime2 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime3 = __toESM(require_jsx_dev_runtime(), 1);
 var ProviderDropdown = ({
   setCurrentProvider,
   themeSprings
-}) => /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(animated.select, {
+}) => /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(animated.select, {
   defaultValue: -1,
   onChange: (event) => {
     const index = parseInt(event.target.value);
@@ -21938,14 +21958,14 @@ var ProviderDropdown = ({
     width: "100%"
   },
   children: [
-    /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("option", {
+    /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("option", {
       value: -1,
       style: {
         fontWeight: "bold"
       },
       children: "Select provider"
     }, undefined, false, undefined, this),
-    providerOptions.map((provider, index) => /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("option", {
+    providerOptions.map((provider, index) => /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("option", {
       value: index,
       style: {
         textAlign: "left"
@@ -21967,7 +21987,7 @@ function FiUser(props) {
 }
 
 // src/frontend/components/auth/OAuthLink.tsx
-var jsx_dev_runtime3 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime4 = __toESM(require_jsx_dev_runtime(), 1);
 var OAuthLink = ({ mode, provider, themeSprings }) => {
   const defaultData = {
     createNewCredentialsUrl: "/oauth2/credentials/create",
@@ -21979,24 +21999,24 @@ var OAuthLink = ({ mode, provider, themeSprings }) => {
   const { logoUrl, name, primaryColor } = provider && providerData[provider] ? providerData[provider] : defaultData;
   const isProviderSelected = provider !== undefined;
   const buttonText = mode === "login" ? `Sign in with ${name}` : `Sign up with ${name}`;
-  return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(animated.a, {
+  return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(animated.a, {
     href: provider ? `/oauth2/${provider}/authorization` : undefined,
     style: oauthButtonStyle({
       isProviderSelected,
       providerPrimaryColor: isProviderSelected ? primaryColor : "#999999",
       themeSprings
     }),
-    children: /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("div", {
+    children: /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("div", {
       style: oauthButtonContentStyle,
       children: [
-        provider ? /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("img", {
+        provider ? /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("img", {
           src: logoUrl,
           alt: `${name} logo`,
           style: oauthIconStyle
-        }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(FiUser, {
+        }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(FiUser, {
           style: oauthIconStyle
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("span", {
+        /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("span", {
           style: oauthButtonTextStyle,
           children: buttonText
         }, undefined, false, undefined, this)
@@ -22006,7 +22026,7 @@ var OAuthLink = ({ mode, provider, themeSprings }) => {
 };
 
 // src/frontend/components/auth/AuthContainer.tsx
-var jsx_dev_runtime4 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime5 = __toESM(require_jsx_dev_runtime(), 1);
 var AuthContainer = ({ themeSprings }) => {
   const [currentProvider, setCurrentProvider] = import_react18.useState();
   const [mode, setMode] = import_react18.useState("login");
@@ -22015,10 +22035,10 @@ var AuthContainer = ({ themeSprings }) => {
   };
   const { isSizeOrLess } = useMediaQuery();
   const isMobile = isSizeOrLess("sm");
-  return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("div", {
     style: containerStyle(isMobile),
     children: [
-      /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(animated.a, {
+      /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(animated.a, {
         href: "/",
         style: {
           color: themeSprings.contrastPrimary,
@@ -22028,37 +22048,37 @@ var AuthContainer = ({ themeSprings }) => {
         },
         children: "AbsoluteJS"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("h1", {
+      /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("h1", {
         style: headingStyle,
         children: mode === "login" ? "Sign in to your Account" : "Create an account"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(OAuthLink, {
+      /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(OAuthLink, {
         mode,
         provider: "google",
         themeSprings
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(OAuthLink, {
+      /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(OAuthLink, {
         mode,
         provider: "github",
         themeSprings
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Divider, {
+      /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Divider, {
         text: "or"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(ProviderDropdown, {
+      /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(ProviderDropdown, {
         setCurrentProvider,
         themeSprings
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(OAuthLink, {
+      /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(OAuthLink, {
         mode,
         provider: currentProvider,
         themeSprings
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(animated.p, {
+      /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(animated.p, {
         style: loginTextStyle(themeSprings),
         children: [
           mode === "login" ? "Need an account? " : "Have an account? ",
-          /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(animated.button, {
+          /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(animated.button, {
             style: loginLinkTextStyle(themeSprings),
             onClick: switchMode,
             children: mode === "login" ? "Sign Up" : "Sign In"
@@ -22070,18 +22090,18 @@ var AuthContainer = ({ themeSprings }) => {
 };
 
 // src/frontend/components/navbar/NavbarLink.tsx
-var jsx_dev_runtime5 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime6 = __toESM(require_jsx_dev_runtime(), 1);
 var NavbarLink = ({
   icon,
   href,
   label,
   themeSprings
-}) => /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("a", {
+}) => /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("a", {
   href,
   style: optionStyle,
   children: [
     icon,
-    /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(animated.span, {
+    /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(animated.span, {
       style: navbarDrowdownLinkStyle(themeSprings),
       children: label
     }, undefined, false, undefined, this)
@@ -22090,7 +22110,7 @@ var NavbarLink = ({
 
 // src/frontend/components/utils/Modal.tsx
 var import_react19 = __toESM(require_react(), 1);
-var jsx_dev_runtime6 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime7 = __toESM(require_jsx_dev_runtime(), 1);
 var Modal = ({
   style,
   isOpen,
@@ -22118,7 +22138,7 @@ var Modal = ({
       document.body.style.overflow = "";
     };
   }, [isOpen]);
-  return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(animated.dialog, {
+  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(animated.dialog, {
     ref: dialogRef,
     onCancel: (event) => {
       event.preventDefault();
@@ -22142,7 +22162,7 @@ var Modal = ({
       position: "fixed"
     },
     children: [
-      /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("style", {
+      /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("style", {
         children: `
 				dialog::backdrop {
 					background: rgba(0,0,0,0.5);
@@ -22150,7 +22170,7 @@ var Modal = ({
 				}
 			`
       }, undefined, false, undefined, this),
-      isOpen && /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(animated.div, {
+      isOpen && /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(animated.div, {
         onClick: (event) => event.stopPropagation(),
         style: {
           ...style,
@@ -22159,7 +22179,7 @@ var Modal = ({
           position: "relative"
         },
         children: [
-          /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("button", {
+          /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("button", {
             onClick: () => {
               dialogRef.current?.close();
               onClose?.();
@@ -22218,6 +22238,17 @@ var useContainerQuery = () => {
   return { dimensions, ref };
 };
 
+// node_modules/react-icons/ai/index.mjs
+function AiOutlineExperiment(props) {
+  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 1024 1024" }, child: [{ tag: "path", attr: { d: "M512 472a40 40 0 1 0 80 0 40 40 0 1 0-80 0zm367 352.9L696.3 352V178H768v-68H256v68h71.7v174L145 824.9c-2.8 7.4-4.3 15.2-4.3 23.1 0 35.3 28.7 64 64 64h614.6c7.9 0 15.7-1.5 23.1-4.3 33-12.7 49.4-49.8 36.6-82.8zM395.7 364.7V180h232.6v184.7L719.2 600c-20.7-5.3-42.1-8-63.9-8-61.2 0-119.2 21.5-165.3 60a188.78 188.78 0 0 1-121.3 43.9c-32.7 0-64.1-8.3-91.8-23.7l118.8-307.5zM210.5 844l41.7-107.8c35.7 18.1 75.4 27.8 116.6 27.8 61.2 0 119.2-21.5 165.3-60 33.9-28.2 76.3-43.9 121.3-43.9 35 0 68.4 9.5 97.6 27.1L813.5 844h-603z" }, child: [] }] })(props);
+}
+function AiOutlineMinusCircle(props) {
+  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 1024 1024" }, child: [{ tag: "path", attr: { d: "M696 480H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z" }, child: [] }, { tag: "path", attr: { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" }, child: [] }] })(props);
+}
+function AiOutlineMoon(props) {
+  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 1024 1024", fill: "currentColor", fillRule: "evenodd" }, child: [{ tag: "path", attr: { d: "M489.493 111.658c30.658-1.792 45.991 36.44 22.59 56.329C457.831 214.095 426 281.423 426 354c0 134.757 109.243 244 244 244 72.577 0 139.905-31.832 186.014-86.084 19.868-23.377 58.064-8.102 56.332 22.53C900.4 745.823 725.141 912 512.5 912 291.31 912 112 732.69 112 511.5c0-211.39 164.287-386.024 374.198-399.649l.206-.013zm-81.143 79.75-4.112 1.362C271.1 237.943 176 364.092 176 511.5 176 697.344 326.656 848 512.5 848c148.28 0 274.938-96.192 319.453-230.41l.625-1.934-.11.071c-47.18 29.331-102.126 45.755-159.723 46.26L670 662c-170.104 0-308-137.896-308-308 0-58.595 16.476-114.54 46.273-162.467z" }, child: [] }] })(props);
+}
+
 // node_modules/react-icons/fa/index.mjs
 function FaCheckCircle(props) {
   return GenIcon({ tag: "svg", attr: { viewBox: "0 0 512 512" }, child: [{ tag: "path", attr: { d: "M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" }, child: [] }] })(props);
@@ -22232,11 +22263,39 @@ function FaRegQuestionCircle(props) {
   return GenIcon({ tag: "svg", attr: { viewBox: "0 0 512 512" }, child: [{ tag: "path", attr: { d: "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z" }, child: [] }] })(props);
 }
 
+// node_modules/react-icons/io5/index.mjs
+function IoSunny(props) {
+  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 512 512" }, child: [{ tag: "path", attr: { d: "M256 118a22 22 0 0 1-22-22V48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22zm0 368a22 22 0 0 1-22-22v-48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22zm113.14-321.14a22 22 0 0 1-15.56-37.55l33.94-33.94a22 22 0 0 1 31.11 31.11l-33.94 33.94a21.93 21.93 0 0 1-15.55 6.44zM108.92 425.08a22 22 0 0 1-15.55-37.56l33.94-33.94a22 22 0 1 1 31.11 31.11l-33.94 33.94a21.94 21.94 0 0 1-15.56 6.45zM464 278h-48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44zm-368 0H48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44zm307.08 147.08a21.94 21.94 0 0 1-15.56-6.45l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.55 37.56zM142.86 164.86a21.89 21.89 0 0 1-15.55-6.44l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.56 37.55zM256 358a102 102 0 1 1 102-102 102.12 102.12 0 0 1-102 102z" }, child: [] }] })(props);
+}
+
+// src/frontend/components/utils/ProfilePicture.tsx
+var jsx_dev_runtime8 = __toESM(require_jsx_dev_runtime(), 1);
+var ProfilePicture = ({
+  userImage,
+  backupImage,
+  width = "2rem",
+  height = "2rem",
+  themeSprings
+}) => /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(animated.img, {
+  src: userImage ?? backupImage,
+  alt: "Profile",
+  style: {
+    backgroundColor: themeSprings.themeTertiary,
+    borderRadius: "50%",
+    height,
+    objectFit: "cover",
+    width
+  }
+}, undefined, false, undefined, this);
+
 // src/frontend/components/utils/AnimatedComponents.tsx
 var AnimatedFaChevronDown = animated(FaChevronDown);
+var AnimatedProfilePicture = animated(ProfilePicture);
+var AnimatedMoon = animated(AiOutlineMoon);
+var AnimatedSun = animated(IoSunny);
 
 // src/frontend/components/hamburger/HamburgerDropdown.tsx
-var jsx_dev_runtime7 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime9 = __toESM(require_jsx_dev_runtime(), 1);
 var HamburgerDropdown = ({
   label,
   icon,
@@ -22264,27 +22323,27 @@ var HamburgerDropdown = ({
       transform: isOpen ? "rotate(180deg)" : "rotate(0deg)"
     });
   };
-  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
     style: { width: "100%" },
     children: [
-      /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
         style: {
           alignItems: "center",
           display: "flex",
           justifyContent: "space-between"
         },
         children: [
-          /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(animated.a, {
+          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(animated.a, {
             href,
             style: labelStyle(themeSprings),
             children: [
               icon,
-              /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
                 children: label
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(AnimatedFaChevronDown, {
+          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(AnimatedFaChevronDown, {
             onClick: toggleDropdown,
             style: {
               cursor: "pointer",
@@ -22296,14 +22355,14 @@ var HamburgerDropdown = ({
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(animated.nav, {
+      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(animated.nav, {
         ref,
         style: {
           height: dropdownSprings.height,
           opacity: dropdownSprings.opacity,
           overflow: "hidden"
         },
-        children: links.map((link, index) => /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(NavbarLink, {
+        children: links.map((link, index) => /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(NavbarLink, {
           themeSprings,
           icon: link.icon,
           href: link.href,
@@ -22315,11 +22374,11 @@ var HamburgerDropdown = ({
 };
 
 // src/frontend/components/hamburger/HamburgerHeader.tsx
-var jsx_dev_runtime8 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime10 = __toESM(require_jsx_dev_runtime(), 1);
 var HamburgerHeader = ({
   onClose,
   themeSprings
-}) => /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(animated.div, {
+}) => /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(animated.div, {
   style: {
     alignItems: "center",
     backgroundColor: themeSprings.themePrimary,
@@ -22334,7 +22393,7 @@ var HamburgerHeader = ({
     width: "100%"
   },
   children: [
-    /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("a", {
+    /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("a", {
       href: "/",
       style: {
         color: "inherit",
@@ -22344,7 +22403,7 @@ var HamburgerHeader = ({
       },
       children: "AbsoluteJS"
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(FaTimes, {
+    /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(FaTimes, {
       style: {
         cursor: "pointer",
         fontSize: "34px"
@@ -22354,52 +22413,6 @@ var HamburgerHeader = ({
   ]
 }, undefined, true, undefined, this);
 
-// node_modules/zustand/esm/vanilla.mjs
-var createStoreImpl = (createState) => {
-  let state;
-  const listeners = /* @__PURE__ */ new Set;
-  const setState = (partial, replace) => {
-    const nextState = typeof partial === "function" ? partial(state) : partial;
-    if (!Object.is(nextState, state)) {
-      const previousState = state;
-      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
-      listeners.forEach((listener) => listener(state, previousState));
-    }
-  };
-  const getState = () => state;
-  const getInitialState = () => initialState;
-  const subscribe = (listener) => {
-    listeners.add(listener);
-    return () => listeners.delete(listener);
-  };
-  const api = { setState, getState, getInitialState, subscribe };
-  const initialState = state = createState(setState, getState, api);
-  return api;
-};
-var createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
-
-// node_modules/zustand/esm/react.mjs
-var import_react21 = __toESM(require_react(), 1);
-var identity = (arg) => arg;
-function useStore(api, selector = identity) {
-  const slice = import_react21.default.useSyncExternalStore(api.subscribe, () => selector(api.getState()), () => selector(api.getInitialState()));
-  import_react21.default.useDebugValue(slice);
-  return slice;
-}
-var createImpl = (createState) => {
-  const api = createStore(createState);
-  const useBoundStore = (selector) => useStore(api, selector);
-  Object.assign(useBoundStore, api);
-  return useBoundStore;
-};
-var create = (createState) => createState ? createImpl(createState) : createImpl;
-
-// src/frontend/hooks/useThemeStore.ts
-var useThemeStore = create((set) => ({
-  theme: "dark",
-  setTheme: (newTheme) => set({ theme: newTheme })
-}));
-
 // src/frontend/styles/styles.ts
 var styleReset = `
     * {
@@ -22416,6 +22429,7 @@ var bodyDefault = (themeSprings) => ({
   flexDirection: "column",
   fontFamily: "Poppins, sans-serif",
   height: "100%",
+  lineHeight: "1.4",
   margin: 0
 });
 var mainDefault = {
@@ -22428,8 +22442,8 @@ var htmlDefault = {
   height: "100%"
 };
 var buttonStyle = ({
-  backgroundColor = "none",
-  color = "white",
+  backgroundColor,
+  color,
   width
 }) => ({
   alignItems: "center",
@@ -22463,93 +22477,70 @@ var paragraphStyle = (themeSprings) => ({
   textAlign: "center"
 });
 
-// src/frontend/components/utils/ProfilePicture.tsx
-var jsx_dev_runtime9 = __toESM(require_jsx_dev_runtime(), 1);
-var ProfilePicture = ({
-  userImage,
-  backupImage,
-  width = "2rem",
-  height = "2rem",
-  themeSprings
-}) => /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(animated.img, {
-  src: userImage ?? backupImage,
-  alt: "Profile",
-  style: {
-    backgroundColor: themeSprings.themeTertiary,
-    borderRadius: "50%",
-    height,
-    objectFit: "cover",
-    width
-  }
-}, undefined, false, undefined, this);
-
 // src/frontend/components/hamburger/HamburgerUserButtons.tsx
-var jsx_dev_runtime10 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime11 = __toESM(require_jsx_dev_runtime(), 1);
 var HamburgerUserButtons = ({
   user,
   handleSignOut,
   openModal,
   themeSprings
-}) => {
-  const theme = useThemeStore((state) => state.theme);
-  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
-    style: {
-      alignItems: "center",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "space-between",
-      width: "100%"
-    },
-    children: [
-      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(animated.button, {
-        onClick: user ? () => handleSignOut() : openModal,
-        style: buttonStyle({
-          backgroundColor: themeSprings.themeTertiary,
-          color: themeSprings.contrastPrimary,
-          width: "100%"
-        }),
-        children: user ? "Sign Out" : "Login"
-      }, undefined, false, undefined, this),
-      user !== undefined && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
-        style: {
-          alignItems: "center",
-          display: "flex",
-          flexDirection: "row",
-          gap: "2rem",
-          marginTop: "1rem"
-        },
-        children: [
-          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(animated.a, {
-            href: "/portal",
-            children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(ProfilePicture, {
-              themeSprings,
-              userImage: typeof user.metadata?.profile_picture === "string" ? user.metadata.profile_picture : undefined,
-              backupImage: theme === "dark" ? "/assets/svg/default-profile-icon-light.svg" : "/assets/svg/default-profile-icon.svg",
-              width: "4rem",
-              height: "4rem"
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(animated.span, {
-            style: {
-              color: themeSprings.contrastPrimary,
-              fontSize: "1.2rem",
-              fontWeight: "bold",
-              textAlign: "center"
-            },
-            children: [
-              typeof user.metadata?.given_name === "string" ? user.metadata.given_name : "",
-              " ",
-              typeof user.metadata?.family_name === "string" ? user.metadata.family_name : ""
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-};
+}) => /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
+  style: {
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    width: "100%"
+  },
+  children: [
+    /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(animated.button, {
+      onClick: user ? () => handleSignOut() : openModal,
+      style: buttonStyle({
+        backgroundColor: themeSprings.themeTertiary,
+        color: themeSprings.contrastPrimary,
+        width: "100%"
+      }),
+      children: user ? "Sign Out" : "Login"
+    }, undefined, false, undefined, this),
+    user !== undefined && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
+      style: {
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "row",
+        gap: "2rem",
+        marginTop: "1rem"
+      },
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(animated.a, {
+          href: "/portal",
+          children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(AnimatedProfilePicture, {
+            themeSprings,
+            userImage: typeof user.metadata?.profile_picture === "string" ? user.metadata.profile_picture : undefined,
+            backupImage: themeSprings.theme.to((mode) => mode === "dark" ? "/assets/svg/default-profile-icon-light.svg" : "/assets/svg/default-profile-icon.svg"),
+            width: "4rem",
+            height: "4rem"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(animated.span, {
+          style: {
+            color: themeSprings.contrastPrimary,
+            fontSize: "1.2rem",
+            fontWeight: "bold",
+            textAlign: "center"
+          },
+          children: [
+            typeof user.metadata?.given_name === "string" ? user.metadata.given_name : "",
+            " ",
+            typeof user.metadata?.family_name === "string" ? user.metadata.family_name : ""
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  ]
+}, undefined, true, undefined, this);
 
 // src/frontend/components/hamburger/HamburgerMenu.tsx
-var jsx_dev_runtime11 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime12 = __toESM(require_jsx_dev_runtime(), 1);
 var HamburgerMenu = ({
   spring,
   springApi,
@@ -22557,8 +22548,8 @@ var HamburgerMenu = ({
   themeSprings,
   handleSignOut
 }) => {
-  const [isModalOpen, setIsModalOpen] = import_react22.useState(false);
-  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(animated.div, {
+  const [isModalOpen, setIsModalOpen] = import_react21.useState(false);
+  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(animated.div, {
     style: {
       background: themeSprings.themeSecondary,
       display: "flex",
@@ -22574,11 +22565,11 @@ var HamburgerMenu = ({
       zIndex: 1e4
     },
     children: [
-      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(HamburgerHeader, {
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(HamburgerHeader, {
         themeSprings,
         onClose: () => void springApi.start({ transform: "translateX(100%)" })
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("nav", {
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("nav", {
         style: {
           display: "flex",
           flexDirection: "column",
@@ -22588,28 +22579,28 @@ var HamburgerMenu = ({
         children: [
           navbarData.map((element) => {
             if (isNavbarDropdown(element)) {
-              return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(HamburgerDropdown, {
+              return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(HamburgerDropdown, {
                 themeSprings,
                 label: element.label,
                 href: element.href,
                 links: element.links
               }, element.label, false, undefined, this);
             }
-            return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(NavbarLink, {
+            return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(NavbarLink, {
               themeSprings,
               icon: element.icon,
               href: element.href,
               label: element.label
             }, element.label, false, undefined, this);
           }),
-          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("hr", {
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("hr", {
             style: {
               border: "1px solid #ddd",
               margin: "20px 0",
               width: "100%"
             }
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(HamburgerUserButtons, {
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(HamburgerUserButtons, {
             themeSprings,
             user,
             handleSignOut,
@@ -22619,7 +22610,7 @@ var HamburgerMenu = ({
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Modal, {
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Modal, {
         style: {
           backgroundColor: themeSprings.themeSecondary,
           borderRadius: "0.5rem"
@@ -22628,7 +22619,7 @@ var HamburgerMenu = ({
         onClose: () => {
           setIsModalOpen(false);
         },
-        children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(AuthContainer, {
+        children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(AuthContainer, {
           themeSprings
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
@@ -22637,8 +22628,8 @@ var HamburgerMenu = ({
 };
 
 // src/frontend/components/navbar/NavbarDropdown.tsx
-var import_react23 = __toESM(require_react(), 1);
-var jsx_dev_runtime12 = __toESM(require_jsx_dev_runtime(), 1);
+var import_react22 = __toESM(require_react(), 1);
+var jsx_dev_runtime13 = __toESM(require_jsx_dev_runtime(), 1);
 var AnimatedFaChevronDown2 = animated(FaChevronDown);
 var NavbarDropdown = ({
   label,
@@ -22646,7 +22637,7 @@ var NavbarDropdown = ({
   links,
   themeSprings
 }) => {
-  const dropdownRef = import_react23.useRef(null);
+  const dropdownRef = import_react22.useRef(null);
   const [dropdownSpring, dropdownApi] = useSpring(() => ({
     config: { friction: 30, tension: 250 },
     height: 0,
@@ -22669,10 +22660,10 @@ var NavbarDropdown = ({
       transform: "rotate(-180deg)"
     });
   };
-  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("div", {
     style: dropdownStyle,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("div", {
         style: {
           alignItems: "center",
           display: "flex",
@@ -22689,12 +22680,12 @@ var NavbarDropdown = ({
         onMouseEnter: openDropdown,
         onMouseLeave: closeDropdown,
         children: [
-          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(animated.a, {
+          /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(animated.a, {
             href,
             style: labelStyle(themeSprings),
             children: label
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(AnimatedFaChevronDown2, {
+          /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(AnimatedFaChevronDown2, {
             style: {
               fontSize: "1.5rem",
               marginLeft: "10px",
@@ -22704,12 +22695,12 @@ var NavbarDropdown = ({
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(animated.nav, {
+      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(animated.nav, {
         ref: dropdownRef,
         style: getNavbarDropdownListStyle(dropdownSpring, themeSprings),
         onMouseEnter: openDropdown,
         onMouseLeave: closeDropdown,
-        children: links.map((link, index) => /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(NavbarLink, {
+        children: links.map((link, index) => /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(NavbarLink, {
           themeSprings,
           icon: link.icon,
           href: link.href,
@@ -22721,8 +22712,8 @@ var NavbarDropdown = ({
 };
 
 // src/frontend/components/navbar/NavbarLinks.tsx
-var jsx_dev_runtime13 = __toESM(require_jsx_dev_runtime(), 1);
-var NavbarLinks = ({ navbarData: navbarData2, themeSprings }) => /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("nav", {
+var jsx_dev_runtime14 = __toESM(require_jsx_dev_runtime(), 1);
+var NavbarLinks = ({ navbarData: navbarData2, themeSprings }) => /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("nav", {
   style: {
     alignItems: "center",
     display: "flex",
@@ -22731,14 +22722,14 @@ var NavbarLinks = ({ navbarData: navbarData2, themeSprings }) => /* @__PURE__ */
   },
   children: navbarData2.map((element) => {
     if (isNavbarDropdown(element)) {
-      return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(NavbarDropdown, {
+      return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(NavbarDropdown, {
         themeSprings,
         label: element.label,
         href: element.href,
         links: element.links
       }, element.label, false, undefined, this);
     }
-    return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(NavbarLink, {
+    return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(NavbarLink, {
       themeSprings,
       icon: element.icon,
       href: element.href,
@@ -22748,11 +22739,11 @@ var NavbarLinks = ({ navbarData: navbarData2, themeSprings }) => /* @__PURE__ */
 }, undefined, false, undefined, this);
 
 // src/frontend/components/navbar/NavbarUserButtons.tsx
-var import_react27 = __toESM(require_react(), 1);
+var import_react25 = __toESM(require_react(), 1);
 
 // src/frontend/components/navbar/DropdownContainer.tsx
-var import_react24 = __toESM(require_react(), 1);
-var jsx_dev_runtime14 = __toESM(require_jsx_dev_runtime(), 1);
+var import_react23 = __toESM(require_react(), 1);
+var jsx_dev_runtime15 = __toESM(require_jsx_dev_runtime(), 1);
 var DropdownContainer = ({
   spring,
   springApi,
@@ -22761,8 +22752,8 @@ var DropdownContainer = ({
   themeSprings,
   ignoredElements = []
 }) => {
-  const dropdownRef = import_react24.useRef(null);
-  import_react24.useEffect(() => {
+  const dropdownRef = import_react23.useRef(null);
+  import_react23.useEffect(() => {
     const handleOutsideClick = (event) => {
       if (!(event.target instanceof Node))
         return;
@@ -22781,7 +22772,7 @@ var DropdownContainer = ({
       document.removeEventListener("mousedown", handleOutsideClick);
     };
   }, [ignoredElements, springApi, onClose]);
-  return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(animated.div, {
+  return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(animated.div, {
     ref: dropdownRef,
     style: {
       backgroundColor: themeSprings.themePrimary,
@@ -22800,63 +22791,11 @@ var DropdownContainer = ({
 };
 
 // src/frontend/components/navbar/ThemeButton.tsx
-var import_react26 = __toESM(require_react(), 1);
-
-// node_modules/react-icons/ai/index.mjs
-function AiOutlineExperiment(props) {
-  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 1024 1024" }, child: [{ tag: "path", attr: { d: "M512 472a40 40 0 1 0 80 0 40 40 0 1 0-80 0zm367 352.9L696.3 352V178H768v-68H256v68h71.7v174L145 824.9c-2.8 7.4-4.3 15.2-4.3 23.1 0 35.3 28.7 64 64 64h614.6c7.9 0 15.7-1.5 23.1-4.3 33-12.7 49.4-49.8 36.6-82.8zM395.7 364.7V180h232.6v184.7L719.2 600c-20.7-5.3-42.1-8-63.9-8-61.2 0-119.2 21.5-165.3 60a188.78 188.78 0 0 1-121.3 43.9c-32.7 0-64.1-8.3-91.8-23.7l118.8-307.5zM210.5 844l41.7-107.8c35.7 18.1 75.4 27.8 116.6 27.8 61.2 0 119.2-21.5 165.3-60 33.9-28.2 76.3-43.9 121.3-43.9 35 0 68.4 9.5 97.6 27.1L813.5 844h-603z" }, child: [] }] })(props);
-}
-function AiOutlineMinusCircle(props) {
-  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 1024 1024" }, child: [{ tag: "path", attr: { d: "M696 480H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z" }, child: [] }, { tag: "path", attr: { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" }, child: [] }] })(props);
-}
-function AiOutlineMoon(props) {
-  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 1024 1024", fill: "currentColor", fillRule: "evenodd" }, child: [{ tag: "path", attr: { d: "M489.493 111.658c30.658-1.792 45.991 36.44 22.59 56.329C457.831 214.095 426 281.423 426 354c0 134.757 109.243 244 244 244 72.577 0 139.905-31.832 186.014-86.084 19.868-23.377 58.064-8.102 56.332 22.53C900.4 745.823 725.141 912 512.5 912 291.31 912 112 732.69 112 511.5c0-211.39 164.287-386.024 374.198-399.649l.206-.013zm-81.143 79.75-4.112 1.362C271.1 237.943 176 364.092 176 511.5 176 697.344 326.656 848 512.5 848c148.28 0 274.938-96.192 319.453-230.41l.625-1.934-.11.071c-47.18 29.331-102.126 45.755-159.723 46.26L670 662c-170.104 0-308-137.896-308-308 0-58.595 16.476-114.54 46.273-162.467z" }, child: [] }] })(props);
-}
-
-// node_modules/react-icons/io5/index.mjs
-function IoSunny(props) {
-  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 512 512" }, child: [{ tag: "path", attr: { d: "M256 118a22 22 0 0 1-22-22V48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22zm0 368a22 22 0 0 1-22-22v-48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22zm113.14-321.14a22 22 0 0 1-15.56-37.55l33.94-33.94a22 22 0 0 1 31.11 31.11l-33.94 33.94a21.93 21.93 0 0 1-15.55 6.44zM108.92 425.08a22 22 0 0 1-15.55-37.56l33.94-33.94a22 22 0 1 1 31.11 31.11l-33.94 33.94a21.94 21.94 0 0 1-15.56 6.45zM464 278h-48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44zm-368 0H48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44zm307.08 147.08a21.94 21.94 0 0 1-15.56-6.45l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.55 37.56zM142.86 164.86a21.89 21.89 0 0 1-15.55-6.44l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.56 37.55zM256 358a102 102 0 1 1 102-102 102.12 102.12 0 0 1-102 102z" }, child: [] }] })(props);
-}
-
-// src/frontend/hooks/useInitTheme.ts
-var import_react25 = __toESM(require_react(), 1);
-var useInitTheme = () => {
-  const setTheme = useThemeStore((state) => state.setTheme);
-  const [currentTheme, setCurrentTheme] = import_react25.useState("dark");
-  import_react25.useEffect(() => {
-    const storedTheme = window.localStorage.getItem("theme");
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: light)");
-    const applySystemTheme = (event) => {
-      setTheme(event.matches ? "light" : "dark");
-      setCurrentTheme(event.matches ? "system:light" : "system:dark");
-    };
-    if (storedTheme === "light") {
-      setTheme("light");
-      setCurrentTheme("light");
-      return;
-    }
-    if (storedTheme === "dark") {
-      setTheme("dark");
-      setCurrentTheme("dark");
-      return;
-    }
-    const isLight = mediaQuery.matches;
-    setTheme(isLight ? "light" : "dark");
-    setCurrentTheme(isLight ? "system:light" : "system:dark");
-    mediaQuery.addEventListener("change", applySystemTheme);
-    return () => {
-      mediaQuery.removeEventListener("change", applySystemTheme);
-    };
-  }, [setTheme, setCurrentTheme]);
-  return { currentTheme, setCurrentTheme, setTheme };
-};
-
-// src/frontend/components/navbar/ThemeButton.tsx
-var jsx_dev_runtime15 = __toESM(require_jsx_dev_runtime(), 1);
-var ThemeButton = ({ themeSprings }) => {
-  const { currentTheme, setCurrentTheme, setTheme } = useInitTheme();
-  const detailsRef = import_react26.useRef(null);
-  import_react26.useEffect(() => {
+var import_react24 = __toESM(require_react(), 1);
+var jsx_dev_runtime16 = __toESM(require_jsx_dev_runtime(), 1);
+var ThemeButton = ({ themeSprings, setTheme }) => {
+  const detailsRef = import_react24.useRef(null);
+  import_react24.useEffect(() => {
     const onClickOutside = (event) => {
       const det = detailsRef.current;
       if (!det?.open)
@@ -22871,26 +22810,15 @@ var ThemeButton = ({ themeSprings }) => {
     return () => document.removeEventListener("mousedown", onClickOutside);
   }, []);
   const selectTheme = (option) => {
-    if (option === "system") {
-      const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
-      setTheme(prefersLight ? "light" : "dark");
-      setCurrentTheme(prefersLight ? "system:light" : "system:dark");
-      window.localStorage.removeItem("theme");
-    } else {
-      setTheme(option);
-      setCurrentTheme(option);
-      window.localStorage.setItem("theme", option);
-    }
+    setTheme(option);
     if (detailsRef.current)
       detailsRef.current.open = false;
   };
-  const icon = currentTheme.includes("dark") ? /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(AiOutlineMoon, {
-    style: { height: 24, width: 24 }
-  }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(IoSunny, {
-    style: { height: 24, width: 24 }
-  }, undefined, false, undefined, this);
-  const selected = currentTheme.startsWith("system") ? "system" : currentTheme;
-  return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(animated.details, {
+  const selected = themeSprings.theme.to((t) => {
+    const sel = t.startsWith("system") ? "system" : t;
+    return sel;
+  });
+  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(animated.details, {
     ref: detailsRef,
     style: {
       display: "inline-block",
@@ -22898,7 +22826,7 @@ var ThemeButton = ({ themeSprings }) => {
       position: "relative"
     },
     children: [
-      /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(animated.summary, {
+      /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(animated.summary, {
         style: {
           alignItems: "center",
           backgroundColor: themeSprings.themeTertiary,
@@ -22912,11 +22840,29 @@ var ThemeButton = ({ themeSprings }) => {
           listStyle: "none",
           margin: 0,
           padding: 0,
+          position: "relative",
           width: "2.5rem"
         },
-        children: icon
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(animated.ul, {
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(AnimatedMoon, {
+            style: {
+              height: 24,
+              opacity: themeSprings.theme.to((t) => t.endsWith("dark") ? 1 : 0),
+              position: "absolute",
+              width: 24
+            }
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(AnimatedSun, {
+            style: {
+              height: 24,
+              opacity: themeSprings.theme.to((t) => t.endsWith("dark") ? 0 : 1),
+              position: "absolute",
+              width: 24
+            }
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(animated.ul, {
         style: {
           backgroundColor: themeSprings.themeTertiary,
           borderRadius: "0.25rem",
@@ -22929,33 +22875,41 @@ var ThemeButton = ({ themeSprings }) => {
           right: 0,
           top: "3.5rem"
         },
-        children: ["system", "light", "dark"].map((opt) => /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(animated.li, {
-          onClick: () => selectTheme(opt),
-          style: {
-            background: opt === selected ? themeSprings.contrastPrimary : "transparent",
-            borderRadius: "0.25rem",
-            color: opt === selected ? themeSprings.themeTertiary : themeSprings.contrastPrimary,
-            cursor: "pointer",
-            padding: "0.25rem 0.5rem"
-          },
-          children: opt.charAt(0).toUpperCase() + opt.slice(1)
-        }, opt, false, undefined, this))
+        children: ["system", "light", "dark"].map((opt) => {
+          const background = to2([selected, themeSprings.themePrimary], (sel, bkg) => sel === opt ? bkg : "transparent");
+          const color = to2([
+            selected,
+            themeSprings.contrastPrimary,
+            themeSprings.contrastSecondary
+          ], (sel, tertiary, contrast) => sel === opt ? tertiary : contrast);
+          return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(animated.li, {
+            onClick: () => selectTheme(opt),
+            style: {
+              background,
+              borderRadius: "0.25rem",
+              color,
+              cursor: "pointer",
+              padding: "0.25rem 0.5rem"
+            },
+            children: opt.charAt(0).toUpperCase() + opt.slice(1)
+          }, opt, false, undefined, this);
+        })
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 };
 
 // src/frontend/components/navbar/NavbarUserButtons.tsx
-var jsx_dev_runtime16 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime17 = __toESM(require_jsx_dev_runtime(), 1);
 var NavbarUserButtons = ({
   user,
   handleSignOut,
-  themeSprings
+  themeSprings,
+  setTheme
 }) => {
-  const [isDropdownOpen, setIsDropdownOpen] = import_react27.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = import_react25.useState(false);
   const { isSizeOrLess } = useMediaQuery();
   const isMobile = isSizeOrLess("sm");
-  const theme = useThemeStore((state) => state.theme);
   const openDropdown = () => {
     setIsDropdownOpen(true);
     loginDropdownApi.start({ opacity: 1, scale: 1 });
@@ -22976,15 +22930,15 @@ var NavbarUserButtons = ({
     opacity: 0,
     scale: 0
   }));
-  const userButtonRef = import_react27.useRef(null);
-  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+  const userButtonRef = import_react25.useRef(null);
+  return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
     style: {
       display: "flex",
       marginLeft: "1rem",
       position: "relative"
     },
     children: [
-      /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(animated.button, {
+      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(animated.button, {
         ref: userButtonRef,
         onClick: user ? () => handleSignOut() : handleLoginClick,
         style: buttonStyle({
@@ -22993,31 +22947,32 @@ var NavbarUserButtons = ({
         }),
         children: user ? "Sign Out" : "Login"
       }, undefined, false, undefined, this),
-      user !== undefined && !isMobile && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(animated.a, {
+      user !== undefined && !isMobile && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(animated.a, {
         style: profileButtonStyle,
         href: "/protected",
-        children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(ProfilePicture, {
+        children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(AnimatedProfilePicture, {
           themeSprings,
           userImage: typeof user.metadata?.profile_picture === "string" ? user.metadata.profile_picture : undefined,
-          backupImage: theme === "dark" ? "/assets/svg/default-profile-icon-light.svg" : "/assets/svg/default-profile-icon.svg",
+          backupImage: themeSprings.theme.to((theme) => theme.endsWith("dark") ? "/assets/svg/default-profile-icon-light.svg" : "/assets/svg/default-profile-icon.svg"),
           width: "2.5rem",
           height: "2.5rem"
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(ThemeButton, {
-        themeSprings
+      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(ThemeButton, {
+        themeSprings,
+        setTheme
       }, undefined, false, undefined, this),
-      isDropdownOpen === true && !isMobile && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(DropdownContainer, {
+      isDropdownOpen === true && !isMobile && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(DropdownContainer, {
         themeSprings,
         spring: loginDropdownSpring,
         springApi: loginDropdownApi,
         onClose: closeDropdown,
         ignoredElements: [userButtonRef],
-        children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(AuthContainer, {
+        children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(AuthContainer, {
           themeSprings
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      isDropdownOpen === true && isMobile && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Modal, {
+      isDropdownOpen === true && isMobile && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Modal, {
         style: {
           backgroundColor: themeSprings.themeSecondary,
           borderRadius: "0.5rem"
@@ -23026,7 +22981,7 @@ var NavbarUserButtons = ({
         onClose: () => {
           setIsDropdownOpen(false);
         },
-        children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(AuthContainer, {
+        children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(AuthContainer, {
           themeSprings
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
@@ -23035,11 +22990,16 @@ var NavbarUserButtons = ({
 };
 
 // src/frontend/components/navbar/Navbar.tsx
-var jsx_dev_runtime17 = __toESM(require_jsx_dev_runtime(), 1);
-var Navbar = ({ user, handleSignOut, themeSprings }) => {
+var jsx_dev_runtime18 = __toESM(require_jsx_dev_runtime(), 1);
+var Navbar = ({
+  user,
+  handleSignOut,
+  themeSprings,
+  setTheme
+}) => {
   const { isSizeOrLess } = useMediaQuery();
   const isMobile = isSizeOrLess("sm");
-  const navRef = import_react28.useRef(null);
+  const navRef = import_react26.useRef(null);
   const [hamburgerMenuSpring, hamburgerMenuApi] = useSpring(() => ({
     config: { friction: 40, tension: 275 },
     transform: "translateX(100%)",
@@ -23058,11 +23018,11 @@ var Navbar = ({ user, handleSignOut, themeSprings }) => {
       transform: isOpen ? "translateX(0%)" : "translateX(100%)"
     });
   };
-  return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(animated.header, {
+  return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(animated.header, {
     ref: navRef,
     style: navbarContainerStyle(themeSprings),
     children: [
-      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(animated.a, {
+      /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(animated.a, {
         href: "/",
         style: {
           color: themeSprings.contrastPrimary,
@@ -23072,31 +23032,32 @@ var Navbar = ({ user, handleSignOut, themeSprings }) => {
         },
         children: "AbsoluteJS"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
         style: {
           alignItems: "center",
           display: "flex"
         },
         children: [
-          !isMobile && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(NavbarLinks, {
+          !isMobile && /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(NavbarLinks, {
             navbarData,
             themeSprings
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(NavbarUserButtons, {
+          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(NavbarUserButtons, {
             user,
             handleSignOut,
-            themeSprings
+            themeSprings,
+            setTheme
           }, undefined, false, undefined, this),
-          isMobile === true && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("button", {
+          isMobile === true && /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("button", {
             style: hamburgerButtonStyle,
             onClick: toggleHamburgerMenu,
-            children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(RxHamburgerMenu, {
+            children: /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(RxHamburgerMenu, {
               size: 36
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(HamburgerMenu, {
+      /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(HamburgerMenu, {
         themeSprings,
         spring: hamburgerMenuSpring,
         springApi: hamburgerMenuApi,
@@ -23108,35 +23069,35 @@ var Navbar = ({ user, handleSignOut, themeSprings }) => {
 };
 
 // src/frontend/components/page/Head.tsx
-var jsx_dev_runtime18 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime19 = __toESM(require_jsx_dev_runtime(), 1);
 var Head = ({
   title = "AbsoluteJS",
   icon = "/assets/favicon.ico"
-}) => /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("head", {
+}) => /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("head", {
   children: [
-    /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("meta", {
+    /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("meta", {
       charSet: "utf-8"
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("title", {
+    /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("title", {
       children: title
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("meta", {
+    /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("meta", {
       name: "description",
       content: "AbsoluteJS Documentation"
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("meta", {
+    /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("meta", {
       name: "viewport",
       content: "width=device-width, initial-scale=1"
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("link", {
+    /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("link", {
       rel: "icon",
       href: icon
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("link", {
+    /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("link", {
       href: "https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap",
       rel: "stylesheet"
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("style", {
+    /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("style", {
       children: styleReset
     }, undefined, false, undefined, this)
   ]
@@ -23187,7 +23148,7 @@ var sidebarData = [
 ];
 
 // src/frontend/components/sidebar/SidebarDropdown.tsx
-var jsx_dev_runtime19 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime20 = __toESM(require_jsx_dev_runtime(), 1);
 var SidebarDropdown = ({
   label,
   icon,
@@ -23215,27 +23176,27 @@ var SidebarDropdown = ({
       transform: isOpen ? "rotate(180deg)" : "rotate(0deg)"
     });
   };
-  return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
     style: { width: "100%" },
     children: [
-      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
         style: {
           alignItems: "center",
           display: "flex",
           justifyContent: "space-between"
         },
         children: [
-          /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(animated.a, {
+          /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(animated.a, {
             href,
             style: labelStyle(themeSprings),
             children: [
               icon,
-              /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("span", {
                 children: label
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(AnimatedFaChevronDown, {
+          /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(AnimatedFaChevronDown, {
             onClick: toggleDropdown,
             style: {
               cursor: "pointer",
@@ -23247,14 +23208,14 @@ var SidebarDropdown = ({
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(animated.nav, {
+      /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(animated.nav, {
         ref,
         style: {
           height: dropdownSprings.height,
           opacity: dropdownSprings.opacity,
           overflow: "hidden"
         },
-        children: links.map((link, index) => /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(NavbarLink, {
+        children: links.map((link, index) => /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(NavbarLink, {
           themeSprings,
           icon: link.icon,
           href: link.href,
@@ -23266,8 +23227,8 @@ var SidebarDropdown = ({
 };
 
 // src/frontend/components/sidebar/Sidebar.tsx
-var jsx_dev_runtime20 = __toESM(require_jsx_dev_runtime(), 1);
-var Sidebar = ({ themeSprings }) => /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(animated.aside, {
+var jsx_dev_runtime21 = __toESM(require_jsx_dev_runtime(), 1);
+var Sidebar = ({ themeSprings }) => /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(animated.aside, {
   style: {
     borderColor: themeSprings.themeTertiary,
     borderRight: "2px solid",
@@ -23275,7 +23236,7 @@ var Sidebar = ({ themeSprings }) => /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(ani
   },
   children: sidebarData.map((element) => {
     if (isNavbarDropdown(element)) {
-      return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(SidebarDropdown, {
+      return /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(SidebarDropdown, {
         label: element.label,
         href: element.href,
         links: element.links,
@@ -23283,7 +23244,7 @@ var Sidebar = ({ themeSprings }) => /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(ani
         themeSprings
       }, element.label, false, undefined, this);
     }
-    return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(animated.a, {
+    return /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(animated.a, {
       href: element.href,
       style: navbarDrowdownLinkStyle(themeSprings),
       children: element.label
@@ -23292,9 +23253,9 @@ var Sidebar = ({ themeSprings }) => /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(ani
 }, undefined, false, undefined, this);
 
 // src/frontend/hooks/useAuthStatus.ts
-var import_react29 = __toESM(require_react(), 1);
+var import_react27 = __toESM(require_react(), 1);
 var useAuthStatus = () => {
-  const [user, setUser] = import_react29.useState();
+  const [user, setUser] = import_react27.useState();
   const checkAuthStatus = async () => {
     const response = await fetch("/oauth2/status");
     if (!response.ok && response.statusText === "Unauthorized") {
@@ -23323,7 +23284,7 @@ var useAuthStatus = () => {
       console.error("SignOut failed");
     }
   };
-  import_react29.useEffect(() => {
+  import_react27.useEffect(() => {
     checkAuthStatus();
   }, []);
   return {
@@ -23333,8 +23294,8 @@ var useAuthStatus = () => {
   };
 };
 
-// src/frontend/hooks/useThemeColors.ts
-var import_react30 = __toESM(require_react(), 1);
+// src/frontend/hooks/useTheme.ts
+var import_react28 = __toESM(require_react(), 1);
 
 // src/frontend/styles/colors.ts
 var primaryColor = "#A0E7E5";
@@ -23345,52 +23306,68 @@ var darkPrimaryColor = "#0B0B0B";
 var darkSecondaryColor = "#14141E";
 var darkTertiaryColor = "#1E1E2E";
 
-// src/frontend/hooks/useThemeColors.ts
-var useThemeColors = () => {
-  const theme = useThemeStore((state) => state.theme);
-  const [themeSprings, themeApi] = useSpring(() => ({
-    contrastPrimary: theme === "dark" ? lightPrimaryColor : darkPrimaryColor,
-    contrastSecondary: theme === "dark" ? lightSecondaryColor : darkSecondaryColor,
-    themePrimary: theme === "dark" ? darkPrimaryColor : lightPrimaryColor,
-    themeSecondary: theme === "dark" ? darkSecondaryColor : lightSecondaryColor,
-    themeTertiary: theme === "dark" ? darkTertiaryColor : lightTertiaryColor
-  }));
-  import_react30.useEffect(() => {
-    themeApi.start({
-      contrastPrimary: theme === "dark" ? lightPrimaryColor : darkPrimaryColor,
-      contrastSecondary: theme === "dark" ? lightSecondaryColor : darkSecondaryColor,
-      themePrimary: theme === "dark" ? darkPrimaryColor : lightPrimaryColor,
-      themeSecondary: theme === "dark" ? darkSecondaryColor : lightSecondaryColor,
-      themeTertiary: theme === "dark" ? darkTertiaryColor : lightTertiaryColor
-    });
-  }, [theme, themeApi]);
-  return themeSprings;
+// src/frontend/hooks/useTheme.ts
+var createPalette = (mode) => ({
+  contrastPrimary: mode.endsWith("dark") ? lightPrimaryColor : darkPrimaryColor,
+  contrastSecondary: mode.endsWith("dark") ? lightSecondaryColor : darkSecondaryColor,
+  theme: mode,
+  themePrimary: mode.endsWith("dark") ? darkPrimaryColor : lightPrimaryColor,
+  themeSecondary: mode.endsWith("dark") ? darkSecondaryColor : lightSecondaryColor,
+  themeTertiary: mode.endsWith("dark") ? darkTertiaryColor : lightTertiaryColor
+});
+var useTheme = (initialTheme) => {
+  const browserEnvironmentAvailable = typeof window !== "undefined" && typeof window.matchMedia === "function";
+  const [themeSprings, themeSpringController] = useSpring(() => createPalette(initialTheme ?? "system:dark"));
+  const mediaQueryRef = import_react28.useRef(null);
+  const applySystemChange = (event) => {
+    const updatedThemeMode = event.matches ? "system:dark" : "system:light";
+    themeSpringController.start(createPalette(updatedThemeMode));
+    document.cookie = `theme=${updatedThemeMode}; Max-Age=31536000; Path=/`;
+  };
+  import_react28.useEffect(() => {
+    if (!browserEnvironmentAvailable)
+      return;
+    const shouldFollowSystem = !initialTheme || initialTheme.startsWith("system");
+    if (!shouldFollowSystem)
+      return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    mediaQueryRef.current = mediaQuery;
+    if (!mediaQuery.matches) {
+      themeSpringController.start(createPalette("system:light"));
+    }
+    mediaQuery.addEventListener("change", applySystemChange);
+    return () => {
+      mediaQuery.removeEventListener("change", applySystemChange);
+      mediaQueryRef.current = null;
+    };
+  }, []);
+  const setTheme = (selectedTheme) => {
+    if (!browserEnvironmentAvailable)
+      return;
+    if (mediaQueryRef.current) {
+      mediaQueryRef.current.removeEventListener("change", applySystemChange);
+      mediaQueryRef.current = null;
+    }
+    let nextThemeMode;
+    if (selectedTheme === "system") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      nextThemeMode = mediaQuery.matches ? "system:dark" : "system:light";
+      mediaQuery.addEventListener("change", applySystemChange);
+      mediaQueryRef.current = mediaQuery;
+    } else {
+      nextThemeMode = selectedTheme;
+    }
+    themeSpringController.start(createPalette(nextThemeMode));
+    document.cookie = `theme=${nextThemeMode}; Max-Age=31536000; Path=/`;
+  };
+  return [themeSprings, setTheme];
 };
 
-// src/frontend/components/documentation/Overview.tsx
-var jsx_dev_runtime21 = __toESM(require_jsx_dev_runtime(), 1);
-var Overview = () => /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("div", {
-  style: {
-    display: "flex",
-    flex: 1,
-    flexDirection: "column",
-    padding: "1rem 2rem"
-  },
-  children: [
-    /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("h1", {
-      children: "Overview"
-    }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("p", {
-      children: "The documentation provides a comprehensive guide to the features and functionality of the platform. It covers various aspects including installation, configuration, and usage of different packages. The documentation is designed to help users quickly get started and effectively utilize the platform's capabilities."
-    }, undefined, false, undefined, this)
-  ]
-}, undefined, true, undefined, this);
-
 // src/frontend/pages/Documentation.tsx
 var jsx_dev_runtime22 = __toESM(require_jsx_dev_runtime(), 1);
-var Documentation = () => {
+var Documentation = ({ section, theme }) => {
   const { user, handleSignOut } = useAuthStatus();
-  const themeSprings = useThemeColors();
+  const [themeSprings, setTheme] = useTheme(theme);
   return /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("html", {
     lang: "en",
     style: htmlDefault,
@@ -23400,6 +23377,7 @@ var Documentation = () => {
         style: bodyDefault(themeSprings),
         children: [
           /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(Navbar, {
+            setTheme,
             themeSprings,
             user,
             handleSignOut
@@ -23427,4 +23405,6 @@ var Documentation = () => {
 
 // src/frontend/indexes/DocumentationIndex.tsx
 var jsx_dev_runtime23 = __toESM(require_jsx_dev_runtime(), 1);
-import_client.hydrateRoot(document, /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(Documentation, {}, undefined, false, undefined, this));
+import_client.hydrateRoot(document, /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(Documentation, {
+  ...window.__INITIAL_PROPS__
+}, undefined, false, undefined, this));