diff --git a/components/Callout.jsx b/components/Callout.jsx
index f6e39aa..e459ea9 100644
--- a/components/Callout.jsx
+++ b/components/Callout.jsx
@@ -27,7 +27,7 @@ export function Callout({ type = 'note', title, children }) {
 
   return (
     <div className={clsx('my-8 flex rounded-3xl p-6', styles[type].container)}>
-      <IconComponent className="h-8 w-8 flex-none" />
+      <IconComponent className="size-8 flex-none" />
       <div className="ml-4 flex-auto">
         <p className={clsx('m-0 font-display text-xl', styles[type].title)}>
           {title}
diff --git a/components/DocsSidebarNavigation.jsx b/components/DocsSidebarNavigation.jsx
index d1ca716..243d8ed 100644
--- a/components/DocsSidebarNavigation.jsx
+++ b/components/DocsSidebarNavigation.jsx
@@ -25,7 +25,7 @@ export function DocsSidebarNavigation({ className, data, navigation }) {
     if (!currentNode) {
       return false;
     }
-  
+
     return section.links.some(link => link.href.includes(currentNode.uri));
   };
 
@@ -61,7 +61,7 @@ export function DocsSidebarNavigation({ className, data, navigation }) {
               >
                 <svg
                   className={clsx(
-                    'h-4 w-4 transition-transform',
+                    'size-4 transition-transform',
                     expandedSections[section.title] && 'rotate-180'
                   )}
                   xmlns="http://www.w3.org/2000/svg"
diff --git a/components/MobileNavigation.jsx b/components/MobileNavigation.jsx
index e9a3b12..db9429f 100644
--- a/components/MobileNavigation.jsx
+++ b/components/MobileNavigation.jsx
@@ -64,7 +64,7 @@ export function MobileNavigation({ navigation }) {
         className="relative"
         aria-label="Open navigation"
       >
-        <MenuIcon className="h-6 w-6 stroke-slate-500" />
+        <MenuIcon className="size-6 stroke-slate-500" />
       </button>
       <Dialog
         open={isOpen}
@@ -79,7 +79,7 @@ export function MobileNavigation({ navigation }) {
               onClick={() => setIsOpen(false)}
               aria-label="Close navigation"
             >
-              <CloseIcon className="h-6 w-6 stroke-slate-500" />
+              <CloseIcon className="size-6 stroke-slate-500" />
             </button>
             <Link href="/" className="ml-6" aria-label="Home page">
               <Logo className="h-auto w-9" />
diff --git a/components/PrimaryNavigation.jsx b/components/PrimaryNavigation.jsx
index 51981ba..2de4c41 100644
--- a/components/PrimaryNavigation.jsx
+++ b/components/PrimaryNavigation.jsx
@@ -63,7 +63,7 @@ export function PrimaryNavigation({ navigation }) {
                         <li className="row-span-3" key={sublink.id}>
                           <NavigationMenuLink asChild>
                             <Link
-                              className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                              className="flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
                               href={sublink.href}
                               target={sublink?.target ?? null}
                             >
diff --git a/components/QuickLinks.jsx b/components/QuickLinks.jsx
index 0ea3dee..2e38467 100644
--- a/components/QuickLinks.jsx
+++ b/components/QuickLinks.jsx
@@ -15,7 +15,7 @@ export function QuickLink({ title, description, href, icon }) {
     <div className="group relative rounded-xl border border-slate-200 dark:border-slate-800">
       <div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.sky.500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:theme(colors.slate.800)]" />
       <div className="relative overflow-hidden rounded-xl p-6">
-        <Icon icon={icon} className="h-8 w-8" />
+        <Icon icon={icon} className="size-8" />
         <h2 className="mt-4 font-display text-base text-slate-900 dark:text-white">
           <Link href={href}>
             <span className="absolute -inset-px rounded-xl" />
diff --git a/components/Search.jsx b/components/Search.jsx
index adcd3f0..c1641e3 100644
--- a/components/Search.jsx
+++ b/components/Search.jsx
@@ -124,13 +124,13 @@ export function Search({ ...props }) {
 
   return (
     <button
-      className="group flex h-6 w-6 items-center justify-center sm:justify-start md:h-auto md:w-80 md:flex-none md:rounded-lg md:py-2.5 md:pl-4 md:pr-3.5 md:text-sm md:ring-1 md:ring-slate-200 md:hover:ring-slate-300 dark:md:bg-slate-800/75 dark:md:ring-inset dark:md:ring-white/5 dark:md:hover:bg-slate-700/40 dark:md:hover:ring-slate-500 lg:w-96"
+      className="group flex size-6 items-center justify-center sm:justify-start md:h-auto md:w-80 md:flex-none md:rounded-lg md:py-2.5 md:pl-4 md:pr-3.5 md:text-sm md:ring-1 md:ring-slate-200 md:hover:ring-slate-300 dark:md:bg-slate-800/75 dark:md:ring-inset dark:md:ring-white/5 dark:md:hover:bg-slate-700/40 dark:md:hover:ring-slate-500 lg:w-96"
       type="button"
       ref={searchButtonRef}
       onClick={onOpen}
       {...props}
     >
-      <SearchIcon className="h-5 w-5 flex-none fill-slate-400 group-hover:fill-slate-500 dark:fill-slate-500 md:group-hover:fill-slate-400" />
+      <SearchIcon className="size-5 flex-none fill-slate-400 group-hover:fill-slate-500 dark:fill-slate-500 md:group-hover:fill-slate-400" />
         <span className="sr-only md:not-sr-only md:ml-2 md:text-slate-500 md:dark:text-slate-400">
           Search docs
         </span>
diff --git a/components/SiteHeader.jsx b/components/SiteHeader.jsx
index 9f582e2..9a465d8 100644
--- a/components/SiteHeader.jsx
+++ b/components/SiteHeader.jsx
@@ -58,14 +58,14 @@ export function SiteHeader({ navigation, isNoticeVisible = false }) {
           className="group"
           aria-label="GitHub"
         >
-          <GitHubIcon className="h-6 w-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
+          <GitHubIcon className="size-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
         </Link>
         <Link
           href="https://github.com/wp-graphql/wpgraphql-acf"
           className="group"
           aria-label="GitHub"
         >
-          <WordPressIcon className="h-6 w-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
+          <WordPressIcon className="size-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
         </Link>
       </div>
     </header>
diff --git a/components/ThemeSelector.jsx b/components/ThemeSelector.jsx
index 6c28da3..dabca58 100644
--- a/components/ThemeSelector.jsx
+++ b/components/ThemeSelector.jsx
@@ -1,9 +1,9 @@
 "use client"
- 
+
 import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
 import { useTheme } from "next-themes"
 import * as React from "react"
- 
+
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
@@ -11,16 +11,16 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
- 
+
 export function ModeToggle() {
   const { setTheme } = useTheme()
- 
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="outline" size="icon">
-          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <SunIcon className="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <MoonIcon className="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
@@ -37,4 +37,4 @@ export function ModeToggle() {
       </DropdownMenuContent>
     </DropdownMenu>
   )
-}
\ No newline at end of file
+}
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
index 0a65dcc..3a309e9 100644
--- a/components/ui/accordion.tsx
+++ b/components/ui/accordion.tsx
@@ -34,7 +34,7 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+      <ChevronDownIcon className="size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))
diff --git a/components/ui/context-menu.jsx b/components/ui/context-menu.jsx
index 946532d..e909b9b 100644
--- a/components/ui/context-menu.jsx
+++ b/components/ui/context-menu.jsx
@@ -26,7 +26,7 @@ const ContextMenuSubTrigger = React.forwardRef(({ className, inset, children, ..
     )}
     {...props}>
     {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+    <ChevronRight className="ml-auto size-4" />
   </ContextMenuPrimitive.SubTrigger>
 ))
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
@@ -76,9 +76,9 @@ const ContextMenuCheckboxItem = React.forwardRef(({ className, children, checked
     )}
     checked={checked}
     {...props}>
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className="size-4" />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -95,9 +95,9 @@ const ContextMenuRadioItem = React.forwardRef(({ className, children, ...props }
       className
     )}
     {...props}>
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
+        <Circle className="size-2 fill-current" />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
index 6aae945..08a43bd 100644
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -38,7 +38,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
+    <ChevronRightIcon className="ml-auto size-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName =
@@ -110,9 +110,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <CheckIcon className="size-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -133,9 +133,9 @@ const DropdownMenuRadioItem = React.forwardRef<
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-4 w-4 fill-current" />
+        <DotFilledIcon className="size-4 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx
index d45d53d..154ba3a 100644
--- a/components/ui/navigation-menu.tsx
+++ b/components/ui/navigation-menu.tsx
@@ -55,7 +55,7 @@ const NavigationMenuTrigger = React.forwardRef<
   >
     {children}{' '}
     <ChevronDown
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      className="relative top-px ml-1 size-3 transition duration-200 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuPrimitive.Trigger>
@@ -109,7 +109,7 @@ const NavigationMenuIndicator = React.forwardRef<
     )}
     {...props}
   >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    <div className="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 ))
 NavigationMenuIndicator.displayName =
diff --git a/wp-blocks/AcfFieldTypeSettingsBlock.js b/wp-blocks/AcfFieldTypeSettingsBlock.js
index 640105c..977957a 100644
--- a/wp-blocks/AcfFieldTypeSettingsBlock.js
+++ b/wp-blocks/AcfFieldTypeSettingsBlock.js
@@ -4,17 +4,17 @@ import React, { useState } from 'react';
 import { Button } from "@/components/ui/button";
 import { Card, CardFooter, CardHeader } from "@/components/ui/card";
 
-const AccordionItem = ({ title, content, isOpen, onClick }) => { 
+const AccordionItem = ({ title, content, isOpen, onClick }) => {
   return (
     <>
       <Button onClick={onClick} variant="primary" className="flex w-full items-center justify-between py-2 text-left">
         {title}
-        <svg 
-          xmlns="http://www.w3.org/2000/svg" 
-          className="h-4 w-4 transition duration-300" 
-          style={{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }} 
-          fill="none" 
-          viewBox="0 0 24 24" 
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="size-4 transition duration-300"
+          style={{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }}
+          fill="none"
+          viewBox="0 0 24 24"
           stroke="currentColor"
         >
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
@@ -34,8 +34,8 @@ export function AcfFieldTypeSettingsBlock({ fieldTypeSettingsBlockFields }) {
   const [openItems, setOpenItems] = useState([]);
 
   const toggleItem = (index) => {
-    setOpenItems(current => current.includes(index) 
-      ? current.filter(item => item !== index) 
+    setOpenItems(current => current.includes(index)
+      ? current.filter(item => item !== index)
       : [...current, index]);
   };