diff --git a/bun.lockb b/bun.lockb
index 2dace430..7758d11a 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/docs/collections/grid-list-demo.tsx b/components/docs/collections/grid-list-demo.tsx
index 61c7c22a..de512a47 100644
--- a/components/docs/collections/grid-list-demo.tsx
+++ b/components/docs/collections/grid-list-demo.tsx
@@ -4,7 +4,12 @@ import { GridList } from "ui"
 
 export default function GridListDemo() {
   return (
-    <GridList items={items} aria-label="Select your favorite bands" className="min-w-64">
+    <GridList
+      selectionMode="single"
+      items={items}
+      aria-label="Select your favorite bands"
+      className="min-w-64"
+    >
       {(item) => <GridList.Item id={item.id}>{item.name}</GridList.Item>}
     </GridList>
   )
diff --git a/components/docs/collections/list-box-controlled-demo.tsx b/components/docs/collections/list-box-controlled-demo.tsx
index 6df76f56..fdf7d0db 100644
--- a/components/docs/collections/list-box-controlled-demo.tsx
+++ b/components/docs/collections/list-box-controlled-demo.tsx
@@ -6,15 +6,15 @@ import type { Selection } from "react-aria-components"
 import { Description, ListBox } from "ui"
 
 export default function ListBoxControlledDemo() {
-  const [selected, setSelected] = React.useState<Selection>(new Set(["2"]))
+  const [selected, setSelected] = React.useState<Selection>(new Set([1]))
   return (
     <>
       <ListBox
         selectedKeys={selected}
         onSelectionChange={setSelected}
         items={fruits}
-        selectionMode="single"
         aria-label="Fruits"
+        selectionMode="single"
       >
         {(fruit) => (
           <ListBox.Item id={fruit.id} textValue={fruit.name}>
@@ -23,7 +23,11 @@ export default function ListBoxControlledDemo() {
         )}
       </ListBox>
 
-      {selected && <Description className="mt-4 block">Selected: {selected}</Description>}
+      {selected && (
+        <Description className="mt-4 block [&>strong]:font-medium [&>strong]:text-fg">
+          Selected: <strong>{selected}</strong>
+        </Description>
+      )}
     </>
   )
 }
diff --git a/components/docs/collections/list-box-disabled-demo.tsx b/components/docs/collections/list-box-disabled-demo.tsx
index 263720e0..a0c3a7b5 100644
--- a/components/docs/collections/list-box-disabled-demo.tsx
+++ b/components/docs/collections/list-box-disabled-demo.tsx
@@ -2,7 +2,7 @@
 
 import { ListBox } from "ui"
 
-export default function ListBoxControlledDemo() {
+export default function ListBoxDisabledDemo() {
   return (
     <>
       <ListBox
diff --git a/components/docs/collections/list-box-item-details-demo.tsx b/components/docs/collections/list-box-item-details-demo.tsx
index 0ccb217d..1ffe1136 100644
--- a/components/docs/collections/list-box-item-details-demo.tsx
+++ b/components/docs/collections/list-box-item-details-demo.tsx
@@ -1,10 +1,19 @@
 "use client"
 
+import React from "react"
+
+import type { Selection } from "react-aria-components"
 import { ListBox } from "ui"
 
 export default function ListBoxItemDetailsDemo() {
+  const [selected, setSelected] = React.useState<Selection>(new Set([1]))
   return (
-    <ListBox defaultSelectedKeys={[2]} items={roles} aria-label="Bands">
+    <ListBox
+      selectedKeys={selected}
+      onSelectionChange={setSelected}
+      items={roles}
+      aria-label="Bands"
+    >
       {(item) => (
         <ListBox.Item id={item.id}>
           <ListBox.ItemDetails label={item.name} description={item.description} />
diff --git a/components/docs/collections/list-box-multiple-demo.tsx b/components/docs/collections/list-box-multiple-demo.tsx
index 67a3cdbd..79e7e1f3 100644
--- a/components/docs/collections/list-box-multiple-demo.tsx
+++ b/components/docs/collections/list-box-multiple-demo.tsx
@@ -5,8 +5,8 @@ import React from "react"
 import type { Selection } from "react-aria-components"
 import { Description, ListBox } from "ui"
 
-export default function ListBoxControlledDemo() {
-  const [selected, setSelected] = React.useState<Selection>(new Set(["2"]))
+export default function ListBoxMultipleDemo() {
+  const [selected, setSelected] = React.useState<Selection>(new Set([3]))
   return (
     <>
       <ListBox
diff --git a/components/docs/collections/list-box-section-demo.tsx b/components/docs/collections/list-box-section-demo.tsx
index 0ed806dc..ec62e718 100644
--- a/components/docs/collections/list-box-section-demo.tsx
+++ b/components/docs/collections/list-box-section-demo.tsx
@@ -7,7 +7,8 @@ export default function ListBoxSectionDemo() {
     <ListBox items={bands} aria-label="Bands" selectionMode="multiple">
       {(item) => (
         <ListBox.Section items={item.albums} title={item.name} id={item.id}>
-          {(album) => <ListBox.Item key={album.id}>{album.name}</ListBox.Item>}
+          {/*@ts-expect-error: ts ^5.5.4*/}
+          {(album) => <ListBox.Item id={album.id}>{album.name}</ListBox.Item>}
         </ListBox.Section>
       )}
     </ListBox>
diff --git a/components/docs/generated/previews.ts b/components/docs/generated/previews.ts
index 73142dd2..daaff9f0 100644
--- a/components/docs/generated/previews.ts
+++ b/components/docs/generated/previews.ts
@@ -2,7 +2,7 @@
 // This file is autogenerated by scripts/create-pr-content.ts.
 // Do not edit this file directly.
 
-import React from 'react';
+import React from 'react'
 
 export const previews: Record<string, any> = {
   "date-and-time/date-field-demo": {
diff --git a/components/docs/pickers/combo-box-section-demo.tsx b/components/docs/pickers/combo-box-section-demo.tsx
index ca34f96e..f763807b 100644
--- a/components/docs/pickers/combo-box-section-demo.tsx
+++ b/components/docs/pickers/combo-box-section-demo.tsx
@@ -6,7 +6,7 @@ export default function ComboBoxSectionDemo() {
   return (
     <ComboBox placeholder="Select a author" label="Authors">
       <ComboBox.Input />
-      <ComboBox.List items={movies}>
+      <ComboBox.List defaultSelectedKeys={[1]} items={movies}>
         {(movie) => (
           <ComboBox.Section title={movie.title} items={movie.genres}>
             {(genre) => <ComboBox.Option textValue={genre.name}>{genre.name}</ComboBox.Option>}
diff --git a/components/docs/pickers/select-section-demo.tsx b/components/docs/pickers/select-section-demo.tsx
index 666b0574..ab26560b 100644
--- a/components/docs/pickers/select-section-demo.tsx
+++ b/components/docs/pickers/select-section-demo.tsx
@@ -4,7 +4,7 @@ import { Select } from "ui"
 
 export default function SelectSectionDemo() {
   return (
-    <Select aria-label="Countries" placeholder="Select a country">
+    <Select defaultSelectedKey={1} aria-label="Countries" placeholder="Select a country">
       <Select.Trigger />
       <Select.List items={countries}>
         {(country) => (
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
index 6aa88af0..0275cd40 100644
--- a/components/ui/badge.tsx
+++ b/components/ui/badge.tsx
@@ -6,7 +6,7 @@ import { tv, type VariantProps } from "tailwind-variants"
 
 const badgeIntents = {
   primary:
-    "ring-primary/30 bg-primary/10 dark:bg-primary/20 text-primary dark:text-primary-300 hover:bg-primary/15 dark:hover:bg-primary/10",
+    "ring-primary/30 bg-primary/10 dark:bg-primary/20 text-primary dark:text-primary hover:bg-primary/15 dark:hover:bg-primary/10",
   secondary: "bg-secondary/50 dark:bg-secondary/70 ring-secondary-fg/20 text-secondary-fg",
   success:
     "dark:ring-success/30 ring-success/40 bg-success/10 dark:bg-success/15 text-success hover:bg-success/15 dark:hover:bg-success/10",
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
index 3e4f4c2f..21ee5172 100644
--- a/components/ui/drawer.tsx
+++ b/components/ui/drawer.tsx
@@ -98,7 +98,7 @@ const DrawerContentPrimitive = ({ children, ...props }: DrawerOverlayPrimitivePr
       >
         <ModalPrimitive
           className={twJoin(
-            "max-h-full flex flex-col w-full rounded-t-2xl sm:rounded-lg overflow-hidden bg-overlay text-overlay-fg text-left align-middle shadow-lg",
+            "max-h-full flex flex-col w-full rounded-t-3xl sm:rounded-lg overflow-hidden bg-overlay text-overlay-fg text-left align-middle shadow-lg",
             "ring-1 ring-zinc-950/5 dark:ring-white/15"
           )}
           initial={{ y: h }}
diff --git a/components/ui/dropdown.tsx b/components/ui/dropdown.tsx
index d6ca39a7..34f18b85 100644
--- a/components/ui/dropdown.tsx
+++ b/components/ui/dropdown.tsx
@@ -19,7 +19,7 @@ import { cn, cr } from "./primitive"
 
 const dropdownItemStyles = tv({
   base: [
-    "group flex cursor-default select-none items-center gap-x-1.5 rounded-md py-2 pl-8 relative pr-1 text-base outline outline-0 forced-color-adjust-none lg:text-sm",
+    "group flex cursor-default select-none items-center gap-x-1.5 rounded-[calc(var(--radius)-1px)] py-2 pl-2.5 relative pr-1.5 text-base outline outline-0 forced-color-adjust-none lg:text-sm",
     "[&_[data-slot=avatar]]:-mr-0.5 [&_[data-slot=avatar]]:size-6 sm:[&_[data-slot=avatar]]:size-5",
     "[&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:shrink-0",
     "has-submenu:open:data-[danger=true]:bg-danger/20 has-submenu:open:data-[danger=true]:text-danger",
@@ -55,17 +55,18 @@ interface DropdownSectionProps<T> extends SectionProps<T> {
 
 const dropdownSectionStyles = tv({
   slots: {
-    base: "first:-mt-[5px] xss3 after:content-[''] after:block after:h-[5px]",
+    section:
+      "first:-mt-[5px] xss3 flex flex-col gap-y-0.5 after:content-[''] after:block after:h-[5px]",
     header:
-      "text-sm font-medium text-muted-fg bg-tertiary px-4 py-2 truncate min-w-[--trigger-width] sticky -top-[5px] backdrop-blur -mt-px -mx-1 z-10 supports-[-moz-appearance:none]:bg-tertiary border-y [&+*]:mt-1"
+      "text-sm font-medium text-muted-fg bg-tertiary px-4 py-2 truncate min-w-[--trigger-width] sticky -top-[5px] backdrop-blur -mt-px -mb-0.5 -mx-1 z-10 supports-[-moz-appearance:none]:bg-tertiary border-y [&+*]:mt-1"
   }
 })
 
-const { base, header } = dropdownSectionStyles()
+const { section, header } = dropdownSectionStyles()
 
 const DropdownSection = <T extends object>({ className, ...props }: DropdownSectionProps<T>) => {
   return (
-    <Section className={base(className)}>
+    <Section className={section({ className })}>
       {"title" in props && <Header className={header()}>{props.title}</Header>}
       <Collection items={props.items}>{props.children}</Collection>
     </Section>
@@ -85,15 +86,15 @@ const DropdownItem = ({ className, ...props }: ListBoxItemProps) => {
     >
       {cr(props.children, (children, { isSelected }) => (
         <>
+          <span className="flex flex-1 items-center gap-2 truncate font-normal group-selected:font-medium">
+            {children}
+          </span>
+
           {isSelected && (
-            <span className="absolute left-2 top-3 lg:top-2.5">
+            <span className="absolute right-2 top-3 lg:top-2.5">
               <IconCheck />
             </span>
           )}
-
-          <span className="flex flex-1 items-center gap-2 truncate font-normal group-selected:font-medium">
-            {children}
-          </span>
         </>
       ))}
     </ListBoxItemPrimitive>
diff --git a/components/ui/field.tsx b/components/ui/field.tsx
index c51ae42e..4cbfe457 100644
--- a/components/ui/field.tsx
+++ b/components/ui/field.tsx
@@ -1,24 +1,16 @@
-"use client"
-
-import * as React from "react"
-
-import {
-  FieldError as FieldErrorPrimitive,
-  type FieldErrorProps,
-  Group,
-  type GroupProps,
-  Input as InputPrimitive,
-  type InputProps,
-  Label as LabelPrimitive,
-  type LabelProps,
-  Text,
-  type TextFieldProps as TextFieldPrimitiveProps,
-  type TextProps,
-  type ValidationResult
-} from "react-aria-components"
-import { tv } from "tailwind-variants"
-
-import { cr, ctr } from "./primitive"
+'use client';
+
+import * as React from 'react';
+
+
+
+import { FieldError as FieldErrorPrimitive, type FieldErrorProps, Group, type GroupProps, Input as InputPrimitive, type InputProps, Label as LabelPrimitive, type LabelProps, Text, type TextFieldProps as TextFieldPrimitiveProps, type TextProps, type ValidationResult } from 'react-aria-components';
+import { tv } from 'tailwind-variants';
+
+
+
+import { cr, ctr } from './primitive';
+
 
 // primitive styles
 
diff --git a/components/ui/grid-list.tsx b/components/ui/grid-list.tsx
index cf7a6556..e4aa4223 100644
--- a/components/ui/grid-list.tsx
+++ b/components/ui/grid-list.tsx
@@ -11,22 +11,14 @@ import { Button, GridList as GridListPrimitive, GridListItem } from "react-aria-
 import { tv } from "tailwind-variants"
 
 import { Checkbox } from "./checkbox"
-import { composeTailwindRenderProps, focusRing } from "./primitive"
+import { cr, ctr, focusRing } from "./primitive"
 
 interface GridListProps<T extends object> extends GridListPrimitiveProps<T> {}
 
-const GridList = <T extends object>({
-  selectionMode = "single",
-  children,
-  ...props
-}: GridListProps<T>) => (
+const GridList = <T extends object>({ children, className, ...props }: GridListProps<T>) => (
   <GridListPrimitive
-    selectionMode={selectionMode}
+    className={ctr(className, "relative overflow-auto rounded-lg border")}
     {...props}
-    className={composeTailwindRenderProps(
-      props.className,
-      "relative overflow-auto rounded-lg border"
-    )}
   >
     {children}
   </GridListPrimitive>
@@ -36,9 +28,12 @@ const itemStyles = tv({
   extend: focusRing,
   base: "relative -mb-px flex cursor-default select-none gap-3 border-y px-3 py-2 text-sm text-fg -outline-offset-2 first:rounded-t-md first:border-t-0 last:mb-0 last:rounded-b-md last:border-b-0",
   variants: {
+    isHovered: { true: "bg-secondary dark:bg-secondary/60" },
     isSelected: {
-      false: "hover:bg-secondary",
-      true: "z-20 border-y-primary/50 bg-primary/20"
+      true: "z-20 border-y-accent/50 bg-accent/10 hover:bg-accent/15 dark:bg-accent/20 dark:hover:bg-accent/25"
+    },
+    isFocusVisible: {
+      true: "z-20 border-y-accent bg-accent/5 selected:bg-accent/10 hover:bg-accent/15 dark:selected:bg-accent/20 dark:hover:bg-accent/25"
     },
     isDisabled: {
       true: "z-10 text-muted-fg forced-colors:text-[GrayText]"
@@ -46,10 +41,16 @@ const itemStyles = tv({
   }
 })
 
-const Item = ({ children, ...props }: GridListItemProps) => {
+const Item = ({ children, className, ...props }: GridListItemProps) => {
   const textValue = typeof children === "string" ? children : undefined
   return (
-    <GridListItem textValue={textValue} {...props} className={itemStyles}>
+    <GridListItem
+      textValue={textValue}
+      {...props}
+      className={cr(className, (className, renderProps) =>
+        itemStyles({ ...renderProps, className })
+      )}
+    >
       {({ selectionMode, selectionBehavior, allowsDragging }) => (
         <>
           {allowsDragging && (
@@ -58,7 +59,7 @@ const Item = ({ children, ...props }: GridListItemProps) => {
             </Button>
           )}
           {selectionMode === "multiple" && selectionBehavior === "toggle" && (
-            <Checkbox slot="selection" />
+            <Checkbox className="-mr-2" slot="selection" />
           )}
           {children}
         </>
diff --git a/components/ui/list-box.tsx b/components/ui/list-box.tsx
index 3fe67942..43bc48b6 100644
--- a/components/ui/list-box.tsx
+++ b/components/ui/list-box.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 
-import { IconHamburger } from "justd-icons"
+import { IconCheck, IconHamburger } from "justd-icons"
 import {
   ListBox as ListBoxPrimitive,
   ListBoxItem as ListBoxItemPrimitive,
@@ -15,7 +15,7 @@ import { DropdownItemDetails, DropdownSection } from "./dropdown"
 import { cn, cr } from "./primitive"
 
 const listBoxStyles = tv({
-  base: "flex max-h-96 w-full min-w-72 flex-col overflow-y-auto rounded-xl border p-1 shadow-xl outline-none"
+  base: "flex max-h-96 w-full gap-y-1 min-w-72 flex-col overflow-y-auto rounded-xl border p-1 shadow-lg outline-none"
 })
 
 interface ListBoxProps<T> extends ListBoxPrimitiveProps<T> {
@@ -29,14 +29,17 @@ const ListBox = <T extends object>({ children, className, ...props }: ListBoxPro
 )
 
 const listBoxItemStyles = tv({
-  base: "my-0.5 cursor-pointer rounded-md p-2 text-base outline-none transition lg:text-sm",
+  base: "lbi cursor-pointer relative rounded-[calc(var(--radius)-1px)] p-2 text-base outline-none transition lg:text-sm",
   variants: {
-    isHovered: { true: "bg-secondary text-secondary-fg" },
+    isFocusVisible: { true: "bg-secondary text-secondary-fg" },
+    isHovered: { true: "bg-accent text-accent-fg" },
     isFocused: {
-      true: "[&_[data-slot=icon]]:text-primary-fg [&_[data-slot=label]]:text-primary-fg [&_.text-muted-fg]:text-primary-fg/80 bg-primary text-primary-fg"
+      true: "[&_[data-slot=icon]]:text-accent-fg [&_[data-slot=label]]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80 bg-accent text-accent-fg"
+    },
+    isSelected: {
+      true: "[&_[data-slot=icon]]:text-accent-fg [&_[data-slot=label]]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80 bg-accent text-accent-fg"
     },
     isDragging: { true: "cursor-grabbing bg-secondary text-secondary-fg" },
-    isSelected: { true: "bg-primary text-primary-fg" },
     isDisabled: {
       true: "opacity-70 cursor-default text-muted-fg"
     }
@@ -70,12 +73,18 @@ const ListBoxItem = <T extends object>({ children, className, ...props }: ListBo
                   "size-4 shrink-0 text-muted-fg transition",
                   values.isFocused && "text-fg",
                   values.isDragging && "text-fg",
-                  values.isSelected && "text-primary-fg/70"
+                  values.isSelected && "text-accent-fg/70"
                 )}
               />
             )}
             <div className="flex flex-col">
               {typeof children === "function" ? children(values) : children}
+
+              {values.isSelected && (
+                <span className="animate-in absolute right-2 top-3 lg:top-2.5">
+                  <IconCheck />
+                </span>
+              )}
             </div>
           </>
         </div>
@@ -95,7 +104,13 @@ const ListBoxPicker = <T extends object>({ className, ...props }: ListBoxPickerP
   )
 }
 
-ListBox.Section = DropdownSection
+const Section = ({ className, ...props }: React.ComponentProps<typeof DropdownSection>) => {
+  return (
+    <DropdownSection className={cn(className, "[&_.lbi:last-child]:-mb-1.5 gap-y-1")} {...props} />
+  )
+}
+
+ListBox.Section = Section
 ListBox.ItemDetails = DropdownItemDetails
 ListBox.Item = ListBoxItem
 ListBox.Picker = ListBoxPicker
diff --git a/components/ui/menu.tsx b/components/ui/menu.tsx
index ec774012..961754ae 100644
--- a/components/ui/menu.tsx
+++ b/components/ui/menu.tsx
@@ -154,16 +154,15 @@ const MenuSeparator = ({ className, ...props }: SeparatorProps) => (
 )
 
 const Checkbox = ({ className, children, ...props }: MenuItemProps) => (
-  <Item className={cn("pl-8 relative", className)} {...props}>
+  <Item className={cn("relative pr-8", className)} {...props}>
     {(values) => (
       <>
+        {typeof children === "function" ? children(values) : children}
         {values.isSelected && (
-          <span className="absolute left-2 flex size-4 shrink-0 items-center animate-in justify-center">
-            <IconCheck className="size-4" />
+          <span className="absolute right-2 flex size-4 shrink-0 items-center animate-in justify-center">
+            <IconCheck />
           </span>
         )}
-
-        {typeof children === "function" ? children(values) : children}
       </>
     )}
   </Item>
diff --git a/components/ui/modal.tsx b/components/ui/modal.tsx
index 5077a414..af932e85 100644
--- a/components/ui/modal.tsx
+++ b/components/ui/modal.tsx
@@ -39,8 +39,8 @@ const modalOverlayStyles = tv({
 })
 const modalContentStyles = tv({
   base: [
-    "max-h-full w-full rounded-t-2xl ring-1 ring-dark/5 bg-overlay text-overlay-fg text-left align-middle shadow-lg",
-    "dark:ring-light/15 sm:rounded-xl overflow-hidden"
+    "max-h-full w-full rounded-t-3xl ring-1 ring-dark/5 bg-overlay text-overlay-fg text-left align-middle shadow-lg",
+    "dark:ring-light/15 sm:rounded-2xl overflow-hidden"
   ],
   variants: {
     isEntering: {
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
index 33c9d4f0..ae6066e5 100644
--- a/components/ui/popover.tsx
+++ b/components/ui/popover.tsx
@@ -69,7 +69,7 @@ const drawerStyles = tv({
   variants: {
     isMenu: {
       true: "p-0 [&_[role=dialog]]:px-0 rounded-t-xl",
-      false: "p-4 rounded-t-2xl"
+      false: "p-4 rounded-t-3xl"
     },
     isEntering: {
       true: [
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
index a4be3d98..3d7d03de 100644
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -62,7 +62,7 @@ const sheetContentStyles = tv({
     side: {
       top: "inset-x-0 top-0 rounded-b-3xl border-b entering:slide-in-from-top exiting:slide-out-to-top",
       bottom:
-        "inset-x-0 bottom-0 rounded-t-2xl border-t entering:slide-in-from-bottom exiting:slide-out-to-bottom",
+        "inset-x-0 bottom-0 rounded-t-3xl border-t entering:slide-in-from-bottom exiting:slide-out-to-bottom",
       left: "inset-y-0 left-0 h-auto w-[19rem] sm:w-3/4 overflow-y-auto border-r entering:slide-in-from-left exiting:slide-out-to-left sm:max-w-xs",
       right:
         "inset-y-0 right-0 h-auto w-[19rem] sm:w-3/4 overflow-y-auto border-l entering:slide-in-from-right exiting:slide-out-to-right sm:max-w-xs"
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
index e555fae0..b1fab1e3 100644
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@@ -19,7 +19,7 @@ interface TooltipProps extends Omit<TooltipPrimitiveProps, "children"> {
 
 const tooltipStyles = tv({
   base: [
-    "group rounded-md [&_strong]:font-medium bg-fg border border-fg text-bg px-2 py-1.5 text-sm will-change-transform dark:shadow-none",
+    "group rounded-lg [&_strong]:font-medium bg-fg border border-fg text-bg px-2 py-1.5 text-sm will-change-transform dark:shadow-none",
     "placement-left:slide-in-from-right-1 placement-right:slide-in-from-left-1 placement-top:slide-in-from-bottom-1 placement-bottom:slide-in-from-top-1"
   ],
   variants: {
diff --git a/package.json b/package.json
index 308771be..a61e6192 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-react-aria-components": "^1.1.4",
     "title": "^3.5.3",
-    "use-debounce": "^10.0.2",
+    "use-debounce": "^10.0.3",
     "usemods": "^1.7.1"
   },
   "devDependencies": {
@@ -54,7 +54,7 @@
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/chroma-js": "^2.4.4",
     "@types/color-namer": "^1.3.3",
-    "@types/node": "^20.14.15",
+    "@types/node": "^20.15.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/title": "^3.4.3",
diff --git a/resources/content/docs/components/buttons/file-trigger.mdx b/resources/content/docs/components/buttons/file-trigger.mdx
index f212d41f..cff5a565 100644
--- a/resources/content/docs/components/buttons/file-trigger.mdx
+++ b/resources/content/docs/components/buttons/file-trigger.mdx
@@ -33,14 +33,14 @@ A FileTrigger that allows users to select multiple files from the file system.
 A FileTrigger that lets users capture images using their device's camera.
 <How toUse="buttons/file-trigger-camera-demo" />
 
-## Controlled
-You can use the `onSelect` prop to snag the selected files.
-<How toUse="buttons/file-trigger-controlled-demo" />
-
 ## Avatar
 <Composed text='I got an example of a FileTrigger that lets peeps grab an avatar from their file stash. It mashes up components like avatar and drop zone, so your crew can drop or pick a file straight from the file system.' components={['avatar', 'drop-zone']}/>
 <How toUse="buttons/file-trigger-avatar-demo" />
 
+## Controlled
+You can use the `onSelect` prop to snag the selected files.
+<How toUse="buttons/file-trigger-controlled-demo" />
+
 ## Disabled
 A FileTrigger that is disabled.
 <How toUse="buttons/file-trigger-disabled-demo" />
diff --git a/resources/content/docs/components/collections/choicebox.mdx b/resources/content/docs/components/collections/choicebox.mdx
index 4e6f17d0..01e9f7e6 100644
--- a/resources/content/docs/components/collections/choicebox.mdx
+++ b/resources/content/docs/components/collections/choicebox.mdx
@@ -22,10 +22,6 @@ The Choicebox is an enhanced version of a Radio or Checkbox, offering users a la
 
 <SourceCode toShow={['choicebox']} />
 
-## Controlled
-This component can function as either controlled or uncontrolled. For controlled use, provide the `selectedKeys` prop and manage updates with the `onSelectionChange` event handler.
-<How isCenter={false} toUse="collections/choicebox-controlled-demo" />
-
 ## Single Selection
 Although the Choicebox defaults to allowing multiple selections, it can be configured for single selection by setting the `selectionMode` prop.
 <How isCenter={false} toUse="collections/choicebox-single-selection-demo" />
@@ -34,6 +30,10 @@ Although the Choicebox defaults to allowing multiple selections, it can be confi
 The default layout for the Choicebox includes two columns with a 16px gap between items. These settings can be adjusted by passing the `columns` and `gap` props.
 <How isCenter={false} withNoPadding={true} toUse="collections/choicebox-columns-demo" />
 
+## Controlled
+This component can function as either controlled or uncontrolled. For controlled use, provide the `selectedKeys` prop and manage updates with the `onSelectionChange` event handler.
+<How isCenter={false} toUse="collections/choicebox-controlled-demo" />
+
 ## Disabled
 Disable the entire Choicebox by applying the `isDisabled` prop.
 <How isCenter={false} withNoPadding={true} toUse="collections/choicebox-disabled-demo" />
diff --git a/resources/content/docs/components/collections/grid-list.mdx b/resources/content/docs/components/collections/grid-list.mdx
index 47539f7c..f1f78e8a 100644
--- a/resources/content/docs/components/collections/grid-list.mdx
+++ b/resources/content/docs/components/collections/grid-list.mdx
@@ -22,7 +22,7 @@ A basic grid list is an excellent way for users to browse through items, perfect
 <SourceCode toShow={['grid-list']}/>
 
 ## Multiple Selection
-By default, the selection mode is set to single selection unless you change the `selectionMode` prop to allow for multiple selections.
+To enable multiple selections, set the `selectionMode` prop to `multiple`. Since this prop has no default value, you must define it explicitly.
 <How minW72 toUse="collections/grid-list-multiple-demo" />
 Note that I haven't set an `id` for the grid list item as the items already have default IDs. However, you should specify the `id` prop for each grid list item like this:
 ```
@@ -37,14 +37,14 @@ The grid list supports drag and drop functionalities if you use the `dragAndDrop
 You can move items between positions within the grid list.
 <How withNoPadding isCenter={false} toUse="collections/grid-list-drag-between-item-demo" />
 
-## Controlled
-The grid list can be controlled, which means the parent component manages the selection state of each item.
-<How minW72 toUse="collections/grid-list-controlled-demo" />
-
 ## Render Empty State
 The grid list can display an empty state when no items are available using the `renderEmptyState` prop.
 <How minW72 toUse="collections/grid-list-render-empty-state-demo" />
 
+## Controlled
+The grid list can be controlled, which means the parent component manages the selection state of each item.
+<How minW72 toUse="collections/grid-list-controlled-demo" />
+
 ## Disabled
 Similar to how the [Tag Group](/docs/components/collections/tag-group) component can be disabled using `isDisabled` for children and `disabledKeys` for the parent, the Grid List supports similar functionality. For example, items "Led Zeppelin" and "The Rolling Stones" are disabled.
 <How minW72 toUse="collections/grid-list-disabled-demo" />
diff --git a/resources/content/docs/components/collections/list-box.mdx b/resources/content/docs/components/collections/list-box.mdx
index 140074a7..b148431b 100644
--- a/resources/content/docs/components/collections/list-box.mdx
+++ b/resources/content/docs/components/collections/list-box.mdx
@@ -21,12 +21,8 @@ ListBoxes can be enhanced with features like multi-selection, filtering, and dyn
 
 <SourceCode toShow={['list-box']}/>
 
-## Controlled
-Manage the ListBox selection by using the `selectedKey` prop.
-<How toUse="collections/list-box-controlled-demo" />
-
 ## Multiple Selection
-Enable multiple selections by setting the `selectionMode` prop.
+To enable multiple selections, set the `selectionMode` prop to `multiple`. Since this prop has no default value, you must define it explicitly.
 <How toUse="collections/list-box-multiple-demo" />
 
 ## Item Details
@@ -41,6 +37,10 @@ Display items in a ListBox grouped by sections.
 Enable drag and drop functionality in the ListBox using the `dragAndDropHooks` prop with the `useDragAndDrop` hook. This allows for rearranging items, adding new entries between existing ones, or managing data across the entire list.
 <How toUse="collections/list-box-rearrange-demo" />
 
+## Controlled
+Make sure you set the `selectionMode` prop to `single` to enable controlled mode. This will allow you to manage the ListBox selection by using the `selectedKey` prop.
+<How toUse="collections/list-box-controlled-demo" />
+
 ## Disabled
 Disable specific ListBox items.
 <How toUse="collections/list-box-disabled-demo" />
diff --git a/resources/content/docs/components/forms/checkbox.mdx b/resources/content/docs/components/forms/checkbox.mdx
index b1cc1a04..40088f3b 100644
--- a/resources/content/docs/components/forms/checkbox.mdx
+++ b/resources/content/docs/components/forms/checkbox.mdx
@@ -22,10 +22,6 @@ A checkbox is a small box you can tick to select an option. It’s either on or
 
 <SourceCode toShow={['checkbox']}/>
 
-## Controlled
-You can control the checkbox value by using the `value` prop.
-<How minW72 toUse="forms/checkbox-controlled-demo" />
-
 ## Label Prop
 You can add a label to the checkbox by passing the `label` prop.
 ```
@@ -44,6 +40,10 @@ The checkbox is in an error state.
 The checkbox is in an indeterminate state.
 <How toUse="forms/checkbox-indeterminate-demo" />
 
+## Controlled
+You can control the checkbox value by using the `value` prop.
+<How minW72 toUse="forms/checkbox-controlled-demo" />
+
 ## Disabled
 The checkbox is disabled.
 <How toUse="forms/checkbox-disabled-demo" />
diff --git a/resources/content/docs/components/forms/tag-field.mdx b/resources/content/docs/components/forms/tag-field.mdx
index 51157eb1..b4163eb0 100644
--- a/resources/content/docs/components/forms/tag-field.mdx
+++ b/resources/content/docs/components/forms/tag-field.mdx
@@ -39,12 +39,6 @@ Customize the tag field’s appearance using the `appearance` prop.
 
 <How isCenter={false} withNoPadding toUse="forms/tag-field-appearance-demo" />
 
-## Controlled
-
-The tag field is controlled by default. This example demonstrates how to access its value.
-
-<How minW72 toUse="forms/tag-field-controlled-demo" />
-
 ## Max Entry
 
 Set a limit on the number of tags that can be added.
@@ -63,6 +57,12 @@ Customize the tag field’s shape using the `shape` prop.
 
 <How minW72 toUse="forms/tag-field-shape-demo" />
 
+## Controlled
+
+The tag field is controlled by default. This example demonstrates how to access its value.
+
+<How minW72 toUse="forms/tag-field-controlled-demo" />
+
 
 ## Disabled
 
diff --git a/resources/content/docs/components/pickers/combo-box.mdx b/resources/content/docs/components/pickers/combo-box.mdx
index 63d310b9..1285db3b 100644
--- a/resources/content/docs/components/pickers/combo-box.mdx
+++ b/resources/content/docs/components/pickers/combo-box.mdx
@@ -26,10 +26,6 @@ A combo box combines a text input with a listbox, allowing users to filter optio
 The combo box can be configured to display avatars instead of just regular text.
 <How minW72 toUse="pickers/combo-box-avatar-demo" />
 
-## Controlled
-You can control the combo box by passing the `selectedKey` prop.
-<How minW72 toUse="pickers/combo-box-controlled-demo" />
-
 ## Section
 A combo box can display items grouped together in sections.
 <How minW72 toUse="pickers/combo-box-section-demo" />
@@ -38,6 +34,10 @@ A combo box can display items grouped together in sections.
 If a user submits the form without selecting an item, an error message will appear.
 <How minW72 toUse="pickers/combo-box-validation-demo" />
 
+## Controlled
+You can control the combo box by passing the `selectedKey` prop.
+<How minW72 toUse="pickers/combo-box-controlled-demo" />
+
 ## Readonly
 When the combo box is in a readonly state, it cannot be edited.
 <How minW72 toUse="pickers/combo-box-readonly-demo" />
diff --git a/resources/content/docs/components/pickers/multiple-select.mdx b/resources/content/docs/components/pickers/multiple-select.mdx
index 4d39702b..c532f825 100644
--- a/resources/content/docs/components/pickers/multiple-select.mdx
+++ b/resources/content/docs/components/pickers/multiple-select.mdx
@@ -23,10 +23,6 @@ The basic multiple select component lets you select multiple options from a list
 
 <SourceCode toShow={['multiple-select']} />
 
-## Controlled
-This component lets you select tags dynamically, updating the list with callbacks on add and remove. It displays selected tags with Tag components and logs each action.
-<How toUse="pickers/multiple-select-controlled-demo" />
-
 ## Min/Max
 This component lets you set a minimum and maximum number of tags that can be selected. It displays selected tags with Tag components and logs each action.
 <How toUse="pickers/multiple-select-min-max-demo" />
@@ -43,6 +39,10 @@ Customize the tag field’s shape using the `shape` prop.
 
 <How minW72 toUse="pickers/multiple-select-shape-demo" />
 
+## Controlled
+This component lets you select tags dynamically, updating the list with callbacks on add and remove. It displays selected tags with Tag components and logs each action.
+<How toUse="pickers/multiple-select-controlled-demo" />
+
 ## Disabled
 When the component is disabled, it prevents the user from adding or removing tags.
 <How toUse="pickers/multiple-select-disabled-demo" />
diff --git a/resources/content/docs/components/pickers/select.mdx b/resources/content/docs/components/pickers/select.mdx
index 93de6ee4..74feb14f 100644
--- a/resources/content/docs/components/pickers/select.mdx
+++ b/resources/content/docs/components/pickers/select.mdx
@@ -24,10 +24,6 @@ A select component displays a dropdown list of options, allowing users to pick o
 
 <SourceCode toShow={['select']}/>
 
-## Controlled
-You can control the select component by passing the `selectedKey` prop.
-<How minW72 toUse="pickers/select-controlled-demo" />
-
 ## Select Item Details
 If you need to provide more information about an item, use the `SelectItemDetails` component to display additional details.
 <How minW72 toUse="pickers/select-item-details-demo" />
@@ -44,6 +40,10 @@ A select component can display items grouped together in sections.
 If a user submits the form without selecting an item, an error message will appear.
 <How minW72 toUse="pickers/select-validation-demo" />
 
+## Controlled
+You can control the select component by passing the `selectedKey` prop.
+<How minW72 toUse="pickers/select-controlled-demo" />
+
 ## Disabled
 When the select component is disabled, it cannot be interacted with.
 <How minW72 toUse="pickers/select-disabled-demo" />
diff --git a/resources/content/docs/getting-started/installation.mdx b/resources/content/docs/getting-started/installation.mdx
index 197eedb9..d9529f63 100644
--- a/resources/content/docs/getting-started/installation.mdx
+++ b/resources/content/docs/getting-started/installation.mdx
@@ -330,10 +330,12 @@ export default withTV({
         }
       },
       borderRadius: {
-        xl: 'calc(var(--radius) + 2px)',
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)'
+        '3xl': "calc(var(--radius) + 6px)",
+        '2xl': "calc(var(--radius) + 4px)",
+        xl: "calc(var(--radius) + 2px)",
+        lg: "calc(var(--radius))",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)"
       },
     }
   },
diff --git a/resources/styles/app.css b/resources/styles/app.css
index b6906b80..9762992e 100644
--- a/resources/styles/app.css
+++ b/resources/styles/app.css
@@ -43,7 +43,7 @@
         --input: 240 5.9% 90%;
         --ring: var(--primary);
         --toggle: 240 5% 84%;
-        --radius: 0.55rem;
+        --radius: 0.5rem;
     }
 
     .dark {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 913b16a7..353fd47b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -84,9 +84,12 @@ const config = withTV({
         }
       },
       borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)"
+        "3xl": "calc(var(--radius) + 7.5px)",
+        "2xl": "calc(var(--radius) + 5px)",
+        xl: "calc(var(--radius) + 2.5px)",
+        lg: "calc(var(--radius))",
+        md: "calc(var(--radius) - 2.5px)",
+        sm: "calc(var(--radius) - 5px)"
       },
       keyframes: {
         blink: {