diff --git a/.design-sync/previews/Accordion.tsx b/.design-sync/previews/Accordion.tsx
index 608fa9a4c..bfc022e75 100644
--- a/.design-sync/previews/Accordion.tsx
+++ b/.design-sync/previews/Accordion.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@reactive-resume/ui/components/accordion";
 
 const wrap: React.CSSProperties = { width: 420, padding: 16 };
@@ -32,7 +33,7 @@ export const Sections = () => (
 
 export const MultipleOpen = () => (
 	<div style={wrap}>
-		<Accordion openMultiple defaultValue={["summary", "certifications"]}>
+		<Accordion multiple defaultValue={["summary", "certifications"]}>
 			<AccordionItem value="summary">
 				<AccordionTrigger>Professional Summary</AccordionTrigger>
 				<AccordionContent>
diff --git a/.design-sync/previews/Alert.tsx b/.design-sync/previews/Alert.tsx
index 1fae12aca..8e6eb49a6 100644
--- a/.design-sync/previews/Alert.tsx
+++ b/.design-sync/previews/Alert.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { InfoIcon, WarningIcon } from "@phosphor-icons/react";
 import { Alert, AlertAction, AlertDescription, AlertTitle } from "@reactive-resume/ui/components/alert";
 import { Button } from "@reactive-resume/ui/components/button";
diff --git a/.design-sync/previews/Attachment.tsx b/.design-sync/previews/Attachment.tsx
index d3c238878..ba1e9a17c 100644
--- a/.design-sync/previews/Attachment.tsx
+++ b/.design-sync/previews/Attachment.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { DownloadSimpleIcon, FileDocIcon, FilePdfIcon, TrashIcon, WarningIcon } from "@phosphor-icons/react";
 import {
 	Attachment,
diff --git a/.design-sync/previews/Avatar.tsx b/.design-sync/previews/Avatar.tsx
index a383e0e71..5fd40596d 100644
--- a/.design-sync/previews/Avatar.tsx
+++ b/.design-sync/previews/Avatar.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { CheckIcon } from "@phosphor-icons/react";
 import {
 	Avatar,
diff --git a/.design-sync/previews/Badge.tsx b/.design-sync/previews/Badge.tsx
index cee796b9e..7876e9805 100644
--- a/.design-sync/previews/Badge.tsx
+++ b/.design-sync/previews/Badge.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { CheckCircleIcon, PencilSimpleIcon, SparkleIcon } from "@phosphor-icons/react";
 import { Badge } from "@reactive-resume/ui/components/badge";
 
diff --git a/.design-sync/previews/BrandIcon.tsx b/.design-sync/previews/BrandIcon.tsx
index 4f4f84791..b77223cc2 100644
--- a/.design-sync/previews/BrandIcon.tsx
+++ b/.design-sync/previews/BrandIcon.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { BrandIcon } from "@reactive-resume/ui/components/brand-icon";
 
 // The component builds its src from /logo|/icon static paths that the preview
diff --git a/.design-sync/previews/Bubble.tsx b/.design-sync/previews/Bubble.tsx
index 83d7a8fc3..0dabba38a 100644
--- a/.design-sync/previews/Bubble.tsx
+++ b/.design-sync/previews/Bubble.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { Bubble, BubbleContent, BubbleGroup, BubbleReactions } from "@reactive-resume/ui/components/bubble";
 
 const wrap: React.CSSProperties = { display: "flex", flexDirection: "column", gap: 8, padding: 16, width: 420 };
diff --git a/.design-sync/previews/Button.tsx b/.design-sync/previews/Button.tsx
index c1a6c86ea..fc4e4f7ed 100644
--- a/.design-sync/previews/Button.tsx
+++ b/.design-sync/previews/Button.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { ArrowRightIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
 import { Button } from "@reactive-resume/ui/components/button";
 
diff --git a/.design-sync/previews/ButtonGroup.tsx b/.design-sync/previews/ButtonGroup.tsx
index b884c482c..aa5f1fffa 100644
--- a/.design-sync/previews/ButtonGroup.tsx
+++ b/.design-sync/previews/ButtonGroup.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import {
 	AlignCenterHorizontalIcon,
 	AlignLeftIcon,
diff --git a/.design-sync/previews/FormItem.tsx b/.design-sync/previews/FormItem.tsx
index d681153eb..ed8226964 100644
--- a/.design-sync/previews/FormItem.tsx
+++ b/.design-sync/previews/FormItem.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form";
 import { Input } from "@reactive-resume/ui/components/input";
 
diff --git a/.design-sync/previews/Input.tsx b/.design-sync/previews/Input.tsx
index 85f2bb4e4..77c8bf8ee 100644
--- a/.design-sync/previews/Input.tsx
+++ b/.design-sync/previews/Input.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { Input } from "@reactive-resume/ui/components/input";
 import { Label } from "@reactive-resume/ui/components/label";
 
diff --git a/.design-sync/previews/InputGroup.tsx b/.design-sync/previews/InputGroup.tsx
index a6001c474..a08cd74ae 100644
--- a/.design-sync/previews/InputGroup.tsx
+++ b/.design-sync/previews/InputGroup.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { CopyIcon, GlobeIcon, MagnifyingGlassIcon } from "@phosphor-icons/react";
 import {
 	InputGroup,
diff --git a/.design-sync/previews/Kbd.tsx b/.design-sync/previews/Kbd.tsx
index 29baf66b7..ac48ad70d 100644
--- a/.design-sync/previews/Kbd.tsx
+++ b/.design-sync/previews/Kbd.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { Kbd, KbdGroup } from "@reactive-resume/ui/components/kbd";
 
 const row: React.CSSProperties = { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 12, padding: 20 };
diff --git a/.design-sync/previews/Label.tsx b/.design-sync/previews/Label.tsx
index 87126f13f..ea3f4c7eb 100644
--- a/.design-sync/previews/Label.tsx
+++ b/.design-sync/previews/Label.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { Input } from "@reactive-resume/ui/components/input";
 import { Label } from "@reactive-resume/ui/components/label";
 import { Switch } from "@reactive-resume/ui/components/switch";
diff --git a/.design-sync/previews/Marker.tsx b/.design-sync/previews/Marker.tsx
index 5726be380..b2049287c 100644
--- a/.design-sync/previews/Marker.tsx
+++ b/.design-sync/previews/Marker.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { CheckCircleIcon, SparkleIcon, WarningCircleIcon } from "@phosphor-icons/react";
 import { Marker, MarkerContent, MarkerIcon } from "@reactive-resume/ui/components/marker";
 
diff --git a/.design-sync/previews/Message.tsx b/.design-sync/previews/Message.tsx
index 83c0b9c5e..b9ffc6ae8 100644
--- a/.design-sync/previews/Message.tsx
+++ b/.design-sync/previews/Message.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { SparkleIcon, UserIcon } from "@phosphor-icons/react";
 import { Bubble, BubbleContent } from "@reactive-resume/ui/components/bubble";
 import {
diff --git a/.design-sync/previews/MessageScroller.tsx b/.design-sync/previews/MessageScroller.tsx
index 0bf329391..987e43e7a 100644
--- a/.design-sync/previews/MessageScroller.tsx
+++ b/.design-sync/previews/MessageScroller.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { SparkleIcon, UserIcon } from "@phosphor-icons/react";
 import { Bubble, BubbleContent } from "@reactive-resume/ui/components/bubble";
 import { Message, MessageAvatar, MessageContent } from "@reactive-resume/ui/components/message";
diff --git a/.design-sync/previews/ResizableGroup.tsx b/.design-sync/previews/ResizableGroup.tsx
index ec81cedd7..593115301 100644
--- a/.design-sync/previews/ResizableGroup.tsx
+++ b/.design-sync/previews/ResizableGroup.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { ResizableGroup, ResizablePanel, ResizableSeparator } from "@reactive-resume/ui/components/resizable";
 
 const panelStyle: React.CSSProperties = { height: "100%", padding: 16, fontSize: 14, lineHeight: 1.6 };
diff --git a/.design-sync/previews/ScrollArea.tsx b/.design-sync/previews/ScrollArea.tsx
index b18f94c65..b2306757c 100644
--- a/.design-sync/previews/ScrollArea.tsx
+++ b/.design-sync/previews/ScrollArea.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { ScrollArea } from "@reactive-resume/ui/components/scroll-area";
 
 const templates = [
diff --git a/.design-sync/previews/Separator.tsx b/.design-sync/previews/Separator.tsx
index d36eeb61b..b726881c2 100644
--- a/.design-sync/previews/Separator.tsx
+++ b/.design-sync/previews/Separator.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { Separator } from "@reactive-resume/ui/components/separator";
 
 const block: React.CSSProperties = {
diff --git a/.design-sync/previews/Skeleton.tsx b/.design-sync/previews/Skeleton.tsx
index de1d9153b..69c75f80b 100644
--- a/.design-sync/previews/Skeleton.tsx
+++ b/.design-sync/previews/Skeleton.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { Skeleton } from "@reactive-resume/ui/components/skeleton";
 
 const pad: React.CSSProperties = { padding: 20 };
diff --git a/.design-sync/previews/Slider.tsx b/.design-sync/previews/Slider.tsx
index c98d31153..efda3009d 100644
--- a/.design-sync/previews/Slider.tsx
+++ b/.design-sync/previews/Slider.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { Label } from "@reactive-resume/ui/components/label";
 import { Slider } from "@reactive-resume/ui/components/slider";
 
diff --git a/.design-sync/previews/Spinner.tsx b/.design-sync/previews/Spinner.tsx
index 285e0efe1..6f0b2c0b8 100644
--- a/.design-sync/previews/Spinner.tsx
+++ b/.design-sync/previews/Spinner.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { Spinner } from "@reactive-resume/ui/components/spinner";
 
 const row: React.CSSProperties = { display: "flex", alignItems: "center", gap: 20, padding: 24 };
diff --git a/.design-sync/previews/Switch.tsx b/.design-sync/previews/Switch.tsx
index ddb015190..0590a7ac9 100644
--- a/.design-sync/previews/Switch.tsx
+++ b/.design-sync/previews/Switch.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { Label } from "@reactive-resume/ui/components/label";
 import { Switch } from "@reactive-resume/ui/components/switch";
 
diff --git a/.design-sync/previews/Tabs.tsx b/.design-sync/previews/Tabs.tsx
index 0e0fdaf14..dd26c6974 100644
--- a/.design-sync/previews/Tabs.tsx
+++ b/.design-sync/previews/Tabs.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { BriefcaseIcon, GraduationCapIcon, SparkleIcon } from "@phosphor-icons/react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@reactive-resume/ui/components/tabs";
 
diff --git a/.design-sync/previews/Textarea.tsx b/.design-sync/previews/Textarea.tsx
index 717f90a26..dd5612ebd 100644
--- a/.design-sync/previews/Textarea.tsx
+++ b/.design-sync/previews/Textarea.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import { Label } from "@reactive-resume/ui/components/label";
 import { Textarea } from "@reactive-resume/ui/components/textarea";
 
diff --git a/.design-sync/previews/Toggle.tsx b/.design-sync/previews/Toggle.tsx
index 11aa2cff9..1419bd39f 100644
--- a/.design-sync/previews/Toggle.tsx
+++ b/.design-sync/previews/Toggle.tsx
@@ -1,3 +1,4 @@
+import type * as React from "react";
 import {
 	TextAlignCenterIcon,
 	TextAlignLeftIcon,