diff --git a/package.json b/package.json
index d2f8e187..22f84647 100644
--- a/package.json
+++ b/package.json
@@ -5,11 +5,9 @@
   "type": "module",
   "packageManager": "yarn@4.5.1",
   "dependencies": {
-    "@chakra-ui/icons": "^2.1.1",
-    "@chakra-ui/react": "^2.8.2",
+    "@chakra-ui/react": "^3.1.2",
     "@chakra-ui/system": "^2.6.2",
     "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
     "@eslint/compat": "^1.1.1",
     "@vitejs/plugin-react": "^4.3.1",
     "dataloader": "^2.2.2",
@@ -18,16 +16,18 @@
     "eslint-plugin-libram": "^0.4.17",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "framer-motion": "^11.3.29",
     "globals": "^15.9.0",
     "html-entities": "^2.5.2",
     "kolmafia": "npm:tome-kolmafia-mock@5.28118.0",
     "libram": "^0.9.18",
+    "lucide-react": "^0.460.0",
+    "next-themes": "^0.4.3",
     "postcss": "^8.4.41",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
+    "react-icons": "^5.3.0",
     "react-router-dom": "^6.26.1",
     "tome-kolmafia-lib": "^5.28118.0",
     "tome-kolmafia-react": "^0.2.5",
diff --git a/src/App.tsx b/src/App.tsx
index e7d6383c..91c47883 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,48 +1,12 @@
-import { ChakraProvider, extendTheme } from "@chakra-ui/react";
+import { ChakraProvider } from "@chakra-ui/react";
 import { RefreshContextProvider } from "tome-kolmafia-react";
 
 import NagContextProvider from "./contexts/NagContextProvider";
 import Layout from "./Layout";
-
-const bulleted = {
-  container: {
-    paddingTop: "0.125rem",
-    paddingLeft: "1.25rem",
-  },
-  item: {
-    textIndent: "-0.375rem",
-    _before: {
-      content: '"●"',
-      verticalAlign: "middle",
-      fontFamily: "Arial, Helvetica, sans-serif",
-      fontSize: "0.75rem",
-      lineHeight: 0,
-      display: "inline-block",
-      width: "0.375rem",
-      // This is a hackish tweak...
-      marginTop: "-3px",
-    },
-  },
-};
-
-const theme = extendTheme({
-  lineHeights: {
-    none: 1,
-    shorter: 1.05,
-    short: 1.1,
-    base: 1.15,
-    tall: 1.25,
-    taller: 1.5,
-  },
-  components: {
-    List: {
-      variants: { bulleted },
-    },
-  },
-});
+import { system } from "./theme";
 
 const App = () => (
-  <ChakraProvider theme={theme}>
+  <ChakraProvider value={system}>
     <RefreshContextProvider>
       <NagContextProvider>
         <Layout />
diff --git a/src/Layout.tsx b/src/Layout.tsx
index fc3359a1..d51f985b 100644
--- a/src/Layout.tsx
+++ b/src/Layout.tsx
@@ -1,11 +1,4 @@
-import {
-  Box,
-  Container,
-  Divider,
-  Flex,
-  Stack,
-  useToast,
-} from "@chakra-ui/react";
+import { Box, Container, Flex, Separator, Stack } from "@chakra-ui/react";
 import { useCallback, useContext, useEffect, useState } from "react";
 import { setGlobalErrorHandler } from "tome-kolmafia-lib";
 import { RefreshContext } from "tome-kolmafia-react";
@@ -15,6 +8,7 @@ import ChatButton from "./components/ChatButton";
 import LocationBar from "./components/LocationBar";
 import PrefsButton from "./components/PrefsButton";
 import RefreshButton from "./components/RefreshButton";
+import { toaster, Toaster } from "./components/ui/toaster";
 import { addDevelopmentListeners } from "./prefs/addListeners";
 import NagSection from "./sections/NagSection";
 import QuestSection from "./sections/QuestSection";
@@ -52,26 +46,23 @@ const Layout = () => {
     }
   }, [triggerHardRefresh]);
 
-  const toast = useToast();
   useEffect(() => {
     setGlobalErrorHandler((err) => {
       console.error(err);
-      toast({
+      toaster.error({
         title: "Error updating.",
         description:
           err !== null && (typeof err === "object" || typeof err === "string")
             ? err.toString()
             : "Unknown error.",
-        status: "error",
         duration: 10000,
-        isClosable: true,
-        containerStyle: { maxW: "95vw" },
       });
     });
-  }, [toast]);
+  }, []);
 
   return (
     <Container
+      maxW="4xl"
       paddingX={0}
       fontSize="sm"
       h="100vh"
@@ -81,7 +72,7 @@ const Layout = () => {
       <Flex position="relative" minH={0}>
         <Stack
           direction="row"
-          spacing={1}
+          gap={1}
           position="absolute"
           top={1}
           right={1}
@@ -95,7 +86,7 @@ const Layout = () => {
           <Stack>
             <NagSection />
             <QuestSection />
-            <Divider />
+            <Separator />
             <ResourceSection />
           </Stack>
         </Box>
@@ -109,6 +100,7 @@ const Layout = () => {
         />
       </Flex>
       <LocationBar />
+      <Toaster />
     </Container>
   );
 };
diff --git a/src/components/AdviceTip.tsx b/src/components/AdviceTip.tsx
deleted file mode 100644
index 5e37a905..00000000
--- a/src/components/AdviceTip.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Tooltip, TooltipProps } from "@chakra-ui/react";
-import { FC } from "react";
-
-const AdviceTip: FC<TooltipProps> = ({ ...props }) => (
-  <Tooltip
-    bg="white"
-    color="gray.600"
-    border="1px"
-    borderColor="gray.400"
-    shadow="xs"
-    rounded="md"
-    hasArrow
-    arrowSize={10}
-    arrowShadowColor="gray" // NOTE: The "gray.400" style colors don't work in this field.
-    mx={5}
-    p={3}
-    {...props}
-  />
-);
-
-export default AdviceTip;
diff --git a/src/components/AdviceTooltip.tsx b/src/components/AdviceTooltip.tsx
index 53467255..01497714 100644
--- a/src/components/AdviceTooltip.tsx
+++ b/src/components/AdviceTooltip.tsx
@@ -1,39 +1,23 @@
-import { Box, Text, TooltipProps } from "@chakra-ui/react";
-import { FC, ReactNode } from "react";
+import { FC } from "react";
 
-import AdviceTip from "./AdviceTip";
+import { Tooltip, TooltipProps } from "./ui/tooltip";
 
-interface AdviceTooltipProps extends Omit<TooltipProps, "children"> {
-  text: string | JSX.Element;
-  label: ReactNode;
-}
-/**
- * A tooltip generated on text for a quick descriptive tooltip.
- * @param text The text you want displayed inside this tooltip.
- * @param label The text you want displayed that users hover over to get the tooltip
- * @returns A FC Tooltip object where the label generates the tooltip on hoverover.
- */
-
-const AdviceTooltip: FC<AdviceTooltipProps> = ({ text, label, ...props }) => {
-  const toolTip = (
-    <Box bg="gray.100" p={2} rounded="md" fontSize={12}>
-      {typeof text === "string" ? <Text>{text}</Text> : text}
-    </Box>
-  );
-
-  return (
-    <AdviceTip label={toolTip} {...props}>
-      <Text
-        as="span"
-        fontWeight="bold"
-        color="gray.500"
-        decoration="underline dotted lightsteelblue"
-        cursor="pointer"
-      >
-        {label}
-      </Text>
-    </AdviceTip>
-  );
-};
+const AdviceTooltip: FC<TooltipProps> = ({ content, ...props }) => (
+  <Tooltip
+    showArrow
+    openDelay={0}
+    contentProps={{
+      css: { "--tooltip-bg": "bg" },
+      bgColor: "bg",
+      border: "1px solid border",
+      shadow: "xs",
+      rounded: "md",
+      mx: 5,
+      p: 3,
+    }}
+    content={content}
+    {...props}
+  />
+);
 
 export default AdviceTooltip;
diff --git a/src/components/AdviceTooltipIcon.tsx b/src/components/AdviceTooltipIcon.tsx
index d64e5719..3c15edc5 100644
--- a/src/components/AdviceTooltipIcon.tsx
+++ b/src/components/AdviceTooltipIcon.tsx
@@ -1,19 +1,12 @@
-import { InfoIcon, Text } from "@chakra-ui/icons";
-import {
-  ComponentWithAs,
-  HStack,
-  Icon,
-  IconProps,
-  Image,
-  VStack,
-} from "@chakra-ui/react";
+import { HStack, Icon, Image, Text, VStack } from "@chakra-ui/react";
+import { Info } from "lucide-react";
 import { FC } from "react";
 
-import AdviceTip from "./AdviceTip";
+import AdviceTooltip from "./AdviceTooltip";
 
 interface AdviceTooltipIconProps {
-  text: string;
-  icon?: ComponentWithAs<"svg", IconProps>;
+  advice: string;
+  icon?: typeof Info;
 }
 /**
  * A tooltip generated on an icon hoverover with a skull that states whatever text you want for the player.
@@ -22,7 +15,10 @@ interface AdviceTooltipIconProps {
  * @returns A FC Tooltip object where the displayed icon generates the tooltip on hoverover.
  */
 
-const AdviceTooltipIcon: FC<AdviceTooltipIconProps> = ({ text, icon }) => {
+const AdviceTooltipIcon: FC<AdviceTooltipIconProps> = ({
+  advice,
+  icon: TooltipIcon = Info,
+}) => {
   const toolTip = (
     <HStack px={2}>
       <Image
@@ -31,18 +27,20 @@ const AdviceTooltipIcon: FC<AdviceTooltipIconProps> = ({ text, icon }) => {
         boxSize="30px"
         fit="contain"
       />
-      <VStack align="stretch" spacing={0.3}>
-        <Text bg="gray.200" p={4} rounded="md" fontSize={12}>
-          {text}
+      <VStack align="stretch" gap={0.3}>
+        <Text bg="gray.muted" p={4} rounded="md" fontSize={12}>
+          {advice}
         </Text>
       </VStack>
     </HStack>
   );
 
   return (
-    <AdviceTip label={toolTip}>
-      <Icon as={icon ? icon : InfoIcon} color="gray.500" h={3.5} w={3.5} />
-    </AdviceTip>
+    <AdviceTooltip content={toolTip}>
+      <Icon color="gray.solid" h={3.5} w={3.5}>
+        <TooltipIcon />
+      </Icon>
+    </AdviceTooltip>
   );
 };
 
diff --git a/src/components/AdviceTooltipText.tsx b/src/components/AdviceTooltipText.tsx
new file mode 100644
index 00000000..a0c34b4f
--- /dev/null
+++ b/src/components/AdviceTooltipText.tsx
@@ -0,0 +1,43 @@
+import { Box, Text } from "@chakra-ui/react";
+import { FC } from "react";
+
+import AdviceTooltip from "./AdviceTooltip";
+import { TooltipProps } from "./ui/tooltip";
+
+interface AdviceTooltipProps extends Omit<TooltipProps, "content"> {
+  advice: string | JSX.Element;
+}
+/**
+ * A tooltip generated on text for a quick descriptive tooltip.
+ * @param text The text you want displayed inside this tooltip.
+ * @param label The text you want displayed that users hover over to get the tooltip
+ * @returns A FC Tooltip object where the label generates the tooltip on hoverover.
+ */
+
+const AdviceTooltipText: FC<AdviceTooltipProps> = ({
+  advice,
+  children,
+  ...props
+}) => {
+  const toolTip = (
+    <Box bg="bg.muted" p={2} rounded="md" fontSize="xs">
+      {typeof advice === "string" ? <Text>{advice}</Text> : advice}
+    </Box>
+  );
+
+  return (
+    <AdviceTooltip content={toolTip} {...props}>
+      <Text
+        as="span"
+        fontWeight="bold"
+        color="fg.subtle"
+        textDecoration="underline dotted"
+        cursor="pointer"
+      >
+        {children}
+      </Text>
+    </AdviceTooltip>
+  );
+};
+
+export default AdviceTooltipText;
diff --git a/src/components/AsyncButton.tsx b/src/components/AsyncButton.tsx
index f13e179c..89b01b8d 100644
--- a/src/components/AsyncButton.tsx
+++ b/src/components/AsyncButton.tsx
@@ -1,6 +1,6 @@
-import { ButtonProps, forwardRef, Tooltip, useToast } from "@chakra-ui/react";
+import { ButtonProps, Text } from "@chakra-ui/react";
 import {
-  FC,
+  forwardRef,
   MouseEvent,
   useCallback,
   useContext,
@@ -11,17 +11,18 @@ import { remoteCliExecute } from "tome-kolmafia-lib";
 import { RefreshContext } from "tome-kolmafia-react";
 
 import HeaderButton from "./HeaderButton";
+import { toaster } from "./ui/toaster";
+import { Tooltip } from "./ui/tooltip";
 
 export interface AsyncButtonProps extends ButtonProps {
   href?: string;
   command?: string;
 }
 
-const AsyncButton: FC<AsyncButtonProps> = forwardRef(
+const AsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(
   ({ href, command, onClick, children, ...props }, ref) => {
     const { triggerHardRefresh } = useContext(RefreshContext);
     const [isLoading, setIsLoading] = useState(false);
-    const toast = useToast();
 
     const onClickWithCommand = useMemo(
       () =>
@@ -29,17 +30,15 @@ const AsyncButton: FC<AsyncButtonProps> = forwardRef(
           ? async () => {
               const result = await remoteCliExecute(command);
               if (result === false) {
-                toast({
+                toaster.error({
                   title: "Command failed.",
                   description: `Failed to execute "${command}".`,
-                  status: "error",
                   duration: 5000,
-                  isClosable: true,
                 });
               }
             }
           : onClick,
-      [command, onClick, toast],
+      [command, onClick],
     );
 
     const handleClick = useCallback(
@@ -57,15 +56,19 @@ const AsyncButton: FC<AsyncButtonProps> = forwardRef(
 
     return (
       <HeaderButton
-        isLoading={isLoading}
+        loading={isLoading}
         href={href}
         onClick={handleClick}
         ref={ref}
         {...props}
       >
         {command ? (
-          <Tooltip label={command} fontSize="xs">
-            {children}
+          <Tooltip content={command}>
+            {typeof children === "string" ? (
+              <Text as="span">{children}</Text>
+            ) : (
+              children
+            )}
           </Tooltip>
         ) : (
           children
diff --git a/src/components/AsyncLink.tsx b/src/components/AsyncLink.tsx
index e015ff99..89245156 100644
--- a/src/components/AsyncLink.tsx
+++ b/src/components/AsyncLink.tsx
@@ -1,6 +1,5 @@
-import { Link, LinkProps, Spinner, Tooltip, useToast } from "@chakra-ui/react";
+import { Link, LinkProps, Spinner } from "@chakra-ui/react";
 import {
-  FC,
   forwardRef,
   MouseEvent,
   useCallback,
@@ -11,16 +10,18 @@ import {
 import { remoteCliExecute } from "tome-kolmafia-lib";
 import { RefreshContext } from "tome-kolmafia-react";
 
+import { toaster } from "./ui/toaster";
+import { Tooltip } from "./ui/tooltip";
+
 export interface AsyncLinkProps extends Omit<LinkProps, "href"> {
   href?: string;
   command?: string;
 }
 
-const AsyncLink: FC<AsyncLinkProps> = forwardRef(
+const AsyncLink = forwardRef<HTMLAnchorElement, AsyncLinkProps>(
   ({ href, command, onClick, children, ...props }, ref) => {
     const { triggerHardRefresh } = useContext(RefreshContext);
     const [isLoading, setIsLoading] = useState(false);
-    const toast = useToast();
 
     const onClickWithCommand = useMemo(
       () =>
@@ -28,17 +29,15 @@ const AsyncLink: FC<AsyncLinkProps> = forwardRef(
           ? async () => {
               const result = await remoteCliExecute(command);
               if (result === false) {
-                toast({
+                toaster.error({
                   title: "Command failed.",
                   description: `Failed to execute "${command}".`,
-                  status: "error",
                   duration: 5000,
-                  isClosable: true,
                 });
               }
             }
           : onClick,
-      [command, onClick, toast],
+      [command, onClick],
     );
 
     const handleClick = useCallback(
@@ -65,12 +64,12 @@ const AsyncLink: FC<AsyncLinkProps> = forwardRef(
         {...props}
         textDecoration="none !important"
         pointerEvents="none"
-        color="gray.500"
+        color="gray.solid"
       >
         {children} <Spinner as="span" size="xs" />
       </Link>
     ) : command ? (
-      <Tooltip label={command} fontSize="xs">
+      <Tooltip showArrow content={command}>
         {link}
       </Tooltip>
     ) : (
diff --git a/src/components/AutocompleteInput.tsx b/src/components/AutocompleteInput.tsx
index 5f30d01e..e8b97c75 100644
--- a/src/components/AutocompleteInput.tsx
+++ b/src/components/AutocompleteInput.tsx
@@ -1,13 +1,4 @@
-import {
-  Input,
-  InputProps,
-  List,
-  ListItem,
-  Popover,
-  PopoverBody,
-  PopoverContent,
-  PopoverTrigger,
-} from "@chakra-ui/react";
+import { Input, InputProps, List } from "@chakra-ui/react";
 import {
   ChangeEvent,
   forwardRef,
@@ -17,6 +8,13 @@ import {
   useState,
 } from "react";
 
+import {
+  PopoverBody,
+  PopoverContent,
+  PopoverRoot,
+  PopoverTrigger,
+} from "./ui/popover";
+
 function mod(n: number, k: number): number {
   const naive = n % k;
   return naive < 0 ? naive + k : naive;
@@ -106,14 +104,15 @@ const AutocompleteInput = forwardRef<HTMLInputElement, AutocompleteInputProps>(
     );
 
     return (
-      <Popover
-        isOpen={!hide && value.length >= 3 && matchingValues.length > 0}
+      <PopoverRoot
+        open={!hide && value.length >= 3 && matchingValues.length > 0}
         autoFocus={false}
-        placement="top"
+        positioning={{ placement: "top" }}
       >
         <PopoverTrigger>
           <Input
             size="xs"
+            height={7}
             value={value}
             onChange={handleChange}
             onKeyDown={handleAutocompleteKeyDown}
@@ -128,13 +127,13 @@ const AutocompleteInput = forwardRef<HTMLInputElement, AutocompleteInputProps>(
         </PopoverTrigger>
         <PopoverContent maxW="90vw">
           <PopoverBody p={2} maxW="90vw">
-            <List listStyleType="none">
+            <List.Root listStyleType="none">
               {matchingValues.map((name, index) => {
                 const highlight =
                   autoIndex !== null &&
                   mod(autoIndex, matchingValues.length) === index;
                 return (
-                  <ListItem
+                  <List.Item
                     key={name}
                     data-current={name}
                     p={0.5}
@@ -146,13 +145,13 @@ const AutocompleteInput = forwardRef<HTMLInputElement, AutocompleteInputProps>(
                     borderRadius="3px"
                   >
                     {name}
-                  </ListItem>
+                  </List.Item>
                 );
               })}
-            </List>
+            </List.Root>
           </PopoverBody>
         </PopoverContent>
-      </Popover>
+      </PopoverRoot>
     );
   },
 );
diff --git a/src/components/BrandHeading.tsx b/src/components/BrandHeading.tsx
index d7a9087d..8526d307 100644
--- a/src/components/BrandHeading.tsx
+++ b/src/components/BrandHeading.tsx
@@ -2,16 +2,16 @@ import { Heading, Image } from "@chakra-ui/react";
 import { FC } from "react";
 
 const BrandHeading: FC = () => (
-  <Heading as="h1" size="xl" textAlign="center">
+  <Heading as="h1" size="3xl" textAlign="center">
     Y
     <Image
       src="Skull192.png"
       alt="O"
       display="inline"
-      h="2rem"
-      mb="-4px"
+      h="1.75rem"
       ml="-5px"
-      mr="-2px"
+      mt="-5px"
+      mr="-1px"
       // FIXME: make logo itself transparent.
       mixBlendMode="multiply"
     />
diff --git a/src/components/ChatButton.tsx b/src/components/ChatButton.tsx
index e97a5ea8..69505ffb 100644
--- a/src/components/ChatButton.tsx
+++ b/src/components/ChatButton.tsx
@@ -1,5 +1,5 @@
-import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
 import { ButtonProps, IconButton } from "@chakra-ui/react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 import { FC } from "react";
 
 export interface ChatButtonProps extends ButtonProps {
@@ -8,14 +8,16 @@ export interface ChatButtonProps extends ButtonProps {
 
 const ChatButton: FC<ChatButtonProps> = ({ direction, ...props }) => (
   <IconButton
-    icon={direction === "left" ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+    asChild
     aria-label="Refresh"
-    size="xs"
-    fontSize="20px"
+    size="2xs"
+    p={1}
     variant="outline"
     backgroundColor="white"
     {...props}
-  />
+  >
+    {direction === "left" ? <ChevronLeft /> : <ChevronRight />}
+  </IconButton>
 );
 
 export default ChatButton;
diff --git a/src/components/Chevrons.tsx b/src/components/Chevrons.tsx
index de6c9ce2..d783aa47 100644
--- a/src/components/Chevrons.tsx
+++ b/src/components/Chevrons.tsx
@@ -1,31 +1,42 @@
-import { ChevronRightIcon } from "@chakra-ui/icons";
-import { Text, TextProps } from "@chakra-ui/react";
-import { FC } from "react";
+import { Icon, Text, TextProps } from "@chakra-ui/react";
+import { ChevronRight } from "lucide-react";
+import { FC, forwardRef } from "react";
 
-interface ChevronProps extends TextProps {
+export interface ChevronsProps extends TextProps {
   usesLeft: number;
   totalUses: number;
 }
 
 /**
  * Generate fading chevrons to describe # of a resource left out of total casts
- * @returns Three <ListIcon> objects colored by availability of the resource
+ * @returns Three <List.Indicator> objects colored by availability of the resource
  * @param usesLeft How many casts/uses you have left of the resource
  * @param totalUses Total number of uses the users has
  */
-const Chevrons: FC<ChevronProps> = ({ usesLeft, totalUses, ...props }) => {
+const Chevrons: FC<ChevronsProps> = forwardRef<
+  HTMLParagraphElement,
+  ChevronsProps
+>(({ usesLeft, totalUses, ...props }, ref) => {
   return (
-    <Text as="span" verticalAlign="middle" whiteSpace="nowrap" {...props}>
+    <Text
+      as="span"
+      verticalAlign="middle"
+      whiteSpace="nowrap"
+      ref={ref}
+      {...props}
+    >
       {new Array(totalUses).fill(null).map((_, index) => (
-        <ChevronRightIcon // I tried a few types of icons. This was the best, for now.
+        <Icon // I tried a few types of icons. This was the best, for now.
           key={index}
-          color={index < usesLeft ? "black" : "gray.400"}
+          color={index < usesLeft ? "black" : "fg.subtle"}
           fontWeight={300}
           ml={-2}
-        />
+        >
+          <ChevronRight />
+        </Icon>
       ))}
     </Text>
   );
-};
+});
 
 export default Chevrons;
diff --git a/src/components/ChevronsListIcon.tsx b/src/components/ChevronsListIcon.tsx
index bfb5d37e..c6f2762e 100644
--- a/src/components/ChevronsListIcon.tsx
+++ b/src/components/ChevronsListIcon.tsx
@@ -1,21 +1,22 @@
-import { IconProps, ListIcon } from "@chakra-ui/react";
+import { List } from "@chakra-ui/react";
 import { FC } from "react";
 
-import Chevrons from "./Chevrons";
+import Chevrons, { ChevronsProps } from "./Chevrons";
 
-interface ChevronsListIconProps extends IconProps {
+interface ChevronsListProps extends ChevronsProps {
   usesLeft: number;
   totalUses: number;
 }
 
-const ChevronsListIcon: FC<ChevronsListIconProps> = (props) => (
-  <ListIcon
-    as={Chevrons}
+const ChevronsList: FC<ChevronsListProps> = (props) => (
+  <List.Indicator
+    asChild
     display="inline-flex"
     verticalAlign="center"
     my="auto"
-    {...props}
-  />
+  >
+    <Chevrons {...props} />
+  </List.Indicator>
 );
 
-export default ChevronsListIcon;
+export default ChevronsList;
diff --git a/src/components/ElementName.tsx b/src/components/ElementName.tsx
index b31c159d..0fd62fb4 100644
--- a/src/components/ElementName.tsx
+++ b/src/components/ElementName.tsx
@@ -9,11 +9,11 @@ export interface ElementNameProps {
 
 const ElementName: FC<ElementNameProps> = ({ element, children }) => {
   const elementColors: Record<string, string> = {
-    cold: "blue.500",
-    hot: "red.500",
-    spooky: "gray.500",
-    stench: "green.500",
-    sleaze: "purple.500",
+    cold: "blue.solid",
+    hot: "red.solid",
+    spooky: "gray.solid",
+    stench: "green.solid",
+    sleaze: "purple.solid",
   };
 
   return (
diff --git a/src/components/HeaderButton.tsx b/src/components/HeaderButton.tsx
index 169795b9..54f28523 100644
--- a/src/components/HeaderButton.tsx
+++ b/src/components/HeaderButton.tsx
@@ -1,7 +1,7 @@
-import { Button, ButtonProps } from "@chakra-ui/react";
 import { forwardRef } from "react";
 
 import MainLink from "./MainLink";
+import { Button, ButtonProps } from "./ui/button";
 
 interface HeaderButtonProps extends ButtonProps {
   href?: string;
@@ -12,7 +12,7 @@ const HeaderButton = forwardRef<HTMLButtonElement, HeaderButtonProps>(
     const button = (
       <Button
         ref={ref}
-        colorScheme="blackAlpha"
+        colorPalette="gray"
         size="xs"
         px={1}
         height={4}
diff --git a/src/components/Line.tsx b/src/components/Line.tsx
index 6c80ce57..39b84659 100644
--- a/src/components/Line.tsx
+++ b/src/components/Line.tsx
@@ -29,7 +29,7 @@ const Line: FC<Props> = ({
     command = `equip ${equipItem.identifierString}`;
   }
   return (
-    <Text mt={0} {...props}>
+    <Text {...props}>
       {command ? (
         <AsyncLink command={command}>{children}</AsyncLink>
       ) : href ? (
diff --git a/src/components/LinkBlock.tsx b/src/components/LinkBlock.tsx
index 0535559d..02530222 100644
--- a/src/components/LinkBlock.tsx
+++ b/src/components/LinkBlock.tsx
@@ -5,7 +5,7 @@ import MainLink, { MainLinkProps } from "./MainLink";
 
 const LinkBlock: FC<MainLinkProps> = ({ children, ...props }) => (
   <MainLink {...props}>
-    <Stack spacing={0.5}>{children}</Stack>
+    <Stack gap={0.5}>{children}</Stack>
   </MainLink>
 );
 
diff --git a/src/components/LocationBar.tsx b/src/components/LocationBar.tsx
index b0400d28..d988af9a 100644
--- a/src/components/LocationBar.tsx
+++ b/src/components/LocationBar.tsx
@@ -105,14 +105,14 @@ const LocationBar: FC<StackProps> = (props) => {
       onMouseOver={() => setShowDetails(true)}
       onMouseOut={() => setShowDetails(false)}
       backgroundColor="white"
-      borderTop="1px solid"
-      borderColor="gray.200"
     >
       <Stack
         w="100%"
         py={2}
         px={3}
         zIndex={300}
+        borderTop="1px solid"
+        borderColor="gray.muted"
         fontSize="xs"
         display={showDetails || autoHasFocus ? "flex" : "none"}
       >
@@ -148,7 +148,7 @@ const LocationBar: FC<StackProps> = (props) => {
         direction="row"
         justify="space-between"
         borderTop="1px solid"
-        borderColor="gray.200"
+        borderColor="gray.muted"
         fontSize="xs"
         {...props}
       >
diff --git a/src/components/Monsters.tsx b/src/components/Monsters.tsx
index ec6ce129..7bba1f9b 100644
--- a/src/components/Monsters.tsx
+++ b/src/components/Monsters.tsx
@@ -1,4 +1,4 @@
-import { Text, Tooltip } from "@chakra-ui/react";
+import { Text } from "@chakra-ui/react";
 import {
   appearanceRates,
   getMonsters,
@@ -13,6 +13,8 @@ import { FC } from "react";
 
 import { separate } from "../util/text";
 
+import { Tooltip } from "./ui/tooltip";
+
 export interface MonstersLineProps {
   location: Location;
   target?: Monster | Monster[];
@@ -62,12 +64,8 @@ const Monsters: FC<MonstersLineProps> = ({ location, target = [] }) => {
           return targets.includes(monster) ? (
             <Text as="b">{text}</Text>
           ) : banisher ? (
-            <Tooltip
-              display="inline"
-              hasArrow
-              label={`Banished: ${banisher.name}`}
-            >
-              <Text as="span" color="gray.500">
+            <Tooltip showArrow content={`Banished: ${banisher.name}`}>
+              <Text as="span" color="gray.solid">
                 {text}
               </Text>
             </Tooltip>
diff --git a/src/components/PrefsButton.tsx b/src/components/PrefsButton.tsx
index c059f32f..5c56692e 100644
--- a/src/components/PrefsButton.tsx
+++ b/src/components/PrefsButton.tsx
@@ -1,5 +1,5 @@
-import { EditIcon } from "@chakra-ui/icons";
 import { IconButton } from "@chakra-ui/react";
+import { EditIcon } from "lucide-react";
 import { FC } from "react";
 
 const PrefsButton: FC = () => {
@@ -11,14 +11,14 @@ const PrefsButton: FC = () => {
           mainpane.location.href = "http://localhost:3000/yorick/prefs";
         }
       }}
-      icon={<EditIcon />}
+      asChild
       aria-label="Open Overrides"
-      size="xs"
-      fontSize="15px"
+      size="2xs"
+      p={1}
       variant="outline"
       backgroundColor="white"
     >
-      overrides
+      <EditIcon />
     </IconButton>
   );
 };
diff --git a/src/components/RefreshButton.tsx b/src/components/RefreshButton.tsx
index 33f59e7e..ad0e5fa3 100644
--- a/src/components/RefreshButton.tsx
+++ b/src/components/RefreshButton.tsx
@@ -1,17 +1,19 @@
-import { RepeatIcon } from "@chakra-ui/icons";
 import { ButtonProps, IconButton } from "@chakra-ui/react";
+import { RepeatIcon } from "lucide-react";
 import { FC } from "react";
 
 const RefreshButton: FC<ButtonProps> = (props) => (
   <IconButton
-    icon={<RepeatIcon />}
+    asChild
     aria-label="Refresh"
-    size="xs"
-    fontSize="15px"
+    size="2xs"
+    p={1}
     variant="outline"
     backgroundColor="white"
     {...props}
-  />
+  >
+    <RepeatIcon />
+  </IconButton>
 );
 
 export default RefreshButton;
diff --git a/src/components/Section.tsx b/src/components/Section.tsx
index 09052c05..c2bd0fd4 100644
--- a/src/components/Section.tsx
+++ b/src/components/Section.tsx
@@ -7,12 +7,10 @@ export interface SectionProps extends StackProps {
 }
 
 const Section: FC<SectionProps> = ({ name, children, ...props }) => (
-  <Stack spacing={3} align="stretch" px={2} pb={1} {...props}>
-    <Heading as="h2" size="md">
-      {name}
-    </Heading>
+  <Stack gap={2} align="stretch" px={2} pb={1} {...props}>
+    <Heading as="h2">{name}</Heading>
     <Stack
-      spacing={3}
+      gap={2}
       _empty={{
         _after: {
           content: '"Nothing to display."',
diff --git a/src/components/SkillButtons.tsx b/src/components/SkillButtons.tsx
index a163cf99..727dcf94 100644
--- a/src/components/SkillButtons.tsx
+++ b/src/components/SkillButtons.tsx
@@ -19,7 +19,7 @@ const SkillButtons: FC<SkillButtonsProps> = ({
   return (
     <HeaderButton
       href={`/runskillz.php?action=Skillz&whichskill=${linkID}&targetplayer=0&pwd=${myHash()}&quantity=1`}
-      isDisabled={myMp() < mpCost(linkedContent)}
+      disabled={myMp() < mpCost(linkedContent)}
       {...props}
     >
       cast
diff --git a/src/components/Tile.tsx b/src/components/Tile.tsx
index 4f44c925..c9fb14f8 100644
--- a/src/components/Tile.tsx
+++ b/src/components/Tile.tsx
@@ -1,4 +1,3 @@
-import { ChevronDownIcon, ChevronUpIcon } from "@chakra-ui/icons";
 import {
   Box,
   Heading,
@@ -9,6 +8,7 @@ import {
 } from "@chakra-ui/react";
 import { decode } from "html-entities";
 import { Familiar, Item, Skill } from "kolmafia";
+import { ChevronDown, ChevronUp } from "lucide-react";
 import { FC, ReactNode, useState } from "react";
 
 import useLocalStorage from "../hooks/useLocalStorage";
@@ -89,9 +89,9 @@ const Tile: FC<TileProps> = ({
   const imageSize = collapsed || disabled ? "20px" : "30px";
 
   const tileContents = (
-    <>
-      <HStack spacing={1} align="center">
-        <Heading as="h3" size="sm">
+    <VStack align="start" gap={0.5}>
+      <HStack gap={1} align="center">
+        <Heading as="h3" size="md" lineHeight="tall">
           {!collapsed && !disabled && !linkEntireTile && href ? (
             <MainLink href={href}>{heading}</MainLink>
           ) : (
@@ -99,7 +99,7 @@ const Tile: FC<TileProps> = ({
           )}
         </Heading>
         <HStack
-          spacing={1}
+          gap={1}
           css={{
             ".chakra-portal &": {
               display: "none",
@@ -113,25 +113,29 @@ const Tile: FC<TileProps> = ({
           {!collapsed && extraLinks}
           {disabled || nonCollapsible || (
             <IconButton
-              icon={collapsed ? <ChevronUpIcon /> : <ChevronDownIcon />}
+              asChild
               aria-label="Collapse"
               h={4}
-              minW={4}
+              w={4}
+              minW={2}
               fontSize="20px"
               variant="ghost"
+              color="inherit"
               onClick={() => setCollapsed((collapsed) => !collapsed)}
-            />
+            >
+              {collapsed ? <ChevronUp /> : <ChevronDown />}
+            </IconButton>
           )}
         </HStack>
       </HStack>
       {!collapsed && !disabled && children}
-    </>
+    </VStack>
   );
 
   return (
     <HStack
       align="stretch"
-      textColor={collapsed || disabled ? "gray.500" : undefined}
+      color={collapsed || disabled ? "fg.subtle" : undefined}
       {...props}
     >
       <Box
@@ -161,13 +165,11 @@ const Tile: FC<TileProps> = ({
           />
         )}
       </Box>
-      <VStack align="stretch" spacing={0.5}>
-        {!collapsed && !disabled && linkEntireTile ? (
-          <MainLink href={href}>{tileContents}</MainLink>
-        ) : (
-          tileContents
-        )}
-      </VStack>
+      {!collapsed && !disabled && linkEntireTile ? (
+        <MainLink href={href}>{tileContents}</MainLink>
+      ) : (
+        tileContents
+      )}
     </HStack>
   );
 };
diff --git a/src/components/TileErrorBoundary.tsx b/src/components/TileErrorBoundary.tsx
index 04c8d6ed..c165bca2 100644
--- a/src/components/TileErrorBoundary.tsx
+++ b/src/components/TileErrorBoundary.tsx
@@ -15,13 +15,13 @@ const TileErrorBoundary: FC<TileErrorBoundaryProps> = ({ name, children }) => {
       fallbackRender={({ error }) => (
         <Tile
           header={
-            <Text as="span" color="red.700">
+            <Text as="span" color="red.fg">
               Error in tile {name}.
             </Text>
           }
           id={`${name}-error`}
           nonCollapsible
-          bgColor="red.100"
+          bgColor="red.subtle"
           borderY="1px solid red"
           py={1}
         >
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 00000000..cd9eddf9
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,40 @@
+import type { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
+import {
+  AbsoluteCenter,
+  Button as ChakraButton,
+  Span,
+  Spinner,
+} from "@chakra-ui/react";
+import * as React from "react";
+
+interface ButtonLoadingProps {
+  loading?: boolean;
+  loadingText?: React.ReactNode;
+}
+
+export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const { loading, disabled, loadingText, children, ...rest } = props;
+    return (
+      <ChakraButton disabled={loading || disabled} ref={ref} {...rest}>
+        {loading && !loadingText ? (
+          <>
+            <AbsoluteCenter display="inline-flex">
+              <Spinner size="inherit" color="inherit" />
+            </AbsoluteCenter>
+            <Span opacity={0}>{children}</Span>
+          </>
+        ) : loading && loadingText ? (
+          <>
+            <Spinner size="inherit" color="inherit" />
+            {loadingText}
+          </>
+        ) : (
+          children
+        )}
+      </ChakraButton>
+    );
+  },
+);
diff --git a/src/components/ui/close-button.tsx b/src/components/ui/close-button.tsx
new file mode 100644
index 00000000..abbc5f9a
--- /dev/null
+++ b/src/components/ui/close-button.tsx
@@ -0,0 +1,18 @@
+import type { ButtonProps as ChakraCloseButtonProps } from "@chakra-ui/react";
+import { IconButton as ChakraIconButton } from "@chakra-ui/react";
+import * as React from "react";
+import { LuX } from "react-icons/lu";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface CloseButtonProps extends ChakraCloseButtonProps {}
+
+export const CloseButton = React.forwardRef<
+  HTMLButtonElement,
+  CloseButtonProps
+>((props, ref) => {
+  return (
+    <ChakraIconButton variant="ghost" aria-label="Close" ref={ref} {...props}>
+      {props.children ?? <LuX />}
+    </ChakraIconButton>
+  );
+});
diff --git a/src/components/ui/field.tsx b/src/components/ui/field.tsx
new file mode 100644
index 00000000..c600795f
--- /dev/null
+++ b/src/components/ui/field.tsx
@@ -0,0 +1,33 @@
+import { Field as ChakraField } from "@chakra-ui/react";
+import * as React from "react";
+
+export interface FieldProps extends Omit<ChakraField.RootProps, "label"> {
+  label?: React.ReactNode;
+  helperText?: React.ReactNode;
+  errorText?: React.ReactNode;
+  optionalText?: React.ReactNode;
+}
+
+export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
+  (props, ref) => {
+    const { label, children, helperText, errorText, optionalText, ...rest } =
+      props;
+    return (
+      <ChakraField.Root ref={ref} {...rest}>
+        {label && (
+          <ChakraField.Label>
+            {label}
+            <ChakraField.RequiredIndicator fallback={optionalText} />
+          </ChakraField.Label>
+        )}
+        {children}
+        {helperText && (
+          <ChakraField.HelperText>{helperText}</ChakraField.HelperText>
+        )}
+        {errorText && (
+          <ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>
+        )}
+      </ChakraField.Root>
+    );
+  },
+);
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 00000000..45432fd1
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,60 @@
+import { Popover as ChakraPopover, Portal } from "@chakra-ui/react";
+import * as React from "react";
+
+import { CloseButton } from "./close-button";
+
+interface PopoverContentProps extends ChakraPopover.ContentProps {
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement>;
+}
+
+export const PopoverContent = React.forwardRef<
+  HTMLDivElement,
+  PopoverContentProps
+>((props, ref) => {
+  const { portalled = true, portalRef, ...rest } = props;
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      <ChakraPopover.Positioner>
+        <ChakraPopover.Content ref={ref} {...rest} />
+      </ChakraPopover.Positioner>
+    </Portal>
+  );
+});
+
+export const PopoverArrow = React.forwardRef<
+  HTMLDivElement,
+  ChakraPopover.ArrowProps
+>((props, ref) => {
+  return (
+    <ChakraPopover.Arrow {...props} ref={ref}>
+      <ChakraPopover.ArrowTip />
+    </ChakraPopover.Arrow>
+  );
+});
+
+export const PopoverCloseTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ChakraPopover.CloseTriggerProps
+>((props, ref) => {
+  return (
+    <ChakraPopover.CloseTrigger
+      position="absolute"
+      top="1"
+      insetEnd="1"
+      {...props}
+      asChild
+      ref={ref}
+    >
+      <CloseButton size="sm" />
+    </ChakraPopover.CloseTrigger>
+  );
+});
+
+export const PopoverTitle = ChakraPopover.Title;
+export const PopoverDescription = ChakraPopover.Description;
+export const PopoverFooter = ChakraPopover.Footer;
+export const PopoverHeader = ChakraPopover.Header;
+export const PopoverRoot = ChakraPopover.Root;
+export const PopoverBody = ChakraPopover.Body;
+export const PopoverTrigger = ChakraPopover.Trigger;
diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx
new file mode 100644
index 00000000..6cf1f567
--- /dev/null
+++ b/src/components/ui/toaster.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import {
+  createToaster,
+  Portal,
+  Spinner,
+  Stack,
+  Toast,
+  Toaster as ChakraToaster,
+} from "@chakra-ui/react";
+
+export const toaster = createToaster({
+  placement: "bottom-end",
+  pauseOnPageIdle: true,
+});
+
+export const Toaster = () => {
+  return (
+    <Portal>
+      <ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
+        {(toast) => (
+          <Toast.Root width={{ md: "sm" }}>
+            {toast.type === "loading" ? (
+              <Spinner size="sm" color="blue.solid" />
+            ) : (
+              <Toast.Indicator />
+            )}
+            <Stack gap="1" flex="1" maxWidth="100%">
+              {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
+              {toast.description && (
+                <Toast.Description>{toast.description}</Toast.Description>
+              )}
+            </Stack>
+            {toast.action && (
+              <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
+            )}
+            {toast.meta?.closable && <Toast.CloseTrigger />}
+          </Toast.Root>
+        )}
+      </ChakraToaster>
+    </Portal>
+  );
+};
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
new file mode 100644
index 00000000..70c75012
--- /dev/null
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,49 @@
+import { Portal, Tooltip as ChakraTooltip } from "@chakra-ui/react";
+import * as React from "react";
+
+export interface TooltipProps extends ChakraTooltip.RootProps {
+  showArrow?: boolean;
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement>;
+  children: React.ReactNode;
+  content: React.ReactNode;
+  contentProps?: ChakraTooltip.ContentProps;
+  disabled?: boolean;
+}
+
+export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
+  (props, ref) => {
+    const {
+      showArrow,
+      children,
+      disabled,
+      portalled,
+      content,
+      contentProps,
+      portalRef,
+      ...rest
+    } = props;
+
+    if (disabled) return children;
+
+    rest.openDelay ??= 200;
+
+    return (
+      <ChakraTooltip.Root {...rest}>
+        <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
+        <Portal disabled={!portalled} container={portalRef}>
+          <ChakraTooltip.Positioner>
+            <ChakraTooltip.Content ref={ref} {...contentProps}>
+              {showArrow && (
+                <ChakraTooltip.Arrow>
+                  <ChakraTooltip.ArrowTip />
+                </ChakraTooltip.Arrow>
+              )}
+              {content}
+            </ChakraTooltip.Content>
+          </ChakraTooltip.Positioner>
+        </Portal>
+      </ChakraTooltip.Root>
+    );
+  },
+);
diff --git a/src/prefs/App.tsx b/src/prefs/App.tsx
index a64714a6..189736e9 100644
--- a/src/prefs/App.tsx
+++ b/src/prefs/App.tsx
@@ -1,4 +1,4 @@
-import { ChakraProvider } from "@chakra-ui/react";
+import { ChakraProvider, defaultSystem } from "@chakra-ui/react";
 import { RefreshContextProvider } from "tome-kolmafia-react";
 
 import Layout from "./components/Layout";
@@ -8,7 +8,7 @@ import Layout from "./components/Layout";
 // egrep -Roh '(get|getProperty|questStep|questStarted|questFinished)\("([_a-zA-Z0-9]+)"\)' src | sed -E 's/.*"([_a-zA-Z0-9]+)".*/\1/' | tr -d '`' | sort -f | uniq | jq -R . | jq -s . > src/prefs/preferences.json
 
 const App = () => (
-  <ChakraProvider>
+  <ChakraProvider value={defaultSystem}>
     <RefreshContextProvider>
       <Layout />
     </RefreshContextProvider>
diff --git a/src/prefs/components/Layout.tsx b/src/prefs/components/Layout.tsx
index 1d6179e6..022c71c9 100644
--- a/src/prefs/components/Layout.tsx
+++ b/src/prefs/components/Layout.tsx
@@ -112,7 +112,7 @@ const Layout = () => {
   }
   return (
     <Container centerContent maxW={1000}>
-      <Stack spacing={4} w="full">
+      <Stack gap={4} w="full">
         <Heading textAlign="center">YORICK Development Overrides</Heading>
         <ValidatedInput
           value={filter}
diff --git a/src/prefs/components/OverrideRow.tsx b/src/prefs/components/OverrideRow.tsx
index 46f53873..0d9af288 100644
--- a/src/prefs/components/OverrideRow.tsx
+++ b/src/prefs/components/OverrideRow.tsx
@@ -1,4 +1,4 @@
-import { Td, Text, Tr } from "@chakra-ui/react";
+import { Table, Text } from "@chakra-ui/react";
 import { ChangeEvent, FC, useCallback, useState } from "react";
 
 import { validityType, validValue } from "../util/valid";
@@ -37,13 +37,13 @@ const OverrideRow: FC<OverrideRowProps> = ({ label, override, current }) => {
   const valid = validValue(validity, value);
 
   return (
-    <Tr>
-      <Td>
+    <Table.Row>
+      <Table.Cell>
         <Text textAlign="right" my="auto">
           {label ?? override}
         </Text>
-      </Td>
-      <Td>
+      </Table.Cell>
+      <Table.Cell>
         <ValidatedInput
           value={value}
           valid={valid}
@@ -53,8 +53,8 @@ const OverrideRow: FC<OverrideRowProps> = ({ label, override, current }) => {
           minW="6rem"
           placeholder={current}
         />
-      </Td>
-    </Tr>
+      </Table.Cell>
+    </Table.Row>
   );
 };
 
diff --git a/src/prefs/components/OverrideTable.tsx b/src/prefs/components/OverrideTable.tsx
index 3fc03673..0a44f85c 100644
--- a/src/prefs/components/OverrideTable.tsx
+++ b/src/prefs/components/OverrideTable.tsx
@@ -1,4 +1,4 @@
-import { Heading, Table, Tbody } from "@chakra-ui/react";
+import { Heading, Table } from "@chakra-ui/react";
 import { FC } from "react";
 
 import OverrideRow from "./OverrideRow";
@@ -22,8 +22,8 @@ const OverrideTable: FC<OverrideTableProps> = ({
     <Heading as="h2" size="md" textAlign="center">
       {heading}
     </Heading>
-    <Table size="sm">
-      <Tbody>
+    <Table.Root size="sm">
+      <Table.Body>
         {data
           .filter((item) => !filterRegex || filterRegex.test(getOverride(item)))
           .map((item) => (
@@ -34,8 +34,8 @@ const OverrideTable: FC<OverrideTableProps> = ({
               current={getCurrent(item)}
             />
           ))}
-      </Tbody>
-    </Table>
+      </Table.Body>
+    </Table.Root>
   </>
 );
 
diff --git a/src/prefs/components/ValidatedInput.tsx b/src/prefs/components/ValidatedInput.tsx
index 0589d4c1..03b68bd4 100644
--- a/src/prefs/components/ValidatedInput.tsx
+++ b/src/prefs/components/ValidatedInput.tsx
@@ -1,12 +1,8 @@
-import { CheckIcon, WarningIcon } from "@chakra-ui/icons";
-import {
-  CloseButton,
-  Input,
-  InputGroup,
-  InputProps,
-  InputRightElement,
-  Stack,
-} from "@chakra-ui/react";
+import { Group, Input, InputAddon, InputProps, Stack } from "@chakra-ui/react";
+import { Check, CircleAlert } from "lucide-react";
+
+import { CloseButton } from "../../components/ui/close-button";
+import { Field } from "../../components/ui/field";
 
 interface ValidatedInputProps extends InputProps {
   valid: boolean;
@@ -23,38 +19,39 @@ const ValidatedInput = ({
   const iconProps = props.size === "sm" ? { w: 8, h: 8 } : {};
   return (
     <Stack direction="row" alignItems="center">
-      <InputGroup>
-        <Input
-          value={value}
-          isInvalid={!valid && nonEmpty}
-          borderColor={valid && nonEmpty ? "green.500" : undefined}
-          focusBorderColor={
-            valid && nonEmpty
-              ? "green.500"
-              : !valid && nonEmpty
-                ? "red.500"
-                : undefined
-          }
-          _hover={
-            valid && nonEmpty
-              ? { borderColor: "green.600" }
-              : !valid && nonEmpty
-                ? { borderColor: "red.600" }
-                : undefined
-          }
-          {...props}
-        />
+      <Group attached>
+        <Field invalid={!valid && nonEmpty}>
+          <Input
+            value={value}
+            borderColor={valid && nonEmpty ? "green.solid" : undefined}
+            _focus={
+              valid && nonEmpty
+                ? { borderColor: "green.solid" }
+                : !valid && nonEmpty
+                  ? { borderColor: "red.solid" }
+                  : undefined
+            }
+            _hover={
+              valid && nonEmpty
+                ? { borderColor: "green.solid" }
+                : !valid && nonEmpty
+                  ? { borderColor: "red.solid" }
+                  : undefined
+            }
+            {...props}
+          />
+        </Field>
         {valid && nonEmpty && (
-          <InputRightElement pointerEvents="none" {...iconProps}>
-            <CheckIcon color="green.500" />
-          </InputRightElement>
+          <InputAddon pointerEvents="none" {...iconProps}>
+            <Check color="green.solid" />
+          </InputAddon>
         )}
         {!valid && nonEmpty && (
-          <InputRightElement pointerEvents="none" {...iconProps}>
-            <WarningIcon color="red.500" />
-          </InputRightElement>
+          <InputAddon pointerEvents="none" {...iconProps}>
+            <CircleAlert color="red.solid" />
+          </InputAddon>
         )}
-      </InputGroup>
+      </Group>
       {setValue && <CloseButton onClick={() => setValue("")} />}
     </Stack>
   );
diff --git a/src/sections/NagSection.tsx b/src/sections/NagSection.tsx
index b64c2c13..2960e4da 100644
--- a/src/sections/NagSection.tsx
+++ b/src/sections/NagSection.tsx
@@ -1,10 +1,11 @@
-import { Heading, Stack, Tooltip } from "@chakra-ui/react";
+import { Box, Heading, Stack } from "@chakra-ui/react";
 import { myDaycount, myTurncount } from "kolmafia";
 import { useContext } from "react";
 
 import Section from "../components/Section";
 import TileErrorBoundary from "../components/TileErrorBoundary";
 import TileImage from "../components/TileImage";
+import { Tooltip } from "../components/ui/tooltip";
 import NagContext from "../contexts/NagContext";
 
 import Timeline from "./Timeline";
@@ -26,7 +27,7 @@ const NagSection = () => {
       pt="0.5rem"
       pb={2}
       borderBottom="1px solid"
-      borderColor="gray.200"
+      borderColor="gray.muted"
     >
       <Timeline px={2} />
       {nagsList.length > 0 ? (
@@ -40,24 +41,29 @@ const NagSection = () => {
             <Stack flexFlow="row wrap">
               {nagsList
                 .slice(NAG_DISPLAY_LIMIT)
-                .map(([id, { imageUrl, node }]) => (
-                  <Tooltip
-                    key={id}
-                    color="black"
-                    bgColor="white"
-                    border="1px solid black"
-                    borderRadius="4px"
-                    p={2}
-                    label={node}
-                  >
-                    <TileImage imageUrl={imageUrl} />
-                  </Tooltip>
-                ))}
+                .map(([id, { imageUrl, node }]) => {
+                  return (
+                    <Tooltip
+                      key={id}
+                      interactive
+                      contentProps={{
+                        color: "black",
+                        bgColor: "white",
+                        border: "1px solid black",
+                        rounded: "md",
+                        p: 2,
+                      }}
+                      content={<Box>{node}</Box>}
+                    >
+                      <TileImage imageUrl={imageUrl} />
+                    </Tooltip>
+                  );
+                })}
             </Stack>
           )}
         </Section>
       ) : (
-        <Heading as="h4" size="md" px={2}>
+        <Heading as="h2" px={2}>
           Day {myDaycount()} / Turn {myTurncount()}
         </Heading>
       )}
diff --git a/src/sections/Timeline.tsx b/src/sections/Timeline.tsx
index 97d06117..cf8fef60 100644
--- a/src/sections/Timeline.tsx
+++ b/src/sections/Timeline.tsx
@@ -1,11 +1,4 @@
-import {
-  Badge,
-  BadgeProps,
-  Stack,
-  StackProps,
-  Text,
-  Tooltip,
-} from "@chakra-ui/react";
+import { Badge, BadgeProps, Stack, StackProps, Text } from "@chakra-ui/react";
 import {
   getWorkshed,
   haveEffect,
@@ -23,27 +16,30 @@ import {
 import { FC, forwardRef } from "react";
 
 import MainLink from "../components/MainLink";
+import { Tooltip } from "../components/ui/tooltip";
 import { haveUnrestricted } from "../util/available";
 import { inDevMode } from "../util/env";
 import { plural } from "../util/text";
 
-const Pill: FC<BadgeProps> = forwardRef(({ children, ...props }, ref) => (
-  <Badge
-    borderRadius="2px"
-    color="white"
-    bgColor="gray.600"
-    ref={ref}
-    {...props}
-  >
-    {children}
-  </Badge>
-));
+const Pill = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ children, ...props }, ref) => (
+    <Badge
+      borderRadius="2px"
+      color="white"
+      bgColor="gray.solid"
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </Badge>
+  ),
+);
 
 const ENV_COLORS: Record<string, string> = {
-  X: "gray.600",
-  U: "red.600",
-  I: "blue.600",
-  O: "yellow.600",
+  X: "gray.solid",
+  U: "red.solid",
+  I: "blue.solid",
+  O: "yellow.solid",
 };
 
 const ENV_RESULTS: Record<string, string> = {
@@ -73,8 +69,8 @@ const CMCTimeline: FC = () => {
     counts[maxEnvironment] >= 11 ? ENV_RESULTS[maxEnvironment] : ENV_RESULTS.X;
 
   return (
-    <Stack spacing={1} align="flex-start">
-      <Stack flexFlow="row wrap" spacing={0.5} align="center">
+    <Stack gap={1} align="flex-start">
+      <Stack flexFlow="row wrap" gap={0.5} align="center">
         {environments.map((c, index) => (
           <Badge
             key={index}
@@ -89,7 +85,7 @@ const CMCTimeline: FC = () => {
           </Badge>
         ))}
       </Stack>
-      <Stack flexFlow="row wrap" spacing={1} align="center">
+      <Stack flexFlow="row wrap" gap={1} align="center">
         <Text as="b">
           {turnsToConsult > 0 ? (
             plural(turnsToConsult, "turn")
@@ -119,31 +115,31 @@ const Timeline: FC<StackProps> = (props) => {
     {
       name: "ELG",
       turns: haveEffect($effect`Everything Looks Green`),
-      color: "green.600",
+      color: "green.solid",
       label: (turns) => `${plural(turns, "turn")} of Everything Looks Green.`,
     },
     {
       name: "ELP",
       turns: haveEffect($effect`Everything Looks Purple`),
-      color: "purple.600",
+      color: "purple.solid",
       label: (turns) => `${plural(turns, "turn")} of Everything Looks Purple.`,
     },
     {
       name: "ELR",
       turns: haveEffect($effect`Everything Looks Red`),
-      color: "red.600",
+      color: "red.solid",
       label: (turns) => `${plural(turns, "turn")} of Everything Looks Red.`,
     },
     {
       name: "ELY",
       turns: haveEffect($effect`Everything Looks Yellow`),
-      color: "yellow.600",
+      color: "yellow.solid",
       label: (turns) => `${plural(turns, "turn")} of Everything Looks Yellow.`,
     },
     {
       name: "ELRWB",
       turns: haveEffect($effect`Everything Looks Red, White and Blue`),
-      color: "purple.600",
+      color: "purple.solid",
       label: (turns) =>
         `${plural(turns, "turn")} of Everything Looks Red, White and Blue.`,
     },
@@ -153,7 +149,7 @@ const Timeline: FC<StackProps> = (props) => {
     elements.push({
       name: "CBB",
       turns: returnCombats,
-      color: "gray.600",
+      color: "gray.solid",
       label: (turns) =>
         `${plural(turns, "combat")} until Cosmic Bowling Ball returns.`,
     });
@@ -168,7 +164,7 @@ const Timeline: FC<StackProps> = (props) => {
     elements.push({
       name: "Kram",
       turns: turnsToNextGuaranteedFight,
-      color: "purple.600",
+      color: "purple.solid",
       label: (turns) =>
         `${plural(turns, "turn")} until guaranteed Kramco fight.`,
     });
@@ -178,7 +174,7 @@ const Timeline: FC<StackProps> = (props) => {
     elements.push({
       name: "AA",
       turns: AutumnAton.turnsLeft() + 1,
-      color: "orange.600",
+      color: "orange.solid",
       label: (turns) => `${plural(turns, "turn")} until autumn-aton returns.`,
     });
   }
@@ -187,7 +183,7 @@ const Timeline: FC<StackProps> = (props) => {
     elements.push({
       name: "CMG",
       turns: 13 - get("cursedMagnifyingGlassCount"),
-      color: "gray.600",
+      color: "gray.solid",
       label: (turns) => `${plural(turns, "combat")} until next void wanderer.`,
     });
   }
@@ -211,7 +207,7 @@ const Timeline: FC<StackProps> = (props) => {
         }
       >
         {elementsFiltered.map(({ name, turns, color, label }) => (
-          <Tooltip key={name} hasArrow label={label(turns)}>
+          <Tooltip key={name} content={label(turns)}>
             <Pill bgColor={color}>
               {name} {turns}
             </Pill>
diff --git a/src/sections/misc/FreeFights.tsx b/src/sections/misc/FreeFights.tsx
index 753edf20..fe879125 100644
--- a/src/sections/misc/FreeFights.tsx
+++ b/src/sections/misc/FreeFights.tsx
@@ -1,4 +1,3 @@
-import { QuestionOutlineIcon } from "@chakra-ui/icons";
 import {
   availableAmount,
   canAdventure,
@@ -7,6 +6,7 @@ import {
   myPath,
 } from "kolmafia";
 import { $item, $location, $path, $skill, get } from "libram";
+import { CircleHelp } from "lucide-react";
 import { FC } from "react";
 
 import AdviceTooltipIcon from "../../components/AdviceTooltipIcon";
@@ -134,11 +134,11 @@ const FreeFights: FC = () => {
       imageUrl="/images/adventureimages/eldtentacle.gif"
       tooltip={
         <AdviceTooltipIcon
-          text={`These are inherently free fights. They do not cost a turn, nor do they
+          advice={`These are inherently free fights. They do not cost a turn, nor do they
             decrement your effects. Many of them are scaling fights; by stacking
             large +mainstat% modifiers, they will give increasing amounts of stats
             and allow you to level very quickly!`}
-          icon={QuestionOutlineIcon}
+          icon={CircleHelp}
         />
       }
     >
diff --git a/src/sections/misc/FreeKills.tsx b/src/sections/misc/FreeKills.tsx
index af237bcd..e72a1d46 100644
--- a/src/sections/misc/FreeKills.tsx
+++ b/src/sections/misc/FreeKills.tsx
@@ -145,7 +145,7 @@ const FreeKills: FC = () => {
                 key={
                   Array.isArray(source) ? source[0] : source.identifierString
                 }
-                color={have(thing) ? undefined : "gray.500"}
+                color={have(thing) ? undefined : "gray.solid"}
               >
                 {plural(
                   remaining(),
diff --git a/src/sections/misc/FreeRuns.tsx b/src/sections/misc/FreeRuns.tsx
index a23ed24f..ad22203f 100644
--- a/src/sections/misc/FreeRuns.tsx
+++ b/src/sections/misc/FreeRuns.tsx
@@ -85,7 +85,7 @@ const FreeRuns: FC = () => {
           ({ source, thing, caption, captionPlural, remaining }) =>
             !have(source) || remaining() <= 0 ? null : (
               <Line key={source.identifierString}>
-                <Text as="span" color={have(thing) ? undefined : "gray.500"}>
+                <Text as="span" color={have(thing) ? undefined : "gray.solid"}>
                   {plural(
                     remaining(),
                     caption?.() ?? thing.name,
diff --git a/src/sections/misc/Leveling.tsx b/src/sections/misc/Leveling.tsx
index fc563688..11f90ebe 100644
--- a/src/sections/misc/Leveling.tsx
+++ b/src/sections/misc/Leveling.tsx
@@ -1,4 +1,4 @@
-import { ListItem, UnorderedList } from "@chakra-ui/react";
+import { List } from "@chakra-ui/react";
 import {
   availableAmount,
   canInteract,
@@ -104,10 +104,10 @@ const Leveling: React.FC = () => {
       remaining: () =>
         Math.min(3, get("skillLevel144")) - get("_universeCalculated"),
       render: ({ remaining }) => (
-        <ListItem>
+        <List.Item>
           {plural(remaining, "numberology use")} ({(multiplier * 89).toFixed(0)}{" "}
           mainstat).
-        </ListItem>
+        </List.Item>
       ),
     },
     {
@@ -116,11 +116,11 @@ const Leveling: React.FC = () => {
         +haveUnrestricted($item`Bastille Battalion control rig`) -
         get("_bastilleGames"),
       render: () => (
-        <ListItem>
+        <List.Item>
           <MainLink href={inventoryLink($item`Bastille Battalion control rig`)}>
             1 Bastille use ({(multiplier * 250).toFixed(0)} mainstat).
           </MainLink>
-        </ListItem>
+        </List.Item>
       ),
     },
     {
@@ -137,13 +137,13 @@ const Leveling: React.FC = () => {
           </>
         );
         return (
-          <ListItem>
+          <List.Item>
             {myLevel() >= 9 && !have($item`strange leaflet`) ? (
               <MainLink href="/council.php">{text}</MainLink>
             ) : (
               text
             )}
-          </ListItem>
+          </List.Item>
         );
       },
     },
@@ -159,7 +159,7 @@ const Leveling: React.FC = () => {
         const verb = haveBean ? "Plant" : "Find and plant";
         const text = `${verb} an enchanted bean${myLevel() >= 10 ? "" : " (at level 10)"}.`;
         return (
-          <ListItem>
+          <List.Item>
             {myLevel() >= 10 && haveBean ? (
               haveEquipped($item`spring shoes`) ? (
                 <MainLink
@@ -179,7 +179,7 @@ const Leveling: React.FC = () => {
             ) : (
               text
             )}
-          </ListItem>
+          </List.Item>
         );
       },
     },
@@ -308,25 +308,25 @@ const Leveling: React.FC = () => {
             )}
           </LinkBlock>
           <Line>Can get more cold res from:</Line>
-          <UnorderedList>
+          <List.Root>
             {coldResSources
               .filter(({ available }) => available())
               .map(({ thing, value }) => (
-                <ListItem key={thing.identifierString}>
+                <List.Item key={thing.identifierString}>
                   {thing.identifierString}{" "}
                   <Cold>
                     (+
                     {value ? value() : getModifier("Cold Resistance", thing)})
                   </Cold>
-                </ListItem>
+                </List.Item>
               ))}
-          </UnorderedList>
+          </List.Root>
         </>
       )}
       {total > 0 && (
         <>
           <Line>Additional stat sources:</Line>
-          <UnorderedList>{rendered}</UnorderedList>
+          <List.Root>{rendered}</List.Root>
         </>
       )}
     </Tile>
diff --git a/src/sections/misc/LuckyAdventures.tsx b/src/sections/misc/LuckyAdventures.tsx
index 1415cc23..4d6c6c43 100644
--- a/src/sections/misc/LuckyAdventures.tsx
+++ b/src/sections/misc/LuckyAdventures.tsx
@@ -1,4 +1,4 @@
-import { ListItem, UnorderedList } from "@chakra-ui/react";
+import { List } from "@chakra-ui/react";
 import { availableAmount, toItem } from "kolmafia";
 import {
   $effect,
@@ -197,7 +197,7 @@ const LuckyAdventures: FC = () => {
           header="You're lucky!"
           imageUrl="/images/itemimages/11leafclover.gif"
         >
-          <Line color="green.500">Next adventure will be a lucky one.</Line>
+          <Line color="green.solid">Next adventure will be a lucky one.</Line>
         </Tile>
       ),
     }),
@@ -210,7 +210,7 @@ const LuckyAdventures: FC = () => {
 
   const renderedUses = luckyAdventureUses.map(([name, use]) => {
     const rendered = use();
-    return rendered ? <ListItem key={name}>{rendered}</ListItem> : false;
+    return rendered ? <List.Item key={name}>{rendered}</List.Item> : false;
   });
 
   return (
@@ -223,7 +223,7 @@ const LuckyAdventures: FC = () => {
       {renderedUses.some((use) => use) ? (
         <>
           <Line>Ideas for uses:</Line>
-          <UnorderedList>{renderedUses}</UnorderedList>
+          <List.Root>{renderedUses}</List.Root>
         </>
       ) : (
         <Line>No ideas for how to use these. Get creative!</Line>
diff --git a/src/sections/misc/NoncombatForces.tsx b/src/sections/misc/NoncombatForces.tsx
index 9cfe6706..01b54072 100644
--- a/src/sections/misc/NoncombatForces.tsx
+++ b/src/sections/misc/NoncombatForces.tsx
@@ -95,7 +95,7 @@ const FORCE_SOURCES: Source[] = [
       ]);
       return (
         <Line
-          color={need.length > 0 ? "gray.500" : undefined}
+          color={need.length > 0 ? "gray.solid" : undefined}
           command={need.join("; ")}
         >
           {plural(remaining, "Jurassic Parka force")}.
diff --git a/src/sections/quests/Delay.tsx b/src/sections/quests/Delay.tsx
index 12353441..28881f82 100644
--- a/src/sections/quests/Delay.tsx
+++ b/src/sections/quests/Delay.tsx
@@ -1,9 +1,9 @@
-import { ListItem, UnorderedList } from "@chakra-ui/react";
+import { List } from "@chakra-ui/react";
 import { canAdventure, Location } from "kolmafia";
 import { sum } from "libram";
 import { FC } from "react";
 
-import AdviceTooltip from "../../components/AdviceTooltip";
+import AdviceTooltipText from "../../components/AdviceTooltipText";
 import Line from "../../components/Line";
 import MainLink from "../../components/MainLink";
 import Tile from "../../components/Tile";
@@ -16,18 +16,18 @@ type Details = { zone: Location; remaining: number; available: boolean };
 const ZoneList: FC<{
   zones: Details[];
 }> = ({ zones }) => (
-  <UnorderedList>
+  <List.Root>
     {zones.map(({ zone, remaining, available }) => (
-      <ListItem
+      <List.Item
         key={zone.identifierString}
-        color={available ? undefined : "gray.500"}
+        color={available ? undefined : "gray.solid"}
       >
         <MainLink href={parentPlaceLink(zone)}>
           {plural(remaining, "turn")} in {zone.identifierString}.
         </MainLink>
-      </ListItem>
+      </List.Item>
     ))}
-  </UnorderedList>
+  </List.Root>
 );
 
 const Delay: FC = () => {
@@ -60,12 +60,9 @@ const Delay: FC = () => {
       <Line>Use free runs and free wanderers to avoid spending turns.</Line>
       <ZoneList zones={allRemaining} />
       {truncated.length > 0 && (
-        <Line>
-          <AdviceTooltip
-            text={<ZoneList zones={truncated} />}
-            label="Later zones."
-          />
-        </Line>
+        <AdviceTooltipText advice={<ZoneList zones={truncated} />}>
+          <Line>Later zones.</Line>
+        </AdviceTooltipText>
       )}
     </Tile>
   );
diff --git a/src/sections/quests/HeroKeys.tsx b/src/sections/quests/HeroKeys.tsx
index 97ef8ff6..25c14035 100644
--- a/src/sections/quests/HeroKeys.tsx
+++ b/src/sections/quests/HeroKeys.tsx
@@ -1,4 +1,4 @@
-import { Link, ListItem, UnorderedList } from "@chakra-ui/react";
+import { Link, List } from "@chakra-ui/react";
 import {
   availableAmount,
   canEquip,
@@ -169,18 +169,18 @@ const HeroKeys: FC = () => {
           . You have {skeletonKeyAvailable} keys ({looseTeethCount} teeth,{" "}
           {skeletonBoneCount} bones).
         </Line>
-        <UnorderedList>
+        <List.Root>
           {looseTeethSources.map((source, index) => (
-            <ListItem key={index}>
+            <List.Item key={index}>
               {source.count} teeth from {source.name}.
-            </ListItem>
+            </List.Item>
           ))}
           {skeletonBoneSources.map((source, index) => (
-            <ListItem key={index}>
+            <List.Item key={index}>
               {source.count} bones from {source.name}.
-            </ListItem>
+            </List.Item>
           ))}
-        </UnorderedList>
+        </List.Root>
       </>
     ),
     [
diff --git a/src/sections/quests/HiddenTemple.tsx b/src/sections/quests/HiddenTemple.tsx
index 82c9378c..d127b8ad 100644
--- a/src/sections/quests/HiddenTemple.tsx
+++ b/src/sections/quests/HiddenTemple.tsx
@@ -47,7 +47,7 @@ const HiddenTemple: FC = () => {
           {myMeat() < 100 ? (
             <>
               {" "}
-              <Text as="b" color="red.500">
+              <Text as="b" color="red.solid">
                 You need 100 meat!
               </Text>
             </>
diff --git a/src/sections/quests/Level10.tsx b/src/sections/quests/Level10.tsx
index 35d29b16..c0d17ee5 100644
--- a/src/sections/quests/Level10.tsx
+++ b/src/sections/quests/Level10.tsx
@@ -83,7 +83,7 @@ const Level10: FC = () => {
             {!haveEquipped($item`amulet of extreme plot significance`) &&
               !haveEquipped($item`titanium assault umbrella`) &&
               !haveEquipped($item`unbreakable umbrella`) && (
-                <Line fontWeight="bold" color="red.500">
+                <Line fontWeight="bold" color="red.solid">
                   Equip an umbrella or the amulet of extreme plot significance.
                 </Line>
               )}
@@ -105,7 +105,7 @@ const Level10: FC = () => {
           9,
           <>
             {!haveEquipped($item`Mohawk wig`) && (
-              <Line fontWeight="bold" color="red.500">
+              <Line fontWeight="bold" color="red.solid">
                 Equip a Mohawk wig.
               </Line>
             )}
diff --git a/src/sections/quests/Level13.tsx b/src/sections/quests/Level13.tsx
index cc2aa63e..fb30926c 100644
--- a/src/sections/quests/Level13.tsx
+++ b/src/sections/quests/Level13.tsx
@@ -1,5 +1,6 @@
 import {
   haveEquipped,
+  initiativeModifier,
   Modifier,
   myBuffedstat,
   myPath,
@@ -8,7 +9,7 @@ import {
 import { $item, $path, $skill, $stat, get, have, questStep } from "libram";
 import { FC } from "react";
 
-import AdviceTooltip from "../../components/AdviceTooltip";
+import AdviceTooltipText from "../../components/AdviceTooltipText";
 import Line from "../../components/Line";
 import QuestTile from "../../components/QuestTile";
 import Tile from "../../components/Tile";
@@ -133,9 +134,9 @@ const Level13: FC = () => {
       >
         <Line>Defeat the Wall of Meat.</Line>
         <Line>
-          <AdviceTooltip
-            text="You need 526% meat drop to guarantee a one-turn kill."
-            label={`Current meat drop: ${Modifier.get("Meat Drop")}`}
+          <AdviceTooltipText
+            advice="You need 526% meat drop to guarantee a one-turn kill."
+            children={`Current meat drop: ${Modifier.get("Meat Drop")}`}
           />
         </Line>
       </Tile>
@@ -174,7 +175,7 @@ const Level13: FC = () => {
               <Line
                 command="equip candy cane sword cane"
                 fontWeight="bold"
-                color="red.500"
+                color="red.solid"
               >
                 Equip the candy cane sword.
               </Line>
@@ -229,10 +230,9 @@ const Level13: FC = () => {
       >
         <Line>Fight your shadow.</Line>
         <Line>
-          <AdviceTooltip
-            text="You need enough initiative to go first against Your Shadow."
-            label={`Current initiative: ${Modifier.get("Initiative")}`}
-          />
+          <AdviceTooltipText advice="You need enough initiative to go first against Your Shadow.">
+            Current initiative: {initiativeModifier().toFixed(0)}.
+          </AdviceTooltipText>
         </Line>
       </Tile>
     );
diff --git a/src/sections/quests/Level6.tsx b/src/sections/quests/Level6.tsx
index 4e12cbe6..4a14d1ec 100644
--- a/src/sections/quests/Level6.tsx
+++ b/src/sections/quests/Level6.tsx
@@ -1,9 +1,9 @@
-import { List, ListIcon, ListItem, Text } from "@chakra-ui/react";
+import { List, Text } from "@chakra-ui/react";
 import { combatRateModifier, myHash, myLocation } from "kolmafia";
 import { $location, $skill, have, questStep } from "libram";
 import { FC } from "react";
 
-import Chevrons from "../../components/Chevrons";
+import ChevronsListIcon from "../../components/ChevronsListIcon";
 import Line from "../../components/Line";
 import QuestTile from "../../components/QuestTile";
 import { turnsToSeeSingleNoncombatCapped } from "../../util/calc";
@@ -48,11 +48,11 @@ const Level6: FC = () => {
       expectedThisNc +
       Math.max(0, 3 - ncCompleted) * turnsToSeeSingleNoncombatCapped(95, 5);
     return (
-      <ListItem key={zoneName} pl="1">
-        <ListIcon as={Chevrons} usesLeft={ncCompleted} totalUses={4} />
+      <List.Item key={zoneName} pl="1">
+        <ChevronsListIcon usesLeft={ncCompleted} totalUses={4} />
         <Text as="b">{zoneName}:</Text>{" "}
         {`${zoneQueue.length}/4 NCs (~${expected.toFixed(1)} turns remaining)`}
-      </ListItem>
+      </List.Item>
     );
   });
 
@@ -77,11 +77,11 @@ const Level6: FC = () => {
           Step.STARTED && 1,
           <>
             {inZone && combatModifier > -25 && (
-              <Line fontWeight="bold" color="red.500">
+              <Line fontWeight="bold" color="red.solid">
                 Your -combat% is less than 25%, you want more!
               </Line>
             )}
-            <List>{listItems}</List>
+            <List.Root>{listItems}</List.Root>
           </>,
         ],
         [2, <Line>Conduct the ritual to finish the quest.</Line>],
diff --git a/src/sections/quests/Level7.tsx b/src/sections/quests/Level7.tsx
index db4b8808..ffdc7ddd 100644
--- a/src/sections/quests/Level7.tsx
+++ b/src/sections/quests/Level7.tsx
@@ -1,10 +1,4 @@
-import {
-  Divider,
-  ListItem,
-  Stack,
-  Text,
-  UnorderedList,
-} from "@chakra-ui/react";
+import { List, Separator, Stack, Text } from "@chakra-ui/react";
 import {
   availableAmount,
   equippedItem,
@@ -65,14 +59,14 @@ const getZoneDisplay = (
       </Line>
       {evil > 13 && (
         <Stack direction="row">
-          <Divider orientation="vertical" />
-          <UnorderedList>
+          <Separator orientation="vertical" />
+          <List.Root>
             {zoneStrategy.map((strat, index) => (
-              <ListItem key={typeof strat === "string" ? strat : index}>
+              <List.Item key={typeof strat === "string" ? strat : index}>
                 {strat}
-              </ListItem>
+              </List.Item>
             ))}
-          </UnorderedList>
+          </List.Root>
         </Stack>
       )}
     </MainLink>
diff --git a/src/sections/quests/Manor.tsx b/src/sections/quests/Manor.tsx
index 56d86202..da942b20 100644
--- a/src/sections/quests/Manor.tsx
+++ b/src/sections/quests/Manor.tsx
@@ -1,4 +1,4 @@
-import { ListItem, Text, UnorderedList } from "@chakra-ui/react";
+import { List, Text } from "@chakra-ui/react";
 import {
   combatRateModifier,
   equippedAmount,
@@ -125,37 +125,37 @@ const HauntedBilliardsRoom: FC = () => {
         {estimatedPoolSkill} pool skill.
       </Line>
       {estimatedPoolSkill < 18 && (
-        <UnorderedList>
+        <List.Root>
           {myInebriety() < 10 && inebrietyLimit() >= 10 && (
-            <ListItem>Drink to 10 inebrierty for +pool skill.</ListItem>
+            <List.Item>Drink to 10 inebrierty for +pool skill.</List.Item>
           )}
           {have($item`Staff of Ed, almost`) && (
-            <ListItem>Untinker the Staff of Ed, almost.</ListItem>
+            <List.Item>Untinker the Staff of Ed, almost.</List.Item>
           )}
           {have($item`[7964]Staff of Fats`) &&
             !haveEquipped($item`[7964]Staff of Fats`) && (
-              <ListItem>Equip the Staff of Fats for +pool skill.</ListItem>
+              <List.Item>Equip the Staff of Fats for +pool skill.</List.Item>
             )}
-          {!have($item`pool cue`) && <ListItem>Find pool cue.</ListItem>}
+          {!have($item`pool cue`) && <List.Item>Find pool cue.</List.Item>}
           {have($item`pool cue`) &&
             !equippedAmount($item`pool cue`) &&
             myPath() !== $path`Gelatinous Noob` && (
-              <ListItem>
+              <List.Item>
                 <MainLink href={inventoryLink($item`pool cue`)}>
                   Equip pool cue for +pool skill.
                 </MainLink>
-              </ListItem>
+              </List.Item>
             )}
           {!haveEffect($effect`Chalky Hand`) &&
             have($item`handful of hand chalk`) && (
-              <ListItem>
+              <List.Item>
                 <MainLink href={inventoryLink($item`handful of hand chalk`)}>
                   Use handful of hand chalk for +pool skill and faster pool
                   skill training.
                 </MainLink>
-              </ListItem>
+              </List.Item>
             )}
-        </UnorderedList>
+        </List.Root>
       )}
     </>
   );
diff --git a/src/sections/quests/StarKey.tsx b/src/sections/quests/StarKey.tsx
index 9d576ed0..d77b448b 100644
--- a/src/sections/quests/StarKey.tsx
+++ b/src/sections/quests/StarKey.tsx
@@ -49,7 +49,7 @@ const SpaceJellyfishAdvice: FC<SpaceJellyfishAdviceProps> = ({
     return (
       <Line>
         {!isCurrentFamiliar(spaceJellyfish) ? (
-          <Text as="span" color="red.500">
+          <Text as="span" color="red.solid">
             Bring along your space jellyfish!
           </Text>
         ) : (
@@ -64,7 +64,7 @@ const SpaceJellyfishAdvice: FC<SpaceJellyfishAdviceProps> = ({
     );
   } else {
     if (isCurrentFamiliar(spaceJellyfish)) {
-      return <Line color="red.500">Switch to another familiar?</Line>;
+      return <Line color="red.solid">Switch to another familiar?</Line>;
     }
     return (
       <Line>{plural(turnsToNextNC, "more turn")} to jellyfish choice NC.</Line>
diff --git a/src/sections/quests/level11/BlackForest.tsx b/src/sections/quests/level11/BlackForest.tsx
index 7104c76f..e9f611be 100644
--- a/src/sections/quests/level11/BlackForest.tsx
+++ b/src/sections/quests/level11/BlackForest.tsx
@@ -120,7 +120,7 @@ const BlackForest: FC = () => {
           Step.STARTED,
           <>
             {turnsUntilNC > 0 && combatRate < 5 && (
-              <Line color="red.500">Run +5% combat to avoid NC.</Line>
+              <Line color="red.solid">Run +5% combat to avoid NC.</Line>
             )}
             {!haveGaloshes &&
               (have($item`blackberry`, 3) ? (
diff --git a/src/sections/quests/level11/Copperhead.tsx b/src/sections/quests/level11/Copperhead.tsx
index 71522225..91e86d8b 100644
--- a/src/sections/quests/level11/Copperhead.tsx
+++ b/src/sections/quests/level11/Copperhead.tsx
@@ -85,7 +85,7 @@ const Copperhead: FC = () => {
               <Line href={parentPlaceLink(copperhead)}>
                 Or work on burning {14 - (3 - shenMeetings) - copperheadTurns}{" "}
                 turns of delay in the Copperhead Club.{" "}
-                <AdviceTooltipIcon text="This delay count does not include the meetings with Shen." />
+                <AdviceTooltipIcon advice="This delay count does not include the meetings with Shen." />
               </Line>
             )}
             {copperheadTurns === 14 && shenMeetings === 3 && (
diff --git a/src/sections/quests/level11/HiddenCity.tsx b/src/sections/quests/level11/HiddenCity.tsx
index e72de523..2d04baf4 100644
--- a/src/sections/quests/level11/HiddenCity.tsx
+++ b/src/sections/quests/level11/HiddenCity.tsx
@@ -176,7 +176,7 @@ const Apartment = () => {
                 </Line>
               )
             ) : (
-              <Line href={CITY_LINK} color="red.500">
+              <Line href={CITY_LINK} color="red.solid">
                 Apartment NC next turn! Try to get Thrice-Cursed first.
               </Line>
             )
@@ -226,13 +226,13 @@ const Office = () => {
       [
         Step.STARTED,
         <MainLink href={CITY_LINK}>
-          <Stack spacing={0.5}>
+          <Stack gap={0.5}>
             <Line fontWeight="bold">Hidden Office Building</Line>
             {needToUseClip ? (
               <Line
                 href={inventoryLink($item`boring binder clip`)}
                 fontWeight="bold"
-                color="red.500"
+                color="red.solid"
               >
                 Use the boring binder clip to complete the McClusky file.
               </Line>
@@ -249,7 +249,7 @@ const Office = () => {
               </Line>
             ) : null}
             {officeReady ? (
-              <Line color="red.500">
+              <Line color="red.solid">
                 Office NC {get("noncombatForcerActive") ? "(forced) " : ""}next
                 turn!
               </Line>
@@ -318,7 +318,7 @@ const BowlingAlley = () => {
       {tavernUnlocked() ? (
         !get("banishedMonsters").includes("drunk pygmy") ? (
           !have(bowlOfScorpions) ? (
-            <Line href={TAVERN_LINK} fontWeight="bold" color="red.500">
+            <Line href={TAVERN_LINK} fontWeight="bold" color="red.solid">
               Buy Bowl of Scorpions from the Hidden Tavern to free run.
             </Line>
           ) : (
@@ -328,7 +328,7 @@ const BowlingAlley = () => {
           )
         ) : null
       ) : (
-        <Line color="gray.500">
+        <Line color="gray.solid">
           Unlock the Hidden Tavern for free runs from drunk pygmies.
         </Line>
       )}
@@ -375,7 +375,7 @@ const Hospital = () => {
         <Line
           command={`equip ${unequippedOutfitPieces[0].name}`}
           fontWeight="bold"
-          color="red.500"
+          color="red.solid"
         >
           Equip your {commaAnd(unequippedOutfitPieces)} first.
         </Line>
@@ -399,7 +399,7 @@ const Hospital = () => {
       )}
       <Line>{numberOfEquippedPieces * 10}% chance to fight spirit.</Line>
       {hospital.turnsSpent >= 8 && (
-        <Line color="gray.500">
+        <Line color="gray.solid">
           Alternatively, burn {31 - hospital.turnsSpent} more turns.
         </Line>
       )}
diff --git a/src/sections/quests/level11/LordSpookyraven.tsx b/src/sections/quests/level11/LordSpookyraven.tsx
index 553f6978..7dc09349 100644
--- a/src/sections/quests/level11/LordSpookyraven.tsx
+++ b/src/sections/quests/level11/LordSpookyraven.tsx
@@ -106,7 +106,7 @@ const LordSpookyraven: FC = () => {
           >
             <Line
               href={inventoryLink($item`unstable fulminate`)}
-              color="red.500"
+              color="red.solid"
             >
               Equip unstable fulminate.
             </Line>
diff --git a/src/sections/quests/level11/Zeppelin.tsx b/src/sections/quests/level11/Zeppelin.tsx
index 14174120..1d666bab 100644
--- a/src/sections/quests/level11/Zeppelin.tsx
+++ b/src/sections/quests/level11/Zeppelin.tsx
@@ -43,7 +43,7 @@ const Zeppelin = () => {
       imageUrl="/images/itemimages/scharm.gif"
       href="/place.php?whichplace=zeppelin"
       tooltip={
-        tooltip && <AdviceTooltipIcon text={tooltip}></AdviceTooltipIcon>
+        tooltip && <AdviceTooltipIcon advice={tooltip}></AdviceTooltipIcon>
       }
       disabled={!questFinished("questL11Black")}
     >
diff --git a/src/sections/quests/level12/Farm.tsx b/src/sections/quests/level12/Farm.tsx
index 856b7908..f834b956 100644
--- a/src/sections/quests/level12/Farm.tsx
+++ b/src/sections/quests/level12/Farm.tsx
@@ -1,4 +1,4 @@
-import { ListItem, UnorderedList } from "@chakra-ui/react";
+import { List } from "@chakra-ui/react";
 import { myLocation } from "kolmafia";
 import { $item, $location, get, have } from "libram";
 import { FC } from "react";
@@ -34,11 +34,11 @@ const Farm: FC = () => {
             </Line>
           )}
           <Line>Remember to:</Line>
-          <UnorderedList>
-            <ListItem>Make a fence out of the barbed wire</ListItem>
-            <ListItem>Knock over the lantern</ListItem>
-            <ListItem>Dump out the drum</ListItem>
-          </UnorderedList>
+          <List.Root>
+            <List.Item>Make a fence out of the barbed wire</List.Item>
+            <List.Item>Knock over the lantern</List.Item>
+            <List.Item>Dump out the drum</List.Item>
+          </List.Root>
         </>
       )}
       <Line>
diff --git a/src/sections/quests/level12/Junkyard.tsx b/src/sections/quests/level12/Junkyard.tsx
index fcf36ad9..cb43be6d 100644
--- a/src/sections/quests/level12/Junkyard.tsx
+++ b/src/sections/quests/level12/Junkyard.tsx
@@ -42,7 +42,7 @@ interface MonsterTextProps {
 }
 
 const MonsterText: FC<MonsterTextProps> = ({ monster, isBanished }) => (
-  <Text as="span" color={isBanished ? "gray.500" : "inherit"}>
+  <Text as="span" color={isBanished ? "gray.solid" : "inherit"}>
     {monster}
   </Text>
 );
diff --git a/src/sections/resources/2016/ProtonicAcceleratorPack.tsx b/src/sections/resources/2016/ProtonicAcceleratorPack.tsx
index 51ae9967..a5e84ecd 100644
--- a/src/sections/resources/2016/ProtonicAcceleratorPack.tsx
+++ b/src/sections/resources/2016/ProtonicAcceleratorPack.tsx
@@ -42,9 +42,9 @@ const ProtonicAcceleratorPack = () => {
       node: haveProtonPack && nextGhostTurn <= totalTurnsPlayed() && (
         <Tile header="It's ghost bustin' time!" linkedContent={protonPack}>
           {protonPackEquipped ? (
-            <Line color="red.500">Equip the protopack first.</Line>
+            <Line color="red.solid">Equip the protopack first.</Line>
           ) : (
-            <Line color="blue.500">Who you gonna call? You!</Line>
+            <Line color="blue.solid">Who you gonna call? You!</Line>
           )}
         </Tile>
       ),
@@ -69,7 +69,7 @@ const ProtonicAcceleratorPack = () => {
             {protonPackEquipped ? (
               <Line>Cast "shoot ghost" three times, then "trap ghost".</Line>
             ) : (
-              <Line command="equip protonic accelerator pack" color="red.500">
+              <Line command="equip protonic accelerator pack" color="red.solid">
                 Equip the protonic accelerator pack first.
               </Line>
             )}
diff --git a/src/sections/resources/2016/Thanksgarden.tsx b/src/sections/resources/2016/Thanksgarden.tsx
index 50137cf9..ebd400d9 100644
--- a/src/sections/resources/2016/Thanksgarden.tsx
+++ b/src/sections/resources/2016/Thanksgarden.tsx
@@ -7,7 +7,7 @@ import {
 } from "kolmafia";
 import { $item, $location, get, have } from "libram";
 
-import AdviceTooltip from "../../../components/AdviceTooltip";
+import AdviceTooltipText from "../../../components/AdviceTooltipText";
 import Line from "../../../components/Line";
 import Tile from "../../../components/Tile";
 import { inventoryLink } from "../../../util/links";
@@ -68,27 +68,27 @@ const Thanksgarden = () => {
           Could make into{" "}
           <Box as="span">
             {commaSeparate([
-              <AdviceTooltip
+              <AdviceTooltipText
                 key="turkey"
-                label={`${plural(
+                children={`${plural(
                   Math.floor(availableAmount(cashew) / 3),
                   turkeyBlaster,
                 )} to burn delay`}
-                text="Requires 3 cashews each."
+                advice="Requires 3 cashews each."
               />,
-              <AdviceTooltip
+              <AdviceTooltipText
                 key="stuffing"
-                label={`${plural(
+                children={`${plural(
                   Math.floor(availableAmount(cashew) / 3),
                   stuffingFluffer,
                 )} for the war`}
-                text="Requires 3 cashews each."
+                advice="Requires 3 cashews each."
               />,
               "various foods",
-              <AdviceTooltip
+              <AdviceTooltipText
                 key="boat"
-                label="gravy boat for the crypt (somewhat marginal)"
-                text="Requires 3 cashews."
+                children="gravy boat for the crypt (somewhat marginal)"
+                advice="Requires 3 cashews."
               />,
             ])}
             .
diff --git a/src/sections/resources/2017/AsdonMartin.tsx b/src/sections/resources/2017/AsdonMartin.tsx
index 144d37d0..a27e3556 100644
--- a/src/sections/resources/2017/AsdonMartin.tsx
+++ b/src/sections/resources/2017/AsdonMartin.tsx
@@ -44,7 +44,7 @@ const AsdonMartin = () => {
             {currentFuel >= 50 ? (
               `Banish${freeRunsUsable ? "/free run" : ""}, costs 50 fuel.`
             ) : (
-              <Text as="span" color="red.500">
+              <Text as="span" color="red.solid">
                 Need 50 fuel first.
               </Text>
             )}
@@ -75,7 +75,7 @@ const AsdonMartin = () => {
 
       {!missileLauncherUsed && !inFamiliarsPath && !inGLoverPath && (
         <Line>
-          <Text as="span" color={currentFuel >= 100 ? undefined : "red.500"}>
+          <Text as="span" color={currentFuel >= 100 ? undefined : "red.solid"}>
             Missile Launcher available. Costs 100 fuel, instakill +
             YR-equivalent.
           </Text>
diff --git a/src/sections/resources/2017/TunnelOfLove.tsx b/src/sections/resources/2017/TunnelOfLove.tsx
index bc7d010d..395ed31d 100644
--- a/src/sections/resources/2017/TunnelOfLove.tsx
+++ b/src/sections/resources/2017/TunnelOfLove.tsx
@@ -41,7 +41,7 @@ const TunnelOfLove = () => {
                   as="b"
                   color={
                     primestat === $stat`Muscle` && inRun() && myLevel() < 13
-                      ? "green.500"
+                      ? "green.solid"
                       : undefined
                   }
                 >
@@ -57,7 +57,7 @@ const TunnelOfLove = () => {
                       primestat === $stat`Mysticality` &&
                       inRun() &&
                       myLevel() < 13
-                        ? "green.500"
+                        ? "green.solid"
                         : undefined
                     }
                   >
@@ -73,7 +73,7 @@ const TunnelOfLove = () => {
                     (primestat === $stat`Moxie` && inRun() && myLevel() < 13) ||
                     !inRun() ||
                     myLevel() >= 13
-                      ? "green.500"
+                      ? "green.solid"
                       : undefined
                   }
                 >
diff --git a/src/sections/resources/2019/KramcoSausageOMatic.tsx b/src/sections/resources/2019/KramcoSausageOMatic.tsx
index 282ac237..5984883f 100644
--- a/src/sections/resources/2019/KramcoSausageOMatic.tsx
+++ b/src/sections/resources/2019/KramcoSausageOMatic.tsx
@@ -55,7 +55,7 @@ const KramcoSausageOMatic = () => {
             linkedContent={kramcoSausageOMatic}
           >
             {!kramcosEquipped && (
-              <Line color="red.500">
+              <Line color="red.solid">
                 Equip the Kramco Sausage-o-Matic™ first.
               </Line>
             )}
@@ -90,7 +90,7 @@ const KramcoSausageOMatic = () => {
     >
       {!kramcosEquipped && (
         <Line>
-          <Text as="span" color="red.500">
+          <Text as="span" color="red.solid">
             Equip the Kramco Sausage-o-Matic™ first.
           </Text>
         </Line>
@@ -122,7 +122,7 @@ const KramcoSausageOMatic = () => {
           </Line>
           {sausagesMade > 22 ? (
             <Line>
-              <Text color="purple.500">
+              <Text color="purple.solid">
                 {sausagesMade} sausages made today.
               </Text>
             </Line>
diff --git a/src/sections/resources/2020/Cartography.tsx b/src/sections/resources/2020/Cartography.tsx
index ef859d2d..b6f9affe 100644
--- a/src/sections/resources/2020/Cartography.tsx
+++ b/src/sections/resources/2020/Cartography.tsx
@@ -1,4 +1,4 @@
-import { ListItem, UnorderedList } from "@chakra-ui/react";
+import { List } from "@chakra-ui/react";
 import { Location, myLevel } from "kolmafia";
 import { $item, $skill, get, have } from "libram";
 import { FC } from "react";
@@ -58,10 +58,10 @@ interface MapTargetProps {
 }
 
 /**
- * Returns a <ListItem> enumerating a MapTarget. Includes GROP handling.
+ * Returns a <List.Item> enumerating a MapTarget. Includes GROP handling.
  * @param myLevel() User's current level (as number)
  * @param target A "MapTarget" entry.
- * @returns <ListItem> covering monster, zone, & accessibility.
+ * @returns <List.Item> covering monster, zone, & accessibility.
  */
 const MapTargetItem: FC<MapTargetProps> = ({ target }) => {
   if (!target.accessible()) return <></>;
@@ -72,21 +72,21 @@ const MapTargetItem: FC<MapTargetProps> = ({ target }) => {
     //   - Grops are available in X turns, in which case it just lets you know they'll be ready in X turns.
 
     return (
-      <ListItem key={target.monster}>
+      <List.Item key={target.monster}>
         {`Green Ops Soldier ${
           target.turnsTilGROPs > 0
             ? `(possible in ${plural(target.turnsTilGROPs, "war turn")})`
             : `@ ${target.zone}`
         }`}
-      </ListItem>
+      </List.Item>
     );
   } else {
     return (
-      <ListItem key={target.monster}>
+      <List.Item key={target.monster}>
         <MainLink
           href={parentPlaceLink(Location.get(target.zone))}
         >{`${target.monster} @ ${target.zone}`}</MainLink>
-      </ListItem>
+      </List.Item>
     );
   }
 };
@@ -165,11 +165,11 @@ const Cartography = () => {
       imageUrl="/images/itemimages/cccbook.gif"
     >
       <Line>{_mapUses} maps remaining. Some map suggestions:</Line>
-      <UnorderedList>
+      <List.Root>
         {recommendations.slice(0, 3).map((recc) => (
           <MapTargetItem key={recc.monster} target={recc} />
         ))}
-      </UnorderedList>
+      </List.Root>
     </Tile>
   );
 };
diff --git a/src/sections/resources/2020/Melodramedary.tsx b/src/sections/resources/2020/Melodramedary.tsx
index 40bc23d5..5aded48c 100644
--- a/src/sections/resources/2020/Melodramedary.tsx
+++ b/src/sections/resources/2020/Melodramedary.tsx
@@ -1,4 +1,4 @@
-import { Badge, Flex, ListItem, UnorderedList } from "@chakra-ui/react";
+import { Badge, Flex, List } from "@chakra-ui/react";
 import { haveEquipped, myAscensions, myFamiliar, myLevel } from "kolmafia";
 import { $familiar, $item, get, have } from "libram";
 import { FC } from "react";
@@ -14,13 +14,13 @@ interface SpitTargetProps {
   target: SpitTarget;
 }
 
-// Generates a ListItem for a given spit target
+// Generates a List.Item for a given spit target
 const SpitTargetItem: FC<SpitTargetProps> = ({ userLevel, target }) => {
   if (!target.accessible(userLevel)) return <></>;
   return (
-    <ListItem
+    <List.Item
       key={target.monster}
-    >{`${target.monster} via ${target.zone}`}</ListItem>
+    >{`${target.monster} via ${target.zone}`}</List.Item>
   );
 };
 
@@ -220,7 +220,7 @@ const Melodramedary = () => {
         </Line>
       )}
       {spitProgress === 100 && recommendations.length > 0 && (
-        <UnorderedList>
+        <List.Root>
           {recommendations.slice(0, 2).map((recc) => (
             <SpitTargetItem
               key={recc.monster}
@@ -228,7 +228,7 @@ const Melodramedary = () => {
               target={recc}
             />
           ))}
-        </UnorderedList>
+        </List.Root>
       )}
       {spitProgress === 100 && nostalgiaUses < 3 && (
         <Line>
diff --git a/src/sections/resources/2020/PowerfulGlove.tsx b/src/sections/resources/2020/PowerfulGlove.tsx
index f096b57a..7fff71ff 100644
--- a/src/sections/resources/2020/PowerfulGlove.tsx
+++ b/src/sections/resources/2020/PowerfulGlove.tsx
@@ -27,7 +27,7 @@ const PowerfulGlove = () => {
       <Line>
         {100 - batteryUsed}% charge{" "}
         {batteryUsed <= 90 && (
-          <Text as="span" color="gray.500">
+          <Text as="span" color="gray.solid">
             {`(can replace ${plural(
               Math.floor((100 - batteryUsed) / 10),
               "monster",
diff --git a/src/sections/resources/2021/BackupCamera.tsx b/src/sections/resources/2021/BackupCamera.tsx
index 1a034fbe..cb66974a 100644
--- a/src/sections/resources/2021/BackupCamera.tsx
+++ b/src/sections/resources/2021/BackupCamera.tsx
@@ -42,14 +42,14 @@ const BackupCamera = () => {
       <Line>Currently set to {modeToEnchantment.get(cameraMode)}.</Line>
       {userLevel < 13 && cameraMode !== "ml" && (
         <Line command="backupcamera ml">
-          <Text as="span" color="gray.500">
+          <Text as="span" color="gray.solid">
             You aren't Level 13 yet; switch to ML?
           </Text>
         </Line>
       )}
       {!reverserStatus && (
         <Line command="backupcamera reverser on">
-          <Text as="span" color="red.500">
+          <Text as="span" color="red.solid">
             WARNING!
           </Text>{" "}
           Reverser is off. Turn it on, or combats are backwards!
diff --git a/src/sections/resources/2021/EmotionChip.tsx b/src/sections/resources/2021/EmotionChip.tsx
index f4c756a0..4a3c8b2a 100644
--- a/src/sections/resources/2021/EmotionChip.tsx
+++ b/src/sections/resources/2021/EmotionChip.tsx
@@ -1,8 +1,8 @@
-import { List, ListIcon, ListItem } from "@chakra-ui/react";
+import { List } from "@chakra-ui/react";
 import { getProperty } from "kolmafia";
 import { $skill, get } from "libram";
 
-import Chevrons from "../../../components/Chevrons";
+import ChevronsListIcon from "../../../components/ChevronsListIcon";
 import MainLink from "../../../components/MainLink";
 import Tile from "../../../components/Tile";
 import { haveUnrestricted } from "../../../util/available";
@@ -37,14 +37,13 @@ const EmotionChip = () => {
       }`;
       const skillName = `Feel ${skillDescription.split(" ")[0]}`;
       return (
-        <ListItem
+        <List.Item
           key={skillDescription}
           pl="1"
           display="flex"
-          color={casts === 0 ? "gray.500" : undefined}
+          color={casts === 0 ? "gray.solid" : undefined}
         >
-          <ListIcon
-            as={Chevrons}
+          <ChevronsListIcon
             usesLeft={casts}
             totalUses={3}
             marginInlineEnd={1}
@@ -62,7 +61,7 @@ const EmotionChip = () => {
               {text}
             </MainLink>
           )}
-        </ListItem>
+        </List.Item>
       );
     },
   );
@@ -76,7 +75,7 @@ const EmotionChip = () => {
   //   - My lean is to not include hatred and leave it for the banish tile I'm making.
   return (
     <Tile header="Emotion Chip" imageUrl="/images/itemimages/emochip1.gif">
-      <List>{listItems}</List>
+      <List.Root>{listItems}</List.Root>
     </Tile>
   );
 };
diff --git a/src/sections/resources/2021/IndustrialFireExtinguisher.tsx b/src/sections/resources/2021/IndustrialFireExtinguisher.tsx
index 81640c66..6cdd7a21 100644
--- a/src/sections/resources/2021/IndustrialFireExtinguisher.tsx
+++ b/src/sections/resources/2021/IndustrialFireExtinguisher.tsx
@@ -1,4 +1,4 @@
-import { ListItem, Text, UnorderedList } from "@chakra-ui/react";
+import { List, Text } from "@chakra-ui/react";
 import { $item, get, have, questStep } from "libram";
 
 import Line from "../../../components/Line";
@@ -65,34 +65,34 @@ const IndustrialFireExtinguisher = () => {
         vortices).`}
       </Line>
       {foam >= 20 && (
-        <UnorderedList>
+        <List.Root>
           {showBat && (
-            <ListItem>
+            <List.Item>
               <Text as="b">Constricted Blast</Text>: Unlock a Bat Hole chamber.
-            </ListItem>
+            </List.Item>
           )}
           {showKnob && (
-            <ListItem>
+            <List.Item>
               <Text as="b">Foam the Place</Text>: Obtain the Knob Harem Outfit.
-            </ListItem>
+            </List.Item>
           )}
           {showCyrpt && (
-            <ListItem>
+            <List.Item>
               <Text as="b">Replace the Chill</Text>: Reduce evil by 10 in a
               zone.
-            </ListItem>
+            </List.Item>
           )}
           {showBlech && (
-            <ListItem>
+            <List.Item>
               <Text as="b">Cool it Down</Text>: 73% Blech House progress.
-            </ListItem>
+            </List.Item>
           )}
           {showDesert && (
-            <ListItem>
+            <List.Item>
               <Text as="b">Take a Drink</Text>: 15 turns of Ultrahydrated.
-            </ListItem>
+            </List.Item>
           )}
-        </UnorderedList>
+        </List.Root>
       )}
     </Tile>
   );
diff --git a/src/sections/resources/2022/Autumnaton.tsx b/src/sections/resources/2022/Autumnaton.tsx
index 9860d2ca..106f75ab 100644
--- a/src/sections/resources/2022/Autumnaton.tsx
+++ b/src/sections/resources/2022/Autumnaton.tsx
@@ -1,10 +1,4 @@
-import {
-  Heading,
-  ListItem,
-  Text,
-  UnorderedList,
-  VStack,
-} from "@chakra-ui/react";
+import { Heading, List, Text, VStack } from "@chakra-ui/react";
 import {
   availableAmount,
   canAdventure,
@@ -23,7 +17,7 @@ import {
   questStep,
 } from "libram";
 
-import AdviceTooltip from "../../../components/AdviceTooltip";
+import AdviceTooltipText from "../../../components/AdviceTooltipText";
 import ItemButtons from "../../../components/ItemButtons";
 import Line from "../../../components/Line";
 import Tile from "../../../components/Tile";
@@ -54,7 +48,7 @@ const Autumnaton = () => {
         >
           <Line>
             Next use will take{" "}
-            <Text as="b" color="red.500">
+            <Text as="b" color="red.solid">
               {autobotsReturnTime}
             </Text>{" "}
             adventures.
@@ -149,7 +143,7 @@ const Autumnaton = () => {
       {have(autumnatonItem) ? (
         <Line>
           Next use will take{" "}
-          <Text as="span" fontWeight="bold" color="red.500">
+          <Text as="span" fontWeight="bold" color="red.solid">
             {autobotsReturnTime}
           </Text>{" "}
           adventures.
@@ -158,7 +152,7 @@ const Autumnaton = () => {
         <>
           <Line>
             Will return in{" "}
-            <Text as="b" color="red.500">
+            <Text as="b" color="red.solid">
               {turncountWhereAutobotReturns + 1 - totalTurnsPlayed()}
             </Text>{" "}
             adventures.
@@ -171,15 +165,15 @@ const Autumnaton = () => {
         </>
       )}
       {upgradesToGet.length > 0 && (
-        <UnorderedList>
+        <List.Root>
           {upgradesToGet.map((text) => (
-            <ListItem key={text}>{text}</ListItem>
+            <List.Item key={text}>{text}</List.Item>
           ))}
-        </UnorderedList>
+        </List.Root>
       )}
       {potentialTargets.length > 0 && (
-        <AdviceTooltip
-          text={
+        <AdviceTooltipText
+          advice={
             <VStack align="start">
               <Heading size="sm">Potential Targets</Heading>
               {potentialTargets.map(([item, location], index) => (
@@ -189,7 +183,7 @@ const Autumnaton = () => {
               ))}
             </VStack>
           }
-          label="Potential Autumnaton Targets"
+          children="Potential Autumnaton Targets"
         />
       )}
     </Tile>
diff --git a/src/sections/resources/2022/CombatLoversLocket.tsx b/src/sections/resources/2022/CombatLoversLocket.tsx
index 43a9b95a..21c10057 100644
--- a/src/sections/resources/2022/CombatLoversLocket.tsx
+++ b/src/sections/resources/2022/CombatLoversLocket.tsx
@@ -1,4 +1,4 @@
-import { ListItem, Text, UnorderedList } from "@chakra-ui/react";
+import { List, Text } from "@chakra-ui/react";
 import {
   $item,
   CombatLoversLocket as CombatLoversLocketLibram,
@@ -47,7 +47,7 @@ function getLocketEnchantment(phylum: string): ReactNode {
             +3 Hot res
           </Text>
           {" and "}
-          <Text as="span" color="green.800">
+          <Text as="span" color="green.fg">
             +25 Stench Spell
           </Text>
         </>
@@ -58,7 +58,7 @@ function getLocketEnchantment(phylum: string): ReactNode {
       return (
         <>
           {"+50% Meat Drops and "}
-          <Text as="span" color="gray.500">
+          <Text as="span" color="gray.solid">
             +25 Spooky Spell
           </Text>
         </>
@@ -66,7 +66,7 @@ function getLocketEnchantment(phylum: string): ReactNode {
     case "goblin":
       return (
         <>
-          <Text as="span" color="green.800">
+          <Text as="span" color="green.fg">
             +25 Stench
           </Text>
           {" and +50% Mysticality"}
@@ -75,7 +75,7 @@ function getLocketEnchantment(phylum: string): ReactNode {
     case "hippy":
       return (
         <>
-          <Text as="span" color="green.800">
+          <Text as="span" color="green.fg">
             +3 Stench res
           </Text>
           {" and +10 DR"}
@@ -93,7 +93,7 @@ function getLocketEnchantment(phylum: string): ReactNode {
     case "horror":
       return (
         <>
-          <Text as="span" color="gray.500">
+          <Text as="span" color="gray.solid">
             +3 Spooky res
           </Text>
           {" and +50 HP"}
@@ -105,7 +105,7 @@ function getLocketEnchantment(phylum: string): ReactNode {
       return (
         <>
           {"+25% Item Drops and "}
-          <Text as="span" color="purple.500">
+          <Text as="span" color="purple.solid">
             +25 Sleaze Spell
           </Text>
         </>
@@ -113,7 +113,7 @@ function getLocketEnchantment(phylum: string): ReactNode {
     case "orc":
       return (
         <>
-          <Text as="span" color="purple.500">
+          <Text as="span" color="purple.solid">
             +3 Sleaze res
           </Text>
           {" and +25 MP"}
@@ -132,7 +132,7 @@ function getLocketEnchantment(phylum: string): ReactNode {
       return (
         <>
           {"+50% Booze Drops and "}
-          <Text as="span" color="purple.500">
+          <Text as="span" color="purple.solid">
             +25 Sleaze
           </Text>
         </>
@@ -151,7 +151,7 @@ function getLocketEnchantment(phylum: string): ReactNode {
     case "undead":
       return (
         <>
-          <Text as="span" color="gray.500">
+          <Text as="span" color="gray.solid">
             +25 Spooky
           </Text>
           {" and +50% Muscle"}
@@ -215,13 +215,13 @@ const CombatLoversLocket: FC = () => {
           <Text as="b">Current enchantment: </Text>
           {locketPhylum}.
         </Line>
-        <Line color="blue.500">{locketEnchantment}</Line>
+        <Line color="blue.solid">{locketEnchantment}</Line>
         {options.length > 0 && (
-          <UnorderedList>
+          <List.Root>
             {options.map((option) => (
-              <ListItem key={option}>{option}</ListItem>
+              <List.Item key={option}>{option}</List.Item>
             ))}
-          </UnorderedList>
+          </List.Root>
         )}
       </Tile>
     )
diff --git a/src/sections/resources/2022/Cookbookbat.tsx b/src/sections/resources/2022/Cookbookbat.tsx
index 946c1f29..630b7d36 100644
--- a/src/sections/resources/2022/Cookbookbat.tsx
+++ b/src/sections/resources/2022/Cookbookbat.tsx
@@ -1,4 +1,4 @@
-import { ListItem, Text, UnorderedList } from "@chakra-ui/react";
+import { List, Text } from "@chakra-ui/react";
 import {
   availableAmount,
   fullnessLimit,
@@ -129,22 +129,22 @@ const Cookbookbat = () => {
           You currently have {wheyAmount} whey, {vegAmount} veg, and{" "}
           {yeastAmount} yeast. Make:
         </Line>
-        <UnorderedList>
-          <ListItem>
+        <List.Root>
+          <List.Item>
             <Text as="b">{borisBreadCraftable}x Boris's Bread:</Text> +100%
             meat.
-          </ListItem>
-          <ListItem>
+          </List.Item>
+          <List.Item>
             <Text as="b">
               {roastedVegCraftable}x Roasted Vegetable of Jarlsberg:
             </Text>{" "}
             +100% item.
-          </ListItem>
-          <ListItem>
+          </List.Item>
+          <List.Item>
             <Text as="b">{focacciaCraftable}x Roasted Vegetable Focaccia:</Text>{" "}
             +10 fam XP.
-          </ListItem>
-        </UnorderedList>
+          </List.Item>
+        </List.Root>
       </LinkBlock>
       {freeCooksRemaining > 0 && (
         <Line>
diff --git a/src/sections/resources/2022/CosmicBowlingBall.tsx b/src/sections/resources/2022/CosmicBowlingBall.tsx
index e99395ed..5e4f85ee 100644
--- a/src/sections/resources/2022/CosmicBowlingBall.tsx
+++ b/src/sections/resources/2022/CosmicBowlingBall.tsx
@@ -1,7 +1,7 @@
 import { Text } from "@chakra-ui/react";
 import { $item, $location, get } from "libram";
 
-import AdviceTooltip from "../../../components/AdviceTooltip";
+import AdviceTooltipText from "../../../components/AdviceTooltipText";
 import Line from "../../../components/Line";
 import Tile from "../../../components/Tile";
 import { NagPriority } from "../../../contexts/NagContext";
@@ -54,14 +54,14 @@ const CosmicBowlingBall = () => {
     >
       {currentZone === $location`The Hidden Bowling Alley` && (
         <Line>
-          <Text as="span" color="teal.500" fontWeight={"bold"}>
+          <Text as="span" color="teal.solid" fontWeight={"bold"}>
             You're in the bowling alley; remember to bowl for pygmies!
           </Text>{" "}
         </Line>
       )}
       {youHaveTheBall && (
         <Line>
-          <Text as="span" color="red.500" fontWeight={"bold"}>
+          <Text as="span" color="red.solid" fontWeight={"bold"}>
             You've got your bowling ball; throw it!
           </Text>{" "}
         </Line>
@@ -79,7 +79,7 @@ const CosmicBowlingBall = () => {
             <Text as="b">Bowl Straight Up:</Text> Gain +25% items / +50% meat
           </Line>
           <Line>
-            <Text as="span" color="gray.400">
+            <Text as="span" color="gray.emphasized">
               <Text as="b">Bowl Backwards:</Text> Pickpocket from the rest of
               your current CSV.
             </Text>
@@ -89,9 +89,9 @@ const CosmicBowlingBall = () => {
       {returnCombats > 0 && (
         <Line>
           Your Bowling Ball will return in{" "}
-          <AdviceTooltip
-            text="Free runs count for this!"
-            label={plural(returnCombats, "turn")}
+          <AdviceTooltipText
+            advice="Free runs count for this!"
+            children={plural(returnCombats, "turn")}
           />
           .
         </Line>
diff --git a/src/sections/resources/2022/DesignerSweatpants.tsx b/src/sections/resources/2022/DesignerSweatpants.tsx
index 3f77d140..f14802b8 100644
--- a/src/sections/resources/2022/DesignerSweatpants.tsx
+++ b/src/sections/resources/2022/DesignerSweatpants.tsx
@@ -1,4 +1,4 @@
-import { LinkProps, ListItem, Text, UnorderedList } from "@chakra-ui/react";
+import { LinkProps, List, Text } from "@chakra-ui/react";
 import { haveEquipped, myInebriety } from "kolmafia";
 import { $item, $skill, get } from "libram";
 import { FC } from "react";
@@ -32,33 +32,33 @@ const DesignerSweatpants = () => {
       id="designer-sweatpants-tile"
       linkedContent={designerSweatpants}
     >
-      <UnorderedList>
-        <ListItem>
+      <List.Root>
+        <List.Item>
           <LinkOrEquip href={skillLink($skill`Sweat Sip`)}>
             <Text as="b">Sweat Sip (5% sweat):</Text> Regain 50 MP
           </LinkOrEquip>
-        </ListItem>
-        <ListItem>
+        </List.Item>
+        <List.Item>
           <LinkOrEquip href={skillLink($skill`Drench Yourself in Sweat`)}>
             <Text as="b">Drench Yourself in Sweat (15% sweat):</Text> +100%
             Initiative
           </LinkOrEquip>
-        </ListItem>
+        </List.Item>
         {boozeSweatsLeft > 0 && (
-          <ListItem>
+          <List.Item>
             <LinkOrEquip href={skillLink($skill`Sweat Out Some Booze`)}>
               <Text as="b">Sweat Out Some Booze (25% sweat):</Text>
             </LinkOrEquip>
             <LinkOrEquip
               href={skillLink($skill`Sweat Out Some Booze`)}
-              color="orange.500"
+              color="orange.solid"
             >
               {` -1 Drunkenness. ${plural(boozeSweatsLeft, "use")} left for today.`}
               {myInebriety() === 0 && " Drink some booze first."}
             </LinkOrEquip>
-          </ListItem>
+          </List.Item>
         )}
-      </UnorderedList>
+      </List.Root>
     </Tile>
   );
 };
diff --git a/src/sections/resources/2022/GreyGoose.tsx b/src/sections/resources/2022/GreyGoose.tsx
index 471e8a49..f77be4ee 100644
--- a/src/sections/resources/2022/GreyGoose.tsx
+++ b/src/sections/resources/2022/GreyGoose.tsx
@@ -39,7 +39,7 @@ const GreyGoose: FC = () => {
             <Text as="span" color="brown" fontWeight="bold">
               {gooseDrones}
             </Text>
-            <Text as="span" color="gray.500">
+            <Text as="span" color="gray.solid">
               {" "}
               GOOSO drones deployed.
             </Text>
@@ -61,7 +61,7 @@ const GreyGoose: FC = () => {
           header="Re-Process Matter"
           imageUrl="/images/itemimages/greygoose.gif"
         >
-          <Line color="gray.500">
+          <Line color="gray.solid">
             GOOSO is {gooseWeight} pounds ({gooseExperience} exp)
           </Line>
           <Line>
@@ -84,7 +84,9 @@ const GreyGoose: FC = () => {
         <Text as="b">{famExperienceGain}</Text> fam exp per fight. (Will become{" "}
         <Text
           as="b"
-          color={(gooseWeight + 1) ** 2 > newGooseExp ? "red.500" : "blue.500"}
+          color={
+            (gooseWeight + 1) ** 2 > newGooseExp ? "red.solid" : "blue.solid"
+          }
         >
           {newGooseExp}
         </Text>
@@ -107,7 +109,7 @@ const GreyGoose: FC = () => {
             after that.
           </Line>
           {famExperienceGain < famExpNeededForNextPound && (
-            <Line color="red.500">Insufficient famxp for next fight.</Line>
+            <Line color="red.solid">Insufficient famxp for next fight.</Line>
           )}
           <Line>
             Can emit <Text as="b">{gooseWeight - 5}</Text> drones to duplicate
@@ -174,19 +176,19 @@ const GreyGoose: FC = () => {
           {!get("_questPartyFair") && (
             <Line>
               {famExperienceGain >= 39 ? (
-                <Text as="span" color="green.500">
+                <Text as="span" color="green.solid">
                   Can GOOSO 3 drops per fight!
                 </Text>
               ) : famExperienceGain >= 24 ? (
-                <Text as="span" color="blue.500">
+                <Text as="span" color="blue.solid">
                   Can GOOSO 2 drops per fight!
                 </Text>
               ) : famExperienceGain >= 11 ? (
-                <Text as="span" color="purple.500">
+                <Text as="span" color="purple.solid">
                   Can GOOSO 1 drop per fight!
                 </Text>
               ) : (
-                <Text as="span" color="red.500">
+                <Text as="span" color="red.solid">
                   Cannot GOOSO any drops per fight!
                 </Text>
               )}
diff --git a/src/sections/resources/2022/JuneCleaver.tsx b/src/sections/resources/2022/JuneCleaver.tsx
index 0add87f7..91766f26 100644
--- a/src/sections/resources/2022/JuneCleaver.tsx
+++ b/src/sections/resources/2022/JuneCleaver.tsx
@@ -1,7 +1,7 @@
-import { ListItem, OrderedList, UnorderedList } from "@chakra-ui/react";
+import { List } from "@chakra-ui/react";
 import { $item, get } from "libram";
 
-import AdviceTooltip from "../../../components/AdviceTooltip";
+import AdviceTooltipText from "../../../components/AdviceTooltipText";
 import Line from "../../../components/Line";
 import Tile from "../../../components/Tile";
 import { haveUnrestricted } from "../../../util/available";
@@ -86,21 +86,21 @@ const JuneCleaver = () => {
     .filter((entry) => !cleaverQueue.includes(entry.choice))
     .map(({ option1, option2, option3, name, choice }) => {
       return (
-        <ListItem key={choice}>
-          <AdviceTooltip
-            text={
+        <List.Item key={choice}>
+          <AdviceTooltipText
+            advice={
               <>
                 <Line fontWeight="bold">Choices:</Line>
-                <OrderedList>
-                  <ListItem key={`${choice}_1`}>{option1}</ListItem>
-                  <ListItem key={`${choice}_2`}>{option2}</ListItem>
-                  <ListItem key={`${choice}_3`}>{option3}</ListItem>
-                </OrderedList>
+                <List.Root>
+                  <List.Item key={`${choice}_1`}>{option1}</List.Item>
+                  <List.Item key={`${choice}_2`}>{option2}</List.Item>
+                  <List.Item key={`${choice}_3`}>{option3}</List.Item>
+                </List.Root>
               </>
             }
-            label={name}
+            children={name}
           />
-        </ListItem>
+        </List.Item>
       );
     });
 
@@ -121,7 +121,7 @@ const JuneCleaver = () => {
         </Line>
       )}
       <Line>Possible upcoming NCs:</Line>
-      <UnorderedList>{availableChoices}</UnorderedList>
+      <List.Root>{availableChoices}</List.Root>
     </Tile>
   );
 };
diff --git a/src/sections/resources/2022/JurassicParka.tsx b/src/sections/resources/2022/JurassicParka.tsx
index 264c6070..73e6a1ee 100644
--- a/src/sections/resources/2022/JurassicParka.tsx
+++ b/src/sections/resources/2022/JurassicParka.tsx
@@ -42,15 +42,15 @@ const JurassicParka: FC = () => {
             }
           >
             {!parkaEquipped && (
-              <Line color="red.500">Equip your Jurassic Parka!</Line>
+              <Line color="red.solid">Equip your Jurassic Parka!</Line>
             )}
-            {parkaEquipped && <Line color="orange.500">Parka equipped.</Line>}
+            {parkaEquipped && <Line color="orange.solid">Parka equipped.</Line>}
             {parkaMode !== "dilophosaur" ? (
-              <Line color="red.500" command="parka dilophosaur">
+              <Line color="red.solid" command="parka dilophosaur">
                 Change your parka to dilophosaur mode!
               </Line>
             ) : (
-              <Line color="orange.500">Dilophosaur mode enabled.</Line>
+              <Line color="orange.solid">Dilophosaur mode enabled.</Line>
             )}
             <Line>Parka yellow ray is ready; spit some acid!</Line>
           </Tile>
@@ -95,7 +95,7 @@ const JurassicParka: FC = () => {
       id="jurassic-parka-tile"
       linkedContent={jurassicParka}
     >
-      <Line color="blue.500">{parkaEnchantment}</Line>
+      <Line color="blue.solid">{parkaEnchantment}</Line>
       {spikolodonSpikesLeft > 0 && (
         <Line command="parka spikolodon">
           <Text as="b">{spikolodonSpikesLeft}</Text> spikolodon spikes
diff --git a/src/sections/resources/2022/ModelTrainSet.tsx b/src/sections/resources/2022/ModelTrainSet.tsx
index 21457a25..40a753ab 100644
--- a/src/sections/resources/2022/ModelTrainSet.tsx
+++ b/src/sections/resources/2022/ModelTrainSet.tsx
@@ -1,8 +1,8 @@
-import { ListItem, Text, UnorderedList } from "@chakra-ui/react";
+import { List, Text } from "@chakra-ui/react";
 import { availableAmount, myLevel, myPrimestat } from "kolmafia";
 import { $item, $stat, get, have } from "libram";
 
-import AdviceTooltip from "../../../components/AdviceTooltip";
+import AdviceTooltipText from "../../../components/AdviceTooltipText";
 import Line from "../../../components/Line";
 import Tile from "../../../components/Tile";
 import { NagPriority } from "../../../contexts/NagContext";
@@ -220,23 +220,23 @@ const ModelTrainSet = () => {
   return (
     <Tile header="Model Train Set" imageUrl={imageUrl}>
       {oreConfiguredWhenNotNeeded() && (
-        <Line color="red.500">Have ore configured when it's not needed!</Line>
+        <Line color="red.solid">Have ore configured when it's not needed!</Line>
       )}
       {loggingMillConfiguredWhenNotNeeded() && (
-        <Line color="red.500">
+        <Line color="red.solid">
           Have lumber mill configured when it's not needed!
         </Line>
       )}
       {statsConfiguredWhenNotNeeded() && (
-        <Line color="red.500">
+        <Line color="red.solid">
           Have stats configured when they're not needed!
         </Line>
       )}
       {stationConfigured("empty") && (
-        <Line color="red.500">Have an empty station configured!</Line>
+        <Line color="red.solid">Have an empty station configured!</Line>
       )}
       {reconfigurableIn === 0 ? (
-        <Line color="blue.500" href="/campground.php?action=workshed">
+        <Line color="blue.solid" href="/campground.php?action=workshed">
           Train set reconfigurable!
         </Line>
       ) : (
@@ -249,26 +249,26 @@ const ModelTrainSet = () => {
         Next station: <Text as="b">{nextStation.name}</Text> -{" "}
         {nextStation.description}
       </Line>
-      <AdviceTooltip
-        text={
+      <AdviceTooltipText
+        advice={
           <>
             <Text as="b" textAlign="center" pb={1}>
               Train station cycle
             </Text>
-            <UnorderedList>
+            <List.Root>
               {Array.from({ length: 8 }, (_, i) => {
                 const station =
                   stationDescriptions[stations[(trainPosition + i) % 8]];
                 return (
-                  <ListItem key={i}>
+                  <List.Item key={i}>
                     <Text as="b">{station.name}</Text>: {station.description}
-                  </ListItem>
+                  </List.Item>
                 );
               })}
-            </UnorderedList>
+            </List.Root>
           </>
         }
-        label="Full train cycle"
+        children="Full train cycle"
       />
     </Tile>
   );
diff --git a/src/sections/resources/2022/TinyStillsuit.tsx b/src/sections/resources/2022/TinyStillsuit.tsx
index c99c8ad9..e34f2a99 100644
--- a/src/sections/resources/2022/TinyStillsuit.tsx
+++ b/src/sections/resources/2022/TinyStillsuit.tsx
@@ -1,4 +1,4 @@
-import { ListItem, Text, UnorderedList } from "@chakra-ui/react";
+import { Box, List, Text } from "@chakra-ui/react";
 import {
   haveEquipped,
   inebrietyLimit,
@@ -8,7 +8,7 @@ import {
 import { $item, get } from "libram";
 import { getHashIfAvailable } from "tome-kolmafia-lib";
 
-import AdviceTooltip from "../../../components/AdviceTooltip";
+import AdviceTooltipText from "../../../components/AdviceTooltipText";
 import Line from "../../../components/Line";
 import Tile from "../../../components/Tile";
 import { NagPriority } from "../../../contexts/NagContext";
@@ -54,7 +54,7 @@ const TinyStillsuit = () => {
           {familiarSweat > 449 ? (
             <>
               <Line>
-                <Text as="b" color="red.500">
+                <Text as="b" color="red.solid">
                   {sweatAdvs}
                 </Text>{" "}
                 advs when guzzling now (costs 1 liver).
@@ -72,17 +72,17 @@ const TinyStillsuit = () => {
             </Line>
           )}
           {haveStillsuitEquipped && (
-            <Line color="purple.500">
+            <Line color="purple.solid">
               Currently collecting sweat from current familiar!
             </Line>
           )}
           {!haveStillsuitEquipped && haveStillsuitInInventory && (
-            <Line color="red.500">
+            <Line color="red.solid">
               Not collecting sweat from any familiar right now.
             </Line>
           )}
           {!haveStillsuitEquipped && !haveStillsuitInInventory && (
-            <Line color="fuchsia.500">
+            <Line color="fuchsia.solid">
               Currently collecting sweat on a different familiar!
             </Line>
           )}
@@ -149,7 +149,7 @@ const TinyStillsuit = () => {
         </>
       ) : (
         <>
-          <Line color="red.500">Not enough sweat to guzzle.</Line>
+          <Line color="red.solid">Not enough sweat to guzzle.</Line>
           <Line>
             <Text as="b">{sweatCalcSweat - familiarSweat}</Text> more sweat
             until +1 more adventure. (
@@ -159,61 +159,59 @@ const TinyStillsuit = () => {
         </>
       )}
       {haveStillsuitEquipped && (
-        <Line color="purple.500">
+        <Line color="purple.solid">
           Currently collecting sweat from current familiar!
         </Line>
       )}
       {haveStillsuitInInventory && (
-        <Line color="red.500">
+        <Line color="red.solid">
           Not collecting sweat from any familiar right now.
         </Line>
       )}
       {!haveStillsuitEquipped && !haveStillsuitInInventory && (
-        <Line color="fuchsia.500">
+        <Line color="fuchsia.solid">
           Currently collecting sweat on a different familiar!
         </Line>
       )}
-      <Line>
-        <AdviceTooltip
-          display="inline-block"
-          text={
-            <UnorderedList>
+      <Box>
+        <AdviceTooltipText
+          advice={
+            <List.Root>
               {Object.entries(advDramsTable).map(
                 ([advs, drams]) =>
                   drams > familiarSweat && (
-                    <ListItem key={advs}>
+                    <List.Item key={advs}>
                       {advs} advs: {drams} drams ({drams - familiarSweat} more
                       sweat)
-                    </ListItem>
+                    </List.Item>
                   ),
               )}
               {familiarSweat > 553 && (
-                <ListItem>
+                <List.Item>
                   {" "}
                   13 advs: ... y'know, you should probably just drink it, buddy.
-                </ListItem>
+                </List.Item>
               )}
-            </UnorderedList>
+            </List.Root>
           }
-          label="Sweat/Advs"
+          children="Sweat/Advs"
         />{" "}
         •{" "}
-        <AdviceTooltip
-          display="inline-block"
-          text={
-            <UnorderedList>
-              <ListItem>Cubeling / Stomping Boots: +item</ListItem>
-              <ListItem>
+        <AdviceTooltipText
+          advice={
+            <List.Root>
+              <List.Item>Cubeling / Stomping Boots: +item</List.Item>
+              <List.Item>
                 Levitating Potato / Candy Carnie / Flan: +item and +food
-              </ListItem>
-              <ListItem>
+              </List.Item>
+              <List.Item>
                 Star Starfish / Emilio / Globmule / Waifuton: +item and +sleaze
-              </ListItem>
-            </UnorderedList>
+              </List.Item>
+            </List.Root>
           }
-          label="Suggested Familiars"
+          children="Suggested Familiars"
         />
-      </Line>
+      </Box>
     </Tile>
   );
 };
diff --git a/src/sections/resources/2023/AGuideToBurningLeaves.tsx b/src/sections/resources/2023/AGuideToBurningLeaves.tsx
index 2226cce1..7a5124c5 100644
--- a/src/sections/resources/2023/AGuideToBurningLeaves.tsx
+++ b/src/sections/resources/2023/AGuideToBurningLeaves.tsx
@@ -1,9 +1,9 @@
-import { ListItem, Text, UnorderedList } from "@chakra-ui/react";
+import { List, Text } from "@chakra-ui/react";
 import { availableAmount, getCampground, myLevel } from "kolmafia";
 import { $effect, $familiar, $item, $skill, get, have } from "libram";
 import { FC } from "react";
 
-import AdviceTooltip from "../../../components/AdviceTooltip";
+import AdviceTooltipText from "../../../components/AdviceTooltipText";
 import Line from "../../../components/Line";
 import LinkBlock from "../../../components/LinkBlock";
 import Tile from "../../../components/Tile";
@@ -207,7 +207,7 @@ const AGuideToBurningLeaves: FC = () => {
     >
       <LinkBlock href="/campground.php?preaction=leaves">
         <Line fontWeight="bold">Item Summons:</Line>
-        <UnorderedList>
+        <List.Root>
           {LEAFY_SUMMONS.map((summon) => {
             if (
               ((canUseShorty || canUseCrab) && summon.leafCost === 37) ||
@@ -225,29 +225,29 @@ const AGuideToBurningLeaves: FC = () => {
 
             const hasEnoughLeaves = leafCount >= summon.leafCost;
             return (
-              <ListItem
+              <List.Item
                 key={summon.summonedItem}
-                color={hasEnoughLeaves ? "black" : "gray.500"}
+                color={hasEnoughLeaves ? "black" : "gray.solid"}
               >
                 {summon.leafCost} leaves: {summon.summonedItem} -{" "}
                 {summon.description}
                 {summon.meltingStatus && (
-                  <Text as="span" fontSize="xs" color="gray.500">
+                  <Text as="span" fontSize="xs" color="gray.solid">
                     {" "}
                     (melting)
                   </Text>
                 )}
-              </ListItem>
+              </List.Item>
             );
           })}
-        </UnorderedList>
+        </List.Root>
       </LinkBlock>
 
       {fightsRemaining > 0 && (
         <>
           <LinkBlock href="/campground.php?preaction=leaves">
             <Line fontWeight="bold">Fight Summons:</Line>
-            <UnorderedList>
+            <List.Root>
               {LEAFY_FIGHTS.map((fight) => {
                 if (
                   inRun &&
@@ -259,43 +259,43 @@ const AGuideToBurningLeaves: FC = () => {
 
                 const hasEnoughLeaves = leafCount >= fight.leafCost;
                 return (
-                  <ListItem
+                  <List.Item
                     key={fight.summonedMonster}
-                    color={hasEnoughLeaves ? "black" : "gray.500"}
+                    color={hasEnoughLeaves ? "black" : "gray.solid"}
                   >
                     {fight.leafCost} leaves: {fight.summonedMonster} -{" "}
                     {fight.scaling}; ~{fight.leavesDropped} leaves dropped
                     {fight.extraDrops && (
-                      <Text as="span" fontSize="xs" color="gray.500">
+                      <Text as="span" fontSize="xs" color="gray.solid">
                         {" "}
                         (also, drops {fight.extraDrops})
                       </Text>
                     )}
-                  </ListItem>
+                  </List.Item>
                 );
               })}
-            </UnorderedList>
+            </List.Root>
           </LinkBlock>
           <Line>
             {leafCount >= 111 * fightsRemaining ? (
-              <AdviceTooltip
-                text={`You can summon ${fightsRemaining} monstera for scaling fights.`}
-                label={`You have enough leaves for ${fightsRemaining} monstera.`}
+              <AdviceTooltipText
+                advice={`You can summon ${fightsRemaining} monstera for scaling fights.`}
+                children={`You have enough leaves for ${fightsRemaining} monstera.`}
               />
             ) : leafCount >= 11 * fightsRemaining ? (
-              <AdviceTooltip
-                text={`You can summon ${fightsRemaining} leaflets for familiar turns.`}
-                label={`You have enough leaves for ${fightsRemaining} leaflets.`}
+              <AdviceTooltipText
+                advice={`You can summon ${fightsRemaining} leaflets for familiar turns.`}
+                children={`You have enough leaves for ${fightsRemaining} leaflets.`}
               />
             ) : leafCount >= 11 ? (
-              <AdviceTooltip
-                text="Save leaves for more fights!"
-                label={`You can currently summon ${plural(leafletsUserCanSummon, "leaflet")}.`}
+              <AdviceTooltipText
+                advice="Save leaves for more fights!"
+                children={`You can currently summon ${plural(leafletsUserCanSummon, "leaflet")}.`}
               />
             ) : (
-              <AdviceTooltip
-                text="Save leaves for fights!"
-                label="You cannot currently summon a free fight."
+              <AdviceTooltipText
+                advice="Save leaves for fights!"
+                children="You cannot currently summon a free fight."
               />
             )}
           </Line>
diff --git a/src/sections/resources/2023/AugustScepter.tsx b/src/sections/resources/2023/AugustScepter.tsx
index e87ba303..dc9cae47 100644
--- a/src/sections/resources/2023/AugustScepter.tsx
+++ b/src/sections/resources/2023/AugustScepter.tsx
@@ -1,4 +1,4 @@
-import { Table, Tbody, Td, Text, Tr } from "@chakra-ui/react";
+import { Table, Text } from "@chakra-ui/react";
 import {
   availableAmount,
   myLevel,
@@ -18,7 +18,7 @@ import {
 } from "libram";
 import { FC, ReactNode } from "react";
 
-import AdviceTooltip from "../../../components/AdviceTooltip";
+import AdviceTooltipText from "../../../components/AdviceTooltipText";
 import Line from "../../../components/Line";
 import MainLink from "../../../components/MainLink";
 import Tile from "../../../components/Tile";
@@ -66,7 +66,7 @@ const AugustScepter: FC = () => {
   if (!have(augustScepter) || skillsAvailable < 1) return null;
 
   const buffString = (
-    <Text as="span" color="gray.500">
+    <Text as="span" color="gray.solid">
       {" "}
       (buff)
     </Text>
@@ -99,7 +99,7 @@ const AugustScepter: FC = () => {
         1,
         <>
           +2-5 turns{" "}
-          <Text as="span" size="xs" color="gray.500">
+          <Text as="span" fontSize="xs" color="gray.solid">
             (spend turns @ the Goatlet)
           </Text>
         </>,
@@ -108,12 +108,12 @@ const AugustScepter: FC = () => {
 
     usefulAugustSkills.push([
       30,
-      <>
+      <Text>
         +7 advs rollover accessory{" "}
-        <Text as="span" color="gray.500">
+        <Text as="span" fontSize="xs" color="gray.solid">
           (melting)
         </Text>
-      </>,
+      </Text>,
     ]);
   }
 
@@ -121,7 +121,7 @@ const AugustScepter: FC = () => {
     questStep("questL11Manor") < 3 && get("manorDrawerCount") >= 21;
   const blastingAddendum =
     manorCheck && !have($item`blasting soda`) ? (
-      <Text as="span" color="gray.500">
+      <Text as="span" color="gray.solid">
         {" "}
         (blasting soda!)
       </Text>
@@ -137,19 +137,19 @@ const AugustScepter: FC = () => {
       31,
       <>
         +100% booze drop wine{" "}
-        <Text as="span" color="gray.500">
+        <Text as="span" color="gray.solid">
           (chateau de vinegar!)
         </Text>
       </>,
     ]);
   }
 
-  usefulAugustSkills.push([7, <>+50% item, +100% meat{buffString}</>]);
+  usefulAugustSkills.push([7, <Text>+50% item, +100% meat{buffString}</Text>]);
   usefulAugustSkills.push([
     2,
     <>
       get{" "}
-      <Text as="span" color="green.500">
+      <Text as="span" color="green.solid">
         Lucky!
       </Text>
     </>,
@@ -158,10 +158,13 @@ const AugustScepter: FC = () => {
   usefulAugustSkills.push([22, "free fight for teeeeeeeeeeeth"]);
 
   if (questStep("questL08Trapper") < 2) {
-    usefulAugustSkills.push([6, <>+10% combat{buffString}</>]);
+    usefulAugustSkills.push([6, <Text>+10% combat{buffString}</Text>]);
   }
   usefulAugustSkills.push([9, "hold hands for a minor sniff"]);
-  usefulAugustSkills.push([10, <>non-free reusable banishes{buffString}</>]);
+  usefulAugustSkills.push([
+    10,
+    <Text>non-free reusable banishes{buffString}</Text>,
+  ]);
 
   const usefulOffhands = have($item`deck of lewd playing cards`);
   const protestorsRemaining = Math.max(
@@ -172,12 +175,12 @@ const AugustScepter: FC = () => {
   if (usefulOffhands && protestorsRemaining > 10) {
     usefulAugustSkills.push([
       13,
-      <>
+      <Text>
         double offhand enchantments{" "}
-        <Text as="span" color="purple.500">
+        <Text as="span" color="purple.solid">
           (sleaze for protestors)
         </Text>
-      </>,
+      </Text>,
     ]);
   }
 
@@ -190,12 +193,12 @@ const AugustScepter: FC = () => {
     if (!have($item`astral pet sweater`)) {
       usefulAugustSkills.push([
         28,
-        <>
+        <Text>
           +10 weight familiar equipment{" "}
-          <Text as="span" size="xs" color="gray.500">
+          <Text as="span" fontSize="xs" color="gray.solid">
             (melting)
           </Text>
-        </>,
+        </Text>,
       ]);
     }
   }
@@ -205,18 +208,18 @@ const AugustScepter: FC = () => {
     .map(([day, reason]) => {
       const skillName = `Aug. ${ordinal(day)}: ${ALL_SKILLS.get(day)?.[0]}`;
       return (
-        <Tr key={day}>
-          <Td px={1} py={0.5}>
+        <Table.Row key={day}>
+          <Table.Cell px={1} py={0.5}>
             {day}
-          </Td>
-          <Td px={1} py={0.5}>
+          </Table.Cell>
+          <Table.Cell px={1} py={0.5}>
             {skillName ? (
               <MainLink href={skillLink(skillName)}>{reason}</MainLink>
             ) : (
               reason
             )}
-          </Td>
-        </Tr>
+          </Table.Cell>
+        </Table.Row>
       );
     });
 
@@ -225,17 +228,17 @@ const AugustScepter: FC = () => {
       <Text fontWeight="bold" textAlign="center">
         Well, you asked for it!
       </Text>
-      <Table size="sm">
-        <Tbody>
+      <Table.Root size="sm">
+        <Table.Body>
           {[...ALL_SKILLS.entries()]
             .sort(([a], [b]) => a - b)
             .map(([skillNumber, [, skillDesc]]) => {
               const lineColor = get(`_aug${skillNumber}Cast`)
-                ? "gray.500"
+                ? "gray.solid"
                 : "black";
               return (
-                <Tr key={skillNumber}>
-                  <Td
+                <Table.Row key={skillNumber}>
+                  <Table.Cell
                     textAlign="center"
                     fontSize="xs"
                     px={1}
@@ -243,15 +246,15 @@ const AugustScepter: FC = () => {
                     color={lineColor}
                   >
                     {skillNumber}
-                  </Td>
-                  <Td fontSize="xs" px={1} py={0} color={lineColor}>
+                  </Table.Cell>
+                  <Table.Cell fontSize="xs" px={1} py={0} color={lineColor}>
                     {skillDesc}
-                  </Td>
-                </Tr>
+                  </Table.Cell>
+                </Table.Row>
               );
             })}
-        </Tbody>
-      </Table>
+        </Table.Body>
+      </Table.Root>
     </>
   );
 
@@ -266,13 +269,13 @@ const AugustScepter: FC = () => {
         get valuable benefits.
       </Line>
       {table.length > 0 && (
-        <Table size="sm" variant="unstyled">
-          <Tbody>{table}</Tbody>
-        </Table>
+        <Table.Root size="sm" unstyled>
+          <Table.Body>{table}</Table.Body>
+        </Table.Root>
       )}
-      <AdviceTooltip
-        label="No, YORICK, show me ALL the skills."
-        text={tooltip}
+      <AdviceTooltipText
+        children="No, YORICK, show me ALL the skills."
+        advice={tooltip}
       />
     </Tile>
   );
diff --git a/src/sections/resources/2023/BookOfFacts.tsx b/src/sections/resources/2023/BookOfFacts.tsx
index a349fb69..26de9ed6 100644
--- a/src/sections/resources/2023/BookOfFacts.tsx
+++ b/src/sections/resources/2023/BookOfFacts.tsx
@@ -48,16 +48,16 @@ const BookOfFacts = () => {
               Appears as a wandering monster in any zone. Try a place with few
               competing monsters{olfactionString}.
               {eagleUsable && (
-                <AdviceTooltipIcon text="Remember, you can phylum-banish with your Patriotic Eagle to make it easier!" />
+                <AdviceTooltipIcon advice="Remember, you can phylum-banish with your Patriotic Eagle to make it easier!" />
               )}
             </Line>
             {eaglePhylumBanished === habitatMonsterPhylum && (
-              <Line color="red.500">
+              <Line color="red.solid">
                 WARNING: {habitatMonsterName}'s phylum is banished!
               </Line>
             )}
             {habitatMonsterBanished && (
-              <Line color="red.500">
+              <Line color="red.solid">
                 WARNING: {habitatMonsterName} is banished!
               </Line>
             )}
diff --git a/src/sections/resources/2023/CandyCaneSwordCane.tsx b/src/sections/resources/2023/CandyCaneSwordCane.tsx
index 70fd0533..8f54e45e 100644
--- a/src/sections/resources/2023/CandyCaneSwordCane.tsx
+++ b/src/sections/resources/2023/CandyCaneSwordCane.tsx
@@ -1,4 +1,4 @@
-import { ListItem, Text, UnorderedList } from "@chakra-ui/react";
+import { List, Text } from "@chakra-ui/react";
 import {
   canAdventure,
   haveEquipped,
@@ -8,7 +8,7 @@ import {
 } from "kolmafia";
 import { $item, $location, $locations, get, have, questStep } from "libram";
 
-import AdviceTooltip from "../../../components/AdviceTooltip";
+import AdviceTooltipText from "../../../components/AdviceTooltipText";
 import Line from "../../../components/Line";
 import MainLink from "../../../components/MainLink";
 import Tile from "../../../components/Tile";
@@ -31,7 +31,7 @@ const CandyCaneSwordCane = () => {
     {
       available: !get("_candyCaneSwordLyle"),
       node: (
-        <ListItem key="lyle">
+        <List.Item key="lyle">
           <MainLink
             href={
               ccscEquipped
@@ -41,7 +41,7 @@ const CandyCaneSwordCane = () => {
           >
             Bonus: Lyle's Monorail Buff (+40% init).
           </MainLink>
-        </ListItem>
+        </List.Item>
       ),
       location: null,
     },
@@ -49,18 +49,18 @@ const CandyCaneSwordCane = () => {
       available:
         !get("candyCaneSwordBlackForest") && questStep("questL11Black") < 2,
       node: (
-        <ListItem key="black">
+        <List.Item key="black">
           Bonus: The Black Forest (+8 exploration).
-        </ListItem>
+        </List.Item>
       ),
       location: $location`The Black Forest`,
     },
     {
       available: !get("candyCaneSwordDailyDungeon") && !get("dailyDungeonDone"),
       node: (
-        <ListItem key="daily">
+        <List.Item key="daily">
           Bonus: Daily Dungeon (+1 fat loot token).
-        </ListItem>
+        </List.Item>
       ),
       location: $location`The Daily Dungeon`,
     },
@@ -69,7 +69,9 @@ const CandyCaneSwordCane = () => {
         !get("candyCaneSwordApartmentBuilding") &&
         get("hiddenApartmentProgress") < 8,
       node: (
-        <ListItem key="apartment">Bonus: Hidden Apartment (+1 Curse).</ListItem>
+        <List.Item key="apartment">
+          Bonus: Hidden Apartment (+1 Curse).
+        </List.Item>
       ),
       location: $location`The Hidden Apartment Building`,
     },
@@ -78,9 +80,9 @@ const CandyCaneSwordCane = () => {
         !get("candyCaneSwordBowlingAlley") &&
         get("hiddenBowlingAlleyProgress") < 7,
       node: (
-        <ListItem key="bowl">
+        <List.Item key="bowl">
           Bonus: Hidden Bowling Alley (+1 free bowl).
-        </ListItem>
+        </List.Item>
       ),
       location: $location`The Hidden Bowling Alley`,
     },
@@ -88,9 +90,9 @@ const CandyCaneSwordCane = () => {
       available:
         !get("candyCaneSwordShore") && get("lastIslandUnlock") < myAscensions(),
       node: (
-        <ListItem key="shore">
+        <List.Item key="shore">
           Alternate: Shore (2 scrips for the price of 1).
-        </ListItem>
+        </List.Item>
       ),
       location: $location`The Shore, Inc. Travel Agency`,
     },
@@ -100,22 +102,22 @@ const CandyCaneSwordCane = () => {
           canAdventure(l),
         ) && questStep("questL12War") < 1,
       node: (
-        <ListItem key="hippy">
+        <List.Item key="hippy">
           Alternate: Hippy Camp (Redirect to the War Start NC).
-        </ListItem>
+        </List.Item>
       ),
       location: $location`Wartime Hippy Camp`,
     },
     {
       available: get("zeppelinProtestors") < 80,
       node: (
-        <ListItem key="zeppelin">
+        <List.Item key="zeppelin">
           Alternate: Zeppelin Protesters{" "}
-          <Text as="span" color="purple.500">
+          <Text as="span" color="purple.solid">
             (double Sleaze damage!)
           </Text>
           .
-        </ListItem>
+        </List.Item>
       ),
       location: $location`A Mob of Zeppelin Protesters`,
     },
@@ -139,28 +141,28 @@ const CandyCaneSwordCane = () => {
       node: haveCcsc && inRun && pathCheck && displayNag && (
         <Tile header="Wear Your Candy" linkedContent={candyCaneSwordCane}>
           <Line>
-            <Text as="span" color="red.500">
+            <Text as="span" color="red.solid">
               You're
             </Text>{" "}
-            <Text as="span" color="green.500">
+            <Text as="span" color="green.solid">
               in a
             </Text>{" "}
-            <Text as="span" color="red.500">
+            <Text as="span" color="red.solid">
               candy
             </Text>{" "}
-            <Text as="span" color="green.500">
+            <Text as="span" color="green.solid">
               cane
             </Text>{" "}
-            <Text as="span" color="red.500">
+            <Text as="span" color="red.solid">
               sword
             </Text>{" "}
-            <Text as="span" color="green.500">
+            <Text as="span" color="green.solid">
               cane
             </Text>{" "}
-            <Text as="span" color="red.500">
+            <Text as="span" color="red.solid">
               noncom
             </Text>{" "}
-            <Text as="span" color="green.500">
+            <Text as="span" color="green.solid">
               zone!
             </Text>
           </Line>
@@ -188,14 +190,12 @@ const CandyCaneSwordCane = () => {
         linkedContent={candyCaneSwordCane}
       >
         <Line>Ensure your CCSC is equipped for useful NCs:</Line>
-        <UnorderedList>
-          {availableOptions.map(({ node }) => node)}
-        </UnorderedList>
+        <List.Root>{availableOptions.map(({ node }) => node)}</List.Root>
         {!ccscEquipped && (
           <Line>
-            <AdviceTooltip
-              text="This is important!"
-              label="Equip the Candy Cane Sword Cane!"
+            <AdviceTooltipText
+              advice="This is important!"
+              children="Equip the Candy Cane Sword Cane!"
             />
           </Line>
         )}
diff --git a/src/sections/resources/2023/CinchoDeMayo.tsx b/src/sections/resources/2023/CinchoDeMayo.tsx
index 9ad42f40..d825c4bf 100644
--- a/src/sections/resources/2023/CinchoDeMayo.tsx
+++ b/src/sections/resources/2023/CinchoDeMayo.tsx
@@ -1,4 +1,4 @@
-import { ListItem, Text, UnorderedList } from "@chakra-ui/react";
+import { List, Text } from "@chakra-ui/react";
 import { getDwelling, myAscensions, totalFreeRests } from "kolmafia";
 import {
   $item,
@@ -79,7 +79,7 @@ const CinchoDeMayo = () => {
       </Line>
       {totalCinch > 60 && (
         <Line>
-          <Text as="b" color="purple.500">
+          <Text as="b" color="purple.solid">
             Fiesta Exit (60%):
           </Text>{" "}
           Force a NC on your next adventure. You have{" "}
@@ -87,26 +87,26 @@ const CinchoDeMayo = () => {
           {totalCinch % 60}% cinch left over.
         </Line>
       )}
-      <UnorderedList>
+      <List.Root>
         {totalCinch > 25 && (
-          <ListItem>
+          <List.Item>
             <Text as="b">Party Soundtrack (25%):</Text> 30 advs of +5 fam
             weight.
-          </ListItem>
+          </List.Item>
         )}
         {totalCinch > 5 && (
           <>
-            <ListItem>
+            <List.Item>
               <Text as="b">Confetti Extravaganza (5%):</Text> 2x stats,
               in-combat
-            </ListItem>
-            <ListItem>
+            </List.Item>
+            <List.Item>
               <Text as="b">Projectile Piñata (5%):</Text> complex candy,
               in-combat
-            </ListItem>
+            </List.Item>
           </>
         )}
-      </UnorderedList>
+      </List.Root>
       <Line>
         You have {totalCinch}% more cinch available, accounting for your{" "}
         {plural(freeRestsRemaining, "remaining free rest")}.
diff --git a/src/sections/resources/2023/ClosedCircuitPayPhone.tsx b/src/sections/resources/2023/ClosedCircuitPayPhone.tsx
index 8887fa87..d6a1ffff 100644
--- a/src/sections/resources/2023/ClosedCircuitPayPhone.tsx
+++ b/src/sections/resources/2023/ClosedCircuitPayPhone.tsx
@@ -1,8 +1,8 @@
-import { Text, UnorderedList } from "@chakra-ui/react";
+import { List, Text } from "@chakra-ui/react";
 import { availableAmount, canAdventure, haveEffect } from "kolmafia";
 import { $effect, $item, $location, get } from "libram";
 
-import AdviceTooltip from "../../../components/AdviceTooltip";
+import AdviceTooltipText from "../../../components/AdviceTooltipText";
 import Line from "../../../components/Line";
 import Tile from "../../../components/Tile";
 import { NagPriority } from "../../../contexts/NagContext";
@@ -54,17 +54,17 @@ const ClosedCircuitPayPhone = () => {
 
   const getShadowBrickLocationTooltip = () => {
     return (
-      <UnorderedList>
+      <List.Root>
         {shadowBrickLocations.map((location, index) => (
           <Text
             key={index}
-            color={location.canAccess ? "black" : "gray.500"}
+            color={location.canAccess ? "fg.muted" : "fg.subtle"}
             fontWeight="bold"
           >
             {location.zoneName} {location.extraItems}
           </Text>
         ))}
-      </UnorderedList>
+      </List.Root>
     );
   };
 
@@ -112,23 +112,23 @@ const ClosedCircuitPayPhone = () => {
       <Tile linkedContent={closedCircuitPayPhone}>
         {shadowLodestones > 0 && (
           <Line>
-            <Text as="span" color="purple.500">
+            <Text as="span" color="purple.solid">
               Have {plural(shadowLodestones, "shadow lodestone")}.
             </Text>
           </Line>
         )}
         <Line>{riftAdvsUntilNC} encounters until NC/boss.</Line>
         {!calledRufusToday && (
-          <Line color="blue.500">Haven't called Rufus yet today.</Line>
+          <Line color="blue.solid">Haven't called Rufus yet today.</Line>
         )}
         {calledRufusToday && (
           <Line>
             Optionally call Rufus again for another (turn-taking) quest.
           </Line>
         )}
-        <AdviceTooltip
-          text={getShadowBrickLocationTooltip()}
-          label="Shadow Brick locations"
+        <AdviceTooltipText
+          advice={getShadowBrickLocationTooltip()}
+          children="Shadow Brick locations"
         />
       </Tile>
 
@@ -138,7 +138,7 @@ const ClosedCircuitPayPhone = () => {
           id="shadow-rift-active-free-fights"
           imageUrl="/images/adventureimages/voidguy.gif"
         >
-          <Line color="purple.500">Shadow Rift fights are free!</Line>
+          <Line color="purple.solid">Shadow Rift fights are free!</Line>
           <Line>{riftAdvsUntilNC} encounters until NC/boss.</Line>
           <Line>(don't use other free kills in there)</Line>
         </Tile>
diff --git a/src/sections/resources/2023/CursedMonkeyPaw.tsx b/src/sections/resources/2023/CursedMonkeyPaw.tsx
index 5f43b7f6..abcb4772 100644
--- a/src/sections/resources/2023/CursedMonkeyPaw.tsx
+++ b/src/sections/resources/2023/CursedMonkeyPaw.tsx
@@ -1,4 +1,4 @@
-import { ListItem, Text, UnorderedList } from "@chakra-ui/react";
+import { List, Text } from "@chakra-ui/react";
 import {
   availableAmount,
   canAdventure,
@@ -122,7 +122,7 @@ function inRunWishes() {
     {
       target: $effect`Dirty Pear`,
       additionalDescription: (
-        <Text as="span" color="purple.500">
+        <Text as="span" color="purple.solid">
           double sleaze damage
         </Text>
       ),
@@ -132,7 +132,7 @@ function inRunWishes() {
     {
       target: $effect`Painted-On Bikini`,
       additionalDescription: (
-        <Text as="span" color="purple.500">
+        <Text as="span" color="purple.solid">
           +100 sleaze damage
         </Text>
       ),
@@ -199,7 +199,7 @@ function inRunWishes() {
     {
       target: $effect`Staying Frosty`,
       additionalDescription: (
-        <Text as="span" color="blue.500">
+        <Text as="span" color="blue.solid">
           cold damage race
         </Text>
       ),
@@ -210,7 +210,7 @@ function inRunWishes() {
     {
       target: $effect`Dragged Through the Coals`,
       additionalDescription: (
-        <Text as="span" color="red.500">
+        <Text as="span" color="red.solid">
           hot damage race
         </Text>
       ),
@@ -221,7 +221,7 @@ function inRunWishes() {
     {
       target: $effect`Bored Stiff`,
       additionalDescription: (
-        <Text as="span" color="gray.500">
+        <Text as="span" color="gray.solid">
           spooky damage race
         </Text>
       ),
@@ -232,7 +232,7 @@ function inRunWishes() {
     {
       target: $effect`Sewer-Drenched`,
       additionalDescription: (
-        <Text as="span" color="green.500">
+        <Text as="span" color="green.solid">
           stench damage race
         </Text>
       ),
@@ -243,7 +243,7 @@ function inRunWishes() {
     {
       target: $effect`Fifty Ways to Bereave Your Lover`,
       additionalDescription: (
-        <Text as="span" color="purple.500">
+        <Text as="span" color="purple.solid">
           sleaze damage race
         </Text>
       ),
@@ -308,13 +308,13 @@ function showWish({
   currentlyAccessible,
   additionalDescription,
 }: MonkeyWish) {
-  const color = currentlyAccessible ? "black" : "gray.500";
+  const color = currentlyAccessible ? "black" : "gray.solid";
 
   return (
-    <ListItem color={color} key={target.identifierString}>
+    <List.Item color={color} key={target.identifierString}>
       {target.name}
       {additionalDescription && <>: {additionalDescription}</>}
-    </ListItem>
+    </List.Item>
   );
 }
 
@@ -361,20 +361,20 @@ const CursedMonkeysPaw = () => {
       {options.length > 0 && (
         <>
           <Line fontWeight="bold">Possible wishes:</Line>
-          <UnorderedList>{options}</UnorderedList>
+          <List.Root>{options}</List.Root>
         </>
       )}
       <Line fontWeight="bold">Monkey skills:</Line>
-      <UnorderedList>
+      <List.Root>
         {monkeySkills().map((skill) => (
-          <ListItem key={skill.fingerCount}>
+          <List.Item key={skill.fingerCount}>
             <Text as="b">
               {plural(skill.fingerCount, "finger", "fingers")}:
             </Text>{" "}
             {skill.description}
-          </ListItem>
+          </List.Item>
         ))}
-      </UnorderedList>
+      </List.Root>
       {monkeyWishesLeft === 5 && (
         <>
           <Line
diff --git a/src/sections/resources/2023/MrStore2002Catalog.tsx b/src/sections/resources/2023/MrStore2002Catalog.tsx
index 6030c903..03022eab 100644
--- a/src/sections/resources/2023/MrStore2002Catalog.tsx
+++ b/src/sections/resources/2023/MrStore2002Catalog.tsx
@@ -1,8 +1,8 @@
-import { ListItem, Text, UnorderedList } from "@chakra-ui/react";
+import { List, Text } from "@chakra-ui/react";
 import { availableAmount, myHash, totalTurnsPlayed } from "kolmafia";
 import { $item, get, getTodaysHolidayWanderers, have } from "libram";
 
-import AdviceTooltip from "../../../components/AdviceTooltip";
+import AdviceTooltipText from "../../../components/AdviceTooltipText";
 import Line from "../../../components/Line";
 import Tile from "../../../components/Tile";
 import { haveUnrestricted } from "../../../util/available";
@@ -70,34 +70,34 @@ const MrStore2002Catalog = () => {
       {mr2002Credits > 0 && (
         <>
           <Line>Spend credits on prehistoric IotMs!</Line>
-          <UnorderedList>
+          <List.Root>
             {!have(flashLiquidizerUltraDousingAccessory) && (
-              <ListItem>
+              <List.Item>
                 Flash Liquidizer Ultra Dousing Accessory: +3 BLARTpockets
-              </ListItem>
+              </List.Item>
             )}
             {!have(proSkateboard) && (
-              <ListItem>Pro skateboard: +1 duplicate</ListItem>
+              <List.Item>Pro skateboard: +1 duplicate</List.Item>
             )}
             {!have($item`Letter from Carrie Bradshaw`) &&
               !have($item`red-soled high heels`) && (
-                <ListItem>
+                <List.Item>
                   Letter from Carrie Bradshaw: +50% booze drop accessory
-                </ListItem>
+                </List.Item>
               )}
             {availableAmount(loathingIdolMicrophone) < 69420 && (
-              <ListItem>
+              <List.Item>
                 Loathing Idol Microphone: +100% init, +50% items, +5% combat; 4
                 uses
-              </ListItem>
+              </List.Item>
             )}
             {availableAmount(spookyVHSTape) < 69420 && (
-              <ListItem>
+              <List.Item>
                 Spooky VHS Tape: wandering freekill YR of the monster you used
                 it on; try GROPs!
-              </ListItem>
+              </List.Item>
             )}
-          </UnorderedList>
+          </List.Root>
         </>
       )}
       {availableVHSes > 0 && haveUnrestricted(spookyVHSTape) && (
@@ -106,11 +106,11 @@ const MrStore2002Catalog = () => {
             Have {availableVHSes} VHS tapes. Use to free-copy into delay &
             guarantee drops from:
           </Line>
-          <UnorderedList>
+          <List.Root>
             {vhsOptions.map((option, index) => (
-              <ListItem key={index}>{option}</ListItem>
+              <List.Item key={index}>{option}</List.Item>
             ))}
-          </UnorderedList>
+          </List.Root>
         </>
       )}
       {have(loathingIdolMicrophone) && (
@@ -134,23 +134,23 @@ const MrStore2002Catalog = () => {
       {imageName && (
         <Line>
           {nextVHSTurn <= totalTurnsPlayed() ? (
-            <Text as="span" color="red.500" fontWeight="bold">
+            <Text as="span" color="red.solid" fontWeight="bold">
               Spooky VHS: {imageName.name} now
             </Text>
           ) : nextVHSTurn - 1 === totalTurnsPlayed() ? (
-            <Text as="span" color="blue.500">
+            <Text as="span" color="blue.solid">
               Spooky VHS: {imageName.name} in 1 more adv
             </Text>
           ) : (
-            <AdviceTooltip
-              text={`${nextVHSTimer} adventures until your free fight YR VHS fight.`}
-              label={`Spooky VHS: ${imageName}`}
+            <AdviceTooltipText
+              advice={`${nextVHSTimer} adventures until your free fight YR VHS fight.`}
+              children={`Spooky VHS: ${imageName}`}
             />
           )}
         </Line>
       )}
       {warnings.map((warning, index) => (
-        <Line key={index} color="red.500">
+        <Line key={index} color="red.solid">
           ➾ {warning}
         </Line>
       ))}
diff --git a/src/sections/resources/2023/PatrioticEagle.tsx b/src/sections/resources/2023/PatrioticEagle.tsx
index 3bd53e89..c99ee4ef 100644
--- a/src/sections/resources/2023/PatrioticEagle.tsx
+++ b/src/sections/resources/2023/PatrioticEagle.tsx
@@ -1,4 +1,4 @@
-import { Heading, ListItem, Text, UnorderedList } from "@chakra-ui/react";
+import { Heading, List, Text } from "@chakra-ui/react";
 import {
   canAdventure,
   canEquip,
@@ -93,10 +93,10 @@ const generatePhylumOptions = (
   );
   return (
     available.length > 0 && (
-      <ListItem key={phylum}>
+      <List.Item key={phylum}>
         <Text as="b">{phylum}:</Text>{" "}
         {available.map(([name]) => name).join(", ")}
-      </ListItem>
+      </List.Item>
     )
   );
 };
@@ -239,7 +239,7 @@ const PatrioticEagle = () => {
             {possibleAppearanceLocations.join(", ")}.
           </Line>
           {rwbMonster?.phylum === eaglePhylumBanished && (
-            <Line color="red.500">
+            <Line color="red.solid">
               <Text as="b">WARNING!</Text> This monster will not appear, it's
               banished by your eagle screech!
             </Line>
@@ -256,13 +256,13 @@ const PatrioticEagle = () => {
                 Patriotic Eagle can screech and banish an entire phylum!{" "}
                 {screechRecharge === 0 && (
                   <>
-                    <Text as="span" color="red.500">
+                    <Text as="span" color="red.solid">
                       SCREEEE
                     </Text>
-                    <Text as="span" color="gray.500">
+                    <Text as="span" color="gray.solid">
                       EEEEE
                     </Text>
-                    <Text as="span" color="blue.500">
+                    <Text as="span" color="blue.solid">
                       EEEEE!
                     </Text>
                   </>
@@ -270,19 +270,19 @@ const PatrioticEagle = () => {
               </>
             )}
           </Heading>
-          <UnorderedList>{phylumOptions}</UnorderedList>
+          <List.Root>{phylumOptions}</List.Root>
         </>
       )}
       {showPledge && (
         <>
           <Line>
-            <Text as="span" color="red.500">
+            <Text as="span" color="red.solid">
               Pledge
             </Text>{" "}
-            <Text as="span" color="gray.500">
+            <Text as="span" color="gray.solid">
               allegiance
             </Text>{" "}
-            <Text as="span" color="blue.500">
+            <Text as="span" color="blue.solid">
               to a zone!
             </Text>
           </Line>
diff --git a/src/sections/resources/2023/RockGarden.tsx b/src/sections/resources/2023/RockGarden.tsx
index c16c4b15..42cee679 100644
--- a/src/sections/resources/2023/RockGarden.tsx
+++ b/src/sections/resources/2023/RockGarden.tsx
@@ -1,4 +1,4 @@
-import { ListItem, Text, UnorderedList } from "@chakra-ui/react";
+import { List, Text } from "@chakra-ui/react";
 import { availableAmount, getCampground } from "kolmafia";
 import { $item, get, have } from "libram";
 
@@ -72,17 +72,17 @@ const RockGarden = () => {
         (availableMilestones > 0 && desertProgress < 100)) && (
         <>
           <Line>Inventory:</Line>
-          <UnorderedList>
+          <List.Root>
             {availableGravels > 0 && (
-              <ListItem>{gravelMessage(availableGravels)}</ListItem>
+              <List.Item>{gravelMessage(availableGravels)}</List.Item>
             )}
             {availableWhetStones && (
-              <ListItem>{whetStoneMessage(availableWhetStones)}</ListItem>
+              <List.Item>{whetStoneMessage(availableWhetStones)}</List.Item>
             )}
             {availableMilestones && desertProgress < 100 && (
-              <ListItem>{milestoneMessage(availableMilestones)}</ListItem>
+              <List.Item>{milestoneMessage(availableMilestones)}</List.Item>
             )}
-          </UnorderedList>
+          </List.Root>
         </>
       )}
       {(gardenGravels > 0 ||
@@ -90,17 +90,17 @@ const RockGarden = () => {
         (gardenMilestones > 0 && desertProgress < 100)) && (
         <>
           <Line>Harvest from your garden:</Line>
-          <UnorderedList>
+          <List.Root>
             {gardenGravels > 0 && (
-              <ListItem>{gravelMessage(gardenGravels)}</ListItem>
+              <List.Item>{gravelMessage(gardenGravels)}</List.Item>
             )}
             {gardenWhetstones > 0 && (
-              <ListItem>{whetStoneMessage(gardenWhetstones)}</ListItem>
+              <List.Item>{whetStoneMessage(gardenWhetstones)}</List.Item>
             )}
             {gardenMilestones > 0 && desertProgress < 100 && (
-              <ListItem>{milestoneMessage(gardenMilestones)}</ListItem>
+              <List.Item>{milestoneMessage(gardenMilestones)}</List.Item>
             )}
-          </UnorderedList>
+          </List.Root>
         </>
       )}
     </Tile>
diff --git a/src/sections/resources/2023/SITCourseCertificate.tsx b/src/sections/resources/2023/SITCourseCertificate.tsx
index 5134a0ca..3b3d3596 100644
--- a/src/sections/resources/2023/SITCourseCertificate.tsx
+++ b/src/sections/resources/2023/SITCourseCertificate.tsx
@@ -66,7 +66,9 @@ const SITCertificate = () => {
       node: haveSit && currentlyInRun && !sitChanged && (
         <Tile header="S.I.T. Course Enrollment" linkedContent={sitCertificate}>
           {!hasAnySkill && (
-            <Line color="red.500">{randomPhrase} Take your S.I.T. course!</Line>
+            <Line color="red.solid">
+              {randomPhrase} Take your S.I.T. course!
+            </Line>
           )}
           {hasAnySkill && (
             <>
diff --git a/src/sections/resources/2024/AprilingBandHelmet.tsx b/src/sections/resources/2024/AprilingBandHelmet.tsx
index 0b688812..b14c5990 100644
--- a/src/sections/resources/2024/AprilingBandHelmet.tsx
+++ b/src/sections/resources/2024/AprilingBandHelmet.tsx
@@ -1,4 +1,4 @@
-import { ListItem, Text, UnorderedList } from "@chakra-ui/react";
+import { List, Text } from "@chakra-ui/react";
 import { myLocation, totalTurnsPlayed } from "kolmafia";
 import { $effect, $item, $location, get, have } from "libram";
 
@@ -76,17 +76,17 @@ const AprilingBandHelmet = () => {
           <Line href={inventoryActionLink("apriling")}>
             You can change your tune!
           </Line>
-          <UnorderedList>
-            <ListItem color={havePatrolBeat ? "blue" : undefined}>
+          <List.Root>
+            <List.Item color={havePatrolBeat ? "blue" : undefined}>
               -10% Combat Frequency
-            </ListItem>
-            <ListItem color={haveBattleCadence ? "blue" : undefined}>
+            </List.Item>
+            <List.Item color={haveBattleCadence ? "blue" : undefined}>
               +10% Combat Frequency
-            </ListItem>
-            <ListItem color={haveCelebrationBop ? "blue" : undefined}>
+            </List.Item>
+            <List.Item color={haveCelebrationBop ? "blue" : undefined}>
               +25% booze, +50% food, +100% candy
-            </ListItem>
-          </UnorderedList>
+            </List.Item>
+          </List.Root>
         </>
       ) : (
         <Line>
diff --git a/src/sections/resources/2024/BatWings.tsx b/src/sections/resources/2024/BatWings.tsx
index 672d50a2..285bfb89 100644
--- a/src/sections/resources/2024/BatWings.tsx
+++ b/src/sections/resources/2024/BatWings.tsx
@@ -1,4 +1,4 @@
-import { ListItem, UnorderedList } from "@chakra-ui/react";
+import { List } from "@chakra-ui/react";
 import { canAdventure, haveEquipped } from "kolmafia";
 import { $item, $location, get } from "libram";
 import { FC } from "react";
@@ -45,13 +45,13 @@ const BatWings: FC = () => {
   return (
     <Tile linkedContent={batWings}>
       {batWingsEquipped && (
-        <Line color="purple.500">Nanananananananana Battyman!</Line>
+        <Line color="purple.solid">Nanananananananana Battyman!</Line>
       )}
       {!batWingsEquipped &&
         !canAdventure(
           $location`The Castle in the Clouds in the Sky (Basement)`,
         ) && (
-          <Line color="blue.500">
+          <Line color="blue.solid">
             Equip your bat wings. This saves turns in the Airship!
           </Line>
         )}
@@ -72,13 +72,13 @@ const BatWings: FC = () => {
               Visit the Bat Hole zones{" "}
               {!batWingsEquipped && "with bat wings equipped "}to get:
             </Line>
-            <UnorderedList>
+            <List.Root>
               {availableZones.map(({ location, reward }) => (
-                <ListItem key={location.id}>
+                <List.Item key={location.id}>
                   {location.identifierString}: {reward.name}
-                </ListItem>
+                </List.Item>
               ))}
-            </UnorderedList>
+            </List.Root>
           </>
         )}
     </Tile>
diff --git a/src/sections/resources/2024/EverfullDartHolster.tsx b/src/sections/resources/2024/EverfullDartHolster.tsx
index 986f0b14..7f872147 100644
--- a/src/sections/resources/2024/EverfullDartHolster.tsx
+++ b/src/sections/resources/2024/EverfullDartHolster.tsx
@@ -35,19 +35,19 @@ const EverfullDartHolster = () => {
           linkedContent={everfullDartHolster}
         >
           <Line>
-            <Text as="span" color="red.500">
+            <Text as="span" color="red.solid">
               Shoot a bullseye! ({dartCooldown} turns ELR)
             </Text>
           </Line>
           {!holsterEquipped ? (
             <Line>
-              <Text as="span" color="red.500">
+              <Text as="span" color="red.solid">
                 Equip the dart holster first.
               </Text>
             </Line>
           ) : (
             <Line>
-              <Text as="span" color="blue.500">
+              <Text as="span" color="blue.solid">
                 Dart holster equipped.
               </Text>
             </Line>
@@ -64,21 +64,21 @@ const EverfullDartHolster = () => {
     <Tile linkedContent={everfullDartHolster}>
       <Line>Current dart skill: {dartSkill}.</Line>
       <Line>
-        <Text as="span" color="blue.500">
+        <Text as="span" color="blue.solid">
           {dartsNeededForNextPerk}
         </Text>{" "}
         darts needed for next Perk.
       </Line>
       {!holsterEquipped && (
         <Line>
-          <Text as="span" color="red.500">
+          <Text as="span" color="red.solid">
             Equip the dart holster first.
           </Text>
         </Line>
       )}
       {holsterEquipped && (
         <Line>
-          <Text as="span" color="blue.500">
+          <Text as="span" color="blue.solid">
             Dart holster equipped.
           </Text>
         </Line>
diff --git a/src/sections/resources/2024/MayamCalendar.tsx b/src/sections/resources/2024/MayamCalendar.tsx
index f7deced5..bf12b12d 100644
--- a/src/sections/resources/2024/MayamCalendar.tsx
+++ b/src/sections/resources/2024/MayamCalendar.tsx
@@ -1,4 +1,4 @@
-import { ListItem, OrderedList, Text, UnorderedList } from "@chakra-ui/react";
+import { List, Text } from "@chakra-ui/react";
 import { canAdventure, myAscensions, myLevel } from "kolmafia";
 import { $effect, $item, $location, get, have } from "libram";
 import { FC } from "react";
@@ -148,10 +148,10 @@ const MayamCalendar: FC = () => {
   const ringDescriptions = [1, 2, 3, 4].map((ring) => {
     const ringSymbols = unusedSymbols.filter((symbol) => symbol.ring === ring);
     return (
-      <ListItem key={ring}>
+      <List.Item key={ring}>
         <Text as="b">{`${ring}${["st", "nd", "rd", "th"][ring - 1]} ring:`}</Text>{" "}
         {ringSymbols.map((symbol) => symbol.friendlyName).join(", ")}
-      </ListItem>
+      </List.Item>
     );
   });
 
@@ -183,17 +183,17 @@ const MayamCalendar: FC = () => {
       imageUrl="/images/itemimages/yamcal.gif"
       linkedContent={mayamCalendar}
     >
-      <OrderedList>{ringDescriptions}</OrderedList>
+      <List.Root as="ol">{ringDescriptions}</List.Root>
       {availableResonances.length > 0 && (
         <Line fontWeight="bold">Cool Mayam combos!</Line>
       )}
-      <UnorderedList>
+      <List.Root>
         {availableResonances.map((resonance, index) => (
-          <ListItem key={index}>
+          <List.Item key={index}>
             <Text as="b">{resonance.name}:</Text> {resonance.combo.join(" + ")}
-          </ListItem>
+          </List.Item>
         ))}
-      </UnorderedList>
+      </List.Root>
       {templeResetAvailable && (
         <Line
           fontWeight="bold"
diff --git a/src/sections/resources/2024/MiniKiwi.tsx b/src/sections/resources/2024/MiniKiwi.tsx
index 7a3ce78e..0665dd77 100644
--- a/src/sections/resources/2024/MiniKiwi.tsx
+++ b/src/sections/resources/2024/MiniKiwi.tsx
@@ -6,7 +6,7 @@ import {
 } from "kolmafia";
 import { $familiar, $item, $path, get, have } from "libram";
 
-import AdviceTooltip from "../../../components/AdviceTooltip";
+import AdviceTooltipText from "../../../components/AdviceTooltipText";
 import Line from "../../../components/Line";
 import Tile from "../../../components/Tile";
 import { haveUnrestricted } from "../../../util/available";
@@ -45,9 +45,9 @@ const MiniKiwi = () => {
     >
       <Line>
         At {Math.floor(kiwiWeight)} weight, you have a{" "}
-        <AdviceTooltip
-          text="Chance of getting a mini-kiwi each fight"
-          label={`${kiwiChance.toFixed(1)}%`}
+        <AdviceTooltipText
+          advice="Chance of getting a mini-kiwi each fight"
+          children={`${kiwiChance.toFixed(1)}%`}
         />{" "}
         chance of a mini-kiwi each fight.
       </Line>
diff --git a/src/sections/resources/2024/RomanCandelabra.tsx b/src/sections/resources/2024/RomanCandelabra.tsx
index 256a0ab2..9ec31ad5 100644
--- a/src/sections/resources/2024/RomanCandelabra.tsx
+++ b/src/sections/resources/2024/RomanCandelabra.tsx
@@ -28,11 +28,11 @@ const RomanCandelabra = () => {
         <Tile linkedContent={romanCandelabra} id="roman-candelabra-nag">
           {!haveELG && !haveSpringShoes && (
             <>
-              <Line color="green.500">Green candle runaway!</Line>
+              <Line color="green.solid">Green candle runaway!</Line>
               {candelabraEquipped ? (
-                <Line color="green.500">Candelabra equipped.</Line>
+                <Line color="green.solid">Candelabra equipped.</Line>
               ) : (
-                <Line color="red.500">Equip the Roman Candelabra first.</Line>
+                <Line color="red.solid">Equip the Roman Candelabra first.</Line>
               )}
             </>
           )}
@@ -40,11 +40,11 @@ const RomanCandelabra = () => {
             <>
               <Line>Roman Candelabra monster chain ready.</Line>
               {candelabraEquipped ? (
-                <Line color="purple.500">
+                <Line color="purple.solid">
                   Candelabra equipped, blow your purple candle!
                 </Line>
               ) : (
-                <Line color="red.500">
+                <Line color="red.solid">
                   Equip the Roman Candelabra, for your purple ray.
                 </Line>
               )}
diff --git a/src/sections/resources/2024/SeptEmberCenser.tsx b/src/sections/resources/2024/SeptEmberCenser.tsx
index 10b2516a..6e4e66e4 100644
--- a/src/sections/resources/2024/SeptEmberCenser.tsx
+++ b/src/sections/resources/2024/SeptEmberCenser.tsx
@@ -1,4 +1,4 @@
-import { ListItem, Text, UnorderedList } from "@chakra-ui/react";
+import { List, Text } from "@chakra-ui/react";
 import { availableAmount, myPrimestat, numericModifier } from "kolmafia";
 import { $item, get, have } from "libram";
 
@@ -43,33 +43,33 @@ const SeptEmberCenser = () => {
         <>
           <Line>
             Have{" "}
-            <Text as="span" color="red.500" fontWeight="bold">
+            <Text as="span" color="red.solid" fontWeight="bold">
               {septEmbers}
             </Text>{" "}
             Sept-Embers to make stuff with!
           </Line>
-          <UnorderedList>
-            <ListItem>
+          <List.Root>
+            <List.Item>
               1 embers: +5 cold res accessory (you have {bembershootCount}).
-            </ListItem>
-            <ListItem>
+            </List.Item>
+            <List.Item>
               2 embers: mouthwash for{" "}
-              <Text as="span" color="blue.500">
+              <Text as="span" color="blue.solid">
                 {mainstatGain}
               </Text>{" "}
               mainstat (you have{" "}
-              <Text as="span" color="red.500">
+              <Text as="span" color="red.solid">
                 {mouthwashCount}
               </Text>
               ).
-            </ListItem>
+            </List.Item>
             {!have(structuralEmber) && (
-              <ListItem>4 embers: +5/5 bridge parts (1/day).</ListItem>
+              <List.Item>4 embers: +5/5 bridge parts (1/day).</List.Item>
             )}
             {!hulkFought && !have(miniEmberingHulk) && (
-              <ListItem>6 embers: embering hulk (1/day).</ListItem>
+              <List.Item>6 embers: embering hulk (1/day).</List.Item>
             )}
-          </UnorderedList>
+          </List.Root>
         </>
       )}
       {!structureUsed && have(structuralEmber) && (
diff --git a/src/sections/resources/2024/SpringShoes.tsx b/src/sections/resources/2024/SpringShoes.tsx
index 63370a8b..5932497b 100644
--- a/src/sections/resources/2024/SpringShoes.tsx
+++ b/src/sections/resources/2024/SpringShoes.tsx
@@ -30,14 +30,14 @@ const SpringShoes = () => {
           linkedContent={springShoes}
         >
           <Line>
-            <Text as="span" color="green.500" fontWeight="bold">
+            <Text as="span" color="green.solid">
               Free-run away from your problems with the{" "}
               <Text as="b">Spring Away</Text> skill!
             </Text>
           </Line>
           {!haveShoesEquipped && (
             <Line>
-              <Text as="span" color="red.500">
+              <Text as="span" color="red.solid">
                 Equip the spring shoes first.
               </Text>
             </Line>
@@ -54,7 +54,7 @@ const SpringShoes = () => {
     <Tile linkedContent={springShoes}>
       <Line>Spring Kick: All day banish, doesn't end combat.</Line>
       {!haveShoesEquipped && (
-        <Line color="red">Equip the spring shoes first.</Line>
+        <Line color="red.solid">Equip the spring shoes first.</Line>
       )}
     </Tile>
   );
diff --git a/src/sections/resources/path/AvantGuard.tsx b/src/sections/resources/path/AvantGuard.tsx
index e581d1c4..2b985ad2 100644
--- a/src/sections/resources/path/AvantGuard.tsx
+++ b/src/sections/resources/path/AvantGuard.tsx
@@ -1,4 +1,4 @@
-import { ListItem, UnorderedList } from "@chakra-ui/react";
+import { List } from "@chakra-ui/react";
 import { Monster, myFamiliar, myPath } from "kolmafia";
 import {
   $familiar,
@@ -93,11 +93,11 @@ const AvantGuard: FC = () => {
               Your bodyguard is ready to talk to you.
               {bodyguardOut && " Take them with you."} Recommended chats:
             </Line>
-            <UnorderedList size="xs">
+            <List.Root fontSize="xs">
               {recommended.map((monster) => (
-                <ListItem key={monster.id}>{monster.name}</ListItem>
+                <List.Item key={monster.id}>{monster.name}</List.Item>
               ))}
-            </UnorderedList>
+            </List.Root>
           </Tile>
         ) : monster ? (
           <Tile
diff --git a/src/sections/resources/skill/Numberology.tsx b/src/sections/resources/skill/Numberology.tsx
index 6ac36d1b..73e573e0 100644
--- a/src/sections/resources/skill/Numberology.tsx
+++ b/src/sections/resources/skill/Numberology.tsx
@@ -1,4 +1,4 @@
-import { ListItem, Text, UnorderedList } from "@chakra-ui/react";
+import { List, Text } from "@chakra-ui/react";
 import {
   haveOutfit,
   myAdventures,
@@ -141,9 +141,9 @@ const Numberology = () => {
       imageUrl="/images/itemimages/abacus.gif"
     >
       <Line>Enter these values to cast Calculate the Universe:</Line>
-      <UnorderedList>
+      <List.Root>
         {desiredDigits.map(({ digit, reason }) => (
-          <ListItem key={digit}>
+          <List.Item key={digit}>
             {outputs.has(digit) ? (
               <>
                 Enter <Text as="b">{outputs.get(digit)}</Text> for {digit} ={" "}
@@ -154,9 +154,9 @@ const Numberology = () => {
             ) : (
               `Cannot currently calculate for ${reason}.`
             )}
-          </ListItem>
+          </List.Item>
         ))}
-      </UnorderedList>
+      </List.Root>
     </Tile>
   );
 };
diff --git a/src/theme.ts b/src/theme.ts
new file mode 100644
index 00000000..4d3b8372
--- /dev/null
+++ b/src/theme.ts
@@ -0,0 +1,52 @@
+import {
+  createSystem,
+  defaultConfig,
+  defineConfig,
+  defineRecipe,
+} from "@chakra-ui/react";
+
+const buttonRecipe = defineRecipe({
+  compoundVariants: [
+    {
+      colorPalette: "gray",
+      variant: "solid",
+      css: {
+        bgColor: "gray.500",
+        _hover: {
+          bgColor: "gray.700",
+        },
+        _dark: {
+          _hover: {
+            bgColor: "gray.300",
+          },
+        },
+      },
+    },
+  ],
+});
+
+const config = defineConfig({
+  globalCss: {
+    html: {
+      lineHeight: "moderate",
+    },
+  },
+  theme: {
+    tokens: {
+      lineHeights: {
+        none: { value: 1 },
+        shorter: { value: 1.05 },
+        short: { value: 1.1 },
+        moderate: { value: 1.15 },
+        default: { value: 1.15 },
+        tall: { value: 1.25 },
+        taller: { value: 1.5 },
+      },
+    },
+    recipes: {
+      button: buttonRecipe,
+    },
+  },
+});
+
+export const system = createSystem(defaultConfig, config);
diff --git a/yarn.lock b/yarn.lock
index 75066b08..a56394c8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15,6 +15,67 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ark-ui/react@npm:4.4.3":
+  version: 4.4.3
+  resolution: "@ark-ui/react@npm:4.4.3"
+  dependencies:
+    "@internationalized/date": "npm:3.5.6"
+    "@zag-js/accordion": "npm:0.77.1"
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/auto-resize": "npm:0.77.1"
+    "@zag-js/avatar": "npm:0.77.1"
+    "@zag-js/carousel": "npm:0.77.1"
+    "@zag-js/checkbox": "npm:0.77.1"
+    "@zag-js/clipboard": "npm:0.77.1"
+    "@zag-js/collapsible": "npm:0.77.1"
+    "@zag-js/collection": "npm:0.77.1"
+    "@zag-js/color-picker": "npm:0.77.1"
+    "@zag-js/color-utils": "npm:0.77.1"
+    "@zag-js/combobox": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/date-picker": "npm:0.77.1"
+    "@zag-js/date-utils": "npm:0.77.1"
+    "@zag-js/dialog": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/editable": "npm:0.77.1"
+    "@zag-js/file-upload": "npm:0.77.1"
+    "@zag-js/file-utils": "npm:0.77.1"
+    "@zag-js/highlight-word": "npm:0.77.1"
+    "@zag-js/hover-card": "npm:0.77.1"
+    "@zag-js/i18n-utils": "npm:0.77.1"
+    "@zag-js/menu": "npm:0.77.1"
+    "@zag-js/number-input": "npm:0.77.1"
+    "@zag-js/pagination": "npm:0.77.1"
+    "@zag-js/pin-input": "npm:0.77.1"
+    "@zag-js/popover": "npm:0.77.1"
+    "@zag-js/presence": "npm:0.77.1"
+    "@zag-js/progress": "npm:0.77.1"
+    "@zag-js/qr-code": "npm:0.77.1"
+    "@zag-js/radio-group": "npm:0.77.1"
+    "@zag-js/rating-group": "npm:0.77.1"
+    "@zag-js/react": "npm:0.77.1"
+    "@zag-js/select": "npm:0.77.1"
+    "@zag-js/signature-pad": "npm:0.77.1"
+    "@zag-js/slider": "npm:0.77.1"
+    "@zag-js/splitter": "npm:0.77.1"
+    "@zag-js/steps": "npm:0.77.1"
+    "@zag-js/switch": "npm:0.77.1"
+    "@zag-js/tabs": "npm:0.77.1"
+    "@zag-js/tags-input": "npm:0.77.1"
+    "@zag-js/time-picker": "npm:0.77.1"
+    "@zag-js/timer": "npm:0.77.1"
+    "@zag-js/toast": "npm:0.77.1"
+    "@zag-js/toggle-group": "npm:0.77.1"
+    "@zag-js/tooltip": "npm:0.77.1"
+    "@zag-js/tree-view": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+  peerDependencies:
+    react: ">=18.0.0"
+    react-dom: ">=18.0.0"
+  checksum: 10c0/0af98e7aca4b02fa42a93729155dc754edbf568673abab1eba2d51efbfd217b532b1e38dc3cada92fd8aab8ad80b278a0ae91a361b8d78454590b01b3ba8c1f3
+  languageName: node
+  linkType: hard
+
 "@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.25.9, @babel/code-frame@npm:^7.26.0":
   version: 7.26.0
   resolution: "@babel/code-frame@npm:7.26.0"
@@ -176,7 +237,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.3":
+"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.3":
   version: 7.26.0
   resolution: "@babel/runtime@npm:7.26.0"
   dependencies:
@@ -228,13 +289,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chakra-ui/anatomy@npm:2.3.4":
-  version: 2.3.4
-  resolution: "@chakra-ui/anatomy@npm:2.3.4"
-  checksum: 10c0/1cfa7521c10cdace81c098b77ef31a5598ea3e5a47f14d117b63af51ddb2b74c9e83adea1c5e6d59154ba64f776dcad4568eb0cb698a26283bb489c2889d771c
-  languageName: node
-  linkType: hard
-
 "@chakra-ui/color-mode@npm:2.2.0":
   version: 2.2.0
   resolution: "@chakra-ui/color-mode@npm:2.2.0"
@@ -246,30 +300,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chakra-ui/hooks@npm:2.4.2":
-  version: 2.4.2
-  resolution: "@chakra-ui/hooks@npm:2.4.2"
-  dependencies:
-    "@chakra-ui/utils": "npm:2.2.2"
-    "@zag-js/element-size": "npm:0.31.1"
-    copy-to-clipboard: "npm:3.3.3"
-    framesync: "npm:6.1.2"
-  peerDependencies:
-    react: ">=18"
-  checksum: 10c0/192879bdb73eee35e5659507de61b72fe0ffd145590fb62dce76b5b61bb0673dcd84121a66f912c701dc20b437610c79db89e6a81052e1da8d6e3b1a0ca69237
-  languageName: node
-  linkType: hard
-
-"@chakra-ui/icons@npm:^2.1.1":
-  version: 2.2.4
-  resolution: "@chakra-ui/icons@npm:2.2.4"
-  peerDependencies:
-    "@chakra-ui/react": ">=2.0.0"
-    react: ">=18"
-  checksum: 10c0/db1aa925e9e22efe12d2417df2b21337f4cb6e6de0a2ba641bc4c3c36dbebb39ec6e6ce9b82f79f3a5d85e988779784468f8b604614170dee1b57c66ea400f9e
-  languageName: node
-  linkType: hard
-
 "@chakra-ui/object-utils@npm:2.1.0":
   version: 2.1.0
   resolution: "@chakra-ui/object-utils@npm:2.1.0"
@@ -297,27 +327,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chakra-ui/react@npm:^2.8.2":
-  version: 2.10.3
-  resolution: "@chakra-ui/react@npm:2.10.3"
-  dependencies:
-    "@chakra-ui/hooks": "npm:2.4.2"
-    "@chakra-ui/styled-system": "npm:2.12.0"
-    "@chakra-ui/theme": "npm:3.4.6"
-    "@chakra-ui/utils": "npm:2.2.2"
-    "@popperjs/core": "npm:^2.11.8"
-    "@zag-js/focus-visible": "npm:^0.31.1"
-    aria-hidden: "npm:^1.2.3"
-    react-fast-compare: "npm:3.2.2"
-    react-focus-lock: "npm:^2.9.6"
-    react-remove-scroll: "npm:^2.5.7"
+"@chakra-ui/react@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "@chakra-ui/react@npm:3.1.2"
+  dependencies:
+    "@ark-ui/react": "npm:4.4.3"
+    "@emotion/is-prop-valid": "npm:1.3.1"
+    "@emotion/serialize": "npm:1.3.2"
+    "@emotion/use-insertion-effect-with-fallbacks": "npm:1.1.0"
+    "@emotion/utils": "npm:1.4.1"
+    "@pandacss/is-valid-prop": "npm:0.41.0"
+    csstype: "npm:3.1.3"
   peerDependencies:
     "@emotion/react": ">=11"
-    "@emotion/styled": ">=11"
-    framer-motion: ">=4.0.0"
     react: ">=18"
     react-dom: ">=18"
-  checksum: 10c0/da16af60a170afc99a37e201de4692dcb441f2054315c84fc9e562f8529b6fb4e53e9c5a64f4488031030dc0fdc6031da0d6fbe5479e3d5dbc76fccec73b7902
+  checksum: 10c0/6bfb484452214d4377b484a6ecff03b11c495f39077f55b1ebc7358d4b0c7eee6c1cbc0b2bc93c44b2e21bab711f0fb2ed0ee07078ae9c948b1dd7f14afffb05
   languageName: node
   linkType: hard
 
@@ -328,16 +353,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chakra-ui/styled-system@npm:2.12.0":
-  version: 2.12.0
-  resolution: "@chakra-ui/styled-system@npm:2.12.0"
-  dependencies:
-    "@chakra-ui/utils": "npm:2.2.2"
-    csstype: "npm:^3.1.2"
-  checksum: 10c0/6ca37dbacb923b6ee57ad8a6deafa7b24bb1131e642737139874bd03e561c95a7810306c83e404156c4502d557aed9b8acf2a2025661e84e05008d249e54eb53
-  languageName: node
-  linkType: hard
-
 "@chakra-ui/styled-system@npm:2.9.2":
   version: 2.9.2
   resolution: "@chakra-ui/styled-system@npm:2.9.2"
@@ -381,19 +396,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chakra-ui/theme-tools@npm:2.2.6":
-  version: 2.2.6
-  resolution: "@chakra-ui/theme-tools@npm:2.2.6"
-  dependencies:
-    "@chakra-ui/anatomy": "npm:2.3.4"
-    "@chakra-ui/utils": "npm:2.2.2"
-    color2k: "npm:^2.0.2"
-  peerDependencies:
-    "@chakra-ui/styled-system": ">=2.0.0"
-  checksum: 10c0/9155b07358a6c4a3a09f792663bd194cfe668d244c5089d49de3af9de4025e3294cd292a7ed85ce9caafbc19dab7ba62ade920a96d675ab1cf6b29cac53fcee0
-  languageName: node
-  linkType: hard
-
 "@chakra-ui/theme-utils@npm:2.0.21":
   version: 2.0.21
   resolution: "@chakra-ui/theme-utils@npm:2.0.21"
@@ -419,19 +421,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chakra-ui/theme@npm:3.4.6":
-  version: 3.4.6
-  resolution: "@chakra-ui/theme@npm:3.4.6"
-  dependencies:
-    "@chakra-ui/anatomy": "npm:2.3.4"
-    "@chakra-ui/theme-tools": "npm:2.2.6"
-    "@chakra-ui/utils": "npm:2.2.2"
-  peerDependencies:
-    "@chakra-ui/styled-system": ">=2.8.0"
-  checksum: 10c0/b04919a2520482e857be5ccde5b35457850e5b677f882237b6f8978159333288f268fa4c6ad55aabd2bfd878b85144a966616de933e6bf57a3a5990d89c7e346
-  languageName: node
-  linkType: hard
-
 "@chakra-ui/utils@npm:2.0.15":
   version: 2.0.15
   resolution: "@chakra-ui/utils@npm:2.0.15"
@@ -444,18 +433,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chakra-ui/utils@npm:2.2.2":
-  version: 2.2.2
-  resolution: "@chakra-ui/utils@npm:2.2.2"
-  dependencies:
-    "@types/lodash.mergewith": "npm:4.6.9"
-    lodash.mergewith: "npm:4.6.2"
-  peerDependencies:
-    react: ">=16.8.0"
-  checksum: 10c0/78a55702a547929f70d03b3976ec0981008ad41c533be2daaf696c4fc4fd1854c3f5f637348d5f0a16c74319cd484857d287c5e6c71ce168bc71be2609f26a7d
-  languageName: node
-  linkType: hard
-
 "@emotion/babel-plugin@npm:^11.12.0":
   version: 11.12.0
   resolution: "@emotion/babel-plugin@npm:11.12.0"
@@ -495,7 +472,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/is-prop-valid@npm:^1.3.0":
+"@emotion/is-prop-valid@npm:1.3.1":
   version: 1.3.1
   resolution: "@emotion/is-prop-valid@npm:1.3.1"
   dependencies:
@@ -532,7 +509,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/serialize@npm:^1.2.0, @emotion/serialize@npm:^1.3.0, @emotion/serialize@npm:^1.3.1":
+"@emotion/serialize@npm:1.3.2, @emotion/serialize@npm:^1.2.0, @emotion/serialize@npm:^1.3.1":
   version: 1.3.2
   resolution: "@emotion/serialize@npm:1.3.2"
   dependencies:
@@ -552,26 +529,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/styled@npm:^11.13.0":
-  version: 11.13.0
-  resolution: "@emotion/styled@npm:11.13.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.18.3"
-    "@emotion/babel-plugin": "npm:^11.12.0"
-    "@emotion/is-prop-valid": "npm:^1.3.0"
-    "@emotion/serialize": "npm:^1.3.0"
-    "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.1.0"
-    "@emotion/utils": "npm:^1.4.0"
-  peerDependencies:
-    "@emotion/react": ^11.0.0-rc.0
-    react: ">=16.8.0"
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 10c0/5e2cc85c8a2f6e7bd012731cf0b6da3aef5906225e87e8d4a5c19da50572e24d9aaf92615aa36aa863f0fe6b62a121033356e1cad62617c48bfdaa2c3cf0d8a4
-  languageName: node
-  linkType: hard
-
 "@emotion/unitless@npm:^0.10.0":
   version: 0.10.0
   resolution: "@emotion/unitless@npm:0.10.0"
@@ -579,7 +536,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/use-insertion-effect-with-fallbacks@npm:^1.1.0":
+"@emotion/use-insertion-effect-with-fallbacks@npm:1.1.0, @emotion/use-insertion-effect-with-fallbacks@npm:^1.1.0":
   version: 1.1.0
   resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.1.0"
   peerDependencies:
@@ -588,7 +545,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/utils@npm:^1.4.0, @emotion/utils@npm:^1.4.1":
+"@emotion/utils@npm:1.4.1, @emotion/utils@npm:^1.4.0, @emotion/utils@npm:^1.4.1":
   version: 1.4.1
   resolution: "@emotion/utils@npm:1.4.1"
   checksum: 10c0/f4704e0bdf48062fd6eb9c64771c88f521aab1e108a48cb23d65b6438597c63a6945301cef4c43611e79e0e76a304ec5481c31025ea8f573d7ad5423d747602c
@@ -851,6 +808,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.6.0":
+  version: 1.6.8
+  resolution: "@floating-ui/core@npm:1.6.8"
+  dependencies:
+    "@floating-ui/utils": "npm:^0.2.8"
+  checksum: 10c0/d6985462aeccae7b55a2d3f40571551c8c42bf820ae0a477fc40ef462e33edc4f3f5b7f11b100de77c9b58ecb581670c5c3f46d0af82b5e30aa185c735257eb9
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:1.6.12":
+  version: 1.6.12
+  resolution: "@floating-ui/dom@npm:1.6.12"
+  dependencies:
+    "@floating-ui/core": "npm:^1.6.0"
+    "@floating-ui/utils": "npm:^0.2.8"
+  checksum: 10c0/c67b39862175b175c6ac299ea970f17a22c7482cfdf3b1bc79313407bf0880188b022b878953fa69d3ce166ff2bd9ae57c86043e5dd800c262b470d877591b7d
+  languageName: node
+  linkType: hard
+
+"@floating-ui/utils@npm:^0.2.8":
+  version: 0.2.8
+  resolution: "@floating-ui/utils@npm:0.2.8"
+  checksum: 10c0/a8cee5f17406c900e1c3ef63e3ca89b35e7a2ed645418459a73627b93b7377477fc888081011c6cd177cac45ec2b92a6cab018c14ea140519465498dddd2d3f9
+  languageName: node
+  linkType: hard
+
 "@humanfs/core@npm:^0.19.1":
   version: 0.19.1
   resolution: "@humanfs/core@npm:0.19.1"
@@ -882,6 +865,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@internationalized/date@npm:3.5.6":
+  version: 3.5.6
+  resolution: "@internationalized/date@npm:3.5.6"
+  dependencies:
+    "@swc/helpers": "npm:^0.5.0"
+  checksum: 10c0/25d3150247175892705aeaf8e1a78295717d420c37cb3065a766c4058a1aed460a69dc5362f7073425c95095c27036c7ed65f0ce5fbb32b20f917132e8dc543f
+  languageName: node
+  linkType: hard
+
+"@internationalized/number@npm:3.5.4":
+  version: 3.5.4
+  resolution: "@internationalized/number@npm:3.5.4"
+  dependencies:
+    "@swc/helpers": "npm:^0.5.0"
+  checksum: 10c0/d01a1845ad9815756ceb59eeb75792ee89105d073ce232350c0644453a3470e3ebaffc2b00ebd2dd8238957b0ae12d1551633308897fa9c332dda82f2af8c5cf
+  languageName: node
+  linkType: hard
+
 "@isaacs/cliui@npm:^8.0.2":
   version: 8.0.2
   resolution: "@isaacs/cliui@npm:8.0.2"
@@ -987,6 +988,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@pandacss/is-valid-prop@npm:0.41.0":
+  version: 0.41.0
+  resolution: "@pandacss/is-valid-prop@npm:0.41.0"
+  checksum: 10c0/338df67002ad6fc4beafcb096864720f937793db1e32e30568607997cee2d62ea84ad83e85436948b2c51196fbe16ed3eeae601ff8ca7ae0581806fc35b23c37
+  languageName: node
+  linkType: hard
+
 "@pkgjs/parseargs@npm:^0.11.0":
   version: 0.11.0
   resolution: "@pkgjs/parseargs@npm:0.11.0"
@@ -994,13 +1002,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@popperjs/core@npm:^2.11.8":
-  version: 2.11.8
-  resolution: "@popperjs/core@npm:2.11.8"
-  checksum: 10c0/4681e682abc006d25eb380d0cf3efc7557043f53b6aea7a5057d0d1e7df849a00e281cd8ea79c902a35a414d7919621fc2ba293ecec05f413598e0b23d5a1e63
-  languageName: node
-  linkType: hard
-
 "@remix-run/router@npm:1.20.0":
   version: 1.20.0
   resolution: "@remix-run/router@npm:1.20.0"
@@ -1141,6 +1142,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/helpers@npm:^0.5.0":
+  version: 0.5.15
+  resolution: "@swc/helpers@npm:0.5.15"
+  dependencies:
+    tslib: "npm:^2.8.0"
+  checksum: 10c0/33002f74f6f885f04c132960835fdfc474186983ea567606db62e86acd0680ca82f34647e8e610f4e1e422d1c16fce729dde22cd3b797ab1fd9061a825dabca4
+  languageName: node
+  linkType: hard
+
 "@ts-morph/common@npm:~0.25.0":
   version: 0.25.0
   resolution: "@ts-morph/common@npm:0.25.0"
@@ -1223,15 +1233,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/lodash.mergewith@npm:4.6.9":
-  version: 4.6.9
-  resolution: "@types/lodash.mergewith@npm:4.6.9"
-  dependencies:
-    "@types/lodash": "npm:*"
-  checksum: 10c0/d245cb8c66f88251a6251f93eaec9e876f8c967ef7dac67d7da75eec2a8049e37342478dbe5ae163a566c233b2a1ecd494b180ccaa8603bef58d4ca6a803d2cf
-  languageName: node
-  linkType: hard
-
 "@types/lodash@npm:*":
   version: 4.17.12
   resolution: "@types/lodash@npm:4.17.12"
@@ -1412,26 +1413,830 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@zag-js/dom-query@npm:0.31.1":
-  version: 0.31.1
-  resolution: "@zag-js/dom-query@npm:0.31.1"
-  checksum: 10c0/a7346f832ec1a005a5c516ef822f32b6a06ebdf95b5aed37630b268767c4f6f2bd59d1cbb8bf80dca51daddc5b13f2c0131e3b37a981f86f1cd13f30c6409f60
+"@zag-js/accordion@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/accordion@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/5c1fa39527c1500d8940fd4e33f03307c4d4f7019e2f76d8fc5cde8b3bcb0fa2f8641e69ce96d6de383c86a11d31fa48a27120140e3b50463d1a0960d9d6e63c
+  languageName: node
+  linkType: hard
+
+"@zag-js/anatomy@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/anatomy@npm:0.77.1"
+  checksum: 10c0/594e3d67d6ca74491de93b07859d004949413b63b8e8e49e272162a7eb41116831200548e376c9d0b14f8c5531297427edea395bd8bed48f1a6b58bbf4762020
+  languageName: node
+  linkType: hard
+
+"@zag-js/aria-hidden@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/aria-hidden@npm:0.77.1"
+  dependencies:
+    aria-hidden: "npm:1.2.4"
+  checksum: 10c0/736726a17dca8c6a8168a4ceae349022c80ee67301fc84e3881459077c726328aadf2d28680412189e7ca740ce6011db47d5dd1fddcd72ff37bcb14b9348c305
+  languageName: node
+  linkType: hard
+
+"@zag-js/auto-resize@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/auto-resize@npm:0.77.1"
+  dependencies:
+    "@zag-js/dom-query": "npm:0.77.1"
+  checksum: 10c0/ca42ed3136dbd4ff694be522d1694d94946d83eec6a9eb5b3b4e2f8f40e8b3d1e73a6dcc7fbf9d764b261cb0539738a63f7d4a1c47c46656c07d4fe8ecf2fd4c
+  languageName: node
+  linkType: hard
+
+"@zag-js/avatar@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/avatar@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/7452335c8bbeb2957a5a1d0f8dfdf2f4d7f7d4239d3c2389918ceaf5ee8af2b8c35bcfdac503ad1ad6fbbbfea112f9a6544038f58c31f5167cdf89e353198ad7
+  languageName: node
+  linkType: hard
+
+"@zag-js/carousel@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/carousel@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/b2159995c2d5d55b6d7974c35442b89f38760ed38757c83de9d8d982cfc7a58aa38caa28d98a819530849a479ceed245f1a576a8f6a8e964e5e6dba294712ed5
+  languageName: node
+  linkType: hard
+
+"@zag-js/checkbox@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/checkbox@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/focus-visible": "npm:0.77.1"
+    "@zag-js/form-utils": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/36c3193e6579aa75cfa7f14650412f689bd9959705b495440095a7fd86511a35d88f6e30785ab2a703f9d240b023ebf4e524ae07cabc4b80bdb139ee3f3de109
+  languageName: node
+  linkType: hard
+
+"@zag-js/clipboard@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/clipboard@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/730a65a391375c639253ae2ef101879f84b79d4f146d16534b2f8e368a05be7d8bdb5e059f753517103f8d9980c7c96be0a3928a481379736666f5b603f44077
+  languageName: node
+  linkType: hard
+
+"@zag-js/collapsible@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/collapsible@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/2fb64ccd5a8cbd50355ac9ee93da1e614f3dc8f33d14cd81bf6a4dda5537aa4fca624b2bb88f990264636a8b1cbdb97f00467f3fb6325508f30046b96b97eca7
+  languageName: node
+  linkType: hard
+
+"@zag-js/collection@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/collection@npm:0.77.1"
+  dependencies:
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/b2f415981ce303ce8f0f6c3062b0e33d8c888adc38fd74c88c690b3afca2271a1d062c404080d3360023204028b25e43a48ae45182a191401c666c9d40e8a154
+  languageName: node
+  linkType: hard
+
+"@zag-js/color-picker@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/color-picker@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/color-utils": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dismissable": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/form-utils": "npm:0.77.1"
+    "@zag-js/popper": "npm:0.77.1"
+    "@zag-js/text-selection": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/aa6a4601f81fad2457ae3c4af30dfa591f0975ea8e9701382a95b59b5baadbcb3a980e4902ec07440501dfdd6b98f114601a09e1d6121b2a7df9a8c523288de6
+  languageName: node
+  linkType: hard
+
+"@zag-js/color-utils@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/color-utils@npm:0.77.1"
+  dependencies:
+    "@zag-js/numeric-range": "npm:0.77.1"
+  checksum: 10c0/324160b956226395acaca68e02090e5989d4b650c305614c4ec1795dacddec9ef344d2b2f7ebb221ac1bf964462d76f3e74b3c252ac51ec7f2d82c100729f227
+  languageName: node
+  linkType: hard
+
+"@zag-js/combobox@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/combobox@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/aria-hidden": "npm:0.77.1"
+    "@zag-js/collection": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dismissable": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/popper": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/cade989fc00115c4c4229bae67ad94b6f312b390999ef83c0eac43883b2f7b7d2ec79c2071b6602122c375cd4ccfe678a07df9649b32c3f715fb46eb715f5a8a
+  languageName: node
+  linkType: hard
+
+"@zag-js/core@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/core@npm:0.77.1"
+  dependencies:
+    "@zag-js/store": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+    klona: "npm:2.0.6"
+  checksum: 10c0/3cdc3aa6b9a3e6f74c4604a382ed1b04274a1d4e0bf75c5d96d253409cb88e5d147bfe5f14409f50c45e88daf312b7f7568f95d814de560200dd1ab0a49b93b3
+  languageName: node
+  linkType: hard
+
+"@zag-js/date-picker@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/date-picker@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/date-utils": "npm:0.77.1"
+    "@zag-js/dismissable": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/form-utils": "npm:0.77.1"
+    "@zag-js/live-region": "npm:0.77.1"
+    "@zag-js/popper": "npm:0.77.1"
+    "@zag-js/text-selection": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  peerDependencies:
+    "@internationalized/date": ">=3.0.0"
+  checksum: 10c0/a8da1471bf9204ee9c46d8e4228624aecb99992280ec10979022f02bfa12a87c89558e578ee81825b8d986fc28fda3e34b797dd7b215b7bb54f93a7e7a4ff4f9
+  languageName: node
+  linkType: hard
+
+"@zag-js/date-utils@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/date-utils@npm:0.77.1"
+  peerDependencies:
+    "@internationalized/date": ">=3.0.0"
+  checksum: 10c0/e053c60782cff0b59b37cdbb17439798ba2e6187dc8d6afafcb3ce38058870e05ffc9486e616216aa6aeea9e45a9f3dcbcf7a10b0c6a9e43bc41136ce09b138a
+  languageName: node
+  linkType: hard
+
+"@zag-js/dialog@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/dialog@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/aria-hidden": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dismissable": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/remove-scroll": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+    focus-trap: "npm:7.6.0"
+  checksum: 10c0/630c2e3f7a78361d6084e8c2f34d7ad64c98e21ee070527f94aca3c39be3740586901aade6545c0182d2f63651eb546f8e4d5d8fb3eacd45413dd9fd6c53d410
+  languageName: node
+  linkType: hard
+
+"@zag-js/dismissable@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/dismissable@npm:0.77.1"
+  dependencies:
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/interact-outside": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/3b2f59be6b23595ec6602fb2f0b2b29e55cc8ef4f3e4ee77b604f82e90842213123b6279530a686f52799c02dbf3addf949d0b3b43ab8941b73a74a762ec7751
+  languageName: node
+  linkType: hard
+
+"@zag-js/dom-event@npm:0.77.1, @zag-js/dom-event@npm:^0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/dom-event@npm:0.77.1"
+  dependencies:
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/text-selection": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+  checksum: 10c0/2e95a375b62eb75edba2bd3a8e6c1bb05ed6fb1d3823fd6427a3b60697715840dd50847fd82e674fc1123da5a096a1e4a76c99a3acb4157bc0236c867d7ae660
+  languageName: node
+  linkType: hard
+
+"@zag-js/dom-query@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/dom-query@npm:0.77.1"
+  checksum: 10c0/825beebe732f213f11bb23c0f48eae0032f91e7fccd0fd3f2636062684e5c82a862ed37b1e2a3278ab603d9f588dd8957b438a499b803aa6d730ac710a1cd0bc
+  languageName: node
+  linkType: hard
+
+"@zag-js/editable@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/editable@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/form-utils": "npm:0.77.1"
+    "@zag-js/interact-outside": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/c40539c3b88690e00d48ff49018542a7a97bf315594bbd29280c6d26eae2eb685d3849318399c4bf214ce635286acd20143a1d1404d56fdef8da82cf93e4b3d7
+  languageName: node
+  linkType: hard
+
+"@zag-js/element-rect@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/element-rect@npm:0.77.1"
+  checksum: 10c0/c0d6c5423f5aad3e62d5882517f64b96702da125ed5514d041fc7e48c76d40de47568c9f8e066e35cad1743f1e5463b4bf43cccacbf04b17fb4b4b1e032e5c6c
+  languageName: node
+  linkType: hard
+
+"@zag-js/element-size@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/element-size@npm:0.77.1"
+  checksum: 10c0/7617928bdfb8347be5fd5838f97237244eb6c1105f86fd777de8b3637b972caff844f99e350851df281ce3c8e79cf71d2cea1d3ea4cb10ee4fe750b2f01d7e52
+  languageName: node
+  linkType: hard
+
+"@zag-js/file-upload@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/file-upload@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/file-utils": "npm:0.77.1"
+    "@zag-js/i18n-utils": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/9540cac47f4ea971a00602c6718f9c594b4a6d78fb5772d731adc1d1e2f9fd051eff64862c4d9a8836263bec38c0a08cc56a6654af44f78316d10db895dc2da6
+  languageName: node
+  linkType: hard
+
+"@zag-js/file-utils@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/file-utils@npm:0.77.1"
+  dependencies:
+    "@zag-js/i18n-utils": "npm:0.77.1"
+  checksum: 10c0/a73998b328c8c6b249882825f07f96f67dfc2d070cfd7faa118c49284041a16ed68fe19e76b6bd701ab3c1ed891caf3aa4ab0ce70d0f13116a7efcc44827e135
+  languageName: node
+  linkType: hard
+
+"@zag-js/focus-visible@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/focus-visible@npm:0.77.1"
+  dependencies:
+    "@zag-js/dom-query": "npm:0.77.1"
+  checksum: 10c0/2ac69ad911bbe2f4f6eb12c5e8f6f1cbf6ea32766045e191e2a3b92d3d837cebf52c7be000a747033c7e27111ced74690f9a548877cf877faea02389d1c33fd0
+  languageName: node
+  linkType: hard
+
+"@zag-js/form-utils@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/form-utils@npm:0.77.1"
+  checksum: 10c0/56ad1636e030c9190d9b7a04cd3844f3fb8cb5629b357d18f48a5d6d6cdeab1b4dd935ad4631a95e357fc5a2d1043302bf8dc8825154a192c7cf323f2e5b2dbf
+  languageName: node
+  linkType: hard
+
+"@zag-js/highlight-word@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/highlight-word@npm:0.77.1"
+  checksum: 10c0/d1775c57bf8ac5e8b7236003c978f0f93db86f54c16ed7327bff533bdb7716700935be3578d6136d7fe00006e2cbf145f0146b43ef2f9ab6ada55870c7aea225
+  languageName: node
+  linkType: hard
+
+"@zag-js/hover-card@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/hover-card@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dismissable": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/popper": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/247b0454bf627f34f9beb68e96c4a181af2711b4cc0482b29e0130f4245e4121deac1cea3a887d9795d979a9209f6ab0e7cc77522fa82cb8afade8d9f60b8d0f
   languageName: node
   linkType: hard
 
-"@zag-js/element-size@npm:0.31.1":
-  version: 0.31.1
-  resolution: "@zag-js/element-size@npm:0.31.1"
-  checksum: 10c0/cb81bad07ab3d8176a81fe24e55e61c88473a93875264133aa0a4c4f790585885fce5bd771c0b8f8970952ef4a5c67e0c03f698fd21db55707298c3ed8f93fed
+"@zag-js/i18n-utils@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/i18n-utils@npm:0.77.1"
+  dependencies:
+    "@zag-js/dom-query": "npm:0.77.1"
+  checksum: 10c0/41a880bb22e94d94fcdddd06b8b4e29a16ee3046cc679bd8cd2e788dd2186c9f930fe614b440175514e9a2c98d2236d85fdb0270bcca44146211192d83511b1e
   languageName: node
   linkType: hard
 
-"@zag-js/focus-visible@npm:^0.31.1":
-  version: 0.31.1
-  resolution: "@zag-js/focus-visible@npm:0.31.1"
+"@zag-js/interact-outside@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/interact-outside@npm:0.77.1"
   dependencies:
-    "@zag-js/dom-query": "npm:0.31.1"
-  checksum: 10c0/7c6e0db4cf8ca4bba1814bf56ca6367fda10f6223078181db6bf8629bd3059485df0ad7a53665e2fb77d4dfa99ae6d1b5dc987bd3f88b5fca5134c6fa874d37a
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/b91830785edad305a53be9063d73df0d15bb464d4e59d38aad32b4ef79679c1fd151a821b00272f604ae4eb337422585a69571cf0bda1b97bd4d3586aa80a386
+  languageName: node
+  linkType: hard
+
+"@zag-js/live-region@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/live-region@npm:0.77.1"
+  checksum: 10c0/b41f9340dd2148d6c077e28e315de655eaaf797d6585de3810689e34ca3103df441610a568af954f37f4389c8dd7b45730666e8ceab0d7383fb30667b820727d
+  languageName: node
+  linkType: hard
+
+"@zag-js/menu@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/menu@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dismissable": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/popper": "npm:0.77.1"
+    "@zag-js/rect-utils": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/21bfc155ce4fed5910ec7899cb8b86767dedfb3f5f4d900e680462fff0ec710318d52e3d918281c8779d3ab755958fdbfad5db424c59546888c9d629744041c4
+  languageName: node
+  linkType: hard
+
+"@zag-js/number-input@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/number-input@npm:0.77.1"
+  dependencies:
+    "@internationalized/number": "npm:3.5.4"
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/form-utils": "npm:0.77.1"
+    "@zag-js/number-utils": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/6d4ea9f2ccb1ccf1515d40b067d5ac228208b56b47b2c45d23ef1d699e4471de9a90de9b7e2e6be207f00d9cd3d6a781b858c07c1bd44ce2013d12f8bb2f86f0
+  languageName: node
+  linkType: hard
+
+"@zag-js/number-utils@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/number-utils@npm:0.77.1"
+  checksum: 10c0/80b11fbdefc23254726ce4e19552437841c05e6d8ef50b7a080663e479622c143b867549d3deb52929c1b7bbace9f05a575d4fc0934dc09b256a435df2e93fc4
+  languageName: node
+  linkType: hard
+
+"@zag-js/numeric-range@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/numeric-range@npm:0.77.1"
+  checksum: 10c0/edbc56b17908d57d7fbac1b93df914980b0b96a2576845e35afeba161fb649342cd9a0fc215a582ee9ff5d07393037cd63c7d66d3d0e7f25972520a73b9c1e43
+  languageName: node
+  linkType: hard
+
+"@zag-js/pagination@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/pagination@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/9d153063b221f4c1e2183df961fd3a9f8329cbb458b74e240a2d1266144857d6d7a9df0dd6c05cf150e4cbc52c8ee9c167819706b77cb68b1b7344c7a191add5
+  languageName: node
+  linkType: hard
+
+"@zag-js/pin-input@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/pin-input@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/form-utils": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/527be55cdca7e75eb03e0f947ef5e0f23c7d2b9f9cd5984731305c652f287e2b53a588d721d10f4a4fea45c49325999f93bd999d1608d6ed78c93cbde2d0effa
+  languageName: node
+  linkType: hard
+
+"@zag-js/popover@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/popover@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/aria-hidden": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dismissable": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/popper": "npm:0.77.1"
+    "@zag-js/remove-scroll": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+    focus-trap: "npm:7.6.0"
+  checksum: 10c0/51ef68aad2a3842385333e045d35849b9fac9be5dfa982c141077b4366484c2cfdaee4879bbc187a0c8c3a9242b913dd674cd472921ed84165ad2ee3788599a4
+  languageName: node
+  linkType: hard
+
+"@zag-js/popper@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/popper@npm:0.77.1"
+  dependencies:
+    "@floating-ui/dom": "npm:1.6.12"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/21e6fc488577ce8f8b3ed95f0075b07f150c0fab59b7ecdec91f52c6490004beaf679f2a0251eef49655848c6dfc59d3916aa9ee2142a96b3498e263af191355
+  languageName: node
+  linkType: hard
+
+"@zag-js/presence@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/presence@npm:0.77.1"
+  dependencies:
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+  checksum: 10c0/6131e0fefbb8acfb8f460dbf7dd5718545cd57f449a112870ec5eba58c198d69218f47f3ef0bf62e970a1de43f049386b18fe49a2da97bdde50d327b3ed15d29
+  languageName: node
+  linkType: hard
+
+"@zag-js/progress@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/progress@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/df5c6d30675de563866be4309384f27ab26525c8cee823f7ff3aee31ebd1814fa25b2ed2c1138aba8f087f02401f0409663cf2880e7fe19c030637ed8dd80ca0
+  languageName: node
+  linkType: hard
+
+"@zag-js/qr-code@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/qr-code@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+    proxy-memoize: "npm:3.0.1"
+    uqr: "npm:0.1.2"
+  checksum: 10c0/dd93831521fbd01ad2486a5220493a36829db878b35392254f04046a49d69980ec15543880c17262b67761d4de8ea9f660a9663098b61ea3e24393f59fcd1a8e
+  languageName: node
+  linkType: hard
+
+"@zag-js/radio-group@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/radio-group@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/element-rect": "npm:0.77.1"
+    "@zag-js/focus-visible": "npm:0.77.1"
+    "@zag-js/form-utils": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/ac7eb1e28d6e6c083d7855126236b374e1510bf784b0e4cac4029ababdbe529199e581f30ad3509a58410c48bd50377dca97fa3d6fd5077465578a7ca0fd7bcf
+  languageName: node
+  linkType: hard
+
+"@zag-js/rating-group@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/rating-group@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/form-utils": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/85bc123456075ffbb6418c46cd9cbd39721ab97267ac989a09c6f780f84601279940b19a2c440a0879c9162868584cbb0bcc99adec1f147d552da581fb5ccc08
+  languageName: node
+  linkType: hard
+
+"@zag-js/react@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/react@npm:0.77.1"
+  dependencies:
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/store": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    proxy-compare: "npm:3.0.0"
+  peerDependencies:
+    react: ">=18.0.0"
+    react-dom: ">=18.0.0"
+  checksum: 10c0/68093bd7cea4b2c163b3ff77418dd55bf5602f0f5070ae9338c78d63b448bd6ffd87def4bb5d881d7ec51807d8c00bf6fa70ac050cd5467381e7bada32fc2902
+  languageName: node
+  linkType: hard
+
+"@zag-js/rect-utils@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/rect-utils@npm:0.77.1"
+  checksum: 10c0/58d0b6c6d2f151cac2a1e36a5e4674503cdc57a7e58932753dbbe576c50a6b80bdeb62cdefabbc2a91a1c39159994a77b79b77b9ac0fae8b9a64d0c68a7134dd
+  languageName: node
+  linkType: hard
+
+"@zag-js/remove-scroll@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/remove-scroll@npm:0.77.1"
+  dependencies:
+    "@zag-js/dom-query": "npm:0.77.1"
+  checksum: 10c0/b039ca6a631ba557626b6e01d9a12fcfcde9e76e82eb01967f4990a1161e6f74ade4ea62bab279ccde87b902d2191b1b4132f91517a6799e6cb7ce4e58ebcde1
+  languageName: node
+  linkType: hard
+
+"@zag-js/select@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/select@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/collection": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dismissable": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/form-utils": "npm:0.77.1"
+    "@zag-js/popper": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/cba930dad784e1389d6f48dc4a55a1c767539238bc44732d29f4f57f08fde9f2a69b53d67d74e40f0b737c58038da75120a350cf44b642343327d138ef85c164
+  languageName: node
+  linkType: hard
+
+"@zag-js/signature-pad@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/signature-pad@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+    perfect-freehand: "npm:^1.2.2"
+  checksum: 10c0/4a8a9de984d03fc19c9b0e99dd1622864b40a35e56098e75d873408b20382be08a7a48a8edc250cf0e4a9a34c54fcd0e4a4fbef5e335a5b077d528e54b2f1cce
+  languageName: node
+  linkType: hard
+
+"@zag-js/slider@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/slider@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/element-size": "npm:0.77.1"
+    "@zag-js/form-utils": "npm:0.77.1"
+    "@zag-js/numeric-range": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/70271f40e9ada2c9807a85023a573e815c5640a94073707132d246c5ee57b7465605ecf3510bf25c2edd5431323dc503089af396c9006d33dbde80bc59e5f7e7
+  languageName: node
+  linkType: hard
+
+"@zag-js/splitter@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/splitter@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/number-utils": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/a31d0f76542c2aa884ea81a8fcafb9bafa52cea3f31c5bcf22e9ffe827bffb268d38003f00cc655697c5ce8bdd558ce11c6adc02d35b0b828e41aee41c768ff5
+  languageName: node
+  linkType: hard
+
+"@zag-js/steps@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/steps@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/99bab09e96b538c46e0a38d2b22d2c97e682a49b2266a80c1924c82191221b3f1625e34d1ba718543f6090f319dfc36bcbdc3ce0f7e55aa9b3466b3abd382337
+  languageName: node
+  linkType: hard
+
+"@zag-js/store@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/store@npm:0.77.1"
+  dependencies:
+    proxy-compare: "npm:3.0.0"
+  checksum: 10c0/cd08fc00137b9ade6518bfb201380da229f3cd6f54996df1bda7628e701d4e942e600278ba49f83c6c7c5f286182a09fa910e6d44bfaf23606ebed8c4f17b0a4
+  languageName: node
+  linkType: hard
+
+"@zag-js/switch@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/switch@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/focus-visible": "npm:0.77.1"
+    "@zag-js/form-utils": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/dc7ffc3ad80b0512aed23973f392b1bb4b26dcac41706d586049ba55573f237b4b444d8cdbb48d63e5304486f837f59b8fb6805266301ceb75a5dd1a931a225c
+  languageName: node
+  linkType: hard
+
+"@zag-js/tabs@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/tabs@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/element-rect": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/31561255fd94785e943ed90ee9090110d299ce36006d6cb8f1785f37ff73e9e65c13d67a5f4fb7045267690224a163ec196356eb99750aa0e9a54d2e328b9425
+  languageName: node
+  linkType: hard
+
+"@zag-js/tags-input@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/tags-input@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/auto-resize": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/form-utils": "npm:0.77.1"
+    "@zag-js/interact-outside": "npm:0.77.1"
+    "@zag-js/live-region": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/58780192f147e9724fd2d4f29cfcb601f5e62e59950d39284cac5ac6ce5d9d768e5c1d53766e2621bbd07d785e5a7392b625912a4006b64bcd0550c0c909b101
+  languageName: node
+  linkType: hard
+
+"@zag-js/text-selection@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/text-selection@npm:0.77.1"
+  dependencies:
+    "@zag-js/dom-query": "npm:0.77.1"
+  checksum: 10c0/f8ca9a3d644bd82c0a025f8faceaa438a453c4a160a38a49d947a72a8d8f3988a2902959efb19cf4210ebb1a58b4fa7bb3bc7d06682af4dd96c98188c2e5cb58
+  languageName: node
+  linkType: hard
+
+"@zag-js/time-picker@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/time-picker@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dismissable": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:^0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/popper": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  peerDependencies:
+    "@internationalized/date": ">=3.0.0"
+  checksum: 10c0/11fcd37f16ccdc916752b5c839d368c5623a138f665b4186c881734fa709585be4514d23e2d603acac26f3a5153dca5d8160221c64ada5621418da93a67f6daf
+  languageName: node
+  linkType: hard
+
+"@zag-js/timer@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/timer@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/96e94b42ae753d9c70e9c2a4b4750d443bb174021fac15ede9d14088a41ad59ff919430e532e07e43fdc3b115c80477fdc57829378ba9356bb2eb0a5d2932b76
+  languageName: node
+  linkType: hard
+
+"@zag-js/toast@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/toast@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dismissable": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/41e2514b67c65b4c61e58697e9d247b616d0846d7f16fc783ebff32e513d3f07ecc3d42dda222e4eb56a6a00007938f418b9b09940a982b393be7eb12161b525
+  languageName: node
+  linkType: hard
+
+"@zag-js/toggle-group@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/toggle-group@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/5e4ec217d40807a8d989c0086b222d5ffae5ead7ef0cd39f658eee2a2833583ee240a59ff74deec8f54aa3d422439b578cdea23ded80211cb496dff51f046ff0
+  languageName: node
+  linkType: hard
+
+"@zag-js/tooltip@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/tooltip@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/focus-visible": "npm:0.77.1"
+    "@zag-js/popper": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/89c07f2efe8179f91f4154eee8eb6420cb74e827137dfd6639a0962b2a238b30b028d35855b6e8ff539a8a766fb9c9ade861b9a4a6a4b4b6de63df85f58dcba5
+  languageName: node
+  linkType: hard
+
+"@zag-js/tree-view@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/tree-view@npm:0.77.1"
+  dependencies:
+    "@zag-js/anatomy": "npm:0.77.1"
+    "@zag-js/collection": "npm:0.77.1"
+    "@zag-js/core": "npm:0.77.1"
+    "@zag-js/dom-event": "npm:0.77.1"
+    "@zag-js/dom-query": "npm:0.77.1"
+    "@zag-js/types": "npm:0.77.1"
+    "@zag-js/utils": "npm:0.77.1"
+  checksum: 10c0/b5dd99b113fda0047d53e5da01d2e8dc0ecea60977c99914495ee043a536bfc49354eee88350d967e34f996947ca1aa293543fe8716da52ec27ce41c390db1b9
+  languageName: node
+  linkType: hard
+
+"@zag-js/types@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/types@npm:0.77.1"
+  dependencies:
+    csstype: "npm:3.1.3"
+  checksum: 10c0/978fd9056e79a11fb34449879c8dbc78411b7b37a7c1cfbb36417328be15d219d60f5022b7bc304bb5a6042e14c4e52f75936e455da2e0d7fea65c50fb8dd9d6
+  languageName: node
+  linkType: hard
+
+"@zag-js/utils@npm:0.77.1":
+  version: 0.77.1
+  resolution: "@zag-js/utils@npm:0.77.1"
+  checksum: 10c0/ff428509a0fe595dbc4a9a53aab4c30cc4a1915a6d4c70c63a76f4fce86b2f736519d2bcf41170b87b2a6400e9a510493e957be651f90356cc034234c9e5ff03
   languageName: node
   linkType: hard
 
@@ -1528,7 +2333,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-hidden@npm:^1.2.3":
+"aria-hidden@npm:1.2.4":
   version: 1.2.4
   resolution: "aria-hidden@npm:1.2.4"
   dependencies:
@@ -1813,15 +2618,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"copy-to-clipboard@npm:3.3.3":
-  version: 3.3.3
-  resolution: "copy-to-clipboard@npm:3.3.3"
-  dependencies:
-    toggle-selection: "npm:^1.0.6"
-  checksum: 10c0/3ebf5e8ee00601f8c440b83ec08d838e8eabb068c1fae94a9cda6b42f288f7e1b552f3463635f419af44bf7675afc8d0390d30876cf5c2d5d35f86d9c56a3e5f
-  languageName: node
-  linkType: hard
-
 "cosmiconfig@npm:^7.0.0":
   version: 7.1.0
   resolution: "cosmiconfig@npm:7.1.0"
@@ -1855,7 +2651,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.2, csstype@npm:^3.1.2":
+"csstype@npm:3.1.3, csstype@npm:^3.0.2, csstype@npm:^3.1.2":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
   checksum: 10c0/80c089d6f7e0c5b2bd83cf0539ab41474198579584fa10d86d0cafe0642202343cbc119e076a0b1aece191989477081415d66c9fefbf3c957fc2fc4b7009f248
@@ -1952,13 +2748,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detect-node-es@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "detect-node-es@npm:1.1.0"
-  checksum: 10c0/e562f00de23f10c27d7119e1af0e7388407eb4b06596a25f6d79a360094a109ff285de317f02b090faae093d314cf6e73ac3214f8a5bb3a0def5bece94557fbe
-  languageName: node
-  linkType: hard
-
 "doctrine@npm:^2.1.0":
   version: 2.1.0
   resolution: "doctrine@npm:2.1.0"
@@ -2547,12 +3336,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"focus-lock@npm:^1.3.5":
-  version: 1.3.5
-  resolution: "focus-lock@npm:1.3.5"
+"focus-trap@npm:7.6.0":
+  version: 7.6.0
+  resolution: "focus-trap@npm:7.6.0"
   dependencies:
-    tslib: "npm:^2.0.3"
-  checksum: 10c0/240fe013c2945200d3391856789d381bf3e09f488342a7965e00d0933de93ac2e8b0ccfa7da6353c11a30e369035f3b7e54cac9b0ebaf6825252a9ffc6445978
+    tabbable: "npm:^6.2.0"
+  checksum: 10c0/5d1cdefdc11ae97f2c7bcced5c0facfa9794e1ec7a9d8b6547f3f03b51de0423ab572666371f6632b2165613470ec8245daea836160319d52d7a6434e6847a23
   languageName: node
   linkType: hard
 
@@ -2575,26 +3364,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"framer-motion@npm:^11.3.29":
-  version: 11.11.10
-  resolution: "framer-motion@npm:11.11.10"
-  dependencies:
-    tslib: "npm:^2.4.0"
-  peerDependencies:
-    "@emotion/is-prop-valid": "*"
-    react: ^18.0.0
-    react-dom: ^18.0.0
-  peerDependenciesMeta:
-    "@emotion/is-prop-valid":
-      optional: true
-    react:
-      optional: true
-    react-dom:
-      optional: true
-  checksum: 10c0/0f8cdcfad0b1bb371db70a93605da17f191484b47e197387349c5f30b848f799d35e51ec8b54245756e5652903607a051c718fc16997616cf0cd97b1ee642871
-  languageName: node
-  linkType: hard
-
 "framesync@npm:6.1.2":
   version: 6.1.2
   resolution: "framesync@npm:6.1.2"
@@ -2687,13 +3456,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-nonce@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "get-nonce@npm:1.0.1"
-  checksum: 10c0/2d7df55279060bf0568549e1ffc9b84bc32a32b7541675ca092dce56317cdd1a59a98dcc4072c9f6a980779440139a3221d7486f52c488e69dc0fd27b1efb162
-  languageName: node
-  linkType: hard
-
 "get-symbol-description@npm:^1.0.2":
   version: 1.0.2
   resolution: "get-symbol-description@npm:1.0.2"
@@ -2942,15 +3704,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"invariant@npm:^2.2.4":
-  version: 2.2.4
-  resolution: "invariant@npm:2.2.4"
-  dependencies:
-    loose-envify: "npm:^1.0.0"
-  checksum: 10c0/5af133a917c0bcf65e84e7f23e779e7abc1cd49cb7fdc62d00d1de74b0d8c1b5ee74ac7766099fb3be1b05b26dfc67bab76a17030d2fe7ea2eef867434362dfc
-  languageName: node
-  linkType: hard
-
 "ip-address@npm:^9.0.5":
   version: 9.0.5
   resolution: "ip-address@npm:9.0.5"
@@ -3264,6 +4017,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"klona@npm:2.0.6":
+  version: 2.0.6
+  resolution: "klona@npm:2.0.6"
+  checksum: 10c0/94eed2c6c2ce99f409df9186a96340558897b3e62a85afdc1ee39103954d2ebe1c1c4e9fe2b0952771771fa96d70055ede8b27962a7021406374fdb695fd4d01
+  languageName: node
+  linkType: hard
+
 "kolmafia@npm:tome-kolmafia-mock@5.28118.0":
   version: 5.28118.0
   resolution: "tome-kolmafia-mock@npm:5.28118.0"
@@ -3324,7 +4084,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.1.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -3351,6 +4111,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lucide-react@npm:^0.460.0":
+  version: 0.460.0
+  resolution: "lucide-react@npm:0.460.0"
+  peerDependencies:
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
+  checksum: 10c0/7f54cbc1ab88276f79cfb8c3ac440de9db013d76e386abc68deda4b04ea51e826f1ad5df22983619b970adff7430d892d4e990dbdf6eceb7243eb2e9a2762704
+  languageName: node
+  linkType: hard
+
 "make-fetch-happen@npm:^13.0.0":
   version: 13.0.1
   resolution: "make-fetch-happen@npm:13.0.1"
@@ -3536,6 +4305,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"next-themes@npm:^0.4.3":
+  version: 0.4.3
+  resolution: "next-themes@npm:0.4.3"
+  peerDependencies:
+    react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+  checksum: 10c0/81dbe9efed2b10169e4ecd2ff59f3dedc091518c92a79354b863ccdcc444a061125de975af5c0c123ce9a1ebd7b20b05a1fdbfcf2aaeeb337fec03fe38fd8cb0
+  languageName: node
+  linkType: hard
+
 "node-gyp@npm:latest":
   version: 10.2.0
   resolution: "node-gyp@npm:10.2.0"
@@ -3574,13 +4353,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-assign@npm:^4.1.1":
-  version: 4.1.1
-  resolution: "object-assign@npm:4.1.1"
-  checksum: 10c0/1f4df9945120325d041ccf7b86f31e8bcc14e73d29171e37a7903050e96b81323784ec59f93f102ec635bcf6fa8034ba3ea0a8c7e69fa202b87ae3b6cec5a414
-  languageName: node
-  linkType: hard
-
 "object-inspect@npm:^1.13.1":
   version: 1.13.2
   resolution: "object-inspect@npm:1.13.2"
@@ -3762,6 +4534,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"perfect-freehand@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "perfect-freehand@npm:1.2.2"
+  checksum: 10c0/8f7ae1cd24bdd91b51b06eb8a02bee1b4ecef361df9e3ef9a56aa942e14f59820cccff919eb33831493e12af2a6b7f8617cbdc59bf0b11723f4ffdc8fe325f1a
+  languageName: node
+  linkType: hard
+
 "picocolors@npm:^1.0.0, picocolors@npm:^1.1.0":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
@@ -3834,14 +4613,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.6.2":
-  version: 15.8.1
-  resolution: "prop-types@npm:15.8.1"
+"proxy-compare@npm:3.0.0, proxy-compare@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "proxy-compare@npm:3.0.0"
+  checksum: 10c0/9740af3709496b16ba18ebc337df5ca4c103f345436a8c0ec2e09217b7a06e119c145bedfe7fc4ad50b77b30fa804efaa6a7fe147eafb61aaf7ef44e387710f5
+  languageName: node
+  linkType: hard
+
+"proxy-memoize@npm:3.0.1":
+  version: 3.0.1
+  resolution: "proxy-memoize@npm:3.0.1"
   dependencies:
-    loose-envify: "npm:^1.4.0"
-    object-assign: "npm:^4.1.1"
-    react-is: "npm:^16.13.1"
-  checksum: 10c0/59ece7ca2fb9838031d73a48d4becb9a7cc1ed10e610517c7d8f19a1e02fa47f7c27d557d8a5702bec3cfeccddc853579832b43f449e54635803f277b1c78077
+    proxy-compare: "npm:^3.0.0"
+  checksum: 10c0/cfdd442365fb7081dcba427ded75a8a9b68af17e72eef8098aa2e6d625914ac4152021832c631f071660d2f61ec18aaaa07ec77142abaa50b12dcaa845de8e4c
   languageName: node
   linkType: hard
 
@@ -3859,17 +4643,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-clientside-effect@npm:^1.2.6":
-  version: 1.2.6
-  resolution: "react-clientside-effect@npm:1.2.6"
-  dependencies:
-    "@babel/runtime": "npm:^7.12.13"
-  peerDependencies:
-    react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/aba0adb666018e5c64657c31f4914a8558be73f71d6e2210fa871ebfcab94d786c83082868d7c7fa66feddc2aec19e375745cf0903e0619f2efffef08b92d941
-  languageName: node
-  linkType: hard
-
 "react-dom@npm:^18.3.1":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"
@@ -3900,27 +4673,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-focus-lock@npm:^2.9.6":
-  version: 2.13.2
-  resolution: "react-focus-lock@npm:2.13.2"
-  dependencies:
-    "@babel/runtime": "npm:^7.0.0"
-    focus-lock: "npm:^1.3.5"
-    prop-types: "npm:^15.6.2"
-    react-clientside-effect: "npm:^1.2.6"
-    use-callback-ref: "npm:^1.3.2"
-    use-sidecar: "npm:^1.1.2"
+"react-icons@npm:^5.3.0":
+  version: 5.3.0
+  resolution: "react-icons@npm:5.3.0"
   peerDependencies:
-    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 10c0/6d4539e9ec5943de8a7eb856df7ab97c3da751ce6515512ca337dfb2bd06499ebc1051f8c96b142ad093637825a0ddcceb884282c1ec246dd02f293a8aafa688
+    react: "*"
+  checksum: 10c0/a53af0de558f0e2bacfbafc973aa8ca1e6a429006a2f83d70becad5be431726a691e096336c95949bb0d967587b145264c5046d2bc1518969dbae731855d0712
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.13.1, react-is@npm:^16.7.0":
+"react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: 10c0/33977da7a5f1a287936a0c85639fec6ca74f4f15ef1e59a6bc20338fc73dc69555381e211f7a3529b8150a1f71e4225525b41b60b52965bda53ce7d47377ada1
@@ -3934,41 +4696,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-remove-scroll-bar@npm:^2.3.6":
-  version: 2.3.6
-  resolution: "react-remove-scroll-bar@npm:2.3.6"
-  dependencies:
-    react-style-singleton: "npm:^2.2.1"
-    tslib: "npm:^2.0.0"
-  peerDependencies:
-    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 10c0/4e32ee04bf655a8bd3b4aacf6ffc596ae9eb1b9ba27eef83f7002632ee75371f61516ae62250634a9eae4b2c8fc6f6982d9b182de260f6c11841841e6e2e7515
-  languageName: node
-  linkType: hard
-
-"react-remove-scroll@npm:^2.5.7":
-  version: 2.6.0
-  resolution: "react-remove-scroll@npm:2.6.0"
-  dependencies:
-    react-remove-scroll-bar: "npm:^2.3.6"
-    react-style-singleton: "npm:^2.2.1"
-    tslib: "npm:^2.1.0"
-    use-callback-ref: "npm:^1.3.0"
-    use-sidecar: "npm:^1.1.2"
-  peerDependencies:
-    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 10c0/c5881c537477d986e8d25d2588a9b6f7fe1254e05946fb4f4b55baeead502b0e1875fc3c42bb6f82736772cd96a50266e41d84e3c4cd25e9525bdfe2d838e96d
-  languageName: node
-  linkType: hard
-
 "react-router-dom@npm:^6.26.1":
   version: 6.27.0
   resolution: "react-router-dom@npm:6.27.0"
@@ -3993,23 +4720,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-style-singleton@npm:^2.2.1":
-  version: 2.2.1
-  resolution: "react-style-singleton@npm:2.2.1"
-  dependencies:
-    get-nonce: "npm:^1.0.0"
-    invariant: "npm:^2.2.4"
-    tslib: "npm:^2.0.0"
-  peerDependencies:
-    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 10c0/6d66f3bdb65e1ec79089f80314da97c9a005087a04ee034255a5de129a4c0d9fd0bf99fa7bf642781ac2dc745ca687aae3de082bd8afdd0d117bc953241e15ad
-  languageName: node
-  linkType: hard
-
 "react@npm:^18.3.1":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
@@ -4457,6 +5167,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tabbable@npm:^6.2.0":
+  version: 6.2.0
+  resolution: "tabbable@npm:6.2.0"
+  checksum: 10c0/ced8b38f05f2de62cd46836d77c2646c42b8c9713f5bd265daf0e78ff5ac73d3ba48a7ca45f348bafeef29b23da7187c72250742d37627883ef89cbd7fa76898
+  languageName: node
+  linkType: hard
+
 "tar@npm:^6.1.11, tar@npm:^6.2.1":
   version: 6.2.1
   resolution: "tar@npm:6.2.1"
@@ -4504,13 +5221,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"toggle-selection@npm:^1.0.6":
-  version: 1.0.6
-  resolution: "toggle-selection@npm:1.0.6"
-  checksum: 10c0/f2cf1f2c70f374fd87b0cdc8007453ba9e981c4305a8bf4eac10a30e62ecdfd28bca7d18f8f15b15a506bf8a7bfb20dbe3539f0fcf2a2c8396c1a78d53e1f179
-  languageName: node
-  linkType: hard
-
 "tome-kolmafia-lib@npm:^5.28118.0":
   version: 5.28118.0
   resolution: "tome-kolmafia-lib@npm:5.28118.0"
@@ -4567,13 +5277,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.4.0":
+"tslib@npm:^2.0.0":
   version: 2.8.0
   resolution: "tslib@npm:2.8.0"
   checksum: 10c0/31e4d14dc1355e9b89e4d3c893a18abb7f90b6886b089c2da91224d0a7752c79f3ddc41bc1aa0a588ac895bd97bb99c5bc2bfdb2f86de849f31caeb3ba79bbe5
   languageName: node
   linkType: hard
 
+"tslib@npm:^2.8.0":
+  version: 2.8.1
+  resolution: "tslib@npm:2.8.1"
+  checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62
+  languageName: node
+  linkType: hard
+
 "type-check@npm:^0.4.0, type-check@npm:~0.4.0":
   version: 0.4.0
   resolution: "type-check@npm:0.4.0"
@@ -4720,6 +5437,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"uqr@npm:0.1.2":
+  version: 0.1.2
+  resolution: "uqr@npm:0.1.2"
+  checksum: 10c0/40cd81b4c13f1764d52ec28da2d58e60816e6fae54d4eb75b32fbf3137937f438eff16c766139fb0faec5d248a5314591f5a0dbd694e569d419eed6f3bd80242
+  languageName: node
+  linkType: hard
+
 "uri-js@npm:^4.2.2":
   version: 4.4.1
   resolution: "uri-js@npm:4.4.1"
@@ -4729,37 +5453,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-callback-ref@npm:^1.3.0, use-callback-ref@npm:^1.3.2":
-  version: 1.3.2
-  resolution: "use-callback-ref@npm:1.3.2"
-  dependencies:
-    tslib: "npm:^2.0.0"
-  peerDependencies:
-    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 10c0/d232c37160fe3970c99255da19b5fb5299fb5926a5d6141d928a87feb47732c323d29be2f8137d3b1e5499c70d284cd1d9cfad703cc58179db8be24d7dd8f1f2
-  languageName: node
-  linkType: hard
-
-"use-sidecar@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "use-sidecar@npm:1.1.2"
-  dependencies:
-    detect-node-es: "npm:^1.1.0"
-    tslib: "npm:^2.0.0"
-  peerDependencies:
-    "@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 10c0/89f0018fd9aee1fc17c85ac18c4bf8944d460d453d0d0e04ddbc8eaddf3fa591e9c74a1f8a438a1bff368a7a2417fab380bdb3df899d2194c4375b0982736de0
-  languageName: node
-  linkType: hard
-
 "vite-node@npm:^2.1.4":
   version: 2.1.4
   resolution: "vite-node@npm:2.1.4"
@@ -4926,11 +5619,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "yorick@workspace:."
   dependencies:
-    "@chakra-ui/icons": "npm:^2.1.1"
-    "@chakra-ui/react": "npm:^2.8.2"
+    "@chakra-ui/react": "npm:^3.1.2"
     "@chakra-ui/system": "npm:^2.6.2"
     "@emotion/react": "npm:^11.13.3"
-    "@emotion/styled": "npm:^11.13.0"
     "@eslint/compat": "npm:^1.1.1"
     "@types/node": "npm:^22.5.0"
     "@types/react": "npm:^18.3.4"
@@ -4942,16 +5633,18 @@ __metadata:
     eslint-plugin-libram: "npm:^0.4.17"
     eslint-plugin-react-hooks: "npm:^5.0.0"
     eslint-plugin-unused-imports: "npm:^4.1.4"
-    framer-motion: "npm:^11.3.29"
     globals: "npm:^15.9.0"
     html-entities: "npm:^2.5.2"
     kolmafia: "npm:tome-kolmafia-mock@5.28118.0"
     libram: "npm:^0.9.18"
+    lucide-react: "npm:^0.460.0"
+    next-themes: "npm:^0.4.3"
     postcss: "npm:^8.4.41"
     prettier: "npm:^3.3.3"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
     react-error-boundary: "npm:^4.0.13"
+    react-icons: "npm:^5.3.0"
     react-router-dom: "npm:^6.26.1"
     tome-kolmafia-lib: "npm:^5.28118.0"
     tome-kolmafia-react: "npm:^0.2.5"