chore: ⬆️ Upgrade dependencies

components/Code.tsx

@@ -5,9 +5,9 @@ import clsx from "clsx";
 import {
     Children,
     type ComponentPropsWithoutRef,
-    type ReactNode,
     createContext,
     isValidElement,
+    type ReactNode,
     useContext,
     useEffect,
     useRef,
@@ -144,7 +144,6 @@ function CodePanel({
     label?: string;
     code?: string;
 }) {
-    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     const child = Children.only(children) as ReactNode & { props: any };
 
     if (isValidElement(child)) {
@@ -207,8 +206,7 @@ function CodeGroupHeader({
                         >
                             {getPanelTitle(
                                 isValidElement(child)
-                                    ? // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-                                      (child.props as any)
+                                    ? (child.props as any)
                                     : {},
                             )}
                         </Tab>
@@ -326,7 +324,6 @@ export function CodeGroup({
 }: ComponentPropsWithoutRef<typeof CodeGroupPanels> & { title: string }) {
     const languages =
         Children.map(children, (child) =>
-            // biome-ignore lint/suspicious/noExplicitAny: <explanation>
             getPanelTitle(isValidElement(child) ? (child.props as any) : {}),
         ) ?? [];
     const tabGroupProps = useTabGroupProps(languages);
@@ -375,8 +372,8 @@ export function Code({ children, ...props }: ComponentPropsWithoutRef<"code">) {
             );
         }
         return (
-            // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
-            // biome-ignore lint/style/useNamingConvention: <explanation>
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: HTML is trusted
+            // biome-ignore lint/style/useNamingConvention: Biome incorrectly tags this as bad naming
             <code {...props} dangerouslySetInnerHTML={{ __html: children }} />
         );
     }

components/Feedback.tsx

@@ -59,7 +59,6 @@ const FeedbackForm = forwardRef<
 });
 
 const FeedbackThanks = forwardRef<ComponentRef<"div">>(
-    // biome-ignore lint/style/useNamingConvention: <explanation>
     function FeedbackThanks(_props, ref) {
         return (
             <div

components/Footer.tsx

@@ -1,9 +1,8 @@
 "use client";
 
+import { Icon } from "@iconify-icon/react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-
-import { Icon } from "@iconify-icon/react";
 import type { ReactNode } from "react";
 import { Button } from "./Button";
 import { navigation } from "./Navigation";

components/GridPattern.tsx

@@ -37,7 +37,7 @@ export function GridPattern({
                 fill={`url(#${patternId})`}
             />
             {squares && (
-                // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
+                // biome-ignore lint/a11y/noSvgWithoutTitle: it's decoration
                 <svg
                     x={x}
                     y={y}

components/Guides.tsx

@@ -19,7 +19,11 @@ export function Guide({
     href,
     name,
     description,
-}: { href: string; name: string; description: string }) {
+}: {
+    href: string;
+    name: string;
+    description: string;
+}) {
     return (
         <div>
             <h3 className="text-sm font-semibold text-zinc-900 dark:text-white">

components/Header.tsx

@@ -2,10 +2,10 @@ import clsx from "clsx";
 import { motion, useScroll, useTransform } from "framer-motion";
 import Link from "next/link";
 import {
-    type CSSProperties,
     type ComponentRef,
-    type ReactNode,
+    type CSSProperties,
     forwardRef,
+    type ReactNode,
 } from "react";
 
 import { Button } from "./Button";
@@ -13,8 +13,8 @@ import { Logo } from "./Logo";
 import {
     MobileNavigation,
     useIsInsideMobileNavigation,
+    useMobileNavigationStore,
 } from "./MobileNavigation";
-import { useMobileNavigationStore } from "./MobileNavigation";
 import { MobileSearch, Search } from "./Search";
 import { ThemeToggle } from "./ThemeToggle";
 

components/MobileNavigation.tsx

@@ -11,9 +11,9 @@ import { motion } from "framer-motion";
 import { usePathname, useSearchParams } from "next/navigation";
 import {
     type ComponentPropsWithoutRef,
+    createContext,
     type MouseEvent,
     Suspense,
-    createContext,
     useContext,
     useEffect,
     useRef,

components/Navigation.tsx

@@ -208,8 +208,8 @@ function NavigationGroup({
                             <AnimatePresence mode="popLayout" initial={false}>
                                 {link.href === pathname &&
                                     sections.length > 0 && (
+                                        // biome-ignore lint/a11y/useSemanticElements: already a <ul>
                                         <motion.ul
-                                            // biome-ignore lint/a11y/useSemanticElements: already a <ul>
                                             role="list"
                                             initial={{ opacity: 0 }}
                                             animate={{

components/Property.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { type ReactNode, createContext, useContext } from "react";
+import { createContext, type ReactNode, useContext } from "react";
 import { AnchorIcon } from "./Heading";
 
 export const PropertyContext = createContext<{
@@ -13,7 +13,10 @@ export const PropertyContext = createContext<{
 export function Properties({
     children,
     name,
-}: { children: ReactNode; name: string }) {
+}: {
+    children: ReactNode;
+    name: string;
+}) {
     return (
         <div className="my-6">
             <ul className="m-0! max-w-[calc(var(--container-lg)-(--spacing(8)))] list-none divide-y divide-zinc-900/5 p-0 dark:divide-white/5">

components/Resources.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Icon } from "@iconify-icon/react";
 import {
     type MotionValue,
     motion,
@@ -7,8 +8,6 @@ import {
     useMotionValue,
 } from "framer-motion";
 import Link from "next/link";
-
-import { Icon } from "@iconify-icon/react";
 import type { ComponentPropsWithoutRef, MouseEvent } from "react";
 import { GridPattern } from "./GridPattern";
 import { Heading } from "./Heading";

components/Search.tsx

@@ -19,11 +19,11 @@ import {
     type ComponentPropsWithoutRef,
     type ComponentRef,
     Fragment,
+    forwardRef,
     type MouseEvent,
     type KeyboardEvent as ReactKeyboardEvent,
     Suspense,
     type SyntheticEvent,
-    forwardRef,
     useCallback,
     useEffect,
     useId,
@@ -164,7 +164,6 @@ function LoadingIcon(props: ComponentPropsWithoutRef<"svg">) {
 
 function HighlightQuery({ text, query }: { text: string; query: string }) {
     return (
-        // @ts-ignore
         <Highlighter
             highlightClassName="underline bg-transparent text-brand-500"
             searchWords={[query]}

components/SectionProvider.tsx

@@ -1,15 +1,15 @@
 "use client";
 
 import {
+    createContext,
     type ReactNode,
     type RefObject,
-    createContext,
     useContext,
     useEffect,
     useLayoutEffect,
     useState,
 } from "react";
-import { type StoreApi, createStore, useStore } from "zustand";
+import { createStore, type StoreApi, useStore } from "zustand";
 
 import { remToPx } from "../lib/remToPx";
 

components/mdx.tsx

@@ -6,10 +6,9 @@ import { Heading } from "./Heading";
 import { Prose } from "./Prose";
 
 export const a = Link;
-// biome-ignore lint/performance/noBarrelFile: <explanation>
 export { Button } from "./Button";
-export { CodeGroup, Code as code, Pre as pre } from "./Code";
-export { Property, Properties } from "./Property";
+export { Code as code, CodeGroup, Pre as pre } from "./Code";
+export { Properties, Property } from "./Property";
 
 export function wrapper({ children }: { children: ReactNode }) {
     return (