diff --git a/Makefile b/Makefile
index 51aad416af4..e415c20a618 100644
--- a/Makefile
+++ b/Makefile
@@ -205,7 +205,6 @@ build-s2-docs: check-starter-css
 	# Build old docs pages, which get inter-mixed with the new pages
 	# TODO: We probably don't need to build this on every PR
 	yarn parcel build 'packages/@adobe/react-spectrum/docs/**/*.mdx' 'packages/dev/docs/pages/{react-spectrum,releases}/**/*.mdx' --dist-dir dist/s2-docs/s2/$(PUBLIC_URL) --public-url $(PUBLIC_URL)
-	yarn parcel build 'packages/{react-aria,react-stately}/docs/**/*.mdx' --dist-dir dist/s2-docs/react-aria/$(PUBLIC_URL) --public-url $(PUBLIC_URL)
 
 build-starters:
 	$(MAKE) starter-zip
diff --git a/package.json b/package.json
index 3aa0a953fa7..699a56203c8 100644
--- a/package.json
+++ b/package.json
@@ -40,8 +40,8 @@
     "start:s2": "NODE_ENV=storybook storybook dev -p 6006 --ci -c '.storybook-s2'",
     "build:storybook-s2": "NODE_ENV=storybook storybook build -c .storybook-s2 -o dist/$(git rev-parse HEAD)/storybook-s2",
     "build:s2-storybook-docs": "NODE_ENV=storybook storybook build -c .storybook-s2 --docs",
-    "start:docs": "DOCS_ENV=dev parcel 'packages/{@adobe/react-spectrum,react-aria,react-stately}/docs/**/*.mdx' 'packages/dev/docs/pages/{react-spectrum,releases}/**/*.mdx'",
-    "build:docs": "DOCS_ENV=staging parcel build 'packages/{@adobe/react-spectrum,react-aria,react-stately}/docs/**/*.mdx' 'packages/dev/docs/pages/{react-spectrum,releases}/**/*.mdx'",
+    "start:docs": "DOCS_ENV=dev parcel 'packages/@adobe/react-spectrum/docs/**/*.mdx' 'packages/dev/docs/pages/{react-spectrum,releases}/**/*.mdx'",
+    "build:docs": "DOCS_ENV=staging parcel build 'packages/@adobe/react-spectrum/docs/**/*.mdx' 'packages/dev/docs/pages/{react-spectrum,releases}/**/*.mdx'",
     "start:s2-docs": "yarn workspace @react-spectrum/s2-docs start",
     "build:s2-docs": "yarn workspace @react-spectrum/s2-docs build",
     "check:s2-docs-build": "node packages/dev/s2-docs/scripts/validateS2DocsBuild.mjs",
diff --git a/packages/@adobe/react-spectrum/docs/dnd/dnd.mdx b/packages/@adobe/react-spectrum/docs/dnd/dnd.mdx
index 36116d4d957..e641362e390 100644
--- a/packages/@adobe/react-spectrum/docs/dnd/dnd.mdx
+++ b/packages/@adobe/react-spectrum/docs/dnd/dnd.mdx
@@ -15,12 +15,12 @@ import docs from 'docs:@react-spectrum/dnd';
 import dndDocs from 'docs:@react-types/shared/src/dnd.d.ts';
 import {FunctionAPI, PageDescription, TypeContext, InterfaceType} from '@react-spectrum/docs';
 import {Keyboard} from '@react-spectrum/text';
-import DragPreview from '/packages/react-aria/docs/dnd/DragPreview.svg';
-import BetweenDropPosition from '/packages/react-aria/docs/dnd/BetweenDropPosition.svg';
-import OnDropPosition from '/packages/react-aria/docs/dnd/OnDropPosition.svg';
-import RootDropPosition from '/packages/react-aria/docs/dnd/RootDropPosition.svg';
-import DragAffordance from '/packages/react-aria/docs/dnd/DragAffordance.svg';
-import Anatomy from '/packages/react-aria/docs/dnd/Anatomy.svg';
+import DragPreview from '/packages/dev/s2-docs/pages/react-aria/DndDragPreview.svg';
+import BetweenDropPosition from '/packages/dev/s2-docs/pages/react-aria/DndBetweenDropPosition.svg';
+import OnDropPosition from '/packages/dev/s2-docs/pages/react-aria/DndOnDropPosition.svg';
+import RootDropPosition from '/packages/dev/s2-docs/pages/react-aria/DndRootDropPosition.svg';
+import DragAffordance from '/packages/dev/s2-docs/pages/react-aria/DndDragAffordance.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/DndAnatomy.svg';
 
 ---
 category: Concepts
diff --git a/packages/@react-spectrum/ai/exports/index.ts b/packages/@react-spectrum/ai/exports/index.ts
index cacb63c5b52..418a959fcb6 100644
--- a/packages/@react-spectrum/ai/exports/index.ts
+++ b/packages/@react-spectrum/ai/exports/index.ts
@@ -3,7 +3,7 @@ export {MessageFeedback} from '../src/MessageFeedback';
 export {MessageSource, SourceList, SourceListItem} from '../src/MessageSource';
 export {MessageSuggestion, MessageSuggestionList} from '../src/MessageSuggestion';
 export {
-  AutoLinkingTokenFieldValue,
+  PromptFieldValue,
   PromptField,
   PromptFieldSubmitButton,
   PromptTokenField,
@@ -47,7 +47,10 @@ export type {
   PromptTokenFieldPopoverProps,
   PromptFieldToolbarProps,
   InsertMenuItemProps,
-  PromptFieldVoiceButtonProps
+  PromptFieldVoiceButtonProps,
+  InsertTokenMenuItemProps,
+  InsertTextMenuItemProps,
+  CommandMenuItemProps
 } from '../src/PromptField';
 export type {MessageFeedbackProps} from '../src/MessageFeedback';
 export type {MessageSourceProps, SourceListProps, SourceListItemProps} from '../src/MessageSource';
diff --git a/packages/@react-spectrum/ai/package.json b/packages/@react-spectrum/ai/package.json
index fb09f74a77d..4d32a79c534 100644
--- a/packages/@react-spectrum/ai/package.json
+++ b/packages/@react-spectrum/ai/package.json
@@ -47,7 +47,6 @@
   "dependencies": {
     "@internationalized/date": "^3.12.2",
     "@internationalized/number": "^3.6.7",
-    "@react-aria/utils": "^3.8.0",
     "@react-spectrum/s2": "1.5.1",
     "@react-types/shared": "^3.36.0",
     "react-aria": "3.50.0",
diff --git a/packages/@react-spectrum/ai/src/AttachmentList.tsx b/packages/@react-spectrum/ai/src/AttachmentList.tsx
index 9ccb19862ce..c67d6c9945e 100644
--- a/packages/@react-spectrum/ai/src/AttachmentList.tsx
+++ b/packages/@react-spectrum/ai/src/AttachmentList.tsx
@@ -181,7 +181,10 @@ export const AttachmentList = (forwardRef as forwardRefType)(function Attachment
 
 export interface AttachmentProps
   extends
-    Omit<CardProps, 'styles' | 'UNSAFE_className' | 'UNSAFE_style'>,
+    Omit<
+      CardProps,
+      'styles' | 'UNSAFE_className' | 'UNSAFE_style' | 'allowsArrowNavigation' | 'focusMode'
+    >,
     AriaLabelingProps,
     Pick<TagProps, 'id' | 'textValue' | 'render'> {
   /** The children of the Attachment. */
diff --git a/packages/@react-spectrum/ai/src/PromptField.tsx b/packages/@react-spectrum/ai/src/PromptField.tsx
index 5f63de843c8..913df348abf 100644
--- a/packages/@react-spectrum/ai/src/PromptField.tsx
+++ b/packages/@react-spectrum/ai/src/PromptField.tsx
@@ -56,25 +56,26 @@ import Microphone from '@react-spectrum/s2/icons/Microphone';
 import {PixelLoader} from './loader/react';
 import Plus from '@react-spectrum/s2/icons/Add';
 import {Popover, PopoverProps} from '@react-spectrum/s2/Popover';
+import {PromptFieldContainer} from './PromptFieldContainer';
+import {PromptFocusContext} from './Chat';
+import Send from '@react-spectrum/s2/icons/ArrowUpSend';
+import {setTokenFieldSelection} from 'react-aria/useTokenField';
+import Stop from '@react-spectrum/s2/icons/StopProcessing';
+import {ToggleButton} from '@react-spectrum/s2/ToggleButton';
 import {
-  positionToDOMRange,
   Token,
   TokenField,
+  tokenFieldPositionToDOMRange,
   TokenInput,
   TokenProps
 } from 'react-aria-components/TokenField';
-import {PromptFieldContainer} from './PromptFieldContainer';
-import {PromptFocusContext} from './Chat';
-import Send from '@react-spectrum/s2/icons/ArrowUpSend';
-import {setSelection} from 'react-aria/useTokenField';
-import Stop from '@react-spectrum/s2/icons/StopProcessing';
-import {ToggleButton} from '@react-spectrum/s2/ToggleButton';
 import {Tooltip, TooltipTrigger} from '@react-spectrum/s2/Tooltip';
 import {useControlledState} from 'react-stately/useControlledState';
 import {useDOMRef} from './useDOMRef';
 import {useEffectEvent} from 'react-aria/private/utils/useEffectEvent';
 import {useFocusWithin} from 'react-aria/useFocusWithin';
 import {useKeyboard} from 'react-aria/useKeyboard';
+import {useLocale} from 'react-aria/I18nProvider';
 import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
 import {useVoiceInput, VoiceInputErrorCode} from './useVoiceInput';
 
@@ -146,7 +147,7 @@ function tokenizeURLs(text: string): TokenFieldSegment[] {
   return segments;
 }
 
-export class AutoLinkingTokenFieldValue extends TokenFieldValue {
+export class PromptFieldValue extends TokenFieldValue {
   tokenize(text: string): TokenFieldSegment[] {
     return tokenizeURLs(text);
   }
@@ -155,7 +156,7 @@ export class AutoLinkingTokenFieldValue extends TokenFieldValue {
 const PromptFieldContext = createContext<PromptFieldState>({
   attachments: [],
   setAttachments: () => {},
-  prompt: new AutoLinkingTokenFieldValue([]),
+  prompt: new PromptFieldValue([]),
   setPrompt: () => {},
   inputRef: createRef(),
   isGenerating: false,
@@ -199,7 +200,7 @@ export const PromptField = forwardRef(function PromptField(
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/ai');
   let [prompt, setPrompt] = useControlledState(
     props.value,
-    props.defaultValue ?? new AutoLinkingTokenFieldValue([]),
+    props.defaultValue ?? new PromptFieldValue([]),
     props.onChange
   );
   let [attachments, setAttachments] = useControlledState(
@@ -247,7 +248,7 @@ export const PromptField = forwardRef(function PromptField(
 
     props.onSubmit?.(prompt, attachments);
     if (!isPromptControlled) {
-      setPrompt(new AutoLinkingTokenFieldValue([]));
+      setPrompt(new PromptFieldValue([]));
     }
     if (!isAttachmentsControlled) {
       setAttachments([]);
@@ -479,7 +480,7 @@ export function PromptTokenField(props: PromptTokenFieldProps) {
   );
 }
 
-export interface PromptTokenFieldPopoverProps extends PopoverProps {
+export interface PromptTokenFieldPopoverProps extends Omit<PopoverProps, 'shouldSkipAnimation'> {
   filterAnchor?: Position | null;
   items?: React.ReactNode[] | null | Promise<React.ReactNode[] | null>;
   isFocused?: boolean;
@@ -507,7 +508,7 @@ function PromptTokenFieldPopover(props: PromptTokenFieldPopoverProps) {
       hideArrow
       placement="bottom start"
       getTargetRect={target => {
-        return positionToDOMRange(target, filterAnchor!).getBoundingClientRect();
+        return tokenFieldPositionToDOMRange(target, filterAnchor!).getBoundingClientRect();
       }}>
       <PromptCompletionAnchorContext.Provider value={filterAnchor ?? null}>
         <Menu>{menuItems}</Menu>
@@ -614,7 +615,9 @@ export interface PromptFieldVoiceButtonProps {
 }
 
 export function PromptFieldVoiceButton(props: PromptFieldVoiceButtonProps) {
-  let {lang, isDisabled: isDisabledProp, onError} = props;
+  let {lang: langProp, isDisabled: isDisabledProp, onError} = props;
+  let {locale} = useLocale();
+  let lang = langProp ?? locale;
   let {prompt, setPrompt, inputRef, setListening} = useContext(PromptFieldContext);
   let isDisabled = isDisabledProp;
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/ai');
@@ -640,7 +643,7 @@ export function PromptFieldVoiceButton(props: PromptFieldVoiceButtonProps) {
     // to be inaccurate
     let finalPrompt = buildVoicePrompt(basePromptRef.current, transcript);
     inputRef.current.focus();
-    setSelection(inputRef.current, finalPrompt.caretPosition, finalPrompt.caretPosition);
+    setTokenFieldSelection(inputRef.current, finalPrompt.caretPosition, finalPrompt.caretPosition);
     setPrompt(finalPrompt);
   });
 
@@ -696,15 +699,11 @@ export function PromptFieldVoiceButton(props: PromptFieldVoiceButtonProps) {
   );
 }
 
-function buildVoicePrompt(base: TokenFieldValue, voiceText: string): AutoLinkingTokenFieldValue {
+function buildVoicePrompt(base: TokenFieldValue, voiceText: string): PromptFieldValue {
   if (!voiceText) {
-    return base as AutoLinkingTokenFieldValue;
+    return base as PromptFieldValue;
   }
-  return base.replaceRange(
-    base.caretPosition,
-    base.caretPosition,
-    voiceText
-  ) as AutoLinkingTokenFieldValue;
+  return base.replaceRange(base.caretPosition, base.caretPosition, voiceText) as PromptFieldValue;
 }
 
 export interface InsertMenuItemProps {
@@ -788,7 +787,7 @@ function useInsertPromptSegment(buildSegments: (item: any) => TokenFieldSegment[
           inputRef.current.focus();
           // we need to update the position manually since TokenField's update caret logic only happens if the field is focused
           // but this insert can happen from the + menu aka the field isn't focused until this gets called which is too late
-          setSelection(inputRef.current, position, position);
+          setTokenFieldSelection(inputRef.current, position, position);
           // the above focus and setCursor call can cause the internally tracked caret position to be reset incorrectly
           // seemingly due to TokenField's isProgrammaticSelectionChange being flipped to false by setCursor and thus reset to 0 by the .focus
           // fix this by resetting to proper position below
@@ -800,27 +799,84 @@ function useInsertPromptSegment(buildSegments: (item: any) => TokenFieldSegment[
   };
 }
 
-export function InsertTokenMenuItem(props: MenuItemProps) {
+export interface InsertTokenMenuItemProps extends Omit<
+  MenuItemProps,
+  | 'UNSAFE_className'
+  | 'UNSAFE_style'
+  | 'download'
+  | 'href'
+  | 'hrefLang'
+  | 'ping'
+  | 'referrerPolicy'
+  | 'rel'
+  | 'routerOptions'
+  | 'target'
+> {}
+
+export function InsertTokenMenuItem(props: InsertTokenMenuItemProps) {
   let insert = useInsertPromptSegment(item => [
     {type: 'token', text: 'command' in item ? item.command : item.title, value: item},
     {type: 'text', text: ' '}
   ]);
 
-  return <MenuItem {...props} onAction={() => insert(props.value)} />;
+  return (
+    <MenuItem
+      {...props}
+      onAction={() => {
+        insert(props.value);
+        props.onAction?.();
+      }}
+    />
+  );
 }
 
-export function InsertTextMenuItem(props: MenuItemProps) {
+export interface InsertTextMenuItemProps extends Omit<
+  MenuItemProps,
+  | 'UNSAFE_className'
+  | 'UNSAFE_style'
+  | 'download'
+  | 'href'
+  | 'hrefLang'
+  | 'ping'
+  | 'referrerPolicy'
+  | 'rel'
+  | 'routerOptions'
+  | 'target'
+> {}
+
+export function InsertTextMenuItem(props: InsertTextMenuItemProps) {
   let insert = useInsertPromptSegment(item => [
     {type: 'text', text: `${'command' in item ? item.command : item.title} `}
   ]);
 
-  return <MenuItem {...props} onAction={() => insert(props.value)} />;
+  return (
+    <MenuItem
+      {...props}
+      onAction={() => {
+        insert(props.value);
+        props.onAction?.();
+      }}
+    />
+  );
 }
 
+export interface CommandMenuItemProps extends Omit<
+  MenuItemProps,
+  | 'UNSAFE_className'
+  | 'UNSAFE_style'
+  | 'download'
+  | 'href'
+  | 'hrefLang'
+  | 'ping'
+  | 'referrerPolicy'
+  | 'rel'
+  | 'routerOptions'
+  | 'target'
+> {}
 // specifically for menu items that only trigger a callback in the autocomplete menu
 // since they dont end up inserting a token or text, we need to clear the partial text that the user used
 // to filter the menu
-export function CommandMenuItem(props: MenuItemProps) {
+export function CommandMenuItem(props: CommandMenuItemProps) {
   let insert = useInsertPromptSegment(() => []);
   return (
     <MenuItem
diff --git a/packages/@react-spectrum/ai/src/ResponseStatus.tsx b/packages/@react-spectrum/ai/src/ResponseStatus.tsx
index 5479c547983..1453242a4d1 100644
--- a/packages/@react-spectrum/ai/src/ResponseStatus.tsx
+++ b/packages/@react-spectrum/ai/src/ResponseStatus.tsx
@@ -48,7 +48,7 @@ import React, {
 } from 'react';
 import {StyleString} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useDOMRef} from './useDOMRef';
-import {useLayoutEffect} from '@react-aria/utils';
+import {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';
 import {useLocale} from 'react-aria/I18nProvider';
 import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
 
diff --git a/packages/@react-spectrum/ai/stories/Chat.stories.tsx b/packages/@react-spectrum/ai/stories/Chat.stories.tsx
index 29fa626b867..715184cb6f9 100644
--- a/packages/@react-spectrum/ai/stories/Chat.stories.tsx
+++ b/packages/@react-spectrum/ai/stories/Chat.stories.tsx
@@ -14,14 +14,22 @@ import {action} from 'storybook/actions';
 import {ActionButton} from '@react-spectrum/s2/ActionButton';
 import {ActionMenu} from '@react-spectrum/s2/ActionMenu';
 import {AssetCard, CardPreview} from '@react-spectrum/s2/Card';
+import {Chat} from '../src/Chat';
+import ChatIcon from '@react-spectrum/s2/icons/Chat';
+import ChevronDown from '@react-spectrum/s2/icons/ChevronDown';
+import {Collection} from 'react-aria-components';
+import {Content} from '@react-spectrum/s2/Content';
+import {DialogTrigger, Popover} from '@react-spectrum/s2/Popover';
+import {Image} from '@react-spectrum/s2/Image';
+import {MenuItem} from '@react-spectrum/s2/Menu';
 import {
-  AutoLinkingTokenFieldValue,
   MessageFeedback,
   MessageSource,
   MessageSuggestion,
   MessageSuggestionList,
   PromptField,
   PromptFieldSubmitButton,
+  PromptFieldValue,
   PromptTokenField,
   ResponseStatus,
   ResponseStatusPanel,
@@ -35,14 +43,6 @@ import {
   TokenFieldValue,
   UserMessage
 } from '@react-spectrum/ai';
-import {Chat} from '../src/Chat';
-import ChatIcon from '@react-spectrum/s2/icons/Chat';
-import ChevronDown from '@react-spectrum/s2/icons/ChevronDown';
-import {Collection} from 'react-aria-components';
-import {Content} from '@react-spectrum/s2/Content';
-import {DialogTrigger, Popover} from '@react-spectrum/s2/Popover';
-import {Image} from '@react-spectrum/s2/Image';
-import {MenuItem} from '@react-spectrum/s2/Menu';
 import type {Meta} from '@storybook/react';
 import {ProgressCircle} from '@react-spectrum/s2/ProgressCircle';
 import {prose} from '../src/style/prose' with {type: 'macro'};
@@ -215,7 +215,7 @@ export function VirtualizedStreamingChat() {
   let nextId = useRef(initialResponses.length);
   let [isGenerating, setGenerating] = useState(false);
   let timeouts = useRef<NodeJS.Timeout[]>([]);
-  let [promptValue, setPromptValue] = useState<TokenFieldValue>(new AutoLinkingTokenFieldValue([]));
+  let [promptValue, setPromptValue] = useState<TokenFieldValue>(new PromptFieldValue([]));
   let followUpMessage = useRef<TokenFieldValue | null>(null);
 
   function handleSend(prompt: TokenFieldValue) {
@@ -561,7 +561,7 @@ export function VirtualizedStreamingChat() {
           value={promptValue}
           onChange={setPromptValue}
           onSubmit={prompt => {
-            setPromptValue(new AutoLinkingTokenFieldValue([]));
+            setPromptValue(new PromptFieldValue([]));
             handleSend(prompt);
           }}
           isGenerating={isGenerating}
@@ -584,14 +584,14 @@ export function VirtualizedStreamingChat() {
                   e.preventDefault();
                   if (promptValue.segments.length > 0) {
                     action('onSteer')(promptValue.toString());
-                    setPromptValue(new AutoLinkingTokenFieldValue([]));
+                    setPromptValue(new PromptFieldValue([]));
                   }
                 } else if (e.key === 'Enter' && e.altKey) {
                   e.preventDefault();
                   if (promptValue.segments.length > 0) {
                     action('onFollowUp')(promptValue.toString());
                     followUpMessage.current = promptValue;
-                    setPromptValue(new AutoLinkingTokenFieldValue([]));
+                    setPromptValue(new PromptFieldValue([]));
                   }
                 } else if (e.key === 'Escape') {
                   e.preventDefault();
diff --git a/packages/@react-spectrum/ai/stories/PromptField.stories.tsx b/packages/@react-spectrum/ai/stories/PromptField.stories.tsx
index 21356e72fcb..132b78c9d59 100644
--- a/packages/@react-spectrum/ai/stories/PromptField.stories.tsx
+++ b/packages/@react-spectrum/ai/stories/PromptField.stories.tsx
@@ -13,7 +13,6 @@
 import {action} from 'storybook/actions';
 import {
   AttachFileMenuItem,
-  AutoLinkingTokenFieldValue,
   CommandMenuItem,
   InsertMenuButton,
   InsertTextMenuItem,
@@ -23,6 +22,7 @@ import {
   PromptFieldAttachmentList,
   PromptFieldSubmitButton,
   PromptFieldToolbar,
+  PromptFieldValue,
   PromptFieldVoiceButton,
   PromptToken,
   PromptTokenField
@@ -245,7 +245,7 @@ interface UploadState {
   progress?: number;
 }
 
-let prompt3Base = new AutoLinkingTokenFieldValue([
+let prompt3Base = new PromptFieldValue([
   {type: 'text', text: 'Summarize the '},
   {type: 'token', text: 'Welcome Flow', value: {type: 'journey', title: 'Welcome Flow'}}
 ]);
@@ -255,12 +255,12 @@ let prompt3End = {
 };
 
 let prompts = [
-  new AutoLinkingTokenFieldValue([
+  new PromptFieldValue([
     {type: 'text', text: 'Analyze '},
     {type: 'token', text: 'New Customers', value: {type: 'audience', title: 'New Customers'}},
     {type: 'text', text: ' and suggest targeting strategies'}
   ]),
-  new AutoLinkingTokenFieldValue([
+  new PromptFieldValue([
     {type: 'text', text: 'Write a brief for '},
     {
       type: 'token',
@@ -273,7 +273,7 @@ let prompts = [
 
 function EverythingRender(args) {
   let {placeholder, ...otherArgs} = args;
-  let [value, setValue] = useState<TokenFieldValue>(() => new AutoLinkingTokenFieldValue([]));
+  let [value, setValue] = useState<TokenFieldValue>(() => new PromptFieldValue([]));
   let [attachments, setAttachments] = useState<PromptFieldAttachment[]>([]);
   let [attachmentState, setAttachmentState] = useState<Map<string, UploadState>>(new Map());
   let historyRef = useRef<TokenFieldValue[]>([]);
@@ -330,7 +330,7 @@ function EverythingRender(args) {
       if (nextIndex >= history.length) {
         historyIndexRef.current = -1;
         isHistoryNavigating.current = true;
-        setValue(new AutoLinkingTokenFieldValue([]));
+        setValue(new PromptFieldValue([]));
       } else {
         historyIndexRef.current = nextIndex;
         isHistoryNavigating.current = true;
@@ -367,7 +367,7 @@ function EverythingRender(args) {
           action('onSubmit')(prompt.toString());
           historyRef.current = [...historyRef.current, prompt];
           historyIndexRef.current = -1;
-          setValue(new AutoLinkingTokenFieldValue([]));
+          setValue(new PromptFieldValue([]));
           setAttachments([]);
           setAttachmentState(new Map());
         }}
@@ -416,7 +416,7 @@ function EverythingRender(args) {
           renderCompletions={filterValue =>
             renderCompletions(filterValue, {
               onClear: () => {
-                setValue(new AutoLinkingTokenFieldValue([]));
+                setValue(new PromptFieldValue([]));
                 setAttachments([]);
               },
               onCompact: action('onCompact')
@@ -446,7 +446,7 @@ function EverythingRender(args) {
                     <MenuItem
                       id={item.command}
                       onAction={() => {
-                        setValue(new AutoLinkingTokenFieldValue([]));
+                        setValue(new PromptFieldValue([]));
                         setAttachments([]);
                       }}>
                       <Text slot="label">{item.command}</Text>
diff --git a/packages/@react-spectrum/s2/src/SideNav.tsx b/packages/@react-spectrum/s2/src/SideNav.tsx
index 5188835159d..c681b7cf98f 100644
--- a/packages/@react-spectrum/s2/src/SideNav.tsx
+++ b/packages/@react-spectrum/s2/src/SideNav.tsx
@@ -92,7 +92,7 @@ export interface SideNavProps<T>
     >,
     UnsafeStyles {
   /** The route that is currently selected. */
-  selectedRoute: string;
+  selectedRoute?: string | null;
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight;
 }
@@ -153,7 +153,7 @@ const tree = style<TreeRenderProps>({
 
 interface InternalSideNavContextValue {
   /** The route that is currently selected. */
-  selectedRoute?: string;
+  selectedRoute?: string | null;
   /** The last route the focused key was synced to; dedupes the focus sync across items. */
   syncedRouteRef?: RefObject<string | undefined>;
 }
diff --git a/packages/@react-spectrum/s2/test/SideNav.test.tsx b/packages/@react-spectrum/s2/test/SideNav.test.tsx
index 1e95cb8199c..01b032b1efa 100644
--- a/packages/@react-spectrum/s2/test/SideNav.test.tsx
+++ b/packages/@react-spectrum/s2/test/SideNav.test.tsx
@@ -237,6 +237,15 @@ describe('SideNav', () => {
     expect(queryByRole('link', {name: 'Projects 1'})).toBeNull();
   });
 
+  it('marks nothing if the selectedRoute is null', () => {
+    let {getAllByRole} = render(<SideNavExample selectedRoute={null} />);
+
+    let links = getAllByRole('link');
+    for (let link of links) {
+      expect(link).not.toHaveAttribute('aria-current');
+    }
+  });
+
   it('marks the link matching selectedRoute with aria-current="page"', () => {
     let {getByRole, rerender} = render(<SideNavExample selectedRoute="/files" />);
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx
index fa40a76d886..2b60dd90cba 100644
--- a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx
@@ -3,7 +3,7 @@ export default Layout;
 
 import docs from 'docs:react-aria-components';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/breadcrumbs/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/BreadcrumbsAnatomy.svg';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
 
 export const tags = ['navigation'];
diff --git a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs/useBreadcrumbs.mdx b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs/useBreadcrumbs.mdx
index 5c8c8ea796d..00af36b88a0 100644
--- a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs/useBreadcrumbs.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs/useBreadcrumbs.mdx
@@ -12,7 +12,7 @@ export default Layout;
 import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/breadcrumbs';
-import Anatomy from '/packages/react-aria/docs/breadcrumbs/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/BreadcrumbsAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a breadcrumbs component.';
diff --git a/packages/react-aria/docs/breadcrumbs/anatomy.svg b/packages/dev/s2-docs/pages/react-aria/BreadcrumbsAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/breadcrumbs/anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/BreadcrumbsAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx
index 95f0cad2472..cd73c8e7adf 100644
--- a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx
@@ -6,7 +6,7 @@ import vanillaDocs from 'docs:vanilla-starter/Calendar';
 import {Calendar as VanillaCalendar} from 'vanilla-starter/Calendar';
 import {Calendar as TailwindCalendar} from 'tailwind-starter/Calendar';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/calendar/calendar-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/CalendarAnatomy.svg';
 
 export const tags = ['date'];
 export const relatedPages = [{'title': 'useCalendar', 'url': './Calendar/useCalendar'}];
diff --git a/packages/dev/s2-docs/pages/react-aria/Calendar/useCalendar.mdx b/packages/dev/s2-docs/pages/react-aria/Calendar/useCalendar.mdx
index 94b961aee15..27b5e992aa0 100644
--- a/packages/dev/s2-docs/pages/react-aria/Calendar/useCalendar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Calendar/useCalendar.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/calendar';
 import statelyDocs from 'docs:@react-stately/calendar';
-import Anatomy from '/packages/react-aria/docs/calendar/calendar-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/CalendarAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a calendar component.';
diff --git a/packages/react-aria/docs/calendar/calendar-anatomy.svg b/packages/dev/s2-docs/pages/react-aria/CalendarAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/calendar/calendar-anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/CalendarAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx b/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx
index db4bc876876..c8afd936c8b 100644
--- a/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx
@@ -6,7 +6,7 @@ import vanillaDocs from 'docs:vanilla-starter/Checkbox';
 import {Checkbox as VanillaCheckbox} from 'vanilla-starter/Checkbox';
 import {Checkbox as TailwindCheckbox} from 'tailwind-starter/Checkbox';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/checkbox/checkbox-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/CheckboxAnatomy.svg';
 
 export const tags = ['input'];
 export const relatedPages = [{'title': 'useCheckbox', 'url': './Checkbox/useCheckbox'}];
diff --git a/packages/dev/s2-docs/pages/react-aria/Checkbox/useCheckbox.mdx b/packages/dev/s2-docs/pages/react-aria/Checkbox/useCheckbox.mdx
index 74a298eecd8..a478ae91986 100644
--- a/packages/dev/s2-docs/pages/react-aria/Checkbox/useCheckbox.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Checkbox/useCheckbox.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/checkbox';
 import statelyDocs from 'docs:@react-stately/toggle';
-import Anatomy from '/packages/react-aria/docs/checkbox/checkbox-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/CheckboxAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a checkbox.';
diff --git a/packages/react-aria/docs/checkbox/checkbox-anatomy.svg b/packages/dev/s2-docs/pages/react-aria/CheckboxAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/checkbox/checkbox-anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/CheckboxAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx
index edf194d79fb..3c84272973b 100644
--- a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx
@@ -4,7 +4,7 @@ export default Layout;
 import docs from 'docs:react-aria-components';
 import vanillaDocs from 'docs:vanilla-starter/CheckboxGroup';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/checkbox/checkboxgroup-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/CheckboxGroupAnatomy.svg';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const tags = ['input'];
diff --git a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup/useCheckboxGroup.mdx b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup/useCheckboxGroup.mdx
index 704aa90efc5..d5d7bb948ad 100644
--- a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup/useCheckboxGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup/useCheckboxGroup.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/checkbox';
 import statelyDocs from 'docs:@react-stately/checkbox';
-import Anatomy from '/packages/react-aria/docs/checkbox/checkboxgroup-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/CheckboxGroupAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a checkbox group component.';
diff --git a/packages/react-aria/docs/checkbox/checkboxgroup-anatomy.svg b/packages/dev/s2-docs/pages/react-aria/CheckboxGroupAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/checkbox/checkboxgroup-anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/CheckboxGroupAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx b/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx
index cd962371c4c..13befb871ad 100644
--- a/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx
@@ -5,7 +5,7 @@ import docs from 'docs:react-aria-components';
 import {ColorArea as VanillaColorArea} from 'vanilla-starter/ColorArea';
 import {ColorArea as TailwindColorArea} from 'tailwind-starter/ColorArea';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/color/ColorAreaAnatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/ColorAreaAnatomy.svg';
 
 export const tags = [];
 export const relatedPages = [{'title': 'useColorArea', 'url': './ColorArea/useColorArea'}];
diff --git a/packages/dev/s2-docs/pages/react-aria/ColorArea/useColorArea.mdx b/packages/dev/s2-docs/pages/react-aria/ColorArea/useColorArea.mdx
index 96947100ad0..7e717fd79a1 100644
--- a/packages/dev/s2-docs/pages/react-aria/ColorArea/useColorArea.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ColorArea/useColorArea.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/color';
 import statelyDocs from 'docs:@react-stately/color';
-import Anatomy from '/packages/react-aria/docs/color/ColorAreaAnatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/ColorAreaAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a color area.';
diff --git a/packages/react-aria/docs/color/ColorAreaAnatomy.svg b/packages/dev/s2-docs/pages/react-aria/ColorAreaAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/color/ColorAreaAnatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/ColorAreaAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/ColorField.mdx b/packages/dev/s2-docs/pages/react-aria/ColorField.mdx
index bff24a940a6..2ff529d6441 100644
--- a/packages/dev/s2-docs/pages/react-aria/ColorField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ColorField.mdx
@@ -6,7 +6,7 @@ import {ColorField as TailwindColorField} from 'tailwind-starter/ColorField';
 import '../../tailwind/tailwind.css';
 import vanillaDocs from 'docs:vanilla-starter/ColorField';
 import docs from 'docs:react-aria-components';
-import Anatomy from '/packages/react-aria/docs/color/ColorFieldAnatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/ColorFieldAnatomy.svg';
 
 export const tags = ['input'];
 export const relatedPages = [{'title': 'useColorField', 'url': './ColorField/useColorField'}];
diff --git a/packages/dev/s2-docs/pages/react-aria/ColorField/useColorField.mdx b/packages/dev/s2-docs/pages/react-aria/ColorField/useColorField.mdx
index e185477c966..9792bbb804d 100644
--- a/packages/dev/s2-docs/pages/react-aria/ColorField/useColorField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ColorField/useColorField.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/color';
 import statelyDocs from 'docs:@react-stately/color';
-import Anatomy from '/packages/react-aria/docs/color/ColorFieldAnatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/ColorFieldAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a color field.';
diff --git a/packages/react-aria/docs/color/ColorFieldAnatomy.svg b/packages/dev/s2-docs/pages/react-aria/ColorFieldAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/color/ColorFieldAnatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/ColorFieldAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx b/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx
index d32f25f9ea1..f90b1c3b1ed 100644
--- a/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx
@@ -6,7 +6,7 @@ import vanillaDocs from 'docs:vanilla-starter/ColorSlider';
 import {ColorSlider as VanillaColorSlider} from 'vanilla-starter/ColorSlider';
 import {ColorSlider as TailwindColorSlider} from 'tailwind-starter/ColorSlider';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/color/ColorSliderAnatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/ColorSliderAnatomy.svg';
 
 export const tags = ['input'];
 export const relatedPages = [{'title': 'useColorSlider', 'url': './ColorSlider/useColorSlider'}];
diff --git a/packages/dev/s2-docs/pages/react-aria/ColorSlider/useColorSlider.mdx b/packages/dev/s2-docs/pages/react-aria/ColorSlider/useColorSlider.mdx
index 035e9b378da..9fec54148d3 100644
--- a/packages/dev/s2-docs/pages/react-aria/ColorSlider/useColorSlider.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ColorSlider/useColorSlider.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/color';
 import statelyDocs from 'docs:@react-stately/color';
-import Anatomy from '/packages/react-aria/docs/color/ColorSliderAnatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/ColorSliderAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a color slider.';
diff --git a/packages/react-aria/docs/color/ColorSliderAnatomy.svg b/packages/dev/s2-docs/pages/react-aria/ColorSliderAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/color/ColorSliderAnatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/ColorSliderAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx b/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx
index f29c9da1eae..9a88d7fb4ad 100644
--- a/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx
@@ -5,7 +5,7 @@ import docs from 'docs:react-aria-components';
 import {ColorWheel as VanillaColorWheel} from 'vanilla-starter/ColorWheel';
 import {ColorWheel as TailwindColorWheel} from 'tailwind-starter/ColorWheel';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/color/ColorWheelAnatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/ColorWheelAnatomy.svg';
 
 export const tags = ['input'];
 export const relatedPages = [{'title': 'useColorWheel', 'url': './ColorWheel/useColorWheel'}];
diff --git a/packages/dev/s2-docs/pages/react-aria/ColorWheel/useColorWheel.mdx b/packages/dev/s2-docs/pages/react-aria/ColorWheel/useColorWheel.mdx
index 9e01653a817..4966b2fdcbe 100644
--- a/packages/dev/s2-docs/pages/react-aria/ColorWheel/useColorWheel.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ColorWheel/useColorWheel.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/color';
 import statelyDocs from 'docs:@react-stately/color';
-import Anatomy from '/packages/react-aria/docs/color/ColorWheelAnatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/ColorWheelAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a color wheel.';
diff --git a/packages/react-aria/docs/color/ColorWheelAnatomy.svg b/packages/dev/s2-docs/pages/react-aria/ColorWheelAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/color/ColorWheelAnatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/ColorWheelAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/DateField.mdx b/packages/dev/s2-docs/pages/react-aria/DateField.mdx
index de59f5a1513..b2e944de20c 100644
--- a/packages/dev/s2-docs/pages/react-aria/DateField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/DateField.mdx
@@ -6,7 +6,7 @@ import vanillaDocs from 'docs:vanilla-starter/DateField';
 import {DateField as VanillaDateField} from 'vanilla-starter/DateField';
 import {DateField as TailwindDateField} from 'tailwind-starter/DateField';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/datepicker/datefield-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/DateFieldAnatomy.svg';
 
 export const tags = ['calendar', 'input'];
 export const relatedPages = [{'title': 'useDateField', 'url': './DateField/useDateField'}];
diff --git a/packages/dev/s2-docs/pages/react-aria/DateField/useDateField.mdx b/packages/dev/s2-docs/pages/react-aria/DateField/useDateField.mdx
index 7d84e5c76f6..7d770a0f34e 100644
--- a/packages/dev/s2-docs/pages/react-aria/DateField/useDateField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/DateField/useDateField.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/datepicker';
 import statelyDocs from 'docs:@react-stately/datepicker';
-import Anatomy from '/packages/react-aria/docs/datepicker/datefield-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/DateFieldAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a date field component.';
diff --git a/packages/react-aria/docs/datepicker/datefield-anatomy.svg b/packages/dev/s2-docs/pages/react-aria/DateFieldAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/datepicker/datefield-anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/DateFieldAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx
index a097c9408f8..f0dd8eecb92 100644
--- a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx
@@ -6,7 +6,7 @@ import vanillaDocs from 'docs:vanilla-starter/DatePicker';
 import {DatePicker as VanillaDatePicker} from 'vanilla-starter/DatePicker';
 import {DatePicker as TailwindDatePicker} from 'tailwind-starter/DatePicker';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/datepicker/datepicker-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/DatePickerAnatomy.svg';
 
 export const tags = ['calendar', 'input'];
 export const relatedPages = [{'title': 'useDatePicker', 'url': './DatePicker/useDatePicker'}];
diff --git a/packages/dev/s2-docs/pages/react-aria/DatePicker/useDatePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DatePicker/useDatePicker.mdx
index b7859eb5e38..ce9b0be36f4 100644
--- a/packages/dev/s2-docs/pages/react-aria/DatePicker/useDatePicker.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/DatePicker/useDatePicker.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/datepicker';
 import statelyDocs from 'docs:@react-stately/datepicker';
-import Anatomy from '/packages/react-aria/docs/datepicker/datepicker-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/DatePickerAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a date picker component.';
diff --git a/packages/react-aria/docs/datepicker/datepicker-anatomy.svg b/packages/dev/s2-docs/pages/react-aria/DatePickerAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/datepicker/datepicker-anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/DatePickerAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx
index c47b5b8912d..176825ba868 100644
--- a/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx
@@ -6,7 +6,7 @@ import vanillaDocs from 'docs:vanilla-starter/DateRangePicker';
 import {DateRangePicker as VanillaDateRangePicker} from 'vanilla-starter/DateRangePicker';
 import {DateRangePicker as TailwindDateRangePicker} from 'tailwind-starter/DateRangePicker';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/datepicker/daterangepicker-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/DateRangePickerAnatomy2.svg';
 
 export const tags = ['calendar', 'input'];
 export const relatedPages = [{'title': 'useDateRangePicker', 'url': './DateRangePicker/useDateRangePicker'}];
diff --git a/packages/dev/s2-docs/pages/react-aria/DateRangePicker/useDateRangePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DateRangePicker/useDateRangePicker.mdx
index 9ab33e7f417..905bcf244fc 100644
--- a/packages/dev/s2-docs/pages/react-aria/DateRangePicker/useDateRangePicker.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/DateRangePicker/useDateRangePicker.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/datepicker';
 import statelyDocs from 'docs:@react-stately/datepicker';
-import Anatomy from '/packages/react-aria/docs/datepicker/daterangepicker-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/DateRangePickerAnatomy2.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a date range picker component.';
diff --git a/packages/react-aria/docs/datepicker/daterangepicker-anatomy.svg b/packages/dev/s2-docs/pages/react-aria/DateRangePickerAnatomy2.svg
similarity index 100%
rename from packages/react-aria/docs/datepicker/daterangepicker-anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/DateRangePickerAnatomy2.svg
diff --git a/packages/react-aria/docs/dnd/Anatomy.svg b/packages/dev/s2-docs/pages/react-aria/DndAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/dnd/Anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/DndAnatomy.svg
diff --git a/packages/react-aria/docs/dnd/BetweenDropPosition.svg b/packages/dev/s2-docs/pages/react-aria/DndBetweenDropPosition.svg
similarity index 100%
rename from packages/react-aria/docs/dnd/BetweenDropPosition.svg
rename to packages/dev/s2-docs/pages/react-aria/DndBetweenDropPosition.svg
diff --git a/packages/react-aria/docs/dnd/DragAffordance.svg b/packages/dev/s2-docs/pages/react-aria/DndDragAffordance.svg
similarity index 100%
rename from packages/react-aria/docs/dnd/DragAffordance.svg
rename to packages/dev/s2-docs/pages/react-aria/DndDragAffordance.svg
diff --git a/packages/react-aria/docs/dnd/DragPreview.svg b/packages/dev/s2-docs/pages/react-aria/DndDragPreview.svg
similarity index 100%
rename from packages/react-aria/docs/dnd/DragPreview.svg
rename to packages/dev/s2-docs/pages/react-aria/DndDragPreview.svg
diff --git a/packages/react-aria/docs/dnd/DropOperation.svg b/packages/dev/s2-docs/pages/react-aria/DndDropOperation.svg
similarity index 100%
rename from packages/react-aria/docs/dnd/DropOperation.svg
rename to packages/dev/s2-docs/pages/react-aria/DndDropOperation.svg
diff --git a/packages/react-aria/docs/dnd/OnDropPosition.svg b/packages/dev/s2-docs/pages/react-aria/DndOnDropPosition.svg
similarity index 100%
rename from packages/react-aria/docs/dnd/OnDropPosition.svg
rename to packages/dev/s2-docs/pages/react-aria/DndOnDropPosition.svg
diff --git a/packages/react-aria/docs/dnd/RootDropPosition.svg b/packages/dev/s2-docs/pages/react-aria/DndRootDropPosition.svg
similarity index 100%
rename from packages/react-aria/docs/dnd/RootDropPosition.svg
rename to packages/dev/s2-docs/pages/react-aria/DndRootDropPosition.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/Meter.mdx b/packages/dev/s2-docs/pages/react-aria/Meter.mdx
index b8fdcab3e7c..483c0916f31 100644
--- a/packages/dev/s2-docs/pages/react-aria/Meter.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Meter.mdx
@@ -6,7 +6,7 @@ import {Meter as VanillaMeter} from 'vanilla-starter/Meter';
 import {ProgressCircle as VanillaProgressCircle} from 'vanilla-starter/ProgressCircle';
 import {Meter as TailwindMeter} from 'tailwind-starter/Meter';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/meter/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/MeterAnatomy2.svg';
 
 export const tags = ['gauge', 'progress', 'level'];
 export const relatedPages = [{'title': 'useMeter', 'url': './Meter/useMeter'}];
diff --git a/packages/dev/s2-docs/pages/react-aria/Meter/useMeter.mdx b/packages/dev/s2-docs/pages/react-aria/Meter/useMeter.mdx
index b5fee0bcba8..2dd25a35117 100644
--- a/packages/dev/s2-docs/pages/react-aria/Meter/useMeter.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Meter/useMeter.mdx
@@ -12,7 +12,7 @@ export default Layout;
 import {FunctionAPI} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/meter';
-import Anatomy from '/packages/react-aria/docs/meter/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/MeterAnatomy2.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the accessibility implementation for a meter component.';
diff --git a/packages/react-aria/docs/meter/anatomy.svg b/packages/dev/s2-docs/pages/react-aria/MeterAnatomy2.svg
similarity index 100%
rename from packages/react-aria/docs/meter/anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/MeterAnatomy2.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/Modal.mdx b/packages/dev/s2-docs/pages/react-aria/Modal.mdx
index 0d8d2460696..61bb957eb6f 100644
--- a/packages/dev/s2-docs/pages/react-aria/Modal.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Modal.mdx
@@ -4,7 +4,7 @@ export default Layout;
 import docs from 'docs:react-aria-components';
 import vanillaDocs from 'docs:vanilla-starter/Modal';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/overlays/modal-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/ModalAnatomy.svg';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const tags = ['dialog', 'popup', 'overlay'];
diff --git a/packages/dev/s2-docs/pages/react-aria/Modal/useModalOverlay.mdx b/packages/dev/s2-docs/pages/react-aria/Modal/useModalOverlay.mdx
index 82c3ab44dc9..f5862ff0464 100644
--- a/packages/dev/s2-docs/pages/react-aria/Modal/useModalOverlay.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Modal/useModalOverlay.mdx
@@ -14,7 +14,7 @@ import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/overlays';
 import dialogDocs from 'docs:@react-aria/dialog';
 import statelyDocs from 'docs:@react-stately/overlays';
-import Anatomy from '/packages/react-aria/docs/overlays/modal-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/ModalAnatomy.svg';
 import 'hooks-starter/theme.css';
 
 export const section = 'Hooks';
diff --git a/packages/react-aria/docs/overlays/modal-anatomy.svg b/packages/dev/s2-docs/pages/react-aria/ModalAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/overlays/modal-anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/ModalAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/NumberField.mdx b/packages/dev/s2-docs/pages/react-aria/NumberField.mdx
index d69f7efd87c..a65e2600ebd 100644
--- a/packages/dev/s2-docs/pages/react-aria/NumberField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/NumberField.mdx
@@ -6,7 +6,7 @@ import vanillaDocs from 'docs:vanilla-starter/NumberField';
 import {NumberField as VanillaNumberField} from 'vanilla-starter/NumberField';
 import {NumberField as TailwindNumberField} from 'tailwind-starter/NumberField';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/numberfield/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/NumberFieldAnatomy.svg';
 
 export const tags = ['input'];
 export const relatedPages = [{'title': 'useNumberField', 'url': './NumberField/useNumberField'}];
diff --git a/packages/dev/s2-docs/pages/react-aria/NumberField/useNumberField.mdx b/packages/dev/s2-docs/pages/react-aria/NumberField/useNumberField.mdx
index 6491ad1f7bc..4f3a81fe9a2 100644
--- a/packages/dev/s2-docs/pages/react-aria/NumberField/useNumberField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/NumberField/useNumberField.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/numberfield';
 import statelyDocs from 'docs:@react-stately/numberfield';
-import Anatomy from '/packages/react-aria/docs/numberfield/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/NumberFieldAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a number field component.';
diff --git a/packages/react-aria/docs/numberfield/anatomy.svg b/packages/dev/s2-docs/pages/react-aria/NumberFieldAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/numberfield/anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/NumberFieldAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/Popover.mdx b/packages/dev/s2-docs/pages/react-aria/Popover.mdx
index 7c57f16766f..baa40cbd137 100644
--- a/packages/dev/s2-docs/pages/react-aria/Popover.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Popover.mdx
@@ -4,7 +4,7 @@ export default Layout;
 import docs from 'docs:react-aria-components';
 import vanillaDocs from 'docs:vanilla-starter/Popover';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/overlays/popover-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/PopoverAnatomy2.svg';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const tags = ['popup', 'overlay'];
diff --git a/packages/dev/s2-docs/pages/react-aria/Popover/usePopover.mdx b/packages/dev/s2-docs/pages/react-aria/Popover/usePopover.mdx
index 4a030e1e0e0..4a74a5579ed 100644
--- a/packages/dev/s2-docs/pages/react-aria/Popover/usePopover.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Popover/usePopover.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/overlays';
 import statelyDocs from 'docs:@react-stately/overlays';
-import Anatomy from '/packages/react-aria/docs/overlays/popover-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/PopoverAnatomy2.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a popover overlay.';
diff --git a/packages/react-aria/docs/overlays/popover-anatomy.svg b/packages/dev/s2-docs/pages/react-aria/PopoverAnatomy2.svg
similarity index 100%
rename from packages/react-aria/docs/overlays/popover-anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/PopoverAnatomy2.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/PreviewTrigger.mdx b/packages/dev/s2-docs/pages/react-aria/PreviewTrigger.mdx
index cd4dc973a34..fe39cdb3472 100644
--- a/packages/dev/s2-docs/pages/react-aria/PreviewTrigger.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/PreviewTrigger.mdx
@@ -4,7 +4,7 @@ export default Layout;
 import docs from 'docs:react-aria-components';
 import vanillaDocs from 'docs:vanilla-starter/Popover';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/overlays/preview-trigger-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/PreviewTriggerAnatomy.svg';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const tags = ['popup', 'overlay', 'preview', 'link', 'hover', 'tooltip'];
@@ -17,7 +17,7 @@ export const description = 'Displays a non-modal preview of content on hover, fo
 <ExampleSwitcher>
   ```tsx render type="vanilla" docs={vanillaDocs.exports.Popover} links={vanillaDocs.links} props={['placement', 'offset', 'crossOffset', 'shouldFlip']}
   "use client";
-  import {PreviewTrigger} from 'react-aria-components';
+  import {PreviewTrigger} from 'react-aria-components/PreviewTrigger';
   import {Popover} from 'vanilla-starter/Popover';
   import {Link} from 'vanilla-starter/Link';
   import {Button} from 'vanilla-starter/Button';
@@ -68,7 +68,7 @@ export const description = 'Displays a non-modal preview of content on hover, fo
 
    ```tsx render type="tailwind" docs={vanillaDocs.exports.Popover} links={vanillaDocs.links} props={['placement', 'offset', 'crossOffset', 'shouldFlip']}
   "use client";
-  import {PreviewTrigger} from 'react-aria-components';
+  import {PreviewTrigger} from 'react-aria-components/PreviewTrigger';
   import {Popover} from 'tailwind-starter/Popover';
   import {Link} from 'tailwind-starter/Link';
   import {Button} from 'tailwind-starter/Button';
@@ -127,7 +127,7 @@ When a preview is open, pressing <Keyboard>Tab</Keyboard> moves focus into the p
 
 ```tsx render type="vanilla" docs={docs.exports.PreviewTrigger} links={docs.links} props={['delay', 'closeDelay', 'isDisabled']}
 "use client";
-import {PreviewTrigger} from 'react-aria-components';
+import {PreviewTrigger} from 'react-aria-components/PreviewTrigger';
 import {Popover} from 'vanilla-starter/Popover';
 import {Link} from 'vanilla-starter/Link';
 import {Button} from 'vanilla-starter/Button';
@@ -181,7 +181,7 @@ function Example(props) {
 
 ```tsx render
 "use client"
-import {PreviewTrigger} from 'react-aria-components';
+import {PreviewTrigger} from 'react-aria-components/PreviewTrigger';
 import {Focusable} from 'react-aria-components/Tooltip';
 import {Popover} from 'vanilla-starter/Popover';
 
diff --git a/packages/react-aria/docs/overlays/preview-trigger-anatomy.svg b/packages/dev/s2-docs/pages/react-aria/PreviewTriggerAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/overlays/preview-trigger-anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/PreviewTriggerAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx b/packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx
index daadc6f354c..97bd9904cc4 100644
--- a/packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx
@@ -8,7 +8,7 @@ import {ProgressBar as VanillaProgressBar} from 'vanilla-starter/ProgressBar';
 import {ProgressCircle as VanillaProgressCircle} from 'vanilla-starter/ProgressCircle';
 import {ProgressBar as TailwindProgressBar} from 'tailwind-starter/ProgressBar';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/progress/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/ProgressBarAnatomy.svg';
 
 export const tags = ['loading', 'progress'];
 export const relatedPages = [{'title': 'useProgressBar', 'url': './ProgressBar/useProgressBar'}];
diff --git a/packages/dev/s2-docs/pages/react-aria/ProgressBar/useProgressBar.mdx b/packages/dev/s2-docs/pages/react-aria/ProgressBar/useProgressBar.mdx
index 08d118cfd84..04daf74f90d 100644
--- a/packages/dev/s2-docs/pages/react-aria/ProgressBar/useProgressBar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ProgressBar/useProgressBar.mdx
@@ -12,7 +12,7 @@ export default Layout;
 import {FunctionAPI} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/progress';
-import Anatomy from '/packages/react-aria/docs/progress/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/ProgressBarAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the accessibility implementation for a progress bar component.';
diff --git a/packages/react-aria/docs/progress/anatomy.svg b/packages/dev/s2-docs/pages/react-aria/ProgressBarAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/progress/anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/ProgressBarAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx
index 1b7613fa0aa..ec2a617cbb4 100644
--- a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx
@@ -4,7 +4,7 @@ export default Layout;
 import docs from 'docs:react-aria-components';
 import vanillaDocs from 'docs:vanilla-starter/RadioGroup';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/radio/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/RadioGroupAnatomy.svg';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const tags = ['input'];
diff --git a/packages/dev/s2-docs/pages/react-aria/RadioGroup/useRadioGroup.mdx b/packages/dev/s2-docs/pages/react-aria/RadioGroup/useRadioGroup.mdx
index e09d27232f7..3040104051b 100644
--- a/packages/dev/s2-docs/pages/react-aria/RadioGroup/useRadioGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/RadioGroup/useRadioGroup.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/radio';
 import statelyDocs from 'docs:@react-stately/radio';
-import Anatomy from '/packages/react-aria/docs/radio/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/RadioGroupAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a radio group component.';
diff --git a/packages/react-aria/docs/radio/anatomy.svg b/packages/dev/s2-docs/pages/react-aria/RadioGroupAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/radio/anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/RadioGroupAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx
index 5cad7f60098..07bcca98b56 100644
--- a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx
@@ -6,7 +6,7 @@ import vanillaDocs from 'docs:vanilla-starter/RangeCalendar';
 import {RangeCalendar as VanillaRangeCalendar} from 'vanilla-starter/RangeCalendar';
 import {RangeCalendar as TailwindRangeCalendar} from 'tailwind-starter/RangeCalendar';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/calendar/rangecalendar-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/RangeCalendarAnatomy2.svg';
 
 export const tags = ['calendar'];
 export const relatedPages = [{'title': 'useRangeCalendar', 'url': './RangeCalendar/useRangeCalendar'}];
diff --git a/packages/dev/s2-docs/pages/react-aria/RangeCalendar/useRangeCalendar.mdx b/packages/dev/s2-docs/pages/react-aria/RangeCalendar/useRangeCalendar.mdx
index d1fd3ad0d8f..eafa94652ad 100644
--- a/packages/dev/s2-docs/pages/react-aria/RangeCalendar/useRangeCalendar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/RangeCalendar/useRangeCalendar.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/calendar';
 import statelyDocs from 'docs:@react-stately/calendar';
-import Anatomy from '/packages/react-aria/docs/calendar/rangecalendar-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/RangeCalendarAnatomy2.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a range calendar component.';
diff --git a/packages/react-aria/docs/calendar/rangecalendar-anatomy.svg b/packages/dev/s2-docs/pages/react-aria/RangeCalendarAnatomy2.svg
similarity index 100%
rename from packages/react-aria/docs/calendar/rangecalendar-anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/RangeCalendarAnatomy2.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/SearchField.mdx b/packages/dev/s2-docs/pages/react-aria/SearchField.mdx
index 0e171695acf..cdcbe510334 100644
--- a/packages/dev/s2-docs/pages/react-aria/SearchField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/SearchField.mdx
@@ -6,7 +6,7 @@ import vanillaDocs from 'docs:vanilla-starter/SearchField';
 import {SearchField as VanillaSearchField} from 'vanilla-starter/SearchField';
 import {SearchField as TailwindSearchField} from 'tailwind-starter/SearchField';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/searchfield/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/SearchFieldAnatomy.svg';
 
 export const tags = ['input'];
 export const relatedPages = [{'title': 'useSearchField', 'url': './SearchField/useSearchField'}];
diff --git a/packages/dev/s2-docs/pages/react-aria/SearchField/useSearchField.mdx b/packages/dev/s2-docs/pages/react-aria/SearchField/useSearchField.mdx
index 13c159de867..6b300745e50 100644
--- a/packages/dev/s2-docs/pages/react-aria/SearchField/useSearchField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/SearchField/useSearchField.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/searchfield';
 import statelyDocs from 'docs:@react-stately/searchfield';
-import Anatomy from '/packages/react-aria/docs/searchfield/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/SearchFieldAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a search field.';
diff --git a/packages/react-aria/docs/searchfield/anatomy.svg b/packages/dev/s2-docs/pages/react-aria/SearchFieldAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/searchfield/anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/SearchFieldAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/Slider.mdx b/packages/dev/s2-docs/pages/react-aria/Slider.mdx
index 58dc0f1028c..893ff592436 100644
--- a/packages/dev/s2-docs/pages/react-aria/Slider.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Slider.mdx
@@ -7,7 +7,7 @@ import {Slider as VanillaSlider} from 'vanilla-starter/Slider';
 import {Slider as TailwindSlider} from 'tailwind-starter/Slider';
 import tailwindDocs from 'docs:tailwind-starter/Slider';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/slider/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/SliderAnatomy.svg';
 
 export const tags = ['range input', 'track', 'scrubber'];
 export const relatedPages = [{'title': 'useSlider', 'url': './Slider/useSlider'}];
diff --git a/packages/dev/s2-docs/pages/react-aria/Slider/useSlider.mdx b/packages/dev/s2-docs/pages/react-aria/Slider/useSlider.mdx
index 81226828e88..1428b331093 100644
--- a/packages/dev/s2-docs/pages/react-aria/Slider/useSlider.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Slider/useSlider.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/slider';
 import statelyDocs from 'docs:@react-stately/slider';
-import Anatomy from '/packages/react-aria/docs/slider/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/SliderAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a slider component.';
diff --git a/packages/react-aria/docs/slider/anatomy.svg b/packages/dev/s2-docs/pages/react-aria/SliderAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/slider/anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/SliderAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/Switch.mdx b/packages/dev/s2-docs/pages/react-aria/Switch.mdx
index 5582ec487f3..f4d28c8a464 100644
--- a/packages/dev/s2-docs/pages/react-aria/Switch.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Switch.mdx
@@ -6,7 +6,7 @@ import vanillaDocs from 'docs:vanilla-starter/Switch';
 import {Switch as VanillaSwitch} from 'vanilla-starter/Switch';
 import {Switch as TailwindSwitch} from 'tailwind-starter/Switch';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/switch/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/SwitchAnatomy.svg';
 
 export const tags = ['toggle', 'input'];
 export const relatedPages = [{'title': 'useSwitch', 'url': './Switch/useSwitch'}];
diff --git a/packages/dev/s2-docs/pages/react-aria/Switch/useSwitch.mdx b/packages/dev/s2-docs/pages/react-aria/Switch/useSwitch.mdx
index 1dec4eccced..359aff39ece 100644
--- a/packages/dev/s2-docs/pages/react-aria/Switch/useSwitch.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Switch/useSwitch.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/switch';
 import statelyDocs from 'docs:@react-stately/toggle';
-import Anatomy from '/packages/react-aria/docs/switch/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/SwitchAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a switch.';
diff --git a/packages/react-aria/docs/switch/anatomy.svg b/packages/dev/s2-docs/pages/react-aria/SwitchAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/switch/anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/SwitchAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/Tabs.mdx b/packages/dev/s2-docs/pages/react-aria/Tabs.mdx
index 7f172e634c1..ad1e3ea5b5a 100644
--- a/packages/dev/s2-docs/pages/react-aria/Tabs.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Tabs.mdx
@@ -5,7 +5,7 @@ import docs from 'docs:react-aria-components';
 import {Tabs as VanillaTabs, TabsItem} from 'vanilla-starter/Tabs';
 import vanillaDocs from 'docs:vanilla-starter/Tabs';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/tabs/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/TabsAnatomy.svg';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const tags = ['navigation'];
diff --git a/packages/dev/s2-docs/pages/react-aria/Tabs/useTabList.mdx b/packages/dev/s2-docs/pages/react-aria/Tabs/useTabList.mdx
index 49d4c9b39c5..997e2005448 100644
--- a/packages/dev/s2-docs/pages/react-aria/Tabs/useTabList.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Tabs/useTabList.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/tabs';
 import statelyDocs from 'docs:@react-stately/tabs';
-import Anatomy from '/packages/react-aria/docs/tabs/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/TabsAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a tabs component.';
diff --git a/packages/react-aria/docs/tabs/anatomy.svg b/packages/dev/s2-docs/pages/react-aria/TabsAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/tabs/anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/TabsAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx b/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx
index cfbb8abbb12..6a670ef953e 100644
--- a/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx
@@ -5,7 +5,7 @@ import docs from 'docs:react-aria-components';
 import {TagGroup as VanillaTagGroup, Tag} from 'vanilla-starter/TagGroup';
 import vanillaDocs from 'docs:vanilla-starter/TagGroup';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/tag/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/TagGroupAnatomy2.svg';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
 
 export const tags = ['chips', 'pills'];
diff --git a/packages/dev/s2-docs/pages/react-aria/TagGroup/useTagGroup.mdx b/packages/dev/s2-docs/pages/react-aria/TagGroup/useTagGroup.mdx
index f5e240f6569..4aec397266a 100644
--- a/packages/dev/s2-docs/pages/react-aria/TagGroup/useTagGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/TagGroup/useTagGroup.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/tag';
 import statelyDocs from 'docs:@react-stately/list';
-import Anatomy from '/packages/react-aria/docs/tag/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/TagGroupAnatomy2.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a tag group component.';
diff --git a/packages/react-aria/docs/tag/anatomy.svg b/packages/dev/s2-docs/pages/react-aria/TagGroupAnatomy2.svg
similarity index 100%
rename from packages/react-aria/docs/tag/anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/TagGroupAnatomy2.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/TextField.mdx b/packages/dev/s2-docs/pages/react-aria/TextField.mdx
index 3cf9c3f4627..a76f2d374c8 100644
--- a/packages/dev/s2-docs/pages/react-aria/TextField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/TextField.mdx
@@ -6,7 +6,7 @@ import vanillaDocs from 'docs:vanilla-starter/TextField';
 import {TextField as VanillaTextField} from 'vanilla-starter/TextField';
 import {TextField as TailwindTextField} from 'tailwind-starter/TextField';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/textfield/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/TextFieldAnatomy.svg';
 
 export const tags = ['input'];
 export const relatedPages = [{'title': 'useTextField', 'url': './TextField/useTextField'}];
diff --git a/packages/dev/s2-docs/pages/react-aria/TextField/useTextField.mdx b/packages/dev/s2-docs/pages/react-aria/TextField/useTextField.mdx
index e172145a92f..c1d6dde37bc 100644
--- a/packages/dev/s2-docs/pages/react-aria/TextField/useTextField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/TextField/useTextField.mdx
@@ -12,7 +12,7 @@ export default Layout;
 import {FunctionAPI} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/textfield';
-import Anatomy from '/packages/react-aria/docs/textfield/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/TextFieldAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a text field.';
diff --git a/packages/react-aria/docs/textfield/anatomy.svg b/packages/dev/s2-docs/pages/react-aria/TextFieldAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/textfield/anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/TextFieldAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/TimeField.mdx b/packages/dev/s2-docs/pages/react-aria/TimeField.mdx
index 142248ca43b..df6ecaa7620 100644
--- a/packages/dev/s2-docs/pages/react-aria/TimeField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/TimeField.mdx
@@ -6,7 +6,7 @@ import vanillaDocs from 'docs:vanilla-starter/TimeField';
 import {TimeField as VanillaTimeField} from 'vanilla-starter/TimeField';
 import {TimeField as TailwindTimeField} from 'tailwind-starter/TimeField';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/datepicker/timefield-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/TimeFieldAnatomy.svg';
 
 export const tags = ['date', 'input'];
 export const relatedPages = [{'title': 'useTimeField', 'url': './TimeField/useTimeField'}];
diff --git a/packages/dev/s2-docs/pages/react-aria/TimeField/useTimeField.mdx b/packages/dev/s2-docs/pages/react-aria/TimeField/useTimeField.mdx
index b4e1200653f..4448a884a21 100644
--- a/packages/dev/s2-docs/pages/react-aria/TimeField/useTimeField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/TimeField/useTimeField.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/datepicker';
 import statelyDocs from 'docs:@react-stately/datepicker';
-import Anatomy from '/packages/react-aria/docs/datepicker/timefield-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/TimeFieldAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a time field component.';
diff --git a/packages/react-aria/docs/datepicker/timefield-anatomy.svg b/packages/dev/s2-docs/pages/react-aria/TimeFieldAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/datepicker/timefield-anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/TimeFieldAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/Toast.mdx b/packages/dev/s2-docs/pages/react-aria/Toast.mdx
index 223de5ec2c3..cd203171a6e 100644
--- a/packages/dev/s2-docs/pages/react-aria/Toast.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Toast.mdx
@@ -4,7 +4,7 @@ export default Layout;
 import docs from 'docs:react-aria-components';
 import toastDocs from 'docs:./ExampleToast';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/toast/toast-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/ToastAnatomy.svg';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
 
 export const tags = ['notifications'];
diff --git a/packages/dev/s2-docs/pages/react-aria/Toast/useToast.mdx b/packages/dev/s2-docs/pages/react-aria/Toast/useToast.mdx
index b86e7c0b126..07f068e3a91 100644
--- a/packages/dev/s2-docs/pages/react-aria/Toast/useToast.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Toast/useToast.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/toast';
 import statelyDocs from 'docs:@react-stately/toast';
-import Anatomy from '/packages/react-aria/docs/toast/toast-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/ToastAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a toast notification.';
diff --git a/packages/react-aria/docs/toast/toast-anatomy.svg b/packages/dev/s2-docs/pages/react-aria/ToastAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/toast/toast-anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/ToastAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx b/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx
index e42eef96d1f..543cccd9c9b 100644
--- a/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx
@@ -3,7 +3,7 @@ export default Layout;
 
 import docs from 'docs:react-aria-components';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/button/ToggleButtonGroupAnatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroupAnatomy2.svg';
 
 export const tags = ['toggle', 'btn'];
 export const relatedPages = [{'title': 'useToggleButtonGroup', 'url': './ToggleButtonGroup/useToggleButtonGroup'}];
diff --git a/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup/useToggleButtonGroup.mdx b/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup/useToggleButtonGroup.mdx
index 8e4a2aa99d8..9a4012b1f06 100644
--- a/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup/useToggleButtonGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup/useToggleButtonGroup.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/button';
 import statelyDocs from 'docs:@react-stately/toggle';
-import Anatomy from '/packages/react-aria/docs/button/ToggleButtonGroupAnatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroupAnatomy2.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a group of toggle buttons.';
diff --git a/packages/react-aria/docs/button/ToggleButtonGroupAnatomy.svg b/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroupAnatomy2.svg
similarity index 100%
rename from packages/react-aria/docs/button/ToggleButtonGroupAnatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/ToggleButtonGroupAnatomy2.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/TokenField.mdx b/packages/dev/s2-docs/pages/react-aria/TokenField.mdx
index aa0869e7c29..4374a8b9846 100644
--- a/packages/dev/s2-docs/pages/react-aria/TokenField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/TokenField.mdx
@@ -99,14 +99,14 @@ import {TokenizingFieldValue} from './TokenizingFieldValue';
 
 ## Autocomplete
 
-Combine `TokenField` with [Autocomplete](Autocomplete) to provide inline completions such as @mentions and slash commands. Use `TokenFieldValue.findText` to locate the anchor character, and `positionToDOMRange` to position a [Popover](Popover) relative to the filter text.
+Combine `TokenField` with [Autocomplete](Autocomplete) to provide inline completions such as @mentions and slash commands. Use `TokenFieldValue.findText` to locate the anchor character, and `tokenFieldPositionToDOMRange` to position a [Popover](Popover) relative to the filter text.
 
 ```tsx render
 "use client";
 import {Autocomplete} from 'react-aria-components/Autocomplete';
 import {Text} from 'react-aria-components/Text';
 import {Token, TokenField} from 'vanilla-starter/TokenField';
-import {positionToDOMRange} from 'react-aria/useTokenField';
+import {tokenFieldPositionToDOMRange} from 'react-aria/useTokenField';
 import {Direction, TokenFieldValue} from 'react-aria-components/TokenField';
 import {Menu, MenuItem} from 'vanilla-starter/Menu';
 import {Popover} from 'vanilla-starter/Popover';
@@ -195,7 +195,7 @@ function Example() {
         placement="bottom start"
         trigger="MenuTrigger"
         getTargetRect={target => {
-          return positionToDOMRange(target, filterAnchor!).getBoundingClientRect();
+          return tokenFieldPositionToDOMRange(target, filterAnchor!).getBoundingClientRect();
         }}>
         <Menu items={items} dependencies={[filterAnchor]}>
           {item => (
diff --git a/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx b/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx
index 1ec9689020b..28632e52cc6 100644
--- a/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx
@@ -3,7 +3,7 @@ export default Layout;
 
 import docs from 'docs:react-aria-components';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/toolbar/toolbar-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/ToolbarAnatomy.svg';
 
 export const tags = ['group'];
 export const relatedPages = [{'title': 'useToolbar', 'url': './Toolbar/useToolbar'}];
diff --git a/packages/dev/s2-docs/pages/react-aria/Toolbar/useToolbar.mdx b/packages/dev/s2-docs/pages/react-aria/Toolbar/useToolbar.mdx
index 18e56e6fd72..f667152c63f 100644
--- a/packages/dev/s2-docs/pages/react-aria/Toolbar/useToolbar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Toolbar/useToolbar.mdx
@@ -12,7 +12,7 @@ export default Layout;
 import {FunctionAPI} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/toolbar';
-import Anatomy from '/packages/react-aria/docs/toolbar/toolbar-anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/ToolbarAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a toolbar component.';
diff --git a/packages/react-aria/docs/toolbar/toolbar-anatomy.svg b/packages/dev/s2-docs/pages/react-aria/ToolbarAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/toolbar/toolbar-anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/ToolbarAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx
index d02d85148eb..19d7e989670 100644
--- a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx
@@ -4,7 +4,7 @@ export default Layout;
 import docs from 'docs:react-aria-components';
 import vanillaDocs from 'docs:vanilla-starter/Tooltip';
 import '../../tailwind/tailwind.css';
-import Anatomy from '/packages/react-aria/docs/tooltip/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/TooltipAnatomy.svg';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const tags = ['hint', 'popup', 'info'];
@@ -103,7 +103,7 @@ function Example(props) {
 
 <InlineAlert variant="notice" UNSAFE_style={{marginTop: '2rem'}}>
   <Heading>Accessibility</Heading>
-  <Content>Tooltips are not shown on touch screen interactions. Ensure that your UI is usable without tooltips, or use an alternative component such as a [Popover](Popover) to show information in an adjacent element.</Content>
+  <Content>Tooltips are not shown on touch screen interactions. Ensure that your UI is usable without tooltips, or use an alternative component such as a [PreviewTrigger](PreviewTrigger) or a [Popover](Popover) to show information in an adjacent element.</Content>
 </InlineAlert>
 
 ## Custom trigger
diff --git a/packages/dev/s2-docs/pages/react-aria/Tooltip/useTooltipTrigger.mdx b/packages/dev/s2-docs/pages/react-aria/Tooltip/useTooltipTrigger.mdx
index 368364728dd..fa27778a800 100644
--- a/packages/dev/s2-docs/pages/react-aria/Tooltip/useTooltipTrigger.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Tooltip/useTooltipTrigger.mdx
@@ -13,7 +13,7 @@ import {FunctionAPIGroup} from '../../../src/FunctionAPI';
 import {InterfaceType} from '../../../src/types';
 import docs from 'docs:@react-aria/tooltip';
 import statelyDocs from 'docs:@react-stately/tooltip';
-import Anatomy from '/packages/react-aria/docs/tooltip/anatomy.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/TooltipAnatomy.svg';
 
 export const section = 'Hooks';
 export const description = 'Provides the behavior and accessibility implementation for a tooltip component.';
diff --git a/packages/react-aria/docs/tooltip/anatomy.svg b/packages/dev/s2-docs/pages/react-aria/TooltipAnatomy.svg
similarity index 100%
rename from packages/react-aria/docs/tooltip/anatomy.svg
rename to packages/dev/s2-docs/pages/react-aria/TooltipAnatomy.svg
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx b/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx
index d4d3a7199c3..80cd8aef90a 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx
@@ -7,10 +7,10 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License. */}
 
-import Anatomy from '/packages/react-aria/docs/dnd/Anatomy.svg';
-import BetweenDropPosition from '/packages/react-aria/docs/dnd/BetweenDropPosition.svg';
-import OnDropPosition from '/packages/react-aria/docs/dnd/OnDropPosition.svg';
-import RootDropPosition from '/packages/react-aria/docs/dnd/RootDropPosition.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/DndAnatomy.svg';
+import BetweenDropPosition from '/packages/dev/s2-docs/pages/react-aria/DndBetweenDropPosition.svg';
+import OnDropPosition from '/packages/dev/s2-docs/pages/react-aria/DndOnDropPosition.svg';
+import RootDropPosition from '/packages/dev/s2-docs/pages/react-aria/DndRootDropPosition.svg';
 import heroVideo from 'url:../../../../docs/pages/assets/dnd.mp4';
 import dndKeyboard from 'url:../../../../docs/pages/assets/dnd-keyboard.mp4';
 import dndMobile from 'url:../../../../docs/pages/assets/dnd-mobile.mp4';
diff --git a/packages/dev/s2-docs/pages/react-aria/dnd.mdx b/packages/dev/s2-docs/pages/react-aria/dnd.mdx
index 96cc497e5f4..c75fd16ecd8 100644
--- a/packages/dev/s2-docs/pages/react-aria/dnd.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/dnd.mdx
@@ -2,12 +2,12 @@ import {Layout} from '../../src/Layout';
 export default Layout;
 
 import docs from 'docs:react-aria-components';
-import DropOperation from '/packages/react-aria/docs/dnd/DropOperation.svg';
-import BetweenDropPosition from '/packages/react-aria/docs/dnd/BetweenDropPosition.svg';
-import OnDropPosition from '/packages/react-aria/docs/dnd/OnDropPosition.svg';
-import RootDropPosition from '/packages/react-aria/docs/dnd/RootDropPosition.svg';
-import Anatomy from '/packages/react-aria/docs/dnd/Anatomy.svg';
-import DragAffordance from '/packages/react-aria/docs/dnd/DragAffordance.svg';
+import DropOperation from '/packages/dev/s2-docs/pages/react-aria/DndDropOperation.svg';
+import BetweenDropPosition from '/packages/dev/s2-docs/pages/react-aria/DndBetweenDropPosition.svg';
+import OnDropPosition from '/packages/dev/s2-docs/pages/react-aria/DndOnDropPosition.svg';
+import RootDropPosition from '/packages/dev/s2-docs/pages/react-aria/DndRootDropPosition.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/DndAnatomy.svg';
+import DragAffordance from '/packages/dev/s2-docs/pages/react-aria/DndDragAffordance.svg';
 import {GroupedPropTable} from '../../src/PropTable';
 import {PokemonListBox} from './PokemonListBox';
 import {PokemonGridList} from './PokemonGridList';
diff --git a/packages/dev/s2-docs/pages/s2/dnd.mdx b/packages/dev/s2-docs/pages/s2/dnd.mdx
index a64bf628f5a..a0ed449a3db 100644
--- a/packages/dev/s2-docs/pages/s2/dnd.mdx
+++ b/packages/dev/s2-docs/pages/s2/dnd.mdx
@@ -2,12 +2,12 @@ import {Layout} from '../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import DropOperation from '/packages/react-aria/docs/dnd/DropOperation.svg';
-import BetweenDropPosition from '/packages/react-aria/docs/dnd/BetweenDropPosition.svg';
-import OnDropPosition from '/packages/react-aria/docs/dnd/OnDropPosition.svg';
-import RootDropPosition from '/packages/react-aria/docs/dnd/RootDropPosition.svg';
-import Anatomy from '/packages/react-aria/docs/dnd/Anatomy.svg';
-import DragAffordance from '/packages/react-aria/docs/dnd/DragAffordance.svg';
+import DropOperation from '/packages/dev/s2-docs/pages/react-aria/DndDropOperation.svg';
+import BetweenDropPosition from '/packages/dev/s2-docs/pages/react-aria/DndBetweenDropPosition.svg';
+import OnDropPosition from '/packages/dev/s2-docs/pages/react-aria/DndOnDropPosition.svg';
+import RootDropPosition from '/packages/dev/s2-docs/pages/react-aria/DndRootDropPosition.svg';
+import Anatomy from '/packages/dev/s2-docs/pages/react-aria/DndAnatomy.svg';
+import DragAffordance from '/packages/dev/s2-docs/pages/react-aria/DndDragAffordance.svg';
 import {GroupedPropTable, PropTable} from '../../src/PropTable';
 
 export const section = 'Guides';
diff --git a/packages/react-aria-components/exports/PreviewTrigger.ts b/packages/react-aria-components/exports/PreviewTrigger.ts
new file mode 100644
index 00000000000..d439afed7a6
--- /dev/null
+++ b/packages/react-aria-components/exports/PreviewTrigger.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Mark as a client only package. This will cause a build time error if you try
+// to import it from a React Server Component in a framework like Next.js.
+import 'client-only';
+
+export {PreviewTrigger} from '../src/PreviewTrigger';
+export type {PreviewTriggerProps} from '../src/PreviewTrigger';
diff --git a/packages/react-aria-components/exports/TokenField.ts b/packages/react-aria-components/exports/TokenField.ts
index 5070da538aa..442ad72dfab 100644
--- a/packages/react-aria-components/exports/TokenField.ts
+++ b/packages/react-aria-components/exports/TokenField.ts
@@ -20,7 +20,7 @@ export type {
   TokenRenderProps,
   TokenFieldContext
 } from '../src/TokenField';
-export {positionToDOMRange} from 'react-aria/useTokenField';
+export {tokenFieldPositionToDOMRange, setTokenFieldSelection} from 'react-aria/useTokenField';
 export {TokenFieldValue, Direction} from 'react-stately/useTokenFieldState';
 export type {
   TokenFieldSegment,
diff --git a/packages/react-aria-components/src/PreviewTrigger.tsx b/packages/react-aria-components/src/PreviewTrigger.tsx
index 51df02d4f4d..2e86981623b 100644
--- a/packages/react-aria-components/src/PreviewTrigger.tsx
+++ b/packages/react-aria-components/src/PreviewTrigger.tsx
@@ -23,6 +23,18 @@ import {useTooltipTriggerState} from 'react-stately/useTooltipTriggerState';
 export interface PreviewTriggerProps extends AriaPreviewTriggerProps {
   /** The trigger and Popover that make up the preview trigger. */
   children: ReactNode;
+  /**
+   * The delay time in milliseconds before the preview opens.
+   *
+   * @default 600
+   */
+  delay?: number;
+  /**
+   * The delay time in milliseconds before the preview closes.
+   *
+   * @default 200
+   */
+  closeDelay?: number;
 }
 
 /**
diff --git a/packages/react-aria-components/stories/TokenField.stories.tsx b/packages/react-aria-components/stories/TokenField.stories.tsx
index 89d207dffdb..1c5db91e529 100644
--- a/packages/react-aria-components/stories/TokenField.stories.tsx
+++ b/packages/react-aria-components/stories/TokenField.stories.tsx
@@ -22,10 +22,10 @@ import {FieldButton, Label} from 'vanilla-starter/Form';
 import {Header, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu';
 import {Key} from '@react-types/shared';
 import {Popover} from 'vanilla-starter/Popover';
-import {positionToDOMRange} from 'react-aria/useTokenField';
-import {Token, TokenField, TokenInput} from '../src/TokenField';
 import 'vanilla-starter/TagGroup.css';
 import {Text} from 'react-aria-components/Text';
+import {Token, TokenField, TokenInput} from '../src/TokenField';
+import {tokenFieldPositionToDOMRange} from 'react-aria/useTokenField';
 
 export default {
   title: 'React Aria Components/TokenField',
@@ -206,7 +206,7 @@ export const WithAutocomplete: TokenFieldStory = () => {
         placement="bottom start"
         trigger="MenuTrigger"
         getTargetRect={target => {
-          return positionToDOMRange(target, filterAnchor!).getBoundingClientRect();
+          return tokenFieldPositionToDOMRange(target, filterAnchor!).getBoundingClientRect();
         }}>
         <Menu items={items} dependencies={[filterAnchor]}>
           {item => (
diff --git a/packages/react-aria-components/test/utils/tokenFieldBrowserUtils.tsx b/packages/react-aria-components/test/utils/tokenFieldBrowserUtils.tsx
index c34831d94a9..e9a56002477 100644
--- a/packages/react-aria-components/test/utils/tokenFieldBrowserUtils.tsx
+++ b/packages/react-aria-components/test/utils/tokenFieldBrowserUtils.tsx
@@ -11,7 +11,10 @@
  */
 
 import {expect} from 'vitest';
-import {getSelection, setSelection} from '../../../react-aria/src/tokenfield/useTokenField';
+import {
+  getSelection,
+  setTokenFieldSelection
+} from '../../../react-aria/src/tokenfield/useTokenField';
 import {type Locator, userEvent} from 'vitest/browser';
 import {Position, TokenFieldSegment, TokenFieldValue} from 'react-stately/useTokenFieldState';
 import React, {useEffect, useState} from 'react';
@@ -99,7 +102,7 @@ export async function focusField(locator: Locator) {
 }
 
 export function setFieldSelection(textboxEl: Element, start: Position, end: Position): void {
-  setSelection(textboxEl, start, end);
+  setTokenFieldSelection(textboxEl, start, end);
 }
 
 /**
diff --git a/packages/react-aria/docs/autocomplete/anatomy.svg b/packages/react-aria/docs/autocomplete/anatomy.svg
deleted file mode 100644
index d15379993fa..00000000000
--- a/packages/react-aria/docs/autocomplete/anatomy.svg
+++ /dev/null
@@ -1,104 +0,0 @@
-<svg style="max-height:252px;background:var(--anatomy-gray-100);padding:32px;margin-bottom:16px;width:calc(100% - 64px);border-radius:var(--anatomy-radius);" viewBox="0 0 410 252">
-  <defs>
-    <filter id="Background" x="224" y="106" width="188" height="116" filterUnits="userSpaceOnUse">
-      <feOffset dy="1" input="SourceAlpha"/>
-      <feGaussianBlur stdDeviation="2" result="blur"/>
-      <feFlood flood-opacity="0.149"/>
-      <feComposite operator="in" in2="blur"/>
-      <feComposite in="SourceGraphic"/>
-    </filter>
-    <clipPath id="clip-Custom_Size_1">
-      <rect width="410" height="252"/>
-    </clipPath>
-  </defs>
-  <g id="Custom_Size_1" data-name="Custom Size 1" clip-path="url(#clip-Custom_Size_1)">
-    <g id="Search_autocomplete" data-name="Search autocomplete" transform="translate(10 42)">
-      <text id="Label" transform="translate(0 16)" fill="var(--anatomy-gray-700)" font-size="15" font-family="var(--anatomy-font)"><tspan x="0" y="0">Label</tspan></text>
-      <g id="Text_Area" data-name="Text Area" transform="translate(0 24)" fill="var(--anatomy-gray-50)" stroke="var(--anatomy-gray-500)" stroke-width="1">
-        <rect width="176" height="32" rx="4" stroke="none"/>
-        <rect x="0.5" y="0.5" width="175" height="31" rx="3.5" fill="none"/>
-      </g>
-      <text id="Text" transform="translate(29 44)" fill="var(--anatomy-gray-700)" font-size="14" font-family="var(--anatomy-font)"><tspan x="0" y="0">Op</tspan></text>
-      <text id="Label-2" data-name="Label" transform="translate(-6 -21)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic"><tspan x="0" y="0">Label</tspan></text>
-    </g>
-    <g id="Group_156024" data-name="Group 156024" transform="translate(16 73)">
-      <rect id="Canvas" width="18" height="18" fill="var(--anatomy-gray-700)" opacity="0"/>
-      <path id="Path_434" data-name="Path 434" d="M16.586,15.107,12.7,11.222A6.413,6.413,0,1,0,11.221,12.7l3.886,3.886a1.05,1.05,0,0,0,1.479-1.479ZM3,7.5A4.5,4.5,0,1,1,7.5,12,4.5,4.5,0,0,1,3,7.5Z" transform="translate(0 0)" fill="var(--anatomy-gray-700)"/>
-    </g>
-    <g id="CrossSize100" transform="translate(165 77)">
-      <rect id="Frame" width="10" height="10" fill="rgba(255,0,0,0)"/>
-      <path id="Path_29180" data-name="Path 29180" d="M6.548,5,9.631,1.918A1.094,1.094,0,0,0,8.084.371L5,3.454,1.918.371A1.094,1.094,0,1,0,.371,1.918L3.454,5,.371,8.083A1.094,1.094,0,1,0,1.918,9.63L5,6.547,8.084,9.63A1.094,1.094,0,1,0,9.631,8.083Z" fill="var(--anatomy-gray-700)"/>
-    </g>
-    <g id="Menu" transform="translate(230 111)">
-      <g transform="matrix(1, 0, 0, 1, -230, -111)" filter="url(#Background)">
-        <g id="Background-2" data-name="Background" transform="translate(230 111)" fill="var(--anatomy-gray-50)" stroke="var(--anatomy-gray-500)" stroke-width="1">
-          <rect width="176" height="104" rx="4" stroke="none"/>
-          <rect x="0.5" y="0.5" width="175" height="103" rx="3.5" fill="none"/>
-        </g>
-      </g>
-      <rect id="Menu_Item" data-name="Menu Item" width="70.984" height="32" transform="translate(12 4)" fill="rgba(255,0,0,0)"/>
-      <text id="Option_1" data-name="Option 1" transform="translate(12 24)" fill="var(--anatomy-gray-700)" font-size="14" font-family="var(--anatomy-font)"><tspan x="0" y="0">Option 1</tspan></text>
-      <rect id="Menu_Item-2" data-name="Menu Item" width="73.281" height="32" transform="translate(12 36)" fill="rgba(255,0,0,0)"/>
-      <text id="Option_3" data-name="Option 3" transform="translate(12 56)" fill="var(--anatomy-gray-700)" font-size="14" font-family="var(--anatomy-font)"><tspan x="0" y="0">Option 3</tspan></text>
-      <rect id="Menu_Item-3" data-name="Menu Item" width="73.281" height="32" transform="translate(12 68)" fill="rgba(255,0,0,0)"/>
-      <text id="Option_3-2" data-name="Option 3" transform="translate(12 88)" fill="var(--anatomy-gray-700)" font-size="14" font-family="var(--anatomy-font)"><tspan x="0" y="0">Option 3</tspan></text>
-    </g>
-    <g id="Search_autocomplete-2" data-name="Search autocomplete" transform="translate(230 42)">
-      <text id="Label-3" data-name="Label" transform="translate(0 16)" fill="var(--anatomy-gray-700)" font-size="15" font-family="var(--anatomy-font)"><tspan x="0" y="0">Label</tspan></text>
-      <g id="Text_Area-2" data-name="Text Area" transform="translate(0 24)" fill="var(--anatomy-gray-50)" stroke="var(--anatomy-gray-500)" stroke-width="1">
-        <rect width="176" height="32" rx="4" stroke="none"/>
-        <rect x="0.5" y="0.5" width="175" height="31" rx="3.5" fill="none"/>
-      </g>
-      <text id="Text-2" data-name="Text" transform="translate(29 44)" fill="var(--anatomy-gray-700)" font-size="14" font-family="var(--anatomy-font)"><tspan x="0" y="0">Op</tspan></text>
-    </g>
-    <g id="Group_156025" data-name="Group 156025" transform="translate(236 73)">
-      <rect id="Canvas-2" data-name="Canvas" width="18" height="18" fill="var(--anatomy-gray-700)" opacity="0"/>
-      <path id="Path_434-2" data-name="Path 434" d="M16.586,15.107,12.7,11.222A6.413,6.413,0,1,0,11.221,12.7l3.886,3.886a1.05,1.05,0,0,0,1.479-1.479ZM3,7.5A4.5,4.5,0,1,1,7.5,12,4.5,4.5,0,0,1,3,7.5Z" transform="translate(0 0)" fill="var(--anatomy-gray-700)"/>
-    </g>
-    <g id="CrossSize100-2" data-name="CrossSize100" transform="translate(385 77)">
-      <rect id="Frame-2" data-name="Frame" width="10" height="10" fill="rgba(255,0,0,0)"/>
-      <path id="Path_29180-2" data-name="Path 29180" d="M6.548,5,9.631,1.918A1.094,1.094,0,0,0,8.084.371L5,3.454,1.918.371A1.094,1.094,0,1,0,.371,1.918L3.454,5,.371,8.083A1.094,1.094,0,1,0,1.918,9.63L5,6.547,8.084,9.63A1.094,1.094,0,1,0,9.631,8.083Z" fill="var(--anatomy-gray-700)"/>
-    </g>
-    <line id="Line_1" data-name="Line 1" y2="18" transform="translate(57.5 72.5)" fill="none" stroke="var(--anatomy-gray-600)" stroke-width="1"/>
-    <line id="Line_2" data-name="Line 2" y2="18" transform="translate(277.5 72.5)" fill="none" stroke="var(--anatomy-gray-600)" stroke-width="1"/>
-    <g id="Group_156026" data-name="Group 156026" transform="translate(-52 -28)">
-      <line id="Line_3" data-name="Line 3" y2="22" transform="translate(68 51.5)" fill="none" stroke="var(--anatomy-gray-500)" stroke-width="1"/>
-      <g id="Ellipse_1" data-name="Ellipse 1" transform="translate(66 72)" fill="var(--anatomy-gray-500)" stroke="var(--anatomy-gray-500)" stroke-width="1">
-        <circle cx="2" cy="2" r="2" stroke="none"/>
-        <circle cx="2" cy="2" r="1.5" fill="none"/>
-      </g>
-    </g>
-    <text id="Label-4" data-name="Label" transform="translate(89 46)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic"><tspan x="0" y="0">Input</tspan></text>
-    <g id="Group_156027" data-name="Group 156027" transform="translate(33 -3)">
-      <line id="Line_3-2" data-name="Line 3" y2="22" transform="translate(68 51.5)" fill="none" stroke="var(--anatomy-gray-500)" stroke-width="1"/>
-      <g id="Ellipse_1-2" data-name="Ellipse 1" transform="translate(66 72)" fill="var(--anatomy-gray-500)" stroke="var(--anatomy-gray-500)" stroke-width="1">
-        <circle cx="2" cy="2" r="2" stroke="none"/>
-        <circle cx="2" cy="2" r="1.5" fill="none"/>
-      </g>
-    </g>
-    <text id="Label-5" data-name="Label" transform="translate(172 127)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic"><tspan x="-12.108" y="0">Clear</tspan><tspan x="-15.456" y="15">Button</tspan></text>
-    <g id="Group_156028" data-name="Group 156028" transform="translate(238 166.5) rotate(180)">
-      <line id="Line_3-3" data-name="Line 3" y2="22" transform="translate(68 51.5)" fill="none" stroke="var(--anatomy-gray-500)" stroke-width="1"/>
-      <g id="Ellipse_1-3" data-name="Ellipse 1" transform="translate(66 72)" fill="var(--anatomy-gray-500)" stroke="var(--anatomy-gray-500)" stroke-width="1">
-        <circle cx="2" cy="2" r="2" stroke="none"/>
-        <circle cx="2" cy="2" r="1.5" fill="none"/>
-      </g>
-    </g>
-    <text id="Label-6" data-name="Label" transform="translate(26 127.25)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic"><tspan x="-15.744" y="0">Search</tspan><tspan x="-9.726" y="15">Icon</tspan></text>
-    <g id="Group_156029" data-name="Group 156029" transform="translate(92 166.75) rotate(180)">
-      <line id="Line_3-4" data-name="Line 3" y2="22" transform="translate(68 51.5)" fill="none" stroke="var(--anatomy-gray-500)" stroke-width="1"/>
-      <g id="Ellipse_1-4" data-name="Ellipse 1" transform="translate(66 72)" fill="var(--anatomy-gray-500)" stroke="var(--anatomy-gray-500)" stroke-width="1">
-        <circle cx="2" cy="2" r="2" stroke="none"/>
-        <circle cx="2" cy="2" r="1.5" fill="none"/>
-      </g>
-    </g>
-    <text id="Label-7" data-name="Label" transform="translate(370 241)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic"><tspan x="-17.976" y="0">List box</tspan></text>
-    <g id="Group_156030" data-name="Group 156030" transform="translate(436 280.5) rotate(180)">
-      <line id="Line_3-5" data-name="Line 3" y2="22" transform="translate(68 51.5)" fill="none" stroke="var(--anatomy-gray-500)" stroke-width="1"/>
-      <g id="Ellipse_1-5" data-name="Ellipse 1" transform="translate(66 72)" fill="var(--anatomy-gray-500)" stroke="var(--anatomy-gray-500)" stroke-width="1">
-        <circle cx="2" cy="2" r="2" stroke="none"/>
-        <circle cx="2" cy="2" r="1.5" fill="none"/>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/packages/react-aria/docs/autocomplete/useAutocomplete.mdx b/packages/react-aria/docs/autocomplete/useAutocomplete.mdx
deleted file mode 100644
index 35c4f8f9d60..00000000000
--- a/packages/react-aria/docs/autocomplete/useAutocomplete.mdx
+++ /dev/null
@@ -1,67 +0,0 @@
-{/* Copyright 2025 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/autocomplete';
-import {FunctionAPI, HeaderInfo, InterfaceType, TypeContext, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/autocomplete/package.json';
-import statelyDocs from 'docs:@react-stately/autocomplete';
-import {InlineAlert, Content, Heading} from '@adobe/react-spectrum';
-
----
-category: Pickers
-keywords: [autocomplete, autosuggest, typeahead, search, aria]
-preRelease: beta
----
-
-# useAutocomplete
-
-<PageDescription>{docs.exports.useAutocomplete.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useAutocomplete']}
-  />
-
-<InlineAlert variant="notice" marginTop={60}>
-  <Heading>Under construction</Heading>
-  <Content>This hook is in <strong>beta</strong>. More documentation is coming soon!</Content>
-</InlineAlert>
-
-## API
-
-<FunctionAPI function={docs.exports.useAutocomplete} links={docs.links} />
-
-## Features
-
-Autocomplete can be implemented using the [&lt;datalist&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) HTML element, but this has limited functionality and behaves differently across browsers.
-`useAutocomplete` helps achieve accessible text input and collection that can be styled as needed.
-
-## Anatomy
-
-An autocomplete consists of a text input that displays the current value and a collection of items. Users can type within the input
-to filter the collection. `useAutocomplete` handles exposing the correct ARIA attributes for accessibility for each of the elements comprising the autocomplete.
-
-`useAutocomplete` returns props that you should spread onto the appropriate elements:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useAutocomplete.return.base?.id ?? docs.exports.useAutocomplete.return.id].properties} />
-</TypeContext.Provider>
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useAutocompleteState} /> hook from `@react-stately/autocomplete`.
-The state object should be passed as an option to `useAutocomplete`.
-
-## Internationalization
-
-`useAutocomplete` handles some aspects of internationalization automatically.
-For example, VoiceOver announcements about the item focus, count, and selection are localized.
-You are responsible for localizing all labels and option
-content that is passed into the autocomplete.
diff --git a/packages/react-aria/docs/breadcrumbs/useBreadcrumbs.mdx b/packages/react-aria/docs/breadcrumbs/useBreadcrumbs.mdx
deleted file mode 100644
index e87dd5da3bb..00000000000
--- a/packages/react-aria/docs/breadcrumbs/useBreadcrumbs.mdx
+++ /dev/null
@@ -1,203 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/breadcrumbs';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, PageDescription} from '@react-spectrum/docs';
-import {Keyboard} from '@react-spectrum/text';
-import packageData from '@react-aria/breadcrumbs/package.json';
-import Anatomy from './anatomy.svg';
-
----
-category: Navigation
-keywords: [breadcrumbs, aria]
----
-
-# useBreadcrumbs
-
-<PageDescription>{docs.exports.useBreadcrumbs.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useBreadcrumbs', 'useBreadcrumbItem']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useBreadcrumbs} links={docs.links} />
-<FunctionAPI function={docs.exports.useBreadcrumbItem} links={docs.links} />
-
-## Features
-
-Breadcrumbs provide a list of links to parent pages of the current page in hierarchical order.
-`useBreadcrumbs` and `useBreadcrumbItem` help implement these in an accessible way.
-
-* Support for mouse, touch, and keyboard interactions on breadcrumbs
-* Support for navigation links via `<a>` elements or custom element types via ARIA
-* Localized ARIA labeling support for landmark navigation region
-* Support for disabled breadcrumbs
-
-## Anatomy
-
-<Anatomy />
-
-Breadcrumbs consist of a navigation landmark element and a list of links, typically with a visual separator
-icon between each item. The last link represents the current page in the hierarchy, with the previous links representing the
-parent pages of the current page. Each of these parent links can be clicked, tapped, or
-triggered via the <Keyboard>Enter</Keyboard> key to navigate to that page.
-
-`useBreadcrumbs` returns props to be spread onto the navigation element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useBreadcrumbs.return.id].properties} />
-</TypeContext.Provider>
-
-`useBreadcrumbItem` returns props to spread onto the individual breadcrumb links:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useBreadcrumbItem.return.id].properties} />
-</TypeContext.Provider>
-
-## Example
-
-This example displays a basic list of breadcrumbs using an HTML
-[&lt;nav&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav)
-element, and a [&lt;ol&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol)
-for the list of links. Each link is a span because we are handling the interactions
-locally via `onPress`. `useBreadcrumbItem` automatically handles exposing these
-spans as links to assistive technology.
-
-The chevrons between each link are rendered using a span with `aria-hidden="true"` so that
-screen readers do not pick them up. You could also render them similarly using SVG icons,
-CSS `:after`, or other techniques.
-
-The last link is non-interactive since it represents the current page. This is
-passed to the last breadcrumb item by cloning the element and adding the `isCurrent`
-prop.
-
-```tsx example
-import {useBreadcrumbs, useBreadcrumbItem} from '@react-aria/breadcrumbs';
-
-function Breadcrumbs(props) {
-  let {navProps} = useBreadcrumbs(props);
-  let childCount = React.Children.count(props.children);
-
-  return (
-    <nav {...navProps}>
-      <ol style={{display: 'flex', listStyle: 'none', margin: 0, padding: 0}}>
-        {React.Children.map(props.children, (child, i) =>
-          React.cloneElement(child, {isCurrent: i === childCount - 1})
-        )}
-      </ol>
-    </nav>
-  )
-}
-
-function BreadcrumbItem(props) {
-  let ref = React.useRef(null);
-  let {itemProps} = useBreadcrumbItem({...props, elementType: 'span'}, ref);
-  return (
-    <li>
-      <span
-        {...itemProps}
-        ref={ref}
-        style={{
-          color: props.isDisabled ? 'var(--gray)' : 'var(--blue)',
-          textDecoration: props.isCurrent || props.isDisabled ? 'none' : 'underline',
-          fontWeight: props.isCurrent ? 'bold' : null,
-          cursor: props.isCurrent || props.isDisabled ? 'default' : 'pointer'
-        }}>
-        {props.children}
-      </span>
-      {!props.isCurrent &&
-        <span aria-hidden="true" style={{padding: '0 5px'}}>{'›'}</span>
-      }
-    </li>
-  );
-}
-
-<Breadcrumbs>
-  <BreadcrumbItem onPress={() => alert('Pressed Folder 1')}>Folder 1</BreadcrumbItem>
-  <BreadcrumbItem onPress={() => alert('Pressed Folder 2')}>Folder 2</BreadcrumbItem>
-  <BreadcrumbItem>Folder 3</BreadcrumbItem>
-</Breadcrumbs>
-```
-
-## Navigation links
-
-To render breadcrumbs that navigate to other pages rather than handle events via `onPress`, use an `<a>` element
-for each BreadcrumbItem. This is the default `elementType`, so the option can be omitted from `useBreadcrumbItem`.
-
-```tsx example export=true
-///- begin collapse -///
-function Breadcrumbs(props) {
-  let {navProps} = useBreadcrumbs(props);
-  let childCount = React.Children.count(props.children);
-
-  return (
-    <nav {...navProps}>
-      <ol style={{display: 'flex', listStyle: 'none', margin: 0, padding: 0}}>
-        {React.Children.map(props.children, (child, i) =>
-          React.cloneElement(child, {isCurrent: i === childCount - 1})
-        )}
-      </ol>
-    </nav>
-  );
-}
-///- end collapse -///
-function BreadcrumbItem(props) {
-  let ref = React.useRef(null);
-  let {itemProps} = useBreadcrumbItem(props, ref);
-  return (
-    <li>
-      <a
-        {...itemProps}
-        ref={ref}
-        href={props.href}
-        style={{
-          color: props.isDisabled ? 'var(--gray)' : 'var(--blue)',
-          textDecoration: props.isCurrent || props.isDisabled ? 'none' : 'underline',
-          fontWeight: props.isCurrent ? 'bold' : null,
-          cursor: props.isCurrent || props.isDisabled ? 'default' : 'pointer'
-        }}>
-        {props.children}
-      </a>
-      {!props.isCurrent &&
-        <span aria-hidden="true" style={{padding: '0 5px'}}>{'›'}</span>
-      }
-    </li>
-  );
-}
-
-<Breadcrumbs>
-  <BreadcrumbItem href="#">Home</BreadcrumbItem>
-  <BreadcrumbItem href="#">React Aria</BreadcrumbItem>
-  <BreadcrumbItem>useBreadcrumbs</BreadcrumbItem>
-</Breadcrumbs>
-```
-
-## Usage
-
-The following examples show how to use the `Breadcrumbs` component created in the above examples.
-
-### Disabled
-
-Breadcrumbs can be disabled using the `isDisabled` prop, passed to each disabled BreadcrumbItem. This indicates that navigation is not currently available. When a breadcrumb is disabled, `onPress` will not be triggered, navigation will not occur, and links will be marked as `aria-disabled` for assistive technologies.
-
-```tsx example
-<Breadcrumbs>
-  <BreadcrumbItem href="#" isDisabled>Home</BreadcrumbItem>
-  <BreadcrumbItem href="#">React Aria</BreadcrumbItem>
-  <BreadcrumbItem>useBreadcrumbs</BreadcrumbItem>
-</Breadcrumbs>
-```
diff --git a/packages/react-aria/docs/button/useButton.mdx b/packages/react-aria/docs/button/useButton.mdx
deleted file mode 100644
index ec5de0790d5..00000000000
--- a/packages/react-aria/docs/button/useButton.mdx
+++ /dev/null
@@ -1,160 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/button';
-import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
-import {HeaderInfo, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import {Keyboard} from '@react-spectrum/text';
-import packageData from '@react-aria/button/package.json';
-
----
-category: Buttons
-keywords: [button, aria, form]
----
-
-# useButton
-
-<PageDescription>{docs.exports.useButton.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useButton']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/button/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useButton} links={docs.links} />
-
-## Features
-
-On the surface, building a custom styled button seems simple. However, there are many
-cross browser inconsistencies in interactions and accessibility features to consider.
-`useButton` handles all of these interactions for you, so you can focus on the styling.
-
-* Native HTML `<button>` support
-* `<a>` and custom element type support via ARIA
-* Mouse and touch event handling, and press state management
-* Keyboard focus management and cross browser normalization
-* Keyboard event support for <Keyboard>Space</Keyboard> and <Keyboard>Enter</Keyboard> keys
-
-Read our [blog post](../blog/building-a-button-part-1) about the complexities of building buttons that work well across devices and interaction methods.
-
-## Anatomy
-
-Buttons consist of a clickable area usually containing a textual label or an icon
-that users can click to perform an action. In addition, keyboard users may activate
-buttons using the <Keyboard>Space</Keyboard> or <Keyboard>Enter</Keyboard> keys.
-
-If a visual label is not provided (e.g. an icon only button), then an `aria-label` or
-`aria-labelledby` prop must be passed to identify the button to assistive technology.
-
-## Example
-
-By default, `useButton` assumes that you are using it with a native `<button>` element.
-
-```tsx example export=true
-import {useButton} from '@react-aria/button';
-import {useRef} from 'react';
-
-function Button(props) {
-  let ref = useRef<HTMLButtonElement | null>(null);
-  let {buttonProps} = useButton(props, ref);
-  let {children} = props;
-
-  return (
-    <button {...buttonProps} ref={ref}>
-      {children}
-    </button>
-  );
-}
-
-<Button onPress={() => alert('Button pressed!')}>Test</Button>
-```
-
-## Custom element type
-
-Sometimes you might need to use an element other than a native `<button>`. `useButton` supports
-this via the `elementType` prop. When used with an element other than a native button, `useButton`
-automatically applies the necessary ARIA roles and attributes to ensure that the element is exposed
-to assistive technology as a button.
-
-In addition, this example shows usage of the `isPressed` value returned by `useButton` to properly
-style the button's active state. You could use the CSS `:active` pseudo class for this, but `isPressed`
-properly handles when the user drags their pointer off of the button, along with keyboard support and better
-touch screen support.
-
-```tsx example
-function Button(props) {
-  let {children} = props;
-  let ref = useRef<HTMLButtonElement | null>(null);
-  let {buttonProps, isPressed} = useButton({
-    ...props,
-    elementType: 'span'
-  }, ref);
-
-  return (
-    <span
-      {...buttonProps}
-      style={{
-        background: isPressed ? 'darkgreen' : 'green',
-        color: 'white',
-        padding: 10,
-        cursor: 'pointer',
-        userSelect: 'none',
-        WebkitUserSelect: 'none'
-      }}
-      ref={ref}>
-      {children}
-    </span>
-  );
-}
-
-<Button onPress={() => alert('Button pressed!')}>Test</Button>
-```
-
-## Usage
-
-The following examples show how to use the `Button` component created in the above example.
-
-### Events
-
-`useButton` supports user interactions via mouse, keyboard, and touch. You can handle all of these via the `onPress` prop. This is similar to the standard `onClick` event, but normalized to support all interaction methods equally. In addition, the `onPressStart`, `onPressEnd`, and `onPressChange` events are fired as the user interacts with the button.
-
-Each of these handlers receives a <TypeLink links={typesDocs.links} type={typesDocs.exports.PressEvent} />, which exposes information about the target and the type of event that triggered the interaction. See [usePress](../usePress) for more details.
-
-```tsx example
-function Example() {
-  let [pointerType, setPointerType] = React.useState(null);
-
-  return (
-    <>
-      <Button
-        onPressStart={e => setPointerType(e.pointerType)}
-        onPressEnd={e => setPointerType(null)}>
-        Press me
-      </Button>
-      <p>{pointerType ? `You are pressing the button with a ${pointerType}!` : 'Ready to be pressed.'}</p>
-    </>
-  )
-}
-```
-
-### Disabled
-
-A `Button` can be disabled using the `isDisabled` prop.
-
-```tsx example
-<Button isDisabled>Pin</Button>
-```
-
diff --git a/packages/react-aria/docs/button/useToggleButton.mdx b/packages/react-aria/docs/button/useToggleButton.mdx
deleted file mode 100644
index ce8437d4420..00000000000
--- a/packages/react-aria/docs/button/useToggleButton.mdx
+++ /dev/null
@@ -1,143 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/button';
-import statelyDocs from 'docs:@react-stately/toggle';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import {Keyboard} from '@react-spectrum/text';
-import packageData from '@react-aria/button/package.json';
-
----
-category: Buttons
-keywords: [button, toggle button, aria, form]
----
-
-# useToggleButton
-
-<PageDescription>{docs.exports.useToggleButton.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useToggleButton']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/button/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useToggleButton} links={docs.links} />
-
-## Features
-
-Toggle buttons are similar to action buttons, but support an additional selection state
-that is toggled when a user presses the button. There is no built-in HTML element that
-represents a toggle button, so React Aria implements it using ARIA attributes.
-
-* Native HTML `<button>`, `<a>`, and custom element type support
-* Exposed as a toggle button via ARIA
-* Mouse and touch event handling, and press state management
-* Keyboard focus management and cross browser normalization
-* Keyboard event support for <Keyboard>Space</Keyboard> and <Keyboard>Enter</Keyboard> keys
-
-## Anatomy
-
-Toggle buttons consist of a clickable area usually containing a textual label or an icon
-that users can click to toggle a selection state. In addition, keyboard users may toggle
-the state using the <Keyboard>Space</Keyboard> or <Keyboard>Enter</Keyboard> keys.
-
-`useToggleButton` returns props to be spread onto the button element, along with a boolean indicating
-whether the user is currently pressing the button:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useToggleButton.return.base.id].properties} />
-</TypeContext.Provider>
-
-Selection state is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useToggleState} />
-hook in `@react-stately/toggle`. The state object should be passed as an option to `useToggleButton`.
-
-If a visual label is not provided (e.g. an icon only button), then an `aria-label` or
-`aria-labelledby` prop must be passed to identify the button to assistive technology.
-
-## Example
-
-By default, `useToggleButton` assumes that you are using it with a native `<button>` element. You can use a custom
-element type by passing the `elementType` prop to `useToggleButton`. See the [useButton](../Button/useButton.html#custom-element-type)
-docs for an example of this.
-
-The following example shows how to use the `useToggleButton` and `useToggleState` hooks to build a toggle button.
-The toggle state is used to switch between a green and blue background when unselected and selected respectively.
-In addition, the `isPressed` state is used to adjust the background to be darker when the user presses down on the button.
-
-```tsx example export=true
-import {useRef} from 'react';
-import {useToggleButton} from '@react-aria/button';
-import {useToggleState} from '@react-stately/toggle';
-
-function ToggleButton(props) {
-  let ref = useRef<HTMLButtonElement | null>(null);
-  let state = useToggleState(props);
-  let {buttonProps, isPressed} = useToggleButton(props, state, ref);
-
-  return (
-    <button
-      {...buttonProps}
-      style={{
-        background: isPressed
-          ? state.isSelected ? 'darkgreen' : 'gray'
-          : state.isSelected ? 'green' : 'lightgray',
-        color: state.isSelected ? 'white' : 'black',
-        padding: 10,
-        fontSize: 16,
-        userSelect: 'none',
-        WebkitUserSelect: 'none',
-        border: 'none'
-      }}
-      ref={ref}>
-      {props.children}
-    </button>
-  );
-}
-
-<ToggleButton>Pin</ToggleButton>
-```
-
-## Usage
-
-The following examples show how to use the `ToggleButton` component created in the above example.
-
-### Controlled selection state
-
-A default selection state for a toggle button can be set using the `defaultSelected` prop, or controlled with the `isSelected` prop. The `onChange` event is fired when the user presses the button, toggling the boolean. See React's documentation on
-[uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.
-
-```tsx example
-function Example() {
-  let [isSelected, setSelected] = React.useState(false);
-
-  return (
-    <ToggleButton
-      isSelected={isSelected}
-      onChange={setSelected}
-      aria-label="Star">
-      ★
-    </ToggleButton>
-  );
-}
-```
-
-### Disabled
-
-A `ToggleButton` can be disabled using the `isDisabled` prop.
-
-```tsx example
-<ToggleButton isDisabled>Pin</ToggleButton>
-```
diff --git a/packages/react-aria/docs/button/useToggleButtonGroup.mdx b/packages/react-aria/docs/button/useToggleButtonGroup.mdx
deleted file mode 100644
index 3030d20788c..00000000000
--- a/packages/react-aria/docs/button/useToggleButtonGroup.mdx
+++ /dev/null
@@ -1,265 +0,0 @@
-{/* Copyright 2024 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/button';
-import statelyDocs from 'docs:@react-stately/toggle';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import {Keyboard} from '@react-spectrum/text';
-import packageData from '@react-aria/button/package.json';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import Anatomy from './ToggleButtonGroupAnatomy.svg';
-
----
-category: Buttons
-keywords: [button, toggle button, aria, form]
----
-
-# useToggleButtonGroup
-
-<PageDescription>{docs.exports.useToggleButtonGroup.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useToggleButtonGroup']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useToggleButtonGroup} links={docs.links} />
-<FunctionAPI function={docs.exports.useToggleButtonGroupItem} links={docs.links} />
-
-## Features
-
-There is no built in element for toggle button groups in HTML. `useToggleButtonGroup` helps achieve accessible toggle button groups that can be styled as needed.
-
-* **Accessible** – Represented as an ARIA [radiogroup](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) when using single selection, or a [toolbar](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/) when using multiple selection.
-* **Keyboard navigation** – Users can navigate between buttons with the arrow keys. Selection can be toggled using the <Keyboard>Enter</Keyboard> or <Keyboard>Space</Keyboard> keys.
-* **Styleable** – Hover, press, keyboard focus, and selection states are provided for easy styling.
-
-## Anatomy
-
-<Anatomy />
-
-A toggle button group consists of a set of toggle buttons, and coordinates the selection state between them. Users can navigate between buttons with the arrow keys in either horizontal or vertical orientations.
-
-`useToggleButtonGroup` returns props for the toggle button group:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useToggleButtonGroup.return.id].properties} />
-</TypeContext.Provider>
-
-`useToggleButtonGroupItem` returns props for an individual toggle button:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useToggleButtonGroupItem.return.base.id].properties} />
-</TypeContext.Provider>
-
-Selection state is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useToggleGroupState} />
-hook in `@react-stately/toggle`. The state object should be passed as an option to `useToggleButtonGroup`
-and `useToggleButtonGroupItem`.
-
-**Note:** `useToggleButtonGroupItem` should only be used when it is contained within a toggle button group. For a
-standalone toggle button, use the [useToggleButton](../ToggleButton/useToggleButton.html) hook instead.
-
-## Example
-
-```tsx example export=true
-import type {AriaToggleButtonGroupProps, AriaToggleButtonGroupItemProps} from '@react-aria/button';
-import type {ToggleGroupState} from '@react-stately/toggle';
-import {useToggleButtonGroup, useToggleButtonGroupItem} from '@react-aria/button';
-import {useToggleGroupState} from '@react-stately/toggle';
-
-interface ToggleButtonGroupProps extends AriaToggleButtonGroupProps {
-  children: React.ReactNode
-}
-
-let ToggleButtonGroupContext = React.createContext<ToggleGroupState | null>(null);
-
-function ToggleButtonGroup(props: ToggleButtonGroupProps) {
-  let state = useToggleGroupState(props);
-  let ref = React.useRef<HTMLDivElement | null>(null);
-  let {groupProps} = useToggleButtonGroup(props, state, ref);
-
-  return (
-    <div {...groupProps} className="toggle-group" ref={ref}>
-      <ToggleButtonGroupContext.Provider value={state}>
-        {props.children}
-      </ToggleButtonGroupContext.Provider>
-    </div>
-  );
-}
-
-function ToggleButton(props: AriaToggleButtonGroupItemProps) {
-  let ref = React.useRef<HTMLButtonElement | null>(null);
-  let state = React.useContext(ToggleButtonGroupContext)!;
-  let {buttonProps, isPressed, isSelected} = useToggleButtonGroupItem(props, state, ref);
-
-  return (
-    <button
-      {...buttonProps}
-      className="toggle-button"
-      data-pressed={isPressed}
-      data-selected={isSelected}
-      ref={ref}>
-      {props.children}
-    </button>
-  );
-}
-
-<ToggleButtonGroup>
-  <ToggleButton id="left">Left</ToggleButton>
-  <ToggleButton id="center">Center</ToggleButton>
-  <ToggleButton id="right">Right</ToggleButton>
-</ToggleButtonGroup>
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.toggle-group {
-  display: flex;
-  gap: 4px;
-
-  &[aria-orientation=vertical] {
-    flex-direction: column;
-    width: fit-content;
-  }
-}
-
-.toggle-button {
-  background: lightgray;
-  color: black;
-  padding: 10px;
-  font-size: 16px;
-  user-select: none;
-  border: none;
-
-  &[data-pressed=true] {
-    background: gray;
-  }
-
-  &[data-selected=true] {
-    background: green;
-    color: white;
-
-    &[data-pressed=true] {
-      background: darkgreen;
-    }
-  }
-
-  &:disabled {
-    opacity: 0.5;
-  }
-}
-```
-
-</details>
-
-## Selection
-
-ToggleButtonGroup supports both single and multiple selection modes. Use `defaultSelectedKeys` to provide a default set of selected items (uncontrolled) and `selectedKeys` to set the selected items (controlled). The value of the selected keys must match the `id` prop of the items.
-
-### Single selection
-
-By default, the `selectionMode` of a `ToggleButtonGroup` is `"single"`.
-
-```tsx example
-<ToggleButtonGroup defaultSelectedKeys={['list']}>
-  <ToggleButton id="grid">Grid view</ToggleButton>
-  <ToggleButton id="list">List view</ToggleButton>
-  <ToggleButton id="gallery">Gallery view</ToggleButton>
-</ToggleButtonGroup>
-```
-
-### Multiple selection
-
-Set `selectionMode` prop to `multiple` to allow more than one selection.
-
-```tsx example
-<ToggleButtonGroup selectionMode="multiple">
-  <ToggleButton id="bold">Bold</ToggleButton>
-  <ToggleButton id="italic">Italic</ToggleButton>
-  <ToggleButton id="underline">Underline</ToggleButton>
-</ToggleButtonGroup>
-```
-
-### Controlled selection
-
-The `selectedKeys` prop can be used to make the selected state controlled.
-
-```tsx example
-import type {Key} from 'react-stately';
-
-function Example() {
-  let [selected, setSelected] = React.useState(new Set<Key>(['bold']));
-
-  return (
-    <>
-      <ToggleButtonGroup selectionMode="multiple" selectedKeys={selected} onSelectionChange={setSelected}>
-        <ToggleButton id="bold">Bold</ToggleButton>
-        <ToggleButton id="italic">Italic</ToggleButton>
-        <ToggleButton id="underline">Underline</ToggleButton>
-      </ToggleButtonGroup>
-      <p>Current selections (controlled): {[...selected].join(', ')}</p>
-    </>
-  );
-}
-```
-
-## Disabled
-
-All buttons within a `ToggleButtonGroup` can be disabled using the `isDisabled` prop.
-
-```tsx example
-<ToggleButtonGroup isDisabled>
-  <ToggleButton id="grid">Grid view</ToggleButton>
-  <ToggleButton id="list">List view</ToggleButton>
-  <ToggleButton id="gallery">Gallery view</ToggleButton>
-</ToggleButtonGroup>
-```
-
-Individual items can be disabled using the `isDisabled` prop on each `ToggleButton`.
-
-```tsx example
-<ToggleButtonGroup>
-  <ToggleButton id="grid">Grid view</ToggleButton>
-  <ToggleButton id="list" isDisabled>List view</ToggleButton>
-  <ToggleButton id="gallery">Gallery view</ToggleButton>
-</ToggleButtonGroup>
-```
-
-## Orientation
-
-By default, toggle button groups are horizontally oriented. The orientation prop can be set to "vertical" to change the arrow key navigation behavior.
-
-```tsx example
-<ToggleButtonGroup orientation="vertical">
-  <ToggleButton id="grid">Grid</ToggleButton>
-  <ToggleButton id="list">List</ToggleButton>
-  <ToggleButton id="gallery">Gallery</ToggleButton>
-</ToggleButtonGroup>
-```
-
-## Accessibility
-
-A `ToggleButtonGroup` can be labeled using the `aria-label` or `aria-labelledby` props.
-
-```tsx example
-<ToggleButtonGroup aria-label="Text style">
-  <ToggleButton id="bold">Bold</ToggleButton>
-  <ToggleButton id="italic">Italic</ToggleButton>
-  <ToggleButton id="underline">Underline</ToggleButton>
-</ToggleButtonGroup>
-```
diff --git a/packages/react-aria/docs/calendar/calendar-tailwind.png b/packages/react-aria/docs/calendar/calendar-tailwind.png
deleted file mode 100644
index dd0763ed8e2..00000000000
Binary files a/packages/react-aria/docs/calendar/calendar-tailwind.png and /dev/null differ
diff --git a/packages/react-aria/docs/calendar/css-modules.png b/packages/react-aria/docs/calendar/css-modules.png
deleted file mode 100644
index 0f270efd264..00000000000
Binary files a/packages/react-aria/docs/calendar/css-modules.png and /dev/null differ
diff --git a/packages/react-aria/docs/calendar/styled-components.png b/packages/react-aria/docs/calendar/styled-components.png
deleted file mode 100644
index 297f992b491..00000000000
Binary files a/packages/react-aria/docs/calendar/styled-components.png and /dev/null differ
diff --git a/packages/react-aria/docs/calendar/tailwind.png b/packages/react-aria/docs/calendar/tailwind.png
deleted file mode 100644
index 92ae5e5e7f4..00000000000
Binary files a/packages/react-aria/docs/calendar/tailwind.png and /dev/null differ
diff --git a/packages/react-aria/docs/calendar/useCalendar.mdx b/packages/react-aria/docs/calendar/useCalendar.mdx
deleted file mode 100644
index a3b546677b5..00000000000
--- a/packages/react-aria/docs/calendar/useCalendar.mdx
+++ /dev/null
@@ -1,575 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/calendar';
-import statelyDocs from 'docs:@react-stately/calendar';
-import i18nDocs from 'docs:@internationalized/date';
-import {FunctionAPI, HeaderInfo, InterfaceType, TypeContext, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/calendar/package.json';
-import Anatomy from './calendar-anatomy.svg';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import {Keyboard} from '@react-spectrum/text';
-import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
-import styledComponentsExample from 'url:./styled-components.png';
-import tailwindExample from 'url:./calendar-tailwind.png';
-import cssModulesExample from 'url:./css-modules.png';
-
----
-category: Date and Time
-keywords: [input, form, field, date, time]
----
-
-# useCalendar
-
-<PageDescription>{docs.exports.useCalendar.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useCalendar']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useCalendar} links={docs.links} />
-<FunctionAPI function={docs.exports.useCalendarGrid} links={docs.links} />
-<FunctionAPI function={docs.exports.useCalendarCell} links={docs.links} />
-
-## Features
-
-There is no standalone calendar element in HTML. `<input type="date">` is close, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. `useCalendar` helps achieve accessible and international calendar components that can be styled as needed.
-
-* **Flexible** – Display one or more months at once, or a custom time range for use cases like a week view. Minimum and maximum values, unavailable dates, and non-contiguous selections are supported as well.
-* **International** – Support for 13 calendar systems used around the world, including Gregorian, Buddhist, Islamic, Persian, and more. Locale-specific formatting, number systems, and right-to-left support are available as well.
-* **Accessible** – Calendar cells can be navigated and selected using the keyboard, and localized screen reader messages are included to announce when the selection and visible date range change.
-* **Customizable** – As with all of React Aria, the DOM structure and styling of all elements can be fully customized.
-
-Read our [blog post](../blog/date-and-time-pickers-for-all) for more details about the internationalization, accessibility, and user experience features implemented by `useCalendar`.
-
-## Anatomy
-
-<Anatomy
-  role="img"
-  aria-label="Anatomy diagram of a calendar component, which consists of a heading, grid of cells, previous, and next buttons." />
-
-A calendar consists of a grouping element containing one or more date grids (e.g. months), and a previous and next button for navigating between date ranges. Each calendar grid consists of cells containing button elements that can be pressed and navigated to using the arrow keys to select a date.
-
-### useCalendar
-
-`useCalendar` returns props that you should spread onto the appropriate elements:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useCalendar.return.id].properties} />
-</TypeContext.Provider>
-
-### useCalendarGrid
-
-`useCalendarGrid` returns props for an individual grid of dates, such as one month, along with a list of formatted weekday names in the current locale for use during rendering:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useCalendarGrid.return.id].properties} />
-</TypeContext.Provider>
-
-### useCalendarCell
-
-`useCalendarCell` returns props for an individual cell, along with states and information useful during rendering:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useCalendarCell.return.id].properties} />
-</TypeContext.Provider>
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useCalendarState} /> hook from `@react-stately/calendar`. The state object should be passed as an option to `useCalendar`, `useCalendarGrid`, and `useCalendarCell`.
-
-Note that much of this anatomy is shared with [range calendars](../RangeCalendar/useRangeCalendar.html). The only difference is that `useCalendarState` is used instead of `useRangeCalendarState`, and `useCalendar` is used instead of `useRangeCalendar`.
-
-## Date and time values
-
-Dates are represented in many different ways by cultures around the world. This includes differences in calendar systems, date formatting, numbering systems, weekday and weekend rules, and much more. When building applications that support users around the world, it is important to handle these aspects correctly for each locale.
-
-<TypeLink links={docs.links} type={docs.exports.useCalendar} /> uses the [@internationalized/date](../internationalized/date/) library to represent dates and times. This package provides a library of objects and functions to perform date and time related manipulation, queries, and conversions that work across locales and calendars. Date and time objects can be converted to and from native JavaScript `Date` objects or [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) strings. See the [documentation](../internationalized/date/), or the [examples below](#value) for more details.
-
-<TypeLink links={statelyDocs.links} type={statelyDocs.exports.useCalendarState} /> requires a `createCalendar` function to be provided, which is used to implement date manipulation across multiple calendar systems. The default implementation in `@internationalized/date` includes all supported calendar systems. While this library is quite small (8 kB minified + Brotli), you can reduce its bundle size further by providing your own implementation that includes only your supported calendars. See [below](#reducing-bundle-size) for an example.
-
-## Example
-
-A `Calendar` consists of three components: the main calendar wrapper element with previous and next buttons for navigating, one or more `CalendarGrid` components to display each month, and `CalendarCell` components for each date cell. We'll go through them one by one.
-
-For simplicity, this example only displays a single month at a time. See the [styled examples](#styled-examples) section for more examples with multiple months, as well as other time ranges like weeks.
-
-```tsx example render=false export=true
-import {useCalendarState} from '@react-stately/calendar';
-import {useCalendar} from '@react-aria/calendar';
-import {useLocale} from '@react-aria/i18n';
-import {createCalendar} from '@internationalized/date';
-
-// Reuse the Button from your component library. See below for details.
-import {Button} from 'your-component-library';
-
-function Calendar(props) {
-  let {locale} = useLocale();
-  let state = useCalendarState({
-    createCalendar,
-    ...props,
-    locale
-  });
-
-  let {calendarProps, prevButtonProps, nextButtonProps, title} = useCalendar(props, state);
-
-  return (
-    <div {...calendarProps} className="calendar">
-      <div className="header">
-        <h2>{title}</h2>
-        <Button {...prevButtonProps}>&lt;</Button>
-        <Button {...nextButtonProps}>&gt;</Button>
-      </div>
-      <CalendarGrid state={state} firstDayOfWeek={props.firstDayOfWeek} />
-    </div>
-  );
-}
-```
-
-### CalendarGrid
-
-The `CalendarGrid` component will be responsible for rendering an individual month. It is a separate component so that you can render more than one month at a time if you like. It's rendered as an HTML `<table>` element, and React Aria takes care of adding the proper ARIA roles and event handlers to make it behave as an ARIA grid. You can use the arrow keys to navigate between cells, and the <Keyboard>Enter</Keyboard> key to select a date.
-
-The `state.getDatesInWeek` function returns the dates in each week of the month. Note that this always includes 7 values, but some of them may be null, which indicates that the date doesn't exist within the calendar system. You should render a placeholder `<td>` element in this case so that the cells line up correctly.
-
-**Note**: this component is the same as the `CalendarGrid` component shown in the [useRangeCalendar](../RangeCalendar/useRangeCalendar.html) docs, and you can reuse it between both `Calendar` and `RangeCalendar`.
-
-```tsx example render=false export=true
-import {useCalendarGrid} from '@react-aria/calendar';
-
-function CalendarGrid({state, ...props}) {
-  let {gridProps, headerProps, weekDays, weeksInMonth} = useCalendarGrid(props, state);
-
-  return (
-    <table {...gridProps}>
-      <thead {...headerProps}>
-        <tr>
-          {weekDays.map((day, index) =>
-            <th key={index}>{day}</th>
-          )}
-        </tr>
-      </thead>
-      <tbody>
-        {[...new Array(weeksInMonth).keys()].map(weekIndex => (
-          <tr key={weekIndex}>
-            {state.getDatesInWeek(weekIndex).map((date, i) => (
-              date ? (
-                <CalendarCell
-                  key={i}
-                  state={state}
-                  date={date} />
-              ) : <td key={i} />
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}
-```
-
-### CalendarCell
-
-Finally, the `CalendarCell` component renders an individual cell in a calendar. It consists of two elements: a `<td>` to represent the grid cell, and a `<div>` to represent a button that can be clicked to select the date. The `useCalendarCell` hook also returns the formatted date string in the current locale, as well as some information about the cell's state that can be useful for styling. See [above](#usecalendarcell) for details.
-
-**Note**: this component is the same as the `CalendarCell` component shown in the [useRangeCalendar](../RangeCalendar/useRangeCalendar.html) docs, and you can reuse it between both `Calendar` and `RangeCalendar`.
-
-```tsx example render=false export=true
-import {useCalendarCell} from '@react-aria/calendar';
-
-function CalendarCell({state, date}) {
-  let ref = React.useRef(null);
-  let {
-    cellProps,
-    buttonProps,
-    isSelected,
-    isOutsideVisibleRange,
-    isDisabled,
-    isUnavailable,
-    formattedDate
-  } = useCalendarCell({date}, state, ref);
-
-  return (
-    <td {...cellProps}>
-      <div
-        {...buttonProps}
-        ref={ref}
-        hidden={isOutsideVisibleRange}
-        className={`cell ${isSelected ? 'selected' : ''} ${isDisabled ? 'disabled' : ''} ${isUnavailable ? 'unavailable' : ''}`}>
-        {formattedDate}
-      </div>
-    </td>
-  );
-}
-```
-
-That's it! Now we can render an example of our `Calendar` component in action.
-
-```tsx example
-<Calendar aria-label="Event date" />
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.calendar {
-  width: 220px;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin: 0 8px;
-}
-
-.header h2 {
-  flex: 1;
-  margin: 0;
-}
-
-.calendar table {
-  width: 100%;
-}
-
-.cell {
-  cursor: default;
-  text-align: center;
-}
-
-.selected {
-  background: var(--blue);
-  color: white;
-}
-
-.unavailable {
-  color: var(--spectrum-global-color-red-600);
-}
-
-.disabled {
-  color: gray;
-}
-```
-
-</details>
-
-### Button
-
-The `Button` component is used in the above example to navigate between months. It is built using the [useButton](../Button/useButton.html) hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useButton} from '@react-aria/button';
-
-function Button(props) {
-  let ref = React.useRef(null);
-  let {buttonProps} = useButton(props, ref);
-  return <button {...buttonProps} ref={ref}>{props.children}</button>;
-}
-```
-
-</details>
-
-## Styled Examples
-
-<ExampleCard
-  url="https://codesandbox.io/s/objective-shape-8r4utm?file=/src/Calendar.js"
-  preview={tailwindExample}
-  title="Tailwind CSS"
-  description="A Calendar built with Tailwind, supporting multiple visible months." />
-
-<ExampleCard
-  url="https://codesandbox.io/s/stupefied-almeida-01yvsp?file=/src/WeekView.js"
-  preview={styledComponentsExample}
-  title="Styled Components"
-  description="A week view component, built with Styled Components." />
-
-<ExampleCard
-  url="https://codesandbox.io/s/affectionate-rosalind-tdm323?file=/src/Calendar.js"
-  preview={cssModulesExample}
-  title="CSS Modules"
-  description="A Calendar with custom month and year dropdowns, styled with CSS Modules." />
-
-## Usage
-
-The following examples show how to use the `Calendar` component created in the above example.
-
-### Value
-
-A `Calendar` has no selection by default. An initial, uncontrolled value can be provided to the `Calendar` using the `defaultValue` prop. Alternatively, a controlled value can be provided using the `value` prop.
-
-Date values are provided using objects in the [@internationalized/date](../internationalized/date/) package. This library handles correct international date manipulation across calendars, time zones, and other localization concerns.
-
-`useCalendar` supports values with both date and time components, but only allows users to modify the date. By default, `useCalendar` will emit <TypeLink links={i18nDocs.links} type={i18nDocs.exports.CalendarDate} /> objects in the `onChange` event, but if a <TypeLink links={i18nDocs.links} type={i18nDocs.exports.CalendarDateTime} /> or <TypeLink links={i18nDocs.links} type={i18nDocs.exports.ZonedDateTime} /> object is passed as the `value` or `defaultValue`, values of that type will be emitted, changing only the date and preserving the time components.
-
-```tsx example
-import {parseDate} from '@internationalized/date';
-
-function Example() {
-  let [value, setValue] = React.useState(parseDate('2020-02-03'));
-
-  return (
-    <div style={{display: 'flex', gap: 20, flexWrap: 'wrap'}}>
-      <Calendar
-        aria-label="Date (uncontrolled)"
-        defaultValue={parseDate('2020-02-03')} />
-      <Calendar
-        aria-label="Date (controlled)"
-        value={value}
-        onChange={setValue} />
-    </div>
-  );
-}
-```
-
-### Events
-
-`useCalendar` accepts an `onChange` prop which is triggered whenever a date is selected by the user. The example below uses `onChange` to update a separate element with a formatted version of the date in the user's locale. This is done by converting the date to a native JavaScript `Date` object to pass to the formatter.
-
-```tsx example
-import {getLocalTimeZone} from '@internationalized/date';
-import {useDateFormatter} from '@react-aria/i18n';
-
-function Example() {
-  let [date, setDate] = React.useState(parseDate('2022-07-04'));
-  let formatter = useDateFormatter({dateStyle: 'full'});
-
-  return (
-    <>
-      <Calendar aria-label="Event date" value={date} onChange={setDate} />
-      <p>Selected date: {formatter.format(date.toDate(getLocalTimeZone()))}</p>
-    </>
-  );
-}
-```
-
-### International calendars
-
-`useCalendar` supports selecting dates in many calendar systems used around the world, including Gregorian, Hebrew, Indian, Islamic, Buddhist, and more. Dates are automatically displayed in the appropriate calendar system for the user's locale. The calendar system can be overridden using the [Unicode calendar locale extension](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar#adding_a_calendar_in_the_locale_string), passed to the [I18nProvider](../I18nProvider) component.
-
-Selected dates passed to `onChange` always use the same calendar system as the `value` or `defaultValue` prop. If no `value` or `defaultValue` is provided, then dates passed to `onChange` are always in the Gregorian calendar since this is the most commonly used. This means that even though the user selects dates in their local calendar system, applications are able to deal with dates from all users consistently.
-
-The below example displays a `Calendar` in the Hindi language, using the Indian calendar. Dates emitted from `onChange` are in the Gregorian calendar.
-
-```tsx example
-import {I18nProvider} from '@react-aria/i18n';
-
-function Example() {
-  let [date, setDate] = React.useState(null);
-  return (
-    <I18nProvider locale="hi-IN-u-ca-indian">
-      <Calendar aria-label="Date" value={date} onChange={setDate} />
-      <p>Selected date: {date?.toString()}</p>
-    </I18nProvider>
-  );
-}
-```
-
-### Custom calendar systems
-
-`Calendar` also supports custom calendar systems that implement custom business rules. An example would be a fiscal year calendar that follows a [4-5-4 format](https://nrf.com/resources/4-5-4-calendar), where month ranges don't follow the usual Gregorian calendar.
-
-The `createCalendar` prop accepts a function that returns an instance of the <TypeLink links={i18nDocs.links} type={i18nDocs.exports.Calendar} /> interface. See the [@internationalized/date docs](../internationalized/date/Calendar.html#custom-calendars) for an example implementation.
-
-```tsx import
-import type {AnyCalendarDate} from '@internationalized/date';
-import {CalendarDate, startOfWeek, toCalendar} from '@internationalized/date';
-```
-
-```tsx example
-import {GregorianCalendar} from '@internationalized/date';
-
-function Example() {
-  return <Calendar firstDayOfWeek="sun" createCalendar={() => new Custom454()} />;
-}
-
-class Custom454 extends GregorianCalendar {
-  // See @internationalized/date docs linked above...
-  ///- begin collapse -///
-  weekPattern = [4, 5, 4, 4, 5, 4, 4, 5, 4, 4, 5, 4];
-  getDaysInMonth(date) {
-    return this.weekPattern[date.month - 1] * 7;
-  }
-
-  fromJulianDay(jd: number): CalendarDate {
-    let gregorian = super.fromJulianDay(jd);
-
-    let monthStart = startOfWeek(new CalendarDate(gregorian.year, 1, 1), 'en');
-    for (let months = 0; months < this.weekPattern.length; months++) {
-      let weeksInMonth = this.weekPattern[months];
-      let monthEnd = monthStart.add({weeks: weeksInMonth});
-      if (monthEnd.compare(gregorian) > 0) {
-        let days = gregorian.compare(monthStart);
-        return new CalendarDate(this, monthStart.year, months + 1, days + 1);
-      }
-      monthStart = monthEnd;
-    }
-
-    throw Error('Date is not in any month somehow!');
-  }
-
-  toJulianDay(date: AnyCalendarDate): number {
-    let monthStart = startOfWeek(new CalendarDate(date.year, 1, 1), 'en');
-    for (let month = 1; month < date.month; month++) {
-      monthStart = monthStart.add({weeks: this.weekPattern[month - 1]});
-    }
-
-    let gregorian = monthStart.add({days: date.day - 1});
-    return super.toJulianDay(gregorian);
-  }
-
-  getFormattableMonth(date) {
-    let gregorian = toCalendar(date, new GregorianCalendar());
-    return gregorian.set({month: date.month, day: 1});
-  }
-
-  isEqual(other) {
-    return other instanceof Custom454;
-  }
- ///- end collapse -///
-}
-```
-
-### Validation
-
-By default, `useCalendar` allows selecting any date. The `minValue` and `maxValue` props can also be used to prevent the user from selecting dates outside a certain range.
-
-This example only accepts dates after today.
-
-```tsx example
-import {today} from '@internationalized/date';
-
-<Calendar aria-label="Appointment date" minValue={today(getLocalTimeZone())} />
-```
-
-### Unavailable dates
-
-`useCalendar` supports marking certain dates as _unavailable_. These dates remain focusable with the keyboard so that navigation is consistent, but cannot be selected by the user. In this example, they are displayed in red. The `isDateUnavailable` prop accepts a callback that is called to evaluate whether each visible date is unavailable.
-
-This example includes multiple unavailable date ranges, e.g. dates when no appointments are available. In addition, all weekends are unavailable. The `minValue` prop is also used to prevent selecting dates before today.
-
-
-```tsx example
-import {today, isWeekend} from '@internationalized/date';
-import {useLocale} from '@react-aria/i18n';
-
-function Example() {
-  let now = today(getLocalTimeZone());
-  let disabledRanges = [
-    [now, now.add({days: 5})],
-    [now.add({days: 14}), now.add({days: 16})],
-    [now.add({days: 23}), now.add({days: 24})],
-  ];
-
-  let {locale} = useLocale();
-  let isDateUnavailable = (date) => isWeekend(date, locale) || disabledRanges.some((interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0);
-
-  return <Calendar aria-label="Appointment date" minValue={today(getLocalTimeZone())} isDateUnavailable={isDateUnavailable} />
-}
-```
-
-### Controlling the focused date
-
-By default, the selected date is focused when a `Calendar` first mounts. If no `value` or `defaultValue` prop is provided, then the current date is focused.  However, `useCalendar` supports controlling which date is focused using the `focusedValue` and `onFocusChange` props. This also determines which month is visible. The `defaultFocusedValue` prop allows setting the initial focused date when the `Calendar` first mounts, without controlling it.
-
-This example focuses July 1, 2021 by default. The user may change the focused date, and the `onFocusChange` event updates the state. Clicking the button resets the focused date back to the initial value.
-
-```tsx example
-import {CalendarDate} from '@internationalized/date';
-
-function Example() {
-  let defaultDate = new CalendarDate(2021, 7, 1);
-  let [focusedDate, setFocusedDate] = React.useState(defaultDate);
-
-  return (
-    <div style={{flexDirection: 'column', alignItems: 'start', gap: 20}}>
-      <button onClick={() => setFocusedDate(defaultDate)}>Reset focused date</button>
-      <Calendar focusedValue={focusedDate} onFocusChange={setFocusedDate} />
-    </div>
-  );
-}
-```
-
-### Disabled
-
-The `isDisabled` boolean prop makes the Calendar disabled. Cells cannot be focused or selected.
-
-```tsx example
-<Calendar aria-label="Event date" isDisabled />
-```
-
-### Read only
-
-The `isReadOnly` boolean prop makes the Calendar's value immutable. Unlike `isDisabled`, the Calendar remains focusable.
-
-```tsx example
-<Calendar aria-label="Event date" value={today(getLocalTimeZone())} isReadOnly />
-```
-
-### Custom first day of week
-
-By default, the first day of the week is automatically set based on the current locale. This can be changed by setting the `firstDayOfWeek` prop to `'sun'`, `'mon'`, `'tue'`, `'wed'`, `'thu'`, `'fri'`, or `'sat'`.
-
-```tsx example
-<Calendar aria-label="Event date" value={today(getLocalTimeZone())} firstDayOfWeek="mon" />
-```
-
-### Labeling
-
-An aria-label must be provided to the `Calendar` for accessibility. If it is labeled by a separate element, an `aria-labelledby` prop must be provided using the `id` of the labeling element instead.
-
-### Internationalization
-
-In order to internationalize a `Calendar`, a localized string should be passed to the `aria-label` prop. For languages that are read right-to-left (e.g. Hebrew and Arabic), keyboard navigation is automatically flipped. Ensure that your CSS accounts for this as well. Dates are automatically formatted using the current locale.
-
-## Advanced topics
-
-### Reducing bundle size
-
-In the example above, the <TypeLink links={i18nDocs.links} type={i18nDocs.exports.createCalendar} /> function from the [@internationalized/date](../internationalized/date/) package is passed to the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useCalendarState} /> hook. This function receives a [calendar identifier](../internationalized/date/Calendar.html#calendar-identifiers) string, and provides <TypeLink links={i18nDocs.links} type={i18nDocs.exports.Calendar} /> instances to React Stately, which are used to implement date manipulation.
-
-By default, this includes [all calendar systems](../internationalized/date/Calendar.html#implementations) supported by `@internationalized/date`. However, if your application supports a more limited set of regions, or you know you will only be picking dates in a certain calendar system, you can reduce your bundle size by providing your own implementation of `createCalendar` that includes a subset of these `Calendar` implementations.
-
-For example, if your application only supports Gregorian dates, you could implement a `createCalendar` function like this:
-
-```jsx
-import {useCalendarState} from '@react-stately/datepicker';
-import {useLocale} from '@react-aria/i18n';
-import {GregorianCalendar} from '@internationalized/date';
-
-function createCalendar(identifier) {
-  switch (identifier) {
-    case 'gregory':
-      return new GregorianCalendar();
-    default:
-      throw new Error(`Unsupported calendar ${identifier}`);
-  }
-}
-
-function Calendar(props) {
-  let {locale} = useLocale();
-  let state = useCalendarState({
-    ...props,
-    locale,
-    createCalendar
-  });
-
-  // ...
-}
-```
-
-This way, only `GregorianCalendar` is imported, and the other calendar implementations can be tree-shaken.
-
-See the [Calendar](../internationalized/date/Calendar.html) documentation in `@internationalized/date` to learn more about the supported calendar systems, and a list of string identifiers.
diff --git a/packages/react-aria/docs/calendar/useRangeCalendar.mdx b/packages/react-aria/docs/calendar/useRangeCalendar.mdx
deleted file mode 100644
index 7b5f3495c50..00000000000
--- a/packages/react-aria/docs/calendar/useRangeCalendar.mdx
+++ /dev/null
@@ -1,594 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/calendar';
-import statelyDocs from 'docs:@react-stately/calendar';
-import i18nDocs from 'docs:@internationalized/date';
-import {FunctionAPI, HeaderInfo, InterfaceType, TypeContext, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/calendar/package.json';
-import Anatomy from './rangecalendar-anatomy.svg';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import {Keyboard} from '@react-spectrum/text';
-import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
-import tailwindExample from 'url:./tailwind.png';
-
----
-category: Date and Time
-keywords: [input, form, field, date, time]
----
-
-# useRangeCalendar
-
-<PageDescription>{docs.exports.useRangeCalendar.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useRangeCalendar']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useRangeCalendar} links={docs.links} />
-<FunctionAPI function={docs.exports.useCalendarGrid} links={docs.links} />
-<FunctionAPI function={docs.exports.useCalendarCell} links={docs.links} />
-
-## Features
-
-There is no standalone range calendar element in HTML. Two separate `<input type="date">` elements could be used, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. `useRangeCalendar` helps achieve accessible and international range calendar components that can be styled as needed.
-
-* **Flexible** – Display one or more months at once, or a custom time range for use cases like a week view. Minimum and maximum values, unavailable dates, and non-contiguous selections are supported as well.
-* **International** – Support for 13 calendar systems used around the world, including Gregorian, Buddhist, Islamic, Persian, and more. Locale-specific formatting, number systems, and right-to-left support are available as well.
-* **Accessible** – Calendar cells can be navigated and selected using the keyboard, and localized screen reader messages are included to announce when the selection and visible date range change.
-* **Touch friendly** – Date ranges can be selected by dragging over dates in the calendar using a touch screen, and all interactions are accessible using touch-based screen readers.
-* **Customizable** – As with all of React Aria, the DOM structure and styling of all elements can be fully customized.
-
-Read our [blog post](../blog/date-and-time-pickers-for-all) for more details about the internationalization, accessibility, and user experience features implemented by `useRangeCalendar`.
-
-## Anatomy
-
-<Anatomy
-  role="img"
-  aria-label="Anatomy diagram of a range calendar component, which consists of a heading, grid of cells, previous, and next buttons." />
-
-A range calendar consists of a grouping element containing one or more date grids (e.g. months), and a previous and next button for navigating through time. Each calendar grid consists of cells containing button elements that can be pressed and navigated to using the arrow keys to select a date range. Once a start date is selected, the user can navigate to another date using the keyboard or by hovering over it, and clicking it or pressing the <Keyboard>Enter</Keyboard> key commits the selected date range.
-
-### useRangeCalendar
-
-`useRangeCalendar` returns props that you should spread onto the appropriate elements:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useRangeCalendar.return.id].properties} />
-</TypeContext.Provider>
-
-### useCalendarGrid
-
-`useCalendarGrid` returns props for an individual grid of dates, such as one month, along with a list of formatted weekday names in the current locale for use during rendering:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useCalendarGrid.return.id].properties} />
-</TypeContext.Provider>
-
-### useCalendarCell
-
-`useCalendarCell` returns props for an individual cell, along with states and information useful during rendering:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useCalendarCell.return.id].properties} />
-</TypeContext.Provider>
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useRangeCalendarState} /> hook from `@react-stately/calendar`. The state object should be passed as an option to `useRangeCalendar`, `useCalendarGrid`, and `useCalendarCell`.
-
-Note that much of this anatomy is shared with [non-range calendars](../Calendar/useCalendar.html). The only difference is that `useRangeCalendarState` is used instead of `useCalendarState`, and `useRangeCalendar` is used instead of `useCalendar`.
-
-## Date and time values
-
-Dates are represented in many different ways by cultures around the world. This includes differences in calendar systems, date formatting, numbering systems, weekday and weekend rules, and much more. When building applications that support users around the world, it is important to handle these aspects correctly for each locale.
-
-<TypeLink links={docs.links} type={docs.exports.useRangeCalendar} /> uses the [@internationalized/date](../internationalized/date/) library to represent dates and times. This package provides a library of objects and functions to perform date and time related manipulation, queries, and conversions that work across locales and calendars. Date and time objects can be converted to and from native JavaScript `Date` objects or [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) strings. See the [documentation](../internationalized/date/), or the [examples below](#value) for more details.
-
-<TypeLink links={statelyDocs.links} type={statelyDocs.exports.useRangeCalendarState} /> requires a `createCalendar` function to be provided, which is used to implement date manipulation across multiple calendar systems. The default implementation in `@internationalized/date` includes all supported calendar systems. While this library is quite small (8 kB minified + Brotli), you can reduce its bundle size further by providing your own implementation that includes only your supported calendars. See [below](#reducing-bundle-size) for an example.
-
-## Example
-
-A `RangeCalendar` consists of three components: the main calendar wrapper element with previous and next buttons for navigating, one or more `CalendarGrid` components to display each month, and `CalendarCell` components for each date cell. We'll go through them one by one.
-
-For simplicity, this example only displays a single month at a time. See the [styled examples](#styled-examples) section for more examples with multiple months, as well as other time ranges like weeks.
-
-```tsx example render=false export=true
-import {useRangeCalendarState} from '@react-stately/calendar';
-import {useRangeCalendar} from '@react-aria/calendar';
-import {useLocale} from '@react-aria/i18n';
-import {createCalendar} from '@internationalized/date';
-
-// Reuse the Button from your component library. See below for details.
-import {Button} from 'your-component-library';
-
-function RangeCalendar(props) {
-  let {locale} = useLocale();
-  let state = useRangeCalendarState({
-    createCalendar,
-    ...props,
-    locale
-  });
-
-  let ref = React.useRef(null);
-  let {calendarProps, prevButtonProps, nextButtonProps, title} = useRangeCalendar(props, state, ref);
-
-  return (
-    <div {...calendarProps} ref={ref} className="calendar">
-      <div className="header">
-        <h2>{title}</h2>
-        <Button {...prevButtonProps}>&lt;</Button>
-        <Button {...nextButtonProps}>&gt;</Button>
-      </div>
-      <CalendarGrid state={state} firstDayOfWeek={props.firstDayOfWeek} />
-    </div>
-  );
-}
-```
-
-### CalendarGrid
-
-The `CalendarGrid` component will be responsible for rendering an individual month. It is a separate component so that you can render more than one month at a time if you like. It's rendered as an HTML `<table>` element, and React Aria takes care of adding the proper ARIA roles and event handlers to make it behave as an ARIA grid. You can use the arrow keys to navigate between cells, and the <Keyboard>Enter</Keyboard> key to select a date.
-
-The `state.getDatesInWeek` function returns the dates in each week of the month. Note that this always includes 7 values, but some of them may be null, which indicates that the date doesn't exist within the calendar system. You should render a placeholder `<td>` element in this case so that the cells line up correctly.
-
-**Note**: this component is the same as the `CalendarGrid` component shown in the [useCalendar](../Calendar/useCalendar.html) docs, and you can reuse it between both `Calendar` and `RangeCalendar`.
-
-```tsx example render=false export=true
-import {useCalendarGrid} from '@react-aria/calendar';
-
-function CalendarGrid({state, ...props}) {
-  let {gridProps, headerProps, weekDays, weeksInMonth} = useCalendarGrid(props, state);
-
-  return (
-    <table {...gridProps}>
-      <thead {...headerProps}>
-        <tr>
-          {weekDays.map((day, index) =>
-            <th key={index}>{day}</th>
-          )}
-        </tr>
-      </thead>
-      <tbody>
-        {[...new Array(weeksInMonth).keys()].map(weekIndex => (
-          <tr key={weekIndex}>
-            {state.getDatesInWeek(weekIndex).map((date, i) => (
-              date ? (
-                <CalendarCell
-                  key={i}
-                  state={state}
-                  date={date} />
-              ) : <td key={i} />
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}
-```
-
-### CalendarCell
-
-Finally, the `CalendarCell` component renders an individual cell in a calendar. It consists of two elements: a `<td>` to represent the grid cell, and a `<div>` to represent a button that can be clicked to select the date. The `useCalendarCell` hook also returns the formatted date string in the current locale, as well as some information about the cell's state that can be useful for styling. See [above](#usecalendarcell) for details.
-
-**Note**: this component is the same as the `CalendarCell` component shown in the [useCalendar](../Calendar/useCalendar.html) docs, and you can reuse it between both `Calendar` and `RangeCalendar`.
-
-```tsx example render=false export=true
-import {useCalendarCell} from '@react-aria/calendar';
-
-function CalendarCell({state, date}) {
-  let ref = React.useRef(null);
-  let {
-    cellProps,
-    buttonProps,
-    isSelected,
-    isOutsideVisibleRange,
-    isDisabled,
-    isUnavailable,
-    formattedDate
-  } = useCalendarCell({date}, state, ref);
-
-  return (
-    <td {...cellProps}>
-      <div
-        {...buttonProps}
-        ref={ref}
-        hidden={isOutsideVisibleRange}
-        className={`cell ${isSelected ? 'selected' : ''} ${isDisabled ? 'disabled' : ''} ${isUnavailable ? 'unavailable' : ''}`}>
-        {formattedDate}
-      </div>
-    </td>
-  );
-}
-```
-
-That's it! Now we can render an example of our `RangeCalendar` component in action.
-
-```tsx example
-<RangeCalendar aria-label="Trip dates" />
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.calendar {
-  width: 220px;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin: 0 8px;
-}
-
-.header h2 {
-  flex: 1;
-  margin: 0;
-}
-
-.calendar table {
-  width: 100%;
-}
-
-.cell {
-  cursor: default;
-  text-align: center;
-}
-
-.selected {
-  background: var(--blue);
-  color: white;
-}
-
-.unavailable {
-  color: var(--spectrum-global-color-red-600);
-}
-
-.disabled {
-  color: gray;
-}
-```
-
-</details>
-
-### Button
-
-The `Button` component is used in the above example to navigate between months. It is built using the [useButton](../Button/useButton.html) hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useButton} from '@react-aria/button';
-
-function Button(props) {
-  let ref = React.useRef(null);
-  let {buttonProps} = useButton(props, ref);
-  return <button {...buttonProps} ref={ref}>{props.children}</button>;
-}
-```
-
-</details>
-
-## Styled examples
-
-<ExampleCard
-  url="https://codesandbox.io/s/objective-shape-8r4utm?file=/src/RangeCalendar.js"
-  preview={tailwindExample}
-  title="Tailwind CSS"
-  description="A RangeCalendar built with Tailwind, supporting multiple visible months." />
-
-## Usage
-
-The following examples show how to use the `RangeCalendar` component created in the above example.
-
-### Value
-
-A `RangeCalendar` has no selection by default. An initial, uncontrolled value can be provided to the `RangeCalendar` using the `defaultValue` prop. Alternatively, a controlled value can be provided using the `value` prop.
-
-Date ranges are objects with `start` and `end` properties containing date values, which are provided using objects in the [@internationalized/date](../internationalized/date/) package. This library handles correct international date manipulation across calendars, time zones, and other localization concerns.
-
-`useRangeCalendar` supports values with both date and time components, but only allows users to modify the dates. By default, `useRangeCalendar` will emit <TypeLink links={i18nDocs.links} type={i18nDocs.exports.CalendarDate} /> objects in the `onChange` event, but if a <TypeLink links={i18nDocs.links} type={i18nDocs.exports.CalendarDateTime} /> or <TypeLink links={i18nDocs.links} type={i18nDocs.exports.ZonedDateTime} /> object is passed as the `value` or `defaultValue`, values of that type will be emitted, changing only the date and preserving the time components.
-
-```tsx example
-import {parseDate} from '@internationalized/date';
-
-function Example() {
-  let [value, setValue] = React.useState({
-    start: parseDate('2020-02-03'),
-    end: parseDate('2020-02-12')
-  });
-
-  return (
-    <div style={{display: 'flex', gap: 20, flexWrap: 'wrap'}}>
-      <RangeCalendar
-        aria-label="Date range (uncontrolled)"
-        defaultValue={{
-          start: parseDate('2020-02-03'),
-          end: parseDate('2020-02-12')
-        }} />
-      <RangeCalendar
-        aria-label="Date range (controlled)"
-        value={value}
-        onChange={setValue} />
-    </div>
-  );
-}
-```
-
-### Events
-
-`useRangeCalendar` accepts an `onChange` prop which is triggered whenever a date is selected by the user. The example below uses `onChange` to update a separate element with a formatted version of the date in the user's locale. This is done by converting the date to a native JavaScript `Date` object to pass to the formatter.
-
-```tsx example
-import {getLocalTimeZone} from '@internationalized/date';
-import {useDateFormatter} from '@react-aria/i18n';
-
-function Example() {
-  let [range, setRange] = React.useState({
-    start: parseDate('2020-07-03'),
-    end: parseDate('2020-07-10')
-  });
-  let formatter = useDateFormatter({dateStyle: 'long'});
-
-  return (
-    <>
-      <RangeCalendar aria-label="Date range" value={range} onChange={setRange} />
-      <p>
-        Selected date:{' '}
-        {formatter.formatRange(
-          range.start.toDate(getLocalTimeZone()),
-          range.end.toDate(getLocalTimeZone())
-        )}
-      </p>
-    </>
-  );
-}
-```
-
-### International calendars
-
-`useRangeCalendar` supports selecting dates in many calendar systems used around the world, including Gregorian, Hebrew, Indian, Islamic, Buddhist, and more. Dates are automatically displayed in the appropriate calendar system for the user's locale. The calendar system can be overridden using the [Unicode calendar locale extension](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar#adding_a_calendar_in_the_locale_string), passed to the [I18nProvider](../I18nProvider) component.
-
-Selected dates passed to `onChange` always use the same calendar system as the `value` or `defaultValue` prop. If no `value` or `defaultValue` is provided, then dates passed to `onChange` are always in the Gregorian calendar since this is the most commonly used. This means that even though the user selects dates in their local calendar system, applications are able to deal with dates from all users consistently.
-
-The below example displays a `RangeCalendar` in the Hindi language, using the Indian calendar. Dates emitted from `onChange` are in the Gregorian calendar.
-
-```tsx example
-import {I18nProvider} from '@react-aria/i18n';
-
-function Example() {
-  let [range, setRange] = React.useState(null);
-  return (
-    <I18nProvider locale="hi-IN-u-ca-indian">
-      <RangeCalendar aria-label="Date range" value={range} onChange={setRange} />
-      <p>Start date: {range?.start.toString()}</p>
-      <p>End date: {range?.end.toString()}</p>
-    </I18nProvider>
-  );
-}
-```
-
-### Custom calendar systems
-
-`RangeCalendar` also supports custom calendar systems that implement custom business rules. An example would be a fiscal year calendar that follows a [4-5-4 format](https://nrf.com/resources/4-5-4-calendar), where month ranges don't follow the usual Gregorian calendar.
-
-The `createCalendar` prop accepts a function that returns an instance of the <TypeLink links={i18nDocs.links} type={i18nDocs.exports.Calendar} /> interface. See the [@internationalized/date docs](../internationalized/date/Calendar.html#custom-calendars) for an example implementation.
-
-```tsx import
-import type {AnyCalendarDate} from '@internationalized/date';
-import {CalendarDate, startOfWeek, toCalendar} from '@internationalized/date';
-```
-
-```tsx example
-import {GregorianCalendar} from '@internationalized/date';
-
-function Example() {
-  return <RangeCalendar firstDayOfWeek="sun" createCalendar={() => new Custom454()} />;
-}
-
-class Custom454 extends GregorianCalendar {
-  // See @internationalized/date docs linked above...
-  ///- begin collapse -///
-  weekPattern = [4, 5, 4, 4, 5, 4, 4, 5, 4, 4, 5, 4];
-  getDaysInMonth(date) {
-    return this.weekPattern[date.month - 1] * 7;
-  }
-
-  fromJulianDay(jd: number): CalendarDate {
-    let gregorian = super.fromJulianDay(jd);
-
-    let monthStart = startOfWeek(new CalendarDate(gregorian.year, 1, 1), 'en');
-    for (let months = 0; months < this.weekPattern.length; months++) {
-      let weeksInMonth = this.weekPattern[months];
-      let monthEnd = monthStart.add({weeks: weeksInMonth});
-      if (monthEnd.compare(gregorian) > 0) {
-        let days = gregorian.compare(monthStart);
-        return new CalendarDate(this, monthStart.year, months + 1, days + 1);
-      }
-      monthStart = monthEnd;
-    }
-
-    throw Error('Date is not in any month somehow!');
-  }
-
-  toJulianDay(date: AnyCalendarDate): number {
-    let monthStart = startOfWeek(new CalendarDate(date.year, 1, 1), 'en');
-    for (let month = 1; month < date.month; month++) {
-      monthStart = monthStart.add({weeks: this.weekPattern[month - 1]});
-    }
-
-    let gregorian = monthStart.add({days: date.day - 1});
-    return super.toJulianDay(gregorian);
-  }
-
-  getFormattableMonth(date) {
-    let gregorian = toCalendar(date, new GregorianCalendar());
-    return gregorian.set({month: date.month, day: 1});
-  }
-
-  isEqual(other) {
-    return other instanceof Custom454;
-  }
- ///- end collapse -///
-}
-```
-
-### Validation
-
-By default, `useRangeCalendar` allows selecting any date range. The `minValue` and `maxValue` props can also be used to prevent the user from selecting dates outside a certain range.
-
-This example only accepts dates after today.
-
-```tsx example
-import {today} from '@internationalized/date';
-
-<RangeCalendar aria-label="Trip dates" minValue={today(getLocalTimeZone())} />
-```
-
-### Unavailable dates
-
-`useRangeCalendar` supports marking certain dates as _unavailable_. These dates remain focusable with the keyboard so that navigation is consistent, but cannot be selected by the user. In this example, they are displayed in red. The `isDateUnavailable` prop accepts a callback that is called to evaluate whether each visible date is unavailable.
-
-Note that by default, users may not select non-contiguous ranges, i.e. ranges that contain unavailable dates within them. Once a start date is selected, enabled dates will be restricted to subsequent dates until an unavailable date is hit. See [below](#non-contiguous-ranges) for an example of how to allow non-contiguous ranges.
-
-This example includes multiple unavailable date ranges, e.g. dates when a rental house is not available. The `minValue` prop is also used to prevent selecting dates before today.
-
-```tsx example
-import {today} from '@internationalized/date';
-
-function Example() {
-  let now = today(getLocalTimeZone());
-  let disabledRanges = [
-    [now, now.add({days: 5})],
-    [now.add({days: 14}), now.add({days: 16})],
-    [now.add({days: 23}), now.add({days: 24})],
-  ];
-
-  let isDateUnavailable = (date) => disabledRanges.some((interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0);
-
-  return <RangeCalendar aria-label="Trip dates" minValue={today(getLocalTimeZone())} isDateUnavailable={isDateUnavailable} />
-}
-```
-
-### Non-contiguous ranges
-
-The `allowsNonContiguousRanges` prop enables a range to be selected even if there are unavailable dates in the middle. The value emitted in the `onChange` event will still be a single range with a `start` and `end` property, but unavailable dates will not be displayed as selected. It is up to applications to split the full selected range into multiple as needed for business logic.
-
-This example prevents selecting weekends, but allows selecting ranges that span multiple weeks.
-
-```tsx example
-import {isWeekend} from '@internationalized/date';
-
-function Example() {
-  let {locale} = useLocale();
-
-  return <RangeCalendar aria-label="Time off request" isDateUnavailable={date => isWeekend(date, locale)} allowsNonContiguousRanges />
-}
-```
-
-### Controlling the focused date
-
-By default, the first selected date is focused when a `RangeCalendar` first mounts. If no `value` or `defaultValue` prop is provided, then the current date is focused.  However, `useRangeCalendar` supports controlling which date is focused using the `focusedValue` and `onFocusChange` props. This also determines which month is visible. The `defaultFocusedValue` prop allows setting the initial focused date when the `RangeCalendar` first mounts, without controlling it.
-
-This example focuses July 1, 2021 by default. The user may change the focused date, and the `onFocusChange` event updates the state. Clicking the button resets the focused date back to the initial value.
-
-```tsx example
-import {CalendarDate} from '@internationalized/date';
-
-function Example() {
-  let defaultDate = new CalendarDate(2021, 7, 1);
-  let [focusedDate, setFocusedDate] = React.useState(defaultDate);
-
-  return (
-    <div style={{flexDirection: 'column', alignItems: 'start', gap: 20}}>
-      <button onClick={() => setFocusedDate(defaultDate)}>Reset focused date</button>
-      <RangeCalendar focusedValue={focusedDate} onFocusChange={setFocusedDate} />
-    </div>
-  );
-}
-```
-
-### Disabled
-
-The `isDisabled` boolean prop makes the RangeCalendar disabled. Cells cannot be focused or selected.
-
-```tsx example
-<RangeCalendar aria-label="Trip dates" isDisabled />
-```
-
-### Read only
-
-The `isReadOnly` boolean prop makes the RangeCalendar's value immutable. Unlike `isDisabled`, the RangeCalendar remains focusable.
-
-```tsx example
-<RangeCalendar aria-label="Trip dates" value={{start: today(getLocalTimeZone()), end: today(getLocalTimeZone()).add({ weeks: 1 })}} isReadOnly />
-```
-
-### Custom first day of week
-
-By default, the first day of the week is automatically set based on the current locale. This can be changed by setting the `firstDayOfWeek` prop to `'sun'`, `'mon'`, `'tue'`, `'wed'`, `'thu'`, `'fri'`, or `'sat'`.
-
-```tsx example
-<RangeCalendar aria-label="Trip dates" firstDayOfWeek="mon" />
-```
-
-### Labeling
-
-An aria-label must be provided to the `RangeCalendar` for accessibility. If it is labeled by a separate element, an `aria-labelledby` prop must be provided using the `id` of the labeling element instead.
-
-### Internationalization
-
-In order to internationalize a `RangeCalendar`, a localized string should be passed to the `aria-label` prop. For languages that are read right-to-left (e.g. Hebrew and Arabic), keyboard navigation is automatically flipped. Ensure that your CSS accounts for this as well. Dates are automatically formatted using the current locale.
-
-## Advanced topics
-
-### Reducing bundle size
-
-In the example above, the <TypeLink links={i18nDocs.links} type={i18nDocs.exports.createCalendar} /> function from the [@internationalized/date](../internationalized/date/) package is passed to the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useRangeCalendarState} /> hook. This function receives a [calendar identifier](../internationalized/date/Calendar.html#calendar-identifiers) string, and provides <TypeLink links={i18nDocs.links} type={i18nDocs.exports.Calendar} /> instances to React Stately, which are used to implement date manipulation.
-
-By default, this includes [all calendar systems](../internationalized/date/Calendar.html#implementations) supported by `@internationalized/date`. However, if your application supports a more limited set of regions, or you know you will only be picking dates in a certain calendar system, you can reduce your bundle size by providing your own implementation of `createCalendar` that includes a subset of these `Calendar` implementations.
-
-For example, if your application only supports Gregorian dates, you could implement a `createCalendar` function like this:
-
-```jsx
-import {useRangeCalendarState} from '@react-stately/datepicker';
-import {useLocale} from '@react-aria/i18n';
-import {GregorianCalendar} from '@internationalized/date';
-
-function createCalendar(identifier) {
-  switch (identifier) {
-    case 'gregory':
-      return new GregorianCalendar();
-    default:
-      throw new Error(`Unsupported calendar ${identifier}`);
-  }
-}
-
-function RangeCalendar(props) {
-  let {locale} = useLocale();
-  let state = useRangeCalendarState({
-    ...props,
-    locale,
-    createCalendar
-  });
-
-  // ...
-}
-```
-
-This way, only `GregorianCalendar` is imported, and the other calendar implementations can be tree-shaken.
-
-See the [Calendar](../internationalized/date/Calendar.html) documentation in `@internationalized/date` to learn more about the supported calendar systems, and a list of string identifiers.
diff --git a/packages/react-aria/docs/checkbox/buttongroup-example.png b/packages/react-aria/docs/checkbox/buttongroup-example.png
deleted file mode 100644
index 91b6e9a8df2..00000000000
Binary files a/packages/react-aria/docs/checkbox/buttongroup-example.png and /dev/null differ
diff --git a/packages/react-aria/docs/checkbox/tailwind-example.png b/packages/react-aria/docs/checkbox/tailwind-example.png
deleted file mode 100644
index 533cebc207b..00000000000
Binary files a/packages/react-aria/docs/checkbox/tailwind-example.png and /dev/null differ
diff --git a/packages/react-aria/docs/checkbox/useCheckbox.mdx b/packages/react-aria/docs/checkbox/useCheckbox.mdx
deleted file mode 100644
index 080f82e8971..00000000000
--- a/packages/react-aria/docs/checkbox/useCheckbox.mdx
+++ /dev/null
@@ -1,254 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/checkbox';
-import hiddenDocs from 'docs:@react-aria/visually-hidden';
-import focusDocs from 'docs:@react-aria/focus';
-import statelyDocs from 'docs:@react-stately/toggle';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import {Keyboard} from '@react-spectrum/text';
-import packageData from '@react-aria/checkbox/package.json';
-import Anatomy from './checkbox-anatomy.svg';
-import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
-import tailwindPreview from 'url:./tailwind-example.png';
-
----
-category: Forms
-keywords: [checkbox, input, aria]
----
-
-# useCheckbox
-
-<PageDescription>{docs.exports.useCheckbox.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useCheckbox']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useCheckbox} links={docs.links} />
-
-## Features
-
-Checkboxes can be built with the [&lt;input&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
-HTML element, but this can be difficult to style. `useCheckbox` helps achieve accessible checkboxes
-that can be styled as needed.
-
-* Built with a native HTML `<input>` element, which can be optionally visually
-  hidden to allow custom styling
-* Full support for browser features like form autofill
-* Keyboard focus management and cross browser normalization
-* Labeling support for assistive technology
-* Indeterminate state support
-
-## Anatomy
-
-<Anatomy />
-
-A checkbox consists of a visual selection indicator and a label. Checkboxes support three
-selection states: checked, unchecked, and indeterminate. Users may click or touch a checkbox
-to toggle the selection state, or use the <Keyboard>Tab</Keyboard> key to navigate to it and the <Keyboard>Space</Keyboard> key to toggle it.
-
-`useCheckbox` returns props to be spread onto its input element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useCheckbox.return.id].properties} />
-</TypeContext.Provider>
-
-Selection state is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useToggleState} />
-hook in `@react-stately/toggle`. The state object should be passed as an option to `useCheckbox`.
-
-In most cases, checkboxes should have a visual label. If the checkbox does not have a visible label,
-an `aria-label` or `aria-labelledby` prop must be passed instead to identify the element to assistive
-technology.
-
-## Example
-
-```tsx example
-import {useCheckbox} from '@react-aria/checkbox';
-import {useToggleState} from '@react-stately/toggle';
-
-function Checkbox(props) {
-  let {children} = props;
-  let state = useToggleState(props);
-  let ref = React.useRef(null);
-  let {inputProps, labelProps} = useCheckbox(props, state, ref);
-
-  return (
-    <label {...labelProps} style={{display: 'block'}}>
-      <input {...inputProps} ref={ref} />
-      {children}
-    </label>
-  );
-}
-
-<Checkbox>Unsubscribe</Checkbox>
-```
-
-## Styling
-
-To build a custom styled checkbox, you can make the native input element visually hidden.
-This is possible using the &lt;<TypeLink links={hiddenDocs.links} type={hiddenDocs.exports.VisuallyHidden} />&gt;
-utility component from `@react-aria/visually-hidden`. It is still in the DOM and accessible to
-assistive technology, but invisible. This example uses SVG to build the visual checkbox,
-which is hidden from screen readers with `aria-hidden`.
-
-For keyboard accessibility, a focus ring is important to indicate which element has keyboard focus.
-This is implemented with the <TypeLink links={focusDocs.links} type={focusDocs.exports.useFocusRing} />
-hook from `@react-aria/focus`. When `isFocusVisible` is true, an extra SVG element is
-rendered to indicate focus. The focus ring is only visible when the user is interacting
-with a keyboard, not with a mouse or touch.
-
-```tsx example export=true
-import {VisuallyHidden} from '@react-aria/visually-hidden';
-import {useFocusRing} from '@react-aria/focus';
-import {mergeProps} from '@react-aria/utils';
-
-function Checkbox(props) {
-  let state = useToggleState(props);
-  let ref = React.useRef(null);
-  let {inputProps, labelProps} = useCheckbox(props, state, ref);
-  let {isFocusVisible, focusProps} = useFocusRing();
-  let isSelected = state.isSelected && !props.isIndeterminate;
-
-  return (
-    <label {...labelProps} style={{display: 'flex', alignItems: 'center', opacity: props.isDisabled ? 0.4 : 1}}>
-      <VisuallyHidden>
-        <input {...mergeProps(inputProps, focusProps)} ref={ref} />
-      </VisuallyHidden>
-      <svg
-        width={24}
-        height={24}
-        aria-hidden="true"
-        style={{marginRight: 4}}>
-        <rect
-          x={isSelected ? 4 : 5}
-          y={isSelected ? 4 : 5}
-          width={isSelected ? 16 : 14}
-          height={isSelected ? 16 : 14}
-          fill={isSelected ? 'orange' : 'none'}
-          stroke={isSelected ? 'none' : 'gray'}
-          strokeWidth={2}/>
-        {isSelected &&
-          <path
-            transform="translate(7 7)"
-            d={`M3.788 9A.999.999 0 0 1 3 8.615l-2.288-3a1 1 0 1 1
-            1.576-1.23l1.5 1.991 3.924-4.991a1 1 0 1 1 1.576 1.23l-4.712
-            6A.999.999 0 0 1 3.788 9z`} />
-        }
-        {props.isIndeterminate &&
-          <rect x={7} y={11} width={10} height={2} fill="gray" />
-        }
-        {isFocusVisible &&
-          <rect
-            x={1}
-            y={1}
-            width={22}
-            height={22}
-            fill="none"
-            stroke="orange"
-            strokeWidth={2} />
-        }
-      </svg>
-      {props.children}
-    </label>
-  );
-}
-
-<Checkbox>Unsubscribe</Checkbox>
-```
-
-## Styled examples
-
-<ExampleCard
-  url="https://codesandbox.io/s/bold-river-0v44z6?file=/src/Checkbox.tsx"
-  preview={tailwindPreview}
-  title="Tailwind CSS"
-  description="An animated Checkbox built with Tailwind and React Aria." />
-
-## Usage
-
-The following examples show how to use the `Checkbox` component created in the above example.
-
-### Default value
-
-Checkboxes are not selected by default. The `defaultSelected` prop can be used to set the default state.
-
-```tsx example
-<Checkbox defaultSelected>Subscribe</Checkbox>
-```
-
-### Controlled value
-
-The `isSelected` prop can be used to make the selected state controlled. The `onChange` event is fired when the user presses the checkbox, and receives the new value.
-
-```tsx example
-function Example() {
-  let [selected, setSelection] = React.useState(false);
-
-  return (
-    <>
-      <Checkbox isSelected={selected} onChange={setSelection}>
-        Subscribe
-      </Checkbox>
-      <p>{`You are ${selected ? 'subscribed' : 'unsubscribed'}`}</p>
-    </>
-  );
- }
-```
-
-### Indeterminate
-
-A Checkbox can be in an indeterminate state, controlled using the `isIndeterminate` prop.
-This overrides the appearance of the Checkbox, whether selection is controlled or uncontrolled.
-The Checkbox will visually remain indeterminate until the `isIndeterminate` prop is set to false, regardless of user interaction.
-
-```tsx example
-<Checkbox isIndeterminate>Subscribe</Checkbox>
-```
-
-### Disabled
-
-Checkboxes can be disabled using the `isDisabled` prop.
-
-```tsx example
-<Checkbox isDisabled>Subscribe</Checkbox>
-```
-
-### Read only
-
-The `isReadOnly` prop makes the selection immutable. Unlike `isDisabled`, the Checkbox remains focusable.
-See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.
-
-```tsx example
-<Checkbox isSelected isReadOnly>Agree</Checkbox>
-```
-
-
-### HTML forms
-
-Checkbox supports the `name` and `value` props for integration with HTML forms.
-
-```tsx example
-<Checkbox name="newsletter" value="subscribe">Subscribe</Checkbox>
-```
-
-## Internationalization
-
-### RTL
-
-In right-to-left languages, the checkbox should be mirrored. The checkbox should be placed on the right
-side of the label. Ensure that your CSS accounts for this.
diff --git a/packages/react-aria/docs/checkbox/useCheckboxGroup.mdx b/packages/react-aria/docs/checkbox/useCheckboxGroup.mdx
deleted file mode 100644
index dbf7c32fa71..00000000000
--- a/packages/react-aria/docs/checkbox/useCheckboxGroup.mdx
+++ /dev/null
@@ -1,303 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/checkbox';
-import hiddenDocs from 'docs:@react-aria/visually-hidden';
-import focusDocs from 'docs:@react-aria/focus';
-import statelyDocs from 'docs:@react-stately/checkbox';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import {Keyboard} from '@react-spectrum/text';
-import packageData from '@react-aria/checkbox/package.json';
-import Anatomy from './checkboxgroup-anatomy.svg';
-import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
-import buttongroupPreview from 'url:./buttongroup-example.png';
-
----
-category: Forms
-keywords: [checkbox, input, aria]
-after_version: 3.1.0
----
-
-# useCheckboxGroup
-
-<PageDescription>{docs.exports.useCheckboxGroup.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useCheckboxGroup', 'useCheckboxGroupItem']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useCheckboxGroup} links={docs.links} />
-<FunctionAPI function={docs.exports.useCheckboxGroupItem} links={docs.links} />
-
-## Features
-
-Checkbox groups can be built in HTML with the
-[&lt;fieldset&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)
-and [&lt;input&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) elements,
-however these can be difficult to style. `useCheckboxGroup` and `useCheckboxGroupItem` help achieve accessible
-checkbox groups that can be styled as needed.
-
-* Checkbox groups are exposed to assistive technology via ARIA
-* Each checkbox is built with a native HTML `<input>` element, which can be optionally visually
-  hidden to allow custom styling
-* Full support for browser features like form autofill and validation
-* Keyboard focus management and cross browser normalization
-* Group and checkbox labeling support for assistive technology
-
-## Anatomy
-
-<Anatomy />
-
-A checkbox group consists of a set of checkboxes, and a label. Each checkbox
-includes a label and a visual selection indicator. Zero or more checkboxes
-within the group can be selected at a time. Users may click or touch a checkbox
-to select it, or use the <Keyboard>Tab</Keyboard> key to navigate to it
-and the <Keyboard>Space</Keyboard> key to toggle it.
-
-`useCheckboxGroup` returns props for the group and its label, which you should spread
-onto the appropriate element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useCheckboxGroup.return.id].properties} />
-</TypeContext.Provider>
-
-`useCheckboxGroupItem` returns props for an individual checkbox:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useCheckboxGroupItem.return.id].properties} />
-</TypeContext.Provider>
-
-Selection state is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useCheckboxGroupState} />
-hook in `@react-stately/checkbox`. The state object should be passed as an option to `useCheckboxGroup`
-and `useCheckboxGroupItem`.
-
-Individual checkboxes must have a visual label. If the checkbox group does not have a visible label,
-an `aria-label` or `aria-labelledby` prop must be passed instead to identify the element to assistive
-technology.
-
-**Note:** `useCheckboxGroupItem` should only be used when it is contained within a checkbox group. For a
-standalone checkbox, use the [useCheckbox](../Checkbox/useCheckbox.html) hook instead.
-
-## Example
-
-This example uses native input elements for the checkboxes, and React context to share state from the group
-to each checkbox. An HTML `<label>` element wraps the native input and the text to provide an implicit label
-for the checkbox.
-
-```tsx example export=true
-import {useCheckboxGroup, useCheckboxGroupItem} from '@react-aria/checkbox';
-import {useCheckboxGroupState} from '@react-stately/checkbox';
-
-let CheckboxGroupContext = React.createContext(null);
-
-function CheckboxGroup(props) {
-  let {children, label, description} = props;
-  let state = useCheckboxGroupState(props);
-  let {groupProps, labelProps, descriptionProps, errorMessageProps, isInvalid, validationErrors} = useCheckboxGroup(props, state);
-
-  return (
-    <div {...groupProps}>
-      <span {...labelProps}>{label}</span>
-      <CheckboxGroupContext.Provider value={state}>
-        {children}
-      </CheckboxGroupContext.Provider>
-      {description && <div {...descriptionProps} style={{fontSize: 12}}>{description}</div>}
-      {isInvalid &&
-        <div {...errorMessageProps} style={{color: 'red', fontSize: 12}}>{validationErrors.join(' ')}</div>
-      }
-    </div>
-  );
-}
-
-function Checkbox(props) {
-  let {children} = props;
-  let state = React.useContext(CheckboxGroupContext);
-  let ref = React.useRef(null);
-  let {inputProps, labelProps} = useCheckboxGroupItem(props, state, ref);
-
-  let isDisabled = state.isDisabled || props.isDisabled;
-  let isSelected = state.isSelected(props.value);
-
-  return (
-    <label
-      {...labelProps}
-      style={{
-        display: 'block',
-        color: (isDisabled && 'var(--gray)') || (isSelected && 'var(--blue)'),
-      }}>
-      <input {...inputProps} ref={ref} />
-      {children}
-    </label>
-  );
-}
-
-<CheckboxGroup label="Favorite sports">
-  <Checkbox value="soccer" isDisabled>Soccer</Checkbox>
-  <Checkbox value="baseball">Baseball</Checkbox>
-  <Checkbox value="basketball">Basketball</Checkbox>
-</CheckboxGroup>
-```
-
-## Styling
-
-See the [useCheckbox](../Checkbox/useCheckbox.html#styling) docs for details on how to customize the styling of checkbox elements.
-
-## Styled examples
-
-<ExampleCard
-  url="https://codesandbox.io/s/magical-bose-l7z36b?file=/src/ButtonGroup.js"
-  preview={buttongroupPreview}
-  title="Button Group"
-  description="A multi-selectable segmented ButtonGroup component." />
-
-## Usage
-
-The following examples show how to use the `CheckboxGroup` component created in the above example.
-
-### Default value
-
-An initial, uncontrolled value can be provided to the CheckboxGroup using the `defaultValue` prop, which accepts an array of selected items that map to the
-`value` prop on each Checkbox.
-
-```tsx example
-<CheckboxGroup label="Favorite sports (uncontrolled)" defaultValue={['soccer', 'baseball']}>
-  <Checkbox value="soccer">Soccer</Checkbox>
-  <Checkbox value="baseball">Baseball</Checkbox>
-  <Checkbox value="basketball">Basketball</Checkbox>
-</CheckboxGroup>
-```
-
-### Controlled value
-
-A controlled value can be provided using the `value` prop, which accepts an array of selected items, which map to the
-`value` prop on each Checkbox. The `onChange` event is fired when the user checks or unchecks an option. It receives a new array
-containing the updated selected values.
-
-```tsx example
-function Example() {
-  let [selected, setSelected] = React.useState(['soccer', 'baseball']);
-
-  return (
-    <CheckboxGroup label="Favorite sports (controlled)" value={selected} onChange={setSelected}>
-      <Checkbox value="soccer">Soccer</Checkbox>
-      <Checkbox value="baseball">Baseball</Checkbox>
-      <Checkbox value="basketball">Basketball</Checkbox>
-    </CheckboxGroup>
-  );
-}
-```
-
-### Description
-
-The `description` prop can be used to associate additional help text with a checkbox group.
-
-```tsx example
-<CheckboxGroup label="Favorite sports" description="Select your favorite sports.">
-  <Checkbox value="soccer">Soccer</Checkbox>
-  <Checkbox value="baseball">Baseball</Checkbox>
-  <Checkbox value="basketball">Basketball</Checkbox>
-</CheckboxGroup>
-```
-
-### Group validation
-
-CheckboxGroup supports the `isRequired` prop to ensure the user selects at least one item, as well as custom client and server-side validation. Individual checkboxes also support validation, and errors from all checkboxes are aggregated at the group level. CheckboxGroup can also be integrated with other form libraries. See the [Forms](../forms) guide to learn more.
-
-When a CheckboxGroup has the `validationBehavior="native"` prop, validation errors block form submission. The `isRequired` prop at the `CheckboxGroup` level requires that at least one item is selected. To display validation errors, use the `validationErrors` and `errorMessageProps` returned by `useCheckboxGroup`. This allows you to render error messages from all of the above sources with consistent custom styles.
-
-```tsx example
-<form>
-  <CheckboxGroup
-    label="Sandwich condiments"
-    name="condiments"
-    /*- begin highlight -*/
-    isRequired
-    validationBehavior="native"
-    /*- end highlight -*/
-  >
-    <Checkbox value="lettuce">Lettuce</Checkbox>
-    <Checkbox value="tomato">Tomato</Checkbox>
-    <Checkbox value="onion">Onion</Checkbox>
-    <Checkbox value="sprouts">Sprouts</Checkbox>
-  </CheckboxGroup>
-  <input type="submit" style={{marginTop: 8}} />
-</form>
-```
-
-### Individual Checkbox validation
-
-To require that specific checkboxes are checked, set the `isRequired` prop at the `Checkbox` level instead of the `CheckboxGroup`. The following example shows how to require that all items are selected.
-
-```tsx example
-<form>
-  <CheckboxGroup label="Agree to the following" validationBehavior="native">
-    {/*- begin highlight -*/}
-    <Checkbox value="terms" isRequired>Terms and conditions</Checkbox>
-    <Checkbox value="privacy" isRequired>Privacy policy</Checkbox>
-    <Checkbox value="cookies" isRequired>Cookie policy</Checkbox>
-    {/*- end highlight -*/}
-  </CheckboxGroup>
-  <input type="submit" style={{marginTop: 8}} />
-</form>
-```
-
-### Disabled
-
-The entire CheckboxGroup can be disabled with the `isDisabled` prop.
-
-```tsx example
-<CheckboxGroup label="Favorite sports" isDisabled>
-  <Checkbox value="soccer">Soccer</Checkbox>
-  <Checkbox value="baseball">Baseball</Checkbox>
-  <Checkbox value="basketball">Basketball</Checkbox>
-</CheckboxGroup>
-```
-
-To disable an individual checkbox, pass `isDisabled` to the `Checkbox` instead.
-
-```tsx example
-<CheckboxGroup label="Favorite sports">
-  <Checkbox value="soccer">Soccer</Checkbox>
-  <Checkbox value="baseball" isDisabled>Baseball</Checkbox>
-  <Checkbox value="basketball">Basketball</Checkbox>
-</CheckboxGroup>
-```
-
-### Read only
-
-The `isReadOnly` prop makes the selection immutable. Unlike `isDisabled`, the CheckboxGroup remains focusable.
-See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.
-
-```tsx example
-<CheckboxGroup label="Favorite sports" defaultValue={['baseball']} isReadOnly>
-  <Checkbox value="soccer">Soccer</Checkbox>
-  <Checkbox value="baseball">Baseball</Checkbox>
-  <Checkbox value="basketball">Basketball</Checkbox>
-</CheckboxGroup>
-```
-
-### HTML forms
-
-CheckboxGroup supports the `name` prop, paired with the Checkbox `value` prop, for integration with HTML forms.
-
-```tsx example
-<CheckboxGroup label="Favorite sports" name="sports">
-  <Checkbox value="soccer">Soccer</Checkbox>
-  <Checkbox value="baseball">Baseball</Checkbox>
-  <Checkbox value="basketball">Basketball</Checkbox>
-</CheckboxGroup>
-```
diff --git a/packages/react-aria/docs/color/useColorArea.mdx b/packages/react-aria/docs/color/useColorArea.mdx
deleted file mode 100644
index 0c33c341571..00000000000
--- a/packages/react-aria/docs/color/useColorArea.mdx
+++ /dev/null
@@ -1,703 +0,0 @@
-{/* Copyright 2022 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import docs from 'docs:@react-aria/color';
-import statelyDocs from 'docs:@react-stately/color';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/color/package.json';
-import Anatomy from './ColorAreaAnatomy.svg';
-
----
-category: Color
-keywords: [color area, color picker, aria]
----
-
-# useColorArea
-
-<PageDescription>{docs.exports.useColorArea.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useColorArea']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/slider/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useColorArea} links={docs.links} />
-
-## Features
-
-The [&lt;input type="color"&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color) HTML element
-can be used to build a color picker, however it is very inconsistent across browsers and operating systems and consists
-of a complete color picker rather than a color area. `useColorArea` helps achieve accessible and
-touch-friendly color areas that can be styled as needed.
-
-* Support for adjusting two-channel values of an HSL, HSB or RGB color value
-* Support for mouse, touch, and keyboard via the [useMove](../useMove) hook
-* Multi-touch support
-* Pressing on the color area background moves the thumb to that position
-* Supports using the arrow keys, for changing value by step, as well as shift + arrow key, page up/down, home, and end keys, for changing the value by page step.
-* Support for disabling the color area
-* Prevents text selection while dragging
-* Exposed to assistive technology as a `2D slider` element via ARIA
-* Uses two hidden native input elements within a group to support touch screen readers
-* Automatic ARIA labeling using the localized channel names by default
-* Support for mirroring in RTL locales
-
-## Anatomy
-
-<Anatomy
-  role="img"
-  aria-label="Color area anatomy diagram: Shows a color area component with labels pointing to its parts, including the area, and thumb elements." />
-
-A color area consists of a rectangular background area that provides, using a two-dimensional gradient,
-a visual representation of the range of color values from which a user can select, and a thumb that the user can drag
-to change the selected color value. Two visually hidden `<input>` elements are used to represent the color channel
-values to assistive technologies.
-
-`useColorArea` returns five sets of props that you should spread onto the appropriate elements:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useColorArea.return.id].properties} />
-</TypeContext.Provider>
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useColorAreaState} />
-hook from `@react-stately/color`. The state object should be passed as an option to `useColorArea`.
-
-By default, `useColorArea` provides an `aria-label` for the localized string "Color Picker",
-which labels the visually hidden `<input>` elements for the two color channels, or on mobile devices,
-the group containing them. If you wish to override this with a more specific label, an `aria-label` or
-`aria-labelledby` prop may be passed to further to identify the element to assistive technologies.
-
-The `aria-valuetext` for each `<input>` will include the localized color channel name and current value for each
-channel.
-
-## Example
-
-This example shows how to build a color area with a draggable thumb to adjust two color channel values of a color. Styling for
-the background gradient and positioning of the thumb are provided by `useColorArea` in the returned props for each element.
-The two `<input>` elements inside the thumb represent the color channel values to assistive technologies, and are hidden
-from view. The thumb also uses the
-[useFocusRing](../useFocusRing) hook to grow in size when it is keyboard focused (try tabbing to it).
-
-```tsx example export=true
-import {useColorArea} from '@react-aria/color';
-import {useColorAreaState} from '@react-stately/color';
-import {useFocusRing} from '@react-aria/focus';
-
-const SIZE = 192;
-const FOCUSED_THUMB_SIZE = 28;
-const THUMB_SIZE = 20;
-const BORDER_RADIUS = 4;
-
-function ColorArea(props) {
-  let inputXRef = React.useRef(null);
-  let inputYRef = React.useRef(null);
-  let containerRef = React.useRef(null);
-
-  let state = useColorAreaState(props);
-
-  let {isDisabled} = props;
-
-  let {
-    colorAreaProps,
-    xInputProps,
-    yInputProps,
-    thumbProps
-  } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);
-
-  let {focusProps, isFocusVisible} = useFocusRing();
-
-  return (
-    <div
-      ref={containerRef}
-      {...colorAreaProps}
-      style={{
-        ...colorAreaProps.style,
-        width: SIZE,
-        height: SIZE,
-        borderRadius: BORDER_RADIUS,
-        background: isDisabled ? 'rgb(142, 142, 142)' : colorAreaProps.style.background,
-        opacity: isDisabled ? 0.3 : undefined
-      }}>
-      <div
-        {...thumbProps}
-        style={{
-          ...thumbProps.style,
-          background: isDisabled ? 'rgb(142, 142, 142)' : state.getDisplayColor().toString('css'),
-          border: `2px solid ${isDisabled ? 'rgb(142, 142, 142)' : 'white'}`,
-          borderRadius: '50%',
-          boxShadow: '0 0 0 1px black, inset 0 0 0 1px black',
-          boxSizing: 'border-box',
-          height: isFocusVisible ? FOCUSED_THUMB_SIZE + 4 : THUMB_SIZE,
-          width: isFocusVisible ? FOCUSED_THUMB_SIZE + 4 : THUMB_SIZE
-        }}>
-        <input ref={inputXRef} {...xInputProps} {...focusProps} />
-        <input ref={inputYRef} {...yInputProps} {...focusProps} />
-      </div>
-    </div>
-  );
-};
-
-<ColorArea />
-```
-
-## Usage
-
-The following examples show how to use the `ColorArea` component created in the above example.
-
-### Uncontrolled
-
-By default, color area is uncontrolled, with a default value of white using the RGB color space (`rgb(255, 255, 255)`).
-You can change the default value using the `defaultValue` prop, and the color area will use the color space of the provided value.
-If no `xChannel` or `yChannel` is provided, for the RGB color space, the `red` color channel maps to the horizontal axis or `xChannel`,
-and the `green` color channel maps to the vertical axis or `yChannel`. Similarly, for the HSL and HSB color spaces, the `hue` color
-channel maps to the horizontal axis or `xChannel`, and the `saturation` color channel maps to the vertical axis or `yChannel`.
-
-```tsx example
-<label id="hsb-label-id">x: Hue, y: Saturation</label>
-<ColorArea
-  aria-labelledby="hsb-label-id"
-  defaultValue="hsb(219, 58%, 93%)" />
-```
-
-### Controlled
-
-A color area can be made controlled using the `value` prop.
-The <TypeLink links={statelyDocs.links} type={statelyDocs.exports.parseColor} />
-function is used to parse the initial color from an RGB, HSL or HSB string, stored in state.
-
-The `onChange` prop is used to update the value in the state when the user drags the thumb.
-This is the more common usage because it allows to adjust the third color channel using a separate control,
-like a color slider using the [useColorSlider](../ColorSlider/useColorSlider) hook or a color wheel using the
-[useColorWheel](../ColorWheel/useColorWheel) hook, or to display the color value stored in a state using a preview swatch.
-
-The `onChangeEnd` prop can be used to handle when a user stops dragging the color area.
-
-```tsx example
-import {parseColor} from '@react-stately/color';
-
-function Example() {
-  let [
-    color,
-    setColor
-  ] = React.useState(parseColor('hsba(219, 58%, 93%, 0.75)'));
-  let [
-    endColor,
-    setEndColor
-  ] = React.useState(color);
-  let [
-    xChannel,
-    yChannel,
-    zChannel
-  ] = color.getColorChannels();
-  return (
-    <>
-      <label id="hsb-label-id-1">x: {color.getChannelName(xChannel, 'en-US')}, y: {color.getChannelName(yChannel, 'en-US')}</label>
-      <div
-        style={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          gap: '1rem'
-        }}>
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '1rem'
-          }}>
-          <ColorArea
-            aria-labelledby="hsb-label-id-1"
-            value={color}
-            onChange={setColor}
-            onChangeEnd={setEndColor}
-            xChannel={xChannel}
-            yChannel={yChannel} />
-          <ColorSlider
-            channel={zChannel}
-            value={color}
-            onChange={setColor}
-            onChangeEnd={setEndColor} />
-          <ColorSlider
-            channel="alpha"
-            value={color}
-            onChange={setColor}
-            onChangeEnd={setEndColor} />
-        </div>
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '1rem'
-          }}>
-          <div
-            style={{
-              display: 'flex',
-              gap: '6px'
-            }}>
-            <ColorSwatch
-              color={color.withChannelValue('alpha', 1)}
-              aria-label={`current color swatch: ${color.toString('hsl')}`} />
-            <ColorSwatch
-              color={color}
-              aria-label={`current color swatch with alpha channel: ${color.toString('hsla')}`} />
-          </div>
-          <div
-            style={{
-              display: 'flex',
-              gap: '6px'
-            }}>
-            <ColorSwatch
-              color={endColor.withChannelValue('alpha', 1)}
-              aria-label={`end color swatch: ${endColor.toString('hsb')}`} />
-            <ColorSwatch
-              color={endColor}
-              aria-label={`end color swatch with alpha channel: ${endColor.toString('hsba')}`} />
-          </div>
-        </div>
-      </div>
-      <p>Current color value: {color.toString('hsba')}</p>
-      <p>End color value: {endColor.toString('hsba')}</p>
-    </>
-  );
-}
-```
-
-### ColorSlider
-
-The `ColorSlider` component used in the example above controls the channel value not controlled by the `ColorArea`, in this case, the `brightness` channel, or the `alpha` channel.
-It is built using the [useColorSlider](../ColorSlider/useColorSlider.html) hook, and can be shared with other color components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-  import {useColorSlider} from '@react-aria/color';
-  import {useColorSliderState} from '@react-stately/color';
-  import {VisuallyHidden} from '@react-aria/visually-hidden';
-  import {useLocale} from '@react-aria/i18n';
-  import {useFocusRing} from '@react-aria/focus';
-
-  function ColorSlider(props) {
-    let {locale} = useLocale();
-    let state = useColorSliderState({...props, locale});
-    let trackRef = React.useRef(null);
-    let inputRef = React.useRef(null);
-
-    // Default label to the channel name in the current locale
-    let label = props.label || state.value.getChannelName(props.channel, locale);
-
-    let {trackProps, thumbProps, inputProps, labelProps, outputProps} = useColorSlider({
-      ...props,
-      label,
-      trackRef,
-      inputRef
-    }, state);
-
-    let {focusProps, isFocusVisible} = useFocusRing();
-
-    return (
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          width: SIZE
-        }}>
-        {/* Create a flex container for the label and output element. */}
-        <div style={{display: 'flex', alignSelf: 'stretch'}}>
-          <label {...labelProps}>{label}</label>
-          <output {...outputProps} style={{flex: '1 0 auto', textAlign: 'end'}}>
-            {state.value.formatChannelValue(props.channel, locale)}
-          </output>
-        </div>
-        {/* The track element holds the visible track line and the thumb. */}
-        <div
-          className="color-slider-track"
-          {...trackProps}
-          ref={trackRef}
-          style={{
-            height: FOCUSED_THUMB_SIZE
-          }}>
-          <div className="color-slider-track-background"></div>
-          <div
-            className="color-slider-track-color"
-            style={{
-            ...trackProps.style
-            }}></div>
-          <div
-            className={`color-slider-thumb${isFocusVisible ? ' is-focused' : ''}`}
-            {...thumbProps}
-            style={{
-              ...thumbProps.style
-            }}>
-            <div className="color-slider-thumb-background"></div>
-            <div
-              className="color-slider-thumb-color"
-              style={{
-                background: state.getDisplayColor().toString('css')
-              }}></div>
-            <VisuallyHidden>
-              <input ref={inputRef} {...inputProps} {...focusProps} />
-            </VisuallyHidden>
-          </div>
-        </div>
-      </div>
-    );
-  }
-```
-  <details>
-    <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-  .color-slider-track,
-  .color-slider-track-background,
-  .color-slider-track-color {
-    width: 100%;
-    border-radius: 4px;
-    forced-color-adjust: none;
-    position: relative;
-  }
-
-  .color-slider-track-background,
-  .color-slider-track-color {
-    position: absolute;
-    height: 100%;
-  }
-
-  .color-slider-thumb {
-    position: absolute;
-    top: 14px;
-    border: 2px solid white;
-    box-shadow:
-      0 0 0 1px black,
-      inset 0 0 0 1px black;
-    border-radius: 50%;
-    box-sizing: border-box;
-    width: 20px;
-    height: 20px;
-  }
-
-  .color-slider-thumb.is-focused {
-    width: 32px;
-    height: 32px;
-  }
-
-  .color-slider-track-background,
-  .color-slider-thumb-background {
-    background-size: 16px 16px;
-    background-position:
-      -2px -2px,
-      -2px 6px,
-      6px -10px,
-      -10px -2px;
-    background-color: white;
-    background-image:
-      linear-gradient(-45deg, transparent 75.5%, rgb(188, 188, 188) 75.5%),
-      linear-gradient(45deg, transparent 75.5%, rgb(188, 188, 188) 75.5%),
-      linear-gradient(-45deg, rgb(188, 188, 188) 25.5%, transparent 25.5%),
-      linear-gradient(45deg, rgb(188, 188, 188) 25.5%, transparent 25.5%);
-  }
-
-  .color-slider-thumb-background,
-  .color-slider-thumb-color {
-    position: absolute;
-    border-radius: 50%;
-    width: 100%;
-    height: 100%;
-  }
-```
-  </details>
-</details>
-
-### ColorSwatch
-
-The `ColorSwatch` component used in the example above implements an image preview of the color with the [useColorSwatch](../ColorSwatch/useColorSwatch.html) hook.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useColorSwatch} from '@react-aria/color';
-
-function ColorSwatch(props) {
-  let {colorSwatchProps, color} = useColorSwatch(props);
-
-  return (
-    <span 
-      {...colorSwatchProps}
-      style={{
-        ...colorSwatchProps.style,
-        display: 'inline-block',
-        width: 32,
-        height: 32,
-        borderRadius: 4,
-        background: `linear-gradient(${color}, ${color}),
-          repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`,
-        ...props.style
-      }} />
-  );
-}
-```
-
-</details>
-
-### xChannel and yChannel
-
-The color channel for each axis of a color area can be specified using the `xChannel` and `yChannel` props.
-An array of channel names for a color can be returned using the `color.getColorChannels` method.
-To get a localized channel name to use as a label, you can use the `color.getChannelName` method.
-
-#### RGB
-```tsx example
-import {parseColor} from '@react-stately/color';
-
-function Example() {
-  let [
-    color,
-    setColor
-  ] = React.useState(parseColor('rgb(100, 149, 237)'));
-  let [
-    rChannel,
-    gChannel,
-    bChannel
-  ] = color.getColorChannels();
-  return (
-    <>
-      <div style={{display: 'inline-flex', flexWrap: 'wrap'}}>
-        <div style={{marginRight: '2rem', marginBottom: '2rem'}}>
-          <label id="gbr-label-id-1">x: {color.getChannelName(gChannel, 'en-US')}, y: {color.getChannelName(bChannel, 'en-US')}</label>
-          <ColorArea
-            aria-labelledby="gbr-label-id-1"
-            value={color}
-            onChange={setColor}
-            xChannel={gChannel}
-            yChannel={bChannel} />
-          <ColorSlider
-              channel={rChannel}
-              value={color}
-              onChange={setColor} />
-        </div>
-        <div style={{marginRight: '2rem', marginBottom: '2rem'}}>
-          <label id="brg-label-id-1">x: {color.getChannelName(bChannel, 'en-US')}, y: {color.getChannelName(rChannel, 'en-US')}</label>
-          <ColorArea
-            aria-labelledby="brg-label-id-1"
-            value={color}
-            onChange={setColor}
-            xChannel={bChannel}
-            yChannel={rChannel} />
-          <ColorSlider
-              channel={gChannel}
-              value={color}
-              onChange={setColor} />
-        </div>
-        <div style={{marginRight: '2rem', marginBottom: '2rem'}}>
-          <label id="rgb-label-id-1">x: {color.getChannelName(rChannel, 'en-US')}, y: {color.getChannelName(gChannel, 'en-US')}</label>
-          <ColorArea
-            aria-labelledby="rgb-label-id-1"
-            value={color}
-            onChange={setColor}
-            xChannel={rChannel}
-            yChannel={gChannel} />
-          <ColorSlider
-              channel={bChannel}
-              value={color}
-              onChange={setColor} />
-        </div>
-      </div>
-      <p>Current RGB color value: <ColorSwatch color={color} style={{width: '16px', height: '16px', verticalAlign: 'text-bottom'}} /> {color.toString('rgb')}</p>
-    </>
-  );
-}
-```
-#### HSL
-```tsx example
-import {parseColor} from '@react-stately/color';
-
-function Example() {
-  let [
-    color,
-    setColor
-  ] = React.useState(parseColor('hsl(219, 79%, 66%)'));
-  let [
-    hChannel,
-    sChannel,
-    lChannel
-  ] = color.getColorChannels();
-  return (
-    <>
-      <div style={{display: 'inline-flex', flexWrap: 'wrap'}}>
-        <div style={{marginRight: '2rem', marginBottom: '2rem'}}>
-          <label id="slh-label-id-1">x: {color.getChannelName(sChannel, 'en-US')}, y: {color.getChannelName(lChannel, 'en-US')}</label>
-          <ColorArea
-            aria-labelledby="slh-label-id-1"
-            value={color}
-            onChange={setColor}
-            xChannel={sChannel}
-            yChannel={lChannel} />
-          <ColorSlider
-              channel={hChannel}
-              value={color}
-              onChange={setColor} />
-        </div>
-        <div style={{marginRight: '2rem', marginBottom: '2rem'}}>
-          <label id="lhs-label-id-1">x: {color.getChannelName(hChannel, 'en-US')}, y: {color.getChannelName(lChannel, 'en-US')}</label>
-          <ColorArea
-            aria-labelledby="lhs-label-id-1"
-            value={color}
-            onChange={setColor}
-            xChannel={hChannel}
-            yChannel={lChannel} />
-          <ColorSlider
-              channel={sChannel}
-              value={color}
-              onChange={setColor} />
-        </div>
-        <div style={{marginRight: '2rem', marginBottom: '2rem'}}>
-          <label id="hsl-label-id-1">x: {color.getChannelName(hChannel, 'en-US')}, y: {color.getChannelName(sChannel, 'en-US')}</label>
-          <ColorArea
-            aria-labelledby="hsl-label-id-1"
-            value={color}
-            onChange={setColor}
-            xChannel={hChannel}
-            yChannel={sChannel} />
-          <ColorSlider
-              channel={lChannel}
-              value={color}
-              onChange={setColor} />
-        </div>
-      </div>
-      <p>Current HSL color value: <ColorSwatch color={color} aria-hidden="true" style={{width: '16px', height: '16px', verticalAlign: 'text-bottom'}} /> {color.toString('hsl')}</p>
-    </>
-  );
-}
-```
-#### HSB
-```tsx example
-import {parseColor} from '@react-stately/color';
-
-function Example() {
-  let [
-    color,
-    setColor
-  ] = React.useState(parseColor('hsb(219, 58%, 93%)'));
-  let [
-    hChannel,
-    sChannel,
-    bChannel
-  ] = color.getColorChannels();
-  return (
-    <>
-      <div style={{display: 'inline-flex', flexWrap: 'wrap'}}>
-        <div style={{marginRight: '2rem', marginBottom: '2rem'}}>
-          <label id="sbh-label-id-1">x: {color.getChannelName(sChannel, 'en-US')}, y: {color.getChannelName(bChannel, 'en-US')}</label>
-          <ColorArea
-            aria-labelledby="sbh-label-id-1"
-            value={color}
-            onChange={setColor}
-            xChannel={sChannel}
-            yChannel={bChannel} />
-          <ColorSlider
-              channel={hChannel}
-              value={color}
-              onChange={setColor} />
-        </div>
-        <div style={{marginRight: '2rem', marginBottom: '2rem'}}>
-          <label id="bhs-label-id-1">x: {color.getChannelName(hChannel, 'en-US')}, y: {color.getChannelName(bChannel, 'en-US')}</label>
-          <ColorArea
-            aria-labelledby="bhs-label-id-1"
-            value={color}
-            onChange={setColor}
-            xChannel={hChannel}
-            yChannel={bChannel} />
-          <ColorSlider
-              channel={sChannel}
-              value={color}
-              onChange={setColor} />
-        </div>
-        <div style={{marginRight: '2rem', marginBottom: '2rem'}}>
-          <label id="hsb-label-id-2">x: {color.getChannelName(hChannel, 'en-US')}, y: {color.getChannelName(sChannel, 'en-US')}</label>
-          <ColorArea
-            aria-labelledby="hsb-label-id-2"
-            value={color}
-            onChange={setColor}
-            xChannel={hChannel}
-            yChannel={sChannel} />
-          <ColorSlider
-              channel={bChannel}
-              value={color}
-              onChange={setColor} />
-        </div>
-      </div>
-      <p>Current HSB color value: <ColorSwatch color={color} style={{width: '16px', height: '16px', verticalAlign: 'text-bottom'}} /> {color.toString('hsb')}</p>
-    </>
-  );
-}
-```
-
-### Disabled
-
-A color area can be disabled using the `isDisabled` prop. This prevents the thumb from being focused or dragged.
-It's up to you to style your color area to appear disabled accordingly.
-
-```tsx example
-<ColorArea
-  defaultValue="hsl(0, 100%, 50%)"
-  xChannel="saturation"
-  yChannel="lightness"
-  isDisabled />
-```
-
-### HTML forms
-
-ColorArea supports the `xName` and `yName` props for integration with HTML forms. The values will be submitted as numbers between the minimum and maximum value for the corresponding channel in the X and Y direction.
-
-```tsx example
-<ColorArea xName="red" yName="green" />
-```
-
-## Internationalization
-
-### Labeling
-
-By default, `useColorArea` provides an `aria-label` for the localized string "Color Picker",
-which labels the visually hidden `<input>` elements for the two color channels, or on mobile devices,
-the group containing them. If you wish to override this with a more specific label, an `aria-label` or
-`aria-labelledby` prop may be passed to further to identify the element to assistive technologies.
-For example, for a color area that adjusts a text color you might pass the `aria-label` prop,
-"Text color",  which `useColorArea` will return as the `aria-label` prop "Text color, Color picker". When a custom `aria-label`
-is provided, it should be localized accordingly.
-
-### Role description
-
-In order to communicate to a screen reader user that the color area adjusts in two dimensions,
-`useColorArea` provides an `aria-roledescription`, using the localized string "2D Slider", on each of the
-visually hidden `<input>` elements.
-
-### Value formatting
-
-The `aria-valuetext` of each `<input>` element is formatted according to the user's locale automatically.
-It includes the localized color channel name and current value for each channel, with the channel name
-and value that the `<input>` element controls coming before the channel name and value for the adjacent
-`<input>` element. For example, for an RGB color area where the `xChannel` is "blue", the `yChannel`
-is "green", when the current selected color is yellow (`rgb(255, 255, 0)`), the `<input>` representing the
-blue channel will have `aria-valuetext` to announce as "Blue: 0, Green: 255", and the `<input>`
-representing the green channel will have `aria-valuetext` to announce as "Green: 255, Blue: 0".
-
-### RTL
-
-In right-to-left languages, color areas should be mirrored.
-Orientation of the gradient background, positioning of the thumb,
-and dragging behavior is automatically mirrored by `useColorArea`.
diff --git a/packages/react-aria/docs/color/useColorField.mdx b/packages/react-aria/docs/color/useColorField.mdx
deleted file mode 100644
index 6688c1a4b5f..00000000000
--- a/packages/react-aria/docs/color/useColorField.mdx
+++ /dev/null
@@ -1,157 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/color';
-import statelyDocs from 'docs:@react-stately/color';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/color/package.json';
-import Anatomy from './ColorFieldAnatomy.svg';
-
----
-category: Color
-keywords: [color, input, color picker, aria]
----
-
-# useColorField
-
-<PageDescription>{docs.exports.useColorField.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useColorField']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useColorField} links={docs.links} />
-
-## Features
-
-The [&lt;input type="color"&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color) HTML element
-can be used to build a color picker, however it is very inconsistent across browsers and operating systems and consists
-of a complete color picker rather than a single field for editing a hex value. `useColorField` helps achieve accessible
-color fields that can be styled as needed.
-
-* Support for parsing and formatting a hex color value
-* Validates keyboard entry as the user types so that only valid hex characters are accepted
-* Supports using the arrow keys to increment and decrement the value
-* Exposed to assistive technology as a `textbox` via ARIA
-* Visual and ARIA labeling support
-* Follows the [spinbutton](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/) ARIA pattern
-* Works around bugs in VoiceOver with the spinbutton role
-* Uses an ARIA live region to ensure that value changes are announced
-
-## Anatomy
-
-<Anatomy
-  role="img"
-  aria-label="Color field anatomy diagram: Shows a color field component with labels pointing to its parts, including the input, and label elements." />
-
-A color field consists of an input element and a label. `useColorField` automatically manages
-the relationship between the two elements using the `for` attribute on the `<label>` element
-and the `aria-labelledby` attribute on the `<input>` element.
-
-`useColorField` returns two sets of props that you should spread onto the appropriate element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useColorField.return.id].properties} />
-</TypeContext.Provider>
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useColorFieldState} />
-hook from `@react-stately/color`. The state object should be passed as an option to `useColorField`
-
-If there is no visual label, an `aria-label` or `aria-labelledby` prop must be passed instead
-to identify the element to screen readers.
-
-## Example
-
-```tsx example export=true
-import {useColorField} from '@react-aria/color';
-import {useColorFieldState} from '@react-stately/color';
-
-function ColorField(props) {
-  let state = useColorFieldState(props);
-  let inputRef = React.useRef(null);
-  let {
-    labelProps,
-    inputProps
-  } = useColorField(props, state, inputRef);
-
-  return (
-    <div style={{display: 'inline-flex', flexDirection: 'column'}}>
-      <label {...labelProps}>{props.label}</label>
-      <input {...inputProps} ref={inputRef} />
-    </div>
-  );
-}
-
-<ColorField label="Color" />
-```
-
-## Usage
-
-The following examples show how to use the `ColorField` component created in the above example.
-
-### Uncontrolled
-
-By default, `ColorField` is uncontrolled. You can set a default value using the `defaultValue` prop.
-
-```tsx example
-<ColorField aria-label="Color" defaultValue="#7f007f" />
-```
-
-### Controlled
-
-A `ColorField` can be made controlled. The <TypeLink links={statelyDocs.links} type={statelyDocs.exports.parseColor} />
-function is used to parse the initial color from a hex string, stored in state.  The `value` and `onChange` props
-are used to update the value in state when the edits the value.
-
-```tsx example
-import {parseColor} from '@react-stately/color';
-
-function Example() {
-  let [color, setColor] = React.useState(parseColor('#7f007f'));
-  return (
-    <>
-      <ColorField aria-label="Color" value={color} onChange={setColor} />
-      <p>Current color value: {color.toString('hex')}</p>
-    </>
-  );
-}
-```
-
-### Disabled and read only
-
-A `ColorField` can be disabled using the `isDisabled` prop, and made read only using the `isReadOnly` prop.
-The difference is that read only color fields are focusable but disabled color fields are not.
-
-```tsx example
-<ColorField aria-label="Color" defaultValue="#7f007f" isDisabled />
-<ColorField aria-label="Color" defaultValue="#7f007f" isReadOnly />
-```
-
-### HTML forms
-
-ColorField supports the `name` prop for integration with HTML forms. The value will be submitted to the server as a hex color string.
-
-```tsx example
-<ColorField label="Color" name="color" />
-```
-
-## Internationalization
-
-### RTL
-
-In right-to-left languages, color fields should be mirrored. The label should be right aligned,
-along with the text in the input. Ensure that your CSS accounts for this.
diff --git a/packages/react-aria/docs/color/useColorSlider.mdx b/packages/react-aria/docs/color/useColorSlider.mdx
deleted file mode 100644
index 91bea26cb59..00000000000
--- a/packages/react-aria/docs/color/useColorSlider.mdx
+++ /dev/null
@@ -1,350 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/color';
-import statelyDocs from 'docs:@react-stately/color';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/color/package.json';
-import Anatomy from './ColorSliderAnatomy.svg';
-
----
-category: Color
-keywords: [color slider, color picker, aria]
----
-
-# useColorSlider
-
-<PageDescription>{docs.exports.useColorSlider.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useColorSlider']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/slider/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useColorSlider} links={docs.links} />
-
-## Features
-
-The [&lt;input type="color"&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color) HTML element
-can be used to build a color picker, however it is very inconsistent across browsers and operating systems and consists
-of a complete color picker rather than a single color channel slider. `useColorSlider` helps achieve accessible and
-touch-friendly color sliders that can be styled as needed.
-
-* Support for adjusting a single channel of RGBA, HSLA, and HSBA colors
-* Support for mouse, touch, and keyboard via the [useMove](../useMove) hook
-* Multi-touch support for dragging multiple sliders at once
-* Pressing on the track moves the thumb to that position
-* Supports using the arrow keys, as well as page up/down, home, and end keys
-* Support for both horizontal and vertical orientations
-* Support for disabling the color slider
-* Prevents text selection while dragging
-* Exposed to assistive technology as a `slider` element via ARIA
-* Uses a hidden native input element to support touch screen readers
-* Automatic ARIA labeling using localized channel names by default
-* Support for visually labeling the slider
-* Support for displaying the current value using an `<output>` element
-* Internationalized number formatting based on the color channel type
-* Support for mirroring in RTL locales
-
-## Anatomy
-
-<Anatomy
-  role="img"
-  aria-label="Color slider anatomy diagram: Shows a color slider component with labels pointing to its parts, including the track, thumb, label, and output elements." />
-
-A color slider consists of a track element and a thumb that the user can drag to change a single channel of a color value.
-It may also include optional label and `<output>` elements to display the color channel name and current numeric value, respectively.
-A visually hidden `<input>` element is used to represent the value to assistive technologies.
-
-`useColorSlider` returns props that you should spread onto the appropriate elements:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useColorSlider.return.id].properties} />
-</TypeContext.Provider>
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useColorSliderState} />
-hook from `@react-stately/color`. The state object should be passed as an option to `useColorSlider`
-
-By default, `useColorSlider` provides an `aria-label` for the localized color channel name. If you wish to display a visual
-label, or override this with a more specific label, a `label`, `aria-label` or `aria-labelledby` prop may be passed instead.
-
-## Example
-
-This example shows how to build a horizontal color slider. It also includes a label which can be clicked to focus the thumb.
-Styling for the track background and positioning of the thumb are provided by `useColorSlider` in the returned `style` prop for each element.
-
-If no `label` prop is given, it uses the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.Color} /> object to
-get a localized string for the channel name using the `getChannelName` method. In addition, an `<output>` element is used
-to display the current channel value as text. This is formatted using the Color object's `formatChannelValue` method, which
-formats the value according to the channel type and locale settings.
-
-The visually hidden `<input>` element inside the thumb is used to represent the color slider to assistive technology. 
-The thumb also uses the [useFocusRing](../useFocusRing) hook to grow in size when it is keyboard focused (try tabbing to it).
-
-```tsx example export=true
-import {useColorSlider} from '@react-aria/color';
-import {useColorSliderState} from '@react-stately/color';
-import {useLocale} from '@react-aria/i18n';
-import {useFocusRing} from '@react-aria/focus';
-
-const TRACK_THICKNESS = 28;
-const THUMB_SIZE = 20;
-
-function ColorSlider(props) {
-  let {isDisabled} = props;
-  let {locale} = useLocale();
-  let state = useColorSliderState({...props, locale});
-  let trackRef = React.useRef(null);
-  let inputRef = React.useRef(null);
-
-  // Default label to the channel name in the current locale
-  let label = props.label || state.value.getChannelName(props.channel, locale);
-
-  let {trackProps, thumbProps, inputProps, labelProps, outputProps} = useColorSlider({
-    ...props,
-    label,
-    trackRef,
-    inputRef
-  }, state);
-
-  let {focusProps, isFocusVisible} = useFocusRing();
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: 300
-      }}>
-      {/* Create a flex container for the label and output element. */}
-      <div style={{display: 'flex', alignSelf: 'stretch'}}>
-        <label {...labelProps}>{label}</label>
-        <output {...outputProps} style={{flex: '1 0 auto', textAlign: 'end'}}>
-          {state.value.formatChannelValue(props.channel, locale)}
-        </output>
-      </div>
-      {/* The track element holds the visible track line and the thumb. */}
-      <div
-        {...trackProps}
-        ref={trackRef}
-        style={{
-          ...trackProps.style,
-          height: TRACK_THICKNESS,
-          width: '100%',
-          borderRadius: 4,
-          background: isDisabled ? 'rgb(142, 142, 142)' : trackProps.style.background
-        }}>
-        <div
-          {...thumbProps}
-          style={{
-            ...thumbProps.style,
-            top: TRACK_THICKNESS / 2,
-            background: isDisabled ? 'rgb(142, 142, 142)' : state.getDisplayColor().toString('css'),
-            border: `2px solid ${isDisabled ? 'rgb(142, 142, 142)' : 'white'}`,
-            boxShadow: '0 0 0 1px black, inset 0 0 0 1px black',
-            width: isFocusVisible ? TRACK_THICKNESS + 4 : THUMB_SIZE,
-            height: isFocusVisible ? TRACK_THICKNESS + 4 : THUMB_SIZE,
-            borderRadius: '50%',
-            boxSizing: 'border-box'
-          }}>
-          <input ref={inputRef} {...inputProps} {...focusProps} />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-<ColorSlider channel="hue" defaultValue="hsl(0, 100%, 50%)" />
-```
-
-### Vertical
-
-This example shows how to build a vertical color slider. The main difference from horizontal color sliders is the addition of the
-`orientation: 'vertical'` option to `useColorSlider`. This automatically adjusts the internal positioning and dragging logic.
-Additionally, this example does not have a visible label or `<output>` element. This can be done by simply not using the returned
-`labelProps` and `outputProps`. The color slider will have a default `aria-label` using the localized channel name, which can be overridden
-by passing an `aria-label` prop to `useColorSlider`.
-
-```tsx example
-function ColorSlider(props) {
-  let {locale} = useLocale();
-  let state = useColorSliderState({...props, locale});
-  let trackRef = React.useRef(null);
-  let inputRef = React.useRef(null);
-  let {trackProps, thumbProps, inputProps} = useColorSlider({
-    ...props,
-    orientation: 'vertical',
-    trackRef,
-    inputRef
-  }, state);
-
-  let {focusProps, isFocusVisible} = useFocusRing();
-
-  return (
-    <div
-      style={{
-        height: 200
-      }}>
-      <div
-        {...trackProps}
-        ref={trackRef}
-        style={{
-          ...trackProps.style,
-          width: TRACK_THICKNESS,
-          height: '100%',
-          borderRadius: 4
-        }}>
-        <div
-          {...thumbProps}
-          style={{
-            ...thumbProps.style,
-            left: TRACK_THICKNESS / 2,
-            border: '2px solid white',
-            boxShadow: '0 0 0 1px black, inset 0 0 0 1px black',
-            width: isFocusVisible ? TRACK_THICKNESS + 4 : THUMB_SIZE,
-            height: isFocusVisible ? TRACK_THICKNESS + 4 : THUMB_SIZE,
-            borderRadius: '50%',
-            boxSizing: 'border-box',
-            background: state.getDisplayColor().toString('css')
-          }}>
-          <input ref={inputRef} {...inputProps} {...focusProps} />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-<ColorSlider channel="hue" defaultValue="hsl(0, 100%, 50%)" />
-```
-
-## Usage
-
-The following examples show how to use the `ColorSlider` component created in the above example.
-
-### RGBA
-
-This example shows how you could build an RGBA color picker using four color sliders bound to the same
-color value in state. The <TypeLink links={statelyDocs.links} type={statelyDocs.exports.parseColor} />
-function is used to parse the initial color from a hex value, stored in state. The `value` and `onChange` props
-of `ColorSlider` are used to make the sliders controlled, so that they all update when the color is modified.
-
-```tsx example
-import {parseColor} from '@react-stately/color';
-
-function Example() {
-  let [color, setColor] = React.useState(parseColor('#7f007f'));
-  return (
-    <>
-      <ColorSlider channel="red" value={color} onChange={setColor} />
-      <ColorSlider channel="green" value={color} onChange={setColor} />
-      <ColorSlider channel="blue" value={color} onChange={setColor} />
-      <ColorSlider channel="alpha" value={color} onChange={setColor} />
-    </>
-  );
-}
-```
-
-### HSLA
-
-This example shows how to build a similar color picker to the one above, using HSLA colors instead.
-
-```tsx example
-function Example() {
-  let [color, setColor] = React.useState(parseColor('hsl(0, 100%, 50%)'));
-  return (
-    <>
-      <ColorSlider channel="hue" value={color} onChange={setColor} />
-      <ColorSlider channel="saturation" value={color} onChange={setColor} />
-      <ColorSlider channel="lightness" value={color} onChange={setColor} />
-      <ColorSlider channel="alpha" value={color} onChange={setColor} />
-    </>
-  );
-}
-```
-
-### HSBA
-
-This example shows how to build an HSBA color picker.
-
-```tsx example
-function Example() {
-  let [color, setColor] = React.useState(parseColor('hsb(0, 100%, 50%)'));
-  return (
-    <>
-      <ColorSlider channel="hue" value={color} onChange={setColor} />
-      <ColorSlider channel="saturation" value={color} onChange={setColor} />
-      <ColorSlider channel="brightness" value={color} onChange={setColor} />
-      <ColorSlider channel="alpha" value={color} onChange={setColor} />
-    </>
-  );
-}
-```
-
-### onChangeEnd
-
-The `onChangeEnd` prop can be used to handle when a user stops dragging a color slider, whereas the `onChange`
-prop is called as the user drags.
-
-```tsx example
-function Example() {
-  let [color, setColor] = React.useState(parseColor('#7f007f'));
-  return (
-    <>
-      <ColorSlider channel="red" defaultValue={color} onChangeEnd={setColor} />
-      <p>Current color value: {color.toString('hex')}</p>
-    </>
-  );
-}
-```
-
-### Disabled
-
-A `ColorSlider` can be disabled using the `isDisabled` prop. This prevents the thumb from being focused or dragged.
-It's up to you to style your color slider to appear disabled accordingly.
-
-```tsx example
-<ColorSlider channel="red" defaultValue="#7f007f" isDisabled />
-```
-
-### HTML forms
-
-ColorSlider supports the `name` prop for integration with HTML forms. The value will be submitted as a number between the minimum and maximum value for the displayed channel.
-
-```tsx example
-<ColorSlider
-  defaultValue="#7f0000"
-  channel="red"
-  name="red" />
-```
-
-## Internationalization
-
-### Labeling
-
-By default, a localized string for the channel name is used as the `aria-label` for the `ColorSlider`. When a custom `aria-label`
-or visual `label` is provided, it should be localized accordingly. To get a localized channel name to use as the visual label,
-you can use the `color.getChannelName` method.
-
-### Value formatting
-
-The `aria-valuetext` of the `<input>` element is formatted according to the user's locale automatically. If you wish to display this
-value visually in the `<output>` element, you can use the `color.formatChannelValue` method.
-
-### RTL
-
-In right-to-left languages, color sliders should be mirrored. The label should be right aligned, and the value should be left aligned.
-Ensure that your CSS accounts for this. Positioning of the thumb and dragging behavior is automatically mirrored by `useColorSlider`.
diff --git a/packages/react-aria/docs/color/useColorSwatch.mdx b/packages/react-aria/docs/color/useColorSwatch.mdx
deleted file mode 100644
index f2302b16c2c..00000000000
--- a/packages/react-aria/docs/color/useColorSwatch.mdx
+++ /dev/null
@@ -1,104 +0,0 @@
-{/* Copyright 2024 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/color';
-import statelyDocs from 'docs:@react-stately/color';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/color/package.json';
-
----
-category: Color
-keywords: [color swatch, color picker, aria]
----
-
-# useColorSwatch
-
-<PageDescription>{docs.exports.useColorSwatch.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useColorSwatch']}
-  sourceData={[
-    {type: 'W3C', url: 'https://w3c.github.io/aria/#img'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useColorSwatch} links={docs.links} />
-
-## Features
-
-A color swatch may seem simple to build with a `<div>`, but requires additional semantics and labeling for accessibility.
-
-* **Accessible** – Includes a localized color description for screen reader users (e.g. "dark vibrant blue"). Uses the [img](https://w3c.github.io/aria/#img) role with a custom `aria-roledescription` of "color swatch".
-* **International** – Accessible color description and role description are translated into over 30 languages.
-
-## Anatomy
-
-A color swatch consists of a color preview, which is exposed to assistive technology with a localized color description.
-
-`useColorSwatch` returns props that you should spread onto the color swatch element, along with the parsed color value:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useColorSwatch.return.id].properties} />
-</TypeContext.Provider>
-
-## Example
-
-This example renders a color swatch component, with a checkerboard pattern behind partially transparent colors.
-
-```tsx example export=true
-import {useColorSwatch, AriaColorSwatchProps} from '@react-aria/color';
-
-function ColorSwatch(props: AriaColorSwatchProps) {
-  let {colorSwatchProps, color} = useColorSwatch(props);
-
-  return (
-    <div 
-      {...colorSwatchProps}
-      style={{
-        ...colorSwatchProps.style,
-        width: 32,
-        height: 32,
-        borderRadius: 4,
-        background: `linear-gradient(${color}, ${color}),
-          repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`
-      }} />
-  );
-}
-
-<ColorSwatch color="#f00a" />
-```
-
-## Usage
-
-The following examples show how to use the `ColorSwatch` component created in the above example.
-
-### Value
-
-ColorSwatch accepts a value via the `color` prop. The value should be a color string or <TypeLink links={statelyDocs.links} type={statelyDocs.exports.Color} /> object. This example uses the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.parseColor} /> function to parse a color from an HSL string.
-
-```tsx example
-import {parseColor} from '@react-stately/color';
-
-<ColorSwatch color={parseColor('hsl(35, 100%, 50%)')} />
-```
-
-### Labeling
-
-By default, useColorSwatch includes a localized color description for screen reader users (e.g. "dark vibrant blue") as an `aria-label`. If you have a more specific color name (e.g. Pantone colors), the automatically generated color description can be overridden via the `colorName` prop. An additional label describing the context of the color swatch (e.g. "Background color") can also be provided via the `aria-label` or `aria-labelledby` props.
-
-In the example below, the full accessible name of the color swatch will be "Fire truck red, Background color".
-
-```tsx example
-<ColorSwatch color="#f00" aria-label="Background color" colorName="Fire truck red" />
-```
diff --git a/packages/react-aria/docs/color/useColorWheel.mdx b/packages/react-aria/docs/color/useColorWheel.mdx
deleted file mode 100644
index f90aa9146ec..00000000000
--- a/packages/react-aria/docs/color/useColorWheel.mdx
+++ /dev/null
@@ -1,218 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/color';
-import statelyDocs from 'docs:@react-stately/color';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/color/package.json';
-import Anatomy from './ColorWheelAnatomy.svg';
-
----
-category: Color
-keywords: [color wheel, color picker, aria]
----
-
-# useColorWheel
-
-<PageDescription>{docs.exports.useColorWheel.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useColorWheel']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/slider/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useColorWheel} links={docs.links} />
-
-## Features
-
-The [&lt;input type="color"&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color) HTML element
-can be used to build a color picker, however it is very inconsistent across browsers and operating systems and consists
-of a complete color picker rather than only a hue color wheel. `useColorWheel` helps achieve accessible and
-touch-friendly color wheels that can be styled as needed.
-
-* Support for adjusting the hue of an HSL or HSB color value
-* Support for mouse, touch, and keyboard via the [useMove](../useMove) hook
-* Multi-touch support
-* Pressing on the track moves the thumb to that position
-* Supports using the arrow keys, as well as page up/down, home, and end keys
-* Support for disabling the color wheel
-* Prevents text selection while dragging
-* Exposed to assistive technology as a `slider` element via ARIA
-* Uses a hidden native input element to support touch screen readers
-* Automatic ARIA labeling using the localized channel name by default
-
-## Anatomy
-
-<Anatomy
-  role="img"
-  aria-label="Color wheel anatomy diagram: Shows a color wheel component with labels pointing to its parts, including the track, and thumb elements." />
-
-A color wheel consists of a circular track and a thumb that the user can drag to change the color hue.
-A visually hidden `<input>` element is used to represent the value to assistive technologies.
-
-`useColorWheel` returns three sets of props that you should spread onto the appropriate elements:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useColorWheel.return.id].properties} />
-</TypeContext.Provider>
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useColorWheelState} />
-hook from `@react-stately/color`. The state object should be passed as an option to `useColorWheel`
-
-By default, `useColorWheel` provides an `aria-label` for the localized string "Hue". If you wish to override this
-with a more specific label, an `aria-label` or `aria-labelledby` prop may be passed instead to identify the element
-to assistive technologies.
-
-## Example
-
-This example shows how to build a simple color wheel with a draggable thumb to adjust the hue value of a color. Styling for
-the track background and positioning of the thumb are provided by `useColorWheel` in the returned `style` prop for each element.
-The visually hidden `<input>` element inside the thumb is used to represent the color wheel to assistive technology. The thumb also 
-uses the [useFocusRing](../useFocusRing) hook to grow in size when it is keyboard focused (try tabbing to it).
-
-```tsx example export=true
-import {useColorWheel} from '@react-aria/color';
-import {useColorWheelState} from '@react-stately/color';
-import {useFocusRing} from '@react-aria/focus';
-
-const RADIUS = 100;
-const TRACK_THICKNESS = 28;
-const THUMB_SIZE = 20;
-
-function ColorWheel(props) {
-  let {isDisabled} = props;
-  let state = useColorWheelState(props);
-  let inputRef = React.useRef(null);
-  let {trackProps, inputProps, thumbProps} = useColorWheel({
-    ...props,
-    outerRadius: RADIUS,
-    innerRadius: RADIUS - TRACK_THICKNESS
-  }, state, inputRef);
-
-  let {focusProps, isFocusVisible} = useFocusRing();
-
-  return (
-    <div style={{position: 'relative', display: 'inline-block'}}>
-      <div
-        {...trackProps}
-        style={{
-          ...trackProps.style,
-          background: isDisabled ? 'rgb(142, 142, 142)' : trackProps.style.background
-        }} />
-      <div
-        {...thumbProps}
-        style={{
-          ...thumbProps.style,
-          background: isDisabled ? 'rgb(142, 142, 142)' : state.getDisplayColor().toString('css'),
-          border: `2px solid ${isDisabled ? 'rgb(142, 142, 142)' : 'white'}`,
-          boxShadow: '0 0 0 1px black, inset 0 0 0 1px black',
-          width: isFocusVisible ? TRACK_THICKNESS + 4 : THUMB_SIZE,
-          height: isFocusVisible ? TRACK_THICKNESS + 4 : THUMB_SIZE,
-          borderRadius: '50%',
-          boxSizing: 'border-box'
-        }}>
-        <input {...inputProps} {...focusProps} ref={inputRef} />
-      </div>
-    </div>
-  );
-}
-
-<ColorWheel />
-```
-
-## Usage
-
-The following examples show how to use the `ColorWheel` component created in the above example.
-
-### Uncontrolled
-
-By default, `ColorWheel` is uncontrolled with a default value of red (hue = 0˚). You can change the
-default value using the `defaultValue` prop.
-
-```tsx example
-<ColorWheel defaultValue="hsl(80, 100%, 50%)" />
-```
-
-### Controlled
-
-A `ColorWheel` can be made controlled using the `value` prop. The <TypeLink links={statelyDocs.links} type={statelyDocs.exports.parseColor} />
-function is used to parse the initial color from an HSL string, stored in state. The `onChange` prop
-is used to update the value in state when the user drags the thumb.
-
-```tsx example
-import {parseColor} from '@react-stately/color';
-
-function Example() {
-  let [color, setColor] = React.useState(parseColor('hsl(0, 100%, 50%)'));
-  return (
-    <>
-      <ColorWheel value={color} onChange={setColor} />
-      <p>Current color value: {color.toString('hsl')}</p>
-    </>
-  );
-}
-```
-
-### onChangeEnd
-
-The `onChangeEnd` prop can be used to handle when a user stops dragging the color wheel, whereas the `onChange`
-prop is called as the user drags.
-
-```tsx example
-function Example() {
-  let [color, setColor] = React.useState(parseColor('hsl(0, 100%, 50%)'));
-  return (
-    <>
-      <ColorWheel defaultValue={color} onChangeEnd={setColor} />
-      <p>Current color value: {color.toString('hsl')}</p>
-    </>
-  );
-}
-```
-
-### Disabled
-
-A `ColorWheel` can be disabled using the `isDisabled` prop. This prevents the thumb from being focused or dragged.
-It's up to you to style your color wheel to appear disabled accordingly.
-
-```tsx example
-<ColorWheel defaultValue="hsl(80, 100%, 50%)" isDisabled />
-```
-
-### HTML forms
-
-ColorWheel supports the `name` prop for integration with HTML forms. The value will be submitted as a number between 0 and 360 degrees.
-
-```tsx example
-<ColorWheel name="hue" />
-```
-
-## Internationalization
-
-### Labeling
-
-By default, a localized string for the "hue" channel name is used as the `aria-label` for the `ColorWheel`. When a custom `aria-label`
-is provided, it should be localized accordingly. To get a localized channel name to use as a visual label,
-you can use the `color.getChannelName` method.
-
-### Value formatting
-
-The `aria-valuetext` of the `<input>` element is formatted according to the user's locale automatically. If you wish to display this
-value visually, you can use the `color.formatChannelValue` method.
-
-### RTL
-
-Color wheels should not be mirrored in right-to-left languages.
diff --git a/packages/react-aria/docs/combobox/anatomy.svg b/packages/react-aria/docs/combobox/anatomy.svg
deleted file mode 100644
index 14239ca90b0..00000000000
--- a/packages/react-aria/docs/combobox/anatomy.svg
+++ /dev/null
@@ -1,102 +0,0 @@
-<svg style="max-height: 306px; background: var(--anatomy-gray-100); padding: 32px; margin-bottom: 16px; width: calc(100% - 64px); border-radius: var(--anatomy-radius);" viewBox="45 0 512 306">
-  <defs>
-    <clipPath id="a">
-      <rect width="5" height="30.5" fill="none" />
-    </clipPath>
-  </defs>
-  <g transform="translate(-193 -34)">
-    <g transform="translate(-928 -484)">
-      <g transform="translate(1172 587)" fill="var(--anatomy-gray-50)" stroke="#2680eb" stroke-width="1">
-        <path d="M5,0H186a0,0,0,0,1,0,0V40a0,0,0,0,1,0,0H5a5,5,0,0,1-5-5V5A5,5,0,0,1,5,0Z" stroke="none" />
-        <path d="M5,.5H185a.5.5,0,0,1,.5.5V39a.5.5,0,0,1-.5.5H5A4.5,4.5,0,0,1,.5,35V5A4.5,4.5,0,0,1,5,.5Z" fill="none" />
-      </g>
-      <g transform="translate(1352 587)" fill="var(--anatomy-gray-200)">
-        <path d="M 35 39.25 L 0.75 39.25 L 0.75 0.75 L 35 0.75 C 37.34346008300781 0.75 39.25 2.656539916992188 39.25 5 L 39.25 35 C 39.25 37.34346008300781 37.34346008300781 39.25 35 39.25 Z" stroke="none" />
-        <path d="M 1.5 1.5 L 1.5 38.5 L 35 38.5 C 36.92990875244141 38.5 38.5 36.92990875244141 38.5 35 L 38.5 5 C 38.5 3.070091247558594 36.92990875244141 1.5 35 1.5 L 1.5 1.5 M 0 0 L 35 0 C 37.76142120361328 0 40 2.238571166992188 40 5 L 40 35 C 40 37.76142120361328 37.76142120361328 40 35 40 L 0 40 L 0 0 Z" stroke="none" fill="var(--anatomy-gray-500)" />
-      </g>
-      <path d="M11,2a1,1,0,0,0-1.71-.71L6,4.59,2.71,1.29A1,1,0,1,0,1.29,2.71l4,4a1,1,0,0,0,1.41,0l4-4A1,1,0,0,0,11,2Z" transform="translate(1366.004 603.006)" fill="var(--anatomy-gray-600)" />
-      <g transform="translate(1172 587)" fill="none">
-        <path d="M5,0H215a5,5,0,0,1,5,5V35a5,5,0,0,1-5,5H5a5,5,0,0,1-5-5V5A5,5,0,0,1,5,0Z" stroke="none" />
-        <path d="M 5 1.5 C 3.070083618164062 1.5 1.5 3.070087432861328 1.5 5 L 1.5 35 C 1.5 36.92991256713867 3.070083618164062 38.5 5 38.5 L 215 38.5 C 216.9299163818359 38.5 218.5 36.92991256713867 218.5 35 L 218.5 5 C 218.5 3.070087432861328 216.9299163818359 1.5 215 1.5 L 5 1.5 M 5 0 L 215 0 C 217.7614135742188 0 220 2.23858642578125 220 5 L 220 35 C 220 37.76141357421875 217.7614135742188 40 215 40 L 5 40 C 2.238555908203125 40 0 37.76141357421875 0 35 L 0 5 C 0 2.23858642578125 2.238555908203125 0 5 0 Z" stroke="none" fill="var(--anatomy-gray-500)" />
-      </g>
-    </g>
-    <text transform="translate(244 93)" fill="var(--anatomy-gray-600)" font-size="15" font-family="var(--anatomy-font)">
-      <tspan x="0" y="0">Label</tspan>
-    </text>
-    <g transform="translate(248 51.5)" clip-path="url(#a)">
-      <circle cx="2.5" cy="2.5" r="2.5" transform="translate(0 25.5)" fill="var(--anatomy-gray-500)" />
-      <line y1="28" transform="translate(2.5)" fill="none" stroke="var(--anatomy-gray-500)" stroke-width="1" />
-    </g>
-    <g transform="translate(354 82.5)" clip-path="url(#a)">
-      <circle cx="2.5" cy="2.5" r="2.5" transform="translate(0 25.5)" fill="var(--anatomy-gray-500)" />
-      <line y1="28" transform="translate(2.5)" fill="none" stroke="var(--anatomy-gray-500)" stroke-width="1" />
-    </g>
-    <g transform="translate(437 161.5) rotate(180)" clip-path="url(#a)">
-      <circle cx="2.5" cy="2.5" r="2.5" transform="translate(0 25.5)" fill="var(--anatomy-gray-500)" />
-      <line y1="28" transform="translate(2.5)" fill="none" stroke="var(--anatomy-gray-500)" stroke-width="1" />
-    </g>
-    <text transform="translate(237 47)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-      <tspan x="0" y="0">Label</tspan>
-    </text>
-    <text transform="translate(356 78)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-      <tspan x="-13.149" y="0">Input</tspan>
-    </text>
-    <text transform="translate(435 176)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-      <tspan x="-16.744" y="0">Button</tspan>
-    </text>
-    <text transform="translate(528 93)" fill="var(--anatomy-gray-600)" font-size="15" font-family="var(--anatomy-font)">
-      <tspan x="0" y="0">Label</tspan>
-    </text>
-    <g transform="translate(528 151)" fill="var(--anatomy-gray-50)">
-      <path d="M 215 153.25 L 5 153.25 C 2.656555652618408 153.25 0.75 151.3434448242188 0.75 149 L 0.75 5 C 0.75 2.656555652618408 2.656555652618408 0.75 5 0.75 L 215 0.75 C 217.3434448242188 0.75 219.25 2.656555652618408 219.25 5 L 219.25 149 C 219.25 151.3434448242188 217.3434448242188 153.25 215 153.25 Z" stroke="none" />
-      <path d="M 5 1.5 C 3.070083618164062 1.5 1.5 3.070083618164062 1.5 5 L 1.5 149 C 1.5 150.9299163818359 3.070083618164062 152.5 5 152.5 L 215 152.5 C 216.9299163818359 152.5 218.5 150.9299163818359 218.5 149 L 218.5 5 C 218.5 3.070083618164062 216.9299163818359 1.5 215 1.5 L 5 1.5 M 5 0 L 215 0 C 217.7614135742188 0 220 2.238555908203125 220 5 L 220 149 C 220 151.7614135742188 217.7614135742188 154 215 154 L 5 154 C 2.238555908203125 154 0 151.7614135742188 0 149 L 0 5 C 0 2.238555908203125 2.238555908203125 0 5 0 Z" stroke="none" fill="var(--anatomy-gray-500)" />
-    </g>
-    <g transform="translate(398 -60)">
-      <text transform="translate(145 245)" fill="var(--anatomy-gray-800)" font-size="17" font-family="var(--anatomy-font)">
-        <tspan x="0" y="0">Option one</tspan>
-      </text>
-      <rect width="220" height="48" transform="translate(130 216)" fill="none" />
-    </g>
-    <g transform="translate(398 -12)">
-      <text transform="translate(145 245)" fill="var(--anatomy-gray-800)" font-size="17" font-family="var(--anatomy-font)">
-        <tspan x="0" y="0">Option two</tspan>
-      </text>
-      <rect width="220" height="48" transform="translate(130 216)" fill="none" />
-    </g>
-    <g transform="translate(398 36)">
-      <text transform="translate(145 245)" fill="var(--anatomy-gray-800)" font-size="17" font-family="var(--anatomy-font)">
-        <tspan x="0" y="0">Option three</tspan>
-      </text>
-      <rect width="220" height="48" transform="translate(130 216)" fill="none" />
-    </g>
-    <g transform="translate(-644 -484)">
-      <g transform="translate(1172 587)" fill="var(--anatomy-gray-50)" stroke-width="1">
-        <path d="M5,0H186a0,0,0,0,1,0,0V40a0,0,0,0,1,0,0H5a5,5,0,0,1-5-5V5A5,5,0,0,1,5,0Z" stroke="none" />
-      </g>
-      <text transform="translate(1184 612)" fill="var(--anatomy-gray-700)" font-size="17" font-family="var(--anatomy-font)">
-        <tspan x="0" y="0">Op</tspan>
-      </text>
-      <line transform="translate(1184 612)" x1="24" y1="-16" x2="24" y2="6" stroke="var(--anatomy-gray-600)" />
-      <g transform="translate(1352 587)" fill="var(--anatomy-gray-200)">
-        <path d="M 35 39.25 L 0.75 39.25 L 0.75 0.75 L 35 0.75 C 37.34346008300781 0.75 39.25 2.656539916992188 39.25 5 L 39.25 35 C 39.25 37.34346008300781 37.34346008300781 39.25 35 39.25 Z" stroke="none" />
-        <path d="M 1.5 1.5 L 1.5 38.5 L 35 38.5 C 36.92990875244141 38.5 38.5 36.92990875244141 38.5 35 L 38.5 5 C 38.5 3.070091247558594 36.92990875244141 1.5 35 1.5 L 1.5 1.5 M 0 0 L 35 0 C 37.76142120361328 0 40 2.238571166992188 40 5 L 40 35 C 40 37.76142120361328 37.76142120361328 40 35 40 L 0 40 L 0 0 Z" stroke="none" fill="var(--anatomy-gray-500)" />
-      </g>
-      <path d="M11,2a1,1,0,0,0-1.71-.71L6,4.59,2.71,1.29A1,1,0,1,0,1.29,2.71l4,4a1,1,0,0,0,1.41,0l4-4A1,1,0,0,0,11,2Z" transform="translate(1366.004 603.006)" fill="var(--anatomy-gray-600)" />
-      <g transform="translate(1172 587)" fill="none">
-        <path d="M5,0H215a5,5,0,0,1,5,5V35a5,5,0,0,1-5,5H5a5,5,0,0,1-5-5V5A5,5,0,0,1,5,0Z" stroke="none" />
-        <path d="M 5 1.5 C 3.070083618164062 1.5 1.5 3.070087432861328 1.5 5 L 1.5 35 C 1.5 36.92991256713867 3.070083618164062 38.5 5 38.5 L 215 38.5 C 216.9299163818359 38.5 218.5 36.92991256713867 218.5 35 L 218.5 5 C 218.5 3.070087432861328 216.9299163818359 1.5 215 1.5 L 5 1.5 M 5 0 L 215 0 C 217.7614135742188 0 220 2.23858642578125 220 5 L 220 35 C 220 37.76141357421875 217.7614135742188 40 215 40 L 5 40 C 2.238555908203125 40 0 37.76141357421875 0 35 L 0 5 C 0 2.23858642578125 2.238555908203125 0 5 0 Z" stroke="none" fill="var(--anatomy-gray-500)" />
-      </g>
-    </g>
-    <text transform="translate(695 337)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-      <tspan x="-19.474" y="0">List box</tspan>
-    </text>
-    <g transform="translate(697 324.5) rotate(180)" clip-path="url(#a)">
-      <circle cx="2.5" cy="2.5" r="2.5" transform="translate(0 25.5)" fill="var(--anatomy-gray-500)" />
-      <line y1="28" transform="translate(2.5)" fill="none" stroke="var(--anatomy-gray-500)" stroke-width="1" />
-    </g>
-    <text transform="translate(256 128)" fill="var(--anatomy-gray-700)" font-size="17" font-family="var(--anatomy-font)">
-      <tspan x="0" y="0">Op</tspan>
-    </text>
-    <line transform="translate(256 128)" x1="24" y1="-16" x2="24" y2="6" stroke="var(--anatomy-gray-600)" />
-  </g>
-</svg>
diff --git a/packages/react-aria/docs/combobox/chakra.png b/packages/react-aria/docs/combobox/chakra.png
deleted file mode 100644
index ccf90a74f0a..00000000000
Binary files a/packages/react-aria/docs/combobox/chakra.png and /dev/null differ
diff --git a/packages/react-aria/docs/combobox/example.png b/packages/react-aria/docs/combobox/example.png
deleted file mode 100644
index 384772cf2bf..00000000000
Binary files a/packages/react-aria/docs/combobox/example.png and /dev/null differ
diff --git a/packages/react-aria/docs/combobox/material.png b/packages/react-aria/docs/combobox/material.png
deleted file mode 100644
index 726adad3d3f..00000000000
Binary files a/packages/react-aria/docs/combobox/material.png and /dev/null differ
diff --git a/packages/react-aria/docs/combobox/search.png b/packages/react-aria/docs/combobox/search.png
deleted file mode 100644
index 3eeba28b58f..00000000000
Binary files a/packages/react-aria/docs/combobox/search.png and /dev/null differ
diff --git a/packages/react-aria/docs/combobox/styled-components.png b/packages/react-aria/docs/combobox/styled-components.png
deleted file mode 100644
index 63b00ee9184..00000000000
Binary files a/packages/react-aria/docs/combobox/styled-components.png and /dev/null differ
diff --git a/packages/react-aria/docs/combobox/useComboBox.mdx b/packages/react-aria/docs/combobox/useComboBox.mdx
deleted file mode 100644
index 788042ec84e..00000000000
--- a/packages/react-aria/docs/combobox/useComboBox.mdx
+++ /dev/null
@@ -1,688 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/combobox';
-import collectionsDocs from 'docs:@react-types/shared/src/collections.d.ts';
-import {FunctionAPI, HeaderInfo, InterfaceType, TypeContext, TypeLink, PageDescription} from '@react-spectrum/docs';
-import i18nDocs from 'docs:@react-aria/i18n';
-import listboxDocs from 'docs:@react-aria/listbox';
-import overlaysDocs from 'docs:@react-aria/overlays';
-import packageData from '@react-aria/combobox/package.json';
-import selectionDocs from 'docs:@react-stately/selection';
-import statelyDocs from 'docs:@react-stately/combobox';
-import Anatomy from './anatomy.svg';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
-import examplePreview from 'url:./example.png';
-import searchExamplePreview from 'url:./search.png';
-import materialExamplePreview from 'url:./material.png';
-import styledExamplePreview from 'url:./styled-components.png';
-import chakraExamplePreview from 'url:./chakra.png';
-
----
-category: Pickers
-keywords: [combobox, autocomplete, autosuggest, typeahead, search, aria]
-after_version: 3.0.0-alpha.0
----
-
-# useComboBox
-
-<PageDescription>{docs.exports.useComboBox.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useComboBox']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/combobox/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useComboBox} links={docs.links} />
-
-## Features
-
-A combo box can be built using the [&lt;datalist&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) HTML element, but this is very limited in functionality and difficult to style.
-`useComboBox` helps achieve accessible combo box and autocomplete components that can be styled as needed.
-
-* Support for filtering a list of options by typing
-* Support for selecting a single option
-* Support for disabled options
-* Support for groups of items in sections
-* Support for custom user input values
-* Support for controlled and uncontrolled options, selection, input value, and open state
-* Support for custom filter functions
-* Async loading and infinite scrolling support
-* Support for use with virtualized lists
-* Exposed to assistive technology as a `combobox` with ARIA
-* Labeling support for accessibility
-* Required and invalid states exposed to assistive technology via ARIA
-* Support for mouse, touch, and keyboard interactions
-* Keyboard support for opening the combo box list box using the arrow keys, including automatically focusing
-  the first or last item accordingly
-* Support for opening the list box when typing, on focus, or manually
-* Handles virtual clicks on the input from touch screen readers to toggle the list box
-* Virtual focus management for combo box list box option navigation
-* Hides elements outside the input and list box from assistive technology while the list box is open in a portal
-* Custom localized announcements for option focusing, filtering, and selection using an ARIA live region to work around VoiceOver bugs
-* Support for native HTML constraint validation with customizable UI, custom validation functions, realtime validation, and server-side validation errors
-
-Read our [blog post](../blog/building-a-combobox) for more details about the interactions and accessibility features implemented by `useComboBox`.
-
-## Anatomy
-
-<Anatomy />
-
-A combo box consists of a label, an input which displays the current value, a list box popup, and an optional button
-used to toggle the list box popup open state. Users can type within the input to filter the available options
-within the list box. The list box popup may be opened by a variety of input field interactions specified
-by the `menuTrigger` prop provided to `useComboBox`, or by clicking or touching the button. `useComboBox` handles exposing
-the correct ARIA attributes for accessibility for each of the elements comprising the combo box. It should be combined
-with [useListBox](../ListBox/useListBox.html), which handles the implementation of the popup list box,
-and [useButton](../Button/useButton.html) which handles the button press interactions.
-
-`useComboBox` also supports optional description and error message elements, which can be used
-to provide more context about the field, and any validation messages. These are linked with the
-input via the `aria-describedby` attribute.
-
-`useComboBox` returns props that you should spread onto the appropriate elements:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useComboBox.return.base?.id ?? docs.exports.useComboBox.return.id].properties} />
-</TypeContext.Provider>
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useComboBoxState} /> hook from `@react-stately/combobox`.
-The state object should be passed as an option to `useComboBox`.
-
-If the combo box does not have a visible label, an `aria-label` or `aria-labelledby` prop must be passed instead to
-identify it to assistive technology.
-
-## State management
-
-`useComboBox` requires knowledge of the options in the combo box in order to handle keyboard
-navigation and other interactions. It does this using the <TypeLink links={collectionsDocs.links} type={collectionsDocs.exports.Collection} />
-interface, which is a generic interface to access sequential unique keyed data. You can
-implement this interface yourself, e.g. by using a prop to pass a list of item objects,
-but <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useComboBoxState} /> from
-`@react-stately/combobox` implements a JSX based interface for building collections instead.
-See [Collection Components](v3:collections.html) for more information.
-
-In addition, <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useComboBoxState} />
-manages the state necessary for single selection and exposes
-a <TypeLink links={selectionDocs.links} type={selectionDocs.exports.SelectionManager} />,
-which makes use of the collection to provide an interface to update the selection state.
-It also holds state to track if the popup is open, if the combo box is focused, and the current input value.
-For more information about selection, see [Selection](v3:selection.html).
-
-## Example
-
-This example uses an `<input>` element for the combo box text input and a `<button>` element for the list box popup trigger. A `<span>`
-is included within the `<button>` to display the dropdown arrow icon (hidden from screen readers with `aria-hidden`).
-A "contains" filter function is obtained from <TypeLink links={i18nDocs.links} type={i18nDocs.exports.useFilter} /> and is passed to <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useComboBoxState} /> so
-that the list box can be filtered based on the option text and the current input text.
-
-The same `Popover`, `ListBox`, and `Button` components created with [usePopover](../Popover/usePopover.html), [useListBox](../ListBox/useListBox.html),
-and [useButton](../Button/useButton.html) that you may already have in your component library or application should be reused. These can be shared with other
-components such as a `Select` created with [useSelect](../Select/useSelect.html) or a `Dialog` popover created with [useDialog](../Modal/useDialog.html).
-The code for these components is also included below in the collapsed sections.
-
-In addition, see [useListBox](../ListBox/useListBox.html) for examples of sections (option groups), and more complex
-options. For an example of the description and error message elements, see [useTextField](../TextField/useTextField.html).
-
-```tsx example export=true
-import {Item} from '@react-stately/collections';
-import {useButton} from '@react-aria/button';
-import {useComboBoxState} from '@react-stately/combobox'
-import {useComboBox} from '@react-aria/combobox';
-import {useFilter} from '@react-aria/i18n';
-
-// Reuse the ListBox, Popover, and Button from your component library. See below for details.
-import {ListBox, Popover, Button} from 'your-component-library';
-
-function ComboBox(props) {
-  // Setup filter function and state.
-  let {contains} = useFilter({sensitivity: 'base'});
-  let state = useComboBoxState({...props, defaultFilter: contains});
-
-  // Setup refs and get props for child elements.
-  let buttonRef = React.useRef(null);
-  let inputRef = React.useRef(null);
-  let listBoxRef = React.useRef(null);
-  let popoverRef = React.useRef(null);
-
-  let {buttonProps, inputProps, listBoxProps, labelProps} = useComboBox(
-    {
-      ...props,
-      inputRef,
-      buttonRef,
-      listBoxRef,
-      popoverRef,
-    },
-    state
-  );
-
-  return (
-    <div style={{display: 'inline-flex', flexDirection: 'column'}}>
-      <label {...labelProps}>{props.label}</label>
-      <div>
-        <input
-          {...inputProps}
-          ref={inputRef}
-          style={{
-            height: 24,
-            boxSizing: 'border-box',
-            marginRight: 0,
-            fontSize: 16
-          }} />
-        <Button
-          {...buttonProps}
-          buttonRef={buttonRef}
-          style={{
-            height: 24,
-            marginLeft: 0
-          }}>
-          <span
-            aria-hidden="true"
-            style={{padding: '0 2px'}}>
-            ▼
-          </span>
-        </Button>
-        {state.isOpen &&
-          <Popover state={state} triggerRef={inputRef} popoverRef={popoverRef} isNonModal placement="bottom start">
-            <ListBox
-              {...listBoxProps}
-              listBoxRef={listBoxRef}
-              state={state} />
-          </Popover>
-        }
-      </div>
-    </div>
-  );
-}
-
-<ComboBox label="Favorite Animal">
-  <Item key="red panda">Red Panda</Item>
-  <Item key="cat">Cat</Item>
-  <Item key="dog">Dog</Item>
-  <Item key="aardvark">Aardvark</Item>
-  <Item key="kangaroo">Kangaroo</Item>
-  <Item key="snake">Snake</Item>
-</ComboBox>
-```
-
-### Popover
-
-The `Popover` component is used to contain the popup listbox for the ComboBox.
-It can be shared between many other components, including [Select](../Select/useSelect.html),
-[Menu](../Menu/useMenu.html), and others.
-See [usePopover](../Popover/usePopover.html) for more examples of popovers.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import type {AriaPopoverProps} from 'react-aria';
-import type {OverlayTriggerState} from 'react-stately';
-import {usePopover, Overlay, DismissButton} from '@react-aria/overlays';
-
-interface PopoverProps extends AriaPopoverProps {
-  children: React.ReactNode,
-  state: OverlayTriggerState
-}
-
-function Popover({children, state, ...props}: PopoverProps) {
-  let {popoverProps} = usePopover(props, state);
-
-  return (
-    <Overlay>
-      <div
-        {...popoverProps}
-        ref={props.popoverRef as React.RefObject<HTMLDivElement>}
-        style={{
-          ...popoverProps.style,
-          background: 'lightgray',
-          border: '1px solid gray'
-        }}>
-        {children}
-        <DismissButton onDismiss={state.close} />
-      </div>
-    </Overlay>
-  );
-}
-```
-
-</details>
-
-### ListBox
-
-The `ListBox` and `Option` components are used to show the filtered list of options as the
-user types in the ComboBox. They can also be shared with other components like a [Select](../Select/useSelect.html). See
-[useListBox](../ListBox/useListBox.html) for more examples, including sections and more complex items.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useListBox, useOption} from '@react-aria/listbox';
-
-function ListBox(props) {
-  let ref = React.useRef(null);
-  let {listBoxRef = ref, state} = props;
-  let {listBoxProps} = useListBox(props, state, listBoxRef);
-
-  return (
-    <ul
-      {...listBoxProps}
-      ref={listBoxRef}
-      style={{
-        margin: 0,
-        padding: 0,
-        listStyle: "none",
-        maxHeight: 150,
-        overflow: "auto",
-        minWidth: 200
-      }}>
-      {[...state.collection].map(item => (
-        <Option
-          key={item.key}
-          item={item}
-          state={state} />
-      ))}
-    </ul>
-  );
-}
-
-function Option({item, state}) {
-  let ref = React.useRef(null);
-  let {optionProps, isSelected, isFocused, isDisabled} = useOption({key: item.key}, state, ref);
-
-  let backgroundColor;
-  let color = 'black';
-
-  if (isSelected) {
-    backgroundColor = 'blueviolet';
-    color = 'white';
-  } else if (isFocused) {
-    backgroundColor = 'gray';
-  } else if (isDisabled) {
-    backgroundColor = 'transparent';
-    color = 'gray';
-  }
-
-  return (
-    <li
-      {...optionProps}
-      ref={ref}
-      style={{
-        background: backgroundColor,
-        color: color,
-        padding: '2px 5px',
-        outline: 'none',
-        cursor: 'pointer'
-      }}>
-      {item.rendered}
-    </li>
-  );
-}
-```
-
-</details>
-
-### Button
-
-The `Button` component is used in the above example to toggle the listbox popup. It is built using the [useButton](../Button/useButton.html) hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useButton} from '@react-aria/button';
-
-function Button(props) {
-  let ref = props.buttonRef;
-  let {buttonProps} = useButton(props, ref);
-  return <button {...buttonProps} ref={ref} style={props.style}>{props.children}</button>;
-}
-```
-
-</details>
-
-## Styled examples
-
-<ExampleCard
-  url="https://codesandbox.io/s/hardcore-moon-xzc4r?file=/src/ComboBox.tsx"
-  preview={examplePreview}
-  title="Tailwind CSS"
-  description="An example of styling a ComboBox with Tailwind." />
-
-<ExampleCard
-  url="https://codesandbox.io/s/hardcore-moon-xzc4r?file=/src/SearchAutocomplete.tsx"
-  preview={searchExamplePreview}
-  title="Search autocomplete"
-  description="A search autocomplete with multiple sections, styled with Tailwind." />
-
-<ExampleCard
-  url="https://codesandbox.io/s/sharp-sun-e3fgd?file=/src/ComboBox.tsx"
-  preview={styledExamplePreview}
-  title="Styled Components"
-  description="A ComboBox with complex item content built with Styled Components." />
-
-<ExampleCard
-  url="https://codesandbox.io/s/falling-http-u37en?file=/src/ComboBox.js"
-  preview={materialExamplePreview}
-  title="Material UI"
-  description="An example ComboBox built with Material UI and React Aria." />
-
-<ExampleCard
-  url="https://codesandbox.io/s/dreamy-burnell-3i2jy?file=/src/App.tsx"
-  preview={chakraExamplePreview}
-  title="Chakra UI"
-  description="An async loading and infinite scrolling autocomplete built with Chakra UI." />
-
-## Usage
-
-The following examples show how to use the ComboBox component created in the above example.
-
-### Uncontrolled
-
-The following example shows how you would create an uncontrolled ComboBox. The input value, selected option, and open state is completely
-uncontrolled, with the default input text set by the `defaultInputValue` prop.
-
-```tsx example
-<ComboBox label="Favorite Animal" defaultInputValue="red">
-  <Item key="red panda">Red Panda</Item>
-  <Item key="cat">Cat</Item>
-  <Item key="dog">Dog</Item>
-  <Item key="aardvark">Aardvark</Item>
-  <Item key="kangaroo">Kangaroo</Item>
-  <Item key="snake">Snake</Item>
-</ComboBox>
-```
-
-### Dynamic collections
-
-ComboBox follows the [Collection Components API](v3:collections.html), accepting both static and dynamic collections.
-The examples above show static collections, which can be used when the full list of options is known ahead of time. Dynamic collections,
-as shown below, can be used when the options come from an external data source such as an API call, or update over time.
-
-As seen below, an iterable list of options is passed to the ComboBox using the `defaultItems` prop. Each item accepts a `key` prop, which
-is passed to the `onSelectionChange` handler to identify the selected item. Alternatively, if the item objects contain an `id` property,
-as shown in the example below, then this is used automatically and a `key` prop is not required.
-
-```tsx example
-function Example() {
-  let options = [
-    {id: 1, name: 'Aerospace'},
-    {id: 2, name: 'Mechanical'},
-    {id: 3, name: 'Civil'},
-    {id: 4, name: 'Biomedical'},
-    {id: 5, name: 'Nuclear'},
-    {id: 6, name: 'Industrial'},
-    {id: 7, name: 'Chemical'},
-    {id: 8, name: 'Agricultural'},
-    {id: 9, name: 'Electrical'}
-  ];
-  let [majorId, setMajorId] = React.useState(null);
-
-  return (
-    <>
-      <ComboBox
-        label="Pick a engineering major"
-        defaultItems={options}
-        onSelectionChange={setMajorId}>
-        {(item) => <Item>{item.name}</Item>}
-      </ComboBox>
-      <p>Selected topic id: {majorId}</p>
-    </>
-  );
-}
-```
-
-### Allow custom values
-
-By default, `useComboBoxState` doesn't allow users to specify a value that doesn't exist in the list of options and will revert the input value to
-the current selected value on blur. By specifying `allowsCustomValue`, this behavior is suppressed and the user is free to enter
-any value within the field.
-
-```tsx example
-<ComboBox label="Favorite Animal" allowsCustomValue>
-  <Item key="red panda">Red Panda</Item>
-  <Item key="cat">Cat</Item>
-  <Item key="dog">Dog</Item>
-  <Item key="aardvark">Aardvark</Item>
-  <Item key="kangaroo">Kangaroo</Item>
-  <Item key="snake">Snake</Item>
-</ComboBox>
-```
-
-### Custom filtering
-
-By default, `useComboBoxState` uses the filter function passed to the `defaultFilter` prop (in the above example, a
-"contains" function from `useFilter`). The filter function can be overridden by users of the `ComboBox` component by
-using the `items` prop to control the filtered list. When `items` is provided rather than `defaultItems`, `useComboBoxState`
-does no filtering of its own.
-
-The following example makes the `inputValue` controlled, and updates the filtered list that is passed to the `items`
-prop when the input changes value.
-
-```tsx example
-function Example() {
-  let options = [
-    {id: 1, email: 'fake@email.com'},
-    {id: 2, email: 'anotherfake@email.com'},
-    {id: 3, email: 'bob@email.com'},
-    {id: 4, email: 'joe@email.com'},
-    {id: 5, email: 'yourEmail@email.com'},
-    {id: 6, email: 'valid@email.com'},
-    {id: 7, email: 'spam@email.com'},
-    {id: 8, email: 'newsletter@email.com'},
-    {id: 9, email: 'subscribe@email.com'}
-  ];
-
-  let {startsWith} = useFilter({sensitivity: 'base'});
-  let [filterValue, setFilterValue] = React.useState('');
-  let filteredItems = React.useMemo(
-    () => options.filter((item) => startsWith(item.email, filterValue)),
-    [options, filterValue]
-  );
-
-  return (
-    <ComboBox
-      label="To:"
-      items={filteredItems}
-      inputValue={filterValue}
-      onInputChange={setFilterValue}
-      allowsCustomValue>
-      {(item) => <Item>{item.email}</Item>}
-    </ComboBox>
-  );
-}
-```
-
-### Fully controlled
-
-The following example shows how you would create a controlled ComboBox, controlling everything from the selected value (`selectedKey`)
-to the combobox options (`items`). By passing in `inputValue`, `selectedKey`, and `items` to the `ComboBox` you can control
-exactly what your ComboBox should display. For example, note that the item filtering for the controlled ComboBox below now follows a "starts with"
-filter strategy, accomplished by controlling the exact set of items available to the ComboBox whenever the input value updates.
-
-It is important to note that you don't have to control every single aspect of a ComboBox. If you decide to only control a single property of the
-ComboBox, be sure to provide the change handler for that prop as well e.g. controlling `selectedKey` would require `onSelectionChange` to be passed to `useComboBox` as well.
-
-```tsx example
-function ControlledComboBox() {
-  let optionList = [
-    {name: 'Red Panda', id: '1'},
-    {name: 'Cat', id: '2'},
-    {name: 'Dog', id: '3'},
-    {name: 'Aardvark', id: '4'},
-    {name: 'Kangaroo', id: '5'},
-    {name: 'Snake', id: '6'}
-  ];
-
-  // Store ComboBox input value, selected option, open state, and items
-  // in a state tracker
-  let [fieldState, setFieldState] = React.useState({
-    selectedKey: '',
-    inputValue: '',
-    items: optionList
-  });
-
-  // Implement custom filtering logic and control what items are
-  // available to the ComboBox.
-  let {startsWith} = useFilter({sensitivity: 'base'});
-
-  // Specify how each of the ComboBox values should change when an
-  // option is selected from the list box
-  let onSelectionChange = (key) => {
-    setFieldState(prevState => {
-      let selectedItem = prevState.items.find(option => option.id === key);
-      return ({
-        inputValue: selectedItem?.name ?? '',
-        selectedKey: key,
-        items: optionList.filter(item => startsWith(item.name, selectedItem?.name ?? ''))
-      })
-    });
-  };
-
-  // Specify how each of the ComboBox values should change when the input
-  // field is altered by the user
-  let onInputChange = (value) => {
-    setFieldState(prevState => ({
-      inputValue: value,
-      selectedKey: value === '' ? null : prevState.selectedKey,
-      items: optionList.filter(item => startsWith(item.name, value))
-    }));
-  };
-
-  // Show entire list if user opens the menu manually
-  let onOpenChange = (isOpen, menuTrigger) => {
-    if (menuTrigger === 'manual' && isOpen) {
-      setFieldState(prevState => ({
-        inputValue: prevState.inputValue,
-        selectedKey: prevState.selectedKey,
-        items: optionList
-      }));
-    }
-  };
-
-  // Pass each controlled prop to useComboBox along with their
-  // change handlers
-  return (
-    <ComboBox
-      label="Favorite Animal"
-      items={fieldState.items}
-      selectedKey={fieldState.selectedKey}
-      inputValue={fieldState.inputValue}
-      onOpenChange={onOpenChange}
-      onSelectionChange={onSelectionChange}
-      onInputChange={onInputChange}>
-      {item => <Item>{item.name}</Item>}
-    </ComboBox>
-  )
-}
-
-<ControlledComboBox />
-```
-
-### Menu trigger behavior
-
-`useComboBoxState` supports three different `menuTrigger` prop values:
-
-* `input` (default): ComboBox menu opens when the user edits the input text.
-* `focus`: ComboBox menu opens when the user focuses the ComboBox input.
-* `manual`: ComboBox menu only opens when the user presses the trigger button or uses the arrow keys.
-
-The example below has `menuTrigger` set to `focus`.
-
-```tsx example
-<ComboBox label="Favorite Animal" menuTrigger="focus">
-  <Item key="red panda">Red Panda</Item>
-  <Item key="cat">Cat</Item>
-  <Item key="dog">Dog</Item>
-  <Item key="aardvark">Aardvark</Item>
-  <Item key="kangaroo">Kangaroo</Item>
-  <Item key="snake">Snake</Item>
-</ComboBox>
-```
-
-### Disabled options
-
-You can disable specific options by providing an array of keys to `useComboBoxState`
-via the `disabledKeys` prop. This will prevent options with matching keys from being pressable and
-receiving keyboard focus as shown in the example below. Note that you are responsible for the styling of disabled options.
-
-```tsx example
-<ComboBox label="Favorite Animal" disabledKeys={['cat', 'kangaroo']}>
-  <Item key="red panda">Red Panda</Item>
-  <Item key="cat">Cat</Item>
-  <Item key="dog">Dog</Item>
-  <Item key="aardvark">Aardvark</Item>
-  <Item key="kangaroo">Kangaroo</Item>
-  <Item key="snake">Snake</Item>
-</ComboBox>
-```
-
-### Asynchronous loading
-
-This example uses the [useAsyncList](../useAsyncList.html) hook to handle asynchronous loading
-and filtering of data from a server. You may additionally want to display a spinner to indicate the loading
-state to the user, or support features like infinite scroll to load more data. See
-[this CodeSandbox](https://codesandbox.io/s/dreamy-burnell-3i2jy?file=/src/Autocomplete.tsx) for an example
-of a ComboBox supporting those features.
-
-```tsx example
-import {useAsyncList} from '@react-stately/data';
-
-function AsyncLoadingExample() {
-  let list = useAsyncList({
-    async load({signal, filterText}) {
-      let res = await fetch(
-        `https://swapi.py4e.com/api/people/?search=${filterText}`,
-        {signal}
-      );
-      let json = await res.json();
-
-      return {
-        items: json.results
-      };
-    }
-  });
-
-  return (
-    <ComboBox
-      label="Star Wars Character Lookup"
-      items={list.items}
-      inputValue={list.filterText}
-      onInputChange={list.setFilterText}>
-      {(item) => <Item key={item.name}>{item.name}</Item>}
-    </ComboBox>
-  );
-}
-```
-
-### Links
-
-By default, interacting with an item in a ComboBox selects it and updates the input value. Alternatively, items may be links to another page or website. This can be achieved by passing the `href` prop to the `<Item>` component. Interacting with link items navigates to the provided URL and does not update the selection or input value. See the [links](../ListBox/useListBox.html#links) section in the `useListBox` docs for details on how to support this.
-
-## Internationalization
-
-`useComboBox` handles some aspects of internationalization automatically.
-For example, the item focus, count, and selection VoiceOver announcements are localized.
-You are responsible for localizing all labels and option
-content that is passed into the combo box.
-
-### RTL
-
-In right-to-left languages, the ComboBox should be mirrored. The trigger button should be on the left,
-and the input element should be on the right. In addition, the content of ComboBox options should
-flip. Ensure that your CSS accounts for this.
diff --git a/packages/react-aria/docs/datepicker/DateField-tailwind.png b/packages/react-aria/docs/datepicker/DateField-tailwind.png
deleted file mode 100644
index a2f52ab78f3..00000000000
Binary files a/packages/react-aria/docs/datepicker/DateField-tailwind.png and /dev/null differ
diff --git a/packages/react-aria/docs/datepicker/DatePicker-chakra.png b/packages/react-aria/docs/datepicker/DatePicker-chakra.png
deleted file mode 100644
index 39444ffa626..00000000000
Binary files a/packages/react-aria/docs/datepicker/DatePicker-chakra.png and /dev/null differ
diff --git a/packages/react-aria/docs/datepicker/DatePicker-tailwind.png b/packages/react-aria/docs/datepicker/DatePicker-tailwind.png
deleted file mode 100644
index b8a5b7e77d4..00000000000
Binary files a/packages/react-aria/docs/datepicker/DatePicker-tailwind.png and /dev/null differ
diff --git a/packages/react-aria/docs/datepicker/DateRangePicker-chakra.png b/packages/react-aria/docs/datepicker/DateRangePicker-chakra.png
deleted file mode 100644
index 1c77b01f201..00000000000
Binary files a/packages/react-aria/docs/datepicker/DateRangePicker-chakra.png and /dev/null differ
diff --git a/packages/react-aria/docs/datepicker/DateRangePicker-tailwind.png b/packages/react-aria/docs/datepicker/DateRangePicker-tailwind.png
deleted file mode 100644
index c22df885a7b..00000000000
Binary files a/packages/react-aria/docs/datepicker/DateRangePicker-tailwind.png and /dev/null differ
diff --git a/packages/react-aria/docs/datepicker/TimeField-tailwind.png b/packages/react-aria/docs/datepicker/TimeField-tailwind.png
deleted file mode 100644
index 4ded948731d..00000000000
Binary files a/packages/react-aria/docs/datepicker/TimeField-tailwind.png and /dev/null differ
diff --git a/packages/react-aria/docs/datepicker/useDateField.mdx b/packages/react-aria/docs/datepicker/useDateField.mdx
deleted file mode 100644
index d671d6f1f93..00000000000
--- a/packages/react-aria/docs/datepicker/useDateField.mdx
+++ /dev/null
@@ -1,428 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/datepicker';
-import statelyDocs from 'docs:@react-stately/datepicker';
-import i18nDocs from 'docs:@internationalized/date';
-import {FunctionAPI, HeaderInfo, InterfaceType, TypeContext, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/datepicker/package.json';
-import Anatomy from './datefield-anatomy.svg';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
-import tailwindExample from 'url:./DateField-tailwind.png';
-
----
-category: Date and Time
-keywords: [input, form, field, date, time]
----
-
-# useDateField
-
-<PageDescription>{docs.exports.useDateField.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useDateField']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useDateField} links={docs.links} />
-<FunctionAPI function={docs.exports.useDateSegment} links={docs.links} />
-
-## Features
-
-A date field can be built using `<input type="date">`, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. `useDateField` helps achieve accessible and international date and time fields that can be styled as needed.
-
-* **Dates and times** – Support for dates and times with configurable granularity.
-* **International** – Support for 13 calendar systems used around the world, including Gregorian, Buddhist, Islamic, Persian, and more. Locale-specific formatting, number systems, hour cycles, and right-to-left support are available as well.
-* **Time zone aware** – Dates and times can optionally include a time zone. All modifications follow time zone rules such as daylight saving time.
-* **Accessible** – Each date and time unit is displayed as an individually focusable and editable segment, which allows users an easy way to edit dates using the keyboard, in any date format and locale.
-* **Touch friendly** – Date segments are editable using an easy to use numeric keypad, and all interactions are accessible using touch-based screen readers.
-* **Customizable** – As with all of React Aria, the DOM structure and styling of all elements can be fully customized.
-
-Read our [blog post](../blog/date-and-time-pickers-for-all) for more details about the internationalization, accessibility, and user experience features implemented by `useDateField`.
-
-## Anatomy
-
-<Anatomy
-  role="img"
-  aria-label="Anatomy diagram of a date field component, which consists of a label, field, segments for each date unit." />
-
-A date field consists of a label, and a group of segments representing each unit of a date and time (e.g. years, months, days, etc.). Each segment is individually focusable and editable by the user, by typing or using the arrow keys to increment and decrement the value. This approach allows values to be formatted and parsed correctly regardless of the locale or date format, and offers an easy and error-free way to edit dates using the keyboard.
-
-`useDateField` also supports optional description and error message elements, which can be used
-to provide more context about the field, and any validation messages. These are linked with the
-input via the `aria-describedby` attribute.
-
-`useDateField` returns props that you should spread onto the appropriate elements:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useDateField.return.id].properties} />
-</TypeContext.Provider>
-
-`useDateSegment` returns props for an individual date segment:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useDateSegment.return.id].properties} />
-</TypeContext.Provider>
-
-Note that most of this anatomy is shared with [useTimeField](../TimeField/useTimeField.html), so you can reuse many components between them if you have both.
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useDateFieldState} /> hook from `@react-stately/datepicker`.
-The state object should be passed as an option to `useDateField` and `useDateSegment`.
-
-If the date field does not have a visible label, an `aria-label` or `aria-labelledby` prop must be passed instead to
-identify it to assistive technology.
-
-## Date and time values
-
-Dates and times are represented in many different ways by cultures around the world. This includes differences in calendar systems, time zones, daylight saving time rules, date and time formatting, weekday and weekend rules, and much more. When building applications that support users around the world, it is important to handle these aspects correctly for each locale.
-
-<TypeLink links={docs.links} type={docs.exports.useDateField} /> uses the [@internationalized/date](../internationalized/date/) library to represent dates and times. This package provides a library of objects and functions to perform date and time related manipulation, queries, and conversions that work across locales and calendars. Date and time objects can be converted to and from native JavaScript `Date` objects or [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) strings. See the [documentation](../internationalized/date/), or the [examples below](#value) for more details.
-
-<TypeLink links={statelyDocs.links} type={statelyDocs.exports.useDateFieldState} /> requires a `createCalendar` function to be provided, which is used to implement date manipulation across multiple calendar systems. The default implementation in `@internationalized/date` includes all supported calendar systems. While this library is quite small (8 kB minified + Brotli), you can reduce its bundle size further by providing your own implementation that includes only your supported calendars. See [below](#reducing-bundle-size) for an example.
-
-## Example
-
-```tsx example export=true
-import {useDateFieldState} from '@react-stately/datepicker';
-import {useDateField, useDateSegment} from '@react-aria/datepicker';
-import {createCalendar} from '@internationalized/date';
-import {useLocale} from '@react-aria/i18n';
-
-export function DateField(props) {
-  let {locale} = useLocale();
-  let state = useDateFieldState({
-    ...props,
-    locale,
-    createCalendar
-  });
-
-  let ref = React.useRef(null);
-  let {labelProps, fieldProps} = useDateField(props, state, ref);
-
-  return (
-    <div className="wrapper">
-      <span {...labelProps}>{props.label}</span>
-      <div {...fieldProps} ref={ref} className="field">
-        {state.segments.map((segment, i) =>
-          <DateSegment key={i} segment={segment} state={state} />
-        )}
-        {state.isInvalid &&
-          <span aria-hidden="true">🚫</span>
-        }
-      </div>
-    </div>
-  );
-}
-
-function DateSegment({segment, state}) {
-  let ref = React.useRef(null);
-  let {segmentProps} = useDateSegment(segment, state, ref);
-
-  return (
-    <span
-      {...segmentProps}
-      ref={ref}
-      className={`segment ${segment.isPlaceholder ? 'placeholder' : ''}`}>
-      {segment.text}
-    </span>
-  );
-}
-
-<DateField label="Event date" />
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.field {
-  display: block;
-  padding: 2px 4px;
-  border-radius: 2px;
-  border: 1px solid var(--gray);
-  background: var(--spectrum-global-color-gray-50);
-}
-
-.field:focus-within {
-  border-color: var(--blue);
-}
-
-.segment {
-  padding: 0 2px;
-  font-variant-numeric: tabular-nums;
-  text-align: end;
-}
-
-.segment.placeholder {
-  color: var(--spectrum-gray-600);
-}
-
-.segment:focus {
-  color: white;
-  background: var(--blue);
-  outline: none;
-  border-radius: 2px;
-}
-```
-
-</details>
-
-## Styled examples
-
-<ExampleCard
-  url="https://codesandbox.io/s/small-water-y5dgj4?file=/src/DateField.js"
-  preview={tailwindExample}
-  title="Tailwind CSS"
-  description="A date and time field built with Tailwind and React Aria." />
-
-## Usage
-
-The following examples show how to use the `DateField` component created in the above example.
-
-### Value
-
-A `DateField` displays a placeholder by default. An initial, uncontrolled value can be provided to the `DateField` using the `defaultValue` prop. Alternatively, a controlled value can be provided using the `value` prop.
-
-Date values are provided using objects in the [@internationalized/date](../internationalized/date/) package. This library handles correct international date manipulation across calendars, time zones, and other localization concerns. `useDateField` supports values of the following types:
-
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.CalendarDate} /> – a date without any time components. May be parsed from a string representation using the <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseDate} /> function. Use this type to represent dates where the time is not important, such as a birthday or an all day calendar event.
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.CalendarDateTime} /> – a date with a time, but not in any specific time zone. May be parsed from a string representation using the <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseDateTime} /> function. Use this type to represent times that occur at the same local time regardless of the time zone, such as the time of New Years Eve fireworks which always occur at midnight. Most times are better stored as a `ZonedDateTime`.
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.ZonedDateTime} /> – a date with a time in a specific time zone. May be parsed from a string representation using the <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseZonedDateTime} />, <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseAbsolute} />, or <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseAbsoluteToLocal} /> functions. Use this type to represent an exact moment in time at a particular location on Earth.
-
-```tsx example
-import {parseDate} from '@internationalized/date';
-
-function Example() {
-  let [value, setValue] = React.useState(parseDate('2020-02-03'));
-
-  return (
-    <>
-      <DateField
-        label="Date (uncontrolled)"
-        defaultValue={parseDate('2020-02-03')} />
-      <DateField
-        label="Date (controlled)"
-        value={value}
-        onChange={setValue} />
-    </>
-  );
-}
-```
-
-### Events
-
-`useDateField` accepts an `onChange` prop which is triggered whenever the date is edited by the user. The example below uses `onChange` to update a separate element with a formatted version of the date in the user's locale and local time zone. This is done by converting the date to a native JavaScript `Date` object to pass to the formatter.
-
-```tsx example
-import {getLocalTimeZone} from '@internationalized/date';
-import {useDateFormatter} from '@react-aria/i18n';
-
-function Example() {
-  let [date, setDate] = React.useState(parseDate('1985-07-03'));
-  let formatter = useDateFormatter({dateStyle: 'full'});
-
-  return (
-    <>
-      <DateField label="Birth date" value={date} onChange={setDate} />
-      <p>Selected date: {date ? formatter.format(date.toDate(getLocalTimeZone())) : '--'}</p>
-    </>
-  );
-}
-```
-
-### Time zones
-
-`useDateField` is time zone aware when a <TypeLink links={i18nDocs.links} type={i18nDocs.exports.ZonedDateTime} /> object is provided as the value. In this case, the time zone abbreviation is displayed, and time zone concerns such as daylight saving time are taken into account when the value is manipulated.
-
-In most cases, your data will come from and be sent to a server as an [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) formatted string. [@internationalized/date](../internationalized/date/) includes functions for parsing strings in multiple formats into <TypeLink links={i18nDocs.links} type={i18nDocs.exports.ZonedDateTime} /> objects. Which format you use will depend on what information you need to store.
-
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseZonedDateTime} /> – This function parses a date with an explicit time zone and optional UTC offset attached (e.g. `"2021-11-07T00:45[America/Los_Angeles]"` or `"2021-11-07T00:45-07:00[America/Los_Angeles]"`). This format preserves the maximum amount of information. If the exact local time and time zone that a user selected is important, use this format. Storing the time zone and offset that was selected rather than converting to UTC ensures that the local time is correct regardless of daylight saving rule changes (e.g. if a locale abolishes DST). Examples where this applies include calendar events, reminders, and other times that occur in a particular location.
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseAbsolute} /> – This function parses an absolute date and time that occurs at the same instant at all locations on Earth. It can be represented in UTC (e.g. `"2021-11-07T07:45:00Z"`), or stored with a particular offset (e.g. `"2021-11-07T07:45:00-07:00"`). A time zone identifier, e.g. `America/Los_Angeles`, must be passed, and the result will be converted into that time zone. Absolute times are the best way to represent events that occurred in the past, or future events where an exact time is needed, regardless of time zone.
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseAbsoluteToLocal} /> – This function parses an absolute date and time into the current user's local time zone. It is a shortcut for `parseAbsolute`, and accepts the same formats.
-
-```tsx example
-import {parseZonedDateTime} from '@internationalized/date';
-
-<DateField
-  label="Event date"
-  defaultValue={parseZonedDateTime('2022-11-07T00:45[America/Los_Angeles]')} />
-```
-
-`useDateField` displays times in the time zone included in the `ZonedDateTime` object. The above example is always displayed in Pacific Standard Time because the `America/Los_Angeles` time zone identifier is provided. [@internationalized/date](../internationalized/date/) includes functions for converting dates between time zones, or parsing a date directly into a specific time zone or the user's local time zone, as shown below.
-
-```tsx example
-import {parseAbsoluteToLocal} from '@internationalized/date';
-
-<DateField
-  label="Event date"
-  defaultValue={parseAbsoluteToLocal('2021-11-07T07:45:00Z')}
-/>
-```
-
-### Granularity
-
-The `granularity` prop allows you to control the smallest unit that is displayed by `useDateField`. By default, `CalendarDate` values are displayed with `"day"` granularity (year, month, and day), and `CalendarDateTime` and `ZonedDateTime` values are displayed with `"minute"` granularity. More granular time values can be displayed by setting the `granularity` prop to `"second"`.
-
-In addition, when a value with a time is provided but you wish to only display the date, you can set the granularity to `"day"`. This has no effect on the actual value (it still has a time component), only on what fields are displayed. In the following example, two DateFields are synchronized with the same value, but display different granularities.
-
-```tsx example
-function Example() {
-  let [date, setDate] = React.useState(parseAbsoluteToLocal('2021-04-07T18:45:22Z'));
-
-  return (
-    <>
-      <DateField
-        label="Date and time"
-        granularity="second"
-        value={date}
-        onChange={setDate} />
-      <DateField
-        label="Date"
-        granularity="day"
-        value={date}
-        onChange={setDate} />
-    </>
-  );
-}
-```
-
-
-If no `value` or `defaultValue` prop is passed, then the `granularity` prop also affects which type of value is emitted from the `onChange` event. Note that by default, time values will not have a time zone because none was supplied. You can override this by setting the `placeholderValue` prop explicitly. Values emitted from `onChange` will use the time zone of the placeholder value.
-
-```tsx example
-import {now} from '@internationalized/date';
-
-<DateField
-  label="Event date"
-  granularity="second" />
-<DateField
-  label="Event date"
-  placeholderValue={now('America/New_York')}
-  granularity="second" />
-```
-
-### International calendars
-
-`useDateField` supports selecting dates in many calendar systems used around the world, including Gregorian, Hebrew, Indian, Islamic, Buddhist, and more. Dates are automatically displayed in the appropriate calendar system for the user's locale. The calendar system can be overridden using the [Unicode calendar locale extension](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar#adding_a_calendar_in_the_locale_string), passed to the [I18nProvider](../I18nProvider) component.
-
-Selected dates passed to `onChange` always use the same calendar system as the `value` or `defaultValue` prop. If no `value` or `defaultValue` is provided, then dates passed to `onChange` are always in the Gregorian calendar since this is the most commonly used. This means that even though the user selects dates in their local calendar system, applications are able to deal with dates from all users consistently.
-
-The below example displays a `DateField` in the Hindi language, using the Indian calendar. Dates emitted from `onChange` are in the Gregorian calendar.
-
-```tsx example
-import {I18nProvider} from '@react-aria/i18n';
-
-function Example() {
-  let [date, setDate] = React.useState(null);
-  return (
-    <I18nProvider locale="hi-IN-u-ca-indian">
-      <DateField label="Date" value={date} onChange={setDate} />
-      <p>Selected date: {date?.toString()}</p>
-    </I18nProvider>
-  );
-}
-```
-
-### Minimum and maximum values
-
-The `minValue` and `maxValue` props can also be used to perform builtin validation. This marks the date field as invalid using ARIA if the user enters an invalid date. You should implement a visual indication that the date field is invalid as well.
-
-This example only accepts dates after today.
-
-```tsx example
-import {today} from '@internationalized/date';
-
-<DateField
-  label="Appointment date"
-  minValue={today(getLocalTimeZone())}
-  defaultValue={parseDate('2022-02-03')} />
-```
-
-### Placeholder value
-
-When no value is set, a placeholder is shown. The format of the placeholder is influenced by the `granularity` and `placeholderValue` props. `placeholderValue` also controls the default values of each segment when the user first interacts with them, e.g. using the up and down arrow keys. By default, the `placeholderValue` is the current date at midnight, but you can set it to a more appropriate value if needed.
-
-```tsx example
-import {CalendarDate} from '@internationalized/date';
-
-<DateField label="Birth date" placeholderValue={new CalendarDate(1980, 1, 1)} />
-```
-
-### Hide time zone
-
-When a `ZonedDateTime` object is provided as the value to `useDateField`, the time zone abbreviation is displayed by default. However, if this is displayed elsewhere or implicit based on the usecase, it can be hidden using the `hideTimeZone` option.
-
-```tsx example
-<DateField
-  label="Appointment time"
-  defaultValue={parseZonedDateTime('2022-11-07T10:45[America/Los_Angeles]')}
-  hideTimeZone />
-```
-
-### Hour cycle
-
-By default, `useDateField` displays times in either 12 or 24 hour hour format depending on the user's locale. However, this can be overridden using the `hourCycle` prop if needed for a specific usecase. This example forces `useDateField` to use 24-hour time, regardless of the locale.
-
-```tsx example
-<DateField
-  label="Appointment time"
-  granularity="minute"
-  hourCycle={24} />
-```
-
-## Advanced topics
-
-### Reducing bundle size
-
-In the example above, the <TypeLink links={i18nDocs.links} type={i18nDocs.exports.createCalendar} /> function from the [@internationalized/date](../internationalized/date/) package is passed to the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useDateFieldState} /> hook. This function receives a [calendar identifier](../internationalized/date/Calendar.html#calendar-identifiers) string, and provides <TypeLink links={i18nDocs.links} type={i18nDocs.exports.Calendar} /> instances to React Stately, which are used to implement date manipulation.
-
-By default, this includes [all calendar systems](../internationalized/date/Calendar.html#implementations) supported by `@internationalized/date`. However, if your application supports a more limited set of regions, or you know you will only be picking dates in a certain calendar system, you can reduce your bundle size by providing your own implementation of `createCalendar` that includes a subset of these `Calendar` implementations.
-
-For example, if your application only supports Gregorian dates, you could implement a `createCalendar` function like this:
-
-```jsx
-import {useDateFieldState} from '@react-stately/datepicker';
-import {useLocale} from '@react-aria/i18n';
-import {GregorianCalendar} from '@internationalized/date';
-
-function createCalendar(identifier) {
-  switch (identifier) {
-    case 'gregory':
-      return new GregorianCalendar();
-    default:
-      throw new Error(`Unsupported calendar ${identifier}`);
-  }
-}
-
-export function DateField(props) {
-  let {locale} = useLocale();
-  let state = useDateFieldState({
-    ...props,
-    locale,
-    createCalendar
-  });
-
-  // ...
-}
-```
-
-This way, only `GregorianCalendar` is imported, and the other calendar implementations can be tree-shaken.
-
-See the [Calendar](../internationalized/date/Calendar.html) documentation in `@internationalized/date` to learn more about the supported calendar systems, and a list of string identifiers.
diff --git a/packages/react-aria/docs/datepicker/useDatePicker.mdx b/packages/react-aria/docs/datepicker/useDatePicker.mdx
deleted file mode 100644
index 28d7ee42e00..00000000000
--- a/packages/react-aria/docs/datepicker/useDatePicker.mdx
+++ /dev/null
@@ -1,700 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/datepicker';
-import statelyDocs from 'docs:@react-stately/datepicker';
-import i18nDocs from 'docs:@internationalized/date';
-import {FunctionAPI, HeaderInfo, InterfaceType, TypeContext, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/datepicker/package.json';
-import Anatomy from './datepicker-anatomy.svg';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
-import tailwindExample from 'url:./DatePicker-tailwind.png';
-import chakraExample from 'url:./DatePicker-chakra.png';
-
----
-category: Date and Time
-keywords: [input, form, field, date, time]
----
-
-# useDatePicker
-
-<PageDescription>{docs.exports.useDatePicker.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useDatePicker']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useDatePicker} links={docs.links} />
-
-## Features
-
-A date picker can be built using `<input type="date">`, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. `useDatePicker` helps achieve accessible and international date and time pickers that can be styled as needed.
-
-* **Dates and times** – Support for dates and times with configurable granularity.
-* **International** – Support for 13 calendar systems used around the world, including Gregorian, Buddhist, Islamic, Persian, and more. Locale-specific formatting, number systems, hour cycles, and right-to-left support are available as well.
-* **Time zone aware** – Dates and times can optionally include a time zone. All modifications follow time zone rules such as daylight saving time.
-* **Accessible** – Each date and time unit is displayed as an individually focusable and editable segment, which allows users an easy way to edit dates using the keyboard, in any date format and locale. Users can also open a calendar popover to select dates in a standard month grid. Localized screen reader messages are included to announce when the selection and visible date range change.
-* **Touch friendly** – Date segments are editable using an easy to use numeric keypad, and all interactions are accessible using touch-based screen readers.
-* **Customizable** – As with all of React Aria, the DOM structure and styling of all elements can be fully customized.
-
-Read our [blog post](../blog/date-and-time-pickers-for-all) for more details about the internationalization, accessibility, and user experience features implemented by `useDatePicker`.
-
-## Anatomy
-
-<Anatomy
-  role="img"
-  aria-label="Anatomy diagram of an expanded date picker component, which consists of a labelled group containing a date field, and a button that toggles a popover dialog containing a calendar." />
-
-A date picker consists of a label, and group containing a [date field](../DateField/useDateField.html) and a button. Clicking the button opens a popup containing a [calendar](../Calendar/useCalendar.html). The date field includes segments representing each unit of a date and time (e.g. years, months, days, etc.), each of which is individually focusable and editable using the keyboard. The calendar popup offers a more visual way of choosing a date.
-
-`useDatePicker` also supports optional description and error message elements, which can be used
-to provide more context about the field, and any validation messages. These are linked with the
-input via the `aria-describedby` attribute.
-
-`useDatePicker` returns props that you should spread onto the appropriate elements:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useDatePicker.return.id].properties} />
-</TypeContext.Provider>
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useDatePickerState} /> hook from `@react-stately/datepicker`. The state object should be passed as an argument to `useDatePicker`.
-
-If the date picker does not have a visible label, an `aria-label` or `aria-labelledby` prop must be passed instead to
-identify it to assistive technology.
-
-## Date and time values
-
-Dates and times are represented in many different ways by cultures around the world. This includes differences in calendar systems, time zones, daylight saving time rules, date and time formatting, weekday and weekend rules, and much more. When building applications that support users around the world, it is important to handle these aspects correctly for each locale.
-
-<TypeLink links={docs.links} type={docs.exports.useDatePicker} /> uses the [@internationalized/date](../internationalized/date/) library to represent dates and times. This package provides a library of objects and functions to perform date and time related manipulation, queries, and conversions that work across locales and calendars. Date and time objects can be converted to and from native JavaScript `Date` objects or [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) strings. See the [documentation](../internationalized/date/), or the [examples below](#value) for more details.
-
-## Example
-
-A `DatePicker` composes several other components to produce a composite element that can be used to enter dates with a keyboard, or select them on a calendar. The `DateField`, `Popover`, `Calendar`, and `Button` components used in this example are independent and can be used separately from the `DatePicker`. The code is available below, and documentation is available on the corresponding pages.
-
-```tsx example export=true
-import {useDatePickerState} from '@react-stately/datepicker';
-import {useDatePicker} from '@react-aria/datepicker';
-
-// Reuse the DateField, Popover, Dialog, Calendar, and Button from your component library.
-import {DateField, Popover, Dialog, Calendar, Button} from 'your-component-library';
-
-function DatePicker(props) {
-  let state = useDatePickerState(props);
-  let ref = React.useRef(null);
-  let {groupProps, labelProps, fieldProps, buttonProps, dialogProps, calendarProps} = useDatePicker(props, state, ref);
-
-  return (
-    <div style={{display: 'inline-flex', flexDirection: 'column'}}>
-      <div {...labelProps}>{props.label}</div>
-      <div {...groupProps} ref={ref} style={{display: 'flex'}}>
-        <DateField {...fieldProps} />
-        <Button {...buttonProps}>🗓</Button>
-      </div>
-      {state.isOpen &&
-        <Popover state={state} triggerRef={ref} placement="bottom start">
-          <Dialog {...dialogProps}>
-            <Calendar {...calendarProps} firstDayOfWeek={props.firstDayOfWeek} />
-          </Dialog>
-        </Popover>
-      }
-    </div>
-  );
-}
-
-<DatePicker label="Event date" />
-```
-
-### Button
-
-The `Button` component is used in the above example to trigger the calendar popover. It is built using the [useButton](../Button/useButton.html) hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useButton} from '@react-aria/button';
-
-function Button(props) {
-  let ref = React.useRef(null);
-  let {buttonProps} = useButton(props, ref);
-  return <button {...buttonProps} ref={ref}>{props.children}</button>;
-}
-```
-
-</details>
-
-### DateField
-
-The `DateField` component implements the keyboard editable input used in a `DatePicker`. It can also be used standalone, or within a date range picker. See [useDateField](../DateField/useDateField.html) for more examples and documentation.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useLocale} from '@react-aria/i18n';
-import {useDateFieldState} from '@react-stately/datepicker';
-import {useDateField, useDateSegment} from '@react-aria/datepicker';
-
-function DateField(props) {
-  let {locale} = useLocale();
-  let state = useDateFieldState({
-    ...props,
-    locale,
-    createCalendar
-  });
-
-  let ref = React.useRef(null);
-  let {labelProps, fieldProps} = useDateField(props, state, ref);
-
-  return (
-    <div className="wrapper">
-      <span {...labelProps}>{props.label}</span>
-      <div {...fieldProps} ref={ref} className="field">
-        {state.segments.map((segment, i) =>
-          <DateSegment key={i} segment={segment} state={state} />
-        )}
-        {state.isInvalid &&
-          <span aria-hidden="true">🚫</span>
-        }
-      </div>
-    </div>
-  );
-}
-
-function DateSegment({segment, state}) {
-  let ref = React.useRef(null);
-  let {segmentProps} = useDateSegment(segment, state, ref);
-
-  return (
-    <div
-      {...segmentProps}
-      ref={ref}
-      className={`segment ${segment.isPlaceholder ? 'placeholder' : ''}`}>
-      {segment.text}
-    </div>
-  );
-}
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.field {
-  display: inline-flex;
-  padding: 2px 4px;
-  border-radius: 2px;
-  border: 1px solid var(--gray);
-  background: var(--spectrum-global-color-gray-50);
-}
-
-.field:focus-within {
-  border-color: var(--blue);
-}
-
-.segment {
-  padding: 0 2px;
-  font-variant-numeric: tabular-nums;
-  text-align: end;
-}
-
-.segment.placeholder {
-  color: var(--spectrum-gray-600);
-}
-
-.segment:focus {
-  color: white;
-  background: var(--blue);
-  outline: none;
-  border-radius: 2px;
-}
-```
-
-</details>
-
-</details>
-
-### Popover
-
-The `Popover` component is used to contain the popup calendar for the `DatePicker`.
-It can be shared between many other components, including [Select](../Select/useSelect.html),
-[Menu](../Menu/useMenu.html), and others.
-See [usePopover](../Popover/usePopover.html) for more examples of popovers.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import type {AriaPopoverProps} from 'react-aria';
-import type {OverlayTriggerState} from 'react-stately';
-import {usePopover, Overlay, DismissButton} from '@react-aria/overlays';
-
-interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
-  children: React.ReactNode,
-  state: OverlayTriggerState
-}
-
-function Popover({children, state, ...props}: PopoverProps) {
-  let popoverRef = React.useRef(null);
-  let {popoverProps, underlayProps} = usePopover({
-    ...props,
-    popoverRef
-  }, state);
-
-  return (
-    <Overlay>
-      <div {...underlayProps} style={{position: 'fixed', inset: 0}} />
-      <div
-        {...popoverProps}
-        ref={popoverRef}
-        style={{
-          ...popoverProps.style,
-          background: 'var(--page-background)',
-          border: '1px solid gray'
-        }}>
-        <DismissButton onDismiss={state.close} />
-        {children}
-        <DismissButton onDismiss={state.close} />
-      </div>
-    </Overlay>
-  );
-}
-```
-
-</details>
-
-### Dialog
-
-The `Dialog` component is rendered within the `Popover` component. It is built using the [useDialog](../Modal/useDialog.html) hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import type {AriaDialogProps} from '@react-aria/dialog';
-import {useDialog} from '@react-aria/dialog';
-
-interface DialogProps extends AriaDialogProps {
-  title?: React.ReactNode,
-  children: React.ReactNode
-}
-
-function Dialog({title, children, ...props}: DialogProps) {
-  let ref = React.useRef(null);
-  let {dialogProps, titleProps} = useDialog(props, ref);
-
-  return (
-    <div {...dialogProps} ref={ref} style={{padding: 30}}>
-      {title &&
-        <h3 {...titleProps} style={{marginTop: 0}}>
-          {title}
-        </h3>
-      }
-      {children}
-    </div>
-  );
-}
-```
-
-</details>
-
-### Calendar
-
-The `Calendar` component implements the month grid shown within the `DatePicker` popover. It can also be used standalone, or within other components. See [useCalendar](../Calendar/useCalendar.html) for more examples and documentation.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useCalendarState} from '@react-stately/calendar';
-import {useCalendar, useCalendarGrid, useCalendarCell} from '@react-aria/calendar';
-import {createCalendar, getWeeksInMonth} from '@internationalized/date';
-
-function Calendar(props) {
-  let {locale} = useLocale();
-  let state = useCalendarState({
-    ...props,
-    locale,
-    createCalendar
-  });
-
-  let {calendarProps, prevButtonProps, nextButtonProps, title} = useCalendar(props, state);
-
-  return (
-    <div {...calendarProps} className="calendar">
-      <div className="header">
-        <h2>{title}</h2>
-        <Button {...prevButtonProps}>&lt;</Button>
-        <Button {...nextButtonProps}>&gt;</Button>
-      </div>
-      <CalendarGrid state={state} firstDayOfWeek={props.firstDayOfWeek} />
-    </div>
-  );
-}
-
-function CalendarGrid({state, ...props}) {
-  let {locale} = useLocale();
-  let {gridProps, headerProps, weekDays} = useCalendarGrid(props, state);
-
-  // Get the number of weeks in the month so we can render the proper number of rows.
-  let weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
-
-  return (
-    <table {...gridProps}>
-      <thead {...headerProps}>
-        <tr>
-          {weekDays.map((day, index) =>
-            <th key={index}>{day}</th>
-          )}
-        </tr>
-      </thead>
-      <tbody>
-        {[...new Array(weeksInMonth).keys()].map(weekIndex => (
-          <tr key={weekIndex}>
-            {state.getDatesInWeek(weekIndex).map((date, i) => (
-              date ? (
-                <CalendarCell
-                  key={i}
-                  state={state}
-                  date={date} />
-              ) : <td key={i} />
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}
-
-function CalendarCell({state, date}) {
-  let ref = React.useRef(null);
-  let {
-    cellProps,
-    buttonProps,
-    isSelected,
-    isOutsideVisibleRange,
-    isDisabled,
-    isUnavailable,
-    formattedDate
-  } = useCalendarCell({date}, state, ref);
-
-  return (
-    <td {...cellProps}>
-      <div
-        {...buttonProps}
-        ref={ref}
-        hidden={isOutsideVisibleRange}
-        className={`cell ${isSelected ? 'selected' : ''} ${isDisabled ? 'disabled' : ''} ${isUnavailable ? 'unavailable' : ''}`}>
-        {formattedDate}
-      </div>
-    </td>
-  );
-}
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.calendar {
-  width: 220px;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin: 0 8px;
-}
-
-.header h2 {
-  flex: 1;
-  margin: 0;
-}
-
-.calendar table {
-  width: 100%;
-}
-
-.cell {
-  cursor: default;
-  text-align: center;
-}
-
-.selected {
-  background: var(--blue);
-  color: white;
-}
-
-.unavailable {
-  color: var(--spectrum-global-color-red-600);
-}
-
-.disabled {
-  color: gray;
-}
-```
-
-</details>
-
-</details>
-
-## Styled examples
-
-<ExampleCard
-  url="https://codesandbox.io/p/sandbox/great-dawn-s7d8th?file=/src/DatePicker.js"
-  preview={tailwindExample}
-  title="Tailwind CSS"
-  description="A date picker built with Tailwind and React Aria." />
-
-<ExampleCard
-  url="https://codesandbox.io/p/sandbox/competent-tharp-zs37w9?file=/src/DatePicker.js"
-  preview={chakraExample}
-  title="Chakra UI"
-  description="A date and time picker built with Chakra UI and React Aria." />
-
-## Usage
-
-The following examples show how to use the `DatePicker` component created in the above example.
-
-### Value
-
-A `DatePicker` displays a placeholder by default. An initial, uncontrolled value can be provided to the `DatePicker` using the `defaultValue` prop. Alternatively, a controlled value can be provided using the `value` prop.
-
-Date values are provided using objects in the [@internationalized/date](../internationalized/date/) package. This library handles correct international date manipulation across calendars, time zones, and other localization concerns. `useDatePicker` supports values of the following types:
-
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.CalendarDate} /> – a date without any time components. May be parsed from a string representation using the <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseDate} /> function. Use this type to represent dates where the time is not important, such as a birthday or an all day calendar event.
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.CalendarDateTime} /> – a date with a time, but not in any specific time zone. May be parsed from a string representation using the <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseDateTime} /> function. Use this type to represent times that occur at the same local time regardless of the time zone, such as the time of New Years Eve fireworks which always occur at midnight. Most times are better stored as a `ZonedDateTime`.
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.ZonedDateTime} /> – a date with a time in a specific time zone. May be parsed from a string representation using the <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseZonedDateTime} />, <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseAbsolute} />, or <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseAbsoluteToLocal} /> functions. Use this type to represent an exact moment in time at a particular location on Earth.
-
-```tsx example
-import {parseDate} from '@internationalized/date';
-
-function Example() {
-  let [value, setValue] = React.useState(parseDate('2020-02-03'));
-
-  return (
-    <>
-      <DatePicker
-        label="Date (uncontrolled)"
-        defaultValue={parseDate('2020-02-03')} />
-      <DatePicker
-        label="Date (controlled)"
-        value={value}
-        onChange={setValue} />
-    </>
-  );
-}
-```
-
-### Events
-
-`useDatePicker` accepts an `onChange` prop which is triggered whenever the date is edited by the user. The example below uses `onChange` to update a separate element with a formatted version of the date in the user's locale and local time zone. This is done by converting the date to a native JavaScript `Date` object to pass to the formatter.
-
-```tsx example
-import {getLocalTimeZone} from '@internationalized/date';
-import {useDateFormatter} from '@react-aria/i18n';
-
-function Example() {
-  let [date, setDate] = React.useState(parseDate('1985-07-03'));
-  let formatter = useDateFormatter({dateStyle: 'full'});
-
-  return (
-    <>
-      <DatePicker label="Birth date" value={date} onChange={setDate} />
-      <p>Selected date: {date ? formatter.format(date.toDate(getLocalTimeZone())) : '--'}</p>
-    </>
-  );
-}
-```
-
-### Time zones
-
-`useDatePicker` is time zone aware when a <TypeLink links={i18nDocs.links} type={i18nDocs.exports.ZonedDateTime} /> object is provided as the value. In this case, the time zone abbreviation is displayed, and time zone concerns such as daylight saving time are taken into account when the value is manipulated.
-
-In most cases, your data will come from and be sent to a server as an [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) formatted string. [@internationalized/date](../internationalized/date/) includes functions for parsing strings in multiple formats into <TypeLink links={i18nDocs.links} type={i18nDocs.exports.ZonedDateTime} /> objects. Which format you use will depend on what information you need to store.
-
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseZonedDateTime} /> – This function parses a date with an explicit time zone and optional UTC offset attached (e.g. `"2021-11-07T00:45[America/Los_Angeles]"` or `"2021-11-07T00:45-07:00[America/Los_Angeles]"`). This format preserves the maximum amount of information. If the exact local time and time zone that a user selected is important, use this format. Storing the time zone and offset that was selected rather than converting to UTC ensures that the local time is correct regardless of daylight saving rule changes (e.g. if a locale abolishes DST). Examples where this applies include calendar events, reminders, and other times that occur in a particular location.
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseAbsolute} /> – This function parses an absolute date and time that occurs at the same instant at all locations on Earth. It can be represented in UTC (e.g. `"2021-11-07T07:45:00Z"`), or stored with a particular offset (e.g. `"2021-11-07T07:45:00-07:00"`). A time zone identifier, e.g. `America/Los_Angeles`, must be passed, and the result will be converted into that time zone. Absolute times are the best way to represent events that occurred in the past, or future events where an exact time is needed, regardless of time zone.
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseAbsoluteToLocal} /> – This function parses an absolute date and time into the current user's local time zone. It is a shortcut for `parseAbsolute`, and accepts the same formats.
-
-```tsx example
-import {parseZonedDateTime} from '@internationalized/date';
-
-<DatePicker
-  label="Event date"
-  defaultValue={parseZonedDateTime('2022-11-07T00:45[America/Los_Angeles]')} />
-```
-
-`useDatePicker` displays times in the time zone included in the `ZonedDateTime` object. The above example is always displayed in Pacific Standard Time because the `America/Los_Angeles` time zone identifier is provided. [@internationalized/date](../internationalized/date/) includes functions for converting dates between time zones, or parsing a date directly into a specific time zone or the user's local time zone, as shown below.
-
-```tsx example
-import {parseAbsoluteToLocal} from '@internationalized/date';
-
-<DatePicker
-  label="Event date"
-  defaultValue={parseAbsoluteToLocal('2021-11-07T07:45:00Z')}
-/>
-```
-
-### Granularity
-
-The `granularity` prop allows you to control the smallest unit that is displayed by `useDatePicker`. By default, `CalendarDate` values are displayed with `"day"` granularity (year, month, and day), and `CalendarDateTime` and `ZonedDateTime` values are displayed with `"minute"` granularity. More granular time values can be displayed by setting the `granularity` prop to `"second"`.
-
-In addition, when a value with a time is provided but you wish to only display the date, you can set the granularity to `"day"`. This has no effect on the actual value (it still has a time component), only on what fields are displayed. In the following example, two DatePickers are synchronized with the same value, but display different granularities.
-
-```tsx example
-function Example() {
-  let [date, setDate] = React.useState(parseAbsoluteToLocal('2021-04-07T18:45:22Z'));
-
-  return (
-    <>
-      <DatePicker
-        label="Date and time"
-        granularity="second"
-        value={date}
-        onChange={setDate} />
-      <DatePicker
-        label="Date"
-        granularity="day"
-        value={date}
-        onChange={setDate} />
-    </>
-  );
-}
-```
-
-If no `value` or `defaultValue` prop is passed, then the `granularity` prop also affects which type of value is emitted from the `onChange` event. Note that by default, time values will not have a time zone because none was supplied. You can override this by setting the `placeholderValue` prop explicitly. Values emitted from `onChange` will use the time zone of the placeholder value.
-
-```tsx example
-import {now} from '@internationalized/date';
-
-<DatePicker
-  label="Event date"
-  granularity="second" />
-<DatePicker
-  label="Event date"
-  placeholderValue={now('America/New_York')}
-  granularity="second" />
-```
-
-### International calendars
-
-`useDatePicker` supports selecting dates in many calendar systems used around the world, including Gregorian, Hebrew, Indian, Islamic, Buddhist, and more. Dates are automatically displayed in the appropriate calendar system for the user's locale. The calendar system can be overridden using the [Unicode calendar locale extension](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar#adding_a_calendar_in_the_locale_string), passed to the [I18nProvider](../I18nProvider) component.
-
-Selected dates passed to `onChange` always use the same calendar system as the `value` or `defaultValue` prop. If no `value` or `defaultValue` is provided, then dates passed to `onChange` are always in the Gregorian calendar since this is the most commonly used. This means that even though the user selects dates in their local calendar system, applications are able to deal with dates from all users consistently.
-
-The below example displays a `DatePicker` in the Hindi language, using the Indian calendar. Dates emitted from `onChange` are in the Gregorian calendar.
-
-```tsx example
-import {I18nProvider} from '@react-aria/i18n';
-
-function Example() {
-  let [date, setDate] = React.useState(null);
-  return (
-    <I18nProvider locale="hi-IN-u-ca-indian">
-      <DatePicker label="Date" value={date} onChange={setDate} />
-      <p>Selected date: {date?.toString()}</p>
-    </I18nProvider>
-  );
-}
-```
-
-### Minimum and maximum values
-
-The `minValue` and `maxValue` props can also be used to perform builtin validation. This prevents the user from selecting dates outside the valid range in the calendar, and marks the date field as invalid using ARIA. You should implement a visual indication that the date picker is invalid as well.
-
-This example only accepts dates after today.
-
-```tsx example
-import {today} from '@internationalized/date';
-
-<DatePicker
-  label="Appointment date"
-  minValue={today(getLocalTimeZone())}
-  defaultValue={parseDate('2022-02-03')} />
-```
-
-### Unavailable dates
-
-`useDatePicker` supports marking certain dates as _unavailable_. These dates remain focusable with the keyboard in the calendar so that navigation is consistent, but cannot be selected by the user. When an unavailable date is entered into the date field, it is marked as invalid. The `isDateUnavailable` prop accepts a callback that is called to evaluate whether each visible date is unavailable.
-
-This example includes multiple unavailable date ranges, e.g. dates when no appointments are available. In addition, all weekends are unavailable. The `minValue` prop is also used to prevent selecting dates before today.
-
-```tsx example
-import {today, isWeekend} from '@internationalized/date';
-import {useLocale} from '@react-aria/i18n';
-
-function Example() {
-  let now = today(getLocalTimeZone());
-  let disabledRanges = [
-    [now, now.add({days: 5})],
-    [now.add({days: 14}), now.add({days: 16})],
-    [now.add({days: 23}), now.add({days: 24})],
-  ];
-
-  let {locale} = useLocale();
-  let isDateUnavailable = (date) => isWeekend(date, locale) || disabledRanges.some((interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0);
-
-  return <DatePicker label="Appointment date" minValue={today(getLocalTimeZone())} isDateUnavailable={isDateUnavailable} />
-}
-```
-
-### Placeholder value
-
-When no value is set, a placeholder is shown. The format of the placeholder is influenced by the `granularity` and `placeholderValue` props. `placeholderValue` also controls the default values of each segment when the user first interacts with them, e.g. using the up and down arrow keys, as well as the default month shown in the calendar popover. By default, the `placeholderValue` is the current date at midnight, but you can set it to a more appropriate value if needed.
-
-```tsx example
-import {CalendarDate} from '@internationalized/date';
-
-<DatePicker label="Birth date" placeholderValue={new CalendarDate(1980, 1, 1)} />
-```
-
-### Hide time zone
-
-When a `ZonedDateTime` object is provided as the value to `useDatePicker`, the time zone abbreviation is displayed by default. However, if this is displayed elsewhere or implicit based on the usecase, it can be hidden using the `hideTimeZone` option.
-
-```tsx example
-<DatePicker
-  label="Appointment time"
-  defaultValue={parseZonedDateTime('2022-11-07T10:45[America/Los_Angeles]')}
-  hideTimeZone />
-```
-
-### Hour cycle
-
-By default, `useDatePicker` displays times in either 12 or 24 hour hour format depending on the user's locale. However, this can be overridden using the `hourCycle` prop if needed for a specific usecase. This example forces `useDatePicker` to use 24-hour time, regardless of the locale.
-
-```tsx example
-<DatePicker
-  label="Appointment time"
-  granularity="minute"
-  hourCycle={24} />
-```
-
-### Custom first day of week
-
-By default, the first day of the week is automatically set based on the current locale. This can be changed by setting the `firstDayOfWeek` prop to `'sun'`, `'mon'`, `'tue'`, `'wed'`, `'thu'`, `'fri'`, or `'sat'`.
-
-```tsx example
-<DatePicker label="Appointment time" firstDayOfWeek="mon" />
-```
\ No newline at end of file
diff --git a/packages/react-aria/docs/datepicker/useDateRangePicker.mdx b/packages/react-aria/docs/datepicker/useDateRangePicker.mdx
deleted file mode 100644
index 6e0fa84aec9..00000000000
--- a/packages/react-aria/docs/datepicker/useDateRangePicker.mdx
+++ /dev/null
@@ -1,765 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/datepicker';
-import statelyDocs from 'docs:@react-stately/datepicker';
-import i18nDocs from 'docs:@internationalized/date';
-import {FunctionAPI, HeaderInfo, InterfaceType, TypeContext, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/datepicker/package.json';
-import Anatomy from './daterangepicker-anatomy.svg';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
-import tailwindExample from 'url:./DateRangePicker-tailwind.png';
-import chakraExample from 'url:./DateRangePicker-chakra.png';
-
----
-category: Date and Time
-keywords: [input, form, field, date, time]
----
-
-# useDateRangePicker
-
-<PageDescription>{docs.exports.useDateRangePicker.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useDateRangePicker']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useDateRangePicker} links={docs.links} />
-
-## Features
-
-A date range picker can be built using two separate `<input type="date">` elements, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. `useDateRangePicker` helps achieve accessible and international date and time range pickers that can be styled as needed.
-
-* **Dates and times** – Support for dates and times with configurable granularity.
-* **International** – Support for 13 calendar systems used around the world, including Gregorian, Buddhist, Islamic, Persian, and more. Locale-specific formatting, number systems, hour cycles, and right-to-left support are available as well.
-* **Time zone aware** – Dates and times can optionally include a time zone. All modifications follow time zone rules such as daylight saving time.
-* **Accessible** – Each date and time unit is displayed as an individually focusable and editable segment, which allows users an easy way to edit dates using the keyboard, in any date format and locale. Users can also open a calendar popover to select date ranges in a standard month grid. Localized screen reader messages are included to announce when the selection and visible date range change.
-* **Touch friendly** – Date segments are editable using an easy to use numeric keypad, date ranges can be selected by dragging over dates in the calendar using a touch screen, and all interactions are accessible using touch-based screen readers.
-* **Customizable** – As with all of React Aria, the DOM structure and styling of all elements can be fully customized.
-
-Read our [blog post](../blog/date-and-time-pickers-for-all) for more details about the internationalization, accessibility, and user experience features implemented by `useDateRangePicker`.
-
-## Anatomy
-
-<Anatomy
-  role="img"
-  aria-label="Anatomy diagram of an expanded date range picker component, which consists of a labelled group containing a start date field, an end date field, and a button that toggles a popover dialog containing a range calendar." />
-
-A date range picker consists of a label, and group containing two [date fields](../DateField/useDateField.html) and a button. Clicking the button opens a popup containing a [range calendar](../RangeCalendar/useRangeCalendar.html). The date fields include segments representing each unit of a date and time (e.g. years, months, days, etc.), each of which is individually focusable and editable using the keyboard. The calendar popup offers a more visual way of choosing a date range.
-
-`useDateRangePicker` also supports optional description and error message elements, which can be used
-to provide more context about the field, and any validation messages. These are linked with the
-input via the `aria-describedby` attribute.
-
-`useDateRangePicker` returns props that you should spread onto the appropriate elements:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useDateRangePicker.return.id].properties} />
-</TypeContext.Provider>
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useDateRangePickerState} /> hook from `@react-stately/datepicker`. The state object should be passed as an argument to `useDateRangePicker`.
-
-If the date range picker does not have a visible label, an `aria-label` or `aria-labelledby` prop must be passed instead to
-identify it to assistive technology.
-
-## Date and time values
-
-Dates and times are represented in many different ways by cultures around the world. This includes differences in calendar systems, time zones, daylight saving time rules, date and time formatting, weekday and weekend rules, and much more. When building applications that support users around the world, it is important to handle these aspects correctly for each locale.
-
-<TypeLink links={docs.links} type={docs.exports.useDateRangePicker} /> uses the [@internationalized/date](../internationalized/date/) library to represent dates and times. This package provides a library of objects and functions to perform date and time related manipulation, queries, and conversions that work across locales and calendars. Date and time objects can be converted to and from native JavaScript `Date` objects or [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) strings. See the [documentation](../internationalized/date/), or the [examples below](#value) for more details.
-
-## Example
-
-A `DateRangePicker` composes several other components to produce a composite element that can be used to enter date ranges with a keyboard, or select them on a calendar. The `DateField`, `Popover`, `Calendar`, and `Button` components used in this example are independent and can be used separately from the `DateRangePicker`. The code is available below, and documentation is available on the corresponding pages.
-
-```tsx example export=true
-import {useDateRangePickerState} from '@react-stately/datepicker';
-import {useDateRangePicker} from '@react-aria/datepicker';
-
-// Reuse the DateField, Popover, Dialog, RangeCalendar, and Button from your component library.
-import {DateField, Popover, Dialog, RangeCalendar, Button} from 'your-component-library';
-
-function DateRangePicker(props) {
-  let state = useDateRangePickerState(props);
-  let ref = React.useRef(null);
-  let {labelProps, groupProps, startFieldProps, endFieldProps, buttonProps, dialogProps, calendarProps} = useDateRangePicker(props, state, ref);
-
-  return (
-    <div style={{display: 'inline-flex', flexDirection: 'column'}}>
-      <span {...labelProps}>{props.label}</span>
-      <div {...groupProps} ref={ref} style={{display: 'flex'}}>
-        <div className="field">
-          <DateField {...startFieldProps} />
-          <span style={{padding: '0 4px'}}>–</span>
-          <DateField {...endFieldProps} />
-          {state.isInvalid &&
-            <span aria-hidden="true">🚫</span>
-          }
-        </div>
-        <Button {...buttonProps}>🗓</Button>
-      </div>
-      {state.isOpen &&
-        <Popover state={state} triggerRef={ref} placement="bottom start">
-          <Dialog {...dialogProps}>
-            <RangeCalendar {...calendarProps} firstDayOfWeek={props.firstDayOfWeek} />
-          </Dialog>
-        </Popover>
-      }
-    </div>
-  );
-}
-
-<DateRangePicker label="Event date" />
-```
-
-### Button
-
-The `Button` component is used in the above example to trigger the calendar popover. It is built using the [useButton](../Button/useButton.html) hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useButton} from '@react-aria/button';
-
-function Button(props) {
-  let ref = React.useRef(null);
-  let {buttonProps} = useButton(props, ref);
-  return <button {...buttonProps} ref={ref}>{props.children}</button>;
-}
-```
-
-</details>
-
-### DateField
-
-The `DateField` component implements the keyboard editable inputs used in a `DateRangePicker`. It can also be used standalone, or within a single date picker. See [useDateField](../DateField/useDateField.html) for more examples and documentation.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useLocale} from '@react-aria/i18n';
-import {useDateFieldState} from '@react-stately/datepicker';
-import {useDateField, useDateSegment} from '@react-aria/datepicker';
-
-function DateField(props) {
-  let {locale} = useLocale();
-  let state = useDateFieldState({
-    ...props,
-    locale,
-    createCalendar
-  });
-
-  let ref = React.useRef(null);
-  let {labelProps, fieldProps} = useDateField(props, state, ref);
-
-  return (
-    <div className="wrapper">
-      <span {...labelProps}>{props.label}</span>
-      <div {...fieldProps} ref={ref} className="field">
-        {state.segments.map((segment, i) =>
-          <DateSegment key={i} segment={segment} state={state} />
-        )}
-      </div>
-    </div>
-  );
-}
-
-function DateSegment({segment, state}) {
-  let ref = React.useRef(null);
-  let {segmentProps} = useDateSegment(segment, state, ref);
-
-  return (
-    <div
-      {...segmentProps}
-      ref={ref}
-      className={`segment ${segment.isPlaceholder ? 'placeholder' : ''}`}>
-      {segment.text}
-    </div>
-  );
-}
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.field {
-  display: inline-flex;
-  padding: 2px 4px;
-  border-radius: 2px;
-  border: 1px solid var(--gray);
-  background: var(--spectrum-global-color-gray-50);
-  max-width: 100%;
-  overflow: auto;
-}
-
-.field:focus-within {
-  border-color: var(--blue);
-}
-
-.field .field {
-  all: initial;
-  display: inline-flex;
-  color: inherit;
-}
-
-.segment {
-  padding: 0 2px;
-  font-variant-numeric: tabular-nums;
-  text-align: end;
-}
-
-.segment.placeholder {
-  color: var(--spectrum-gray-600);
-}
-
-.segment:focus {
-  color: white;
-  background: var(--blue);
-  outline: none;
-  border-radius: 2px;
-}
-```
-
-</details>
-
-</details>
-
-### Popover
-
-The `Popover` component is used to contain the popup calendar for the `DateRangePicker`.
-It can be shared between many other components, including [Select](../Select/useSelect.html),
-[Menu](../Menu/useMenu.html), and others.
-See [usePopover](../Popover/usePopover.html) for more examples of popovers.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import type {AriaPopoverProps} from 'react-aria';
-import type {OverlayTriggerState} from 'react-stately';
-import {usePopover, Overlay, DismissButton} from '@react-aria/overlays';
-
-interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
-  children: React.ReactNode,
-  state: OverlayTriggerState
-}
-
-function Popover({children, state, ...props}: PopoverProps) {
-  let popoverRef = React.useRef(null);
-  let {popoverProps, underlayProps} = usePopover({
-    ...props,
-    popoverRef
-  }, state);
-
-  return (
-    <Overlay>
-      <div {...underlayProps} style={{position: 'fixed', inset: 0}} />
-      <div
-        {...popoverProps}
-        ref={popoverRef}
-        style={{
-          ...popoverProps.style,
-          background: 'var(--page-background)',
-          border: '1px solid gray'
-        }}>
-        <DismissButton onDismiss={state.close} />
-        {children}
-        <DismissButton onDismiss={state.close} />
-      </div>
-    </Overlay>
-  );
-}
-```
-
-</details>
-
-### Dialog
-
-The `Dialog` component is rendered within the `Popover` component. It is built using the [useDialog](../Modal/useDialog.html) hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import type {AriaDialogProps} from '@react-aria/dialog';
-import {useDialog} from '@react-aria/dialog';
-
-interface DialogProps extends AriaDialogProps {
-  title?: React.ReactNode,
-  children: React.ReactNode
-}
-
-function Dialog({title, children, ...props}: DialogProps) {
-  let ref = React.useRef(null);
-  let {dialogProps, titleProps} = useDialog(props, ref);
-
-  return (
-    <div {...dialogProps} ref={ref} style={{padding: 30}}>
-      {title &&
-        <h3 {...titleProps} style={{marginTop: 0}}>
-          {title}
-        </h3>
-      }
-      {children}
-    </div>
-  );
-}
-```
-
-</details>
-
-### RangeCalendar
-
-The `RangeCalendar` component implements the month grid shown within the `DateRangePicker` popover. It can also be used standalone, or within other components. See [useRangeCalendar](../RangeCalendar/useRangeCalendar.html) for more examples and documentation.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useRangeCalendarState} from '@react-stately/calendar';
-import {useRangeCalendar, useCalendarGrid, useCalendarCell} from '@react-aria/calendar';
-import {createCalendar, getWeeksInMonth} from '@internationalized/date';
-
-function RangeCalendar(props) {
-  let {locale} = useLocale();
-  let state = useRangeCalendarState({
-    ...props,
-    locale,
-    createCalendar
-  });
-
-  let ref = React.useRef(null);
-  let {calendarProps, prevButtonProps, nextButtonProps, title} = useRangeCalendar(props, state, ref);
-
-  return (
-    <div {...calendarProps} ref={ref} className="calendar">
-      <div className="header">
-        <h2>{title}</h2>
-        <Button {...prevButtonProps}>&lt;</Button>
-        <Button {...nextButtonProps}>&gt;</Button>
-      </div>
-      <CalendarGrid state={state} firstDayOfWeek={props.firstDayOfWeek} />
-    </div>
-  );
-}
-
-function CalendarGrid({state, ...props}) {
-  let {locale} = useLocale();
-  let {gridProps, headerProps, weekDays} = useCalendarGrid(props, state);
-
-  // Get the number of weeks in the month so we can render the proper number of rows.
-  let weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale, props.firstDayOfWeek);
-
-  return (
-    <table {...gridProps}>
-      <thead {...headerProps}>
-        <tr>
-          {weekDays.map((day, index) =>
-            <th key={index}>{day}</th>
-          )}
-        </tr>
-      </thead>
-      <tbody>
-        {[...new Array(weeksInMonth).keys()].map(weekIndex => (
-          <tr key={weekIndex}>
-            {state.getDatesInWeek(weekIndex).map((date, i) => (
-              date ? (
-                <CalendarCell
-                  key={i}
-                  state={state}
-                  date={date} />
-              ) : <td key={i} />
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}
-
-function CalendarCell({state, date}) {
-  let ref = React.useRef(null);
-  let {
-    cellProps,
-    buttonProps,
-    isSelected,
-    isOutsideVisibleRange,
-    isDisabled,
-    isUnavailable,
-    formattedDate
-  } = useCalendarCell({date}, state, ref);
-
-  return (
-    <td {...cellProps}>
-      <div
-        {...buttonProps}
-        ref={ref}
-        hidden={isOutsideVisibleRange}
-        className={`cell ${isSelected ? 'selected' : ''} ${isDisabled ? 'disabled' : ''} ${isUnavailable ? 'unavailable' : ''}`}>
-        {formattedDate}
-      </div>
-    </td>
-  );
-}
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.calendar {
-  width: 220px;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin: 0 8px;
-}
-
-.header h2 {
-  flex: 1;
-  margin: 0;
-}
-
-.calendar table {
-  width: 100%;
-}
-
-.cell {
-  cursor: default;
-  text-align: center;
-}
-
-.selected {
-  background: var(--blue);
-  color: white;
-}
-
-.unavailable {
-  color: var(--spectrum-global-color-red-600);
-}
-
-.disabled {
-  color: gray;
-}
-```
-
-</details>
-
-</details>
-
-## Styled examples
-
-<ExampleCard
-  url="https://codesandbox.io/p/sandbox/great-dawn-s7d8th?file=/src/DateRangePicker.js"
-  preview={tailwindExample}
-  title="Tailwind CSS"
-  description="A date range picker built with Tailwind and React Aria." />
-
-<ExampleCard
-  url="https://codesandbox.io/p/sandbox/competent-tharp-zs37w9?file=/src/DateRangePicker.js"
-  preview={chakraExample}
-  title="Chakra UI"
-  description="A date and time range picker built with Chakra UI and React Aria." />
-
-## Usage
-
-The following examples show how to use the `DateRangePicker` component created in the above example.
-
-### Value
-
-A `DateRangePicker` displays a placeholder by default. An initial, uncontrolled value can be provided to the `DateRangePicker` using the `defaultValue` prop. Alternatively, a controlled value can be provided using the `value` prop.
-
-Date ranges are objects with `start` and `end` properties containing date values, which are provided using objects in the [@internationalized/date](../internationalized/date/) package. This library handles correct international date manipulation across calendars, time zones, and other localization concerns. `useDateRangePicker` supports values of the following types:
-
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.CalendarDate} /> – a date without any time components. May be parsed from a string representation using the <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseDate} /> function. Use this type to represent dates where the time is not important, such as a birthday or an all day calendar event.
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.CalendarDateTime} /> – a date with a time, but not in any specific time zone. May be parsed from a string representation using the <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseDateTime} /> function. Use this type to represent times that occur at the same local time regardless of the time zone, such as the time of New Years Eve fireworks which always occur at midnight. Most times are better stored as a `ZonedDateTime`.
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.ZonedDateTime} /> – a date with a time in a specific time zone. May be parsed from a string representation using the <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseZonedDateTime} />, <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseAbsolute} />, or <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseAbsoluteToLocal} /> functions. Use this type to represent an exact moment in time at a particular location on Earth.
-
-```tsx example
-import {parseDate} from '@internationalized/date';
-
-function Example() {
-  let [value, setValue] = React.useState({
-    start: parseDate('2020-02-03'),
-    end: parseDate('2020-02-08')
-  });
-
-  return (
-    <>
-      <DateRangePicker
-        label="Date range (uncontrolled)"
-        defaultValue={{
-          start: parseDate('2020-02-03'),
-          end: parseDate('2020-02-08')
-        }} />
-      <DateRangePicker
-        label="Date range (controlled)"
-        value={value}
-        onChange={setValue} />
-    </>
-  );
-}
-```
-
-### Events
-
-`useDateRangePicker` accepts an `onChange` prop which is triggered whenever the start or end date is edited by the user. The example below uses `onChange` to update a separate element with a formatted version of the date range in the user's locale and local time zone. This is done by converting the dates to native JavaScript `Date` objects to pass to the formatter.
-
-```tsx example
-import {getLocalTimeZone} from '@internationalized/date';
-import {useDateFormatter} from '@react-aria/i18n';
-
-function Example() {
-  let [range, setRange] = React.useState({
-    start: parseDate('2020-07-03'),
-    end: parseDate('2020-07-10')
-  });
-  let formatter = useDateFormatter({dateStyle: 'long'});
-
-  return (
-    <>
-      <DateRangePicker label="Date range" value={range} onChange={setRange} />
-      <p>Selected date: {range ? formatter.formatRange(range.start.toDate(getLocalTimeZone()), range.end.toDate(getLocalTimeZone())) : '--'}</p>
-    </>
-  );
-}
-```
-
-### Time zones
-
-`useDateRangePicker` is time zone aware when <TypeLink links={i18nDocs.links} type={i18nDocs.exports.ZonedDateTime} /> objects are provided as the value. In this case, the time zone abbreviation is displayed, and time zone concerns such as daylight saving time are taken into account when the value is manipulated.
-
-In most cases, your data will come from and be sent to a server as an [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) formatted string. [@internationalized/date](../internationalized/date/) includes functions for parsing strings in multiple formats into <TypeLink links={i18nDocs.links} type={i18nDocs.exports.ZonedDateTime} /> objects. Which format you use will depend on what information you need to store.
-
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseZonedDateTime} /> – This function parses a date with an explicit time zone and optional UTC offset attached (e.g. `"2021-11-07T00:45[America/Los_Angeles]"` or `"2021-11-07T00:45-07:00[America/Los_Angeles]"`). This format preserves the maximum amount of information. If the exact local time and time zone that a user selected is important, use this format. Storing the time zone and offset that was selected rather than converting to UTC ensures that the local time is correct regardless of daylight saving rule changes (e.g. if a locale abolishes DST). Examples where this applies include calendar events, reminders, and other times that occur in a particular location.
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseAbsolute} /> – This function parses an absolute date and time that occurs at the same instant at all locations on Earth. It can be represented in UTC (e.g. `"2021-11-07T07:45:00Z"`), or stored with a particular offset (e.g. `"2021-11-07T07:45:00-07:00"`). A time zone identifier, e.g. `America/Los_Angeles`, must be passed, and the result will be converted into that time zone. Absolute times are the best way to represent events that occurred in the past, or future events where an exact time is needed, regardless of time zone.
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseAbsoluteToLocal} /> – This function parses an absolute date and time into the current user's local time zone. It is a shortcut for `parseAbsolute`, and accepts the same formats.
-
-```tsx example
-import {parseZonedDateTime} from '@internationalized/date';
-
-<DateRangePicker
-  label="Date range"
-  defaultValue={{
-    start: parseZonedDateTime('2022-11-07T00:45[America/Los_Angeles]'),
-    end: parseZonedDateTime('2022-11-08T11:15[America/Los_Angeles]')
-  }} />
-```
-
-`useDateRangePicker` displays times in the time zone included in the `ZonedDateTime` object. The above example is always displayed in Pacific Standard Time because the `America/Los_Angeles` time zone identifier is provided. [@internationalized/date](../internationalized/date/) includes functions for converting dates between time zones, or parsing a date directly into a specific time zone or the user's local time zone, as shown below.
-
-```tsx example
-import {parseAbsoluteToLocal} from '@internationalized/date';
-
-<DateRangePicker
-  label="Date range"
-  defaultValue={{
-    start: parseAbsoluteToLocal('2021-11-07T07:45:00Z'),
-    end: parseAbsoluteToLocal('2021-11-08T14:25:00Z')
-  }}
-/>
-```
-
-### Granularity
-
-The `granularity` prop allows you to control the smallest unit that is displayed by `useDateRangePicker`. By default, `CalendarDate` values are displayed with `"day"` granularity (year, month, and day), and `CalendarDateTime` and `ZonedDateTime` values are displayed with `"minute"` granularity. More granular time values can be displayed by setting the `granularity` prop to `"second"`.
-
-In addition, when a value with a time is provided but you wish to only display the date, you can set the granularity to `"day"`. This has no effect on the actual value (it still has a time component), only on what fields are displayed. In the following example, two DateRangePickers are synchronized with the same value, but display different granularities.
-
-```tsx example
-function Example() {
-  let [date, setDate] = React.useState({
-    start: parseAbsoluteToLocal('2021-04-07T18:45:22Z'),
-    end: parseAbsoluteToLocal('2021-04-08T20:00:00Z')
-  });
-
-  return (
-    <>
-      <DateRangePicker
-        label="Date and time range"
-        granularity="second"
-        value={date}
-        onChange={setDate} />
-      <DateRangePicker
-        label="Date range"
-        granularity="day"
-        value={date}
-        onChange={setDate} />
-    </>
-  );
-}
-```
-
-
-If no `value` or `defaultValue` prop is passed, then the `granularity` prop also affects which type of value is emitted from the `onChange` event. Note that by default, time values will not have a time zone because none was supplied. You can override this by setting the `placeholderValue` prop explicitly. Values emitted from `onChange` will use the time zone of the placeholder value.
-
-```tsx example
-import {now} from '@internationalized/date';
-
-<DateRangePicker
-  label="Date range"
-  granularity="second" />
-<DateRangePicker
-  label="Date range"
-  placeholderValue={now('America/New_York')}
-  granularity="second" />
-```
-
-### International calendars
-
-`useDateRangePicker` supports selecting dates in many calendar systems used around the world, including Gregorian, Hebrew, Indian, Islamic, Buddhist, and more. Dates are automatically displayed in the appropriate calendar system for the user's locale. The calendar system can be overridden using the [Unicode calendar locale extension](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar#adding_a_calendar_in_the_locale_string), passed to the [I18nProvider](../I18nProvider) component.
-
-Selected dates passed to `onChange` always use the same calendar system as the `value` or `defaultValue` prop. If no `value` or `defaultValue` is provided, then dates passed to `onChange` are always in the Gregorian calendar since this is the most commonly used. This means that even though the user selects dates in their local calendar system, applications are able to deal with dates from all users consistently.
-
-The below example displays a `DateRangePicker` in the Hindi language, using the Indian calendar. Dates emitted from `onChange` are in the Gregorian calendar.
-
-```tsx example
-import {I18nProvider} from '@react-aria/i18n';
-
-function Example() {
-  let [range, setRange] = React.useState(null);
-  return (
-    <I18nProvider locale="hi-IN-u-ca-indian">
-      <DateRangePicker label="Date range" value={range} onChange={setRange} />
-      <p>Start date: {range?.start.toString()}</p>
-      <p>End date: {range?.end.toString()}</p>
-    </I18nProvider>
-  );
-}
-```
-
-### Minimum and maximum values
-
-The `minValue` and `maxValue` props can also be used to perform builtin validation. This prevents the user from selecting dates outside the valid range in the calendar, and marks the date fields as invalid using ARIA. `useDateRangePicker` also validates that the end date is after the start date. You should implement a visual indication that the date range picker is invalid as well.
-
-This example only accepts dates after today.
-
-```tsx example
-import {today} from '@internationalized/date';
-
-<DateRangePicker
-  label="Trip dates"
-  minValue={today(getLocalTimeZone())}
-  defaultValue={{
-    start: parseDate('2022-02-03'),
-    end: parseDate('2022-05-03')
-  }} />
-```
-
-### Unavailable dates
-
-`useDateRangePicker` supports marking certain dates as _unavailable_. These dates remain focusable with the keyboard in the calendar so that navigation is consistent, but cannot be selected by the user. The `isDateUnavailable` prop accepts a callback that is called to evaluate whether each visible date is unavailable.
-
-Note that by default, users may not select non-contiguous ranges, i.e. ranges that contain unavailable dates within them. Once a start date is selected in the calendar, enabled dates will be restricted to subsequent dates until an unavailable date is hit. While this is handled automatically in the calendar, additional validation logic must be provided to ensure an invalid state is displayed in the date field. This can be achieved using the `isInvalid` prop. See [below](#non-contiguous-ranges) for an example of how to allow non-contiguous ranges.
-
-This example includes multiple unavailable date ranges, e.g. dates when a rental house is not available. The `minValue` prop is also used to prevent selecting dates before today. The `isInvalid` prop is used to mark selected date ranges with unavailable dates in the middle as invalid.
-
-```tsx example
-import {today} from '@internationalized/date';
-
-function Example() {
-  let now = today(getLocalTimeZone());
-  let disabledRanges = [
-    [now, now.add({days: 5})],
-    [now.add({days: 14}), now.add({days: 16})],
-    [now.add({days: 23}), now.add({days: 24})],
-  ];
-
-  let isDateUnavailable = (date) => disabledRanges.some((interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0);
-  let [value, setValue] = React.useState(null);
-  let isInvalid = value && disabledRanges.some(interval => value.end.compare(interval[0]) >= 0 && value.start.compare(interval[1]) <= 0);
-
-  return (
-    <DateRangePicker
-      label="Trip dates"
-      minValue={today(getLocalTimeZone())}
-      isDateUnavailable={isDateUnavailable}
-      value={value}
-      onChange={setValue}
-      isInvalid={isInvalid} />
-  );
-}
-```
-
-### Non-contiguous ranges
-
-The `allowsNonContiguousRanges` prop enables a range to be selected even if there are unavailable dates in the middle. The value emitted in the `onChange` event will still be a single range with a `start` and `end` property, but unavailable dates will not be displayed as selected. It is up to applications to split the full selected range into multiple as needed for business logic.
-
-This example prevents selecting weekends, but allows selecting ranges that span multiple weeks.
-
-```tsx example
-import {isWeekend} from '@internationalized/date';
-
-function Example() {
-  let {locale} = useLocale();
-
-  return <DateRangePicker label="Time off request" isDateUnavailable={date => isWeekend(date, locale)} allowsNonContiguousRanges />
-}
-```
-
-### Placeholder value
-
-When no value is set, a placeholder is shown. The format of the placeholder is influenced by the `granularity` and `placeholderValue` props. `placeholderValue` also controls the default values of each segment when the user first interacts with them, e.g. using the up and down arrow keys, as well as the default month shown in the calendar popover. By default, the `placeholderValue` is the current date at midnight, but you can set it to a more appropriate value if needed.
-
-```tsx example
-import {CalendarDate} from '@internationalized/date';
-
-<DateRangePicker label="Date range" placeholderValue={new CalendarDate(1980, 1, 1)} />
-```
-
-### Hide time zone
-
-When `ZonedDateTime` objects are provided as the value of to `useDateRangePicker`, the time zone abbreviation is displayed by default. However, if this is displayed elsewhere or implicit based on the usecase, it can be hidden using the `hideTimeZone` option.
-
-```tsx example
-<DateRangePicker
-  label="Date range"
-  defaultValue={{
-    start: parseZonedDateTime('2022-11-07T10:45[America/Los_Angeles]'),
-    end: parseZonedDateTime('2022-11-08T19:45[America/Los_Angeles]')
-  }}
-  hideTimeZone />
-```
-
-### Hour cycle
-
-By default, `useDateRangePicker` displays times in either 12 or 24 hour hour format depending on the user's locale. However, this can be overridden using the `hourCycle` prop if needed for a specific usecase. This example forces the `DateRangePicker` to use 24-hour time, regardless of the locale.
-
-```tsx example
-<DateRangePicker
-  label="Date range"
-  granularity="minute"
-  hourCycle={24} />
-```
-
-### Custom first day of week
-
-By default, the first day of the week is automatically set based on the current locale. This can be changed by setting the `firstDayOfWeek` prop to `'sun'`, `'mon'`, `'tue'`, `'wed'`, `'thu'`, `'fri'`, or `'sat'`.
-
-```tsx example
-<DateRangePicker label="Date range" firstDayOfWeek="mon" />
-```
\ No newline at end of file
diff --git a/packages/react-aria/docs/datepicker/useTimeField.mdx b/packages/react-aria/docs/datepicker/useTimeField.mdx
deleted file mode 100644
index 7ad7282085a..00000000000
--- a/packages/react-aria/docs/datepicker/useTimeField.mdx
+++ /dev/null
@@ -1,325 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/datepicker';
-import statelyDocs from 'docs:@react-stately/datepicker';
-import i18nDocs from 'docs:@internationalized/date';
-import {FunctionAPI, HeaderInfo, InterfaceType, TypeContext, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/datepicker/package.json';
-import Anatomy from './timefield-anatomy.svg';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
-import tailwindExample from 'url:./TimeField-tailwind.png';
-
----
-category: Date and Time
-keywords: [input, form, field, date, time]
----
-
-# useTimeField
-
-<PageDescription>{docs.exports.useTimeField.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useTimeField']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useTimeField} links={docs.links} />
-<FunctionAPI function={docs.exports.useDateSegment} links={docs.links} />
-
-## Features
-
-A time field can be built using `<input type="time">`, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. `useTimeField` helps achieve accessible and international time fields that can be styled as needed.
-
-* **International** – Support for locale-specific formatting, number systems, hour cycles, and right-to-left layout.
-* **Time zone aware** – Times can optionally include a time zone. All modifications follow time zone rules such as daylight saving time.
-* **Accessible** – Each time unit is displayed as an individually focusable and editable segment, which allows users an easy way to edit times using the keyboard, in any format and locale.
-* **Touch friendly** – Time segments are editable using an easy to use numeric keypad, and all interactions are accessible using touch-based screen readers.
-* **Customizable** – As with all of React Aria, the DOM structure and styling of all elements can be fully customized.
-
-Read our [blog post](../blog/date-and-time-pickers-for-all) for more details about the internationalization, accessibility, and user experience features implemented by `useTimeField`.
-
-## Anatomy
-
-<Anatomy
-  role="img"
-  aria-label="Anatomy diagram of a time field component, which consists of a label, field, segments for each time unit." />
-
-A time field consists of a label, and a group of segments representing each unit of a time (e.g. hours, minutes, and seconds). Each segment is individually focusable and editable by the user, by typing or using the arrow keys to increment and decrement the value. This approach allows values to be formatted and parsed correctly regardless of the locale or time format, and offers an easy and error-free way to edit times using the keyboard.
-
-`useTimeField` also supports optional description and error message elements, which can be used
-to provide more context about the field, and any validation messages. These are linked with the
-input via the `aria-describedby` attribute.
-
-`useTimeField` returns props that you should spread onto the appropriate elements:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTimeField.return.id].properties} />
-</TypeContext.Provider>
-
-`useDateSegment` returns props for an individual time segment:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useDateSegment.return.id].properties} />
-</TypeContext.Provider>
-
-Note that most of this anatomy is shared with [useDateField](../DateField/useDateField.html), so you can reuse many components between them if you have both.
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTimeFieldState} /> hook from `@react-stately/datepicker`. The state object should be passed as an option to `useTimeField` and `useDateSegment`.
-
-If the time field does not have a visible label, an `aria-label` or `aria-labelledby` prop must be passed instead to
-identify it to assistive technology.
-
-## Time values
-
-Times are represented in many different ways by cultures around the world. This includes differences in hour cycles, time zones, daylight saving time rules, formatting, and much more. When building applications that support users around the world, it is important to handle these aspects correctly for each locale.
-
-<TypeLink links={docs.links} type={docs.exports.useTimeField} /> uses the [@internationalized/date](../internationalized/date/) library to represent times. This package provides a library of objects and functions to perform date and time related manipulation, queries, and conversions that work across locales and calendars. Date and time objects can be converted to and from native JavaScript `Date` objects or [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) strings. See the [documentation](../internationalized/date/), or the [examples below](#value) for more details.
-
-## Example
-
-```tsx example export=true
-import {useTimeFieldState} from '@react-stately/datepicker';
-import {useTimeField, useDateSegment} from '@react-aria/datepicker';
-import {useLocale} from '@react-aria/i18n';
-
-export function TimeField(props) {
-  let {locale} = useLocale();
-  let state = useTimeFieldState({
-    ...props,
-    locale
-  });
-
-  let ref = React.useRef(null);
-  let {labelProps, fieldProps} = useTimeField(props, state, ref);
-
-  return (
-    <div className="wrapper">
-      <span {...labelProps}>{props.label}</span>
-      <div {...fieldProps} ref={ref} className="field">
-        {state.segments.map((segment, i) =>
-          <DateSegment key={i} segment={segment} state={state} />
-        )}
-        {state.isInvalid &&
-          <span aria-hidden="true">🚫</span>
-        }
-      </div>
-    </div>
-  );
-}
-
-// Note: this component is the same as in the useDateField docs.
-function DateSegment({segment, state}) {
-  let ref = React.useRef(null);
-  let {segmentProps} = useDateSegment(segment, state, ref);
-
-  return (
-    <div
-      {...segmentProps}
-      ref={ref}
-      className={`segment ${segment.isPlaceholder ? 'placeholder' : ''}`}>
-      {segment.text}
-    </div>
-  );
-}
-
-<TimeField label="Event date" />
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.field {
-  display: inline-flex;
-  padding: 2px 4px;
-  border-radius: 2px;
-  border: 1px solid var(--gray);
-  background: var(--spectrum-global-color-gray-50);
-}
-
-.field:focus-within {
-  border-color: var(--blue);
-}
-
-.segment {
-  padding: 0 2px;
-  font-variant-numeric: tabular-nums;
-  text-align: end;
-}
-
-.segment.placeholder {
-  color: var(--spectrum-gray-600);
-}
-
-.segment:focus {
-  color: white;
-  background: var(--blue);
-  outline: none;
-  border-radius: 2px;
-}
-```
-
-</details>
-
-## Styled examples
-
-<ExampleCard
-  url="https://codesandbox.io/s/small-water-y5dgj4?file=/src/TimeField.js"
-  preview={tailwindExample}
-  title="Tailwind CSS"
-  description="A time field built with Tailwind and React Aria." />
-
-## Usage
-
-The following examples show how to use the `TimeField` component created in the above example.
-
-### Value
-
-A `TimeField` displays a placeholder by default. An initial, uncontrolled value can be provided to the `TimeField` using the `defaultValue` prop. Alternatively, a controlled value can be provided using the `value` prop.
-
-Time values are provided using objects in the [@internationalized/date](../internationalized/date/) package. This library handles correct international date and time manipulation across calendars, time zones, and other localization concerns.
-
-`useTimeField` only supports selecting times, but values with date components are also accepted. By default, `useTimeField` will emit <TypeLink links={i18nDocs.links} type={i18nDocs.exports.Time} /> objects in the `onChange` event, but if a <TypeLink links={i18nDocs.links} type={i18nDocs.exports.CalendarDateTime} /> or <TypeLink links={i18nDocs.links} type={i18nDocs.exports.ZonedDateTime} /> object is passed as the `value` or `defaultValue`, values of that type will be emitted, changing only the time and preserving the date components.
-
-```tsx example
-import {Time} from '@internationalized/date';
-
-function Example() {
-  let [value, setValue] = React.useState(new Time(11, 45));
-
-  return (
-    <>
-      <TimeField
-        label="Time (uncontrolled)"
-        defaultValue={new Time(11, 45)} />
-      <TimeField
-        label="Time (controlled)"
-        value={value}
-        onChange={setValue} />
-    </>
-  );
-}
-```
-
-`Time` values may also be parsed from strings using the <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseTime} /> function. This accepts [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Times) formatted time strings such as `"04:45:23.123"`. The `toString` method of a `Time` object can also be used to convert a time object to a string.
-
-### Time zones
-
-`useTimeField` is time zone aware when a <TypeLink links={i18nDocs.links} type={i18nDocs.exports.ZonedDateTime} /> object is provided as the value. In this case, the time zone abbreviation is displayed, and time zone concerns such as daylight saving time are taken into account when the value is manipulated.
-
-In most cases, your data will come from and be sent to a server as an [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) formatted string. [@internationalized/date](../internationalized/date/) includes functions for parsing strings in multiple formats into <TypeLink links={i18nDocs.links} type={i18nDocs.exports.ZonedDateTime} /> objects. Which format you use will depend on what information you need to store.
-
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseZonedDateTime} /> – This function parses a date with an explicit time zone and optional UTC offset attached (e.g. `"2021-11-07T00:45[America/Los_Angeles]"` or `"2021-11-07T00:45-07:00[America/Los_Angeles]"`). This format preserves the maximum amount of information. If the exact local time and time zone that a user selected is important, use this format. Storing the time zone and offset that was selected rather than converting to UTC ensures that the local time is correct regardless of daylight saving rule changes (e.g. if a locale abolishes DST). Examples where this applies include calendar events, reminders, and other times that occur in a particular location.
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseAbsolute} /> – This function parses an absolute date and time that occurs at the same instant at all locations on Earth. It can be represented in UTC (e.g. `"2021-11-07T07:45:00Z"`), or stored with a particular offset (e.g. `"2021-11-07T07:45:00-07:00"`). A time zone identifier, e.g. `America/Los_Angeles`, must be passed, and the result will be converted into that time zone. Absolute times are the best way to represent events that occurred in the past, or future events where an exact time is needed, regardless of time zone.
-* <TypeLink links={i18nDocs.links} type={i18nDocs.exports.parseAbsoluteToLocal} /> – This function parses an absolute date and time into the current user's local time zone. It is a shortcut for `parseAbsolute`, and accepts the same formats.
-
-```tsx example
-import {parseZonedDateTime} from '@internationalized/date';
-
-<TimeField
-  label="Event time"
-  defaultValue={parseZonedDateTime('2022-11-07T00:45[America/Los_Angeles]')} />
-```
-
-`useTimeField` displays times in the time zone included in the `ZonedDateTime` object. The above example is always displayed in Pacific Standard Time because the `America/Los_Angeles` time zone identifier is provided. [@internationalized/date](../internationalized/date/) includes functions for converting dates between time zones, or parsing a date directly into a specific time zone or the user's local time zone, as shown below.
-
-```tsx example
-import {parseAbsoluteToLocal} from '@internationalized/date';
-
-<TimeField
-  label="Event time"
-  defaultValue={parseAbsoluteToLocal('2021-11-07T07:45:00Z')}
-/>
-```
-
-### Events
-
-`useTimeField` accepts an `onChange` prop which is triggered whenever the time is edited by the user. The example below uses `onChange` to update a separate element with a formatted version of the date in the user's locale and local time zone. This is done by converting the date to a native JavaScript `Date` object to pass to the formatter. `useTimeField` allows editing the time components while keeping the date fixed.
-
-```tsx example
-import {useDateFormatter} from '@react-aria/i18n';
-
-function Example() {
-  let [date, setDate] = React.useState(parseAbsoluteToLocal('2021-04-07T18:45:22Z'));
-  let formatter = useDateFormatter({dateStyle: 'long', timeStyle: 'long'});
-
-  return (
-    <>
-      <TimeField label="Time" value={date} onChange={setDate} />
-      <p>Selected date and time: {(date?.toDate && formatter.format(date.toDate())) || (date && date.toString()) || '--'}</p>
-    </>
-  );
-}
-```
-
-### Granularity
-
-The `granularity` prop allows you to control the smallest unit that is displayed by `useTimeField`. By default, times are displayed with `"minute"` granularity. More granular time values can be displayed by setting the `granularity` prop to `"second"`.
-
-```tsx example
-<TimeField
-  label="Event time"
-  granularity="second"
-  defaultValue={parseAbsoluteToLocal('2021-04-07T18:45:22Z')} />
-```
-
-### Minimum and maximum values
-
-The `minValue` and `maxValue` props can also be used to perform builtin validation. This marks the time field as invalid using ARIA if the user enters an invalid time. You should implement a visual indication that the time field is invalid as well.
-
-This example only accepts times between 9 AM and 5 PM.
-
-```tsx example
-<TimeField
-  label="Meeting time"
-  minValue={new Time(9)}
-  maxValue={new Time(17)}
-  defaultValue={new Time(8)} />
-```
-
-### Placeholder value
-
-When no value is set, a placeholder is shown. The format of the placeholder is influenced by the `granularity` and `placeholderValue` props. `placeholderValue` also controls the default values of each segment when the user first interacts with them, e.g. using the up and down arrow keys. By default, the `placeholderValue` is midnight, but you can set it to a more appropriate value if needed.
-
-```tsx example
-<TimeField label="Meeting time" placeholderValue={new Time(9)} />
-```
-
-### Hide time zone
-
-When a `ZonedDateTime` object is provided as the value to `useTimeField`, the time zone abbreviation is displayed by default. However, if this is displayed elsewhere or implicit based on the usecase, it can be hidden using the `hideTimeZone` option.
-
-```tsx example
-<TimeField
-  label="Appointment time"
-  defaultValue={parseZonedDateTime('2022-11-07T10:45[America/Los_Angeles]')}
-  hideTimeZone />
-```
-
-### Hour cycle
-
-By default, `useTimeField` displays times in either 12 or 24 hour hour format depending on the user's locale. However, this can be overridden using the `hourCycle` prop if needed for a specific usecase. This example forces `useTimeField` to use 24-hour time, regardless of the locale.
-
-```tsx example
-<TimeField
-  label="Appointment time"
-  hourCycle={24} />
-```
diff --git a/packages/react-aria/docs/dialog/anatomy.svg b/packages/react-aria/docs/dialog/anatomy.svg
deleted file mode 100644
index 4f2bf8c5f5f..00000000000
--- a/packages/react-aria/docs/dialog/anatomy.svg
+++ /dev/null
@@ -1,40 +0,0 @@
-<svg style="max-height: 308px; background: var(--anatomy-gray-400); padding: 32px 32px 48px 32px; margin-bottom: 16px; width: calc(100% - 64px); border-radius: var(--anatomy-radius);" viewBox="0 0 398 308">
-  <title>Dialog anatomy diagram</title>
-  <desc>Shows a dialog component with labels pointing to its parts, including the title, and dialog container elements.</desc>
-  <g transform="translate(-28 -40)">
-    <g transform="translate(0 68)">
-      <rect width="398" height="250" rx="4" transform="translate(28 30)" fill="var(--anatomy-gray-50)" />
-      <g transform="translate(226.457 208)">
-        <g transform="translate(-0.457)" fill="rgba(255,0,0,0)" stroke="var(--anatomy-gray-600)" stroke-width="2">
-          <rect width="72" height="32" rx="16" stroke="none" />
-          <rect x="1" y="1" width="70" height="30" rx="15" fill="none" />
-        </g><text transform="translate(16.5 20)" fill="var(--anatomy-gray-600)" font-size="14" font-family="var(--anatomy-font)" style="font-weight: 700">
-          <tspan x="0" y="0">Cancel</tspan>
-        </text>
-        <g transform="translate(88)">
-          <rect width="72" height="32" rx="16" transform="translate(-0.457)" fill="var(--anatomy-gray-700)" /><text transform="translate(35.543 20)" fill="var(--anatomy-gray-50)" font-size="14" font-family="var(--anatomy-font)" style="font-weight: 700">
-            <tspan x="-20.174" y="0">Enable</tspan>
-          </text>
-        </g>
-      </g><text transform="translate(68 87.964)" fill="var(--anatomy-gray-700)" font-size="18" font-family="var(--anatomy-font)" style="font-weight: 700">
-        <tspan x="0" y="0">Enable smart filters?</tspan>
-      </text>
-      <rect width="318" height="2" rx="1" transform="translate(68 104)" fill="var(--anatomy-gray-200)" /><text transform="translate(68 136)" fill="var(--anatomy-gray-700)" font-size="14" font-family="var(--anatomy-font)">
-        <tspan x="0" y="0">Smart filters are nondestructive and will preserve your </tspan>
-        <tspan x="0" y="21">original images.</tspan>
-      </text>
-    </g>
-    <g transform="translate(-318 401)">
-      <text transform="translate(402 -348)" fill="var(--anatomy-gray-800)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-        <tspan x="-10.699" y="0">Title</tspan>
-      </text>
-      <path d="M-682-298.5a2.5,2.5,0,0,1,2-2.449V-381h1v80.05a2.5,2.5,0,0,1,2,2.449,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-682-298.5Z" transform="translate(1081.5 38)" fill="var(--anatomy-gray-600)" />
-    </g>
-    <g transform="translate(-230 401)">
-      <text transform="translate(402 -348)" fill="var(--anatomy-gray-800)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-        <tspan x="-16.874" y="0">Dialog</tspan>
-      </text>
-      <path d="M-770-326.5a2.5,2.5,0,0,1,2-2.45V-381h1v52.049a2.5,2.5,0,0,1,2,2.45,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-770-326.5Z" transform="translate(1169.5 38)" fill="var(--anatomy-gray-600)" />
-    </g>
-  </g>
-</svg>
diff --git a/packages/react-aria/docs/dialog/tailwind.png b/packages/react-aria/docs/dialog/tailwind.png
deleted file mode 100644
index 311cbae3290..00000000000
Binary files a/packages/react-aria/docs/dialog/tailwind.png and /dev/null differ
diff --git a/packages/react-aria/docs/dialog/useDialog.mdx b/packages/react-aria/docs/dialog/useDialog.mdx
deleted file mode 100644
index e5294ea9339..00000000000
--- a/packages/react-aria/docs/dialog/useDialog.mdx
+++ /dev/null
@@ -1,221 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/dialog';
-import overlaysDocs from 'docs:@react-aria/overlays';
-import focusDocs from 'docs:@react-aria/focus';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import {Keyboard} from '@react-spectrum/text';
-import packageData from '@react-aria/dialog/package.json';
-import Anatomy from './anatomy.svg';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
-import tailwindPreview from 'url:./tailwind.png';
-
----
-category: Overlays
-keywords: [overlays, dialog, modal, aria]
----
-
-# useDialog
-
-<PageDescription>{docs.exports.useDialog.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useDialog']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useDialog} links={docs.links} />
-
-## Features
-
-The HTML [&lt;dialog&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element
-can be used to build dialogs. However, it is not yet widely supported across browsers, and
-building fully accessible custom dialogs from scratch is very difficult and error prone.
-`useDialog` helps achieve accessible dialogs that can be styled as needed.
-
-* **Flexible** – Dialogs can be used within a [modal](../Modal/useModalOverlay.html) or [popover](../Popover/usePopover.html) to create many types of overlay elements.
-* **Accessible** – Exposed to assistive technology as a `dialog` or `alertdialog` with ARIA. The dialog is labeled by its title element, and content outside the dialog is hidden from assistive technologies while it is open.
-* **Focus management** – Focus is moved into the dialog on mount, and restored to the trigger element on unmount. While open, focus is contained within the dialog, preventing the user from tabbing outside.
-
-## Anatomy
-
-<Anatomy />
-
-A dialog consists of a container element and an optional title. `useDialog` handles
-exposing this to assistive technology using ARIA. It can be combined
-with <TypeLink links={overlaysDocs.links} type={overlaysDocs.exports.useModalOverlay} /> or <TypeLink links={overlaysDocs.links} type={overlaysDocs.exports.usePopover} />,
-to create modal dialogs, popovers, and other types of overlays.
-
-`useDialog` returns props that you should spread onto the appropriate element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useDialog.return.id].properties} />
-</TypeContext.Provider>
-
-If a dialog does not have a visible title element, an `aria-label` or `aria-labelledby`
-prop must be passed instead to identify the element to assistive technology.
-
-## Example
-
-This example shows how to build a typical modal dialog, by combining `useDialog` with [useModalOverlay](../Modal/useModalOverlay.html). The code for the `Modal` component is available below. The `Dialog` component may also be used within a [popover](../Popover/usePopover.html). See the docs for more details on overlay containers.
-
-```tsx example
-import type {AriaDialogProps} from '@react-aria/dialog';
-import {useDialog} from '@react-aria/dialog';
-
-// Reuse the Button and Modal from your component library. See below for details.
-import {Button, Modal, ModalTrigger} from 'your-component-library';
-
-interface DialogProps extends AriaDialogProps {
-  title?: React.ReactNode,
-  children: React.ReactNode
-}
-
-function Dialog({title, children, ...props}: DialogProps) {
-  let ref = React.useRef(null);
-  let {dialogProps, titleProps} = useDialog(props, ref);
-
-  return (
-    <div {...dialogProps} ref={ref} style={{padding: 30}}>
-      {title &&
-        <h3 {...titleProps} style={{marginTop: 0}}>
-          {title}
-        </h3>
-      }
-      {children}
-    </div>
-  );
-}
-
-<ModalTrigger label="Open Dialog">
-  {close =>
-    <Dialog title="Enter your name">
-      <form style={{display: 'flex', flexDirection: 'column'}}>
-        <label htmlFor="first-name">First Name:</label>
-        <input id="first-name" />
-        <label htmlFor="last-name">Last Name:</label>
-        <input id="last-name" />
-        <Button
-          onPress={close}
-          style={{marginTop: 10}}>
-          Submit
-        </Button>
-      </form>
-    </Dialog>
-  }
-</ModalTrigger>
-```
-
-### Modal
-
-The `Modal` and `ModalTrigger` components render the dialog within a typical modal container with a partially transparent underlay. See [useModalOverlay](../Modal/useModalOverlay.html) for more details.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useOverlayTriggerState} from '@react-stately/overlays';
-import {Overlay, useModalOverlay, useOverlayTrigger} from '@react-aria/overlays';
-import {useViewportSize} from '@react-aria/utils';
-
-function Modal({state, children, ...props}) {
-  let ref = React.useRef(null);
-  let {modalProps, underlayProps} = useModalOverlay({...props, isDismissable: true}, state, ref);
-
-  return (
-    <Overlay>
-      <div
-        style={{
-          position: 'absolute',
-          zIndex: 100,
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: document.body.clientHeight,
-          background: 'rgba(0, 0, 0, 0.5)'
-        }}
-        {...underlayProps} />
-      <div
-        style={{
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: useViewportSize().height + 'px',
-          zIndex: 101,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center'
-        }}>
-        <div
-          {...modalProps}
-          ref={ref}
-          style={{
-            background: 'var(--page-background)',
-            border: '1px solid gray'
-          }}>
-          {children}
-        </div>
-      </div>
-    </Overlay>
-  );
-}
-
-function ModalTrigger({label, children, ...props}) {
-  let state = useOverlayTriggerState(props);
-  let {triggerProps, overlayProps} = useOverlayTrigger({type: 'dialog'}, state);
-
-  return <>
-    <Button {...triggerProps}>{label}</Button>
-    {state.isOpen &&
-      <Modal state={state}>
-        {React.cloneElement(children(state.close), overlayProps)}
-      </Modal>
-    }
-  </>;
-}
-```
-
-</details>
-
-### Button
-
-The `Button` component is used in the above example to open and close the dialog. It is built using the [useButton](../Button/useButton.html) hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useButton} from '@react-aria/button';
-
-function Button(props) {
-  let ref = React.useRef(null);
-  let {buttonProps} = useButton(props, ref);
-  return <button {...buttonProps} ref={ref} style={props.style}>{props.children}</button>;
-}
-```
-
-</details>
-
-## Styled examples
-
-<ExampleCard
-  url="https://codesandbox.io/s/delicate-hill-j4p5vs?file=/src/AlertDialog.tsx"
-  preview={tailwindPreview}
-  title="Tailwind CSS"
-  description="An animated alert dialog using Tailwind and react-transition-group." />
diff --git a/packages/react-aria/docs/disclosure/anatomy.svg b/packages/react-aria/docs/disclosure/anatomy.svg
deleted file mode 100644
index 64a51e24d63..00000000000
--- a/packages/react-aria/docs/disclosure/anatomy.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-<svg style="max-height: 70px; background: var(--anatomy-gray-100); padding: 32px; margin-bottom: 16px; width: calc(100% - 64px); border-radius: var(--anatomy-radius);" viewBox="0 0 300 60">
-  <rect id="Rectangle_136670" data-name="Rectangle 136670" width="303" height="66" fill="var(--anatomy-gray-100)"/>
-  <path id="Path_934" data-name="Path 934" d="M6.155,5a.908.908,0,0,0-.3-.7l-4-4a.967.967,0,0,0-1.4,0,.967.967,0,0,0,0,1.4L3.655,5,.355,8.3a.972.972,0,0,0-.1,1.4.972.972,0,0,0,1.4.1l.1-.1,4-4A1.012,1.012,0,0,0,6.155,5Z" transform="matrix(0.035, 0.999, -0.999, 0.035, 79.136, 19.974)" fill="var(--anatomy-gray-600)"/>
-  <text id="Landscape" transform="translate(91.951 27.67)" fill="var(--anatomy-gray-900)" font-size="18" font-family="var(--anatomy-font)" font-weight="700"><tspan x="0" y="0">Landscape</tspan></text>
-  <g id="Group_2" data-name="Group 2" transform="translate(185.002 21)">
-    <g id="Group_1" data-name="Group 1">
-      <rect id="rectangle-1" width="33" height="1" transform="translate(0.998 1)" fill="var(--anatomy-gray-500)"/>
-      <g id="Ellipse_1" data-name="Ellipse 1" transform="translate(-0.002)" fill="var(--anatomy-gray-500)" stroke="var(--anatomy-gray-500)" stroke-width="1">
-        <circle cx="1.5" cy="1.5" r="1.5" stroke="none"/>
-        <circle cx="1.5" cy="1.5" r="1" fill="none"/>
-      </g>
-    </g>
-  </g>
-  <text id="Button" transform="translate(223 26)" fill="var(--anatomy-gray-800)" font-size="12" font-family="var(--anatomy-font)" font-style="italic" letter-spacing="0.003em"><tspan x="0" y="0">Button</tspan></text>
-  <text id="Landscape_content" data-name="Landscape content" transform="translate(75.397 49.67)" fill="var(--anatomy-gray-900)" font-size="14" font-family="var(--anatomy-font)" font-weight="300"><tspan x="0" y="0">Landscape content</tspan></text>
-  <text id="Panel" transform="translate(223 49)" fill="var(--anatomy-gray-800)" font-size="12" font-family="var(--anatomy-font)" font-style="italic" letter-spacing="0.003em"><tspan x="0" y="0">Panel</tspan></text>
-  <g id="Group_3" data-name="Group 3" transform="translate(189.405 35.99)">
-    <rect id="rectangle-1-2" data-name="rectangle-1" width="24" height="1" transform="translate(5.595 9.01)" fill="var(--anatomy-gray-500)"/>
-    <rect id="rectangle-1-3" data-name="rectangle-1" width="18.005" height="1" transform="matrix(0.017, 1, -1, 0.017, 6.125, 0)" fill="var(--anatomy-gray-500)"/>
-    <rect id="rectangle-1-4" data-name="rectangle-1" width="5.782" height="1.004" transform="translate(5.782 18.02) rotate(-180)" fill="var(--anatomy-gray-500)"/>
-    <rect id="rectangle-1-5" data-name="rectangle-1" width="6" height="1" transform="translate(6 1) rotate(-180)" fill="var(--anatomy-gray-500)"/>
-  </g>
-</svg>
diff --git a/packages/react-aria/docs/disclosure/useDisclosure.mdx b/packages/react-aria/docs/disclosure/useDisclosure.mdx
deleted file mode 100644
index e21bdfe8b0d..00000000000
--- a/packages/react-aria/docs/disclosure/useDisclosure.mdx
+++ /dev/null
@@ -1,351 +0,0 @@
-{/* Copyright 2024 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/disclosure';
-import utilsDocs from 'docs:@react-aria/utils';
-import statelyDocs from 'docs:@react-stately/disclosure';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import {Keyboard} from '@react-spectrum/text';
-import packageData from '@react-aria/disclosure/package.json';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import Anatomy from './anatomy.svg';
-
----
-category: Navigation
-keywords: [disclosure, collapse, expand, aria]
----
-
-# useDisclosure
-
-<PageDescription>{docs.exports.useDisclosure.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useDisclosure']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useDisclosure} links={docs.links} />
-
-## Features
-
-A disclosure is a collapsible section of content. It is composed of a trigger button and a panel that contains the content. `useDisclosure` can be used to implement these in an accessible way.
-
-* Support for mouse, touch, and keyboard interactions to open and close the disclosure
-* Support for disabled disclosures
-* Follows the disclosure ARIA pattern, semantically linking the trigger button and panel
-* Uses [hidden="until-found"](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden#the_hidden_until_found_state) in supported browsers, enabling find-in-page search support and improved search engine visibility for collapsed content
-
-## Anatomy
-
-<Anatomy />
-
-A disclosure consists of a trigger button and a panel. Clicking on or pressing <Keyboard>Enter</Keyboard> or <Keyboard>Space</Keyboard> while the trigger button is focused toggles the visibility of the panel. 
-
-`useDisclosure` returns props to spread onto the trigger button and panel.
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useDisclosure.return.id].properties} />
-</TypeContext.Provider>
-
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useDisclosureState} />
-hook in `@react-stately/disclosure`. The state object should be passed as an option to `useDisclosure`.
-
-## Example
-
-This example displays a basic disclosure with a button that toggles the visibility of the panel.
-
-```tsx example export=true
-import {useDisclosureState} from '@react-stately/disclosure';
-import {useDisclosure} from '@react-aria/disclosure';
-import {useButton} from '@react-aria/button';
-import {mergeProps, useFocusRing} from 'react-aria';
-
-function Disclosure(props) {
-  let state = useDisclosureState(props);
-  let panelRef = React.useRef<HTMLDivElement | null>(null);
-  let triggerRef = React.useRef<HTMLButtonElement | null>(null);
-  let {buttonProps: triggerProps, panelProps} = useDisclosure(props, state, panelRef);
-  let {buttonProps} = useButton(triggerProps, triggerRef);
-  let {isFocusVisible, focusProps} = useFocusRing();
-
-  return (
-    <div className="disclosure">
-      <h3>
-        <button 
-          className="trigger" 
-          ref={triggerRef}
-          {...mergeProps(buttonProps, focusProps)}
-          style={{outline: isFocusVisible ? '2px solid dodgerblue' : 'none'}}>
-          <svg viewBox="0 0 24 24">
-            <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
-          </svg>
-          {props.title}
-        </button>
-      </h3>
-      <div className="panel" ref={panelRef} {...panelProps}>
-        <p>
-          {props.children}
-        </p>
-      </div>
-    </div>
-  );
-};
-
-<Disclosure title="System Requirements">
-  Details about system requirements here.
-</Disclosure>
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-@import "@react-aria/example-theme";
-
-.disclosure {
-  .trigger {
-    background: none;
-    border: none;
-    box-shadow: none;
-    font-weight: bold;
-    font-size: 16px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: var(--text-color);
-
-    svg {
-      rotate: 0deg;
-      transition: rotate 200ms;
-      width: 12px;
-      height: 12px;
-      fill: none;
-      stroke: currentColor;
-      stroke-width: 3px;
-    }
-
-    &[aria-expanded="true"] svg {
-      rotate: 90deg;
-    }
-
-    &:disabled {
-      color: var(--gray-300);
-    }
-  }
-}
-
-.panel {
-  margin-left: 32px;
-}
-```
-
-</details>
-
-## Usage
-
-The following examples show how to use the `Disclosure` component created in the above example.
-
-### Default expansion
-
-Whether or not the disclosure is expanded or not by default can be set with the `defaultExpanded` prop.
-
-```tsx example
-<Disclosure title="System Requirements" defaultExpanded>
-  Details about system requirements here.
-</Disclosure>
-```
-
-### Controlled expansion
-
-Expansion can be controlled using the `isExpanded` prop, paired with the `onExpandedChange` event. The `onExpandedChange` event is fired when the user presses the trigger button.
-
-```tsx example
-function ControlledDisclosure(props) {
-  let [isExpanded, setExpanded] = React.useState(false);
-
-  return (
-    <Disclosure title="System Requirements" isExpanded={isExpanded} onExpandedChange={setExpanded}>
-      Details about system requirements here.
-    </Disclosure>
-  );
-}
-```
-
-### Disabled
-
-A disclosure can be disabled with the `isDisabled` prop. This will disable the trigger button and prevent the panel from being opened or closed.
-
-```tsx example
-<Disclosure title="System Requirements" isDisabled>
-  Details about system requirements here.
-</Disclosure>
-```
-
-## Disclosure Group
-
-A disclosure group (i.e. accordion) is a set of disclosures where only one disclosure can be expanded at a time. The following example shows how to create a `DisclosureGroup` component with the `useDisclosureGroupState` hook. We'll also create a `DisclosureItem` component that uses the `DisclosureGroupState` context for managing its state.
-
-```tsx example export=true render=false
-import {useDisclosureGroupState} from '@react-stately/disclosure';
-import {useId} from '@react-aria/utils';
-
-const DisclosureGroupStateContext = React.createContext(null);
-
-function DisclosureGroup(props) {
-  let state = useDisclosureGroupState(props);
-
-  return (
-    <div className="group">
-      <DisclosureGroupStateContext.Provider value={state}>
-        {props.children}
-      </DisclosureGroupStateContext.Provider>
-    </div>
-  );
-}
-
-function DisclosureItem(props) {
-  let defaultId = useId();
-  let id = props.id || defaultId;
-  let groupState = React.useContext(DisclosureGroupStateContext);
-  let isExpanded = groupState ? groupState.expandedKeys.has(id) : props.isExpanded;
-  let state = useDisclosureState({
-    ...props,
-    isExpanded,
-    onExpandedChange(isExpanded) {
-      if (groupState) {
-        groupState.toggleKey(id);
-      }
-
-      props.onExpandedChange?.(isExpanded);
-    }
-  });
-
-  let panelRef = React.useRef<HTMLDivElement | null>(null);
-  let triggerRef = React.useRef<HTMLButtonElement | null>(null);
-  let isDisabled = props.isDisabled || groupState?.isDisabled || false;
-  let {buttonProps: triggerProps, panelProps} = useDisclosure({
-    ...props,
-    isExpanded,
-    isDisabled
-  }, state, panelRef);
-  let {buttonProps} = useButton(triggerProps, triggerRef);
-  let {isFocusVisible, focusProps} = useFocusRing();
-
-  return (
-    <div className="disclosure">
-      <h3>
-        <button 
-          className="trigger" 
-          ref={triggerRef}
-          {...mergeProps(buttonProps, focusProps)}
-          style={{outline: isFocusVisible ? '2px solid dodgerblue' : 'none'}}>
-          <svg viewBox="0 0 24 24">
-            <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
-          </svg>
-          {props.title}
-        </button>
-      </h3>
-      <div className="panel" ref={panelRef} {...panelProps}>
-        <p>
-          {props.children}
-        </p>
-      </div>
-    </div>
-  );
-};
-```
-
-### Usage
-
-The following examples show how to use the `DisclosureGroup` component created in the above example.
-
-```tsx example
-<DisclosureGroup>
-  <DisclosureItem title="Personal Information">
-    Personal information form here.
-  </DisclosureItem>
-  <DisclosureItem title="Billing Address">
-    Billing address form here.
-  </DisclosureItem>
-</DisclosureGroup>
-```
-
-#### Default expansion
-
-Which disclosure is expanded by default can be set with the `defaultExpandedKeys` prop.
-
-```tsx example
-<DisclosureGroup defaultExpandedKeys={['billing']}>
-  <DisclosureItem id="personal" title="Personal Information">
-    Personal information form here.
-  </DisclosureItem>
-  <DisclosureItem id="billing" title="Billing Address">
-    Billing address form here.
-  </DisclosureItem>
-</DisclosureGroup>
-```
-
-#### Controlled expansion
-
-Expansion can be controlled using the `expandedKeys` prop, paired with the `onExpandedChange` event. The `onExpandedChange` event is fired when one of the disclosures is expanded or collapsed.
-
-```tsx example
-function ControlledDisclosureGroup(props) {
-  let [expandedKeys, setExpandedKeys] = React.useState(['personal']);
-
-  return (
-    <DisclosureGroup expandedKeys={expandedKeys} onExpandedChange={setExpandedKeys}>
-      <DisclosureItem id="personal" title="Personal Information">
-        Personal information form here.
-      </DisclosureItem>
-      <DisclosureItem id="billing" title="Billing Address">
-        Billing address form here.
-      </DisclosureItem>
-    </DisclosureGroup>
-  );
-}
-```
-
-#### Multiple expanded
-
-Multiple disclosures can be expanded at the same time by setting the `allowsMultipleExpanded` prop to `true`.
-
-```tsx example
-<DisclosureGroup allowsMultipleExpanded>
-  <DisclosureItem title="Personal Information">
-    Personal information form here.
-  </DisclosureItem>
-  <DisclosureItem title="Billing Address">
-    Billing address form here.
-  </DisclosureItem>
-</DisclosureGroup>
-```
-
-#### Disabled
-
-An entire disclosure group can be disabled with the `isDisabled` prop. This will disable all trigger buttons and prevent the panels from being opened or closed.
-
-```tsx example
-<DisclosureGroup isDisabled>
-  <DisclosureItem title="Personal Information">
-    Personal information form here.
-  </DisclosureItem>
-  <DisclosureItem title="Billing Address">
-    Billing address form here.
-  </DisclosureItem>
-</DisclosureGroup>
-```
diff --git a/packages/react-aria/docs/dnd/useDraggableCollection.mdx b/packages/react-aria/docs/dnd/useDraggableCollection.mdx
deleted file mode 100644
index 450f0239b27..00000000000
--- a/packages/react-aria/docs/dnd/useDraggableCollection.mdx
+++ /dev/null
@@ -1,672 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/dnd';
-import statelyDocs from 'docs:@react-stately/dnd';
-import sharedDocs from 'docs:@react-types/shared';
-import selectionDocs from 'docs:@react-aria/selection';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/dnd/package.json';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import {Keyboard} from '@react-spectrum/text';
-
----
-category: Drag and Drop
-keywords: [drag, drop, dnd, drag and drop, aria, accessibility]
-type: interaction
----
-
-# useDraggableCollection
-
-<PageDescription>{docs.exports.useDraggableCollection.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useDraggableCollection', 'useDraggableItem']} />
-
-## API
-
-<FunctionAPI function={statelyDocs.exports.useDraggableCollectionState} links={statelyDocs.links} />
-<FunctionAPI function={docs.exports.useDraggableCollection} links={docs.links} />
-<FunctionAPI function={docs.exports.useDraggableItem} links={docs.links} />
-
-## Introduction
-
-Collection components built with hooks such as [useListBox](ListBox/useListBox.html), [useTable](Table/useTable.html), and [useGridList](GridList/useGridList.html) can support drag and drop interactions. Users can drag multiple selected items at once, or drag individual non-selected items.
-
-React Aria supports traditional mouse and touch based drag and drop, but also implements keyboard and screen reader friendly interactions. Users can press <Keyboard>Enter</Keyboard> on a draggable element to enter drag and drop mode. Then, they can press <Keyboard>Tab</Keyboard> to navigate between drop targets, and <Keyboard>Enter</Keyboard> to drop or <Keyboard>Escape</Keyboard> to cancel. Touch screen reader users can also drag by double tapping to activate drag and drop mode, swiping between drop targets, and double tapping again to drop.
-
-See the [drag and drop introduction](dnd) to learn more.
-
-### Implementation
-
-The <TypeLink links={docs.links} type={docs.exports.useDraggableCollection} /> hook implements drag interactions within any [collection component](v3:collections.html), using state managed by <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useDraggableCollectionState} />. The <TypeLink links={docs.links} type={docs.exports.useDraggableItem} /> hook should be added to each individual item within the collection to make it draggable, combining props from the relevant hook (e.g. `useOption`). These hooks integrate with React Aria's [selection](v3:selection.html) system to enable dragging multiple selected items at once.
-
-## Example
-
-This example renders a ListBox using the [useListBox](ListBox/useListBox.html) hook, and adds support for dragging items. The highlighted code sections below show the main additions for drag and drop compared with a normal listbox.
-
-```tsx example export=true
-import {useListBox, useOption} from '@react-aria/listbox';
-import {useListState} from '@react-stately/list';
-import {Item} from '@react-stately/collections';
-import {useFocusRing} from '@react-aria/focus';
-import {mergeProps} from '@react-aria/utils';
-import {useDraggableCollectionState} from '@react-stately/dnd';
-import {useDraggableCollection, useDraggableItem} from '@react-aria/dnd';
-
-function ListBox(props) {
-  // Setup listbox as normal. See the useListBox docs for more details.
-  let state = useListState(props);
-  let ref = React.useRef(null);
-  let {listBoxProps} = useListBox({
-    ...props,
-    ///- begin highlight -///
-    // Prevent dragging from changing selection.
-    shouldSelectOnPressUp: true
-    ///- end highlight -///
-  }, state, ref);
-
-  ///- begin highlight -///
-  // Setup drag state for the collection.
-  let dragState = useDraggableCollectionState({
-    // Pass through events from props.
-    ...props,
-
-    // Collection and selection manager come from list state.
-    collection: state.collection,
-    selectionManager: state.selectionManager,
-
-    // Provide data for each dragged item. This function could
-    // also be provided by the user of the component.
-    getItems: props.getItems || ((keys) => {
-      return [...keys].map(key => {
-        let item = state.collection.getItem(key);
-
-        return {
-          'text/plain': item.textValue
-        };
-      });
-    })
-  });
-
-  useDraggableCollection(props, dragState, ref);
-  ///- end highlight -///
-
-  return (
-    <ul {...listBoxProps} ref={ref}>
-      {[...state.collection].map((item) => (
-        <Option
-          key={item.key}
-          item={item}
-          state={state}
-          dragState={dragState}
-        />
-      ))}
-    </ul>
-  );
-}
-
-function Option({ item, state, dragState }) {
-  // Setup listbox option as normal. See useListBox docs for details.
-  let ref = React.useRef(null);
-  let {optionProps} = useOption({key: item.key}, state, ref);
-  let {isFocusVisible, focusProps} = useFocusRing();
-
-  ///- begin highlight -///
-  // Register the item as a drag source.
-  let {dragProps} = useDraggableItem({
-    key: item.key
-  }, dragState);
-  ///- end highlight -///
-
-  // Merge option props and dnd props, and render the item.
-  return (
-    ///- begin highlight -///
-    <li
-      {...mergeProps(optionProps, dragProps, focusProps)}
-      ///- end highlight -///
-      ref={ref}
-      className={`option ${isFocusVisible ? 'focus-visible' : ''}`}>
-      {item.rendered}
-    </li>
-  );
-}
-
-<ListBox aria-label="Categories" selectionMode="multiple">
-  <Item>Animals</Item>
-  <Item>People</Item>
-  <Item>Plants</Item>
-</ListBox>
-<DropTarget />
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-[role=listbox] {
-  padding: 0;
-  margin: 5px 0;
-  list-style: none;
-  box-shadow: inset 0 0 0 1px gray;
-  max-width: 250px;
-  outline: none;
-  min-height: 50px;
-  overflow: auto;
-}
-
-.option {
-  padding: 3px 6px;
-  outline: none;
-}
-
-.option[aria-selected=true] {
-  background: blueviolet;
-  color: white;
-}
-
-.option.focus-visible {
-  box-shadow: inset 0 0 0 2px orange;
-}
-
-.option.drop-target {
-  border-color: transparent;
-  box-shadow: inset 0 0 0 2px var(--blue);
-}
-```
-
-</details>
-
-### DropTarget
-
-The `DropTarget` component used above is defined below. See [useDrop](useDrop) for more details and documentation.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example render=false export=true
-import type {TextDropItem} from '@react-aria/dnd';
-import {useDrop} from '@react-aria/dnd';
-import {useButton} from '@react-aria/button';
-
-function DropTarget() {
-  let [dropped, setDropped] = React.useState(null);
-  let ref = React.useRef(null);
-  let {dropProps, isDropTarget} = useDrop({
-    ref,
-    async onDrop(e) {
-      let items = await Promise.all(
-        e.items
-          .filter(item => item.kind === 'text' && (item.types.has('text/plain') || item.types.has('my-app-custom-type')))
-          .map(async (item: TextDropItem) => {
-            if (item.types.has('my-app-custom-type')) {
-              return JSON.parse(await item.getText('my-app-custom-type'));
-            } else {
-              return {name: await item.getText('text/plain'), style: 'span'};
-            }
-          })
-      );
-      setDropped(items);
-    }
-  });
-
-  let {buttonProps} = useButton({elementType: 'div'}, ref);
-
-  let message = ['Drop here'];
-  if (dropped) {
-    message = dropped.map((item, i) => <div key={i}><item.style>{item.name}</item.style></div>);
-  }
-
-  return (
-    <div {...mergeProps(dropProps, buttonProps)} ref={ref} className={`droppable ${isDropTarget ? 'target' : ''}`}>
-      {message}
-    </div>
-  );
-}
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.droppable {
-  width: 100px;
-  height: 50px;
-  border-radius: 6px;
-  display: inline-block;
-  padding: 20px;
-  border: 2px dotted gray;
-  white-space: pre-wrap;
-}
-
-.droppable.target {
-  border: 2px solid var(--blue);
-}
-```
-
-</details>
-
-</details>
-
-## Drag data
-
-Data for a draggable element can be provided in multiple formats at once. This allows drop targets to choose data in a format that they understand. For example, you could serialize a complex object as JSON in a custom format for use within your own application, and also provide plain text and/or rich HTML fallbacks that can be used when a user drops data in an external application (e.g. an email message).
-
-This can be done by returning multiple keys for an item from the `getItems` function. Types can either be a standard [mime type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) for interoperability with external applications, or a custom string for use within your own app.
-
-This example provides representations of each item as plain text, HTML, and a custom app-specific data format. Dropping on the drop targets in this page will use the custom data format to render formatted items. If you drop in an external application supporting rich text, the HTML representation will be used. Dropping in a text editor will use the plain text format.
-
-```tsx example
-let items = new Map([
-  ['ps', {name: 'Photoshop', style: 'strong'}],
-  ['xd', {name: 'XD', style: 'strong'}],
-  ['id', {name: 'InDesign', style: 'strong'}],
-  ['dw', {name: 'Dreamweaver', style: 'em'}],
-  ['co', {name: 'Connect', style: 'em'}]
-]);
-
-/*- begin highlight -*/
-let getItems = (keys) => (
-  [...keys].map(key => {
-    let item = items.get(key);
-    return {
-      'text/plain': item.name,
-      'text/html': `<${item.style}>${item.name}</${item.style}>`,
-      'my-app-custom-type': JSON.stringify(item)
-    };
-  })
-);
-/*- end highlight -*/
-
-<ListBox aria-label="Adobe Apps" items={items} getItems={getItems} selectionMode="multiple">
-  {([id, item]) => (
-    <Item key={id} textValue={item.name}>
-      <item.style>{item.name}</item.style>
-    </Item>
-  )}
-</ListBox>
-<DropTarget />
-```
-
-## Drag previews
-
-By default, the drag preview shown under the user's pointer or finger is a copy of the original element that started the drag. A custom preview can be rendered using the `<DragPreview>` component. This accepts a function as a child which receives the dragged data that was returned by `getItems`, and returns a rendered preview for those items. The `DragPreview` is linked with `useDraggableCollectionState` via a ref, passed to the `preview` property. The `DragPreview` should be placed in the component hierarchy appropriately, so that it receives any React context or inherited styles that it needs to render correctly.
-
-This example renders a custom drag preview which shows the number of items being dragged, or the contents if there is only one.
-
-```tsx example
-///- begin highlight -///
-import {DragPreview} from '@react-aria/dnd';
-///- end highlight -///
-
-function ListBox(props) {
-  ///- begin collapse -///
-  // Setup listbox as normal. See the useListBox docs for more details.
-  let state = useListState(props);
-  let ref = React.useRef(null);
-  let {listBoxProps} = useListBox({
-    ...props,
-    shouldSelectOnPressUp: true
-  }, state, ref);
-  ///- end collapse -///
-  // ...
-
-  ///- begin highlight -///
-  let preview = React.useRef(null);
-  ///- end highlight -///
-  let dragState = useDraggableCollectionState({
-    collection: state.collection,
-    selectionManager: state.selectionManager,
-    ///- begin highlight -///
-    preview,
-    ///- end highlight -///
-    getItems(keys) {
-      return [...keys].map(key => {
-        let item = state.collection.getItem(key);
-        return {
-          'text/plain': item.textValue
-        };
-      });
-    },
-  });
-
-  useDraggableCollection(props, dragState, ref);
-
-  return (
-    <ul {...listBoxProps} ref={ref}>
-      {[...state.collection].map((item) => (
-        <Option
-          key={item.key}
-          item={item}
-          state={state}
-          dragState={dragState}
-        />
-      ))}
-      {/*- begin highlight -*/}
-      <DragPreview ref={preview}>
-        {items => (
-          <div style={{background: 'green', color: 'white'}}>
-            {items.length > 1 ? `${items.length} items` : items[0]['text/plain']}
-          </div>
-        )}
-      </DragPreview>
-      {/*- end highlight -*/}
-    </ul>
-  );
-}
-///- begin collapse -///
-function Option({ item, state, dragState }) {
-  // Setup listbox option as normal. See useListBox docs for details.
-  let ref = React.useRef(null);
-  let {optionProps} = useOption({key: item.key}, state, ref);
-  let {isFocusVisible, focusProps} = useFocusRing();
-
-  ///- begin highlight -///
-  // Register the item as a drag source.
-  let {dragProps} = useDraggableItem({
-    key: item.key
-  }, dragState);
-  ///- end highlight -///
-
-  // Merge option props and dnd props, and render the item.
-  return (
-    ///- begin highlight -///
-    <li
-      {...mergeProps(optionProps, dragProps, focusProps)}
-      ///- end highlight -///
-      ref={ref}
-      className={`option ${isFocusVisible ? 'focus-visible' : ''}`}>
-      {item.rendered}
-    </li>
-  );
-}
-///- end collapse -///
-
-<ListBox aria-label="Categories" selectionMode="multiple">
-  <Item>Animals</Item>
-  <Item>People</Item>
-  <Item>Plants</Item>
-</ListBox>
-<DropTarget />
-```
-
-## Drop operations
-
-A <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.DropOperation.id]} /> is an indication of what will happen when dragged data is dropped on a particular drop target. These are:
-
-* `move` – indicates that the dragged data will be moved from its source location to the target location.
-* `copy` – indicates that the dragged data will be copied to the target destination.
-* `link` – indicates that there will be a relationship established between the source and target locations.
-* `cancel` – indicates that the drag and drop operation will be canceled, resulting in no changes made to the source or target.
-
-Many operating systems display these in the form of a cursor change, e.g. a plus sign to indicate a copy operation. The user may also be able to use a modifier key to choose which drop operation to perform, such as <Keyboard>Option</Keyboard> or <Keyboard>Alt</Keyboard> to switch from move to copy.
-
-The `onDragEnd` event allows the drag source to respond when a drag that it initiated ends, either because it was dropped or because it was canceled by the user. The `dropOperation` property of the event object indicates the operation that was performed. For example, when data is moved, the UI could be updated to reflect this change by removing the original dragged items.
-
-This example removes the dragged items from the UI when a move operation is completed. It uses the [useListData](useListData.html) hook to help manage and update the list of items. Try holding the <Keyboard>Option</Keyboard> or <Keyboard>Alt</Keyboard> keys to change the operation to copy, and see how the behavior changes.
-
-```tsx example
-import {useListData} from '@react-stately/data';
-
-function Example() {
-  let list = useListData({
-    initialItems: [
-      {id: 'a', textValue: 'Photoshop'},
-      {id: 'b', textValue: 'XD'},
-      {id: 'c', textValue: 'Dreamweaver'},
-      {id: 'd', textValue: 'InDesign'},
-      {id: 'e', textValue: 'Connect'}
-    ]
-  });
-
-  /*- begin highlight -*/
-  let onDragEnd = e => {
-    if (e.dropOperation === 'move') {
-      list.remove(...e.keys);
-    }
-  };
-  /*- end highlight -*/
-
-  return <>
-    <ListBox aria-label="Adobe apps" items={list.items} onDragEnd={onDragEnd} selectionMode="multiple">
-      {item => <Item>{item.textValue}</Item>}
-    </ListBox>
-    <DropTarget />
-  </>;
-}
-```
-
-The drag source can also control which drop operations are allowed for the data. For example, if moving data is not allowed, and only copying is supported, the `getAllowedDropOperations` function could be implemented to indicate this. When you drag the element below, the cursor now shows the copy affordance by default, and pressing a modifier to switch drop operations results in the drop being canceled.
-
-```tsx example
-<ListBox
-  aria-label="Categories"
-  //- begin highlight -//
-  getAllowedDropOperations={() => ['copy']}
-  //- end highlight -//
-  selectionMode="multiple"
- >
-  <Item>Animals</Item>
-  <Item>People</Item>
-  <Item>Plants</Item>
-</ListBox>
-<DropTarget />
-```
-
-## Reordering
-
-Drag and drop can be combined in the same collection component to allow reordering items. See [useDroppableCollection](./useDroppableCollection.html) for more details.
-
-```tsx example export=true render=false
-import {useDroppableCollectionState} from '@react-stately/dnd';
-import {useDroppableCollection, useDropIndicator, ListDropTargetDelegate} from '@react-aria/dnd';
-import {ListKeyboardDelegate} from '@react-aria/selection';
-
-function ReorderableListBox(props) {
-  ///- begin collapse -///
-  // See useListBox docs for more details.
-  let state = useListState(props);
-  let ref = React.useRef(null);
-  let { listBoxProps } = useListBox({
-    ...props,
-    shouldSelectOnPressUp: true
-  }, state, ref);
-
-  // Setup drag state for the collection.
-  let dragState = useDraggableCollectionState({
-    ...props,
-    // Collection and selection manager come from list state.
-    collection: state.collection,
-    selectionManager: state.selectionManager,
-    // Provide data for each dragged item. This function could
-    // also be provided by the user of the component.
-    getItems: props.getItems || ((keys) => {
-      return [...keys].map(key => {
-        let item = state.collection.getItem(key);
-
-        return {
-          'text/plain': item.textValue
-        };
-      });
-    }),
-  });
-
-  useDraggableCollection(props, dragState, ref);
-  ///- end collapse -///
-  // ...
-
-  ///- begin highlight -///
-   // Setup react-stately and react-aria hooks for dropping.
-  let dropState = useDroppableCollectionState({
-    ...props,
-    collection: state.collection,
-    selectionManager: state.selectionManager
-  });
-
-  let {collectionProps} = useDroppableCollection({
-    ...props,
-    // Provide drop targets for keyboard and pointer-based drag and drop.
-    keyboardDelegate: new ListKeyboardDelegate(state.collection, state.disabledKeys, ref),
-    dropTargetDelegate: new ListDropTargetDelegate(state.collection, ref)
-  }, dropState, ref);
-  ///- end highlight -///
-
-  return (
-    /*- begin highlight -*/
-    <ul
-      {...mergeProps(listBoxProps, collectionProps)}
-      /*- end highlight -*/
-      ref={ref}>
-      {[...state.collection].map((item) => (
-        <ReorderableOption
-          key={item.key}
-          item={item}
-          state={state}
-          dragState={dragState}
-          /*- begin highlight -*/
-          dropState={dropState}
-          /*- end highlight -*/
-        />
-      ))}
-    </ul>
-  );
-}
-
-function ReorderableOption({ item, state, dragState, dropState }) {
-  ///- begin collapse -///
-  let ref = React.useRef(null);
-  let { optionProps } = useOption({key: item.key}, state, ref);
-  let { isFocusVisible, focusProps } = useFocusRing();
-
-  // Register the item as a drag source.
-  let {dragProps} = useDraggableItem({
-    key: item.key
-  }, dragState);
-  ///- end collapse -///
-  // ...
-
-  return (
-    <>
-      {/*- begin highlight -*/}
-      <DropIndicator
-        target={{type: 'item', key: item.key, dropPosition: 'before'}}
-        dropState={dropState} />
-      {/*- end highlight -*/}
-      <li
-        {...mergeProps(optionProps, dragProps, focusProps)}
-        ref={ref}
-        className={`option ${isFocusVisible ? 'focus-visible' : ''}`}>
-        {item.rendered}
-      </li>
-      {/*- begin highlight -*/}
-      {state.collection.getKeyAfter(item.key) == null &&
-        <DropIndicator
-          target={{type: 'item', key: item.key, dropPosition: 'after'}}
-          dropState={dropState} />
-      }
-      {/*- end highlight -*/}
-    </>
-  );
-}
-
-///- begin highlight -///
-function DropIndicator(props) {
-  let ref = React.useRef(null);
-  let {dropIndicatorProps, isHidden, isDropTarget} = useDropIndicator(props, props.dropState, ref);
-  if (isHidden) {
-    return null;
-  }
-
-  return (
-    <li
-      {...dropIndicatorProps}
-      role="option"
-      ref={ref}
-      className={`drop-indicator ${isDropTarget ? 'drop-target' : ''}`} />
-  );
-}
-///- end highlight -///
-```
-
-Now, we can render an example ListBox, which allows the user to reorder items. The `onReorder` event is triggered when the user drops dragged items which originated within the same collection. As above, [useListData](./useListData.html) is used to manage the list items in this example, but it is not a requirement.
-
-```tsx example
-import {useListData} from '@react-stately/data';
-
-function Example() {
-  let list = useListData({
-    initialItems: [
-      {id: 1, name: 'Cat'},
-      {id: 2, name: 'Dog'},
-      {id: 3, name: 'Kangaroo'},
-      {id: 4, name: 'Panda'},
-      {id: 5, name: 'Snake'}
-    ]
-  });
-
-  let onReorder = e => {
-    if (e.target.dropPosition === 'before') {
-      list.moveBefore(e.target.key, e.keys);
-    } else if (e.target.dropPosition === 'after') {
-      list.moveAfter(e.target.key, e.keys);
-    }
-  };
-
-  return (
-    <ReorderableListBox
-      aria-label="Favorite animals"
-      selectionMode="multiple"
-      selectionBehavior="replace"
-      items={list.items}
-      ///- begin highlight -///
-      onReorder={onReorder}
-      ///- end highlight -///
-    >
-      {item => <Item>{item.name}</Item>}
-    </ReorderableListBox>
-  );
-}
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.drop-indicator {
-  width: 100%;
-  margin-left: 0;
-  height: 2px;
-  margin-bottom: -2px;
-  outline: none;
-  background: transparent;
-}
-
-.drop-indicator:last-child {
-  margin-bottom: 0;
-  margin-top: -2px;
-}
-
-.drop-indicator.drop-target {
-  background: var(--blue);
-}
-```
-
-</details>
-
-## Props
-
-The full list of props supported by draggable collections is available below.
-
-<TypeContext.Provider value={sharedDocs.links}>
-  <InterfaceType properties={sharedDocs.exports.DraggableCollectionProps.properties} />
-</TypeContext.Provider>
diff --git a/packages/react-aria/docs/dnd/useDroppableCollection.mdx b/packages/react-aria/docs/dnd/useDroppableCollection.mdx
deleted file mode 100644
index d35297b6c6c..00000000000
--- a/packages/react-aria/docs/dnd/useDroppableCollection.mdx
+++ /dev/null
@@ -1,1036 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/dnd';
-import statelyDocs from 'docs:@react-stately/dnd';
-import sharedDocs from 'docs:@react-types/shared';
-import selectionDocs from 'docs:@react-aria/selection';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/dnd/package.json';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import {Keyboard} from '@react-spectrum/text';
-
----
-category: Drag and Drop
-keywords: [drag, drop, dnd, drag and drop, aria, accessibility]
-type: interaction
----
-
-# useDroppableCollection
-
-<PageDescription>{docs.exports.useDroppableCollection.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useDroppableCollection', 'useDroppableItem', 'useDropIndicator']} />
-
-## API
-
-<FunctionAPI function={statelyDocs.exports.useDroppableCollectionState} links={statelyDocs.links} />
-<FunctionAPI function={docs.exports.useDroppableCollection} links={docs.links} />
-<FunctionAPI function={docs.exports.useDroppableItem} links={docs.links} />
-<FunctionAPI function={docs.exports.useDropIndicator} links={docs.links} />
-
-## Introduction
-
-Collection components built with hooks such as [useListBox](ListBox/useListBox.html), [useTable](Table/useTable.html), and [useGridList](GridList/useGridList.html) can support drag and drop interactions. Users can drop data on the collection as a whole, on individual items, insert new items between existing ones, or reorder items.
-
-React Aria supports traditional mouse and touch based drag and drop, but also implements keyboard and screen reader friendly interactions. Users can press <Keyboard>Enter</Keyboard> on a draggable element to enter drag and drop mode. Then, they can press <Keyboard>Tab</Keyboard> to navigate between drop targets. A droppable collection is treated as a single drop target, so that users can easily tab past it to get to the next drop target. Within a droppable collection, keys such as <Keyboard>ArrowDown</Keyboard> and <Keyboard>ArrowUp</Keyboard> can be used to select a _drop position_, such as on an item, or between items. These are represented using <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.DropTarget.id]} /> objects.
-
-The keyboard interactions used within a collection may differ depending on the type or layout. For example, in a grid the <Keyboard>ArrowLeft</Keyboard> and <Keyboard>ArrowRight</Keyboard> may also be used, whereas they may not within a list. In general, the keyboard interactions used during drag and drop match those used when navigating the collection normally.
-
-See the [drag and drop introduction](dnd) to learn more.
-
-### Implementation
-
-The <TypeLink links={docs.links} type={docs.exports.useDroppableCollection} /> hook implements drop interactions within any [collection component](v3:collections.html), using state managed by <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useDroppableCollectionState} />. The props it returns should be combined with those from the collection component you're using, such as `useListBox`. The <TypeLink links={docs.links} type={docs.exports.useDroppableItem} /> hook should be added to each individual item within the collection, combining props from the relevant hook (e.g. `useOption`).
-
-To support dropping between items, the <TypeLink links={docs.links} type={docs.exports.useDropIndicator} /> hook can be used to add additional elements between each item, for example, rendering a line when a user drags between two items. These elements must be implemented according to the relevant ARIA pattern. For example, within a listbox, drop indicators must be implemented using `role="option"`, and within a grid, they must use `role="row"` and `role="gridcell"` to ensure the accessibility tree is valid.
-
-Interactions like keyboard navigation, and drop target positioning may differ depending on the component and layout of items. These are implemented using the <TypeLink links={sharedDocs.links} type={sharedDocs.exports.KeyboardDelegate} /> and <TypeLink links={sharedDocs.links} type={sharedDocs.exports.DropTargetDelegate} /> interfaces, provided to `useDroppableCollection`. In most cases, you can use a default implementation provided by React Aria such as <TypeLink links={selectionDocs.links} type={selectionDocs.exports.ListKeyboardDelegate} /> and <TypeLink links={docs.links} type={docs.exports.ListDropTargetDelegate} />, but you may also provide your own if you need to customize the behavior.
-
-## Dropping on items
-
-This example renders a ListBox using the [useListBox](ListBox/useListBox.html) hook, and adds support for dropping data onto items. The highlighted code sections below show the main additions for drag and drop compared with a normal listbox.
-
-```tsx example
-import {useListBox, useOption} from '@react-aria/listbox';
-import {useListState} from '@react-stately/list';
-import {Item} from '@react-stately/collections';
-import {useFocusRing} from '@react-aria/focus';
-import {mergeProps} from '@react-aria/utils';
-import {useDroppableCollectionState} from '@react-stately/dnd';
-import {useDroppableCollection, useDroppableItem, ListDropTargetDelegate} from '@react-aria/dnd';
-import {ListKeyboardDelegate} from '@react-aria/selection';
-
-function ListBox(props) {
-  // Setup listbox as normal. See the useListBox docs for more details.
-  let state = useListState(props);
-  let ref = React.useRef(null);
-  let {listBoxProps} = useListBox(props, state, ref);
-
-  ///- begin highlight -///
-  // Setup react-stately and react-aria hooks for drag and drop.
-  let dropState = useDroppableCollectionState({
-    ...props,
-    // Collection and selection manager come from list state.
-    collection: state.collection,
-    selectionManager: state.selectionManager
-  });
-
-  let {collectionProps} = useDroppableCollection({
-    ...props,
-    // Provide drop targets for keyboard and pointer-based drag and drop.
-    keyboardDelegate: new ListKeyboardDelegate(state.collection, state.disabledKeys, ref),
-    dropTargetDelegate: new ListDropTargetDelegate(state.collection, ref)
-  }, dropState, ref);
-  ///- end highlight -///
-
-  // Merge listbox props and dnd props, and render the items as normal.
-  return (
-    /*- begin highlight -*/
-    <ul {...mergeProps(listBoxProps, collectionProps)} ref={ref}>
-    {/*- end highlight -*/}
-      {[...state.collection].map((item) => (
-        <Option
-          key={item.key}
-          item={item}
-          state={state}
-          dropState={dropState}
-        />
-      ))}
-    </ul>
-  );
-}
-
-function Option({ item, state, dropState }) {
-  // Setup listbox option as normal. See useListBox docs for details.
-  let ref = React.useRef(null);
-  let {optionProps} = useOption({key: item.key}, state, ref);
-  let {isFocusVisible, focusProps} = useFocusRing();
-
-  ///- begin highlight -///
-  // Register the item as a drop target.
-  let {dropProps, isDropTarget} = useDroppableItem({
-    target: {type: 'item', key: item.key, dropPosition: 'on'}
-  }, dropState, ref);
-  ///- end highlight -///
-
-  // Merge option props and dnd props, and render the item.
-  return (
-    ///- begin highlight -///
-    <li
-      {...mergeProps(optionProps, dropProps, focusProps)}
-      ///- end highlight -///
-      ref={ref}
-      ///- begin highlight -///
-      // Apply a class when the item is the active drop target.
-      className={`option ${isFocusVisible ? 'focus-visible' : ''} ${isDropTarget ? 'drop-target' : ''}`}
-      ///- end highlight -///
-    >
-      {item.rendered}
-    </li>
-  );
-}
-
-<Draggable>Octopus</Draggable>
-<ListBox aria-label="Categories" selectionMode="single" onItemDrop={e => alert(`Dropped on ${e.target.key}`)}>
-  <Item key="animals">Animals</Item>
-  <Item key="people">People</Item>
-  <Item key="plants">Plants</Item>
-</ListBox>
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-[role=listbox] {
-  padding: 0;
-  margin: 5px 0;
-  list-style: none;
-  box-shadow: inset 0 0 0 1px gray;
-  max-width: 250px;
-  outline: none;
-  min-height: 50px;
-  overflow: auto;
-}
-
-[role=listbox]:empty {
-  box-sizing: border-box;
-  border: 1px dashed gray;
-  box-shadow: none;
-}
-
-.option {
-  padding: 3px 6px;
-  outline: none;
-}
-
-.option[aria-selected=true] {
-  background: blueviolet;
-  color: white;
-}
-
-.option.focus-visible {
-  box-shadow: inset 0 0 0 2px orange;
-}
-
-.option.drop-target {
-  border-color: transparent;
-  box-shadow: inset 0 0 0 2px var(--blue);
-}
-```
-
-</details>
-
-
-### Draggable
-
-The `Draggable` component used above is defined below. See [useDrag](useDrag) for more details and documentation.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example render=false export=true
-import {useDrag} from '@react-aria/dnd';
-import {mergeProps} from '@react-aria/utils';
-import {useButton} from '@react-aria/button';
-
-function Draggable({children}) {
-  let {dragProps, dragButtonProps, isDragging} = useDrag({
-    getAllowedDropOperations: () => ['copy'],
-    getItems() {
-      return [{
-        'text/plain': children,
-        'my-app-custom-type': JSON.stringify({message: children})
-      }];
-    }
-  });
-
-  let ref = React.useRef(null);
-  let {buttonProps} = useButton({...dragButtonProps, elementType: 'div'}, ref);
-
-  return (
-    <div {...mergeProps(dragProps, buttonProps)} ref={ref} className={`draggable ${isDragging ? 'dragging' : ''}`}>
-      <span aria-hidden="true">≡</span>{' '}
-      {children}
-    </div>
-  );
-}
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.draggable {
-  display: inline-block;
-  vertical-align: top;
-  border: 1px solid gray;
-  padding: 5px 10px;
-  margin-right: 20px;
-}
-
-.draggable.dragging {
-  opacity: 0.5;
-}
-```
-
-</details>
-
-</details>
-
-## Dropping between items
-
-To add support for dropping between items, first implement the `DropIndicator` component using the <TypeLink links={docs.links} type={docs.exports.useDropIndicator} /> hook. This will render a line between items indicating the insertion position. Within a listbox, these must have `role=option`, and since our listbox is rendered as a `<ul>`, they must also be `<li>` elements to ensure the accessibility and HTML semantics are correct.
-
-`useDropIndicator` returns `isHidden` when the drop indicator is not needed (e.g. if there is no drag session in progress), in which case we can return null to prevent any extra elements from being rendered to the DOM. When `isDropTarget` is true, the drop indicator is active and should be visible. Note that for accessibility, an element must always be rendered while a drag session is in progress, even when the drop indicator is not currently active, so that screen readers can navigate to it.
-
-```tsx example export=true render=false
-import {useDropIndicator} from '@react-aria/dnd';
-
-function DropIndicator(props) {
-  let ref = React.useRef(null);
-  let {dropIndicatorProps, isHidden, isDropTarget} = useDropIndicator(props, props.dropState, ref);
-  if (isHidden) {
-    return null;
-  }
-
-  return (
-    <li
-      {...dropIndicatorProps}
-      role="option"
-      ref={ref}
-      className={`drop-indicator ${isDropTarget ? 'drop-target' : ''}`} />
-  );
-}
-```
-
-Now that the `DropIndicator` component is implemented, we can render an instance between each item in the list. This uses the `before` drop position by default, except for after the last item in the list.
-
-```tsx
-function Option({ item, state, dropState }) {
-  // ...
-
-  return (
-    <>
-      {/*- begin highlight -*/}
-      <DropIndicator
-        target={{type: 'item', key: item.key, dropPosition: 'before'}}
-        dropState={dropState} />
-      {/*- end highlight -*/}
-      <li
-        {...mergeProps(optionProps, dropProps, focusProps)}
-        ref={ref}
-        className={`option ${isFocusVisible ? 'focus-visible' : ''} ${isDropTarget ? 'drop-target' : ''}`}>
-        {item.rendered}
-      </li>
-      {/*- begin highlight -*/}
-      {state.collection.getKeyAfter(item.key) == null &&
-        <DropIndicator
-          target={{type: 'item', key: item.key, dropPosition: 'after'}}
-          dropState={dropState} />
-      }
-      {/*- end highlight -*/}
-    </>
-  );
-}
-```
-
-Now, we can render an example ListBox, which inserts a new item on drop. This uses the [useListData](./useListData.html) hook to manage the list of items, which is updated in the `onInsert` event. Note that `useListData` is a convenience hook, not a requirement. You can manage your state however you wish.
-
-```tsx example
-import {useListData} from '@react-stately/data';
-
-function Example() {
-  let list = useListData({
-    initialItems: [
-      {id: 1, name: 'Cat'},
-      {id: 2, name: 'Dog'},
-      {id: 3, name: 'Kangaroo'}
-    ]
-  });
-
-  let onInsert = async e => {
-    let name = await e.items[0].getText('text/plain');
-    let item = {id: list.items.length + 1, name};
-    if (e.target.dropPosition === 'before') {
-      list.insertBefore(e.target.key, item);
-    } else if (e.target.dropPosition === 'after') {
-      list.insertAfter(e.target.key, item);
-    }
-  };
-
-  return (
-    <>
-      <Draggable>Octopus</Draggable>
-      <ListBox
-        aria-label="Favorite animals"
-        selectionMode="single"
-        items={list.items}
-        acceptedDragTypes={['text/plain']}
-        ///- begin highlight -///
-        onInsert={onInsert}
-        ///- end highlight -///
-      >
-        {item => <Item>{item.name}</Item>}
-      </ListBox>
-    </>
-  );
-}
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.drop-indicator {
-  width: 100%;
-  margin-left: 0;
-  height: 2px;
-  margin-bottom: -2px;
-  outline: none;
-  background: transparent;
-}
-
-.drop-indicator:last-child {
-  margin-bottom: 0;
-  margin-top: -2px;
-}
-
-.drop-indicator.drop-target {
-  background: var(--blue);
-}
-```
-
-</details>
-
-## Dropping on the collection
-
-To add support for dropping on the collection as a whole, an additional `DropIndicator` can be rendered at the start of the list, representing the `root` target. The `isDropTarget` method of the state object can be used to apply a class to the list when the root target is active.
-
-The `onRootDrop` event is triggered when the user drops on the collection. This example also accepts drops on the "Documents" item, by implementing `onItemDrop` as well as `shouldAcceptItemDrop` to limit which items allow drops.
-
-```tsx example export=true
-function ListBox(props) {
-  ///- begin collapse -///
-  let state = useListState(props);
-  let ref = React.useRef(null);
-  let { listBoxProps } = useListBox(props, state, ref);
-
-  let dropState = useDroppableCollectionState({
-    ...props,
-    collection: state.collection,
-    selectionManager: state.selectionManager
-  });
-
-  let {collectionProps} = useDroppableCollection({
-    ...props,
-    keyboardDelegate: new ListKeyboardDelegate(state.collection, state.disabledKeys, ref),
-    dropTargetDelegate: new ListDropTargetDelegate(state.collection, ref)
-  }, dropState, ref);
-  ///- end collapse -///
-  // ...
-
-  ///- begin highlight -///
-  let isDropTarget = dropState.isDropTarget({type: 'root'});
-  ///- end highlight -///
-
-  return (
-    <ul
-      {...mergeProps(listBoxProps, collectionProps)}
-      ref={ref}
-      ///- begin highlight -///
-      className={isDropTarget ? 'drop-target' : ''}
-      ///- end highlight -///
-    >
-      {/*- begin highlight -*/}
-      <DropIndicator target={{type: 'root'}} dropState={dropState} />
-      {/*- end highlight -*/}
-      {[...state.collection].map((item) => (
-        <Option
-          key={item.key}
-          item={item}
-          state={state}
-          dropState={dropState}
-        />
-      ))}
-    </ul>
-  );
-}
-///- begin collapse -///
-function Option({ item, state, dropState }) {
-  let ref = React.useRef(null);
-  let { optionProps } = useOption({key: item.key}, state, ref);
-  let { isFocusVisible, focusProps } = useFocusRing();
-
-  let {dropProps, isDropTarget} = useDroppableItem({
-    target: {type: 'item', key: item.key, dropPosition: 'on'}
-  }, dropState, ref);
-
-  return (
-    <>
-      <DropIndicator
-        target={{type: 'item', key: item.key, dropPosition: 'before'}}
-        dropState={dropState} />
-      <li
-        {...mergeProps(optionProps, dropProps, focusProps)}
-        ref={ref}
-        className={`option ${isFocusVisible ? 'focus-visible' : ''} ${isDropTarget ? 'drop-target' : ''}`}>
-        {item.rendered}
-      </li>
-      {state.collection.getKeyAfter(item.key) == null &&
-        <DropIndicator
-          target={{type: 'item', key: item.key, dropPosition: 'after'}}
-          dropState={dropState} />
-      }
-    </>
-  );
-}
-///- end collapse -///
-
-<Draggable>budget.xls</Draggable>
-<ListBox
-  aria-label="Files"
-  selectionMode="single"
-  ///- begin highlight -///
-  onRootDrop={() => alert('Dropped on root')}
-  onItemDrop={e => alert(`Dropped on ${e.target.key}`)}
-  shouldAcceptItemDrop={target => target.key === 'documents'}
-  ///- end highlight -///
->
-  <Item key="documents">Documents</Item>
-  <Item>proposal.doc</Item>
-  <Item>presentation.ppt</Item>
-</ListBox>
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-[role=listbox].drop-target {
-  box-shadow: inset 0 0 0 2px var(--blue);
-}
-```
-
-</details>
-
-## Reordering
-
-Drag and drop can be combined in the same collection component to allow reordering items. This example builds on the [dropping between items](#dropping-between-items) example above to add support for dragging items as well. This is done using the `useDraggableCollection` and `useDraggableItem` hooks. See the [docs](./useDraggableCollection.html) for more details on these hooks.
-
-```tsx example export=true render=false
-import {useDraggableCollectionState} from '@react-stately/dnd';
-import {useDraggableCollection, useDraggableItem} from '@react-aria/dnd';
-
-function ReorderableListBox(props) {
-  // See useListBox docs for more details.
-  let state = useListState(props);
-  let ref = React.useRef(null);
-  let { listBoxProps } = useListBox({
-    ...props,
-    ///- begin highlight -///
-    shouldSelectOnPressUp: true
-    ///- end highlight -///
-  }, state, ref);
-
-  let dropState = useDroppableCollectionState({
-    ...props,
-    collection: state.collection,
-    selectionManager: state.selectionManager
-  });
-
-  let {collectionProps} = useDroppableCollection({
-    ...props,
-    keyboardDelegate: new ListKeyboardDelegate(state.collection, state.disabledKeys, ref),
-    dropTargetDelegate: new ListDropTargetDelegate(state.collection, ref)
-  }, dropState, ref);
-
-  ///- begin highlight -///
-  // Setup drag state for the collection.
-  let dragState = useDraggableCollectionState({
-    ...props,
-    // Collection and selection manager come from list state.
-    collection: state.collection,
-    selectionManager: state.selectionManager,
-    // Provide data for each dragged item. This function could
-    // also be provided by the user of the component.
-    getItems: props.getItems || ((keys) => {
-      return [...keys].map(key => {
-        let item = state.collection.getItem(key);
-
-        return {
-          'text/plain': item.textValue
-        };
-      });
-    }),
-  });
-
-  useDraggableCollection(props, dragState, ref);
-  ///- end highlight -///
-
-  return (
-    <ul
-      {...mergeProps(listBoxProps, collectionProps)}
-      ref={ref}>
-      {[...state.collection].map((item) => (
-        <ReorderableOption
-          key={item.key}
-          item={item}
-          state={state}
-          dragState={dragState}
-          dropState={dropState}
-        />
-      ))}
-    </ul>
-  );
-}
-
-function ReorderableOption({ item, state, dragState, dropState }) {
-  ///- begin collapse -///
-  let ref = React.useRef(null);
-  let { optionProps } = useOption({key: item.key}, state, ref);
-  let { isFocusVisible, focusProps } = useFocusRing();
-
-  let {dropProps, isDropTarget} = useDroppableItem({
-    target: {type: 'item', key: item.key, dropPosition: 'on'}
-  }, dropState, ref);
-  ///- end collapse -///
-  // ...
-
-  ///- begin highlight -///
-  // Register the item as a drag source.
-  let {dragProps} = useDraggableItem({
-    key: item.key
-  }, dragState);
-  ///- end highlight -///
-
-  return (
-    <>
-      <DropIndicator
-        target={{type: 'item', key: item.key, dropPosition: 'before'}}
-        dropState={dropState} />
-      <li
-        ///- begin highlight -///
-        {...mergeProps(optionProps, dragProps, dropProps, focusProps)}
-        ///- end highlight -///
-        ref={ref}
-        className={`option ${isFocusVisible ? 'focus-visible' : ''} ${isDropTarget ? 'drop-target' : ''}`}>
-        {item.rendered}
-      </li>
-      {state.collection.getKeyAfter(item.key) == null &&
-        <DropIndicator
-          target={{type: 'item', key: item.key, dropPosition: 'after'}}
-          dropState={dropState} />
-      }
-    </>
-  );
-}
-```
-
-Now, we can render an example ListBox, which allows the user to reorder items. The `onReorder` event is triggered when the user drops dragged items which originated within the same collection. As above, [useListData](./useListData.html) is used to manage the list items in this example, but it is not a requirement.
-
-```tsx example
-import {useListData} from '@react-stately/data';
-
-function Example() {
-  let list = useListData({
-    initialItems: [
-      {id: 1, name: 'Cat'},
-      {id: 2, name: 'Dog'},
-      {id: 3, name: 'Kangaroo'},
-      {id: 4, name: 'Panda'},
-      {id: 5, name: 'Snake'}
-    ]
-  });
-
-  let onReorder = e => {
-    if (e.target.dropPosition === 'before') {
-      list.moveBefore(e.target.key, e.keys);
-    } else if (e.target.dropPosition === 'after') {
-      list.moveAfter(e.target.key, e.keys);
-    }
-  };
-
-  return (
-    <ReorderableListBox
-      aria-label="Favorite animals"
-      selectionMode="multiple"
-      selectionBehavior="replace"
-      items={list.items}
-      ///- begin highlight -///
-      onReorder={onReorder}
-      ///- end highlight -///
-    >
-      {item => <Item>{item.name}</Item>}
-    </ReorderableListBox>
-  );
-}
-```
-
-## Drop data
-
-`useDroppableCollection` allows users to drop one or more **drag items**, each of which contains data to be transferred from the drag source to drop target. There are three kinds of drag items:
-
-* `text` – represents data inline as a string in one or more formats
-* `file` – references a file on the user's device
-* `directory` – references the contents of a directory
-
-### Text
-
-A <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.TextDropItem.id]} /> represents textual data in one or more different formats. These may be either standard [mime types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) or custom app-specific formats. Representing data in multiple formats allows drop targets both within and outside an application to choose data in a format that they understand. For example, a complex object may be serialized in a custom format for use within an application, with fallbacks in plain text and/or rich HTML that can be used when a user drops data from an external application.
-
-The example below uses the `acceptedDragTypes` prop to accept items that include a custom app-specific type, which is retrieved using the item's `getText` method. The same draggable component as used in the above example is used here, but rather than displaying the plain text representation, the custom format is used instead. When `acceptedDragTypes` is specified, the dropped items are filtered to include only items that include the accepted types.
-
-```tsx example
-function Example() {
-  let list = useListData({
-    initialItems: [
-      {id: 1, name: 'Cat'},
-      {id: 2, name: 'Dog'},
-      {id: 3, name: 'Kangaroo'}
-    ]
-  });
-
-  let onInsert = async e => {
-    /*- begin highlight -*/
-    let value = JSON.parse(await e.items[0].getText('my-app-custom-type'));
-    let item = {id: list.items.length + 1, name: value.message};
-    /*- end highlight -*/
-
-    if (e.target.dropPosition === 'before') {
-      list.insertBefore(e.target.key, item);
-    } else if (e.target.dropPosition === 'after') {
-      list.insertAfter(e.target.key, item);
-    }
-  };
-
-  return (
-    <>
-      <Draggable>Octopus</Draggable>
-      <ListBox
-        aria-label="Favorite animals"
-        selectionMode="single"
-        items={list.items}
-        ///- begin highlight -///
-        acceptedDragTypes={['my-app-custom-type']}
-        ///- end highlight -///
-        onInsert={onInsert}>
-        {item => <Item>{item.name}</Item>}
-      </ListBox>
-    </>
-  );
-}
-```
-
-### Files
-
-A <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.FileDropItem.id]} /> references a file on the user's device. It includes the name and mime type of the file, and methods to read the contents as plain text, or retrieve a native [File](https://developer.mozilla.org/en-US/docs/Web/API/File) object which can be attached to form data for uploading.
-
-This example accepts JPEG and PNG image files, and renders them by creating a local [object URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL). When the list is empty, you can drop on the whole collection, and otherwise items can be inserted.
-
-```tsx example
-function Example() {
-  let list = useListData({});
-  let getItems = e => {
-    /*- begin highlight -*/
-    return Promise.all(
-      e.items.map(async item => ({
-        id: Math.random(),
-        url: URL.createObjectURL(await item.getFile()),
-        name: item.name
-      }))
-    );
-    /*- end highlight -*/
-  };
-
-  let onRootDrop = async e => {
-    list.prepend(...await getItems(e));
-  };
-
-  let onInsert = async e => {
-    if (e.target.dropPosition === 'before') {
-      list.insertBefore(e.target.key, ...await getItems(e));
-    } else if (e.target.dropPosition === 'after') {
-      list.insertAfter(e.target.key, ...await getItems(e));
-    }
-  };
-
-  return (
-    <ListBox
-      aria-label="Images"
-      items={list.items}
-      ///- begin highlight -///
-      acceptedDragTypes={['image/jpeg', 'image/png']}
-      ///- end highlight -///
-      onRootDrop={onRootDrop}
-      onInsert={onInsert}>
-      {item => (
-        <Item textValue={item.name}>
-          <div className="image-item">
-            <img src={item.url} />
-            <span>{item.name}</span>
-          </div>
-        </Item>
-      )}
-    </ListBox>
-  );
-}
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.image-item {
-  display: flex;
-  height: 50px;
-  gap: 10px;
-}
-
-.image-item img {
-  height: 100%;
-  object-fit: contain;
-}
-
-.image-item span {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-```
-
-</details>
-
-### Directories
-
-A <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.DirectoryDropItem.id]} /> references the contents of a directory on the user's device. It includes the name of the directory, as well as a method to iterate through the files and folders within the directory. The contents of any folders within the directory can be accessed recursively.
-
-The `getEntries` method returns an [async iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of) object, which can be used in a `for await...of` loop. This provides each item in the directory as either a <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.FileDropItem.id]} /> or <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.DirectoryDropItem.id]} />, and you can access the contents of each file as discussed above.
-
-This example accepts directory drops over the whole collection, and renders the contents as items in the list. `DIRECTORY_DRAG_TYPE` is imported from `@react-aria/dnd` and included in the `acceptedDragTypes` prop to limit the accepted items to only directories.
-
-```tsx example
-import File from '@spectrum-icons/workflow/FileTxt';
-import Folder from '@spectrum-icons/workflow/Folder';
-///- begin highlight -///
-import {DIRECTORY_DRAG_TYPE} from '@react-aria/dnd';
-///- end highlight -///
-
-function Example() {
-  let [files, setFiles] = React.useState([]);
-  let onRootDrop = async e => {
-    /*- begin highlight -*/
-    // Read entries in directory and update state with relevant info.
-    let files = [];
-    for await (let entry of e.items[0].getEntries()) {
-      files.push({
-        name: entry.name,
-        kind: entry.kind
-      });
-    }
-    setFiles(files);
-    /*- end highlight -*/
-  };
-
-  return (
-    <ListBox
-      aria-label="Directory contents"
-      items={files}
-      ///- begin highlight -///
-      acceptedDragTypes={[DIRECTORY_DRAG_TYPE]}
-      ///- end highlight -///
-      onRootDrop={onRootDrop}>
-      {item => (
-        <Item key={item.name} textValue={item.name}>
-          <div className="dir-item">
-            {item.kind === 'directory' ? <Folder /> : <File />}
-            <span>{item.name}</span>
-          </div>
-        </Item>
-      )}
-    </ListBox>
-  );
-}
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.dir-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.dir-item {
-  flex: 0 0 auto;
-}
-
-.dir-item {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-```
-
-</details>
-
-## Drop operations
-
-A <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.DropOperation.id]} /> is an indication of what will happen when dragged data is dropped on a particular drop target. These are:
-
-* `move` – indicates that the dragged data will be moved from its source location to the target location.
-* `copy` – indicates that the dragged data will be copied to the target destination.
-* `link` – indicates that there will be a relationship established between the source and target locations.
-* `cancel` – indicates that the drag and drop operation will be canceled, resulting in no changes made to the source or target.
-
-Many operating systems display these in the form of a cursor change, e.g. a plus sign to indicate a copy operation. The user may also be able to use a modifier key to choose which drop operation to perform, such as <Keyboard>Option</Keyboard> or <Keyboard>Alt</Keyboard> to switch from move to copy.
-
-The drag source can specify which drop operations are allowed for the dragged data (see the [useDrag docs](useDrag) for how to customize this). By default, the first allowed operation is allowed by drop targets, meaning that the drop target accepts data of any type and operation.
-
-### getDropOperation
-
-The `getDropOperation` function passed to `useDroppableCollection` can be used to provide appropriate feedback to the user when a drag hovers over the drop target. This function receives the drop target, set of types contained in the drag, and a list of allowed drop operations as specified by the drag source. It should return one of the drop operations in `allowedOperations`, or a specific drop operation if only that drop operation is supported. It may also return `'cancel'` to reject the drop. If the returned operation is not in `allowedOperations`, then the drop target will act as if `'cancel'` was returned.
-
-In the below example, the drop target only supports dropping PNG images. If a PNG is dragged over the target, it will be highlighted and the operating system displays a copy cursor. If another type is dragged over the target, then there is no visual feedback, indicating that a drop is not accepted there. If the user holds a modifier key such as <Keyboard>Control</Keyboard> while dragging over the drop target in order to change the drop operation, then the drop target does not accept the drop.
-
-```tsx example
-function Example() {
-  ///- begin collapse -///
-  let list = useListData({});
-  let onRootDrop = async e => {
-    let items = await Promise.all(
-      e.items
-        .map(async item => ({
-          id: Math.random(),
-          url: URL.createObjectURL(await item.getFile()),
-          name: item.name
-        }))
-    );
-
-    list.prepend(...items);
-  };
-  ///- end collapse -///
-  // ...
-
-  return (
-    <ListBox
-      aria-label="Images"
-      items={list.items}
-      /*- begin highlight -*/
-      getDropOperation={() => 'copy'}
-      /*- end highlight -*/
-      acceptedDragTypes={['image/png']}
-      onRootDrop={onRootDrop}>
-      {item => (
-        <Item textValue={item.name}>
-          <div className="image-item">
-            <img src={item.url} />
-            <span>{item.name}</span>
-          </div>
-        </Item>
-      )}
-    </ListBox>
-  );
-}
-```
-
-### Drop events
-
-Drop events such as `onInsert`, `onItemDrop`, etc. also include the `dropOperation`. This can be used to perform different actions accordingly, for example, when communicating with a backend API.
-
-```tsx
-let onItemDrop = async (e) => {
-  let data = JSON.parse(await e.items[0].getText('my-app-file'));
-  /*- begin highlight -*/
-  switch (e.dropOperation) {
-    case 'move':
-      MyAppFileService.move(data.filePath, props.filePath);
-      break;
-    case 'copy':
-      MyAppFileService.copy(data.filePath, props.filePath);
-      break;
-    case 'link':
-      MyAppFileService.link(data.filePath, props.filePath);
-      break;
-  }
-  /*- end highlight -*/
-};
-```
-
-## Low level API
-
-The above examples have used high level events such as `onInsert`, `onItemDrop`, and `onReorder`, along with props such as `acceptedDragTypes`. Based on these props, `useDroppableCollection` automatically determines whether drag data is accepted and where (e.g. on items, between items, etc.). It also automatically filters the dropped items based on their types. For more complex scenarios, the lower level `getDropOperation` and `onDrop` functions can be used instead.
-
-To programmatically determine whether a drop is accepted based on the dragged types, target key, and drop position, implement the `getDropOperation` function. `acceptedDragTypes` and `shouldAcceptItemDrop` (when `onItemDrop` is provided) may also be used in combination with `getDropOperation` as a pre-filter. See the section on [drop operations](#drop-operations) above for more details.
-
-To handle all accepted drops in a single function, implement the `onDrop` event rather than `onInsert`, `onItemDrop`, etc. When defined, this overrides any other drop handlers. The provided <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.DroppableCollectionDropEvent.id]} /> includes details on the drop target, dropped items, drop operation, etc.
-
-This example allows directories to be dropped between items, and only files of certain types to be dropped on the pre-existing directories.
-
-```tsx example
-import {DIRECTORY_DRAG_TYPE} from '@react-aria/dnd';
-
-function Example() {
-  let list = useListData({
-    initialItems: [
-      {id: 1, name: 'Images', contains: 0, accept: ['image/png', 'image/jpeg']},
-      {id: 2, name: 'Videos', contains: 0, accept: ['video/mp4']},
-      {id: 3, name: 'Documents', contains: 0, accept: ['text/plain', 'application/pdf']}
-    ]
-  });
-
-  let getDropOperation = (target, types, allowedOperations) => {
-    // When dropping on an item, check whether the item accepts the drag types and cancel if not.
-    if (target.dropPosition === 'on') {
-      let item = list.getItem(target.key);
-      return item.accept && item.accept.some(type => types.has(type)) ? allowedOperations[0] : 'cancel';
-    }
-
-    // If dropping between items, support a copy operation.
-    return types.has(DIRECTORY_DRAG_TYPE) ? 'copy' : 'cancel';
-  };
-
-  let onDrop = async e => {
-    let items = await Promise.all(
-      e.items
-        .filter(item => {
-          // Check if dropped item is accepted.
-          if (e.target.dropPosition === 'on') {
-            let folder = list.getItem(e.target.key);
-            return folder.accept.includes(item.type)
-          }
-
-          return item.kind === 'directory';
-        })
-        .map(async item => {
-          // Collect child count from dropped directories.
-          let contains = 0;
-          if (item.kind === 'directory') {
-            for await (let _ of item.getEntries()) {
-              contains++;
-            }
-          }
-
-          return {
-            id: Math.random(),
-            name: item.name,
-            contains
-          };
-        })
-    );
-
-    // Update item count if dropping on an item, otherwise insert the new items in the list.
-    if (e.target.dropPosition === 'on') {
-      let item = list.getItem(e.target.key);
-      list.update(e.target.key, {
-        ...item,
-        contains: item.contains + items.length
-      });
-    } else if (e.target.dropPosition === 'before') {
-      list.insertBefore(e.target.key, ...items);
-    } else if (e.target.dropPosition === 'after') {
-      list.insertAfter(e.target.key, ...items);
-    }
-  };
-
-  return (
-    <ListBox
-      aria-label="Folders"
-      items={list.items}
-      getDropOperation={getDropOperation}
-      onDrop={onDrop}>
-      {item => (
-        <Item textValue={item.name}>
-          <div className="dir-item">
-            <Folder />
-            <span>{item.name} ({item.contains} items)</span>
-          </div>
-        </Item>
-      )}
-    </ListBox>
-  );
-}
-```
-
-## Props
-
-The full list of props supported by droppable collections is available below.
-
-<TypeContext.Provider value={sharedDocs.links}>
-  <InterfaceType properties={sharedDocs.exports.DroppableCollectionProps.properties} />
-</TypeContext.Provider>
diff --git a/packages/react-aria/docs/gridlist/anatomy.svg b/packages/react-aria/docs/gridlist/anatomy.svg
deleted file mode 100644
index 4dc667b119a..00000000000
--- a/packages/react-aria/docs/gridlist/anatomy.svg
+++ /dev/null
@@ -1,105 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="max-height:300px;background:var(--anatomy-gray-100);padding:32px;margin-bottom:16px;width:calc(100% - 64px);border-radius:var(--anatomy-radius);" viewBox="0 0 627 300">
-  <title>List anatomy diagram</title>
-  <desc>Shows a list and list item component with labels pointing to its parts.</desc>
-  <defs>
-    <clipPath id="clip-listview_anatomy">
-      <rect width="627" height="300"/>
-    </clipPath>
-  </defs>
-  <g id="listview_anatomy" clip-path="url(#clip-listview_anatomy)">
-    <rect width="627" height="300" fill="var(--anatomy-gray-100)"/>
-    <g id="Group_156661" data-name="Group 156661" transform="translate(0 -186)">
-      <text id="List_container" data-name="List container" transform="translate(75.999 366)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic"><tspan x="-67.847" y="0">List container</tspan></text>
-      <g id="Group_152111" data-name="Group 152111" transform="translate(195 847.715) rotate(180)">
-        <rect id="Rectangle_138454" data-name="Rectangle 138454" width="8" height="1" transform="translate(101 484.715)" fill="var(--anatomy-gray-700)"/>
-        <g id="Group_72702" data-name="Group 72702" transform="translate(92 372)">
-          <rect id="Rectangle_138451" data-name="Rectangle 138451" width="8" height="1" transform="translate(0 -0.285)" fill="var(--anatomy-gray-700)"/>
-          <rect id="Rectangle_138453" data-name="Rectangle 138453" width="1" height="228" transform="translate(8 -0.285)" fill="var(--anatomy-gray-700)"/>
-          <rect id="Rectangle_138452" data-name="Rectangle 138452" width="8" height="1" transform="translate(0 226.715)" fill="var(--anatomy-gray-700)"/>
-        </g>
-      </g>
-    </g>
-    <g id="Group_156664" data-name="Group 156664" transform="translate(0 -199)">
-      <g id="Rectangle_142243" data-name="Rectangle 142243" transform="translate(123 258)" fill="var(--anatomy-gray-50)" stroke="var(--anatomy-gray-400)" stroke-width="1.5">
-        <rect width="364" height="232" rx="6" stroke="none"/>
-        <rect x="0.75" y="0.75" width="362.5" height="230.5" rx="5.25" fill="none"/>
-      </g>
-      <rect id="Rectangle_142239" data-name="Rectangle 142239" width="364" height="58" transform="translate(123 258)" fill="var(--anatomy-gray-800)" opacity="0"/>
-      <rect id="Rectangle_142240" data-name="Rectangle 142240" width="364" height="58" transform="translate(123 316)" fill="var(--anatomy-gray-800)" opacity="0"/>
-      <rect id="Rectangle_142241" data-name="Rectangle 142241" width="364" height="58" transform="translate(123 374)" fill="var(--spectrum-alias-highlight-selected)"/>
-      <rect id="Rectangle_142242" data-name="Rectangle 142242" width="364" height="58" transform="translate(123 432)" fill="var(--anatomy-gray-800)" opacity="0"/>
-      <text id="List_item" data-name="List item" transform="translate(174 293)" fill="var(--anatomy-gray-800)" font-size="21" font-family="var(--anatomy-font)" font-style="italic"><tspan x="0" y="0">List item</tspan></text>
-      <text id="List_item-2" data-name="List item" transform="translate(174 351)" fill="var(--anatomy-gray-800)" font-size="21" font-family="var(--anatomy-font)" font-style="italic"><tspan x="0" y="0">List item</tspan></text>
-      <text id="List_item-3" data-name="List item" transform="translate(174 409)" fill="var(--anatomy-gray-800)" font-size="21" font-family="var(--anatomy-font)" font-style="italic"><tspan x="0" y="0">List item</tspan></text>
-      <text id="List_item-4" data-name="List item" transform="translate(174 467)" fill="var(--anatomy-gray-800)" font-size="21" font-family="var(--anatomy-font)" font-style="italic"><tspan x="0" y="0">List item</tspan></text>
-      <line id="Line_13" data-name="Line 13" x2="363.252" transform="translate(123.5 316.5)" fill="none" stroke="var(--anatomy-gray-400)" stroke-width="1.5"/>
-      <line id="Line_14" data-name="Line 14" x2="363.252" transform="translate(123.5 374.522)" fill="none" stroke="var(--anatomy-gray-400)" stroke-width="1.5"/>
-      <line id="Line_15" data-name="Line 15" x2="363.252" transform="translate(123.5 432.522)" fill="none" stroke="var(--anatomy-gray-400)" stroke-width="1.5"/>
-      <g id="Checkbox" transform="translate(142 264)">
-        <g id="Placement_Area" data-name="Placement Area" fill="red" stroke="var(--anatomy-gray-900)" stroke-opacity="0" stroke-width="1" opacity="0">
-          <rect width="21" height="48" stroke="none"/>
-          <rect x="0.5" y="0.5" width="20" height="47" fill="none"/>
-        </g>
-        <g id="Box" transform="translate(0 13.5)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="3">
-          <rect width="21" height="21" rx="2" stroke="none"/>
-          <rect x="1.5" y="1.5" width="18" height="18" rx="0.5" fill="none"/>
-        </g>
-      </g>
-      <g id="Checkbox-2" data-name="Checkbox" transform="translate(141 321)">
-        <g id="Placement_Area-2" data-name="Placement Area" fill="red" stroke="var(--anatomy-gray-900)" stroke-opacity="0" stroke-width="1" opacity="0">
-          <rect width="21" height="48" stroke="none"/>
-          <rect x="0.5" y="0.5" width="20" height="47" fill="none"/>
-        </g>
-        <g id="Box-2" data-name="Box" transform="translate(0 13.5)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="3">
-          <rect width="21" height="21" rx="2" stroke="none"/>
-          <rect x="1.5" y="1.5" width="18" height="18" rx="0.5" fill="none"/>
-        </g>
-      </g>
-      <g id="Checkbox-3" data-name="Checkbox" transform="translate(141 379)">
-        <g id="Placement_Area-3" data-name="Placement Area" fill="red" stroke="var(--anatomy-gray-900)" stroke-opacity="0" stroke-width="1" opacity="0">
-          <rect width="21" height="48" stroke="none"/>
-          <rect x="0.5" y="0.5" width="20" height="47" fill="none"/>
-        </g>
-        <g id="Box-3" data-name="Box" transform="translate(0 13.5)" fill="var(--anatomy-gray-700)" stroke="var(--anatomy-gray-900)" stroke-opacity="0" stroke-width="1">
-          <rect width="21" height="21" rx="2" stroke="none"/>
-          <rect x="0.5" y="0.5" width="20" height="20" rx="1.5" fill="none"/>
-        </g>
-        <g id="Checkmark" transform="translate(3 16.5)">
-          <g id="Frame" fill="var(--anatomy-gray-600)" stroke="var(--anatomy-gray-900)" stroke-opacity="0" stroke-width="1" opacity="0">
-            <rect width="15" height="15" stroke="none"/>
-            <rect x="0.5" y="0.5" width="14" height="14" fill="none"/>
-          </g>
-          <path id="Shape" d="M5.441,13.011a1.5,1.5,0,0,1-1.182-.578L.827,7.934A1.5,1.5,0,1,1,3.191,6.089l2.25,2.986,5.886-7.486a1.5,1.5,0,1,1,2.364,1.845l-7.068,9A1.5,1.5,0,0,1,5.441,13.011Z" transform="translate(0.241 0.489)" fill="var(--anatomy-gray-100)"/>
-        </g>
-      </g>
-      <g id="Checkbox-4" data-name="Checkbox" transform="translate(141 437)">
-        <g id="Placement_Area-4" data-name="Placement Area" fill="red" stroke="var(--anatomy-gray-900)" stroke-opacity="0" stroke-width="1" opacity="0">
-          <rect width="21" height="48" stroke="none"/>
-          <rect x="0.5" y="0.5" width="20" height="47" fill="none"/>
-        </g>
-        <g id="Box-4" data-name="Box" transform="translate(0 13.5)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="3">
-          <rect width="21" height="21" rx="2" stroke="none"/>
-          <rect x="1.5" y="1.5" width="18" height="18" rx="0.5" fill="none"/>
-        </g>
-      </g>
-    </g>
-    <g id="Group_152101" data-name="Group 152101" transform="translate(200.005 422)">
-      <text id="List_item_row" data-name="List item row" transform="translate(336 -343)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic"><tspan x="0" y="0">List item row</tspan></text>
-      <g id="Group_152108" data-name="Group 152108" transform="translate(752.999 -692) rotate(180)">
-        <rect id="Rectangle_3659" data-name="Rectangle 3659" width="20" height="48" transform="translate(421 -336) rotate(-90)" fill="red" opacity="0"/>
-        <path id="Union_56" data-name="Union 56" d="M-9134-324.5a2.5,2.5,0,0,1,2-2.449V-370h1v43.052a2.5,2.5,0,0,1,2,2.449,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-9134-324.5Z" transform="translate(791 -9477.5) rotate(-90)" fill="var(--anatomy-gray-500)"/>
-      </g>
-    </g>
-    <g id="Group_156663" data-name="Group 156663" transform="translate(200.005 447)">
-      <text id="List_item_grid_cell" data-name="List item grid cell" transform="translate(336 -343)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic"><tspan x="0" y="0">List item grid cell</tspan></text>
-      <g id="Group_152108-2" data-name="Group 152108" transform="translate(752.999 -692) rotate(180)">
-        <rect id="Rectangle_3659-2" data-name="Rectangle 3659" width="20" height="48" transform="translate(421 -336) rotate(-90)" fill="red" opacity="0"/>
-        <path id="Union_56-2" data-name="Union 56" d="M-9134-304.5a2.5,2.5,0,0,1,2-2.451V-370h1v63.05a2.5,2.5,0,0,1,2,2.451,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-9134-304.5Z" transform="translate(791 -9477.5) rotate(-90)" fill="var(--anatomy-gray-500)"/>
-      </g>
-    </g>
-    <text id="Selection_checkbox_optional_" data-name="Selection
-checkbox
-(optional)" transform="translate(175 14)" fill="var(--anatomy-gray-700)" font-size="12" font-family="var(--anatomy-font)" font-style="italic"><tspan x="-41.82" y="0">Selection</tspan><tspan x="-43.26" y="15">checkbox</tspan><tspan x="-46.5" y="30">(optional)</tspan></text>
-    <line id="Line_9" data-name="Line 9" y2="24" transform="translate(152.5 50.5)" fill="none" stroke="var(--anatomy-gray-700)" stroke-width="1"/>
-  </g>
-</svg>
diff --git a/packages/react-aria/docs/gridlist/useGridList.mdx b/packages/react-aria/docs/gridlist/useGridList.mdx
deleted file mode 100644
index 4bdd7cfe819..00000000000
--- a/packages/react-aria/docs/gridlist/useGridList.mdx
+++ /dev/null
@@ -1,558 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/gridlist';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import collectionsDocs from 'docs:@react-types/shared/src/collections.d.ts';
-import selectionDocs from 'docs:@react-stately/selection';
-import statelyDocs from 'docs:@react-stately/list';
-import focusDocs from 'docs:@react-aria/focus';
-import checkboxDocs from 'docs:@react-aria/checkbox';
-import utilsDocs from 'docs:@react-aria/utils';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import {Keyboard} from '@react-spectrum/text';
-import packageData from '@react-aria/gridlist/package.json';
-import Anatomy from './anatomy.svg';
-
----
-category: Collections
-keywords: [list, aria, grid]
----
-
-# useGridList
-
-{/* Description had a misspelling in released version. Revert this on the next release. */}
-{/* <PageDescription>{docs.exports.useGridList.description}</PageDescription> */}
-<PageDescription>Provides the behavior and accessibility implementation for a list component with interactive children. A grid list displays data in a single column and enables a user to navigate its contents via directional navigation keys.</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useGridList', 'useGridListItem', 'useGridListSelectionCheckbox']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/grid/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useGridList} links={docs.links} />
-<FunctionAPI function={docs.exports.useGridListItem} links={docs.links} />
-<FunctionAPI function={docs.exports.useGridListSelectionCheckbox} links={docs.links} />
-
-## Features
-
-A list can be built using [&lt;ul&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) or [&lt;ol&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) HTML elements, but does not support any user interactions.
-HTML lists are meant for static content, rather than lists with rich interactions like focusable elements within rows, keyboard navigation, row selection, etc.
-`useGridList` helps achieve accessible and interactive list components that can be styled as needed.
-
-* **Item selection** – Single or multiple selection, with optional checkboxes, disabled rows, and both `toggle` and `replace` selection behaviors.
-* **Interactive children** – List items may include interactive elements such as buttons, checkboxes, menus, etc.
-* **Actions** – Items support optional row actions such as navigation via click, tap, double click, or <Keyboard>Enter</Keyboard> key.
-* **Async loading** – Support for loading items asynchronously, with infinite and virtualized scrolling.
-* **Keyboard navigation** – List items and focusable children can be navigated using the arrow keys, along with page up/down, home/end, etc. Typeahead, auto scrolling, and selection modifier keys are supported as well.
-* **Touch friendly** – Selection and actions adapt their behavior depending on the device. For example, selection is activated via long press on touch when item actions are present.
-* **Accessible** – Follows the [ARIA grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/), with additional selection announcements via an ARIA live region. Extensively tested across many devices and [assistive technologies](../quality#supported-screen-readers) to ensure announcements and behaviors are consistent.
-
-**Note**: Use `useGridList` when your list items may contain interactive elements such as buttons, checkboxes, menus, etc. within them. If your list items contain only static content such as text and images, then consider using [useListBox](../ListBox/useListBox.html) instead for a slightly better screen reader experience (especially on mobile).
-
-## Anatomy
-
-<Anatomy role="img" aria-label="Anatomy diagram of a list container, consisting of multiple list items. Each list item contains a selection checkbox, a list item row, and a list item cell." />
-
-A grid list consists of a container element, with rows of data inside. The rows within a list may contain focusable elements or plain text content.
-If the list supports row selection, each row can optionally include a selection checkbox.
-
-The <TypeLink links={docs.links} type={docs.exports.useGridList} /> and <TypeLink links={docs.links} type={docs.exports.useGridListItem} /> hooks handle keyboard, mouse, and other interactions to support
-row selection, in list navigation, and overall focus behavior. Those hooks handle exposing the list and its contents to assistive technology using ARIA. <TypeLink links={docs.links} type={docs.exports.useGridListSelectionCheckbox} /> handles row selection and associating each checkbox with its respective rows
-for assistive technology.
-
-`useGridList` returns props that you should spread onto the list container element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useGridList.return.id].properties} />
-</TypeContext.Provider>
-
-`useGridListItem` returns props for an individual option and its children, along with states you can use for styling:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useGridListItem.return.id].properties} />
-</TypeContext.Provider>
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useListState} />
-hook from `@react-stately/list`. The state object should be passed as an option to each of the above hooks where applicable.
-
-Note that an `aria-label` or `aria-labelledby` must be passed to the list to identify the element to assistive technology.
-
-## State management
-
-`useGridList` requires knowledge of the rows in the list in order to handle keyboard
-navigation and other interactions. It does this using
-the <TypeLink links={collectionsDocs.links} type={collectionsDocs.exports.Collection} />
-interface, which is a generic interface to access sequential unique keyed data. You can
-implement this interface yourself, e.g. by using a prop to pass a list of item objects,
-but <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useListState} /> from
-`@react-stately/list` implements a JSX based interface for building collections instead.
-See [Collection Components](v3:collections.html) for more information.
-
-In addition, <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useListState} />
-manages the state necessary for multiple selection and exposes
-a <TypeLink links={selectionDocs.links} type={selectionDocs.exports.SelectionManager} />,
-which makes use of the collection to provide an interface to update the selection state.
-For more information, see [Selection](v3:selection.html).
-
-## Example
-
-Lists are [collection components](v3:collections.html) that include rows as child elements.
-In this example, we'll use the standard HTML unordered list elements along with hooks from React
-Aria for each child. You may also use other elements like `<div>` to render these components as appropriate.
-We'll walk through creating the list container and list item, then add some additional behavior such as selection.
-
-The <TypeLink links={docs.links} type={docs.exports.useGridList} /> hook will be used to render the outer most list element. It uses
-the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useListState} /> hook to construct the list's collection of rows,
-and manage state such as the focused row and row selection. We'll use the collection to iterate through
-the rows of the List and render the relevant components, which we'll define below.
-
-You may notice the extra `<div>` with `gridCellProps` in our example. This is needed because we are following the [ARIA grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/), which does not allow rows without any child `gridcell` elements.
-
-```tsx example export=true render=false
-import {useListState} from '@react-stately/list';
-import {mergeProps} from '@react-aria/utils';
-import {useRef} from 'react';
-import {useFocusRing} from '@react-aria/focus';
-import {useGridList, useGridListItem} from '@react-aria/gridlist';
-
-function List(props) {
-  let state = useListState(props);
-  let ref = useRef<HTMLUListElement | null>(null);
-  let { gridProps } = useGridList(props, state, ref);
-
-  return (
-    <ul {...gridProps} ref={ref} className="list">
-      {[...state.collection].map((item) => (
-        <ListItem key={item.key} item={item} state={state} />
-      ))}
-    </ul>
-  );
-}
-
-function ListItem({ item, state }) {
-  let ref = React.useRef(null);
-  let {rowProps, gridCellProps, isPressed} = useGridListItem(
-    {node: item},
-    state,
-    ref
-  );
-
-  let {isFocusVisible, focusProps} = useFocusRing();
-  let showCheckbox = state.selectionManager.selectionMode !== 'none' && state.selectionManager.selectionBehavior === 'toggle';
-
-  return (
-    <li
-      {...mergeProps(rowProps, focusProps)}
-      ref={ref}
-      className={`${isPressed ? 'pressed' : ''} ${isFocusVisible ? 'focus-visible' : ''}`}>
-      <div {...gridCellProps}>
-        {showCheckbox && <ListCheckbox item={item} state={state} />}
-        {item.rendered}
-      </div>
-    </li>
-  );
-}
-```
-
-Now we can render a basic example list, with multiple selection and interactive children in each item.
-
-```tsx example
-import {Item} from "@react-stately/collections";
-
-// Reuse the Button from your component library. See below.
-import {Button} from 'your-component-library';
-
-<List aria-label="Example List" selectionMode="multiple" selectionBehavior="replace">
-  <Item textValue="Charizard">
-    Charizard
-    <Button onPress={() => alert(`Info for Charizard...`)}>Info</Button>
-  </Item>
-  <Item textValue="Blastoise">
-    Blastoise
-    <Button onPress={() => alert(`Info for Blastoise...`)}>Info</Button>
-  </Item>
-  <Item textValue="Venusaur">
-    Venusaur
-    <Button onPress={() => alert(`Info for Venusaur...`)}>Info</Button>
-  </Item>
-  <Item textValue="Pikachu">
-    Pikachu
-    <Button onPress={() => alert(`Info for Pikachu...`)}>Info</Button>
-  </Item>
-</List>
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.list {
-  padding: 0;
-  list-style: none;
-  background: var(--page-background);
-  border: 1px solid var(--spectrum-global-color-gray-400);
-  max-width: 400px;
-  min-width: 200px;
-  max-height: 250px;
-  overflow: auto;
-}
-
-.list li {
-  padding: 8px;
-  outline: none;
-  cursor: default;
-}
-
-.list li:nth-child(2n) {
-  background: var(--spectrum-alias-highlight-hover);
-}
-
-.list li.pressed {
-  background: var(--spectrum-global-color-gray-200);
-}
-
-.list li[aria-selected=true] {
-  background: slateblue;
-  color: white;
-}
-
-.list li.focus-visible {
-  outline: 2px solid slateblue;
-  outline-offset: -3px;
-}
-
-.list li.focus-visible[aria-selected=true] {
-  outline-color: white;
-}
-
-.list li[aria-disabled] {
-  opacity: 0.4;
-}
-
-.list [role=gridcell] {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.list li button {
-  margin-left: auto;
-}
-
-/* iOS Safari has a bug that prevents accent-color: white from working. */
-@supports not (-webkit-touch-callout: none) {
-  .list li input[type=checkbox] {
-    accent-color: white;
-  }
-}
-```
-
-</details>
-
-### Adding selection checkboxes
-
-Next, let's add support for selection checkboxes to allow the user to select items explicitly.
-This is done using the <TypeLink links={docs.links} type={docs.exports.useGridListSelectionCheckbox} />
-hook. It is passed the `key` of the item it is contained within. When the user
-checks or unchecks the checkbox, the row will be added or removed from the List's selection.
-
-The `Checkbox` component used in this example is independent and can be used separately from `useGridList`. The code is available below.
-
-```tsx example export=true render=false
-import {useGridListSelectionCheckbox} from '@react-aria/gridlist';
-
-// Reuse the Checkbox from your component library. See below for details.
-import {Checkbox} from 'your-component-library';
-
-function ListCheckbox({ item, state }) {
-  let { checkboxProps } = useGridListSelectionCheckbox({ key: item.key }, state);
-  return <Checkbox {...checkboxProps} />;
-}
-```
-
-The following example shows an example list with multiple selection using checkboxes and the default `toggle` [selection behavior](#selection-behavior).
-
-```tsx example
-<List aria-label="List with selection" selectionMode="multiple">
-  <Item textValue="Charizard">
-    Charizard
-    <Button onPress={() => alert(`Info for Charizard...`)}>Info</Button>
-  </Item>
-  <Item textValue="Blastoise">
-    Blastoise
-    <Button onPress={() => alert(`Info for Blastoise...`)}>Info</Button>
-  </Item>
-  <Item textValue="Venusaur">
-    Venusaur
-    <Button onPress={() => alert(`Info for Venusaur...`)}>Info</Button>
-  </Item>
-  <Item textValue="Pikachu">
-    Pikachu
-    <Button onPress={() => alert(`Info for Pikachu...`)}>Info</Button>
-  </Item>
-</List>
-```
-
-And that's it! We now have a fully interactive List component that can support keyboard navigation, single or multiple selection.
-In addition, it is fully accessible for screen readers and other assistive technology. See below for more
-examples of how to use the List component that we've built.
-
-### Checkbox
-
-The `Checkbox` component is used in the above example for row selection. It is built using the [useCheckbox](../Checkbox/useCheckbox.html) hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useCheckbox} from '@react-aria/checkbox';
-import {useToggleState} from '@react-stately/toggle';
-
-function Checkbox(props) {
-  let inputRef = useRef(null);
-  let { inputProps } = useCheckbox(
-    props,
-    useToggleState(props),
-    inputRef
-  );
-  return <input {...inputProps} ref={inputRef} />;
-}
-```
-
-</details>
-
-### Button
-
-The `Button` component is used in the above example to show how rows can contain interactive elements. It is built using the [useButton](../Button/useButton.html) hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useButton} from '@react-aria/button';
-
-function Button(props) {
-  let ref = React.useRef(null);
-  let {buttonProps} = useButton(props, ref);
-  return <button {...buttonProps} ref={ref}>{props.children}</button>;
-}
-```
-
-</details>
-
-## Usage
-
-### Dynamic collections
-
-So far, our examples have shown static collections, where the data is hard coded.
-Dynamic collections, as shown below, can be used when the data comes from an external data source such as an API, or updates over time.
-In the example below, the rows are provided to the List via a render function.
-
-```tsx example export=true
-function ExampleList(props) {
-  let rows = [
-    {id: 1, name: 'Games'},
-    {id: 2, name: 'Program Files'},
-    {id: 3, name: 'bootmgr'},
-    {id: 4, name: 'log.txt'}
-  ];
-
-  return (
-    <List aria-label="Example dynamic collection List" selectionMode="multiple" items={rows} {...props}>
-      {item => (
-        <Item textValue={item.name}>
-          {item.name}
-          <Button onPress={() => alert(`Info for ${item.name}...`)}>
-            Info
-          </Button>
-        </Item>
-      )}
-    </List>
-  );
-}
-```
-
-### Single selection
-
-By default, `useListState` doesn't allow row selection but this can be enabled using the `selectionMode` prop. Use `defaultSelectedKeys` to provide a default set of selected rows.
-Note that the value of the selected keys must match the `key` prop of the row.
-
-The example below enables single selection mode, and uses `defaultSelectedKeys` to select the row with key equal to "2".
-A user can click on a different row to change the selection, or click on the same row again to deselect it entirely.
-
-```tsx example
-// Using the example above
-<ExampleList aria-label="List with single selection" selectionMode="single" selectionBehavior="replace" defaultSelectedKeys={[2]} />
-```
-
-### Multiple selection
-
-Multiple selection can be enabled by setting `selectionMode` to `multiple`.
-
-```tsx example
-<ExampleList aria-label="List with multiple selection" selectionMode="multiple" defaultSelectedKeys={[2, 4]} />
-```
-
-### Disallow empty selection
-
-`useGridList` also supports a `disallowEmptySelection` prop which forces the user to have at least one row in the List selected at all times.
-In this mode, if a single row is selected and the user presses it, it will not be deselected.
-
-```tsx example
-<ExampleList aria-label="List with disallowed empty selection" selectionMode="multiple" defaultSelectedKeys={[2]} disallowEmptySelection />
-```
-
-### Controlled selection
-
-To programmatically control row selection, use the `selectedKeys` prop paired with the `onSelectionChange` callback. The `key` prop from the selected rows will
-be passed into the callback when the row is pressed, allowing you to update state accordingly.
-
-```tsx example export=true
-function PokemonList(props) {
-  let rows = [
-    {id: 1, name: 'Charizard'},
-    {id: 2, name: 'Blastoise'},
-    {id: 3, name: 'Venusaur'},
-    {id: 4, name: 'Pikachu'}
-  ];
-
-  let [selectedKeys, setSelectedKeys] = React.useState(new Set([2]));
-
-  return (
-    <List aria-label="List with controlled selection" items={rows} selectionMode="multiple" selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys} {...props}>
-      {item => <Item>{item.name}</Item>}
-    </List>
-  );
-}
-```
-
-### Disabled rows
-
-You can disable specific rows by providing an array of keys to `useListState` via the `disabledKeys` prop. This will disable all interactions on disabled rows,
-unless the `disabledBehavior` prop is used to change this behavior.
-Note that you are responsible for the styling of disabled rows, however, the selection checkbox will be automatically disabled.
-
-```tsx example
-// Using the example above
-<PokemonList aria-label="List with disabled rows" selectionMode="multiple" disabledKeys={[3]} />
-```
-
-When `disabledBehavior` is set to `selection`, interactions such as focus, dragging, or actions can still be performed on disabled rows.
-
-```tsx example
-<PokemonList aria-label="List with selection disabled for disabled rows" selectionMode="multiple" disabledKeys={[3]} disabledBehavior="selection" />
-```
-
-### Selection behavior
-
-By default, `useGridList` uses the `"toggle"` selection behavior, which behaves like a checkbox group: clicking, tapping, or pressing the <Keyboard>Space</Keyboard> or <Keyboard>Enter</Keyboard> keys toggles selection for the focused row. Using the arrow keys moves focus but does not change selection. The `"toggle"` selection mode is often paired with a checkbox in each row as an explicit affordance for selection.
-
-When `selectionBehavior` is set to `"replace"`, clicking a row with the mouse replaces the selection with only that row. Using the arrow keys moves both focus and selection. To select multiple rows, modifier keys such as <Keyboard>Ctrl</Keyboard>, <Keyboard>Cmd</Keyboard>, and <Keyboard>Shift</Keyboard> can be used. On touch screen devices, selection always behaves as toggle since modifier keys may not be available.
-
-These selection styles implement the behaviors defined in [Aria Practices](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/#keyboardinteraction).
-
-```tsx example
-<PokemonList aria-label="List with replace selection behavior" selectionMode="multiple" selectionBehavior="replace" />
-```
-
-### Row actions
-
-`useGridList` supports row actions via the `onAction` prop, which is useful for functionality such as navigation. When nothing is selected, the list performs actions by default when clicking or tapping a row.
-Items may be selected using the checkbox, or by long pressing on touch devices. When at least one item is selected, the list is in selection mode, and clicking or tapping a row toggles the selection. Actions may also
-be triggered via the <Keyboard>Enter</Keyboard> key, and selection using the <Keyboard>Space</Keyboard> key.
-
-This behavior is slightly different when `selectionBehavior="replace"`, where single clicking selects the row and actions are performed via double click. Touch and keyboard behaviors are unaffected.
-
-```tsx example
-<div style={{ display: 'flex', flexWrap: 'wrap', gap: 24 }}>
-  <ExampleList aria-label="Checkbox selection list with row actions" selectionMode="multiple" selectionBehavior="toggle" onAction={key => alert(`Opening item ${key}...`)} />
-  <ExampleList aria-label="Highlight selection list with row actions" selectionMode="multiple" selectionBehavior="replace" onAction={key => alert(`Opening item ${key}...`)} />
-</div>
-```
-
-### Links
-
-Items in a GridList may also be links to another page or website. This can be achieved by passing the `href` prop to the `<Item>` component. Links behave the same way as described above for row actions depending on the `selectionMode` and `selectionBehavior`.
-
-```tsx example
-<List aria-label="Links" selectionMode="multiple">
-  <Item href="https://adobe.com/" target="_blank">Adobe</Item>
-  <Item href="https://apple.com/" target="_blank">Apple</Item>
-  <Item href="https://google.com/" target="_blank">Google</Item>
-  <Item href="https://microsoft.com/" target="_blank">Microsoft</Item>
-</List>
-```
-
-```css hidden
-.list li[data-href] {
-  cursor: pointer;
-}
-```
-
-#### Client side routing
-
-The `<Item>` component works with frameworks and client side routers like [Next.js](https://nextjs.org/) and [React Router](https://reactrouter.com/en/main). As with other React Aria components that support links, this works via the <TypeLink links={utilsDocs.links} type={utilsDocs.exports.RouterProvider} /> component at the root of your app. See the [framework setup guide](../frameworks) to learn how to set this up.
-
-### Asynchronous loading
-
-This example uses the [useAsyncList](../useAsyncList.html) hook to handle asynchronous loading of data from a server. You may additionally want to display a spinner to indicate the loading state to the user, or support features like infinite scroll to load more data.
-
-```tsx example
-import {useAsyncList} from '@react-stately/data';
-
-function AsyncList() {
-
-  let list = useAsyncList({
-    async load({signal, cursor}) {
-      if (cursor) {
-        cursor = cursor.replace(/^http:\/\//i, 'https://');
-      }
-
-      let res = await fetch(cursor || `https://swapi.py4e.com/api/people/?search=`, {signal});
-      let json = await res.json();
-
-      return {
-        items: json.results,
-        cursor: json.next
-      };
-    }
-  });
-
-  return (
-    <List
-      selectionMode="multiple"
-      aria-label="Async loading ListView example"
-      items={list.items}>
-      {(item) => (
-        <Item key={item.name}>{item.name}</Item>
-      )}
-    </List>
-  );
-}
-```
-
-## Internationalization
-
-`useGridList` handles some aspects of internationalization automatically.
-For example, type to select is implemented with an
-[Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator)
-for internationalized string matching, and keyboard navigation is mirrored in right-to-left languages.
-You are responsible for localizing all text content within the List.
-
-### RTL
-
-In right-to-left languages, the list layout should be mirrored. The row contents should be ordered from right to left and the row's text alignment should be inverted. Ensure that your CSS accounts for this.
diff --git a/packages/react-aria/docs/link/useLink.mdx b/packages/react-aria/docs/link/useLink.mdx
deleted file mode 100644
index b54b83be5c1..00000000000
--- a/packages/react-aria/docs/link/useLink.mdx
+++ /dev/null
@@ -1,147 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/link';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, PageDescription} from '@react-spectrum/docs';
-import {Keyboard} from '@react-spectrum/text';
-import packageData from '@react-aria/link/package.json';
-
----
-category: Navigation
-keywords: [link, anchor, aria]
----
-
-# useLink
-
-<PageDescription>{docs.exports.useLink.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useLink']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/link/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useLink} links={docs.links} />
-
-## Features
-
-Links can be created in HTML with the [&lt;a&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
-element with an `href` attribute. However, if the link does not have an href, and is
-handled client side with JavaScript instead, it will not be exposed to assistive technology properly.
-`useLink` helps achieve accessible links with either native HTML elements or custom element types.
-
-* Support for mouse, touch, and keyboard interactions
-* Support for navigation links via `<a>` elements or custom element types via ARIA
-* Support for disabled links
-
-## Anatomy
-
-A link consists of a pressable area usually containing a textual label or an icon
-that users can click or tap to navigate to another page or resource. In addition,
-keyboard users may activate links using the <Keyboard>Enter</Keyboard> key.
-
-`useLink` returns props to be spread onto the link element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useLink.return.id].properties} />
-</TypeContext.Provider>
-
-If a visual label is not provided (e.g. an icon or image only link), then an `aria-label` or
-`aria-labelledby` prop must be passed to identify the link to assistive technology.
-
-## Example
-
-This example shows a basic link using a native `<a>` element.
-
-```tsx example
-import {useLink} from '@react-aria/link';
-
-function Link(props) {
-  let ref = React.useRef(null);
-  let {linkProps} = useLink(props, ref);
-
-  return (
-    <a
-      {...linkProps}
-      ref={ref}
-      style={{color: 'var(--blue)'}}>
-      {props.children}
-    </a>
-  );
-}
-
-<Link href="https://adobe.com" target="_blank">Adobe</Link>
-```
-
-## Client handled links
-
-This example shows a client handled link using press events. It sets `elementType` to `span`
-so that `useLink` returns the proper ARIA attributes to expose the element as a link to
-assistive technology.
-
-In addition, this example shows usage of the `isPressed` value returned by `useLink` to properly
-style the links's active state. You could use the CSS `:active` pseudo class for this, but `isPressed`
-properly handles when the user drags their pointer off of the link, along with keyboard support and better
-touch screen support.
-
-```tsx example
-function Link(props) {
-  let ref = React.useRef(null);
-  let {linkProps, isPressed} = useLink({...props, elementType: 'span'}, ref);
-
-  return (
-    <span
-      {...linkProps}
-      ref={ref}
-      style={{
-        color: isPressed ? 'var(--blue)' : 'var(--spectrum-global-color-blue-700)',
-        textDecoration: 'underline',
-        cursor: 'pointer'
-      }}>
-      {props.children}
-    </span>
-  );
-}
-
-<Link onPress={() => alert('Pressed link')}>Adobe</Link>
-```
-
-
-## Disabled links
-
-A link can be disabled by passing the `isDisabled` property. This will work with both native
-link elements as well as client handled links. Native navigation will be disabled, and the `onPress`
-event will not be fired. The link will be exposed as disabled to assistive technology with ARIA.
-
-```tsx example
-function Link(props) {
-  let ref = React.useRef(null);
-  let {linkProps} = useLink(props, ref);
-
-  return (
-    <a
-      {...linkProps}
-      ref={ref}
-      style={{
-        color: props.isDisabled ? 'var(--gray)' : 'var(--blue)',
-        cursor: props.isDisabled ? 'default' : 'pointer'
-      }}>
-      {props.children}
-    </a>
-  );
-}
-
-<Link href="https://adobe.com" target="_blank" isDisabled>Disabled link</Link>
-```
diff --git a/packages/react-aria/docs/listbox/anatomy.svg b/packages/react-aria/docs/listbox/anatomy.svg
deleted file mode 100644
index 08ff01ea76e..00000000000
--- a/packages/react-aria/docs/listbox/anatomy.svg
+++ /dev/null
@@ -1,77 +0,0 @@
-<svg style="max-height: 304px; background: var(--anatomy-gray-100); padding: 32px; margin-bottom: 16px; width: calc(100% - 64px); border-radius: var(--anatomy-radius);" viewBox="0 0 402 304">
-  <title>Listbox anatomy diagram</title>
-  <desc>Shows a listbox with labels pointing to its parts, including the label, listbox, group, section heading, option, option label, and option description elements.</desc>
-  <g transform="translate(-376 -35)">
-    <g transform="translate(504 100)" fill="var(--anatomy-gray-50)" stroke="var(--anatomy-gray-400)" stroke-width="1.5">
-      <rect width="214" height="239" rx="6" stroke="none" />
-      <rect x="0.75" y="0.75" width="212.5" height="237.5" rx="5.25" fill="none" />
-    </g>
-    <text transform="translate(504 93)" fill="var(--anatomy-gray-600)" font-size="18" font-family="var(--anatomy-font)">
-      <tspan x="0" y="0">Label</tspan>
-    </text>
-    <g transform="translate(505 131)" fill="var(--anatomy-gray-900)" opacity="0.04">
-      <path d="M0,0H212V64H0Z" stroke="none" />
-      <path d="M 1 1 L 1 63 L 211 63 L 211 1 L 1 1 M 0 0 L 212 0 L 212 64 L 0 64 L 0 0 Z" stroke="none" fill="rgba(0,0,0,0)" />
-    </g><text transform="translate(522 158)" fill="var(--anatomy-gray-800)" font-size="20" font-family="var(--anatomy-font)">
-      <tspan x="0" y="0">Option 1</tspan>
-    </text><text transform="translate(522 227)" fill="var(--anatomy-gray-800)" font-size="20" font-family="var(--anatomy-font)">
-      <tspan x="0" y="0">Option 2</tspan>
-    </text>
-    <g transform="translate(397 492.5)"><text transform="translate(346 -316.5)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-        <tspan x="0" y="0">Option</tspan>
-      </text>
-      <path d="M-1244-611.5V-639.55a2.5,2.5,0,0,1-2-2.449,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-611.5Z" transform="translate(953 -1564.5) rotate(-90)" fill="var(--anatomy-gray-500)" />
-    </g>
-    <g transform="translate(685 142.981)">
-      <path d="M5.672,13.022A1.366,1.366,0,0,1,4.6,12.509l-3.321-4A1.336,1.336,0,0,1,3.388,6.858l2.284,2.66,6.29-8a1.335,1.335,0,1,1,2.1,1.642L6.709,12.508A1.3,1.3,0,0,1,5.672,13.022Z" transform="translate(0.335 -0.673)" fill="var(--anatomy-gray-600)" />
-    </g>
-    <g transform="translate(110 396)">
-      <text transform="translate(416 -348)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-        <tspan x="-27.651" y="0">Label</tspan>
-      </text>
-      <path d="M-1170-358.5a2.5,2.5,0,0,1,2-2.45V-381h1v20.05a2.5,2.5,0,0,1,2,2.45,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-1170-358.5Z" transform="translate(1569.5 38)" fill="var(--anatomy-gray-500)" />
-      <path d="M-1170-358.5a2.5,2.5,0,0,1,2-2.45V-381h1v20.05a2.5,2.5,0,0,1,2,2.45,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-1170-358.5Z" transform="translate(1569.5 38)" fill="var(--anatomy-gray-500)" />
-    </g>
-    <g transform="translate(104 500.755)"><text transform="translate(334 -344.755)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-        <tspan x="-31.298" y="0">Option label</tspan>
-      </text>
-      <path d="M2,42V4.95a2.5,2.5,0,1,1,1,0V42Z" transform="translate(413.5 -351.754) rotate(90)" fill="var(--anatomy-gray-500)" />
-    </g><text transform="translate(522 183)" fill="rgba(73,110,194,0.75)" font-size="16" font-family="var(--anatomy-font)">
-      <tspan x="0" y="0">Description</tspan>
-    </text><text transform="translate(522 252)" fill="rgba(73,110,194,0.75)" font-size="16" font-family="var(--anatomy-font)">
-      <tspan x="0" y="0">Description</tspan>
-    </text><text transform="translate(522 295)" fill="var(--anatomy-gray-800)" font-size="20" font-family="var(--anatomy-font)">
-      <tspan x="0" y="0">Option 3</tspan>
-    </text><text transform="translate(522 320)" fill="rgba(73,110,194,0.75)" font-size="16" font-family="var(--anatomy-font)">
-      <tspan x="0" y="0">Description</tspan>
-    </text>
-    <g transform="translate(104 526.755)"><text transform="translate(366 -344.755)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-        <tspan x="-93.132" y="0">Option description</tspan>
-      </text>
-      <path d="M2,42V4.95a2.5,2.5,0,1,1,1,0V42Z" transform="translate(413.5 -351.754) rotate(90)" fill="var(--anatomy-gray-500)" />
-    </g>
-    <g transform="translate(295 421)">
-      <text transform="translate(402 -349)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-        <tspan x="-17.972" y="0">Listbox</tspan>
-      </text>
-      <path d="M-1170-358.5a2.5,2.5,0,0,1,2-2.45V-381h1v20.05a2.5,2.5,0,0,1,2,2.45,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-1170-358.5Z" transform="translate(1569.5 38)" fill="var(--anatomy-gray-500)" />
-      <path d="M-1170-358.5a2.5,2.5,0,0,1,2-2.45V-381h1v20.05a2.5,2.5,0,0,1,2,2.45,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-1170-358.5Z" transform="translate(1569.5 38)" fill="var(--anatomy-gray-500)" />
-    </g><text transform="translate(522 122)" fill="var(--anatomy-gray-800)" font-size="14" font-family="var(--anatomy-font)" style="font-weight: 700; letter-spacing: 0.06em">
-      <tspan x="0" y="0">SECTION TITLE</tspan>
-    </text>
-    <g transform="translate(104 464.755)">
-      <text transform="translate(366 -344.755)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-        <tspan x="-80.977" y="0">Section heading</tspan>
-      </text>
-      <path d="M2,42V4.95a2.5,2.5,0,1,1,1,0V42Z" transform="translate(413.5 -351.754) rotate(90)" fill="var(--anatomy-gray-500)" />
-    </g>
-    <rect width="8" height="1" transform="translate(732.14 223.776)" fill="var(--anatomy-gray-500)" />
-    <g transform="translate(723.117 108)">
-      <rect width="8.023" height="1" fill="var(--anatomy-gray-500)" />
-      <rect width="1" height="226.234" transform="translate(8.023)" fill="var(--anatomy-gray-500)" />
-      <rect width="8.023" height="1" transform="translate(0 225.234)" fill="var(--anatomy-gray-500)" />
-    </g><text transform="translate(745 229)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-      <tspan x="0" y="0">Group</tspan>
-    </text>
-  </g>
-</svg>
diff --git a/packages/react-aria/docs/listbox/useListBox.mdx b/packages/react-aria/docs/listbox/useListBox.mdx
deleted file mode 100644
index 276349de6b2..00000000000
--- a/packages/react-aria/docs/listbox/useListBox.mdx
+++ /dev/null
@@ -1,686 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/listbox';
-import collectionsDocs from 'docs:@react-types/shared/src/collections.d.ts';
-import selectionDocs from 'docs:@react-stately/selection';
-import statelyDocs from 'docs:@react-stately/list';
-import utilsDocs from 'docs:@react-aria/utils';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/listbox/package.json';
-import Anatomy from './anatomy.svg';
-import {Keyboard} from '@react-spectrum/text';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-
----
-category: Collections
-keywords: [listbox, aria]
----
-
-# useListBox
-
-<PageDescription>{docs.exports.useListBox.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useListBox', 'useOption', 'useListBoxSection']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/listbox/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useListBox} links={docs.links} />
-<FunctionAPI function={docs.exports.useOption} links={docs.links} />
-<FunctionAPI function={docs.exports.useListBoxSection} links={docs.links} />
-
-## Features
-
-A listbox can be built using the [&lt;select&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
-and [&lt;option&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) HTML elements, but this is
-not possible to style consistently cross browser. `useListBox` helps achieve accessible
-listbox components that can be styled as needed.
-
-Note: `useListBox` only handles the list itself. For a dropdown similar to a `<select>`, see [useSelect](../Select/useSelect.html).
-
-* Exposed to assistive technology as a `listbox` using ARIA
-* Support for single, multiple, or no selection
-* Support for disabled items
-* Support for sections
-* Labeling support for accessibility
-* Support for mouse, touch, and keyboard interactions
-* Tab stop focus management
-* Keyboard navigation support including arrow keys, home/end, page up/down, select all, and clear
-* Automatic scrolling support during keyboard navigation
-* Typeahead to allow focusing options by typing text
-* Support for use with virtualized lists
-
-## Anatomy
-
-<Anatomy />
-
-A listbox consists of a container element, with a list of options or groups inside.
-`useListBox`, `useOption`, and `useListBoxSection` handle exposing this to assistive
-technology using ARIA, along with handling keyboard, mouse, and interactions to support
-selection and focus behavior.
-
-`useListBox` returns props that you should spread onto the list container element,
-along with props for an optional visual label:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useListBox.return.id].properties} />
-</TypeContext.Provider>
-
-`useOption` returns props for an individual option and its children, along with states you can use for styling:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useOption.return.id].properties} />
-</TypeContext.Provider>
-
-`useListBoxSection` returns props for a section:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useListBoxSection.return.id].properties} />
-</TypeContext.Provider>
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useListState} />
-hook from `@react-stately/list`. The state object should be passed as an option to
-each of the above hooks.
-
-If a listbox, options, or group does not have a visible label, an `aria-label` or `aria-labelledby`
-prop must be passed instead to identify the element to assistive technology.
-
-## State management
-
-`useListBox` requires knowledge of the options in the listbox in order to handle keyboard
-navigation and other interactions. It does this using
-the <TypeLink links={collectionsDocs.links} type={collectionsDocs.exports.Collection} />
-interface, which is a generic interface to access sequential unique keyed data. You can
-implement this interface yourself, e.g. by using a prop to pass a list of item objects,
-but <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useListState} /> from
-`@react-stately/list` implements a JSX based interface for building collections instead.
-See [Collection Components](v3:collections.html) for more information.
-
-In addition, <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useListState} />
-manages the state necessary for multiple selection and exposes
-a <TypeLink links={selectionDocs.links} type={selectionDocs.exports.SelectionManager} />,
-which makes use of the collection to provide an interface to update the selection state.
-For more information, see [Selection](v3:selection.html).
-
-## Example
-
-This example uses HTML `<ul>` and `<li>` elements to represent the list, and applies
-props from <TypeLink links={docs.links} type={docs.exports.useListBox} />
-and <TypeLink links={docs.links} type={docs.exports.useOption} />.
-For each item in the collection in state, either an `Option` or `ListBoxSection` (defined [below](#sections))
-is rendered according to the item's `type` property.
-
-```tsx example export=true
-import type {AriaListBoxProps} from '@react-aria/listbox';
-import {useListBox, useOption} from '@react-aria/listbox';
-import {useListState} from '@react-stately/list';
-import {Item} from '@react-stately/collections';
-import {useFocusRing} from '@react-aria/focus';
-import {mergeProps} from '@react-aria/utils';
-
-function ListBox<T extends object>(props: AriaListBoxProps<T>) {
-  // Create state based on the incoming props
-  let state = useListState(props);
-
-  // Get props for the listbox element
-  let ref = React.useRef(null);
-  let {listBoxProps, labelProps} = useListBox(props, state, ref);
-
-  return (
-    <>
-      <div {...labelProps}>{props.label}</div>
-      <ul {...listBoxProps} ref={ref}>
-        {[...state.collection].map(item => (
-          item.type === 'section'
-            ? <ListBoxSection key={item.key} section={item} state={state} />
-            : <Option key={item.key} item={item} state={state} />
-        ))}
-      </ul>
-    </>
-  );
-}
-
-function Option({item, state}) {
-  // Get props for the option element
-  let ref = React.useRef(null);
-  let {optionProps} = useOption({key: item.key}, state, ref);
-
-  // Determine whether we should show a keyboard
-  // focus ring for accessibility
-  let {isFocusVisible, focusProps} = useFocusRing();
-
-  return (
-    <li
-      {...mergeProps(optionProps, focusProps)}
-      ref={ref}
-      data-focus-visible={isFocusVisible}>
-      {item.rendered}
-    </li>
-  );
-}
-
-<ListBox label="Alignment" selectionMode="single">
-  <Item>Left</Item>
-  <Item>Middle</Item>
-  <Item>Right</Item>
-</ListBox>
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-[role=listbox] {
-  padding: 0;
-  margin: 5px 0;
-  list-style: none;
-  border: 1px solid gray;
-  max-width: 250px;
-  max-height: 300px;
-  overflow: auto;
-}
-
-[role=option] {
-  display: block;
-  padding: 2px 5px;
-  outline: none;
-  cursor: default;
-  color: inherit;
-
-  &[data-focus-visible=true] {
-    outline: 2px solid orange;
-  }
-
-  &[aria-selected=true] {
-    background: blueviolet;
-    color: white;
-  }
-
-  &[aria-disabled] {
-    color: #aaa;
-  }
-}
-```
-
-</details>
-
-## Dynamic collections
-
-`ListBox` follows the [Collection Components API](v3:collections.html), accepting both static and dynamic collections.
-The example above shows static collections, which can be used when the full list of options is known ahead of time. Dynamic collections,
-as shown below, can be used when the options come from an external data source such as an API call, or update over time.
-
-As seen below, an iterable list of options is passed to the ListBox using the `items` prop. Each item accepts a `key` prop, which
-is passed to the `onSelectionChange` handler to identify the selected item. Alternatively, if the item objects contain an `id` property,
-as shown in the example below, then this is used automatically and a `key` prop is not required.
-
-```tsx example
-function Example() {
-  let options = [
-    { id: 1, name: 'Aardvark' },
-    { id: 2, name: 'Cat' },
-    { id: 3, name: 'Dog' },
-    { id: 4, name: 'Kangaroo' },
-    { id: 5, name: 'Koala' },
-    { id: 6, name: 'Penguin' },
-    { id: 7, name: 'Snake' },
-    { id: 8, name: 'Turtle' },
-    { id: 9, name: 'Wombat' }
-  ];
-
-  return (
-    <ListBox label="Animals" items={options} selectionMode="single">
-      {(item) => <Item>{item.name}</Item>}
-    </ListBox>
-  );
-}
-```
-
-## Selection
-
-ListBox supports multiple selection modes. By default, selection is disabled, however this can be changed using the `selectionMode` prop.
-Use `defaultSelectedKeys` to provide a default set of selected items (uncontrolled) and `selectedKeys` to set the selected items (controlled). The value of the selected keys must match the `key` prop of the items.
-See the `react-stately` [Selection docs](v3:selection.html) for more details.
-
-```tsx example
-import type {Selection} from 'react-stately';
-
-function Example() {
-  let [selected, setSelected] = React.useState<Selection>(new Set(['cheese']));
-
-  return (
-    <>
-      <ListBox label="Choose sandwich contents" selectionMode="multiple" selectedKeys={selected} onSelectionChange={setSelected}>
-        <Item key="lettuce">Lettuce</Item>
-        <Item key="tomato">Tomato</Item>
-        <Item key="cheese">Cheese</Item>
-        <Item key="tuna">Tuna Salad</Item>
-        <Item key="egg">Egg Salad</Item>
-        <Item key="ham">Ham</Item>
-      </ListBox>
-      <p>Current selection (controlled): {selected === 'all' ? 'all' : [...selected].join(', ')}</p>
-    </>
-  );
-}
-```
-
-### Selection behavior
-
-By default, `useListBox` uses the `"toggle"` selection behavior, which behaves like a checkbox group: clicking, tapping, or pressing the <Keyboard>Space</Keyboard> or <Keyboard>Enter</Keyboard> keys toggles selection for the focused row. Using the arrow keys moves focus but does not change selection.
-
-When `selectionBehavior` is set to `"replace"`, clicking a row with the mouse replaces the selection with only that row. Using the arrow keys moves both focus and selection. To select multiple rows, modifier keys such as <Keyboard>Ctrl</Keyboard>, <Keyboard>Cmd</Keyboard>, and <Keyboard>Shift</Keyboard> can be used. On touch screen devices, selection always behaves as toggle since modifier keys may not be available.
-
-These selection behaviors are defined in [Aria Practices](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/#keyboardinteraction).
-
-```tsx example
-<ListBox label="Choose sandwich contents" selectionMode="multiple" selectionBehavior="replace">
-  <Item key="lettuce">Lettuce</Item>
-  <Item key="tomato">Tomato</Item>
-  <Item key="cheese">Cheese</Item>
-  <Item key="tuna">Tuna Salad</Item>
-  <Item key="egg">Egg Salad</Item>
-  <Item key="ham">Ham</Item>
-</ListBox>
-```
-
-## Sections
-
-ListBox supports sections with separators and headings in order to group options. Sections can be used by wrapping groups of Items in a `Section` component. Each `Section` takes a `title` and `key` prop.
-To implement sections, implement the `ListBoxSection` component referenced above
-using the <TypeLink links={docs.links} type={docs.exports.useListBoxSection} /> hook. It will include four extra elements:
-an `<li>` between the sections to represent the separator, an `<li>` to contain the heading `<span>` element, and a
-`<ul>` to contain the child items. This structure is necessary to ensure HTML semantics
-are correct.
-
-```tsx example export=true render=false
-import {useListBoxSection} from '@react-aria/listbox';
-
-function ListBoxSection({section, state}) {
-  let {itemProps, headingProps, groupProps} = useListBoxSection({
-    heading: section.rendered,
-    'aria-label': section['aria-label']
-  });
-
-  // If the section is not the first, add a separator element to provide visual separation.
-  // The heading is rendered inside an <li> element, which contains
-  // a <ul> with the child items.
-  return <>
-    {section.key !== state.collection.getFirstKey() &&
-      <li
-        role="presentation"
-        style={{
-          borderTop: '1px solid gray',
-          margin: '2px 5px'
-        }} />
-    }
-    <li {...itemProps}>
-      {section.rendered &&
-        <span
-          {...headingProps}
-          style={{
-            fontWeight: 'bold',
-            fontSize: '1.1em',
-            padding: '2px 5px',
-          }}>
-          {section.rendered}
-        </span>
-      }
-      <ul
-        {...groupProps}
-        style={{
-          padding: 0,
-          listStyle: 'none'
-        }}>
-        {[...section.childNodes].map(node =>
-          <Option
-            key={node.key}
-            item={node}
-            state={state} />
-        )}
-      </ul>
-    </li>
-  </>;
-}
-```
-
-### Static items
-
-With this in place, we can now render a static ListBox with multiple sections:
-
-```tsx example
-import {Section} from '@react-stately/collections';
-
-<ListBox label="Choose sandwich contents" selectionMode="multiple">
-  <Section title="Veggies">
-    <Item key="lettuce">Lettuce</Item>
-    <Item key="tomato">Tomato</Item>
-    <Item key="onion">Onion</Item>
-  </Section>
-  <Section title="Protein">
-    <Item key="ham">Ham</Item>
-    <Item key="tuna">Tuna</Item>
-    <Item key="tofu">Tofu</Item>
-  </Section>
-  <Section title="Condiments">
-    <Item key="mayo">Mayonaise</Item>
-    <Item key="mustard">Mustard</Item>
-    <Item key="ranch">Ranch</Item>
-  </Section>
-</ListBox>
-```
-
-### Dynamic items
-
-The above example shows sections with static items. Sections can also be populated from a hierarchical data structure.
-Similarly to the props on ListBox, `<Section>` takes an array of data using the `items` prop.
-
-```tsx example
-import type {Selection} from 'react-stately';
-
-function Example() {
-  let options = [
-    {name: 'Australian', children: [
-      {id: 2, name: 'Koala'},
-      {id: 3, name: 'Kangaroo'},
-      {id: 4, name: 'Platypus'}
-    ]},
-    {name: 'American', children: [
-      {id: 6, name: 'Bald Eagle'},
-      {id: 7, name: 'Bison'},
-      {id: 8, name: 'Skunk'}
-    ]}
-  ];
-  let [selected, setSelected] = React.useState<Selection>(new Set());
-
-  return (
-    <ListBox
-      label="Pick an animal"
-      items={options}
-      selectedKeys={selected}
-      selectionMode="single"
-      onSelectionChange={setSelected}>
-      {item => (
-        <Section key={item.name} items={item.children} title={item.name}>
-          {item => <Item>{item.name}</Item>}
-        </Section>
-      )}
-    </ListBox>
-  );
-}
-
-```
-
-### Accessibility
-
-Sections without a `title` must provide an `aria-label` for accessibility.
-
-## Complex options
-
-By default, options that only contain text will be labeled by the contents of the option.
-For options that have more complex content (e.g. icons, multiple lines of text, etc.), use
-`labelProps` and `descriptionProps` from <TypeLink links={docs.links} type={docs.exports.useOption} />
-as needed to apply to the main text element of the option and its description. This improves screen
-reader announcement.
-
-**NOTE: listbox options cannot contain interactive content (e.g. buttons, checkboxes, etc.).
-For these cases, see [useGridList](../GridList/useGridList.html) instead.**
-
-To implement this, we'll update the `Option` component to apply the ARIA properties
-returned by <TypeLink links={docs.links} type={docs.exports.useOption} /> to the appropriate
-elements. In this example, we'll pull them out of `props.children` and use `React.cloneElement`
-to apply the props, but you may want to use a more robust approach (e.g. context).
-
-```tsx example
-///- begin collapse -///
-function ListBox(props) {
-  let state = useListState(props);
-  let ref = React.useRef(null);
-  let {listBoxProps, labelProps} = useListBox(props, state, ref);
-
-  return (
-    <>
-      <div {...labelProps}>{props.label}</div>
-      <ul {...listBoxProps} ref={ref}>
-        {[...state.collection].map(item => (
-          <Option
-            key={item.key}
-            item={item}
-            state={state} />
-        ))}
-      </ul>
-    </>
-  );
-}
-///- end collapse -///
-function Option({item, state}) {
-  let ref = React.useRef(null);
-  let {optionProps, labelProps, descriptionProps} = useOption({key: item.key}, state, ref);
-  let {isFocusVisible, focusProps} = useFocusRing();
-
-  // Pull out the two expected children. We will clone them
-  // and add the necessary props for accessibility.
-  let [title, description] = item.rendered;
-
-  return (
-    <li
-      {...mergeProps(optionProps, focusProps)}
-      ref={ref}
-      data-focus-visible={isFocusVisible}>
-      {React.cloneElement(title, labelProps)}
-      {React.cloneElement(description, descriptionProps)}
-    </li>
-  );
-}
-
-<ListBox label="Text alignment" selectionMode="single">
-  <Item textValue="Align Left">
-    <div><strong>Align Left</strong></div>
-    <div>Align the selected text to the left</div>
-  </Item>
-  <Item textValue="Align Center">
-    <div><strong>Align Center</strong></div>
-    <div>Align the selected text center</div>
-  </Item>
-  <Item textValue="Align Right">
-    <div><strong>Align Right</strong></div>
-    <div>Align the selected text to the right</div>
-  </Item>
-</ListBox>
-```
-
-## Asynchronous loading
-
-This example uses the [useAsyncList](../useAsyncList.html) hook to handle asynchronous loading
-of data from a server. You may additionally want to display a spinner to indicate the loading
-state to the user, or support features like infinite scroll to load more data.
-
-```tsx example
-import {useAsyncList} from '@react-stately/data';
-
-interface Pokemon {
-  name: string
-}
-
-function AsyncLoadingExample() {
-  let list = useAsyncList<Pokemon>({
-    async load({signal}) {
-      let res = await fetch(
-        `https://pokeapi.co/api/v2/pokemon`,
-        {signal}
-      );
-      let json = await res.json();
-
-      return {
-        items: json.results
-      };
-    }
-  });
-
-  return (
-    <ListBox label="Pick a Pokemon" items={list.items} selectionMode="single">
-      {(item) => <Item key={item.name}>{item.name}</Item>}
-    </ListBox>
-  );
-}
-```
-
-## Links
-
-By default, interacting with an item in a ListBox triggers `onSelectionChange`. Alternatively, items may be links to another page or website. This can be achieved by passing the `href` prop to the `<Item>` component.
-
-This example shows how to update the `Option` component with support for rendering an `<a>` element if an `href` prop is passed to the item. Note that you'll also need to render the `ListBox` as a `<div>` instead of a `<ul>`, since an `<a>` inside a `<ul>` is not valid HTML.
-
-```tsx example
-///- begin collapse -///
-function ListBox(props) {
-  let state = useListState(props);
-  let ref = React.useRef(null);
-  let {listBoxProps, labelProps} = useListBox(props, state, ref);
-
-  return (
-    <>
-      <div {...labelProps}>{props.label}</div>
-      <ul {...listBoxProps} ref={ref}>
-        {[...state.collection].map(item => (
-          <Option
-            key={item.key}
-            item={item}
-            state={state} />
-        ))}
-      </ul>
-    </>
-  );
-}
-///- end collapse -///
-function Option({item, state}) {
-  let ref = React.useRef(null);
-  let {optionProps} = useOption({key: item.key}, state, ref);
-  let {isFocusVisible, focusProps} = useFocusRing();
-  /*- begin highlight -*/
-  let ElementType: React.ElementType = item.props.href ? 'a' : 'div';
-  /*- end highlight -*/
-
-  return (
-    <ElementType
-      {...mergeProps(optionProps, focusProps)}
-      ref={ref}
-      data-focus-visible={isFocusVisible}>
-      {item.rendered}
-    </ElementType>
-  );
-}
-
-<ListBox aria-label="Links">
-  <Item href="https://adobe.com/" target="_blank">Adobe</Item>
-  <Item href="https://apple.com/" target="_blank">Apple</Item>
-  <Item href="https://google.com/" target="_blank">Google</Item>
-  <Item href="https://microsoft.com/" target="_blank">Microsoft</Item>
-</ListBox>
-```
-
-```css hidden
-[role=option][href] {
-  text-decoration: none;
-  cursor: pointer;
-  -webkit-touch-callout: none;
-}
-```
-
-By default, link items in a ListBox are not selectable, and only perform navigation when the user interacts with them. However, with the "replace" [selection behavior](#selection-behavior), items will be selected when single clicking or pressing the <Keyboard>Space</Keyboard> key, and navigate to the link when double clicking or pressing the <Keyboard>Enter</Keyboard> key.
-
-```tsx example
-///- begin collapse -///
-function ListBox(props) {
-  let state = useListState(props);
-  let ref = React.useRef(null);
-  let {listBoxProps, labelProps} = useListBox(props, state, ref);
-
-  return (
-    <>
-      <div {...labelProps}>{props.label}</div>
-      <ul {...listBoxProps} ref={ref}>
-        {[...state.collection].map(item => (
-          <Option
-            key={item.key}
-            item={item}
-            state={state} />
-        ))}
-      </ul>
-    </>
-  );
-}
-function Option({item, state}) {
-  let ref = React.useRef(null);
-  let {optionProps} = useOption({key: item.key}, state, ref);
-  let {isFocusVisible, focusProps} = useFocusRing();
-  let ElementType: React.ElementType = item.props.href ? 'a' : 'div';
-
-  return (
-    <ElementType
-      {...mergeProps(optionProps, focusProps)}
-      ref={ref}
-      data-focus-visible={isFocusVisible}>
-      {item.rendered}
-    </ElementType>
-  );
-}
-///- end collapse -///
-
-<ListBox aria-label="Links" selectionMode="multiple" selectionBehavior="replace">
-  <Item href="https://adobe.com/" target="_blank">Adobe</Item>
-  <Item href="https://apple.com/" target="_blank">Apple</Item>
-  <Item href="https://google.com/" target="_blank">Google</Item>
-  <Item href="https://microsoft.com/" target="_blank">Microsoft</Item>
-</ListBox>
-```
-
-### Client side routing
-
-The `<Item>` component works with frameworks and client side routers like [Next.js](https://nextjs.org/) and [React Router](https://reactrouter.com/en/main). As with other React Aria components that support links, this works via the <TypeLink links={utilsDocs.links} type={utilsDocs.exports.RouterProvider} /> component at the root of your app. See the [framework setup guide](../frameworks) to learn how to set this up.
-
-## Disabled items
-
-`useListBox` supports marking items as disabled using the `disabledKeys` prop. Each key in this list
-corresponds with the `key` prop passed to the `Item` component, or automatically derived from the values passed
-to the `items` prop. See [Collections](v3:collections.html) for more details.
-
-Disabled items are not focusable, selectable, or keyboard navigable. The `isDisabled` property returned by
-`useOption` can be used to style the item appropriately.
-
-```tsx example
-<ListBox label="Choose sandwich contents" selectionMode="multiple" disabledKeys={['tuna']}>
-  <Item key="lettuce">Lettuce</Item>
-  <Item key="tomato">Tomato</Item>
-  <Item key="cheese">Cheese</Item>
-  <Item key="tuna">Tuna Salad</Item>
-  <Item key="egg">Egg Salad</Item>
-  <Item key="ham">Ham</Item>
-</ListBox>
-```
-
-## Internationalization
-
-`useListBox` handles some aspects of internationalization automatically.
-For example, type to select is implemented with an
-[Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator)
-for internationalized string matching. You are responsible for localizing all labels and option
-content that is passed into the listbox.
-
-### RTL
-
-In right-to-left languages, the listbox options should be mirrored. The text content should be
-aligned to the right. Ensure that your CSS accounts for this.
diff --git a/packages/react-aria/docs/menu/menu-trigger-anatomy.svg b/packages/react-aria/docs/menu/menu-trigger-anatomy.svg
deleted file mode 100644
index 5f729711d94..00000000000
--- a/packages/react-aria/docs/menu/menu-trigger-anatomy.svg
+++ /dev/null
@@ -1,108 +0,0 @@
-<svg style="max-height: 330px; background: var(--anatomy-gray-100); padding: 12px; margin-bottom: 16px; width: calc(100% - 24px); border-radius: var(--anatomy-radius);" viewBox="-135 0 540 330">
-  <title>Menu anatomy diagram</title>
-  <desc>Shows a menu component with labels pointing to its parts, including the trigger, menu, group, section heading, menu item, menu item label, menu item description, and menu item keyboard shortcut elements.</desc>
-  <g transform="translate(-1083 -404)">
-    <g transform="translate(595 395)">
-      <g transform="translate(504 100)" fill="var(--anatomy-gray-50)" stroke="var(--anatomy-gray-400)" stroke-width="1.5">
-        <rect width="214" height="239" rx="6" stroke="none" />
-        <rect x="0.75" y="0.75" width="212.5" height="237.5" rx="5.25" fill="none" />
-      </g>
-      <g transform="translate(505 131)" fill="var(--anatomy-gray-900)" opacity="0.04">
-        <path d="M0,0H212V64H0Z" stroke="none" />
-        <path d="M 1 1 L 1 63 L 211 63 L 211 1 L 1 1 M 0 0 L 212 0 L 212 64 L 0 64 L 0 0 Z" stroke="none" fill="rgba(0,0,0,0)" />
-      </g><text transform="translate(522 158)" fill="var(--anatomy-gray-800)" font-size="20" font-family="var(--anatomy-font)">
-        <tspan x="0" y="0">Option 1</tspan>
-      </text><text transform="translate(522 227)" fill="var(--anatomy-gray-800)" font-size="20" font-family="var(--anatomy-font)">
-        <tspan x="0" y="0">Option 2</tspan>
-      </text>
-      <g transform="translate(397 498.5)"><text transform="translate(346 -316.5)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-          <tspan x="0" y="0">Menu item</tspan>
-        </text>
-        <path d="M-1244-611.5V-639.55a2.5,2.5,0,0,1-2-2.449,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-611.5Z" transform="translate(953 -1564.5) rotate(-90)" fill="var(--anatomy-gray-500)" />
-      </g>
-      <g transform="translate(397 472.5)"><text transform="translate(346 -316.5)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-          <tspan x="0" y="0">Menu item keyboard shortcut</tspan>
-        </text>
-        <path d="M-1244-611.5v-32.05a2.5,2.5,0,0,1-2-2.45,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.45v32.05Z" transform="translate(953 -1564.5) rotate(-90)" fill="var(--anatomy-gray-500)" />
-      </g>
-      <g transform="translate(104 500.755)"><text transform="translate(366 -344.755)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-          <tspan x="-82.589" y="0">Menu item label</tspan>
-        </text>
-        <path d="M2,42V4.95a2.5,2.5,0,1,1,1,0V42Z" transform="translate(413.5 -351.754) rotate(90)" fill="var(--anatomy-gray-500)" />
-      </g><text transform="translate(522 183)" fill="rgba(73,110,194,0.75)" font-size="16" font-family="var(--anatomy-font)">
-        <tspan x="0" y="0">Description</tspan>
-      </text><text transform="translate(522 252)" fill="rgba(73,110,194,0.75)" font-size="16" font-family="var(--anatomy-font)">
-        <tspan x="0" y="0">Description</tspan>
-      </text><text transform="translate(522 295)" fill="var(--anatomy-gray-800)" font-size="20" font-family="var(--anatomy-font)">
-        <tspan x="0" y="0">Option 3</tspan>
-      </text><text transform="translate(522 320)" fill="rgba(73,110,194,0.75)" font-size="16" font-family="var(--anatomy-font)">
-        <tspan x="0" y="0">Description</tspan>
-      </text>
-      <g transform="translate(104 526.755)"><text transform="translate(366 -344.755)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-          <tspan x="-113.126" y="0">Menu item description</tspan>
-        </text>
-        <path d="M2,42V4.95a2.5,2.5,0,1,1,1,0V42Z" transform="translate(413.5 -351.754) rotate(90)" fill="var(--anatomy-gray-500)" />
-      </g>
-      <g transform="translate(295 421)">
-        <text transform="translate(402 -349)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-          <tspan x="-14.612" y="0">Menu</tspan>
-        </text>
-        <path d="M-1170-358.5a2.5,2.5,0,0,1,2-2.45V-381h1v20.05a2.5,2.5,0,0,1,2,2.45,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-1170-358.5Z" transform="translate(1569.5 38)" fill="var(--anatomy-gray-500)" />
-        <path d="M-1170-358.5a2.5,2.5,0,0,1,2-2.45V-381h1v20.05a2.5,2.5,0,0,1,2,2.45,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-1170-358.5Z" transform="translate(1569.5 38)" fill="var(--anatomy-gray-500)" />
-      </g><text transform="translate(522 122)" fill="var(--anatomy-gray-800)" font-size="14" font-family="var(--anatomy-font)" style="font-weight: 700; letter-spacing: 0.06em">
-        <tspan x="0" y="0">SECTION TITLE</tspan>
-      </text>
-      <g transform="translate(104 464.755)"><text transform="translate(366 -344.755)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-          <tspan x="-80.977" y="0">Section heading</tspan>
-        </text>
-        <path d="M2,42V4.95a2.5,2.5,0,1,1,1,0V42Z" transform="translate(413.5 -351.754) rotate(90)" fill="var(--anatomy-gray-500)" />
-      </g>
-      <rect width="8" height="1" transform="translate(732.14 223.776)" fill="var(--anatomy-gray-500)" />
-      <g transform="translate(723.117 108)">
-        <rect width="8.023" height="1" fill="var(--anatomy-gray-500)" />
-        <rect width="1" height="226.234" transform="translate(8.023)" fill="var(--anatomy-gray-500)" />
-        <rect width="8.023" height="1" transform="translate(0 225.234)" fill="var(--anatomy-gray-500)" />
-      </g><text transform="translate(745 229)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-        <tspan x="0" y="0">Group</tspan>
-      </text><text transform="translate(669 158)" fill="rgba(73,110,194,0.75)" font-size="20" font-family="LucidaGrande, Lucida Grande">
-        <tspan x="0" y="0">⌘</tspan>
-        <tspan y="0" font-family="var(--anatomy-font)">K</tspan>
-      </text>
-      <g transform="translate(104 526.755)"><text transform="translate(366 -344.755)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-          <tspan x="-113.126" y="0">Menu item description</tspan>
-        </text>
-        <path d="M2,42V4.95a2.5,2.5,0,1,1,1,0V42Z" transform="translate(413.5 -351.754) rotate(90)" fill="var(--anatomy-gray-500)" />
-      </g>
-    </g>
-    <g transform="translate(1099 443.801)">
-      <g transform="translate(0 0.199)" fill="var(--anatomy-gray-200)" stroke="rgba(0,0,0,0)" stroke-width="1">
-        <rect width="165" height="44" rx="4" stroke="none" />
-        <rect x="0.5" y="0.5" width="164" height="43" rx="3.5" fill="none" />
-      </g>
-      <path d="M5.525,0h154.7a5.525,5.525,0,0,1,5.525,5.525V38.674a5.525,5.525,0,0,1-5.525,5.525H5.525A5.525,5.525,0,0,1,0,38.674V5.525A5.525,5.525,0,0,1,5.525,0Zm0,1.381A4.144,4.144,0,0,0,1.381,5.525V38.674a4.144,4.144,0,0,0,4.144,4.144h154.7a4.144,4.144,0,0,0,4.144-4.144V5.525a4.144,4.144,0,0,0-4.144-4.144Z" fill="var(--anatomy-gray-500)" />
-      <g transform="translate(9.248 9.52)">
-        <g transform="translate(10.366 10.37)" fill="var(--anatomy-gray-900)" stroke="var(--anatomy-gray-900)" stroke-width="1">
-          <circle cx="2.348" cy="2.348" r="2.348" stroke="none" />
-          <circle cx="2.348" cy="2.348" r="1.848" fill="none" />
-        </g>
-        <g transform="translate(18.446 10.37)" fill="var(--anatomy-gray-900)" stroke="var(--anatomy-gray-900)" stroke-width="1">
-          <circle cx="2.348" cy="2.348" r="2.348" stroke="none" />
-          <circle cx="2.348" cy="2.348" r="1.848" fill="none" />
-        </g>
-        <g transform="translate(2.285 10.37)" fill="var(--anatomy-gray-900)" stroke="var(--anatomy-gray-900)" stroke-width="1">
-          <circle cx="2.348" cy="2.348" r="2.348" stroke="none" />
-          <circle cx="2.348" cy="2.348" r="1.848" fill="none" />
-        </g>
-      </g><text transform="translate(44 26.199)" fill="var(--anatomy-gray-900)" font-size="18" font-family="var(--anatomy-font)">
-        <tspan x="0" y="0">More Actions</tspan>
-      </text>
-    </g>
-    <g transform="translate(715 765)">
-      <text transform="translate(402 -348)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-        <tspan x="-33.755" y="0">Menu Trigger</tspan>
-      </text>
-      <path d="M-1170-358.5a2.5,2.5,0,0,1,2-2.45V-381h1v20.05a2.5,2.5,0,0,1,2,2.45,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-1170-358.5Z" transform="translate(1569.5 38)" fill="var(--anatomy-gray-500)" />
-      <path d="M-1170-358.5a2.5,2.5,0,0,1,2-2.45V-381h1v20.05a2.5,2.5,0,0,1,2,2.45,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-1170-358.5Z" transform="translate(1569.5 38)" fill="var(--anatomy-gray-500)" />
-    </g>
-  </g>
-</svg>
diff --git a/packages/react-aria/docs/menu/tailwind.png b/packages/react-aria/docs/menu/tailwind.png
deleted file mode 100644
index a73c3a1f01f..00000000000
Binary files a/packages/react-aria/docs/menu/tailwind.png and /dev/null differ
diff --git a/packages/react-aria/docs/menu/useMenu.mdx b/packages/react-aria/docs/menu/useMenu.mdx
deleted file mode 100644
index 799e42210b5..00000000000
--- a/packages/react-aria/docs/menu/useMenu.mdx
+++ /dev/null
@@ -1,761 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/menu';
-import overlaysDocs from 'docs:@react-aria/overlays';
-import focusDocs from 'docs:@react-aria/focus';
-import menuDocs from 'docs:@react-aria/menu';
-import buttonDocs from 'docs:@react-aria/button';
-import statelyDocs from 'docs:@react-stately/menu';
-import treeDocs from 'docs:@react-stately/tree';
-import utilsDocs from 'docs:@react-aria/utils';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/menu/package.json';
-import Anatomy from './menu-trigger-anatomy.svg';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
-import tailwindPreview from 'url:./tailwind.png';
-
----
-category: Collections
-keywords: [menu trigger, multi-select menu, aria]
----
-
-# useMenu
-
-<PageDescription>{docs.exports.useMenu.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useMenuTrigger', 'useMenu', 'useMenuItem', 'useMenuSection']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/menu/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useMenuTrigger} links={docs.links} />
-<FunctionAPI function={docs.exports.useMenu} links={docs.links} />
-<FunctionAPI function={docs.exports.useMenuItem} links={docs.links} />
-<FunctionAPI function={docs.exports.useMenuSection} links={docs.links} />
-
-## Features
-
-There is no native element to implement a menu in HTML that is widely supported. `useMenuTrigger` and `useMenu`
-help achieve accessible menu components that can be styled as needed.
-
-* Exposed to assistive technology as a button with a `menu` using ARIA
-* Support for single, multiple, or no selection
-* Support for disabled items
-* Support for sections
-* Complex item labeling support for accessibility
-* Keyboard navigation support including arrow keys, home/end, page up/down
-* Automatic scrolling support during keyboard navigation
-* Keyboard support for opening the menu using the arrow keys, including automatically focusing
-  the first or last item accordingly
-* Typeahead to allow focusing items by typing text
-* Support for use with virtualized lists
-
-## Anatomy
-
-<Anatomy />
-
-A menu trigger consists of a button or other trigger element combined with a popup menu,
-with a list of menu items or groups inside. `useMenuTrigger`, `useMenu`, `useMenuItem`,
-and `useMenuSection` handle exposing this to assistive technology using ARIA, along with
- handling keyboard, mouse, and interactions to support selection and focus behavior.
-
-`useMenuTrigger` returns props that you should spread onto the appropriate element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useMenuTrigger.return.base.id].properties} />
-</TypeContext.Provider>
-
-`useMenu` returns props that you should spread onto the menu container element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useMenu.return.id].properties} />
-</TypeContext.Provider>
-
-`useMenuItem` returns props for an individual item and its children:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useMenuItem.return.id].properties} />
-</TypeContext.Provider>
-
-`useMenuSection` returns props for a section:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useMenuSection.return.id].properties} />
-</TypeContext.Provider>
-
-State for the trigger is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useMenuTriggerState} />
-hook from `@react-stately/menu`. State for the menu itself is managed by the <TypeLink links={treeDocs.links} type={treeDocs.exports.useTreeState} />
-hook from `@react-stately/tree`. These state objects should be passed to the appropriate React Aria hooks.
-
-If a menu, menu item, or group does not have a visible label, an `aria-label` or `aria-labelledby`
-prop must be passed instead to identify the element to assistive technology.
-
-## Example
-
-A menu consists of several components: a menu button to toggle the menu popup, and the menu itself, which contains
-items or sections of items. We'll go through each component one by one.
-
-### MenuButton
-
-We'll start with the `MenuButton` component, which is what will trigger our menu to appear. This uses
-the <TypeLink links={docs.links} type={docs.exports.useMenuTrigger} /> and <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useMenuTriggerState} /> hooks.
-The `Popover` and `Button` components used in this example are independent, and can be shared by many other components.
-The code is available below, and documentation is available on the corresponding pages.
-
-```tsx example export=true render=false
-import type {MenuTriggerProps} from '@react-stately/menu';
-import {useMenuTriggerState} from '@react-stately/menu';
-import {useMenuTrigger} from '@react-aria/menu';
-import {Item} from '@react-stately/collections';
-
-// Reuse the Popover, and Button from your component library. See below for details.
-import {Popover, Button} from 'your-component-library';
-
-interface MenuButtonProps<T> extends AriaMenuProps<T>, MenuTriggerProps {
-  label?: string
-}
-
-function MenuButton<T extends object>(props: MenuButtonProps<T>) {
-  // Create state based on the incoming props
-  let state = useMenuTriggerState(props);
-
-  // Get props for the button and menu elements
-  let ref = React.useRef(null);
-  let {menuTriggerProps, menuProps} = useMenuTrigger<T>({}, state, ref);
-
-  return (
-    <>
-      <Button
-        {...menuTriggerProps}
-        buttonRef={ref}
-        style={{height: 30, fontSize: 14}}>
-        {props.label}
-        <span aria-hidden="true" style={{paddingLeft: 5}}>▼</span>
-      </Button>
-      {state.isOpen &&
-        <Popover state={state} triggerRef={ref} placement="bottom start">
-          <Menu
-            {...props}
-            {...menuProps} />
-        </Popover>
-      }
-    </>
-  );
-}
-```
-
-### Menu
-
-Next, let's implement the `Menu` component. This will appear inside the `Popover` when the user presses the button.
-It is built using the <TypeLink links={menuDocs.links} type={menuDocs.exports.useMenu} /> and <TypeLink links={treeDocs.links} type={treeDocs.exports.useTreeState} /> hooks.
-For each item in the collection in state, we render either a `MenuItem` or `MenuSection` (defined [below](#sections)) according to the item's `type` property.
-
-```tsx example export=true render=false
-import type {AriaMenuProps} from '@react-aria/menu';
-import {useMenu} from '@react-aria/menu';
-import {useTreeState} from '@react-stately/tree';
-
-function Menu<T extends object>(props: AriaMenuProps<T>) {
-  // Create menu state based on the incoming props
-  let state = useTreeState(props);
-
-  // Get props for the menu element
-  let ref = React.useRef(null);
-  let {menuProps} = useMenu(props, state, ref);
-
-  return (
-    <ul {...menuProps} ref={ref}>
-      {[...state.collection].map(item => (
-        item.type === 'section'
-          ? <MenuSection key={item.key} section={item} state={state} />
-          : <MenuItem key={item.key} item={item} state={state} />
-      ))}
-    </ul>
-  );
-}
-```
-
-### MenuItem
-
-Now let's implement `MenuItem`. This is built using <TypeLink links={menuDocs.links} type={menuDocs.exports.useMenuItem} />,
-and the `state` object passed via props from `Menu`.
-
-```tsx example export=true render=false
-import {useMenuItem} from '@react-aria/menu';
-
-function MenuItem({item, state}) {
-  // Get props for the menu item element
-  let ref = React.useRef(null);
-  let {menuItemProps, isSelected} = useMenuItem({key: item.key}, state, ref);
-
-  return (
-    <li {...menuItemProps} ref={ref}>
-      {item.rendered}
-      {isSelected && <span aria-hidden="true">✅</span>}
-    </li>
-  );
-}
-```
-
-Now we can render a simple menu with actionable items:
-
-```tsx example
-<MenuButton label="Actions" onAction={alert}>
-  <Item key="copy">Copy</Item>
-  <Item key="cut">Cut</Item>
-  <Item key="paste">Paste</Item>
-</MenuButton>
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-[role=menu] {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  width: 200px;
-}
-
-[role=menuitem],
-[role=menuitemradio],
-[role=menuitemcheckbox] {
-  padding: 2px 5px;
-  outline: none;
-  cursor: default;
-  display: flex;
-  justify-content: space-between;
-  color: black;
-
-  &:focus {
-    background: gray;
-    color: white;
-  }
-
-  &[aria-disabled] {
-    color: gray;
-  }
-}
-```
-
-</details>
-
-### Popover
-
-The `Popover` component is used to contain the menu.
-It can be shared between many other components, including [ComboBox](../ComboBox/useComboBox.html),
-[Select](../Select/useSelect.html), and others.
-See [usePopover](../Popover/usePopover.html) for more examples of popovers.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import type {AriaPopoverProps} from 'react-aria';
-import type {OverlayTriggerState} from 'react-stately';
-import {usePopover, Overlay, DismissButton} from '@react-aria/overlays';
-
-interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
-  children: React.ReactNode,
-  state: OverlayTriggerState
-}
-
-function Popover({children, state, ...props}: PopoverProps) {
-  let popoverRef = React.useRef(null);
-  let {popoverProps, underlayProps} = usePopover({
-    ...props,
-    popoverRef
-  }, state);
-
-  return (
-    <Overlay>
-      <div {...underlayProps} style={{position: 'fixed', inset: 0}} />
-      <div
-        {...popoverProps}
-        ref={popoverRef}
-        style={{
-          ...popoverProps.style,
-          background: 'lightgray',
-          border: '1px solid gray'
-        }}>
-        <DismissButton onDismiss={state.close} />
-        {children}
-        <DismissButton onDismiss={state.close} />
-      </div>
-    </Overlay>
-  );
-}
-```
-
-</details>
-
-### Button
-
-The `Button` component is used in the above example to toggle the menu. It is built using the [useButton](../Button/useButton.html) hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useButton} from '@react-aria/button';
-
-function Button(props) {
-  let ref = props.buttonRef;
-  let {buttonProps} = useButton(props, ref);
-  return <button {...buttonProps} ref={ref} style={props.style}>{props.children}</button>;
-}
-```
-
-</details>
-
-## Styled examples
-
-<ExampleCard
-  url="https://codesandbox.io/s/awesome-boyd-c0gbv5?file=/src/Menu.tsx"
-  preview={tailwindPreview}
-  title="Tailwind CSS"
-  description="An example of styling a Menu with Tailwind." />
-
-## Dynamic collections
-
-`Menu` follows the [Collection Components API](v3:collections.html), accepting both static and dynamic collections.
-The examples above show static collections, which can be used when the full list of options is known ahead of time. Dynamic collections,
-as shown below, can be used when the options come from an external data source such as an API call, or update over time.
-
-As seen below, an iterable list of options is passed to the ComboBox using the `items` prop. Each item accepts a `key` prop, which
-is passed to the `onSelectionChange` handler to identify the selected item. Alternatively, if the item objects contain an `id` property,
-as shown in the example below, then this is used automatically and a `key` prop is not required.
-
-```tsx example
-function Example() {
-  let items = [
-    {id: 1, name: 'New'},
-    {id: 2, name: 'Open'},
-    {id: 3, name: 'Close'},
-    {id: 4, name: 'Save'},
-    {id: 5, name: 'Duplicate'},
-    {id: 6, name: 'Rename'},
-    {id: 7, name: 'Move'}
-  ];
-
-  return (
-    <MenuButton label="Actions" items={items} onAction={alert}>
-      {(item) => <Item>{item.name}</Item>}
-    </MenuButton>
-  );
-}
-```
-
-## Selection
-
-Menu supports multiple selection modes. By default, selection is disabled, however this can be changed using the `selectionMode` prop.
-Use `defaultSelectedKeys` to provide a default set of selected items (uncontrolled) and `selectedKeys` to set the selected items (controlled). The value of the selected keys must match the `key` prop of the items.
-See the `react-stately` [Selection docs](v3:selection.html#selected-key-data-type) for more details.
-
-```tsx example
-import type {Selection} from 'react-stately';
-
-function Example() {
-  let [selected, setSelected] = React.useState<Selection>(new Set(['sidebar', 'console']));
-
-  return (
-    <>
-      <MenuButton label="View" selectionMode="multiple" selectedKeys={selected} onSelectionChange={setSelected}>
-        <Item key='sidebar'>Sidebar</Item>
-        <Item key='searchbar'>Searchbar</Item>
-        <Item key='tools'>Tools</Item>
-        <Item key='console'>Console</Item>
-      </MenuButton>
-      <p>Current selection (controlled): {selected === 'all' ? 'all' : [...selected].join(', ')}</p>
-    </>
-  );
-}
-```
-
-## Sections
-
-Menu supports sections with separators and headings in order to group options. Sections can be used by wrapping groups of Items in a `Section` component. Each `Section` takes a `title` and `key` prop.
-To implement sections, implement the `ListBoxSection` component referenced above
-using the <TypeLink links={docs.links} type={docs.exports.useMenuSection} /> hook. It will include four extra elements:
-an `<li>` between the sections to represent the separator, an `<li>` to contain the heading `<span>` element, and a
-`<ul>` to contain the child items. This structure is necessary to ensure HTML
-semantics are correct.
-
-```tsx example export=true render=false
-import {useMenuSection} from '@react-aria/menu';
-import {useSeparator} from '@react-aria/separator';
-
-function MenuSection({section, state}) {
-  let {itemProps, headingProps, groupProps} = useMenuSection({
-    heading: section.rendered,
-    'aria-label': section['aria-label']
-  });
-
-  let {separatorProps} = useSeparator({
-    elementType: 'li'
-  });
-
-  // If the section is not the first, add a separator element.
-  // The heading is rendered inside an <li> element, which contains
-  // a <ul> with the child items.
-  return <>
-    {section.key !== state.collection.getFirstKey() &&
-      <li
-        {...separatorProps}
-        style={{
-          borderTop: '1px solid gray',
-          margin: '2px 5px'
-        }} />
-    }
-    <li {...itemProps}>
-      {section.rendered &&
-        <span
-          {...headingProps}
-          style={{
-            fontWeight: 'bold',
-            fontSize: '1.1em',
-            padding: '2px 5px',
-          }}>
-          {section.rendered}
-        </span>
-      }
-      <ul
-        {...groupProps}
-        style={{
-          padding: 0,
-          listStyle: 'none'
-        }}>
-        {[...section.childNodes].map(node =>
-          <MenuItem
-            key={node.key}
-            item={node}
-            state={state} />
-        )}
-      </ul>
-    </li>
-  </>;
-}
-```
-
-### Static items
-
-With this in place, we can now render a static menu with multiple sections:
-
-```tsx example
-import {Section} from '@react-stately/collections';
-
-<MenuButton label="Actions" onAction={alert}>
-  <Section title="Styles">
-    <Item key="bold">Bold</Item>
-    <Item key="underline">Underline</Item>
-  </Section>
-  <Section title="Align">
-    <Item key="left">Left</Item>
-    <Item key="middle">Middle</Item>
-    <Item key="right">Right</Item>
-  </Section>
-</MenuButton>
-```
-
-### Dynamic items
-
-The above example shows sections with static items. Sections can also be populated from a hierarchical data structure.
-Similarly to the props on Menu, `<Section>` takes an array of data using the `items` prop.
-
-```tsx example
-import type {Selection} from 'react-stately';
-
-function Example() {
-  let [selected, setSelected] = React.useState<Selection>(new Set([1,3]));
-  let openWindows = [
-    {
-      name: 'Left Panel',
-      id: 'left',
-      children: [
-        {id: 1, name: 'Final Copy (1)'}
-      ]
-    },
-    {
-      name: 'Right Panel',
-      id: 'right',
-      children: [
-        {id: 2, name: 'index.ts'},
-        {id: 3, name: 'package.json'},
-        {id: 4, name: 'license.txt'}
-      ]
-    }
-  ];
-
-  return (
-    <MenuButton
-      label="Window"
-      items={openWindows}
-      selectionMode="multiple"
-      selectedKeys={selected}
-      onSelectionChange={setSelected}>
-      {item => (
-        <Section items={item.children} title={item.name}>
-          {item => <Item>{item.name}</Item>}
-        </Section>
-      )}
-    </MenuButton>
-  );
-}
-```
-
-### Accessibility
-
-Sections without a `title` must provide an `aria-label` for accessibility.
-
-## Complex menu items
-
-By default, menu items that only contain text will be labeled by the contents of the item.
-For items that have more complex content (e.g. icons, multiple lines of text, keyboard shortcuts, etc.),
-use `labelProps`, `descriptionProps`, and `keyboardShortcutProps`
-from <TypeLink links={docs.links} type={docs.exports.useMenuItem} />
-as needed to apply to the main text element of the menu item, its description, and keyboard
-shortcut text. This improves screen reader announcement.
-
-**NOTE: menu items cannot contain interactive content (e.g. buttons, checkboxes, etc.).**
-
-To implement this, we'll update the `MenuItem` component to apply the ARIA properties
-returned by <TypeLink links={docs.links} type={docs.exports.useMenuItem} /> to the appropriate
-elements. In this example, we'll pull them out of `props.children` and use `React.cloneElement`
-to apply the props, but you may want to use a more robust approach (e.g. context).
-
-```tsx example
-///- begin collapse -///
-function MenuButton(props) {
-  let state = useMenuTriggerState(props);
-  let ref = React.useRef(null);
-  let {menuTriggerProps, menuProps} = useMenuTrigger({}, state, ref);
-
-  return (
-    <div style={{position: 'relative', display: 'inline-block'}}>
-      <Button
-        {...menuTriggerProps}
-        buttonRef={ref}
-        style={{height: 30, fontSize: 14}}>
-        {props.label}
-        <span aria-hidden="true" style={{paddingLeft: 5}}>▼</span>
-      </Button>
-      {state.isOpen &&
-        <Popover state={state} triggerRef={ref} placement="bottom start">
-          <Menu
-            {...props}
-            {...menuProps} />
-        </Popover>
-      }
-    </div>
-  );
-}
-
-function Menu(props) {
-  let state = useTreeState(props);
-  let ref = React.useRef(null);
-  let {menuProps} = useMenu(props, state, ref);
-
-  return (
-    <ul {...menuProps} ref={ref}>
-      {[...state.collection].map(item => (
-        <MenuItem key={item.key} item={item} state={state} />
-      ))}
-    </ul>
-  );
-}
-///- end collapse -///
-function MenuItem({item, state}) {
-  // Get props for the menu item element and child elements
-  let ref = React.useRef(null);
-  let {
-    menuItemProps,
-    labelProps,
-    descriptionProps,
-    keyboardShortcutProps
-  } = useMenuItem({key: item.key}, state, ref);
-
-  // Pull out the three expected children. We will clone them
-  // and add the necessary props for accessibility.
-  let [title, description, shortcut] = item.rendered;
-
-  return (
-    <li {...menuItemProps} ref={ref}>
-      <div>
-        {React.cloneElement(title, labelProps)}
-        {React.cloneElement(description, descriptionProps)}
-      </div>
-      {React.cloneElement(shortcut, keyboardShortcutProps)}
-    </li>
-  );
-}
-
-<MenuButton label="Actions" onAction={alert}>
-  <Item textValue="Copy" key="copy">
-    <div><strong>Copy</strong></div>
-    <div>Copy the selected text</div>
-    <kbd>⌘C</kbd>
-  </Item>
-  <Item textValue="Cut" key="cut">
-    <div><strong>Cut</strong></div>
-    <div>Cut the selected text</div>
-    <kbd>⌘X</kbd>
-  </Item>
-  <Item textValue="Paste" key="paste">
-    <div><strong>Paste</strong></div>
-    <div>Paste the copied text</div>
-    <kbd>⌘V</kbd>
-  </Item>
-</MenuButton>
-```
-
-## Disabled items
-
-`useMenu` supports marking items as disabled using the `disabledKeys` prop. Each key in this list
-corresponds with the `key` prop passed to the `Item` component, or automatically derived from the values passed
-to the `items` prop. See [Collections](v3:collections.html) for more details.
-
-Disabled items are not focusable or keyboard navigable, and do not trigger `onAction` or `onSelectionChange`.
-The `isDisabled` property returned by `useMenuItem` can be used to style the item appropriately.
-
-```tsx example
-<MenuButton label="Actions" onAction={alert} disabledKeys={['paste']}>
-  <Item key="copy">Copy</Item>
-  <Item key="cut">Cut</Item>
-  <Item key="paste">Paste</Item>
-</MenuButton>
-```
-
-## Links
-
-By default, interacting with an item in a Menu triggers `onAction` and optionally `onSelectionChange` depending on the `selectionMode`. Alternatively, items may be links to another page or website. This can be achieved by passing the `href` prop to the `<Item>` component. Link items in a menu are not selectable.
-
-This example shows how to update the `MenuItem` component with support for rendering an `<a>` element if an `href` prop is passed to the item. Note that you'll also need to render the `Menu` as a `<div>` instead of a `<ul>`, since an `<a>` inside a `<ul>` is not valid HTML.
-
-```tsx example
-///- begin collapse -///
-function MenuButton(props) {
-  let state = useMenuTriggerState(props);
-  let ref = React.useRef(null);
-  let {menuTriggerProps, menuProps} = useMenuTrigger({}, state, ref);
-
-  return (
-    <div style={{position: 'relative', display: 'inline-block'}}>
-      <Button
-        {...menuTriggerProps}
-        buttonRef={ref}
-        style={{height: 30, fontSize: 14}}>
-        {props.label}
-        <span aria-hidden="true" style={{paddingLeft: 5}}>▼</span>
-      </Button>
-      {state.isOpen &&
-        <Popover state={state} triggerRef={ref} placement="bottom start">
-          <Menu
-            {...props}
-            {...menuProps} />
-        </Popover>
-      }
-    </div>
-  );
-}
-
-function Menu(props) {
-  let state = useTreeState(props);
-  let ref = React.useRef(null);
-  let {menuProps} = useMenu(props, state, ref);
-
-  return (
-    <div {...menuProps} ref={ref}>
-      {[...state.collection].map(item => (
-        <MenuItem key={item.key} item={item} state={state} />
-      ))}
-    </div>
-  );
-}
-///- end collapse -///
-function MenuItem({item, state}) {
-  // Get props for the menu item element and child elements
-  let ref = React.useRef(null);
-  let {menuItemProps} = useMenuItem({key: item.key}, state, ref);
-  /*- begin highlight -*/
-  let ElementType: React.ElementType = item.props.href ? 'a' : 'div';
-  /*- end highlight -*/
-
-  return (
-    <ElementType {...menuItemProps} ref={ref}>
-      {item.rendered}
-    </ElementType>
-  );
-}
-
-<MenuButton label="Links">
-  <Item href="https://adobe.com/" target="_blank">Adobe</Item>
-  <Item href="https://apple.com/" target="_blank">Apple</Item>
-  <Item href="https://google.com/" target="_blank">Google</Item>
-  <Item href="https://microsoft.com/" target="_blank">Microsoft</Item>
-</MenuButton>
-```
-
-```css hidden
-[role=menuitem][href] {
-  cursor: pointer;
-  text-decoration: none;
-}
-```
-
-### Client side routing
-
-The `<Item>` component works with frameworks and client side routers like [Next.js](https://nextjs.org/) and [React Router](https://reactrouter.com/en/main). As with other React Aria components that support links, this works via the <TypeLink links={utilsDocs.links} type={utilsDocs.exports.RouterProvider} /> component at the root of your app. See the [framework setup guide](../frameworks) to learn how to set this up.
-
-## Controlled open state
-
-The open state of the menu can be controlled via the `defaultOpen` and `isOpen` props
-
-```tsx example
-function Example() {
-  let [open, setOpen] = React.useState(false);
-
-  return (
-    <>
-      <p>Menu is {open ? 'open' : 'closed'}</p>
-      <MenuButton
-        label="View"
-        isOpen={open}
-        onOpenChange={setOpen}>
-        <Item key="side">Side bar</Item>
-        <Item key="options">Page options</Item>
-        <Item key="edit">Edit Panel</Item>
-      </MenuButton>
-    </>
-  );
-}
-```
-
-## Internationalization
-
-`useMenu` handles some aspects of internationalization automatically.
-For example, type to select is implemented with an
-[Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator)
-for internationalized string matching. You are responsible for localizing all menu item labels for
-content that is passed into the menu.
-
-### RTL
-
-In right-to-left languages, the menu button should be mirrored. The arrow should be on the left,
-and the label should be on the right. In addition, the content of menu items should
-flip. Ensure that your CSS accounts for this.
diff --git a/packages/react-aria/docs/meter/circular-example.png b/packages/react-aria/docs/meter/circular-example.png
deleted file mode 100644
index 02bdb1eb4cf..00000000000
Binary files a/packages/react-aria/docs/meter/circular-example.png and /dev/null differ
diff --git a/packages/react-aria/docs/meter/useMeter.mdx b/packages/react-aria/docs/meter/useMeter.mdx
deleted file mode 100644
index f246040c082..00000000000
--- a/packages/react-aria/docs/meter/useMeter.mdx
+++ /dev/null
@@ -1,181 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/meter';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/meter/package.json';
-import Anatomy from './anatomy.svg';
-import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
-import circularPreview from 'url:./circular-example.png';
-
----
-category: Status
-keywords: [meter, progressbar, aria]
----
-
-# useMeter
-
-<PageDescription>{docs.exports.useMeter.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useMeter']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/meter/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useMeter} links={docs.links} />
-
-## Features
-
-The [&lt;meter&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter)
-HTML element can be used to build a meter, however it is
-very difficult to style cross browser. `useMeter` helps achieve accessible
-meters that can be styled as needed.
-
-Meters are similar to progress bars, but represent a quantity as opposed to progress over time.
-See the [useProgressBar](../ProgressBar/useProgressBar.html) hook for more details about progress bars.
-
-* Exposed to assistive technology as a `meter` via ARIA, with fallback to `progressbar` where unsupported
-* Labeling support for accessibility
-* Internationalized number formatting as a percentage or value
-
-## Anatomy
-
-<Anatomy />
-
-Meters consist of a track element showing the full value in a range,
-a fill element showing the current value, a label, and an optional value label. The track and bar elements
-represent the value visually, while a wrapper element represents the meter to
-assistive technology using the [meter](https://www.w3.org/WAI/ARIA/apg/patterns/meter/)
-ARIA role.
-
-`useMeter` returns two sets of props that you should spread onto the appropriate element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useMeter.return.id].properties} />
-</TypeContext.Provider>
-
-If there is no visual label, an `aria-label` or `aria-labelledby` prop must be passed instead
-to identify the element to screen readers.
-
-## Example
-
-```tsx example export=true
-import {useMeter} from '@react-aria/meter';
-
-function Meter(props) {
-  let {
-    label,
-    showValueLabel = !!label,
-    value,
-    minValue = 0,
-    maxValue = 100
-  } = props;
-  let {
-    meterProps,
-    labelProps
-  } = useMeter(props);
-
-  // Calculate the width of the progress bar as a percentage
-  let percentage = (value - minValue) / (maxValue - minValue);
-  let barWidth = `${Math.round(percentage * 100)}%`;
-
-  return (
-    <div {...meterProps} style={{width: 200}}>
-      <div style={{display: 'flex', justifyContent: 'space-between'}}>
-        {label &&
-          <span {...labelProps}>
-            {label}
-          </span>
-        }
-        {showValueLabel &&
-          <span>
-            {meterProps['aria-valuetext']}
-          </span>
-        }
-      </div>
-      <div style={{height: 10, background: 'lightgray'}}>
-        <div style={{width: barWidth, height: 10, background: 'green'}} />
-      </div>
-    </div>
-  );
-}
-
-<Meter
-  label="Storage space"
-  value={25} />
-```
-
-## Styled examples
-
-<ExampleCard
-  url="https://codesandbox.io/s/lucid-jackson-xj8pok?file=/src/App.js"
-  preview={circularPreview}
-  title="Circular Gauge"
-  description="A circular meter built with SVG." />
-
-## Usage
-
-The following examples show how to use the `Meter` component created in the above example.
-
-### Custom value scale
-
-By default, the `value` prop represents the current percentage of progress, as the minimum and maximum values default to 0 and 100, respectively. Alternatively, a different scale can be used by setting the `minValue` and `maxValue` props.
-
-```tsx example
-<Meter
-  label="Widgets Used"
-  minValue={50}
-  maxValue={150}
-  value={100} />
-```
-
-### Value formatting
-
-Values are formatted as a percentage by default, but this can be modified by using the `formatOptions` prop to specify a different format.
-`formatOptions` is compatible with the option parameter of [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat) and is applied based on the current locale.
-
-```tsx example
-<Meter
-  label="Currency"
-  formatOptions={{style: 'currency', currency: 'JPY'}}
-  value={60} />
-```
-
-### Custom value label
-
-The `valueLabel` prop allows the formatted value to be replaced with a custom string.
-
-```tsx example
-<Meter
-  label="Space used"
-  valueLabel="54 of 60GB"
-  value={90} />
-```
-
-## Internationalization
-
-### Value formatting
-
-`useMeter` will handle localized formatting of the value label for accessibility
-automatically. This is returned in the `aria-valuetext` prop in `meterProps`. You
-can use this to create a visible label if needed and ensure that it is formatted correctly.
-The number formatting can also be controlled using the `formatOptions` prop.
-
-### RTL
-
-In right-to-left languages, the meter should be mirrored. The label is right-aligned,
-the value is left-aligned, and the fill progresses from right to left. Ensure that your CSS
-accounts for this.
diff --git a/packages/react-aria/docs/numberfield/useNumberField.mdx b/packages/react-aria/docs/numberfield/useNumberField.mdx
deleted file mode 100644
index 01168f308bd..00000000000
--- a/packages/react-aria/docs/numberfield/useNumberField.mdx
+++ /dev/null
@@ -1,344 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/numberfield';
-import statelyDocs from 'docs:@react-stately/numberfield';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/numberfield/package.json';
-import Anatomy from './anatomy.svg';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-
----
-category: Forms
-keywords: [number field, input, form, aria]
----
-
-# useNumberField
-
-<PageDescription>{docs.exports.useNumberField.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useNumberField']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useNumberField} links={docs.links} />
-
-## Features
-
-Number fields can be built with `<input type="number">`, but the behavior is very inconsistent across
-browsers and platforms, it supports limited localized formatting options, and it is challenging to style
-the stepper buttons. `useNumberField` helps achieve accessible number fields that support internationalized
-formatting options and can be styled as needed.
-
-* Support for internationalized number formatting and parsing including decimals, percentages, currency values, and units
-* Support for the Latin, Arabic, and Han positional decimal numbering systems in [over 30 locales](../quality#supported-locales)
-* Automatically detects the numbering system used and supports parsing numbers not in the default numbering system for the locale
-* Support for multiple currency formats including symbol, code, and name in standard or accounting notation
-* Validates keyboard entry as the user types so that only valid numeric input according to the locale and numbering system is accepted
-* Handles composed input from input method editors, e.g. Pinyin
-* Automatically selects an appropriate software keyboard for mobile according to the current platform and allowed values
-* Supports rounding to a configurable number of fraction digits
-* Support for clamping the value between a configurable minimum and maximum, and snapping to a step value
-* Support for stepper buttons and arrow keys to increment and decrement the value according to the step value
-* Supports pressing and holding the stepper buttons to continuously increment or decrement
-* Handles floating point rounding errors when incrementing, decrementing, and snapping to step
-* Supports using the scroll wheel to increment and decrement the value
-* Exposed to assistive technology as a text field with a custom localized role description using ARIA
-* Follows the [spinbutton](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/) ARIA pattern
-* Works around bugs in VoiceOver with the spinbutton role
-* Uses an ARIA live region to ensure that value changes are announced
-* Support for native HTML constraint validation with customizable UI, custom validation functions, realtime validation, and server-side validation errors
-
-Read our [blog post](../blog/how-we-internationalized-our-numberfield) for more details about the interactions and internationalization support implemented by `useNumberField`.
-
-## Anatomy
-
-<Anatomy />
-
-Number fields consist of an input element that shows the current value and allows the user to type a new value,
-optional stepper buttons to increment and decrement the value, a group containing the input and stepper buttons,
-and a label.
-
-`useNumberField` also supports optional description and error message elements, which can be used
-to provide more context about the field, and any validation messages. These are linked with the
-input via the `aria-describedby` attribute.
-
-`useNumberField` returns props for each of these, which you should spread onto the appropriate elements:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useNumberField.return.id].properties} />
-</TypeContext.Provider>
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useNumberFieldState} />
-hook from `@react-stately/numberfield`. The state object should be passed as an option to `useNumberField`
-
-If there is no visual label, an `aria-label` or `aria-labelledby` prop must be passed instead
-to identify the element to screen readers.
-
-## Example
-
-The following example shows how to build a simple number field. It includes an input element where the user can
-type a number, along with increment and decrement buttons on either side. The `Button` component used in this example
-is independent and can be used separately from `NumberField`.
-
-**Note:** Due to [a bug](https://bugs.webkit.org/show_bug.cgi?id=219188) in Safari on macOS, pointer events may not
-be dispatched after a `<button>` element is disabled while the mouse is pressed. This may require the user to click
-twice when incrementing or decrementing the value from the minimum or maximum value. While out of scope for this example,
-you may wish to use a `<div>` element instead of a `<button>` to avoid this issue. See the [useButton docs](../Button/useButton.html#custom-element-type)
-for an example of a button with a custom element type.
-
-In addition, see [useTextField](../TextField/useTextField.html) for an example of the description and error message elements.
-
-```tsx example export=true
-import {useNumberField} from '@react-aria/numberfield';
-import {useNumberFieldState} from '@react-stately/numberfield';
-import {useLocale} from '@react-aria/i18n';
-
-// Reuse the Button from your component library. See below for details.
-import {Button} from 'your-component-library';
-
-function NumberField(props) {
-  let {locale} = useLocale();
-  let state = useNumberFieldState({...props, locale});
-  let inputRef = React.useRef(null);
-  let {
-    labelProps,
-    groupProps,
-    inputProps,
-    incrementButtonProps,
-    decrementButtonProps
-  } = useNumberField(props, state, inputRef);
-
-  return (
-    <div>
-      <label {...labelProps}>{props.label}</label>
-      <div {...groupProps}>
-        <Button {...decrementButtonProps}>-</Button>
-        <input {...inputProps} ref={inputRef} />
-        <Button {...incrementButtonProps}>+</Button>
-      </div>
-    </div>
-  );
-}
-
-<NumberField
-  label="Price"
-  defaultValue={6}
-  formatOptions={{
-    style: 'currency',
-    currency: 'USD'
-  }} />
-```
-
-### Button
-
-The `Button` component is used in the above example to increment and decrement the value. It is built using the [useButton](../Button/useButton.html) hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useButton} from '@react-aria/button';
-
-function Button(props) {
-  let ref = React.useRef(null);
-  let {buttonProps} = useButton(props, ref);
-  return <button {...buttonProps} ref={ref}>{props.children}</button>;
-}
-```
-
-</details>
-
-## Usage
-
-The following examples show how to use the `NumberField` component created in the above example.
-
-### Controlled
-
-By default, `NumberField` is uncontrolled. However, when using the `value` prop, it becomes controlled.
-This allows you to store the current value in your own state, and use it elsewhere.
-
-The `onChange` event is triggered whenever the number value updates. This happens when the user types a
-value and blurs the input, or when incrementing or decrementing the value. It does not happen as the user
-types because partial input may not be parseable to a valid number.
-
-```tsx example
-function Example() {
-  let [value, setValue] = React.useState(6);
-
-  return (
-    <>
-      <NumberField
-        label="Controlled value"
-        value={value}
-        onChange={setValue} />
-      <div>Current value prop: {value}</div>
-    </>
-  );
-}
-```
-
-### Decimals
-
-The default formatting style for `NumberField` is decimal, but you can configure various aspects via the `formatOptions`
-prop. All options supported by [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat)
-are supported, including configuration of minimum and maximum fraction digits, sign display, grouping separators, etc.
-Currently only standard notation is supported, though scientific, engineering, and compact notation may be supported in the future.
-
-The following example uses the `signDisplay` option to include the plus sign for positive numbers, for example to display
-an offset from some value. In addition, it always displays a minimum of 1 digit after the decimal point, and allows up to
-2 fraction digits. If the user enters more than 2 fraction digits, the result will be rounded.
-
-```tsx example
-<NumberField
-  label="Adjust exposure"
-  defaultValue={0}
-  formatOptions={{
-    signDisplay: 'exceptZero',
-    minimumFractionDigits: 1,
-    maximumFractionDigits: 2
-  }} />
-```
-
-### Percentages
-
-The `style: 'percent'` option can be passed to the `formatOptions` prop to treat the value as a percentage. In this mode,
-the value is multiplied by 100 before it is displayed, i.e. `0.45` is displayed as `45%`. The reverse is also true: when the
-user enters a value, the `onChange` event will be triggered with the entered value divided by 100. When the percent option
-is enabled, the default step automatically changes to `0.01` such that incrementing and decrementing occurs by `1%`. This can
-be overridden with the `step` prop. [See below](#step-values) for details.
-
-```tsx example
-<NumberField
-  label="Sales tax"
-  defaultValue={0.05}
-  formatOptions={{
-    style: 'percent'
-  }} />
-```
-
-### Currency values
-
-The `style: 'currency'` option can be passed to the `formatOptions` prop to treat the value as a currency value. The `currency`
-option must also be passed to set the currency code (e.g. `USD`) to use. In addition, the `currencyDisplay` option can be
-used to choose whether to display the currency symbol, currency code, or currency name. Finally, the `currencySign` option
-can be set to `accounting` to use accounting notation for negative numbers, which uses parentheses rather than a minus sign
-in some locales.
-
-If you need to allow the user to change the currency, you should include a separate dropdown next to the number field.
-The number field itself will not determine the currency from the user input.
-
-```tsx example
-<NumberField
-  label="Transaction amount"
-  defaultValue={45}
-  formatOptions={{
-    style: 'currency',
-    currency: 'EUR',
-    currencyDisplay: 'code',
-    currencySign: 'accounting'
-  }} />
-```
-
-### Units
-
-The `style: 'unit'` option can be passed to the `formatOptions` prop to format the value with a unit of measurement. The `unit`
-option must also be passed to set which unit to use (e.g. `inch`). In addition, the `unitDisplay` option can be used to choose
-whether to display the unit in long, short, or narrow format.
-
-If you need to allow the user to change the unit, you should include a separate dropdown next to the number field.
-The number field itself will not determine the unit from the user input.
-
-**Note:** the unit style is not currently supported in Safari. A [polyfill](https://formatjs.io/docs/polyfills/intl-numberformat/)
-may be necessary.
-
-```tsx example
-<NumberField
-  label="Package width"
-  defaultValue={4}
-  formatOptions={{
-    style: 'unit',
-    unit: 'inch',
-    unitDisplay: 'long'
-  }} />
-```
-
-### Minimum and maximum values
-
-The `minValue` and `maxValue` props can be used to limit the entered value to a specific range. The value will be clamped
-when the user blurs the input field. In addition, the increment and decrement buttons will be disabled when the value is
-within one `step` value from the bounds ([see below](#step-values) for info about steps). Ranges can be open ended by only
-providing either `minValue` or `maxValue` rather than both.
-
-If a valid range is known ahead of time, it is a good idea to provide it to `NumberField` so it can optimize the experience.
-For example, when the minimum value is greater than or equal to zero, it is possible to use a numeric keyboard on iOS rather
-than a full text keyboard (necessary to enter a minus sign).
-
-```tsx example
-<NumberField
-  label="Enter your age"
-  minValue={0} />
-```
-
-### Step values
-
-The `step` prop can be used to snap the value to certain increments. If there is a `minValue` defined, the steps are calculated
-starting from the minimum. For example, if `minValue={2}`, and `step={3}`, the valid step values would be 2, 5, 8, 11, etc. If no
-`minValue` is defined, the steps are calculated starting from zero and extending in both directions. In other words, such that the
-values are evenly divisible by the step. If no `step` is defined, any decimal value may be typed, but incrementing and decrementing
-snaps the value to an integer.
-
-If the user types a value that is between two steps and blurs the input, the value will be snapped to the nearest step. When
-incrementing or decrementing, the value is snapped to the nearest step that is higher or lower, respectively.
-When incrementing or decrementing from an empty field, the value starts at the `minValue` or `maxValue`, respectively, if defined.
-Otherwise, the value starts from `0`.
-
-```tsx example
-<NumberField
-  label="Step"
-  step={10} />
-<NumberField
-  label="Step + minValue"
-  minValue={2}
-  step={3} />
-<NumberField
-  label="Step + minValue + maxValue"
-  minValue={2}
-  maxValue={21}
-  step={3} />
-```
-
-### Disabled and read only
-
-The `isDisabled` and `isReadOnly` props can be used prevent the user from editing the value of the number field.
-The difference is that `isReadOnly` still allows the input to be focused, while `isDisabled` prevents all user interaction.
-
-```tsx example
-<NumberField label="Disabled" isDisabled value={25} />
-<NumberField label="Read only" isReadOnly value={32} />
-```
-
-## Internationalization
-
-`useNumberField` handles many aspects of internationalization automatically, including formatting and parsing numbers according
-to the current locale and numbering system. In addition, the increment and decrement buttons have localized ARIA labels.
-You are responsible for localizing the label text passed into the number field.
-
-### RTL
-
-In right-to-left languages, the number field should be mirrored. The order of the input and buttons should be flipped, and the input
-text should be right aligned instead of left aligned. Ensure that your CSS accounts for this.
diff --git a/packages/react-aria/docs/overlays/useModalOverlay.mdx b/packages/react-aria/docs/overlays/useModalOverlay.mdx
deleted file mode 100644
index 736edec0788..00000000000
--- a/packages/react-aria/docs/overlays/useModalOverlay.mdx
+++ /dev/null
@@ -1,259 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/overlays';
-import focusDocs from 'docs:@react-aria/focus';
-import dialogDocs from 'docs:@react-aria/dialog';
-import statelyDocs from 'docs:@react-stately/overlays';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import {Keyboard} from '@react-spectrum/text';
-import packageData from '@react-aria/overlays/package.json';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import Anatomy from './modal-anatomy.svg';
-
----
-category: Overlays
-keywords: [overlays, dialog, modal, aria]
----
-
-# useModalOverlay
-
-<PageDescription>{docs.exports.useModalOverlay.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useModalOverlay']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useModalOverlay} links={docs.links} />
-
-## Features
-
-The HTML [&lt;dialog&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element can be used to build modal overlays. However, it is not yet widely supported across browsers, and can be difficult to style and customize. `useModalOverlay`, helps achieve accessible modal overlays that can be styled as needed.
-
-* **Accessible** – Content outside the modal is hidden from assistive technologies while it is open. The modal optionally closes when interacting outside, or pressing the <Keyboard>Escape</Keyboard> key.
-* **Focus management** – Focus is moved into the modal on mount, and restored to the trigger element on unmount. While open, focus is contained within the modal, preventing the user from tabbing outside.
-* **Scroll locking** – Scrolling the page behind the modal is prevented while it is open, including in mobile browsers.
-
-**Note**: `useModalOverlay` only handles the overlay itself. It should be combined
-with [useDialog](../Modal/useDialog.html) to create fully accessible modal dialogs. Other overlays
-such as menus may also be placed in a modal overlay.
-
-## Anatomy
-
-<Anatomy />
-
-A modal overlay consists of an overlay container element, and an underlay. The overlay may contain a [dialog](../Modal/useDialog.html), or another element such as a [menu](../Menu/useMenu.html) or [listbox](../ListBox/useListBox.html) when used within a component such as a [select](../Select/useSelect.html) or [combobox](../ComboBox/useComboBox.html). The underlay is typically a partially transparent element that covers the rest of the screen behind the overlay, and prevents the user from interacting with the elements behind it.
-
-`useModalOverlay` returns props that you should spread onto the overlay and underlay elements:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useModalOverlay.return.id].properties} />
-</TypeContext.Provider>
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useOverlayTriggerState} />
-hook in `@react-stately/overlays`. The state object should be passed as an argument to `useModalOverlay`.
-
-## Example
-
-This example shows how to build a typical modal dialog, by combining `useModalOverlay` with [useDialog](../Modal/useDialog.html). The `Dialog` component used in this example can also be reused within a [popover](../Popover/usePopover.html) or other types of overlays.
-
-The `Modal` component uses an &lt;<TypeLink links={docs.links} type={docs.exports.Overlay} />&gt; to render its contents in a React [Portal](https://reactjs.org/docs/portals.html) at the end of the document body, which ensures it is not clipped by other elements. It also acts as a focus scope, containing focus within the modal and restoring it to the trigger when it unmounts. <TypeLink links={docs.links} type={docs.exports.useModalOverlay} /> handles preventing page scrolling while the modal is open, hiding content outside the modal from screen readers, and optionally closing it when the user interacts outside or presses the <Keyboard>Escape</Keyboard> key.
-
-```tsx example export=true render=false
-import {Overlay, useModalOverlay} from '@react-aria/overlays';
-import {useViewportSize} from '@react-aria/utils';
-
-function Modal({state, children, ...props}) {
-  let ref = React.useRef(null);
-  let {modalProps, underlayProps} = useModalOverlay(props, state, ref);
-
-  return (
-    <Overlay>
-      <div
-        style={{
-          position: 'absolute',
-          zIndex: 100,
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: document.body.clientHeight,
-          background: 'rgba(0, 0, 0, 0.5)'
-        }}
-        {...underlayProps} />
-      <div
-        style={{
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: useViewportSize().height + 'px',
-          zIndex: 101,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center'
-        }}>
-        <div
-          {...modalProps}
-          ref={ref}
-          style={{
-            background: 'var(--page-background)',
-            border: '1px solid gray'
-          }}>
-          {children}
-        </div>
-      </div>
-    </Overlay>
-  );
-}
-```
-
-The below `ModalTrigger` component uses the <TypeLink links={docs.links} type={docs.exports.useOverlayTrigger} /> hook to show the modal when a button is pressed. It accepts a function as children, which is called with a callback that closes the modal. This can be used to implement a close button.
-
-```tsx example export=true render=false
-import {useOverlayTriggerState} from '@react-stately/overlays';
-import {useOverlayTrigger} from '@react-aria/overlays';
-
-// Reuse the Button from your component library. See below for details.
-import {Button} from 'your-component-library';
-
-function ModalTrigger({label, children, ...props}) {
-  let state = useOverlayTriggerState(props);
-  let {triggerProps, overlayProps} = useOverlayTrigger({type: 'dialog'}, state);
-
-  return <>
-    <Button {...triggerProps}>Open Dialog</Button>
-    {state.isOpen &&
-      <Modal {...props} state={state}>
-        {React.cloneElement(children(state.close), overlayProps)}
-      </Modal>
-    }
-  </>;
-}
-```
-
-Now, we can render an example modal containing a dialog, with a button that closes it using the function provided by `ModalTrigger`.
-
-```tsx example
-// Reuse the Dialog from your component library. See below for details.
-import {Dialog} from 'your-component-library';
-
-<ModalTrigger label="Open Dialog">
-  {close =>
-    <Dialog title="Enter your name">
-      <form style={{display: 'flex', flexDirection: 'column'}}>
-        <label htmlFor="first-name">First Name:</label>
-        <input id="first-name" />
-        <label htmlFor="last-name">Last Name:</label>
-        <input id="last-name" />
-        <Button
-          onPress={close}
-          style={{marginTop: 10}}>
-          Submit
-        </Button>
-      </form>
-    </Dialog>
-  }
-</ModalTrigger>
-```
-
-### Dialog
-
-The `Dialog` component is rendered within the `ModalOverlay` component. It is built using the [useDialog](../Modal/useDialog.html) hook, and can also be used in other overlay containers such as [popovers](../Popover/usePopover.html).
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import type {AriaDialogProps} from '@react-aria/dialog';
-import {useDialog} from '@react-aria/dialog';
-
-interface DialogProps extends AriaDialogProps {
-  title?: React.ReactNode,
-  children: React.ReactNode
-}
-
-function Dialog({title, children, ...props}: DialogProps) {
-  let ref = React.useRef(null);
-  let {dialogProps, titleProps} = useDialog(props, ref);
-
-  return (
-    <div {...dialogProps} ref={ref} style={{padding: 30}}>
-      {title &&
-        <h3 {...titleProps} style={{marginTop: 0}}>
-          {title}
-        </h3>
-      }
-      {children}
-    </div>
-  );
-}
-```
-
-</details>
-
-### Button
-
-The `Button` component is used in the above example to toggle the popover. It is built using the [useButton](../Button/useButton.html) hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useButton} from '@react-aria/button';
-
-function Button(props) {
-  let ref = props.buttonRef;
-  let {buttonProps} = useButton(props, ref);
-  return <button {...buttonProps} ref={ref} style={props.style}>{props.children}</button>;
-}
-```
-
-</details>
-
-## Usage
-
-The following examples show how to use the `Modal` and `ModalTrigger` components created in the above example.
-
-### Dismissable
-
-If your modal doesn't require the user to make a confirmation, you can set `isDismissable`
-on the `Modal`. This allows the user to click outside to close the dialog.
-
-```tsx example
-<ModalTrigger isDismissable label="Open Dialog">
-  {() =>
-    <Dialog title="Notice">
-      Click outside to close this dialog.
-    </Dialog>
-  }
-</ModalTrigger>
-```
-
-### Keyboard dismiss disabled
-
-By default, modals can be closed by pressing the <Keyboard>Escape</Keyboard> key. This can be disabled with the `isKeyboardDismissDisabled` prop.
-
-```tsx example
-<ModalTrigger isKeyboardDismissDisabled label="Open Dialog">
-  {close =>
-    <Dialog title="Notice">
-      <p>You must close this dialog using the button below.</p>
-      <Button onPress={close}>Close</Button>
-    </Dialog>
-  }
-</ModalTrigger>
-```
diff --git a/packages/react-aria/docs/overlays/usePopover.mdx b/packages/react-aria/docs/overlays/usePopover.mdx
deleted file mode 100644
index da380b1a2ef..00000000000
--- a/packages/react-aria/docs/overlays/usePopover.mdx
+++ /dev/null
@@ -1,345 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/overlays';
-import focusDocs from 'docs:@react-aria/focus';
-import dialogDocs from 'docs:@react-aria/dialog';
-import statelyDocs from 'docs:@react-stately/overlays';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import {Keyboard} from '@react-spectrum/text';
-import packageData from '@react-aria/overlays/package.json';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import Anatomy from './popover-anatomy.svg';
-
----
-category: Overlays
-keywords: [overlays, dialog, modal, aria]
----
-
-# usePopover
-
-<PageDescription>{docs.exports.usePopover.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['usePopover']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.usePopover} links={docs.links} />
-
-## Features
-
-There is no built in way to create popovers in
-HTML. <TypeLink links={docs.links} type={docs.exports.usePopover} />,
-helps achieve accessible popovers that can be styled as needed.
-
-* **Accessible** – The trigger and popover are automatically associated semantically via ARIA. Content outside the popover is hidden from assistive technologies while it is open. The popover closes when interacting outside, or pressing the <Keyboard>Escape</Keyboard> key.
-* **Focus management** – Focus is moved into the popover on mount, and restored to the trigger element on unmount.
-* **Positioning** – The popover is positioned relative to the trigger element, and automatically flips and adjusts to avoid overlapping with the edge of the browser window. Scrolling is prevented outside the popover to avoid unintentionally repositioning or closing it.
-
-**Note**: `usePopover` only handles the overlay itself. It should be combined
-with [useDialog](../Modal/useDialog.html) to create fully accessible popovers. Other overlays
-such as menus may also be placed in a popover.
-
-## Anatomy
-
-<Anatomy />
-
-A popover consists of a trigger element (e.g. button) and an overlay, which is positioned relative to the trigger. The overlay may contain a [dialog](../Modal/useDialog.html), or another element such as a [menu](../Menu/useMenu.html) or [listbox](../ListBox/useListBox.html) when used within a component such as a [select](../Select/useSelect.html) or [combobox](../ComboBox/useComboBox.html).
-
-`usePopover` returns props that you should spread onto the appropriate elements, as well as the computed placement of the popover relative to the trigger:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.usePopover.return.id].properties} />
-</TypeContext.Provider>
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useOverlayTriggerState} />
-hook in `@react-stately/overlays`. The state object should be passed as an argument to `usePopover`.
-
-## Example
-
-This example shows how to build a typical popover overlay that is positioned relative to
-a trigger button. The content of the popover is a dialog, built
-with <TypeLink links={dialogDocs.links} type={dialogDocs.exports.useDialog} />. The `Dialog` component used in this example can also be reused within a [modal](../Modal/useModalOverlay.html) or other types of overlays. The implementation is available below.
-
-The `Popover` component uses an &lt;<TypeLink links={docs.links} type={docs.exports.Overlay} />&gt; to render its contents in a React [Portal](https://reactjs.org/docs/portals.html) at the end of the document body, which ensures it is not clipped by other elements. It also acts as a focus scope, containing focus within the popover and restoring it to the trigger when it unmounts. <TypeLink links={docs.links} type={docs.exports.usePopover} /> handles positioning the popover relative to the trigger element, and closing it when the user interacts outside or presses the <Keyboard>Escape</Keyboard> key.
-
-<TypeLink links={docs.links} type={docs.exports.usePopover} /> also hides content outside the popover from screen readers, which is important since the surrounding content won't be in context of the original trigger due to the portal. To allow screen reader users to dismiss the popover without a keyboard (e.g. on mobile), visually hidden &lt;<TypeLink links={docs.links} type={docs.exports.DismissButton} />&gt; elements are added at the start and end of the popover. An underlay is also used to prevent scrolling and interacting with elements outside the popover with a pointer, to avoid unintentionally repositioning or closing it.
-
-```tsx example export=true render=false
-import type {AriaPopoverProps} from 'react-aria';
-import type {OverlayTriggerState} from 'react-stately';
-import {usePopover, Overlay, DismissButton} from '@react-aria/overlays';
-
-interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
-  children: React.ReactNode,
-  state: OverlayTriggerState
-}
-
-function Popover({children, state, offset = 8, ...props}: PopoverProps) {
-  let popoverRef = React.useRef(null);
-  let {popoverProps, underlayProps, arrowProps, placement} = usePopover({
-    ...props,
-    offset,
-    popoverRef
-  }, state);
-
-  return (
-    <Overlay>
-      <div {...underlayProps} className="underlay" />
-      <div
-        {...popoverProps}
-        ref={popoverRef}
-        className="popover">
-        <svg {...arrowProps} className="arrow" data-placement={placement} viewBox="0 0 12 12">
-          <path d="M0 0 L6 6 L12 0" />
-        </svg>
-        <DismissButton onDismiss={state.close} />
-        {children}
-        <DismissButton onDismiss={state.close} />
-      </div>
-    </Overlay>
-  );
-}
-```
-
-The above `Popover` component can be used as part of many different patterns, such as [ComboBox](../ComboBox/useComboBox.html), [Select](../Select/useSelect.html), and [DatePicker](../DatePicker/useDatePicker.html). To use it standalone, we need a trigger element. The below `PopoverTrigger` component uses the <TypeLink links={docs.links} type={docs.exports.useOverlayTrigger} /> hook to trigger the popover when a button is pressed. This hook also ensures that the button and popover are semantically connected via ARIA.
-
-```tsx example export=true render=false
-import {useOverlayTriggerState} from '@react-stately/overlays';
-import {useOverlayTrigger} from '@react-aria/overlays';
-
-// Reuse the Button from your component library. See below for details.
-import {Button} from 'your-component-library';
-
-function PopoverTrigger({label, children, ...props}) {
-  let ref = React.useRef(null);
-  let state = useOverlayTriggerState(props);
-  let {triggerProps, overlayProps} = useOverlayTrigger({type: 'dialog'}, state, ref);
-
-  return <>
-    <Button {...triggerProps} buttonRef={ref}>{label}</Button>
-    {state.isOpen &&
-      <Popover {...props} triggerRef={ref} state={state}>
-        {React.cloneElement(children, overlayProps)}
-      </Popover>
-    }
-  </>;
-}
-```
-
-Now, we can render an example popover containing a dialog.
-
-```tsx example
-// Reuse the Dialog from your component library. See below for details.
-import {Dialog} from 'your-component-library';
-
-<PopoverTrigger label="Open Popover">
-  <Dialog title="Popover title">
-    This is the content of the popover.
-  </Dialog>
-</PopoverTrigger>
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.underlay {
-  position: fixed;
-  inset: 0;
-}
-
-.popover {
-  background: var(--page-background);
-  border: 1px solid var(--spectrum-global-color-gray-400);
-  box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
-  border-radius: 6px;
-}
-
-.arrow {
-  position: absolute;
-  fill: var(--page-background);
-  stroke: var(--spectrum-global-color-gray-400);
-  stroke-width: 1px;
-  width: 12px;
-  height: 12px;
-}
-
-.arrow[data-placement=top] {
-  top: 100%;
-  transform: translateX(-50%);
-}
-
-.arrow[data-placement=bottom] {
-  bottom: 100%;
-  transform: translateX(-50%) rotate(180deg);
-}
-
-.arrow[data-placement=left] {
-  left: 100%;
-  transform: translateY(-50%) rotate(-90deg);
-}
-
-.arrow[data-placement=right] {
-  right: 100%;
-  transform: translateY(-50%) rotate(90deg);
-}
-```
-
-</details>
-
-### Dialog
-
-The `Dialog` component is rendered within the `Popover` component. It is built using the [useDialog](../Modal/useDialog.html) hook, and can also be used in other overlay containers such as [modals](../Modal/useModalOverlay.html).
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import type {AriaDialogProps} from '@react-aria/dialog';
-import {useDialog} from '@react-aria/dialog';
-
-interface DialogProps extends AriaDialogProps {
-  title?: React.ReactNode,
-  children: React.ReactNode
-}
-
-function Dialog({title, children, ...props}: DialogProps) {
-  let ref = React.useRef(null);
-  let {dialogProps, titleProps} = useDialog(props, ref);
-
-  return (
-    <div {...dialogProps} ref={ref} style={{padding: 30, maxWidth: 200, outline: 'none'}}>
-      {title &&
-        <h3 {...titleProps} style={{marginTop: 0}}>
-          {title}
-        </h3>
-      }
-      {children}
-    </div>
-  );
-}
-```
-
-</details>
-
-### Button
-
-The `Button` component is used in the above example to toggle the popover. It is built using the [useButton](../Button/useButton.html) hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useButton} from '@react-aria/button';
-
-function Button(props) {
-  let ref = props.buttonRef;
-  let {buttonProps} = useButton(props, ref);
-  return <button {...buttonProps} ref={ref} style={props.style}>{props.children}</button>;
-}
-```
-
-</details>
-
-## Usage
-
-The following examples show how to use the `Popover` and `PopoverTrigger` components created in the above example.
-
-### Placement
-
-The popover's placement with respect to its anchor element can be adjusted using the `placement`
-prop. See <TypeLink links={docs.links} type={docs.links[docs.exports.Placement.id]} /> for a full list of available placement combinations.
-
-```tsx example
-<div style={{ display: 'flex', gap: 8 }}>
-  <PopoverTrigger placement="start" label="⬅️">
-    <Dialog>In left-to-right, this is on the left. In right-to-left, this is on the right.</Dialog>
-  </PopoverTrigger>
-  <PopoverTrigger placement="top" label="⬆️">
-    <Dialog>This popover is above the button.</Dialog>
-  </PopoverTrigger>
-  <PopoverTrigger placement="bottom" label="⬇️">
-    <Dialog>This popover is below the button.</Dialog>
-  </PopoverTrigger>
-  <PopoverTrigger placement="end" label="➡️">
-    <Dialog>In left-to-right, this is on the right. In right-to-left, this is on the left.</Dialog>
-  </PopoverTrigger>
-</div>
-```
-
-### Offset and cross offset
-
-The popover's offset with respect to its anchor element can be adjusted using the `offset` and
-`crossOffset` props. The `offset` prop controls the spacing applied along the main axis between the element and its
-anchor element whereas the `crossOffset` prop handles the spacing applied along the cross axis.
-
-Below is a popover offset by an additional 50px above the trigger.
-
-```tsx example
-<PopoverTrigger placement="top" offset={50} label="Trigger">
-  <Dialog>
-    Offset by an additional 50px.
-  </Dialog>
-</PopoverTrigger>
-```
-
-Below is a popover cross offset by an additional 100px to the right of the trigger.
-
-```tsx example
-<PopoverTrigger placement="top" crossOffset={100} label="Trigger">
-  <Dialog>
-    Offset by an additional 100px.
-  </Dialog>
-</PopoverTrigger>
-```
-
-### Flipping
-
-By default, `usePopover` attempts to flip popovers on the main axis in situations where the original placement
-would cause it to render out of view. This can be overridden by setting `shouldFlip={false}`.
-To see the difference between the two options, scroll this page so that the example below is near the bottom of the window.
-
-```tsx example
-<PopoverTrigger placement="bottom" label="Default">
-  <Dialog>
-    This is a popover that will flip if it can't fully render below the button.
-  </Dialog>
-</PopoverTrigger>
-
-<PopoverTrigger placement="bottom" shouldFlip={false} label="shouldFlip=false">
-  <Dialog>
-    This is a popover that won't flip if it can't fully render below the button.
-  </Dialog>
-</PopoverTrigger>
-```
-
-### Container padding
-
-You can control the minimum padding required between the popover and the
-surrounding container via the `containerPadding` prop. This affects the positioning
-breakpoints that determine when it will attempt to flip.
-
-The example below will maintain at least 50px between the popover and the edge of the browser window.
-
-```tsx example
-<PopoverTrigger placement="top" containerPadding={50} label="Trigger">
-  <Dialog>
-    This is a popover.
-  </Dialog>
-</PopoverTrigger>
-```
diff --git a/packages/react-aria/docs/progress/useProgressBar.mdx b/packages/react-aria/docs/progress/useProgressBar.mdx
deleted file mode 100644
index e102b867c42..00000000000
--- a/packages/react-aria/docs/progress/useProgressBar.mdx
+++ /dev/null
@@ -1,237 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/progress';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/progress/package.json';
-import Anatomy from './anatomy.svg';
-
----
-category: Status
-keywords: [progressbar, aria]
----
-
-# useProgressBar
-
-<PageDescription>{docs.exports.useProgressBar.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useProgressBar']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/TR/wai-aria-1.2/#progressbar'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useProgressBar} links={docs.links} />
-
-## Features
-
-The [&lt;progress&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress)
-HTML element can be used to build a progress bar, however it is
-very difficult to style cross browser. `useProgressBar` helps achieve accessible
-progress bars and spinners that can be styled as needed.
-
-* Exposed to assistive technology as a progress bar via ARIA
-* Labeling support for accessibility
-* Internationalized number formatting as a percentage or value
-* Determinate and indeterminate progress support
-
-## Anatomy
-
-<Anatomy />
-
-Progress bars consist of a track element showing the full progress of an operation,
-a fill element showing the current progress, a label, and an optional value label. The track and bar elements
-represent the progress visually, while a wrapper element represents the progress to
-assistive technology using the [progressbar](https://www.w3.org/TR/wai-aria-1.2/#progressbar)
-ARIA role.
-
-`useProgressBar` returns two sets of props that you should spread onto the appropriate element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useProgressBar.return.id].properties} />
-</TypeContext.Provider>
-
-If there is no visual label, an `aria-label` or `aria-labelledby` prop must be passed instead
-to identify the element to screen readers.
-
-## Example
-
-```tsx example export=true
-import {useProgressBar} from '@react-aria/progress';
-
-function ProgressBar(props) {
-  let {
-    label,
-    showValueLabel = !!label,
-    value,
-    minValue = 0,
-    maxValue = 100
-  } = props;
-  let {
-    progressBarProps,
-    labelProps
-  } = useProgressBar(props);
-
-  // Calculate the width of the progress bar as a percentage
-  let percentage = (value - minValue) / (maxValue - minValue);
-  let barWidth = `${Math.round(percentage * 100)}%`;
-
-  return (
-    <div {...progressBarProps} style={{width: 200}}>
-      <div style={{display: 'flex', justifyContent: 'space-between'}}>
-        {label &&
-          <span {...labelProps}>
-            {label}
-          </span>
-        }
-        {showValueLabel &&
-          <span>
-            {progressBarProps['aria-valuetext']}
-          </span>
-        }
-      </div>
-      <div style={{height: 10, background: 'lightgray'}}>
-        <div style={{width: barWidth, height: 10, background: 'orange'}} />
-      </div>
-    </div>
-  );
-}
-
-<ProgressBar label="Loading…" value={80} />
-```
-
-## Circular example
-
-Progress bars may also be represented using a circular visualization rather than a line. This is often used to represent indeterminate
-operations, but may also be used for determinate progress indicators when space is limited. The following example shows a progress bar
-visualized as a circular spinner using SVG.
-
-```tsx example export=true
-function ProgressCircle(props) {
-  let {isIndeterminate, value, minValue = 0, maxValue = 100} = props;
-  let {progressBarProps} = useProgressBar(props);
-
-  let center = 16;
-  let strokeWidth = 4;
-  let r = 16 - strokeWidth;
-  let c = 2 * r * Math.PI;
-  let percentage = isIndeterminate ? 0.25 : (value - minValue) / (maxValue - minValue);
-  let offset = c - percentage * c;
-
-  return (
-    <svg
-      {...progressBarProps}
-      width={32}
-      height={32}
-      viewBox="0 0 32 32"
-      fill="none"
-      strokeWidth={strokeWidth}>
-      <circle
-        role="presentation"
-        cx={center}
-        cy={center}
-        r={r}
-        stroke="gray" />
-      <circle
-        role="presentation"
-        cx={center}
-        cy={center}
-        r={r}
-        stroke="orange"
-        strokeDasharray={`${c} ${c}`}
-        strokeDashoffset={offset}
-        transform="rotate(-90 16 16)">
-        {props.isIndeterminate &&
-          <animateTransform
-            attributeName="transform"
-            type="rotate"
-            begin="0s"
-            dur="1s"
-            from="0 16 16"
-            to="360 16 16"
-            repeatCount="indefinite" />
-        }
-      </circle>
-    </svg>
-  );
-}
-
-<ProgressCircle aria-label="Loading…" value={60} />
-```
-
-## Usage
-
-The following examples show how to use the `ProgressBar` and `ProgressCircle` components created in the above example.
-
-### Custom value scale
-
-By default, the `value` prop represents the current percentage of progress, as the minimum and maximum values default to 0 and 100, respectively. Alternatively, a different scale can be used by setting the `minValue` and `maxValue` props.
-
-```tsx example
-<ProgressBar
-  label="Loading…"
-  minValue={50}
-  maxValue={150}
-  value={100} />
-```
-
-### Value formatting
-
-Values are formatted as a percentage by default, but this can be modified by using the `formatOptions` prop to specify a different format.
-`formatOptions` is compatible with the option parameter of [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat) and is applied based on the current locale.
-
-```tsx example
-<ProgressBar
-  label="Sending…"
-  formatOptions={{style: 'currency', currency: 'JPY'}}
-  value={60} />
-```
-
-### Custom value label
-
-The `valueLabel` prop allows the formatted value to be replaced with a custom string.
-
-```tsx example
-<ProgressBar
-  label="Feeding…"
-  valueLabel="30 of 100 dogs"
-  value={30} />
-```
-
-### Indeterminate
-
-The `isIndeterminate` prop can be used to represent an indeterminate operation. The `ProgressCircle` component created [above](#circular-example)
-implements an animation to indicate this visually.
-
-```tsx example
-<ProgressCircle
-  aria-label="Loading…"
-  isIndeterminate />
-```
-
-## Internationalization
-
-### Value formatting
-
-`useProgressBar` will handle localized formatting of the value label for accessibility
-automatically. This is returned in the `aria-valuetext` prop in `progressBarProps`. You
-can use this to create a visible label if needed and ensure that it is formatted correctly.
-The number formatting can also be controlled using the `formatOptions` prop.
-
-### RTL
-
-In right-to-left languages, the progress bar should be mirrored. The label is right-aligned,
-the value is left-aligned, and the fill progresses from right to left. Ensure that your CSS
-accounts for this.
diff --git a/packages/react-aria/docs/radio/buttongroup-example.png b/packages/react-aria/docs/radio/buttongroup-example.png
deleted file mode 100644
index b8532c8ac52..00000000000
Binary files a/packages/react-aria/docs/radio/buttongroup-example.png and /dev/null differ
diff --git a/packages/react-aria/docs/radio/card-example.png b/packages/react-aria/docs/radio/card-example.png
deleted file mode 100644
index adcf46203ee..00000000000
Binary files a/packages/react-aria/docs/radio/card-example.png and /dev/null differ
diff --git a/packages/react-aria/docs/radio/swatch-example.png b/packages/react-aria/docs/radio/swatch-example.png
deleted file mode 100644
index 163f3f15d5c..00000000000
Binary files a/packages/react-aria/docs/radio/swatch-example.png and /dev/null differ
diff --git a/packages/react-aria/docs/radio/useRadioGroup.mdx b/packages/react-aria/docs/radio/useRadioGroup.mdx
deleted file mode 100644
index 46be982ab4b..00000000000
--- a/packages/react-aria/docs/radio/useRadioGroup.mdx
+++ /dev/null
@@ -1,366 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/radio';
-import hiddenDocs from 'docs:@react-aria/visually-hidden';
-import focusDocs from 'docs:@react-aria/focus';
-import statelyDocs from 'docs:@react-stately/radio';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import {Keyboard} from '@react-spectrum/text';
-import packageData from '@react-aria/radio/package.json';
-import Anatomy from './anatomy.svg';
-import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
-import buttongroupPreview from 'url:./buttongroup-example.png';
-import cardPreview from 'url:./card-example.png';
-import swatchPreview from 'url:./swatch-example.png';
-
----
-category: Forms
-keywords: [radiobutton, radio, input, aria]
----
-
-# useRadioGroup
-
-<PageDescription>{docs.exports.useRadioGroup.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useRadioGroup', 'useRadio']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useRadioGroup} links={docs.links} />
-<FunctionAPI function={docs.exports.useRadio} links={docs.links} />
-
-## Features
-
-Radio groups can be built in HTML with the
-[&lt;fieldset&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)
-and [&lt;input&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) elements,
-however these can be difficult to style. `useRadioGroup` and `useRadio` help achieve accessible
-radio groups that can be styled as needed.
-
-* Radio groups are exposed to assistive technology via ARIA
-* Each radio is built with a native HTML `<input>` element, which can be optionally visually
-  hidden to allow custom styling
-* Full support for browser features like form autofill and validation
-* Keyboard focus management and cross browser normalization
-* Group and radio labeling support for assistive technology
-
-## Anatomy
-
-<Anatomy />
-
-A radio group consists of a set of radio buttons, and a label. Each radio
-includes a label and a visual selection indicator. A single radio button
-within the group can be selected at a time. Users may click or touch a radio
-button to select it, or use the <Keyboard>Tab</Keyboard> key to navigate to the group, the arrow keys
-to navigate within the group, and the <Keyboard>Space</Keyboard> key to select an option.
-
-`useRadioGroup` returns props for the group and its label, which you should spread
-onto the appropriate element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useRadioGroup.return.id].properties} />
-</TypeContext.Provider>
-
-`useRadio` returns props for an individual radio, along with states that can be used for styling:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useRadio.return.id].properties} />
-</TypeContext.Provider>
-
-Selection state is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useRadioGroupState} />
-hook in `@react-stately/radio`. The state object should be passed as an option to `useRadio`.
-
-Individual radio buttons must have a visual label. If the radio group does not have a visible label,
-an `aria-label` or `aria-labelledby` prop must be passed instead to identify the element to assistive
-technology.
-
-## Example
-
-This example uses native input elements for the radios, and React context to share state from the group
-to each radio. An HTML `<label>` element wraps the native input and the text to provide an implicit label
-for the radio.
-
-```tsx example
-import {useRadioGroup, useRadio} from '@react-aria/radio';
-import {useRadioGroupState} from '@react-stately/radio';
-
-let RadioContext = React.createContext(null);
-
-function RadioGroup(props) {
-  let {children, label, description, errorMessage} = props;
-  let state = useRadioGroupState(props);
-  let {radioGroupProps, labelProps, descriptionProps, errorMessageProps} = useRadioGroup(props, state);
-
-  return (
-    <div {...radioGroupProps}>
-      <span {...labelProps}>{label}</span>
-      <RadioContext.Provider value={state}>
-        {children}
-      </RadioContext.Provider>
-      {description && <div {...descriptionProps} style={{fontSize: 12}}>{description}</div>}
-      {errorMessage && state.isInvalid &&
-        <div {...errorMessageProps} style={{color: 'red', fontSize: 12}}>{errorMessage}</div>
-      }
-    </div>
-  )
-}
-
-function Radio(props) {
-  let {children} = props;
-  let state = React.useContext(RadioContext);
-  let ref = React.useRef(null);
-  let {inputProps} = useRadio(props, state, ref);
-
-  return (
-    <label style={{display: 'block'}}>
-      <input {...inputProps} ref={ref} />
-      {children}
-    </label>
-  );
-}
-
-<RadioGroup label="Favorite pet">
-  <Radio value="dogs">Dogs</Radio>
-  <Radio value="cats">Cats</Radio>
-</RadioGroup>
-```
-
-## Styling
-
-To build a custom styled radio button, you can make the native input element visually hidden.
-This is possible using the &lt;<TypeLink links={hiddenDocs.links} type={hiddenDocs.exports.VisuallyHidden} />&gt;
-utility component from `@react-aria/visually-hidden`. It is still in the DOM and accessible to
-assistive technology, but invisible. This example uses SVG to build the visual radio button,
-which is hidden from screen readers with `aria-hidden`.
-
-For keyboard accessibility, a focus ring is important to indicate which element has keyboard focus.
-This is implemented with the <TypeLink links={focusDocs.links} type={focusDocs.exports.useFocusRing} />
-hook from `@react-aria/focus`. When `isFocusVisible` is true, an extra SVG element is rendered to
-indicate focus. The focus ring is only visible when the user is interacting with a keyboard,
-not with a mouse or touch.
-
-```tsx example export=true
-import {VisuallyHidden} from '@react-aria/visually-hidden';
-import {useFocusRing} from '@react-aria/focus';
-
-// RadioGroup is the same as in the previous example
-let RadioContext = React.createContext(null);
-
-function RadioGroup(props) {
-  let {children, label, description} = props;
-  let state = useRadioGroupState(props);
-  let {radioGroupProps, labelProps, descriptionProps, errorMessageProps, isInvalid, validationErrors} = useRadioGroup(props, state);
-
-  return (
-    <div {...radioGroupProps}>
-      <span {...labelProps}>{label}</span>
-      <RadioContext.Provider value={state}>
-        {children}
-      </RadioContext.Provider>
-      {description && <div {...descriptionProps} style={{fontSize: 12}}>{description}</div>}
-      {isInvalid &&
-        <div {...errorMessageProps} style={{color: 'red', fontSize: 12}}>{validationErrors.join(' ')}</div>
-      }
-    </div>
-  )
-}
-
-function Radio(props) {
-  let {children} = props;
-  let state = React.useContext(RadioContext);
-  let ref = React.useRef(null);
-  let {inputProps, isSelected, isDisabled} = useRadio(props, state, ref);
-  let {isFocusVisible, focusProps} = useFocusRing();
-  let strokeWidth = isSelected ? 6 : 2;
-
-  return (
-    <label style={{display: 'flex', alignItems: 'center', opacity: isDisabled ? 0.4 : 1}}>
-      <VisuallyHidden>
-        <input {...inputProps} {...focusProps} ref={ref} />
-      </VisuallyHidden>
-      <svg
-        width={24}
-        height={24}
-        aria-hidden="true"
-        style={{marginRight: 4}}>
-        <circle
-          cx={12}
-          cy={12}
-          r={8 - strokeWidth / 2}
-          fill="none"
-          stroke={isSelected ? 'orange' : 'gray'}
-          strokeWidth={strokeWidth} />
-        {isFocusVisible &&
-          <circle
-            cx={12}
-            cy={12}
-            r={11}
-            fill="none"
-            stroke="orange"
-            strokeWidth={2} />
-        }
-      </svg>
-      {children}
-    </label>
-  );
-}
-
-<RadioGroup label="Favorite pet">
-  <Radio value="dogs">Dogs</Radio>
-  <Radio value="cats">Cats</Radio>
-</RadioGroup>
-```
-
-## Styled examples
-
-<ExampleCard
-  url="https://codesandbox.io/s/bold-wood-pxm478?file=/src/SwatchGroup.tsx"
-  preview={swatchPreview}
-  title="Swatch Group"
-  description="A color swatch picker built with Tailwind CSS." />
-
-<ExampleCard
-  url="https://codesandbox.io/s/recursing-night-pu6w2g?file=/src/CardGroup.tsx"
-  preview={cardPreview}
-  title="Selectable Cards"
-  description="A selectable card group built with Styled Components." />
-
-<ExampleCard
-  url="https://codesandbox.io/s/epic-faraday-qoiy0l?file=/src/ButtonGroup.js"
-  preview={buttongroupPreview}
-  title="Button Group"
-  description="A single-selectable segmented button group." />
-
-## Usage
-
-The following examples show how to use the `RadioGroup` component created in the above example.
-
-### Default value
-
-An initial, uncontrolled value can be provided to the RadioGroup using the `defaultValue` prop, which accepts a value corresponding with the `value` prop of each Radio.
-
-```tsx example
-<RadioGroup label="Are you a wizard?" defaultValue="yes">
-  <Radio value="yes">Yes</Radio>
-  <Radio value="no">No</Radio>
-</RadioGroup>
-```
-
-### Controlled value
-
-A controlled value can be provided using the `value` prop, which accepts a value corresponding with the `value` prop of each Radio.
-The `onChange` event is fired when the user selects a radio.
-
-```tsx example
-function Example() {
-  let [selected, setSelected] = React.useState(null);
-
-  return (
-    <>
-      <RadioGroup label="Favorite avatar" value={selected} onChange={setSelected}>
-        <Radio value="wizard">Wizard</Radio>
-        <Radio value="dragon">Dragon</Radio>
-      </RadioGroup>
-      <p>You have selected: {selected}</p>
-    </>
-  );
-}
-```
-
-### Description
-
-The `description` prop can be used to associate additional help text with a radio group.
-
-```tsx example
-<RadioGroup label="Favorite pet" description="Select your favorite pet.">
-  <Radio value="dogs">Dogs</Radio>
-  <Radio value="cats">Cats</Radio>
-</RadioGroup>
-```
-
-### Validation
-
-RadioGroup supports the `isRequired` prop to ensure the user selects an option, as well as custom client and server-side validation. It can also be integrated with other form libraries. See the [Forms](../forms) guide to learn more.
-
-When a RadioGroup has the `validationBehavior="native"` prop, validation errors block form submission. To display validation errors, use the `validationErrors` and `errorMessageProps` returned by `useRadioGroup`. This allows you to render error messages from all of the above sources with consistent custom styles.
-
-```tsx example
-<form>
-  {/*- begin highlight -*/}
-  <RadioGroup label="Favorite pet" name="pet" isRequired validationBehavior="native">
-  {/*- end highlight -*/}
-    <Radio value="dogs">Dog</Radio>
-    <Radio value="cats">Cat</Radio>
-    <Radio value="dragon">Dragon</Radio>
-  </RadioGroup>
-  <input type="submit" style={{marginTop: 8}} />
-</form>
-```
-
-### Disabled
-
-The entire RadioGroup can be disabled with the `isDisabled` prop.
-
-```tsx example
-<RadioGroup label="Favorite sport" isDisabled>
-  <Radio value="soccer">Soccer</Radio>
-  <Radio value="baseball">Baseball</Radio>
-  <Radio value="basketball">Basketball</Radio>
-</RadioGroup>
-```
-
-To disable an individual radio, pass `isDisabled` to the `Radio` instead.
-
-```tsx example
-<RadioGroup label="Favorite sport">
-  <Radio value="soccer">Soccer</Radio>
-  <Radio value="baseball" isDisabled>Baseball</Radio>
-  <Radio value="basketball">Basketball</Radio>
-</RadioGroup>
-```
-
-### Read only
-
-The `isReadOnly` prop makes the selection immutable. Unlike `isDisabled`, the RadioGroup remains focusable.
-See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.
-
-```tsx example
-<RadioGroup label="Favorite avatar" defaultValue="wizard" isReadOnly>
-  <Radio value="wizard">Wizard</Radio>
-  <Radio value="dragon">Dragon</Radio>
-</RadioGroup>
-```
-
-### HTML forms
-
-RadioGroup supports the `name` prop, paired with the Radio `value` prop, for integration with HTML forms.
-
-```tsx example
-<RadioGroup label="Favorite pet" name="pet">
-  <Radio value="dogs">Dogs</Radio>
-  <Radio value="cats">Cats</Radio>
-</RadioGroup>
-```
-
-## Internationalization
-
-### RTL
-
-In right-to-left languages, the radio group and radio buttons should be mirrored.
-The group should be right-aligned, and the radio should be placed on the right
-side of the label. Ensure that your CSS accounts for this.
diff --git a/packages/react-aria/docs/searchfield/useSearchField.mdx b/packages/react-aria/docs/searchfield/useSearchField.mdx
deleted file mode 100644
index f9023c655c3..00000000000
--- a/packages/react-aria/docs/searchfield/useSearchField.mdx
+++ /dev/null
@@ -1,291 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/searchfield';
-import statelyDocs from 'docs:@react-stately/searchfield';
-import buttonDocs from 'docs:@react-aria/button';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import {Keyboard} from '@react-spectrum/text';
-import packageData from '@react-aria/searchfield/package.json';
-import Anatomy from './anatomy.svg';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-
----
-category: Forms
-keywords: [searchbox, input, search, aria]
----
-
-# useSearchField
-
-<PageDescription>{docs.exports.useSearchField.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useSearchField']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/TR/wai-aria-1.2/#searchbox'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useSearchField} links={docs.links} />
-
-## Features
-
-Search fields can be built with `<input type="search">`, but these can be hard to
-style consistently cross browser. `useSearchField` helps achieve accessible
-search fields that can be styled as needed.
-
-* Built with a native `<input type="search">` element
-* Visual and ARIA labeling support
-* Keyboard submit handling via the <Keyboard>Enter</Keyboard> key
-* Keyboard support for clearing the search field with the <Keyboard>Escape</Keyboard> key
-* Custom clear button support with internationalized label for accessibility
-* Support for native HTML constraint validation with customizable UI, custom validation functions, realtime validation, and server-side validation errors
-
-## Anatomy
-
-<Anatomy />
-
-Search fields consist of an input element, a label, and an optional clear button.
-`useSearchField` automatically manages the labeling and relationships between the elements,
-and handles keyboard events. Users can press the <Keyboard>Escape</Keyboard> key to clear the search field, or
-the <Keyboard>Enter</Keyboard> key to trigger the `onSubmit` event.
-
-`useSearchField` also supports optional description and error message elements, which can be used
-to provide more context about the field, and any validation messages. These are linked with the
-input via the `aria-describedby` attribute.
-
-`useSearchField` returns props that you should spread onto the appropriate elements:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useSearchField.return.id].properties} />
-</TypeContext.Provider>
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useSearchFieldState} />
-hook in `@react-stately/searchfield`. The state object should be passed as an option to `useSearchField`.
-
-If there is no visual label, an `aria-label` or `aria-labelledby` prop must be passed instead
-to identify the element to screen readers.
-
-## Example
-
-**Note**: This example does not show the optional description or error message elements. See [useTextField](../TextField/useTextField.html) for an example of that.
-
-```tsx example
-import {useSearchField} from '@react-aria/searchfield';
-import {useSearchFieldState} from '@react-stately/searchfield';
-
-function SearchField(props) {
-  let {label} = props;
-  let state = useSearchFieldState(props);
-  let ref = React.useRef(null);
-  let {labelProps, inputProps} = useSearchField(props, state, ref);
-
-  return (
-    <div style={{display: 'flex', flexDirection: 'column', width: 200}}>
-      <label {...labelProps}>{label}</label>
-      <input {...inputProps} ref={ref} />
-    </div>
-  );
-}
-
-<SearchField
-  label="Search"
-  onSubmit={text => alert(text)} />
-```
-
-## Styling
-
-This example uses CSS to reset the default browser styling for a search field and implement
-custom styles. It also includes a custom clear button, built with [useButton](../Button/useButton.html).
-The `Button` component is independent, and can be shared with many other components.
-
-```tsx example export=true
-// Reuse the Button from your component library. See below for details.
-import {Button} from 'your-component-library';
-
-function SearchField(props) {
-  let {label} = props;
-  let state = useSearchFieldState(props);
-  let ref = React.useRef(null);
-  let {labelProps, inputProps, clearButtonProps} = useSearchField(props, state, ref);
-
-  return (
-    <div className="search-field">
-      <label {...labelProps}>{label}</label>
-      <div>
-        <input {...inputProps} ref={ref} />
-        {state.value !== '' &&
-          <Button {...clearButtonProps}>❎</Button>
-        }
-      </div>
-    </div>
-  );
-}
-
-<SearchField
-  label="Search"
-  onSubmit={text => alert(text)} />
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-/* css */
-.search-field {
-  display: flex;
-  flex-direction: column;
-}
-
-.search-field div {
-  background: slategray;
-  padding: 4px 0 4px 4px;
-  border-radius: 4px;
-  width: 250px;
-  display: flex;
-}
-
-.search-field input {
-  flex: 1;
-  color: white;
-  font-size: 15px;
-  padding: 2px 0;
-}
-
-.search-field input, .search-field button {
-  -webkit-appearance: none;
-  border: none;
-  outline: none;
-  background: none;
-}
-
-.search-field input::-webkit-search-cancel-button,
-.search-field input::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-```
-
-</details>
-
-### Button
-
-The `Button` component is used in the above example to clear the search field. It is built using the [useButton](../Button/useButton.html) hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useButton} from '@react-aria/button';
-
-function Button(props) {
-  let ref = React.useRef(null);
-  let {buttonProps} = useButton(props, ref);
-  return <button {...buttonProps} ref={ref}>{props.children}</button>;
-}
-```
-
-</details>
-
-## Usage
-
-The following examples show how to use the `SearchField` component created in the above example.
-
-### Default value
-
-A SearchField's `value` is empty by default, but an initial, uncontrolled, value can be provided using the `defaultValue` prop.
-
-```tsx example
-<SearchField
-  label="Search"
-  defaultValue="Puppies" />
-```
-
-### Controlled value
-
-The `value` prop can be used to make the value controlled. The `onChange` event is fired when the user edits the text, and receives the new value.
-
-```tsx example
-function Example() {
-  let [text, setText] = React.useState('');
-
-  return (
-    <>
-      <SearchField label="Search" onChange={setText} />
-      <p>Mirrored text: {text}</p>
-    </>
-  );
-}
-```
-
-### Events
-
-The most commonly used handlers for events in SearchField are the:
-- `onChange` prop which is triggered whenever the value is edited by the user.
-- `onSubmit` prop which is triggered whenever the value is submitted by the user (e.g. by pressing <Keyboard>Enter</Keyboard>).
-- `onClear` prop which is triggered whenever the value is cleared by the user (e.g. by pressing clear button or <Keyboard>Escape</Keyboard> key).
-
-The example below uses `onChange`, `onSubmit`, and `onClear` to update two separate elements with the text entered into the SearchField.
-
-```tsx example
-function Example() {
-  let [currentText, setCurrentText] = React.useState('');
-  let [submittedText, setSubmittedText] = React.useState('');
-
-  return (
-    <div>
-      <SearchField
-        onClear={() => setCurrentText('')}
-        onChange={setCurrentText}
-        onSubmit={setSubmittedText}
-        label="Your text"
-        value={currentText}
-      />
-      <p>Mirrored text: {currentText}</p>
-      <p>Submitted text: {submittedText}</p>
-    </div>
-  );
-}
-```
-
-### Disabled
-
-A SearchField can be disabled using the `isDisabled` prop.
-
-```tsx example
-<SearchField label="Email" isDisabled />
-```
-
-### Read only
-
-The `isReadOnly` boolean prop makes the SearchField's text content immutable. Unlike `isDisabled`, the SearchField remains focusable
-and the contents can still be copied. See [the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.
-
-```tsx example
-<SearchField label="Email" defaultValue="abc@adobe.com" isReadOnly />
-```
-
-### HTML forms
-
-SearchField supports the `name` prop for integration with HTML forms. In addition, attributes such as `type`, `pattern`, `inputMode`, and others are passed through to the underlying `<input>` element.
-
-```tsx example
-<SearchField label="Email" name="email" type="email" />
-```
-
-## Internationalization
-
-### RTL
-
-In right-to-left languages, search fields should be mirrored. The label should be right aligned,
-along with the text in the input. Ensure that your CSS accounts for this.
diff --git a/packages/react-aria/docs/select/anatomy.svg b/packages/react-aria/docs/select/anatomy.svg
deleted file mode 100644
index 85e525571fa..00000000000
--- a/packages/react-aria/docs/select/anatomy.svg
+++ /dev/null
@@ -1,69 +0,0 @@
-<svg style="max-height: 319px; background: var(--anatomy-gray-100); padding: 32px; margin-bottom: 16px; width: calc(100% - 64px); border-radius: var(--anatomy-radius);" viewBox="0 0 484 319">
-  <title>Select anatomy diagram</title>
-  <desc>Shows two select elements, one open and one closed, with labels pointing to their parts including the label, trigger, value, and menu.</desc>
-  <g transform="translate(-246 -33)">
-    <g transform="translate(13 -7)">
-      <g transform="translate(246 109)" fill="var(--anatomy-gray-200)" stroke="var(--anatomy-gray-500)" stroke-width="1.5">
-        <rect width="214" height="48" rx="6" stroke="none" />
-        <rect x="0.75" y="0.75" width="212.5" height="46.5" rx="5.25" fill="none" />
-      </g>
-      <g transform="translate(503 109)" fill="var(--anatomy-gray-200)" stroke="var(--anatomy-gray-500)" stroke-width="1.5">
-        <rect width="214" height="48" rx="6" stroke="none" />
-        <rect x="0.75" y="0.75" width="212.5" height="46.5" rx="5.25" fill="none" />
-      </g><text transform="translate(264 139)" fill="var(--anatomy-gray-600)" font-size="20" font-family="var(--anatomy-font)">
-        <tspan x="0" y="0">Option 1</tspan>
-      </text><text transform="translate(521 139)" fill="var(--anatomy-gray-600)" font-size="20" font-family="var(--anatomy-font)">
-        <tspan x="0" y="0">Option 1</tspan>
-      </text>
-      <g transform="translate(427 128.5)">
-        <path d="M15,1.5A1.5,1.5,0,0,0,12.437.437L7.5,5.382,2.567.437A1.505,1.505,0,1,0,.437,2.565l6,5.993a1.5,1.5,0,0,0,2.115,0l6-5.993A1.5,1.5,0,0,0,15,1.5Z" transform="translate(0.004 0.006)" fill="var(--anatomy-gray-600)" />
-      </g>
-      <g transform="translate(684 128.5)">
-        <path d="M15,1.5A1.5,1.5,0,0,0,12.437.437L7.5,5.382,2.567.437A1.505,1.505,0,1,0,.437,2.565l6,5.993a1.5,1.5,0,0,0,2.115,0l6-5.993A1.5,1.5,0,0,0,15,1.5Z" transform="translate(0.004 0.006)" fill="var(--anatomy-gray-600)" />
-      </g><text transform="translate(246 97)" fill="var(--anatomy-gray-600)" font-size="18" font-family="var(--anatomy-font)">
-        <tspan x="0" y="0">Label</tspan>
-      </text><text transform="translate(503 97)" fill="var(--anatomy-gray-600)" font-size="18" font-family="var(--anatomy-font)">
-        <tspan x="0" y="0">Label</tspan>
-      </text>
-      <g transform="translate(503 166)" fill="var(--anatomy-gray-50)" stroke="var(--anatomy-gray-400)" stroke-width="1.5">
-        <rect width="214" height="156" rx="6" stroke="none" />
-        <rect x="0.75" y="0.75" width="212.5" height="154.5" rx="5.25" fill="none" />
-      </g><text transform="translate(521 201)" fill="var(--anatomy-gray-800)" font-size="20" font-family="var(--anatomy-font)">
-        <tspan x="0" y="0">Option 1</tspan>
-      </text><text transform="translate(521 249)" fill="var(--anatomy-gray-800)" font-size="20" font-family="var(--anatomy-font)">
-        <tspan x="0" y="0">Option 2</tspan>
-      </text><text transform="translate(521 297)" fill="var(--anatomy-gray-800)" font-size="20" font-family="var(--anatomy-font)">
-        <tspan x="0" y="0">Option 3</tspan>
-      </text>
-      <g transform="translate(-102 542)"><text transform="translate(402 -354)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-          <tspan x="-14.157" y="0">Value</tspan>
-        </text>
-        <path d="M0,2.5A2.5,2.5,0,0,0,2,4.95V29H3V4.95A2.5,2.5,0,1,0,0,2.5Z" transform="translate(399.5 -398)" fill="var(--anatomy-gray-500)" />
-      </g>
-      <g transform="translate(-49 437)">
-        <text transform="translate(402 -348)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-          <tspan x="-17.641" y="0">Trigger</tspan>
-        </text>
-        <path d="M-1270-401.5a2.5,2.5,0,0,1,2-2.45V-417h1v13.05a2.5,2.5,0,0,1,2,2.45,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-1270-401.5Z" transform="translate(1669.5 74)" fill="var(--anatomy-gray-500)" />
-      </g>
-      <g transform="translate(-149 401)">
-        <text transform="translate(410 -348)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-          <tspan x="-27.651" y="0">Label</tspan>
-        </text>
-        <path d="M-1170-358.5a2.5,2.5,0,0,1,2-2.45V-381h1v20.05a2.5,2.5,0,0,1,2,2.45,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-1170-358.5Z" transform="translate(1569.5 38)" fill="var(--anatomy-gray-500)" /><text transform="translate(410 -348)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-          <tspan x="-27.651" y="0">Label</tspan>
-        </text>
-        <path d="M-1170-358.5a2.5,2.5,0,0,1,2-2.45V-381h1v20.05a2.5,2.5,0,0,1,2,2.45,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-1170-358.5Z" transform="translate(1569.5 38)" fill="var(--anatomy-gray-500)" />
-      </g>
-      <g transform="translate(338 672.5)">
-        <text transform="translate(364 -316.5)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" style="font-style: italic">
-          <tspan x="-14.612" y="0">Menu</tspan>
-        </text>
-        <path d="M-1244-611.5V-639.55a2.5,2.5,0,0,1-2-2.449,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-611.5Z" transform="translate(1607.5 282)" fill="var(--anatomy-gray-500)" />
-      </g>
-    </g>
-    <g transform="translate(697 178.981)">
-      <path d="M5.672,13.022A1.366,1.366,0,0,1,4.6,12.509l-3.321-4A1.336,1.336,0,0,1,3.388,6.858l2.284,2.66,6.29-8a1.335,1.335,0,1,1,2.1,1.642L6.709,12.508A1.3,1.3,0,0,1,5.672,13.022Z" transform="translate(0.335 -0.673)" fill="var(--anatomy-gray-600)" />
-    </g>
-  </g>
-</svg>
diff --git a/packages/react-aria/docs/select/example.png b/packages/react-aria/docs/select/example.png
deleted file mode 100644
index bf1b95339ff..00000000000
Binary files a/packages/react-aria/docs/select/example.png and /dev/null differ
diff --git a/packages/react-aria/docs/select/popup-example.png b/packages/react-aria/docs/select/popup-example.png
deleted file mode 100644
index 6c535a36e4a..00000000000
Binary files a/packages/react-aria/docs/select/popup-example.png and /dev/null differ
diff --git a/packages/react-aria/docs/select/styled-components.png b/packages/react-aria/docs/select/styled-components.png
deleted file mode 100644
index 66172c07297..00000000000
Binary files a/packages/react-aria/docs/select/styled-components.png and /dev/null differ
diff --git a/packages/react-aria/docs/select/useSelect.mdx b/packages/react-aria/docs/select/useSelect.mdx
deleted file mode 100644
index 16670bf665c..00000000000
--- a/packages/react-aria/docs/select/useSelect.mdx
+++ /dev/null
@@ -1,519 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/select';
-import collectionsDocs from 'docs:@react-types/shared/src/collections.d.ts';
-import selectionDocs from 'docs:@react-stately/selection';
-import statelyDocs from 'docs:@react-stately/select';
-import overlaysDocs from 'docs:@react-aria/overlays';
-import focusDocs from 'docs:@react-aria/focus';
-import listboxDocs from 'docs:@react-aria/listbox';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/select/package.json';
-import Anatomy from './anatomy.svg';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
-import examplePreview from 'url:./example.png';
-import styledExamplePreview from 'url:./styled-components.png';
-import popupExamplePreview from 'url:./popup-example.png';
-
----
-category: Pickers
-keywords: [listbox, select, aria]
----
-
-# useSelect
-
-<PageDescription>{docs.exports.useSelect.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useSelect']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/listbox/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useSelect} links={docs.links} />
-
-## Features
-
-A select can be built using the [&lt;select&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
-and [&lt;option&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) HTML elements, but this is
-not possible to style consistently cross browser, especially the options. `useSelect` helps achieve accessible
-select components that can be styled as needed without compromising on high quality interactions.
-
-* Exposed to assistive technology as a button with a `listbox` popup using ARIA (combined with [useListBox](../ListBox/useListBox.html))
-* Support for selecting a single option
-* Support for disabled options
-* Support for sections
-* Labeling support for accessibility
-* Support for native HTML constraint validation with customizable UI, custom validation functions, realtime validation, and server-side validation errors
-* Support for mouse, touch, and keyboard interactions
-* Tab stop focus management
-* Keyboard support for opening the listbox using the arrow keys, including automatically focusing
-  the first or last item accordingly
-* Typeahead to allow selecting options by typing text, even without opening the listbox
-* Browser autofill integration via a hidden native `<select>` element
-* Mobile screen reader listbox dismissal support
-
-## Anatomy
-
-<Anatomy />
-
-A select consists of a label, a button which displays a selected value, and a listbox, displayed in a
-popup. Users can click, touch, or use the keyboard on the button to open the listbox popup. `useSelect`
-handles exposing the correct ARIA attributes for accessibility and handles the interactions for the
-select in its collapsed state. It should be combined with [useListBox](../ListBox/useListBox.html), which handles
-the implementation of the popup listbox.
-
-`useSelect` also supports optional description and error message elements, which can be used
-to provide more context about the field, and any validation messages. These are linked with the
-input via the `aria-describedby` attribute.
-
-`useSelect` returns props that you should spread onto the appropriate element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useSelect.return.base?.id ?? docs.exports.useSelect.return.id].properties} />
-</TypeContext.Provider>
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useSelectState} />
-hook from `@react-stately/select`. The state object should be passed as an option to `useSelect`
-
-If a select does not have a visible label, an `aria-label` or `aria-labelledby`
-prop must be passed instead to identify it to assistive technology.
-
-## State management
-
-`useSelect` requires knowledge of the options in the select in order to handle keyboard
-navigation and other interactions. It does this using the <TypeLink links={collectionsDocs.links} type={collectionsDocs.exports.Collection} />
-interface, which is a generic interface to access sequential unique keyed data. You can
-implement this interface yourself, e.g. by using a prop to pass a list of item objects,
-but <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useSelectState} /> from
-`@react-stately/select` implements a JSX based interface for building collections instead.
-See [Collection Components](v3:collections.html) for more information.
-
-In addition, <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useSelectState} />
-manages the state necessary for multiple selection and exposes
-a <TypeLink links={selectionDocs.links} type={selectionDocs.exports.SelectionManager} />,
-which makes use of the collection to provide an interface to update the selection state.
-It also holds state to track if the popup is open.
-For more information about selection, see [Selection](v3:selection.html).
-
-## Example
-
-This example uses a `<button>` element for the trigger, with a `<span>` inside to hold the value,
-and another for the dropdown arrow icon (hidden from screen readers with `aria-hidden`).
-A &lt;<TypeLink links={docs.links} type={docs.exports.HiddenSelect} />&gt; is used to render a hidden native
-`<select>`, which enables browser form autofill support.
-
-The same `Popover`, `ListBox`, and `Button` components created with [usePopover](../Popover/usePopover.html), [useListBox](../ListBox/useListBox.html),
-and [useButton](../Button/useButton.html) that you may already have in your component library or application should be reused. These can be shared with other
-components such as a `ComboBox` created with [useComboBox](../ComboBox/useComboBox.html) or a `Dialog` popover created with [useDialog](../Modal/useDialog.html).
-The code for these components is also included below in the collapsed sections.
-
-In addition, see [useListBox](../ListBox/useListBox.html) for examples of sections (option groups), and more complex
-options. For an example of the description and error message elements, see [useTextField](../TextField/useTextField.html).
-
-```tsx example export=true
-import {HiddenSelect, useSelect} from '@react-aria/select';
-import {Item} from '@react-stately/collections';
-import {useSelectState} from '@react-stately/select';
-
-// Reuse the ListBox, Popover, and Button from your component library. See below for details.
-import {ListBox, Popover, Button} from 'your-component-library';
-
-function Select(props) {
-  // Create state based on the incoming props
-  let state = useSelectState(props);
-
-  // Get props for child elements from useSelect
-  let ref = React.useRef(null);
-  let {
-    labelProps,
-    triggerProps,
-    valueProps,
-    menuProps,
-    hiddenSelectProps
-  } = useSelect(props, state, ref);
-
-  return (
-    <div style={{display: 'inline-block'}}>
-      <div {...labelProps}>{props.label}</div>
-      <HiddenSelect {...hiddenSelectProps} />
-      <Button
-        {...triggerProps}
-        buttonRef={ref}
-        style={{height: 30, fontSize: 14}}>
-        <span {...valueProps}>
-          {state.selectedItem
-            ? state.selectedItem.rendered
-            : 'Select an option'
-          }
-        </span>
-        <span
-          aria-hidden="true"
-          style={{paddingLeft: 5}}>
-          ▼
-        </span>
-      </Button>
-      {state.isOpen &&
-        <Popover state={state} triggerRef={ref} placement="bottom start">
-          <ListBox
-            {...menuProps}
-            state={state} />
-        </Popover>
-      }
-    </div>
-  );
-}
-
-<Select label="Favorite Color">
-  <Item>Red</Item>
-  <Item>Orange</Item>
-  <Item>Yellow</Item>
-  <Item>Green</Item>
-  <Item>Blue</Item>
-  <Item>Purple</Item>
-  <Item>Black</Item>
-  <Item>White</Item>
-  <Item>Lime</Item>
-  <Item>Fushsia</Item>
-</Select>
-```
-
-### Popover
-
-The `Popover` component is used to contain the popup listbox for the Select.
-It can be shared between many other components, including [ComboBox](../ComboBox/useComboBox.html),
-[Menu](../Menu/useMenu.html), and others.
-See [usePopover](../Popover/usePopover.html) for more examples of popovers.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import type {AriaPopoverProps} from 'react-aria';
-import type {OverlayTriggerState} from 'react-stately';
-import {usePopover, Overlay, DismissButton} from '@react-aria/overlays';
-
-interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
-  children: React.ReactNode,
-  state: OverlayTriggerState
-}
-
-function Popover({children, state, ...props}: PopoverProps) {
-  let popoverRef = React.useRef(null);
-  let {popoverProps, underlayProps} = usePopover({
-    ...props,
-    popoverRef
-  }, state);
-
-  return (
-    <Overlay>
-      <div {...underlayProps} style={{position: 'fixed', inset: 0}} />
-      <div
-        {...popoverProps}
-        ref={popoverRef}
-        style={{
-          ...popoverProps.style,
-          background: 'var(--page-background)',
-          border: '1px solid gray'
-        }}>
-        <DismissButton onDismiss={state.close} />
-        {children}
-        <DismissButton onDismiss={state.close} />
-      </div>
-    </Overlay>
-  );
-}
-```
-
-</details>
-
-### ListBox
-
-The `ListBox` and `Option` components are used to show the list of options.
-They can also be shared with other components like a [ComboBox](../ComboBox/useComboBox.html). See
-[useListBox](../ListBox/useListBox.html) for more examples, including sections and more complex items.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useListBox, useOption} from '@react-aria/listbox';
-
-function ListBox(props) {
-  let ref = React.useRef(null);
-  let {listBoxRef = ref, state} = props;
-  let {listBoxProps} = useListBox(props, state, listBoxRef);
-
-  return (
-    <ul
-      {...listBoxProps}
-      ref={listBoxRef}
-      style={{
-        margin: 0,
-        padding: 0,
-        listStyle: "none",
-        maxHeight: 150,
-        overflow: "auto",
-        minWidth: 100,
-        background: 'lightgray'
-      }}>
-      {[...state.collection].map(item => (
-        <Option
-          key={item.key}
-          item={item}
-          state={state} />
-      ))}
-    </ul>
-  );
-}
-
-function Option({item, state}) {
-  let ref = React.useRef(null);
-  let {optionProps, isSelected, isFocused, isDisabled} = useOption({key: item.key}, state, ref);
-
-  return (
-    <li
-      {...optionProps}
-      ref={ref}
-      style={{
-        background: isFocused ? 'gray' : 'transparent',
-        color: isDisabled ? 'gray' : isFocused ? 'white' : 'black',
-        padding: '2px 5px',
-        outline: 'none',
-        cursor: 'pointer',
-        display: 'flex',
-        justifyContent: 'space-between',
-        gap: '10px'
-      }}>
-      {item.rendered}
-      {isSelected ? <span>✓</span> : null}
-    </li>
-  );
-}
-```
-
-</details>
-
-### Button
-
-The `Button` component is used in the above example to toggle the listbox popup. It is built using the [useButton](../Button/useButton.html) hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useButton} from '@react-aria/button';
-
-function Button(props) {
-  let ref = props.buttonRef;
-  let {buttonProps} = useButton(props, ref);
-  return <button {...buttonProps} ref={ref} style={props.style}>{props.children}</button>;
-}
-```
-
-</details>
-
-## Styled examples
-
-<ExampleCard
-  url="https://codesandbox.io/s/hardcore-moon-xzc4r?file=/src/ComboBox.tsx"
-  preview={examplePreview}
-  title="Tailwind CSS"
-  description="An example of styling a Select with Tailwind." />
-
-<ExampleCard
-  url="https://codesandbox.io/s/sharp-sun-e3fgd?file=/src/Select.tsx"
-  preview={styledExamplePreview}
-  title="Styled Components"
-  description="A Select with complex item content built with Styled Components." />
-
-<ExampleCard
-  url="https://codesandbox.io/s/heuristic-margulis-uz3d4d?file=/src/Select.tsx"
-  preview={popupExamplePreview}
-  title="Popup positioning"
-  description="A Select with custom macOS-style popup positioning." />
-
-## Usage
-
-The following examples show how to use the Select component created in the above example.
-
-### Dynamic collections
-
-`Select` follows the [Collection Components API](v3:collections.html), accepting both static and dynamic collections.
-The examples above show static collections, which can be used when the full list of options is known ahead of time. Dynamic collections,
-as shown below, can be used when the options come from an external data source such as an API call, or update over time.
-
-As seen below, an iterable list of options is passed to the Select using the `items` prop. Each item accepts a `key` prop, which
-is passed to the `onSelectionChange` handler to identify the selected item. Alternatively, if the item objects contain an `id` property,
-as shown in the example below, then this is used automatically and a `key` prop is not required.
-
-```tsx example
-function Example() {
-  let options = [
-    {id: 1, name: 'Aerospace'},
-    {id: 2, name: 'Mechanical'},
-    {id: 3, name: 'Civil'},
-    {id: 4, name: 'Biomedical'},
-    {id: 5, name: 'Nuclear'},
-    {id: 6, name: 'Industrial'},
-    {id: 7, name: 'Chemical'},
-    {id: 8, name: 'Agricultural'},
-    {id: 9, name: 'Electrical'}
-  ];
-
-  return (
-    <>
-      <Select label="Pick an engineering major" items={options}>
-        {(item) => <Item>{item.name}</Item>}
-      </Select>
-    </>
-  );
-}
-```
-
-### Controlled selection
-
-Setting a selected option can be done by using the `defaultSelectedKey` or `selectedKey` prop. The selected key corresponds to the `key` of an item.
-When `Select` is used with a dynamic collection as described above, the key of each item is derived from the data.
-See the `react-stately` [Selection docs](v3:selection.html) for more details.
-
-```tsx example
-function Example() {
-  let options = [
-    {name: 'Koala'},
-    {name: 'Kangaroo'},
-    {name: 'Platypus'},
-    {name: 'Bald Eagle'},
-    {name: 'Bison'},
-    {name: 'Skunk'}
-  ];
-  let [animal, setAnimal] = React.useState("Bison");
-
-  return (
-    <Select
-      label="Pick an animal (controlled)"
-      items={options}
-      selectedKey={animal}
-      onSelectionChange={selected => setAnimal(selected)}>
-      {item => <Item key={item.name}>{item.name}</Item>}
-    </Select>
-  );
-}
-```
-
-### Asynchronous loading
-
-This example uses the [useAsyncList](../useAsyncList.html) hook to handle asynchronous loading
-of data from a server. You may additionally want to display a spinner to indicate the loading
-state to the user, or support features like infinite scroll to load more data.
-
-```tsx example
-import {useAsyncList} from '@react-stately/data';
-
-function AsyncLoadingExample() {
-  let list = useAsyncList({
-    async load({signal, filterText}) {
-      let res = await fetch(
-        `https://pokeapi.co/api/v2/pokemon`,
-        {signal}
-      );
-      let json = await res.json();
-
-      return {
-        items: json.results
-      };
-    }
-  });
-
-  return (
-    <Select label="Pick a Pokemon" items={list.items} selectionMode="single">
-      {(item) => <Item key={item.name}>{item.name}</Item>}
-    </Select>
-  );
-}
-```
-
-### Disabled
-
-A Select can be fully disabled using the `isDisabled` prop.
-
-```tsx example
-<Select label="Choose frequency" isDisabled>
-  <Item key="rarely">Rarely</Item>
-  <Item key="sometimes">Sometimes</Item>
-  <Item key="always">Always</Item>
-</Select>
-```
-
-### Disabled options
-
-`useSelect` supports marking items as disabled using the `disabledKeys` prop. Each key in this list
-corresponds with the `key` prop passed to the `Item` component, or automatically derived from the values passed
-to the `items` prop. See [Collections](v3:collections.html) for more details.
-
-Disabled items are not focusable, selectable, or keyboard navigable. The `isDisabled` property returned by
-`useOption` can be used to style the item appropriately.
-
-```tsx example
-<Select label="Favorite Animal" disabledKeys={['cat', 'kangaroo']}>
-  <Item key="red panda">Red Panda</Item>
-  <Item key="cat">Cat</Item>
-  <Item key="dog">Dog</Item>
-  <Item key="aardvark">Aardvark</Item>
-  <Item key="kangaroo">Kangaroo</Item>
-  <Item key="snake">Snake</Item>
-</Select>
-```
-
-### Controlled open state
-
-The open state of the select can be controlled via the `defaultOpen` and `isOpen` props
-
-```tsx example
-function Example() {
-  let [open, setOpen] = React.useState(false);
-
-  return (
-    <>
-      <p>Select is {open ? 'open' : 'closed'}</p>
-      <Select label="Choose frequency" isOpen={open} onOpenChange={setOpen}>
-        <Item key="rarely">Rarely</Item>
-        <Item key="sometimes">Sometimes</Item>
-        <Item key="always">Always</Item>
-      </Select>
-    </>
-  );
-}
-```
-
-### Links
-
-By default, interacting with an item in a Select triggers `onSelectionChange`. Alternatively, items may be links to another page or website. This can be achieved by passing the `href` prop to the `<Item>` component. Link items in a `Select` are not selectable. See the [links](../ListBox/useListBox.html#links) section in the `useListBox` docs for details on how to support this.
-
-## Internationalization
-
-`useSelect` and `useListBox` handle some aspects of internationalization automatically.
-For example, type to select is implemented with an
-[Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator)
-for internationalized string matching. You are responsible for localizing all labels and option
-content that is passed into the select.
-
-### RTL
-
-In right-to-left languages, the select should be mirrored. The arrow should be on the left,
-and the selected value should be on the right. In addition, the content of list options should
-flip. Ensure that your CSS accounts for this.
diff --git a/packages/react-aria/docs/separator/useSeparator.mdx b/packages/react-aria/docs/separator/useSeparator.mdx
deleted file mode 100644
index 65a737e40d9..00000000000
--- a/packages/react-aria/docs/separator/useSeparator.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/separator';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/separator/package.json';
-
----
-category: Content
-keywords: [vertical separator, horizontal separator, separator, hr, aria]
----
-
-# useSeparator
-
-<PageDescription>{docs.exports.useSeparator.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useSeparator']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/TR/wai-aria-1.2/#separator'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useSeparator} links={docs.links} />
-
-## Features
-
-Horizontal separators can be built with the HTML [&lt;hr&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)
-element. However, there is no HTML element for a vertical separator. `useSeparator` helps achieve
-accessible separators that can be styled as needed.
-
-* Support for horizontal and vertical orientation
-* Support for HTML `<hr>` element or a custom element type
-
-## Anatomy
-
-A separator consists of a single element that represents the divider.
-`useSeparator` returns props to be spread onto the element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useSeparator.return.id].properties} />
-</TypeContext.Provider>
-
-
-## Example
-
-This example shows how create both a horizontal and a vertical oriented separator.
-
-```tsx example
-import {useSeparator} from '@react-aria/separator';
-
-function Separator(props) {
-  let {separatorProps} = useSeparator(props);
-
-  return (
-    <div
-      {...separatorProps}
-      style={{
-        background: 'gray',
-        width: props.orientation === 'vertical' ? '1px' : '100%',
-        height: props.orientation === 'vertical' ? '100%' : '1px',
-        margin: props.orientation === 'vertical' ? '0 5px' : '5px 0'
-      }} />
-  );
-}
-
-<>
-  <div style={{display: 'flex', flexDirection: 'column'}}>
-    Content above
-    <Separator />
-    Content below
-  </div>
-
-  <div style={{display: 'flex', flexDirection: 'row', marginTop: 20, height: 40, alignItems: 'center'}}>
-    Content left
-    <Separator orientation="vertical" />
-    Content right
-  </div>
-</>
-```
diff --git a/packages/react-aria/docs/slider/useSlider.mdx b/packages/react-aria/docs/slider/useSlider.mdx
deleted file mode 100644
index f411219487d..00000000000
--- a/packages/react-aria/docs/slider/useSlider.mdx
+++ /dev/null
@@ -1,450 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/slider';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/slider/package.json';
-import statelyDocs from 'docs:@react-stately/slider';
-import i18nDocs from 'docs:@react-aria/i18n';
-import Anatomy from './anatomy.svg';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-
----
-category: Forms
-keywords: [slider, range, aria]
-after_version: 3.0.0-alpha.3
----
-
-# useSlider
-
-<PageDescription>{docs.exports.useSlider.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useSlider', 'useSliderThumb']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/slider/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useSlider} links={docs.links} />
-<FunctionAPI function={docs.exports.useSliderThumb} links={docs.links} />
-
-## Features
-
-The [&lt;input type="range"&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)
-HTML element can be used to build a slider, however it is
-very difficult to style cross browser. `useSlider` and `useSliderThumb` help achieve accessible
-sliders that can be styled as needed.
-
-* Support for one or multiple thumbs
-* Support for mouse, touch, and keyboard via the [useMove](../useMove) hook
-* Multi-touch support for dragging multiple thumbs or multiple sliders at once
-* Pressing on the track moves the nearest thumb to that position
-* Supports using the arrow keys, as well as page up/down, home, and end keys
-* Support for both horizontal and vertical orientations
-* Support for custom min, max, and step values with handling for rounding errors
-* Support for disabling the whole slider or individual thumbs
-* Prevents text selection while dragging
-* Exposed to assistive technology as a `group` of `slider` elements via ARIA
-* Slider thumbs use hidden native input elements to support touch screen readers
-* Support for labeling both the slider as a whole and individual thumbs
-* Support for displaying the current thumb values using an `<output>` element
-* Internationalized number formatting as a percentage or value
-* Support for mirroring in RTL locales
-
-## Anatomy
-
-<Anatomy />
-
-Sliders consist of a track element showing the range of available values,
-one or more thumbs showing the current values, an
-optional [&lt;output&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output)
-element displaying the current values textually, and a label.
-The thumbs can be dragged to allow a user to change their value. In addition, the
-track can be clicked to move the nearest thumb to that position.
-
-### useSlider hook
-`useSlider` returns several sets of props and you should spread each one onto the appropriate element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useSlider.return.id].properties} />
-</TypeContext.Provider>
-
-If there is no visual label, an `aria-label` or `aria-labelledby` prop must be passed instead
-to identify the element to screen readers.
-
-### useSliderThumb hook
-
-`useSliderThumb` returns props that you should spread onto the appropriate elements, along with states for styling:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useSliderThumb.return.id].properties} />
-</TypeContext.Provider>
-
-If there is no visual label, an `aria-label` or `aria-labelledby` prop must be passed instead
-to identify each thumb to screen readers.
-
-Slider state is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useSliderState} /> hook.
-
-## Examples
-
-### Single thumb
-
-This example shows how to build a simple horizontal slider with a single thumb. In addition, it includes a label
-which can be clicked to focus the slider thumb, and an `<output>` element to display the current slider value as
-text. This is formatted using a locale aware number formatter provided by the [useNumberFormatter](../useNumberFormatter) hook.
-
-The `<input>` element inside the thumb is used to represent the slider to assistive technology, and is hidden from view
-using the [VisuallyHidden](../VisuallyHidden) component. The thumb also uses the [useFocusRing](../useFocusRing) hook to
-display using a different color when it is keyboard focused (try tabbing to it).
-
-```tsx example export=true
-import {useSlider, useSliderThumb} from '@react-aria/slider';
-import {useSliderState} from '@react-stately/slider';
-import {useFocusRing} from '@react-aria/focus';
-import {VisuallyHidden} from '@react-aria/visually-hidden';
-import {mergeProps} from '@react-aria/utils';
-import {useNumberFormatter} from '@react-aria/i18n';
-
-function Slider(props) {
-  let trackRef = React.useRef(null);
-  let numberFormatter = useNumberFormatter(props.formatOptions);
-  let state = useSliderState({...props, numberFormatter});
-  let {
-    groupProps,
-    trackProps,
-    labelProps,
-    outputProps
-  } = useSlider(props, state, trackRef);
-
-  return (
-    <div {...groupProps} className={`slider ${state.orientation}`}>
-      {/* Create a container for the label and output element. */}
-      {props.label &&
-        <div className="label-container">
-          <label {...labelProps}>{props.label}</label>
-          <output {...outputProps}>
-            {state.getThumbValueLabel(0)}
-          </output>
-        </div>
-      }
-      {/* The track element holds the visible track line and the thumb. */}
-      <div {...trackProps} ref={trackRef} className={`track ${state.isDisabled ? 'disabled' : ''}`}>
-        <Thumb index={0} state={state} trackRef={trackRef} name={props.name} />
-      </div>
-    </div>
-  );
-}
-
-function Thumb(props) {
-  let {state, trackRef, index, name} = props;
-  let inputRef = React.useRef(null);
-  let {thumbProps, inputProps, isDragging} = useSliderThumb({
-    index,
-    trackRef,
-    inputRef,
-    name
-  }, state);
-
-  let {focusProps, isFocusVisible} = useFocusRing();
-  return (
-    <div
-      {...thumbProps}
-      className={`thumb ${isFocusVisible ? 'focus' : ''} ${isDragging ? 'dragging' : ''}`}>
-      <VisuallyHidden>
-        <input ref={inputRef} {...mergeProps(inputProps, focusProps)} />
-      </VisuallyHidden>
-    </div>
-  );
-}
-
-<Slider label="Opacity" />
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.slider {
-  display: flex;
-}
-
-.slider.horizontal {
-  flex-direction: column;
-  width: 300px;
-}
-
-.slider.vertical {
-  height: 150px;
-}
-
-.label-container {
-  display: flex;
-  justify-content: space-between;
-}
-
-.slider.horizontal .track {
-  height: 30px;
-  width: 100%;
-}
-
-/* track line */
-.track:before {
-  content: attr(x);
-  display: block;
-  position: absolute;
-  background: gray;
-}
-
-.slider.horizontal .track:before {
-  height: 3px;
-  width: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.slider.vertical .track {
-  width: 30px;
-  height: 100%;
-}
-
-.slider.vertical .track:before {
-  width: 3px;
-  height: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.thumb {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: gray;
-}
-
-.thumb.dragging {
-  background: dimgray;
-}
-
-.thumb.focus {
-  background: orange;
-}
-
-.slider.horizontal .thumb {
-  top: 50%;
-}
-
-.slider.vertical .thumb {
-  left: 50%;
-}
-
-.track.disabled {
-  opacity: 0.4;
-}
-```
-
-</details>
-
-### Multi thumb
-
-This example shows how to build a slider with multiple thumbs. The thumb component is the same one shown in the previous
-example. The main difference in this example is that there are two `<Thumb>` elements rendered with different `index` props.
-In addition, the `<output>` element uses `state.getThumbValueLabel` for each thumb to display the selected range.
-
-```tsx example export=true
-function RangeSlider(props) {
-  let trackRef = React.useRef(null);
-
-  let numberFormatter = useNumberFormatter(props.formatOptions);
-  let state = useSliderState({...props, numberFormatter});
-  let {
-    groupProps,
-    trackProps,
-    labelProps,
-    outputProps
-  } = useSlider(props, state, trackRef);
-
-  return (
-    <div {...groupProps} className={`slider ${state.orientation}`}>
-      {props.label &&
-        <div className="label-container">
-          <label {...labelProps}>{props.label}</label>
-          <output {...outputProps}>
-            {`${state.getThumbValueLabel(0)} - ${state.getThumbValueLabel(1)}`}
-          </output>
-        </div>
-      }
-      <div {...trackProps} ref={trackRef} className={`track ${state.isDisabled ? 'disabled' : ''}`}>
-        <Thumb index={0} state={state} trackRef={trackRef} />
-        <Thumb index={1} state={state} trackRef={trackRef} />
-      </div>
-    </div>
-  );
-}
-
-<RangeSlider
-  label="Price Range"
-  formatOptions={{style: 'currency', currency: 'USD'}}
-  maxValue={500}
-  defaultValue={[100, 350]}
-  step={10} />
-```
-
-## Usage
-
-The following examples show how to use the `Slider` and `RangeSlider` components created in the above examples.
-
-### Vertical orientation
-
-Sliders are horizontally oriented by default. The `orientation` prop can be set to `"vertical"` to create a vertical slider.
-This example also uses `aria-label` rather than `label` to create a slider with no visible label.
-
-```tsx example
-<Slider
-  orientation="vertical"
-  aria-label="Opacity"
-  maxValue={1}
-  step={0.01} />
-```
-
-### Controlled value
-
-The `value` prop paired with the `onChange` event can be used to make a slider controlled. The value must fall between the Slider's minimum and maximum values, which default to 0 and 100 respectively. The `onChange` event receives the new slider value as a parameter, which can be used to update state.
-
-```tsx example
-function Example() {
-  let [value, setValue] = React.useState(25);
-  return (
-    <>
-      <Slider
-        label="Cookies to buy"
-        value={value}
-        onChange={setValue} />
-      <p>Current value: {value}</p>
-    </>
-  );
-}
-```
-
-Multi thumb sliders specify their values as an array rather than a single number.
-
-```tsx example
-function Example() {
-  let [value, setValue] = React.useState([25, 75]);
-  return (
-    <>
-      <RangeSlider
-        label="Range"
-        value={value}
-        onChange={setValue} />
-      <p>Current value: {value.join(' – ')}</p>
-    </>
-  );
-}
-```
-
-### onChangeEnd
-
-The `onChangeEnd` prop can be used to handle when a user stops dragging a slider, whereas the `onChange` prop is called as the user drags.
-
-```tsx example
-function Example() {
-  let [value, setValue] = React.useState(25);
-  return (
-    <>
-      <Slider
-        label="Cookies to buy"
-        defaultValue={value}
-        onChangeEnd={setValue} />
-      <p>Current value: {value}</p>
-    </>
-  );
-}
-```
-
-### Custom value scale
-
-By default, slider values are percentages between 0 and 100. A different scale can be used by setting the `minValue` and `maxValue` props.
-
-```tsx example
-<Slider
-  label="Cookies to buy"
-  minValue={50}
-  maxValue={150}
-  defaultValue={100} />
-```
-
-### Value formatting
-
-Values are formatted as a percentage by default, but this can be modified by using the `formatOptions` prop to specify a different format.
-`formatOptions` is compatible with the option parameter of [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat) and is applied based on the current locale.
-
-```tsx example
-<Slider
-  label="Currency"
-  formatOptions={{style: 'currency', currency: 'JPY'}}
-  defaultValue={60} />
-```
-
-### Step values
-
-The `step` prop can be used to snap the value to certain increments. The steps are calculated
-starting from the minimum. For example, if `minValue={2}`, and `step={3}`, the valid step values would be 2, 5, 8, 11, etc.
-This example allows increments of 5 between 0 and 100.
-
-```tsx example
-<Slider
-  label="Amount"
-  formatOptions={{style: 'currency', currency: 'USD'}}
-  minValue={0}
-  maxValue={100}
-  step={5} />
-```
-
-### Disabled
-
-A slider can be disabled using the `isDisabled` prop.
-
-```tsx example
-<Slider
-  label="Cookies to share"
-  defaultValue={25}
-  isDisabled />
-```
-### HTML forms
-
-useSliderThumb supports the `name` prop for integration with HTML forms.
-
-```tsx example
-<Slider
-  label="Opacity"
-  defaultValue={50}
-  name="opacity" />
-```
-
-## Internationalization
-
-### Value formatting
-
-Formatting the value that should be displayed in the value label or `aria-valuetext`
-is handled by <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useSliderState} />.
-The formatting can be controlled using the `formatOptions` prop.
-If you want to change locales, the <TypeLink links={i18nDocs.links} type={i18nDocs.exports.I18nProvider} />
-must be somewhere in the hierarchy above the Slider.
-This will tell the formatter what locale to use.
-
-### RTL
-
-In right-to-left languages, the slider should be mirrored. The label is right-aligned,
-the value is left-aligned. Ensure that your CSS accounts for this.
diff --git a/packages/react-aria/docs/switch/useSwitch.mdx b/packages/react-aria/docs/switch/useSwitch.mdx
deleted file mode 100644
index c7769e27283..00000000000
--- a/packages/react-aria/docs/switch/useSwitch.mdx
+++ /dev/null
@@ -1,204 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/switch';
-import hiddenDocs from 'docs:@react-aria/visually-hidden';
-import focusDocs from 'docs:@react-aria/focus';
-import statelyDocs from 'docs:@react-stately/toggle';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import {Keyboard} from '@react-spectrum/text';
-import packageData from '@react-aria/switch/package.json';
-import Anatomy from './anatomy.svg';
-
----
-category: Forms
-keywords: [switch, input, checkbox, aria]
----
-
-# useSwitch
-
-<PageDescription>{docs.exports.useSwitch.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useSwitch']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/switch/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useSwitch} links={docs.links} />
-
-## Features
-
-There is no native HTML element with switch styling. `<input type="checkbox">`
-is the closest semantically, but isn't styled or exposed to assistive technology
-as a switch. `useSwitch` helps achieve accessible switches that can be styled as needed.
-
-* Built with a native HTML `<input>` element, which can be optionally visually
-  hidden to allow custom styling
-* Full support for browser features like form autofill
-* Keyboard focus management and cross browser normalization
-* Labeling support for screen readers
-* Exposed as a switch to assistive technology via ARIA
-
-## Anatomy
-
-<Anatomy />
-
-A switch consists of a visual selection indicator and a label. Users may click or touch a switch
-to toggle the selection state, or use the <Keyboard>Tab</Keyboard> key to navigate to it and the <Keyboard>Space</Keyboard> key to toggle it.
-
-`useSwitch` returns props to be spread onto its input element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useSwitch.return.id].properties} />
-</TypeContext.Provider>
-
-Selection state is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useToggleState} />
-hook in `@react-stately/toggle`. The state object should be passed as an option to `useSwitch`.
-
-In most cases, switches should have a visual label. If the switch does not have a visible label,
-an `aria-label` or `aria-labelledby` prop must be passed instead to identify the element to assistive
-technology.
-
-## Example
-
-This example uses SVG to build the switch, with a visually hidden native input to represent
-the switch for accessibility. This is possible using
-the &lt;<TypeLink links={hiddenDocs.links} type={hiddenDocs.exports.VisuallyHidden} />&gt;
-utility component from `@react-aria/visually-hidden`. It is still in the DOM and accessible to assistive technology,
-but invisible. The SVG element is the visual representation, and is hidden from screen readers
-with `aria-hidden`.
-
-For keyboard accessibility, a focus ring is important to indicate which element has keyboard focus.
-This is implemented with the <TypeLink links={focusDocs.links} type={focusDocs.exports.useFocusRing} />
-hook from `@react-aria/focus`. When `isFocusVisible` is true, an extra SVG element is rendered to
-indicate focus. The focus ring is only visible when the user is interacting with a keyboard,
-not with a mouse or touch.
-
-```tsx example export=true
-import {useSwitch} from '@react-aria/switch';
-import {VisuallyHidden} from '@react-aria/visually-hidden';
-import {useToggleState} from '@react-stately/toggle';
-import {useFocusRing} from '@react-aria/focus';
-
-function Switch(props) {
-  let state = useToggleState(props);
-  let ref = React.useRef(null);
-  let {inputProps} = useSwitch(props, state, ref);
-  let {isFocusVisible, focusProps} = useFocusRing();
-
-  return (
-    <label style={{display: 'flex', alignItems: 'center', opacity: props.isDisabled ? 0.4 : 1}}>
-      <VisuallyHidden>
-        <input {...inputProps} {...focusProps} ref={ref} />
-      </VisuallyHidden>
-      <svg
-        width={40}
-        height={24}
-        aria-hidden="true"
-        style={{marginRight: 4}}>
-        <rect
-          x={4}
-          y={4}
-          width={32}
-          height={16}
-          rx={8}
-          fill={state.isSelected ? 'orange' : 'gray'} />
-        <circle
-          cx={state.isSelected ? 28 : 12}
-          cy={12}
-          r={5}
-          fill="white" />
-        {isFocusVisible &&
-          <rect
-            x={1}
-            y={1}
-            width={38}
-            height={22}
-            rx={11}
-            fill="none"
-            stroke="orange"
-            strokeWidth={2} />
-        }
-      </svg>
-      {props.children}
-    </label>
-  );
-}
-
-<Switch>Low power mode</Switch>
-```
-
-## Usage
-
-The following examples show how to use the `Switch` component created in the above example.
-
-### Default value
-
-Switches are not selected by default. The `defaultSelected` prop can be used to set the default state.
-
-```tsx example
-<Switch defaultSelected>Wi-Fi</Switch>
-```
-
-### Controlled value
-
-The `isSelected` prop can be used to make the selected state controlled. The `onChange` event is fired when the user presses the switch, and receives the new value.
-
-```tsx example
-function Example() {
-  let [selected, setSelected] = React.useState(false);
-
-  return (
-    <>
-      <Switch onChange={setSelected}>Low power mode</Switch>
-      <p>{selected ? 'Low' : 'High'} power mode active.</p>
-    </>
-  );
-}
-```
-
-### Disabled
-
-Switches can be disabled using the `isDisabled` prop.
-
-```tsx example
-<Switch isDisabled>Airplane Mode</Switch>
-```
-
-### Read only
-
-The `isReadOnly` prop makes the selection immutable. Unlike `isDisabled`, the Switch remains focusable.
-See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.
-
-```tsx example
-<Switch isSelected isReadOnly>Bluetooth</Switch>
-```
-
-
-### HTML forms
-
-Switch supports the `name` and `value` props for integration with HTML forms.
-
-```tsx example
-<Switch name="power" value="low">Low power mode</Switch>
-```
-
-## Internationalization
-
-### RTL
-
-In right-to-left languages, switches should be mirrored. The switch should be placed on the right
-side of the label. Ensure that your CSS accounts for this.
diff --git a/packages/react-aria/docs/table/Table-tailwind.png b/packages/react-aria/docs/table/Table-tailwind.png
deleted file mode 100644
index 42359dadeb4..00000000000
Binary files a/packages/react-aria/docs/table/Table-tailwind.png and /dev/null differ
diff --git a/packages/react-aria/docs/table/TableAnatomy.svg b/packages/react-aria/docs/table/TableAnatomy.svg
deleted file mode 100644
index cc85d3eb63f..00000000000
--- a/packages/react-aria/docs/table/TableAnatomy.svg
+++ /dev/null
@@ -1,165 +0,0 @@
-<svg style="max-height: 293px; background: var(--anatomy-gray-100); padding: 32px; margin-bottom: 16px; width: calc(100% - 64px); border-radius: var(--anatomy-radius);" viewBox="0 0 435.862 293">
-  <title>Table anatomy diagram</title>
-  <desc>Shows a table component with labels pointing to its parts, including the row, column, column header, and cell elements.</desc>
-  <g transform="translate(-272.277 -86)">
-    <g transform="translate(27.996 459)">
-      <rect width="20" height="20" transform="translate(392 -340)" fill="red" opacity="0" /><text transform="translate(402 -360)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic">
-        <tspan x="-19.858" y="0">Column</tspan>
-        <tspan x="-17.576" y="15">header</tspan>
-      </text>
-      <path d="M-8701-353.5a2.5,2.5,0,0,1,2-2.45V-374h1v18.05a2.5,2.5,0,0,1,2,2.45,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-8701-353.5Z" transform="translate(9100.5 34)" fill="var(--anatomy-gray-500)" />
-    </g><text transform="translate(606.996 150)" fill="var(--anatomy-gray-600)" font-size="11" font-family="AdobeClean-Medium, Adobe Clean" font-weight="500" letter-spacing="0.06em">
-      <tspan x="-21.791" y="0">SIZE</tspan>
-    </text>
-    <g transform="translate(342 161)" fill="var(--anatomy-gray-50)">
-      <path d="M 296 188.5 L 4 188.5 C 2.070076942443848 188.5 0.5 186.9299163818359 0.5 185 L 0.5 4 C 0.5 2.070076942443848 2.070076942443848 0.5 4 0.5 L 296 0.5 C 297.929931640625 0.5 299.5 2.070076942443848 299.5 4 L 299.5 185 C 299.5 186.9299163818359 297.929931640625 188.5 296 188.5 Z" stroke="none" />
-      <path d="M 4 1 C 2.345794677734375 1 1 2.345809936523438 1 4 L 1 185 C 1 186.6541900634766 2.345794677734375 188 4 188 L 296 188 C 297.6542053222656 188 299 186.6541900634766 299 185 L 299 4 C 299 2.345809936523438 297.6542053222656 1 296 1 L 4 1 M 4 0 L 296 0 C 298.2091064453125 0 300 1.790847778320312 300 4 L 300 185 C 300 187.2091522216797 298.2091064453125 189 296 189 L 4 189 C 1.79083251953125 189 0 187.2091522216797 0 185 L 0 4 C 0 1.790847778320312 1.79083251953125 0 4 0 Z" stroke="none" fill="var(--anatomy-gray-300)" />
-    </g><text transform="translate(623 189)" fill="var(--anatomy-gray-800)" font-size="14" font-family="var(--anatomy-font)">
-      <tspan x="-37.1" y="0">214 KB</tspan>
-    </text>
-    <rect width="298" height="1" transform="translate(343 208)" fill="var(--anatomy-gray-300)" />
-    <rect width="298" height="1" transform="translate(343 255)" fill="var(--anatomy-gray-300)" />
-    <rect width="298" height="1" transform="translate(343 302)" fill="var(--anatomy-gray-300)" /><text transform="translate(623 236)" fill="var(--anatomy-gray-800)" font-size="14" font-family="var(--anatomy-font)">
-      <tspan x="-37.324" y="0">120 KB</tspan>
-    </text><text transform="translate(623 283)" fill="var(--anatomy-gray-800)" font-size="14" font-family="var(--anatomy-font)">
-      <tspan x="-37.156" y="0">139 KB</tspan>
-    </text><text transform="translate(623 330)" fill="var(--anatomy-gray-800)" font-size="14" font-family="var(--anatomy-font)">
-      <tspan x="-32.34" y="0">24 KB</tspan>
-    </text><text transform="translate(395 190)" fill="var(--anatomy-gray-800)" font-size="14" font-family="var(--anatomy-font)">
-      <tspan x="0" y="0">Proposal</tspan>
-    </text><text transform="translate(395 237)" fill="var(--anatomy-gray-800)" font-size="14" font-family="var(--anatomy-font)">
-      <tspan x="0" y="0">Budget</tspan>
-    </text><text transform="translate(395 331)" fill="var(--anatomy-gray-800)" font-size="14" font-family="var(--anatomy-font)">
-      <tspan x="0" y="0">Welcome</tspan>
-    </text><text transform="translate(395 284)" fill="var(--anatomy-gray-800)" font-size="14" font-family="var(--anatomy-font)">
-      <tspan x="0" y="0">Onboarding</tspan>
-    </text><text transform="translate(392.996 150)" fill="var(--anatomy-gray-600)" font-size="11" font-family="AdobeClean-Medium, Adobe Clean" font-weight="500" letter-spacing="0.06em">
-      <tspan x="0" y="0">FILE NAME</tspan>
-    </text>
-    <rect width="20" height="21" transform="translate(554 341)" fill="red" opacity="0" />
-    <rect width="20" height="21" transform="translate(620 341)" fill="red" opacity="0" /><text transform="translate(463 376)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic">
-      <tspan x="-9.276" y="0">Cell</tspan>
-    </text>
-    <path d="M-8599-588.5V-608.55a2.5,2.5,0,0,1-2-2.45,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-588.5Z" transform="translate(9062.5 951.5)" fill="var(--anatomy-gray-500)" />
-    <path d="M9,7a1,1,0,0,0-1.71-.71L6,7.59V2A1,1,0,1,0,4,2V7.59L2.71,6.29A1,1,0,0,0,1.29,7.71l3,3a1,1,0,0,0,1.41,0l3-3A1,1,0,0,0,9,7Z" transform="translate(611 140)" fill="var(--anatomy-gray-600)" />
-    <g transform="translate(359 169)">
-      <g fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
-        <rect width="14" height="32" stroke="none" />
-        <rect x="0.5" y="0.5" width="13" height="31" fill="none" />
-      </g>
-      <g transform="translate(0 9)" fill="var(--anatomy-gray-75)" stroke="var(--anatomy-gray-600)" stroke-width="2">
-        <rect width="14" height="14" rx="2" stroke="none" />
-        <rect x="1" y="1" width="12" height="12" rx="1" fill="none" />
-      </g>
-    </g>
-    <g transform="translate(359 263)">
-      <g fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
-        <rect width="14" height="32" stroke="none" />
-        <rect x="0.5" y="0.5" width="13" height="31" fill="none" />
-      </g>
-      <g transform="translate(0 9)" fill="var(--anatomy-gray-75)" stroke="var(--anatomy-gray-600)" stroke-width="2">
-        <rect width="14" height="14" rx="2" stroke="none" />
-        <rect x="1" y="1" width="12" height="12" rx="1" fill="none" />
-      </g>
-    </g>
-    <g transform="translate(359 216)">
-      <g fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
-        <rect width="14" height="32" stroke="none" />
-        <rect x="0.5" y="0.5" width="13" height="31" fill="none" />
-      </g>
-      <g transform="translate(0 9)" fill="var(--anatomy-gray-75)" stroke="var(--anatomy-gray-600)" stroke-width="2">
-        <rect width="14" height="14" rx="2" stroke="none" />
-        <rect x="1" y="1" width="12" height="12" rx="1" fill="none" />
-      </g>
-    </g>
-    <g transform="translate(359 310)">
-      <g fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
-        <rect width="14" height="32" stroke="none" />
-        <rect x="0.5" y="0.5" width="13" height="31" fill="none" />
-      </g>
-      <g transform="translate(0 9)" fill="var(--anatomy-gray-75)" stroke="var(--anatomy-gray-600)" stroke-width="2">
-        <rect width="14" height="14" rx="2" stroke="none" />
-        <rect x="1" y="1" width="12" height="12" rx="1" fill="none" />
-      </g>
-    </g>
-    <g transform="translate(356.996 130)">
-      <g fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
-        <rect width="14" height="32" stroke="none" />
-        <rect x="0.5" y="0.5" width="13" height="31" fill="none" />
-      </g>
-      <g transform="translate(0 9)" fill="var(--anatomy-gray-75)" stroke="var(--anatomy-gray-600)" stroke-width="2">
-        <rect width="14" height="14" rx="2" stroke="none" />
-        <rect x="1" y="1" width="12" height="12" rx="1" fill="none" />
-      </g>
-    </g>
-    <g transform="translate(-38.004 454)"><text transform="translate(402 -355)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic">
-        <tspan x="-22.354" y="0">Select all</tspan>
-        <tspan x="-23.433" y="15">checkbox</tspan>
-      </text>
-      <rect width="20" height="20" transform="translate(392 -335)" fill="red" opacity="0" />
-      <path d="M-8556-348.5a2.5,2.5,0,0,1,2-2.45V-369h1v18.051a2.5,2.5,0,0,1,2,2.449,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-8556-348.5Z" transform="translate(8955.5 34)" fill="var(--anatomy-gray-500)" />
-    </g>
-    <g transform="translate(-85.639 624)"><text transform="translate(418 -350.5)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic">
-        <tspan x="-45.305" y="0">Selection</tspan>
-        <tspan x="-46.865" y="16">checkbox</tspan>
-      </text>
-      <path d="M-8599-588.5V-608.55a2.5,2.5,0,0,1-2-2.45,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-588.5Z" transform="translate(-165 8253.5) rotate(90)" fill="var(--anatomy-gray-500)" />
-    </g><text transform="translate(677.139 252.812)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic">
-      <tspan x="0" y="0">Row</tspan>
-      <tspan x="0" y="16">group</tspan>
-    </text>
-    <rect width="8" height="1" transform="translate(661.14 255.311)" fill="var(--anatomy-gray-500)" />
-    <g transform="translate(652.14 162)">
-      <rect width="8" height="1" fill="var(--anatomy-gray-500)" />
-      <rect width="1" height="187.5" transform="translate(8)" fill="var(--anatomy-gray-500)" />
-      <rect width="8" height="1" transform="translate(0 186.5)" fill="var(--anatomy-gray-500)" />
-    </g><text transform="translate(309.277 141.349)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic">
-      <tspan x="-36.66" y="0">Header</tspan>
-      <tspan x="-19.539" y="16">row</tspan>
-    </text>
-    <rect width="8" height="1" transform="translate(316.136 144.349)" fill="var(--anatomy-gray-500)" />
-    <g transform="translate(324.136 135.001)">
-      <rect width="8" height="1" transform="translate(1)" fill="var(--anatomy-gray-500)" />
-      <rect width="1" height="21.677" fill="var(--anatomy-gray-500)" />
-      <rect width="8" height="1" transform="translate(1 20.677)" fill="var(--anatomy-gray-500)" />
-    </g><text transform="translate(308 190)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic">
-      <tspan x="-22.204" y="0">Row</tspan>
-    </text>
-    <rect width="8" height="1" transform="translate(316 184.641)" fill="var(--anatomy-gray-500)" />
-    <g transform="translate(324 162)">
-      <rect width="8" height="1" transform="translate(1)" fill="var(--anatomy-gray-500)" />
-      <rect width="1" height="46" fill="var(--anatomy-gray-500)" />
-      <rect width="8" height="1" transform="translate(1 45)" fill="var(--anatomy-gray-500)" />
-    </g>
-    <g transform="translate(359 169)">
-      <g fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
-        <rect width="14" height="32" stroke="none" />
-        <rect x="0.5" y="0.5" width="13" height="31" fill="none" />
-      </g>
-      <g transform="translate(0 9)" fill="var(--anatomy-gray-75)" stroke="var(--anatomy-gray-600)" stroke-width="2">
-        <rect width="14" height="14" rx="2" stroke="none" />
-        <rect x="1" y="1" width="12" height="12" rx="1" fill="none" />
-      </g>
-    </g>
-    <g transform="translate(359 169)">
-      <g fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
-        <rect width="14" height="32" stroke="none" />
-        <rect x="0.5" y="0.5" width="13" height="31" fill="none" />
-      </g>
-      <g transform="translate(0 9)" fill="var(--anatomy-gray-75)" stroke="var(--anatomy-gray-600)" stroke-width="2">
-        <rect width="14" height="14" rx="2" stroke="none" />
-        <rect x="1" y="1" width="12" height="12" rx="1" fill="none" />
-      </g>
-    </g><text transform="translate(676 144)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-style="italic">
-      <tspan x="0" y="0">Row</tspan>
-      <tspan x="0" y="16">group</tspan>
-    </text>
-    <rect width="8" height="1" transform="translate(661.14 145.51)" fill="var(--anatomy-gray-500)" />
-    <g transform="translate(652.14 136.162)">
-      <rect width="8" height="1" fill="var(--anatomy-gray-500)" />
-      <rect width="1" height="21.677" transform="translate(8)" fill="var(--anatomy-gray-500)" />
-      <rect width="8" height="1" transform="translate(0 20.677)" fill="var(--anatomy-gray-500)" />
-    </g>
-    <rect width="1" height="189" transform="translate(564 161)" fill="var(--anatomy-gray-300)" />
-  </g>
-</svg>
diff --git a/packages/react-aria/docs/table/useTable.mdx b/packages/react-aria/docs/table/useTable.mdx
deleted file mode 100644
index 8d89573a2be..00000000000
--- a/packages/react-aria/docs/table/useTable.mdx
+++ /dev/null
@@ -1,1195 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/table';
-import collectionsDocs from 'docs:@react-types/shared/src/collections.d.ts';
-import selectionDocs from 'docs:@react-stately/selection';
-import statelyDocs from 'docs:@react-stately/table';
-import focusDocs from 'docs:@react-aria/focus';
-import checkboxDocs from 'docs:@react-aria/checkbox';
-import utilsDocs from 'docs:@react-aria/utils';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import {Keyboard} from '@react-spectrum/text';
-import packageData from '@react-aria/table/package.json';
-import Anatomy from './TableAnatomy.svg';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
-import tailwindExample from 'url:./Table-tailwind.png';
-
----
-category: Collections
-keywords: [table, aria, grid]
----
-
-# useTable
-
-<PageDescription>{docs.exports.useTable.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useTable', 'useTableCell', 'useTableColumnHeader', 'useTableRow', 'useTableHeaderRow', 'useTableRowGroup', 'useTableSelectAllCheckbox', 'useTableSelectionCheckbox', 'useTableColumnResize']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/grid/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useTable} links={docs.links} />
-<FunctionAPI function={docs.exports.useTableRowGroup} links={docs.links} />
-<FunctionAPI function={docs.exports.useTableHeaderRow} links={docs.links} />
-<FunctionAPI function={docs.exports.useTableColumnHeader} links={docs.links} />
-<FunctionAPI function={docs.exports.useTableRow} links={docs.links} />
-<FunctionAPI function={docs.exports.useTableCell} links={docs.links} />
-<FunctionAPI function={docs.exports.useTableSelectionCheckbox} links={docs.links} />
-<FunctionAPI function={docs.exports.useTableSelectAllCheckbox} links={docs.links} />
-<FunctionAPI function={docs.exports.useTableColumnResize} links={docs.links} />
-
-## Features
-
-A table can be built using the [&lt;table&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table), [&lt;tr&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr),
-[&lt;td&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td), and other table specific HTML elements, but is very limited in functionality especially when it comes to user interactions.
-HTML tables are meant for static content, rather than tables with rich interactions like focusable elements within cells, keyboard navigation, row selection, sorting, etc.
-`useTable` helps achieve accessible and interactive table components that can be styled as needed.
-
-* Exposed to assistive technology as a `grid` using ARIA
-* Keyboard navigation between columns, rows, cells, and in-cell focusable elements via the arrow keys
-* Single, multiple, or no row selection via mouse, touch, or keyboard interactions
-* Support for disabled rows, which cannot be selected
-* Optional support for checkboxes in each row for selection, as well as in the header to select all rows
-* Support for both `toggle` and `replace` selection behaviors
-* Support for row actions via double click, <Keyboard>Enter</Keyboard> key, or tapping
-* Long press to enter selection mode on touch when there is both selection and row actions
-* Column sorting support
-* Async loading, infinite scrolling, filtering, and sorting support
-* Support for column groups via nested columns
-* Typeahead to allow focusing rows by typing text
-* Automatic scrolling support during keyboard navigation
-* Labeling support for accessibility
-* Support for marking columns as [row headers](https://www.w3.org/TR/wai-aria-1.1/#rowheader), which will be read when navigating the rows with a screen reader
-* Ensures that selections are announced using an ARIA live region
-* Support for using HTML table elements, or custom element types (e.g. `<div>`) for layout flexibility
-* Support for use with virtualized lists
-* Support for resizable columns
-
-## Anatomy
-
-<Anatomy />
-
-A table consists of a container element, with columns and rows of cells containing data inside. The cells within a table may contain focusable elements or plain text content.
-If the table supports row selection, each row can optionally include a selection checkbox in the first column. Additionally, a "select all" checkbox is displayed as the first column header if the table supports multiple row selection.
-
-The <TypeLink links={docs.links} type={docs.exports.useTable} />, <TypeLink links={docs.links} type={docs.exports.useTableRow} />, <TypeLink links={docs.links} type={docs.exports.useTableCell} />, and <TypeLink links={docs.links} type={docs.exports.useTableColumnHeader} /> hooks handle keyboard, mouse, and other interactions to support
-row selection, in table navigation, and overall focus behavior. Those hooks, along with <TypeLink links={docs.links} type={docs.exports.useTableRowGroup} /> and <TypeLink links={docs.links} type={docs.exports.useTableHeaderRow} />, also handle exposing the table and its contents
-to assistive technology using ARIA. <TypeLink links={docs.links} type={docs.exports.useTableSelectAllCheckbox} /> and <TypeLink links={docs.links} type={docs.exports.useTableSelectionCheckbox} /> handle row selection and associating each checkbox with its respective rows
-for assistive technology. Each of these hooks returns props to be spread onto the appropriate HTML element.
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableState} />
-hook from `@react-stately/table`. The state object should be passed as an option to each of the above hooks where applicable.
-
-Note that an `aria-label` or `aria-labelledby` must be passed to the table to identify the element to assistive technology.
-
-## State management
-
-`useTable` requires knowledge of the rows, cells, and columns in the table in order to handle keyboard
-navigation and other interactions. It does this using
-the <TypeLink links={collectionsDocs.links} type={collectionsDocs.exports.Collection} />
-interface, which is a generic interface to access sequential unique keyed data. You can
-implement this interface yourself, e.g. by using a prop to pass a list of item objects,
-but <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableState} /> from
-`@react-stately/table` implements a JSX based interface for building collections instead.
-See [Collection Components](v3:collections.html) for more information.
-
-Data is defined using the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.TableHeader} />, <TypeLink links={statelyDocs.links} type={statelyDocs.exports.Column} />, <TypeLink links={statelyDocs.links} type={statelyDocs.exports.TableBody} />, <TypeLink links={statelyDocs.links} type={statelyDocs.exports.Row} />, and <TypeLink links={statelyDocs.links} type={statelyDocs.exports.Cell} /> components, which support both static and dynamic data.
-See the examples in the [usage](#usage) section below for details on how to use these components.
-
-In addition, <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableState} />
-manages the state necessary for multiple selection and exposes
-a <TypeLink links={selectionDocs.links} type={selectionDocs.exports.SelectionManager} />,
-which makes use of the collection to provide an interface to update the selection state.
-For more information, see [Selection](v3:selection.html).
-
-## Example
-
-Tables are complex [collection components](v3:collections.html) that are built up from many child elements
-including columns, rows, and cells. In this example, we'll use the standard HTML table elements along with hooks from React
-Aria for each child. You may also use other elements like `<div>` to render these components as appropriate.
-Since there are many pieces, we'll walk through each of them one by one.
-
-The <TypeLink links={docs.links} type={docs.exports.useTable} /> hook will be used to render the outer most table element. It uses
-the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableState} /> hook to construct the table's collection of rows and columns,
-and manage state such as the focused row/cell, selection, and sort column/direction. We'll use the collection to iterate through
-the rows and cells of the table and render the relevant components, which we'll define below.
-
-```tsx example export=true render=false
-import {Cell, Column, Row, TableBody, TableHeader, useTableState} from '@react-stately/table';
-import {mergeProps} from '@react-aria/utils';
-import {useRef} from 'react';
-import {useFocusRing} from '@react-aria/focus';
-import {useTable} from '@react-aria/table';
-
-function Table(props) {
-  let {selectionMode, selectionBehavior} = props;
-  let state = useTableState({
-    ...props,
-    showSelectionCheckboxes: selectionMode === 'multiple' && selectionBehavior !== 'replace'
-  });
-
-  let ref = useRef<HTMLTableElement | null>(null);
-  let {collection} = state;
-  let {gridProps} = useTable(props, state, ref);
-
-  return (
-    <table {...gridProps} ref={ref} style={{borderCollapse: 'collapse'}}>
-      <TableRowGroup type="thead">
-        {collection.headerRows.map(headerRow => (
-          <TableHeaderRow key={headerRow.key} item={headerRow} state={state}>
-            {[...headerRow.childNodes].map(column =>
-              column.props.isSelectionCell
-                ? <TableSelectAllCell key={column.key} column={column} state={state} />
-                : <TableColumnHeader key={column.key} column={column} state={state} />
-            )}
-          </TableHeaderRow>
-        ))}
-      </TableRowGroup>
-      <TableRowGroup type="tbody">
-        {[...collection.body.childNodes].map(row => (
-          <TableRow key={row.key} item={row} state={state}>
-            {[...row.childNodes].map(cell =>
-              cell.props.isSelectionCell
-                ? <TableCheckboxCell key={cell.key} cell={cell} state={state} />
-                : <TableCell key={cell.key} cell={cell} state={state} />
-            )}
-          </TableRow>
-        ))}
-      </TableRowGroup>
-    </table>
-  );
-}
-```
-
-### Table header
-
-A <TypeLink links={docs.links} type={docs.exports.useTableRowGroup} /> hook will be used to group the rows in the table header and table body. In this example,
-we're using HTML table elements, so this will be either a `<thead>` or `<tbody>` element, as passed from the
-above `Table` component via the `type` prop.
-
-```tsx example export=true render=false
-import {useTableRowGroup} from '@react-aria/table';
-
-function TableRowGroup({type: Element, children}) {
-  let {rowGroupProps} = useTableRowGroup();
-  return (
-    <Element
-      {...rowGroupProps}
-      style={Element === 'thead' ? {borderBottom: '2px solid var(--spectrum-global-color-gray-800)'} : null}>
-      {children}
-    </Element>
-  );
-}
-```
-
-The <TypeLink links={docs.links} type={docs.exports.useTableHeaderRow} /> hook will be used to render a header row. Header rows are similar to other rows,
-but they don't support user interaction like selection. In this example, there's only one header
-row, but there could be multiple in the case of nested columns. See the [example below](#nested-columns) for details.
-
-```tsx example export=true render=false
-import {useTableHeaderRow} from '@react-aria/table';
-
-function TableHeaderRow({item, state, children}) {
-  let ref = useRef<HTMLTableRowElement | null>(null);
-  let {rowProps} = useTableHeaderRow({node: item}, state, ref);
-
-  return (
-    <tr {...rowProps} ref={ref}>
-      {children}
-    </tr>
-  );
-}
-```
-
-The <TypeLink links={docs.links} type={docs.exports.useTableColumnHeader} /> hook will be used to render each column header. Column headers act as a label
-for all of the cells in that column, and can optionally support user interaction to sort by the column
-and change the sort order.
-
-The `allowsSorting` property of the column object can be used to determine
-if the column supports sorting at all.
-
-The `sortDescriptor` object stored in the `state` object indicates which column the table is currently sorted by,
-as well as the sort direction (ascending or descending). This is used to render an arrow icon to visually
-indicate the sort direction. When not sorted by this column, we use `visibility: hidden` to ensure that
-we reserve space for this icon at all times. That way the table's layout doesn't shift when we change the
-column we're sorting by. See the [example below](#sorting) of all of this in action.
-
-Finally, we use the <TypeLink links={focusDocs.links} type={focusDocs.exports.useFocusRing} /> hook to ensure that a focus ring is rendered when
-the cell is navigated to with the keyboard.
-
-```tsx example export=true render=false
-import {useTableColumnHeader} from '@react-aria/table';
-
-function TableColumnHeader({column, state}) {
-  let ref = useRef<HTMLTableCellElement | null>(null);
-  let {columnHeaderProps} = useTableColumnHeader({node: column}, state, ref);
-  let {isFocusVisible, focusProps} = useFocusRing();
-  let arrowIcon = state.sortDescriptor?.direction === 'ascending' ? '▲' : '▼';
-
-  return (
-    <th
-      {...mergeProps(columnHeaderProps, focusProps)}
-      style={{
-        textAlign: column.colSpan > 1 ? 'center' : 'left',
-        padding: '5px 10px',
-        outline: 'none',
-        boxShadow: isFocusVisible ? 'inset 0 0 0 2px orange' : 'none',
-        cursor: 'default'
-      }}
-      ref={ref}>
-      {column.rendered}
-      {column.props.allowsSorting &&
-        <span aria-hidden="true" style={{padding: '0 2px', visibility: state.sortDescriptor?.column === column.key ? 'visible' : 'hidden'}}>
-          {arrowIcon}
-        </span>
-      }
-    </th>
-  );
-}
-```
-
-### Table body
-
-Now that we've covered the table header, let's move on to the body. We'll use
-the <TypeLink links={docs.links} type={docs.exports.useTableRow} /> hook to render each row in the table.
-Table rows can be focused and navigated to using the keyboard via the arrow keys. In addition, table rows
-can optionally support selection via mouse, touch, or keyboard. Clicking, tapping, or pressing the <Keyboard>Space</Keyboard>
-key anywhere in the row selects it. Row actions are also supported, see [below](#row-actions) for details.
-
-We'll use the <TypeLink links={selectionDocs.links} type={selectionDocs.exports.SelectionManager} /> object exposed
-by the `state` to determine if a row is selected, and render a pink background if so. We'll also use the <TypeLink links={focusDocs.links} type={focusDocs.exports.useFocusRing} />
-hook to render a focus ring when the user navigates to the row with the keyboard.
-
-```tsx example export=true render=false
-import {useTableRow} from '@react-aria/table';
-
-function TableRow({item, children, state}) {
-  let ref = useRef<HTMLTableRowElement | null>(null);
-  let isSelected = state.selectionManager.isSelected(item.key);
-  let {rowProps, isPressed} = useTableRow({
-    node: item
-  }, state, ref);
-  let {isFocusVisible, focusProps} = useFocusRing();
-
-  return (
-    <tr
-      style={{
-        background: isSelected
-          ? 'blueviolet'
-          : isPressed
-            ? 'var(--spectrum-global-color-gray-400)'
-            : item.index % 2
-              ? 'var(--spectrum-alias-highlight-hover)'
-              : 'none',
-        color: isSelected ? 'white' : null,
-        outline: 'none',
-        boxShadow: isFocusVisible ? 'inset 0 0 0 2px orange' : 'none',
-        cursor: 'default'
-      }}
-      {...mergeProps(rowProps, focusProps)}
-      ref={ref}>
-      {children}
-    </tr>
-  );
-}
-```
-
-Finally, we'll use the <TypeLink links={docs.links} type={docs.exports.useTableCell} /> hook to render each cell.
-Users can use the left and right arrow keys to navigate to each cell in a row, as well as any focusable elements
-within a cell. This is indicated by the focus ring, as created with the <TypeLink links={focusDocs.links} type={focusDocs.exports.useFocusRing} />
-hook. The cell's contents are available in the `rendered` property of the cell <TypeLink links={collectionsDocs.links} type={collectionsDocs.exports.Node} />
-object.
-
-```tsx example export=true render=false
-import {useTableCell} from '@react-aria/table';
-
-function TableCell({cell, state}) {
-  let ref = useRef<HTMLTableCellElement | null>(null);
-  let {gridCellProps} = useTableCell({node: cell}, state, ref);
-  let {isFocusVisible, focusProps} = useFocusRing();
-
-  return (
-    <td
-      {...mergeProps(gridCellProps, focusProps)}
-      style={{
-        padding: '5px 10px',
-        outline: 'none',
-        boxShadow: isFocusVisible ? 'inset 0 0 0 2px orange' : 'none'
-      }}
-      ref={ref}>
-      {cell.rendered}
-    </td>
-  );
-}
-```
-
-With all of the above components in place, we can render an example of our Table in action.
-This example shows a static collection, where all of the data is hard coded. [See below](#dynamic-collections)
-for examples of using this Table component with dynamic collections (e.g. from a server).
-
-Try tabbing into the table and navigating using the arrow keys.
-
-```tsx example
-<Table aria-label="Example static collection table" style={{height: '210px', maxWidth: '400px'}}>
-  <TableHeader>
-    <Column>Name</Column>
-    <Column>Type</Column>
-    <Column>Date Modified</Column>
-  </TableHeader>
-  <TableBody>
-    <Row>
-      <Cell>Games</Cell>
-      <Cell>File folder</Cell>
-      <Cell>6/7/2020</Cell>
-    </Row>
-    <Row>
-      <Cell>Program Files</Cell>
-      <Cell>File folder</Cell>
-      <Cell>4/7/2021</Cell>
-    </Row>
-    <Row>
-      <Cell>bootmgr</Cell>
-      <Cell>System file</Cell>
-      <Cell>11/20/2010</Cell>
-    </Row>
-    <Row>
-      <Cell>log.txt</Cell>
-      <Cell>Text Document</Cell>
-      <Cell>1/18/2016</Cell>
-    </Row>
-  </TableBody>
-</Table>
-```
-
-### Adding selection
-
-Next, let's add support for selection. For multiple selection, we'll want to add a column of checkboxes to the left
-of the table to allow the user to select rows. This is done using the <TypeLink links={docs.links} type={docs.exports.useTableSelectionCheckbox} />
-hook. It is passed the `parentKey` of the cell, which refers to the row the cell is contained within. When the user
-checks or unchecks the checkbox, the row will be added or removed from the Table's selection.
-
-The `Checkbox` component used in this example is independent and can be used separately from `Table`. The code is
-available below. See [useCheckbox](../Checkbox/useCheckbox.html) for documentation.
-
-```tsx example export=true render=false
-import {useTableSelectionCheckbox} from '@react-aria/table';
-
-// Reuse the Checkbox from your component library. See below for details.
-import {Checkbox} from 'your-component-library';
-
-function TableCheckboxCell({cell, state}) {
-  let ref = useRef<HTMLTableCellElement | null>(null);
-  let {gridCellProps} = useTableCell({node: cell}, state, ref);
-  let {checkboxProps} = useTableSelectionCheckbox({key: cell.parentKey}, state);
-
-  return (
-    <td
-      {...gridCellProps}
-      ref={ref}>
-      <Checkbox {...checkboxProps} />
-    </td>
-  );
-}
-```
-
-We also want the user to be able to select all rows in the table at once. This is possible using the <Keyboard>⌘ Cmd</Keyboard> + <Keyboard>A</Keyboard>
-keyboard shortcut, but we'll also add a checkbox into the table header to do this and represent the selection state visually.
-This is done using the <TypeLink links={docs.links} type={docs.exports.useTableSelectAllCheckbox} /> hook. When all rows are selected,
-the checkbox will be shown as checked, and when only some rows are selected, the checkbox will be rendered in an indeterminate state.
-The user can check or uncheck the checkbox to select all or clear the selection, respectively.
-
-**Note**: Always ensure that the cell has accessible content, even when the checkbox is hidden (i.e. in single selection mode). The
-[VisuallyHidden](../VisuallyHidden) component can be used to do this.
-
-```tsx example export=true render=false
-import {useTableSelectAllCheckbox} from '@react-aria/table';
-import {VisuallyHidden} from '@react-aria/visually-hidden';
-
-function TableSelectAllCell({column, state}) {
-  let ref = useRef<HTMLTableCellElement | null>(null);
-  let {columnHeaderProps} = useTableColumnHeader({node: column}, state, ref);
-  let {checkboxProps} = useTableSelectAllCheckbox(state);
-
-  return (
-    <th
-      {...columnHeaderProps}
-      ref={ref}>
-      {state.selectionManager.selectionMode === 'single'
-        ? <VisuallyHidden>{checkboxProps['aria-label']}</VisuallyHidden>
-        : <Checkbox {...checkboxProps} />
-      }
-    </th>
-  );
-}
-```
-
-The following example shows how to enable multiple selection support using the Table component we built above.
-It's as simple as setting the `selectionMode` prop to `"multiple"`. Because we set the `showSelectionCheckboxes`
-option of `useTableState` to true when multiple selection is enabled, an extra column for these checkboxes is
-automatically added for us.
-
-And that's it! We now have a fully interactive table component that can support keyboard navigation, single or multiple selection,
-as well as column sorting. In addition, it is fully accessible for screen readers and other assistive technology. See below for more
-examples of how to use the Table component that we've built.
-
-```tsx example
-<Table aria-label="Table with selection" selectionMode="multiple">
-  <TableHeader>
-    <Column>Name</Column>
-    <Column>Type</Column>
-    <Column>Level</Column>
-  </TableHeader>
-  <TableBody>
-    <Row key="1">
-      <Cell>Charizard</Cell>
-      <Cell>Fire, Flying</Cell>
-      <Cell>67</Cell>
-    </Row>
-    <Row key="2">
-      <Cell>Blastoise</Cell>
-      <Cell>Water</Cell>
-      <Cell>56</Cell>
-    </Row>
-    <Row key="3">
-      <Cell>Venusaur</Cell>
-      <Cell>Grass, Poison</Cell>
-      <Cell>83</Cell>
-    </Row>
-    <Row key="4">
-      <Cell>Pikachu</Cell>
-      <Cell>Electric</Cell>
-      <Cell>100</Cell>
-    </Row>
-  </TableBody>
-</Table>
-```
-
-### Checkbox
-
-The `Checkbox` component used in the above example is used to implement row selection. It is built using the [useCheckbox](../Checkbox/useCheckbox.html)
-hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useToggleState} from '@react-stately/toggle';
-import {useCheckbox} from '@react-aria/checkbox';
-
-function Checkbox(props) {
-  let ref = React.useRef<HTMLInputElement | null>(null);
-  let state = useToggleState(props);
-  let {inputProps} = useCheckbox(props, state, ref);
-  return <input {...inputProps} ref={ref} style={props.style} />;
-}
-```
-
-</details>
-
-## Usage
-
-### Dynamic collections
-
-So far, our examples have shown static collections, where the data is hard coded.
-Dynamic collections, as shown below, can be used when the table data comes from an external data source such as an API, or updates over time.
-In the example below, both the columns and the rows are provided to the table via a render function. You can also make the columns static and
-only the rows dynamic.
-
-```tsx example export=true
-function ExampleTable(props) {
-  let columns = [
-    {name: 'Name', key: 'name'},
-    {name: 'Type', key: 'type'},
-    {name: 'Date Modified', key: 'date'}
-  ];
-
-  let rows = [
-    {id: 1, name: 'Games', date: '6/7/2020', type: 'File folder'},
-    {id: 2, name: 'Program Files', date: '4/7/2021', type: 'File folder'},
-    {id: 3, name: 'bootmgr', date: '11/20/2010', type: 'System file'},
-    {id: 4, name: 'log.txt', date: '1/18/2016', type: 'Text Document'}
-  ];
-
-  return (
-    <Table aria-label="Example dynamic collection table" {...props}>
-      <TableHeader columns={columns}>
-        {column => (
-          <Column>
-            {column.name}
-          </Column>
-        )}
-      </TableHeader>
-      <TableBody items={rows}>
-        {item => (
-          <Row>
-            {columnKey => <Cell>{item[columnKey]}</Cell>}
-          </Row>
-        )}
-      </TableBody>
-    </Table>
-  );
-}
-```
-
-### Single selection
-
-By default, `useTableState` doesn't allow row selection but this can be enabled using the `selectionMode` prop. Use `defaultSelectedKeys` to provide a default set of selected rows.
-Note that the value of the selected keys must match the `key` prop of the row.
-
-The example below enables single selection mode, and uses `defaultSelectedKeys` to select the row with key equal to "2".
-A user can click on a different row to change the selection, or click on the same row again to deselect it entirely.
-
-```tsx example
-// Using the example above
-<ExampleTable selectionMode="single" defaultSelectedKeys={[2]} />
-```
-
-### Multiple selection
-
-Multiple selection can be enabled by setting `selectionMode` to `multiple`.
-
-```tsx example
-// Using the example above
-<ExampleTable selectionMode="multiple" defaultSelectedKeys={[2, 4]} />
-```
-
-### Disallow empty selection
-
-Table also supports a `disallowEmptySelection` prop which forces the user to have at least one row in the Table selected at all times.
-In this mode, if a single row is selected and the user presses it, it will not be deselected.
-
-```tsx example
-// Using the example above
-<ExampleTable selectionMode="single" defaultSelectedKeys={[2]} disallowEmptySelection />
-```
-
-### Controlled selection
-
-To programmatically control row selection, use the `selectedKeys` prop paired with the `onSelectionChange` callback. The `key` prop from the selected rows will
-be passed into the callback when the row is pressed, allowing you to update state accordingly.
-
-```tsx example export=true
-import type {Selection} from 'react-stately';
-
-function PokemonTable(props) {
-  let columns = [
-    {name: 'Name', uid: 'name'},
-    {name: 'Type', uid: 'type'},
-    {name: 'Level', uid: 'level'}
-  ];
-
-  let rows = [
-    {id: 1, name: 'Charizard', type: 'Fire, Flying', level: '67'},
-    {id: 2, name: 'Blastoise', type: 'Water', level: '56'},
-    {id: 3, name: 'Venusaur', type: 'Grass, Poison', level: '83'},
-    {id: 4, name: 'Pikachu', type: 'Electric', level: '100'}
-  ];
-
-  let [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set([2]));
-
-  return (
-    <Table aria-label="Table with controlled selection" selectionMode="multiple" selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys} {...props}>
-      <TableHeader columns={columns}>
-        {column => (
-          <Column key={column.uid}>
-            {column.name}
-          </Column>
-        )}
-      </TableHeader>
-      <TableBody items={rows}>
-        {item => (
-          <Row>
-            {columnKey => <Cell>{item[columnKey]}</Cell>}
-          </Row>
-        )}
-      </TableBody>
-    </Table>
-  );
-}
-```
-
-### Disabled rows
-
-You can disable specific rows by providing an array of keys to `useTableState` via the `disabledKeys` prop. This will prevent rows from being selectable as shown in the example below.
-Note that you are responsible for the styling of disabled rows, however, the selection checkbox will be automatically disabled.
-
-```tsx example
-// Using the same table as above
-<PokemonTable selectionMode="multiple" disabledKeys={[3]} />
-```
-
-### Selection behavior
-
-By default, `useTable` uses the `"toggle"` selection behavior, which behaves like a checkbox group: clicking, tapping, or pressing the <Keyboard>Space</Keyboard> or <Keyboard>Enter</Keyboard> keys toggles selection for the focused row. Using the arrow keys moves focus but does not change selection. The `"toggle"` selection mode is often paired with a column of checkboxes in each row as an explicit affordance for selection.
-
-When the `selectionBehavior` prop is set to `"replace"`, clicking a row with the mouse _replaces_ the selection with only that row. Using the arrow keys moves both focus and selection. To select multiple rows, modifier keys such as <Keyboard>Ctrl</Keyboard>, <Keyboard>Cmd</Keyboard>, and <Keyboard>Shift</Keyboard> can be used. To move focus without moving selection, the <Keyboard>Ctrl</Keyboard> key on Windows or the <Keyboard>Option</Keyboard> key on macOS can be held while pressing the arrow keys. Holding this modifier while pressing the <Keyboard>Space</Keyboard> key toggles selection for the focused row, which allows multiple selection of non-contiguous items. On touch screen devices, selection always behaves as toggle since modifier keys may not be available. This behavior emulates native platforms such as macOS and Windows, and is often used when checkboxes in each row are not desired.
-
-```tsx example
-<PokemonTable selectionMode="multiple" selectionBehavior="replace" />
-```
-
-### Row actions
-`useTable` supports row actions via the `onRowAction` prop, which is useful for functionality such as navigation. In the default `"toggle"` selection behavior, when nothing is selected, clicking or tapping the row triggers the row action.
-When at least one item is selected, the table is in selection mode, and clicking or tapping a row toggles the selection. Actions may also be triggered via the <Keyboard>Enter</Keyboard> key, and selection using the <Keyboard>Space</Keyboard> key.
-
-This behavior is slightly different in the `"replace"` selection behavior, where single clicking selects the row and actions are performed via double click. On touch devices, the action becomes the primary tap interaction,
-and a long press enters into selection mode, which temporarily swaps the selection behavior to `"toggle"` to perform selection (you may wish to display checkboxes when this happens). Deselecting all items exits selection mode
-and reverts the selection behavior back to `"replace"`. Keyboard behaviors are unaffected.
-
-```tsx example
-<div style={{display: 'flex', flexWrap: 'wrap', gap: '24px'}}>
-  <PokemonTable aria-label="Pokemon table with row actions and toggle selection behavior" selectionMode="multiple" onRowAction={key => alert(`Opening item ${key}...`)} />
-  <PokemonTable aria-label="Pokemon table with row actions and replace selection behavior" selectionMode="multiple" selectionBehavior="replace" onRowAction={key => alert(`Opening item ${key}...`)} />
-</div>
-```
-
-### Links
-
-Table rows may also be links to another page or website. This can be achieved by passing the `href` prop to the `<Row>` component. Links behave the same way as described above for row actions depending on the `selectionMode` and `selectionBehavior`.
-
-```tsx example
-<Table aria-label="Bookmarks" selectionMode="multiple">
-  <TableHeader>
-    <Column isRowHeader>Name</Column>
-    <Column>URL</Column>
-    <Column>Date added</Column>
-  </TableHeader>
-  <TableBody>
-    <Row href="https://adobe.com/" target="_blank">
-      <Cell>Adobe</Cell>
-      <Cell>https://adobe.com/</Cell>
-      <Cell>January 28, 2023</Cell>
-    </Row>
-    <Row href="https://google.com/" target="_blank">
-      <Cell>Google</Cell>
-      <Cell>https://google.com/</Cell>
-      <Cell>April 5, 2023</Cell>
-    </Row>
-    <Row href="https://nytimes.com/" target="_blank">
-      <Cell>New York Times</Cell>
-      <Cell>https://nytimes.com/</Cell>
-      <Cell>July 12, 2023</Cell>
-    </Row>
-  </TableBody>
-</Table>
-```
-
-```css hidden
-tr[data-href] {
-  cursor: pointer !important;
-}
-```
-
-#### Client side routing
-
-The `<Row>` component works with frameworks and client side routers like [Next.js](https://nextjs.org/) and [React Router](https://reactrouter.com/en/main). As with other React Aria components that support links, this works via the <TypeLink links={utilsDocs.links} type={utilsDocs.exports.RouterProvider} /> component at the root of your app. See the [framework setup guide](../frameworks) to learn how to set this up.
-
-### Sorting
-
-Table supports sorting its data when a column header is pressed. To designate that a Column should support sorting, provide it with
-the `allowsSorting` prop. The Table accepts a `sortDescriptor` prop that defines the current column key to sort by and the sort direction (ascending/descending).
-When the user presses a sortable column header, the column's key and sort direction is passed into the `onSortChange` callback, allowing you to update
-the `sortDescriptor` appropriately.
-
-This example performs client side sorting by passing a `sort` function to the [useAsyncList](../useAsyncList.html) hook.
-See the docs for more information on how to perform server side sorting.
-
-```tsx example
-import {useAsyncList} from '@react-stately/data';
-
-interface Character {
-  name: string,
-  height: number,
-  mass: number,
-  birth_year: number
-}
-
-function AsyncSortTable() {
-  let list = useAsyncList<Character>({
-    async load({signal}) {
-      let res = await fetch(`https://swapi.py4e.com/api/people/?search`, {signal});
-      let json = await res.json();
-      return {
-        items: json.results
-      };
-    },
-    async sort({items, sortDescriptor}) {
-      return {
-        items: items.sort((a, b) => {
-          let first = a[sortDescriptor.column];
-          let second = b[sortDescriptor.column];
-          let cmp = (parseInt(first) || first) < (parseInt(second) || second) ? -1 : 1;
-          if (sortDescriptor.direction === 'descending') {
-            cmp *= -1;
-          }
-          return cmp;
-        })
-      };
-    }
-  });
-
-  return (
-    <Table aria-label="Example table with client side sorting" sortDescriptor={list.sortDescriptor} onSortChange={list.sort}>
-      <TableHeader>
-        <Column key="name" allowsSorting>Name</Column>
-        <Column key="height" allowsSorting>Height</Column>
-        <Column key="mass" allowsSorting>Mass</Column>
-        <Column key="birth_year" allowsSorting>Birth Year</Column>
-      </TableHeader>
-      <TableBody items={list.items}>
-        {item => (
-          <Row key={item.name}>
-            {columnKey => <Cell>{item[columnKey]}</Cell>}
-          </Row>
-        )}
-      </TableBody>
-    </Table>
-  );
-}
-```
-
-### Nested columns
-
-Columns can be nested to create column groups. This will result in more than one header row to be created, with the `colSpan`
-attribute of each column header cell set to the appropriate value so that the columns line up. Data for the leaf columns
-appears in each row of the table body.
-
-This example also shows the use of the `isRowHeader` prop for `Column`, which controls which columns are included in the
-accessibility name for each row. By default, only the first column is included, but in some cases more than one column may
-be used to represent the row. In this example, the first and last name columns are combined to form the ARIA label for the row.
-Only leaf columns may be marked as row headers.
-
-```tsx example
-<Table aria-label="Example table with nested columns">
-  <TableHeader>
-    <Column title="Name">
-      <Column isRowHeader>First Name</Column>
-      <Column isRowHeader>Last Name</Column>
-    </Column>
-    <Column title="Information">
-      <Column>Age</Column>
-      <Column>Birthday</Column>
-    </Column>
-  </TableHeader>
-  <TableBody>
-    <Row>
-      <Cell>Sam</Cell>
-      <Cell>Smith</Cell>
-      <Cell>36</Cell>
-      <Cell>May 3</Cell>
-    </Row>
-    <Row>
-      <Cell>Julia</Cell>
-      <Cell>Jones</Cell>
-      <Cell>24</Cell>
-      <Cell>February 10</Cell>
-    </Row>
-    <Row>
-      <Cell>Peter</Cell>
-      <Cell>Parker</Cell>
-      <Cell>28</Cell>
-      <Cell>September 7</Cell>
-    </Row>
-    <Row>
-      <Cell>Bruce</Cell>
-      <Cell>Wayne</Cell>
-      <Cell>32</Cell>
-      <Cell>December 18</Cell>
-    </Row>
-  </TableBody>
-</Table>
-```
-
-### Dynamic nested columns
-
-Nested columns can also be defined dynamically using the function syntax and the `childColumns` prop.
-The following example is the same as the example above, but defined dynamically.
-
-```tsx example
-interface ColumnDefinition {
-  name: string,
-  key: string,
-  children?: ColumnDefinition[],
-  isRowHeader?: boolean
-}
-
-let columns: ColumnDefinition[] = [
-  {name: 'Name', key: 'name', children: [
-    {name: 'First Name', key: 'first', isRowHeader: true},
-    {name: 'Last Name', key: 'last', isRowHeader: true}
-  ]},
-  {name: 'Information', key: 'info', children: [
-    {name: 'Age', key: 'age'},
-    {name: 'Birthday', key: 'birthday'}
-  ]}
-];
-
-let rows = [
-  {id: 1, first: 'Sam', last: 'Smith', age: 36, birthday: 'May 3'},
-  {id: 2, first: 'Julia', last: 'Jones', age: 24, birthday: 'February 10'},
-  {id: 3, first: 'Peter', last: 'Parker', age: 28, birthday: 'September 7'},
-  {id: 4, first: 'Bruce', last: 'Wayne', age: 32, birthday: 'December 18'}
-];
-
-<Table aria-label="Example table with dynamic nested columns">
-  <TableHeader columns={columns}>
-    {column => (
-      <Column isRowHeader={column.isRowHeader} childColumns={column.children}>
-        {column.name}
-      </Column>
-    )}
-  </TableHeader>
-  <TableBody items={rows}>
-    {item => (
-      <Row>
-        {columnKey => <Cell>{item[columnKey]}</Cell>}
-      </Row>
-    )}
-  </TableBody>
-</Table>
-```
-
-
-## Resizable Columns
-
-For resizable column support, two additional hooks need to be added to the table implementation above. The <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableColumnResizeState} />
-hook from `@react-stately/table` is responsible for initializing and tracking the widths of every column in your table, returning functions that you can use to
-update the column widths during a column resize operation. Note that this state is supplementary to the state returned by <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableState} />.
-
-The second column resizing hook is <TypeLink links={docs.links} type={docs.exports.useTableColumnResize} />. This hook handles the interactions for a table column's resizer
-element, allowing the user to drag the resizer or use the keyboard arrows to expand the column's width. Be sure to pass the state returned by <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableColumnResizeState} />
-to this hook so the tracked widths can be updated appropriately. We'll walk through all the required changes to the previous table implementation step by step below. For simplicity's sake, we'll be
-omitting support for selection, sorting, and nested columns.
-
-### Table
-
-As mentioned previously, we first need to call <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableColumnResizeState} /> to initialize the widths for our table's columns.
-We'll pass the state returned by <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableColumnResizeState} /> along with any user defined `onResize` handlers
-to our `ResizableTableColumnHeaders` so it can be used by <TypeLink links={docs.links} type={docs.exports.useTableColumnResize} />.
-
-The various style changes below are to add a wrapper div so the table is scrollable when the row content overflows and to support table body/column widths greater than the 300px applied to the table itself.
-
-```tsx example export=true render=false
-import {useCallback} from 'react';
-import {useTableColumnResizeState} from '@react-stately/table';
-
-function ResizableColumnsTable(props) {
-  let state = useTableState(props);
-  let scrollRef = useRef<HTMLDivElement | null>(null);
-  let ref = useRef<HTMLTableElement | null>(null);
-  let {collection} = state;
-  let {gridProps} = useTable(
-    {
-      ...props,
-      /*- begin highlight -*/
-      // The table wrapper is scrollable rather than just the body
-      scrollRef
-      /*- end highlight -*/
-    },
-    state,
-    ref
-  );
-
-  /*- begin highlight -*/
-  // Set the minimum width of the columns to 40px
-  let getDefaultMinWidth = useCallback(() => {
-    return 40;
-  }, []);
-
-  let layoutState = useTableColumnResizeState({
-    // Matches the width of the table itself
-    tableWidth: 300,
-    getDefaultMinWidth
-  }, state);
-  /*- end highlight -*/
-
-  return (
-    /*- begin highlight -*/
-    <div className="aria-table-wrapper" ref={scrollRef}>
-    {/*- end highlight -*/}
-      <table
-        {...gridProps}
-        className="aria-table"
-        ref={ref}>
-        <TableRowGroup type="thead">
-          {collection.headerRows.map(headerRow => (
-            <TableHeaderRow key={headerRow.key} item={headerRow} state={state}>
-              {[...headerRow.childNodes].map(column => (
-                <ResizableTableColumnHeader
-                  key={column.key}
-                  column={column}
-                  state={state}
-                  /*- begin highlight -*/
-                  layoutState={layoutState}
-                  onResizeStart={props.onResizeStart}
-                  onResize={props.onResize}
-                  onResizeEnd={props.onResizeEnd}
-                  /*- end highlight -*/
-                />
-              ))}
-            </TableHeaderRow>
-          ))}
-        </TableRowGroup>
-        <TableRowGroup type="tbody">
-          {[...collection.body.childNodes].map(row => (
-            <TableRow key={row.key} item={row} state={state}>
-              {[...row.childNodes].map(cell => (
-                <TableCell key={cell.key} cell={cell} state={state} />
-              ))}
-            </TableRow>
-          ))}
-        </TableRowGroup>
-      </table>
-    </div>
-  );
-}
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.aria-table-wrapper {
-  width: 300px;
-  overflow: auto;
-}
-
-.aria-table {
-  border-collapse: collapse;
-  table-layout: fixed;
-  width: fit-content;
-
-  & td {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-}
-```
-</details>
-
-### Resizable table header
-
-The `TableColumnHeader` is where we see the bulk of the changes required to support resizable columns. First of all, we need to accommodate a `Resizer` element in every resizable column that
-the user can drag or focus to perform a resize operation. Since the resizer will be a focusable element within the table header, we need to make the header title a focusable element as well so keyboard
-focus won't be immediately sent to the resizer as you navigate between the column headers. Finally, we apply the computed width of our column from <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableColumnResizeState} />
-to the header element.
-
-```tsx example export=true render=false
-// Reuse the Button from your component library. See below for details.
-import {Button} from 'your-component-library';
-
-function ResizableTableColumnHeader({column, state, layoutState, onResizeStart, onResize, onResizeEnd}) {
-  let allowsResizing = column.props.allowsResizing;
-  let ref = useRef<HTMLTableCellElement | null>(null);
-  let {columnHeaderProps} = useTableColumnHeader({node: column}, state, ref);
-
-  return (
-    <th
-      {...columnHeaderProps}
-      className="aria-table-headerCell"
-      style={{width: layoutState.getColumnWidth(column.key)}}
-      ref={ref}>
-      <div style={{display: 'flex', position: 'relative'}}>
-        <Button className="aria-table-headerTitle">
-          {column.rendered}
-        </Button>
-        {allowsResizing &&
-          <Resizer column={column} layoutState={layoutState} onResizeStart={onResizeStart} onResize={onResize} onResizeEnd={onResizeEnd} />
-        }
-      </div>
-    </th>
-  );
-}
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.aria-table-headerCell {
-  padding: 5px 10px;
-  outline: none;
-  cursor: default;
-  box-sizing: border-box;
-  box-shadow: none;
-  text-align: left;
-}
-
-.aria-table-headerTitle {
-  width: 100%;
-  text-align: left;
-  border: none;
-  background: transparent;
-  flex: 1 1 auto;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  margin-inline-start: -6px;
-  outline: none;
-}
-
-.aria-table-headerTitle.focus {
-  outline: 2px solid orange;
-}
-```
-</details>
-
-### Button
-
-The `Button` component is used in the above example to represent the table column header title. It is built using the [useButton](../Button/useButton.html) hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useButton} from '@react-aria/button';
-
-function Button(props) {
-  let ref = useRef<HTMLButtonElement | null>(null);
-  let {focusProps, isFocusVisible} = useFocusRing();
-  let {buttonProps} = useButton(props, ref);
-  return <button {...mergeProps(buttonProps, focusProps)} ref={ref} className={`${props.className} ${isFocusVisible ? 'focus' : ''}`}>{props.children}</button>;
-}
-```
-
-</details>
-
-### Resizer
-
-As described above, we need to implement an element that the user can drag/interact with to resize a column. Here we'll use the <TypeLink links={docs.links} type={docs.exports.useTableColumnResize} />
-hook to create a visible resizer div for physical drag operations and a visually hidden input responsible for keyboard and screenreader interactions, similar to a [slider](../Slider/useSlider.html).
-Users can press and drag on the visible resizer to trigger the `onResize` callbacks and update the tracked column widths accordingly. When focused, keyboard users can begin resizing the column by pressing <Keyboard>Enter</Keyboard>.
-Once resizing is activated, they can use the arrow keys to trigger the same resize events and press <Keyboard>Enter</Keyboard>, <Keyboard>Esc</Keyboard>, or <Keyboard>Space</Keyboard> to exit resizing. Touch screen reader users can swipe
-left or right to focus the column's resizer input and swipe up and down to resize the column.
-
-```tsx example export=true render=false
-import {useTableColumnResize} from '@react-aria/table';
-
-function Resizer(props) {
-  let {column, layoutState, onResizeStart, onResize, onResizeEnd} = props;
-  let ref = useRef<HTMLInputElement | null>(null);
-  let {resizerProps, inputProps, isResizing} = useTableColumnResize({
-    column,
-    'aria-label': 'Resizer',
-    onResizeStart,
-    onResize,
-    onResizeEnd
-  }, layoutState, ref);
-  let {focusProps, isFocusVisible} = useFocusRing();
-
-  return (
-    <div
-      role="presentation"
-      className={`aria-table-resizer ${isFocusVisible ? 'focus' : ''} ${isResizing ? 'resizing' : ''}`}
-      {...resizerProps}>
-      <input
-        ref={ref}
-        {...mergeProps(inputProps, focusProps)} />
-    </div>
-  );
-};
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.aria-table-resizer {
-  width: 15px;
-  background-color: grey;
-  cursor: col-resize;
-  height: 30px;
-  touch-action: none;
-  flex: 0 0 auto;
-  box-sizing: border-box;
-  border: 5px;
-  border-style: none solid;
-  border-color: transparent;
-  background-clip: content-box;
-}
-
-.aria-table-resizer.focus {
-  background-color: orange;
-}
-
-.aria-table-resizer.resizing {
-  border-color: orange;
-  background-color: transparent;
-}
-```
-
-</details>
-
-And with that, all necessary changes to the previous table implementation have been made and we now have a table that supports resizable columns!
-The example below supports resizing via mouse, keyboard, touch, and screen reader interactions. To see an example with sorting and selection, see the
-[styled example](#styled-examples)!
-
-```tsx example
-<ResizableColumnsTable aria-label="Table with resizable columns">
-  <TableHeader>
-    <Column allowsResizing>Name</Column>
-    <Column allowsResizing>Type</Column>
-    <Column allowsResizing>Level</Column>
-  </TableHeader>
-  <TableBody>
-    <Row key="1">
-      <Cell>Charizard</Cell>
-      <Cell>Fire, Flying</Cell>
-      <Cell>67</Cell>
-    </Row>
-    <Row key="2">
-      <Cell>Blastoise</Cell>
-      <Cell>Water</Cell>
-      <Cell>56</Cell>
-    </Row>
-    <Row key="3">
-      <Cell>Venusaur</Cell>
-      <Cell>Grass, Poison</Cell>
-      <Cell>83</Cell>
-    </Row>
-    <Row key="4">
-      <Cell>Pikachu</Cell>
-      <Cell>Electric</Cell>
-      <Cell>100</Cell>
-    </Row>
-  </TableBody>
-</ResizableColumnsTable>
-```
-
-### Styled examples
-
-<ExampleCard
-  url="https://codesandbox.io/s/objective-cherry-g837on?file=/src/Table.tsx"
-  preview={tailwindExample}
-  title="Tailwind CSS"
-  description="A table supporting resizable columns, selection, and sorting built with Tailwind and React Aria." />
-
-
-## Internationalization
-
-`useTable` handles some aspects of internationalization automatically.
-For example, type to select is implemented with an
-[Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator)
-for internationalized string matching, and keyboard navigation is mirrored in right-to-left languages.
-You are responsible for localizing all text content within the table.
-
-### RTL
-
-In right-to-left languages, the table layout should be mirrored. The columns should be ordered from right to left and the
-individual column text alignment should be inverted. Ensure that your CSS accounts for this.
diff --git a/packages/react-aria/docs/tabs/animated-example.png b/packages/react-aria/docs/tabs/animated-example.png
deleted file mode 100644
index f995a211111..00000000000
Binary files a/packages/react-aria/docs/tabs/animated-example.png and /dev/null differ
diff --git a/packages/react-aria/docs/tabs/useTabList.mdx b/packages/react-aria/docs/tabs/useTabList.mdx
deleted file mode 100644
index 522a3e4a0ca..00000000000
--- a/packages/react-aria/docs/tabs/useTabList.mdx
+++ /dev/null
@@ -1,439 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/tabs';
-import utilsDocs from 'docs:@react-aria/utils';
-import statelyDocs from 'docs:@react-stately/tabs';
-import collectionsDocs from 'docs:@react-stately/collections';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import {Keyboard} from '@react-spectrum/text';
-import packageData from '@react-aria/tabs/package.json';
-import Anatomy from './anatomy.svg';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
-import animatedPreview from 'url:./animated-example.png';
-
----
-category: Navigation
-keywords: [tabs, aria]
-after_version: 3.0.0-rc.0
----
-
-# useTabList
-
-<PageDescription>{docs.exports.useTabList.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useTabList', 'useTab', 'useTabPanel']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useTabList} links={docs.links} />
-<FunctionAPI function={docs.exports.useTab} links={docs.links} />
-<FunctionAPI function={docs.exports.useTabPanel} links={docs.links} />
-
-## Features
-
-Tabs provide a list of tabs that a user can select from to switch between multiple tab panels. `useTabList`, `useTab`, and `useTabPanel` can be used to implement these in an accessible way.
-
-* Support for mouse, touch, and keyboard interactions on tabs
-* Support for LTR and RTL keyboard navigation
-* Support for disabled tabs
-* Follows the tabs ARIA pattern, semantically linking tabs and their associated tab panels
-* Focus management for tab panels without any focusable children
-
-## Anatomy
-
-<Anatomy />
-
-Tabs consist of a tab list with one or more visually separated tabs. Each tab has associated content, and only the selected tab's content is shown.
-Each tab can be clicked, tapped, or navigated to via arrow keys. Depending on the `keyboardActivation` prop, the tab can be selected by receiving keyboard focus, or it can be selected with the <Keyboard>Enter</Keyboard> key.
-
-`useTabList` returns props to spread onto the tab list container:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTabList.return.id].properties} />
-</TypeContext.Provider>
-
-`useTab` returns props to be spread onto each individual tab, along with states that can be used for styling:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTab.return.id].properties} />
-</TypeContext.Provider>
-
-`useTabPanel` returns props to spread onto the container for the tab content:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTabPanel.return.id].properties} />
-</TypeContext.Provider>
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTabListState} />
-hook in `@react-stately/tabs`. The state object should be passed as an option to `useTabList`, `useTab`,
-and `useTabPanel`. The <TypeLink links={collectionsDocs.links} type={collectionsDocs.exports.Item} /> component
-is used to represent each tab, following the [Collections API](v3:collections.html) used by many other components.
-
-## Example
-
-This example displays a basic list of tabs. The currently selected tab receives a `tabIndex` of 0 while the rest are set to -1 ensuring that the whole tablist is a single tab stop. The selected tab has a different style so it's obvious which one is currently selected. `useTab` and `useTabPanel` handle associating the tabs and tab panels for assistive technology. The currently selected tab panel is rendered below the list of tabs. The `key` prop on the `TabPanel` element is important to ensure that DOM state (e.g. text field contents) is not shared between unrelated tabs.
-
-```tsx example export=true
-import {Item} from '@react-stately/collections';
-import {useTab, useTabList, useTabPanel} from '@react-aria/tabs';
-import {useTabListState} from '@react-stately/tabs';
-
-function Tabs(props) {
-  let state = useTabListState(props);
-  let ref = React.useRef(null);
-  let {tabListProps} = useTabList(props, state, ref);
-  return (
-    <div className={`tabs ${props.orientation || ''}`}>
-      <div {...tabListProps} ref={ref}>
-        {[...state.collection].map((item) => (
-          <Tab key={item.key} item={item} state={state} />
-        ))}
-      </div>
-      <TabPanel key={state.selectedItem?.key} state={state} />
-    </div>
-  );
-}
-
-function Tab({item, state}) {
-  let {key, rendered} = item;
-  let ref = React.useRef(null);
-  let {tabProps} = useTab({key}, state, ref);
-  return (
-    <div {...tabProps} ref={ref}>
-      {rendered}
-    </div>
-  );
-}
-
-function TabPanel({state, ...props}) {
-  let ref = React.useRef(null);
-  let {tabPanelProps} = useTabPanel(props, state, ref);
-  return (
-    <div {...tabPanelProps} ref={ref}>
-      {state.selectedItem?.props.children}
-    </div>
-  );
-}
-
-<Tabs aria-label="History of Ancient Rome">
-  <Item key="FoR" title="Founding of Rome">Arma virumque cano, Troiae qui primus ab oris.</Item>
-  <Item key="MaR" title="Monarchy and Republic">Senatus Populusque Romanus.</Item>
-  <Item key="Emp" title="Empire">Alea jacta est.</Item>
-</Tabs>
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.tabs {
-  height: 150px;
-  display: flex;
-  flex-direction: column;
-}
-
-.tabs.vertical {
-  flex-direction: row;
-}
-
-[role=tablist] {
-  display: flex;
-}
-
-[role=tablist][aria-orientation=horizontal] {
-  border-bottom: 1px solid gray;
-}
-
-[role=tablist][aria-orientation=vertical] {
-  flex-direction: column;
-  border-right: 1px solid gray;
-}
-
-[role=tab] {
-  padding: 10px;
-  cursor: default;
-}
-
-[role=tablist][aria-orientation=horizontal] [role=tab] {
-  border-bottom: 3px solid transparent;
-}
-
-[role=tablist][aria-orientation=vertical] [role=tab] {
-  border-right: 3px solid transparent;
-}
-
-[role=tablist] [role=tab][aria-selected=true] {
-  border-color: var(--blue);
-}
-
-[role=tab][aria-disabled] {
-  opacity: 0.5;
-}
-
-[role=tabpanel] {
-  padding: 10px;
-}
-```
-
-</details>
-
-## Styled examples
-
-<ExampleCard
-  url="https://codesandbox.io/s/practical-monad-punzo?file=/src/Tabs.js"
-  preview={animatedPreview}
-  title="Animated Selection"
-  description="A TabList component with an animated selection indicator." />
-
-## Usage
-
-The following examples show how to use the `Tabs` component created in the above example.
-
-### Default selection
-
-A default selected tab can be provided using the `defaultSelectedKey` prop, which should correspond to the `key` prop provided to each item.
-When `Tabs` is used with dynamic items as described below, the key of each item is derived from the data.
-See the `react-stately` [Selection docs](v3:selection.html) for more details.
-
-```tsx example
-<Tabs aria-label="Input settings" defaultSelectedKey="keyboard">
-  <Item key="mouse">Mouse Settings</Item>
-  <Item key="keyboard">Keyboard Settings</Item>
-  <Item key="gamepad">Gamepad Settings</Item>
-</Tabs>
-```
-
-### Controlled selection
-
-Selection can be controlled using the `selectedKey` prop, paired with the `onSelectionChange` event. The `key` prop from the selected tab will be passed into the callback when the tab is selected, allowing you to update state accordingly.
-
-```tsx example
-function Example() {
-  let [timePeriod, setTimePeriod] = React.useState('triassic');
-
-  return (
-    <>
-      <p>Selected time period: {timePeriod}</p>
-      <Tabs aria-label="Mesozoic time periods" selectedKey={timePeriod} onSelectionChange={setTimePeriod}>
-        <Item key="triassic" title="Triassic">
-          The Triassic ranges roughly from 252 million to 201 million years ago, preceding the Jurassic Period.
-        </Item>
-        <Item key="jurassic" title="Jurassic">
-          The Jurassic ranges from 200 million years to 145 million years ago.
-        </Item>
-        <Item key="cretaceous" title="Cretaceous">
-          The Cretaceous is the longest period of the Mesozoic, spanning from 145 million to 66 million years ago.
-        </Item>
-      </Tabs>
-    </>
-  );
-}
-```
-
-### Focusable content
-
-When the tab panel doesn't contain any focusable content, the entire panel is given a `tabIndex=0` so that the content can be navigated to with the keyboard. When the tab panel contains focusable content, such as a textfield, then the `tabIndex` is omitted because the content itself can receive focus.
-
-This example uses the same `Tabs` component from above. Try navigating from the tabs to the content for each panel using the keyboard.
-
-```tsx example
-<Tabs aria-label="Notes app">
-  <Item key="item1" title="Jane Doe">
-    <label>Leave a note for Jane: <input type="text" /></label>
-  </Item>
-  <Item key="item2" title="John Doe">Senatus Populusque Romanus.</Item>
-  <Item key="item3" title="Joe Bloggs">Alea jacta est.</Item>
-</Tabs>
-```
-
-### Dynamic items
-
-The above examples have shown tabs with static items. The `items` prop can be used when creating tabs from a dynamic collection, for example when the user can add and remove tabs, or the tabs come from an external data source. The function passed as the children of the `Tabs` component is called for each item in the list, and returns an `<Item>` representing the tab.
-
-Each item accepts a `key` prop, which is passed to the `onSelectionChange` handler to identify the selected item. Alternatively, if the item objects contain an `id` property, as shown in the example below, then this is used automatically and a `key` prop is not required. See [Collection Components](v3:collections.html) for more details.
-
-```tsx example
-function Example() {
-  let [tabs, setTabs] = React.useState([
-    {id: 1, title: 'Tab 1', content: 'Tab body 1'},
-    {id: 2, title: 'Tab 2', content: 'Tab body 2'},
-    {id: 3, title: 'Tab 3', content: 'Tab body 3'}
-  ]);
-
-  let addTab = () => {
-    setTabs(tabs => [
-      ...tabs,
-      {
-        id: tabs.length + 1,
-        title: `Tab ${tabs.length + 1}`,
-        content: `Tab Body ${tabs.length + 1}`
-      }
-    ]);
-  };
-
-  let removeTab = () => {
-    if (tabs.length > 1) {
-      setTabs(tabs => tabs.slice(0, -1));
-    }
-  };
-
-  return (
-    <>
-      <button onClick={addTab}>Add tab</button>
-      <button onClick={removeTab}>Remove tab</button>
-      <Tabs aria-label="Dynamic tabs" items={tabs}>
-        {item => <Item title={item.title}>{item.content}</Item>}
-      </Tabs>
-    </>
-  );
-}
-```
-
-### Keyboard Activation
-
-By default, pressing the arrow keys while focus is on a Tab will switch selection to the adjacent Tab in that direction, updating the content displayed accordingly. If you would like to prevent selection change
-from happening automatically you can set the `keyboardActivation` prop to "manual". This will prevent tab selection from changing on arrow key press, requiring a subsequent `Enter` or `Space` key press to confirm
-tab selection.
-
-```tsx example
-<Tabs aria-label="Input settings" keyboardActivation="manual">
-  <Item key="mouse">Mouse Settings</Item>
-  <Item key="keyboard">Keyboard Settings</Item>
-  <Item key="gamepad">Gamepad Settings</Item>
-</Tabs>
-```
-
-### Orientation
-
-By default, tabs are horizontally oriented. The `orientation` prop can be set to `vertical` to change this. This does not affect keyboard navigation. You are responsible for styling your tabs accordingly.
-
-```tsx example
-<Tabs aria-label="Chat log orientation example" orientation="vertical">
-  <Item key="item1" title="John Doe">
-    There is no prior chat history with John Doe.
-  </Item>
-  <Item key="item2" title="Jane Doe">
-    There is no prior chat history with Jane Doe.
-  </Item>
-  <Item key="item3" title="Joe Bloggs">
-    There is no prior chat history with Joe Bloggs.
-  </Item>
-</Tabs>
-```
-
-### Disabled
-
-All tabs can be disabled using the `isDisabled` prop.
-
-```tsx example
-<Tabs aria-label="Input settings" isDisabled>
-  <Item key="mouse">Mouse Settings</Item>
-  <Item key="keyboard">Keyboard Settings</Item>
-  <Item key="gamepad">Gamepad Settings</Item>
-</Tabs>
-```
-
-### Disabled items
-
-Individual tabs can be disabled using the `disabledKeys` prop. Each key in this list
-corresponds with the `key` prop passed to the `Item` component, or automatically derived from the values passed
-to the `items` prop. See [Collections](v3:collections.html) for more details.
-
-```tsx example
-<Tabs aria-label="Input settings" disabledKeys={['gamepad']}>
-  <Item key="mouse">Mouse Settings</Item>
-  <Item key="keyboard">Keyboard Settings</Item>
-  <Item key="gamepad">Gamepad Settings</Item>
-</Tabs>
-```
-
-### Links
-
-Tabs may be rendered as links to different routes in your application. This can be achieved by passing the `href` prop to the `<Item>` component. You'll need to update the `Tab` component to render an `<a>` element when an `href` prop is passed to an item.
-
-```tsx
-function Tab({item, state}) {
-  let ref = React.useRef(null);
-  let {tabProps} = useTab({key: item.key}, state, ref);
-  /*- begin highlight -*/
-  let ElementType = item.props.href ? 'a' : 'div';
-  /*- end highlight -*/
-  return (
-    <ElementType {...tabProps} ref={ref}>
-      {item.rendered}
-    </ElementType>
-  );
-}
-```
-
-By default, links perform native browser navigation. However, you'll usually want to synchronize the selected tab with the URL from your client side router. This takes two steps:
-
-1. Set up a <TypeLink links={utilsDocs.links} type={utilsDocs.exports.RouterProvider} /> at the root of your app. This will handle link navigation from all React Aria components using your framework or router. See the [framework setup guide](../frameworks) to learn how to set this up.
-2. Use the `selectedKey` prop to set the selected tab based on the URL, as [described above](#controlled-selection).
-
-This example uses [React Router](https://reactrouter.com/en/main) to setup routes for each tab and synchronize the selection with the URL.
-
-```tsx
-import {useLocation, useNavigate, BrowserRouter, Routes, Route} from 'react-router-dom';
-import {RouterProvider} from 'react-aria';
-
-function AppTabs() {
-  let {pathname} = useLocation();
-
-  return (
-    <Tabs selectedKey={pathname}>
-      <TabList aria-label="Tabs">
-        <Tab id="/" href="/">Home</Tab>
-        <Tab id="/shared" href="/shared">Shared</Tab>
-        <Tab id="/deleted" href="/deleted">Deleted</Tab>
-      </TabList>
-      <TabPanel id={pathname}>
-        <Routes>
-          <Route path="/" element={<HomePage />} />
-          <Route path="/shared" element={<SharedPage />} />
-          <Route path="/deleted" element={<DeletedPage />} />
-        </Routes>
-      </TabPanel>
-    </Tabs>
-  );
-}
-
-function App() {
-  let navigate = useNavigate();
-  return (
-    <RouterProvider navigate={navigate}>
-      <Routes>
-        <Route path="/*" element={<AppTabs />} />
-      </Routes>
-    </RouterProvider>
-  );
-}
-
-<BrowserRouter>
-  <App />
-</BrowserRouter>
-```
-
-## Internationalization
-
-`useTabList` handles some aspects of internationalization automatically. For example, keyboard navigation is automatically mirrored for right-to-left languages. You are responsible for localizing all tab labels and content.
-
-### RTL
-
-In right-to-left languages, the tablist should be mirrored. The first tab is furthest right and the last tab is furthest left. Ensure that your CSS accounts for this.
diff --git a/packages/react-aria/docs/tag/tailwind.png b/packages/react-aria/docs/tag/tailwind.png
deleted file mode 100644
index d219ee4499f..00000000000
Binary files a/packages/react-aria/docs/tag/tailwind.png and /dev/null differ
diff --git a/packages/react-aria/docs/tag/useTagGroup.mdx b/packages/react-aria/docs/tag/useTagGroup.mdx
deleted file mode 100644
index 43ec02b122c..00000000000
--- a/packages/react-aria/docs/tag/useTagGroup.mdx
+++ /dev/null
@@ -1,387 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/tag';
-import utilsDocs from 'docs:@react-aria/utils';
-import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import {Keyboard} from '@react-spectrum/text';
-import packageData from '@react-aria/tag/package.json';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import tailwindExample from 'url:./tailwind.png';
-import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
-import Anatomy from './anatomy.svg';
-
----
-category: Collections
-keywords: [tag, aria, grid]
----
-
-# useTagGroup
-
-<PageDescription>{docs.exports.useTagGroup.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useTagGroup']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/grid/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useTagGroup} links={docs.links} />
-<FunctionAPI function={docs.exports.useTag} links={docs.links} />
-
-## Features
-
-* Exposed to assistive technology as a grid using ARIA
-* Keyboard navigation support including arrow keys, home/end, page up/down, and delete
-* Keyboard focus management and cross browser normalization
-* Labeling support for accessibility
-* Support for mouse, touch, and keyboard interactions
-
-## Anatomy
-
-<Anatomy />
-
-A tag group consists of a list of tags.
-If a visual label is not provided, then an `aria-label` or
-`aria-labelledby` prop must be passed to identify the tag group to assistive technology.
-
-Individual tags should include a visual label, and may optionally include icons or a remove button.
-
-`useTagGroup` returns props for the group and its label, which you should spread
-onto the appropriate element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTagGroup.return.id].properties} />
-</TypeContext.Provider>
-
-`useTag` returns props for an individual tag, along with states that you can use for styling:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTag.return.id].properties} />
-</TypeContext.Provider>
-
-In order to be correctly identified to assistive technologies and enable proper keyboard navigation, the tag group should use `gridProps` on its outer container.
-
-Each individual tag should use `rowProps` on its outer container, and use `gridCellProps` on an inner container.
-
-## Example
-
-```tsx example export=true
-import type {AriaTagGroupProps, AriaTagProps} from '@react-aria/tag';
-import type {ListState} from '@react-stately/list';
-import {useTag, useTagGroup} from '@react-aria/tag';
-import {useListState} from '@react-stately/list';
-import {Item} from '@react-stately/collections';
-import {useFocusRing} from '@react-aria/focus';
-
-// Reuse the Button from your component library. See below for details.
-import {Button} from 'your-component-library';
-
-function TagGroup<T extends object>(props: AriaTagGroupProps<T>) {
-  let { label, description, errorMessage } = props;
-  let ref = React.useRef(null);
-
-  let state = useListState(props);
-  let {
-    gridProps,
-    labelProps,
-    descriptionProps,
-    errorMessageProps
-  } = useTagGroup(props, state, ref);
-
-  return (
-    <div className="tag-group">
-      <div {...labelProps}>{label}</div>
-      <div {...gridProps} ref={ref}>
-        {[...state.collection].map((item) => (
-          <Tag
-            key={item.key}
-            item={item}
-            state={state} />
-        ))}
-      </div>
-      {description && (
-        <div {...descriptionProps} className="description">
-          {description}
-        </div>
-      )}
-      {errorMessage && (
-        <div {...errorMessageProps} className="error-message">
-          {errorMessage}
-        </div>
-      )}
-    </div>
-  );
-}
-
-interface TagProps<T> extends AriaTagProps<T> {
-  state: ListState<T>
-}
-
-function Tag<T>(props: TagProps<T>) {
-  let {item, state} = props;
-  let ref = React.useRef(null);
-  let {focusProps, isFocusVisible} = useFocusRing({within: false});
-  let {rowProps, gridCellProps, removeButtonProps, allowsRemoving} = useTag(props, state, ref);
-
-  return (
-    <div ref={ref} {...rowProps} {...focusProps} data-focus-visible={isFocusVisible}>
-      <div {...gridCellProps}>
-        {item.rendered}
-        {allowsRemoving && <Button {...removeButtonProps}>ⓧ</Button>}
-      </div>
-    </div>
-  );
-}
-
-<TagGroup label="Categories">
-  <Item key="news">News</Item>
-  <Item key="travel">Travel</Item>
-  <Item key="gaming">Gaming</Item>
-  <Item key="shopping">Shopping</Item>
-</TagGroup>
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.tag-group {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.tag-group [role="grid"] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.tag-group [role="row"] {
-  border: 1px solid gray;
-  forced-color-adjust: none;
-  border-radius: 4px;
-  padding: 2px 8px;
-  font-size: 0.929rem;
-  outline: none;
-  cursor: default;
-  display: flex;
-  align-items: center;
-  transition: border-color 200ms;
-
-  &[data-focus-visible=true] {
-    outline: 2px solid slateblue;
-    outline-offset: 2px;
-  }
-
-  &[aria-selected=true] {
-    background: var(--spectrum-gray-900);
-    border-color: var(--spectrum-gray-900);
-    color: var(--spectrum-gray-50);
-  }
-
-  &[aria-disabled] {
-    opacity: 0.4;
-  }
-}
-
-.tag-group [role="gridcell"] {
-  display: contents;
-}
-
-.tag-group [role="row"] button {
-  background: none;
-  border: none;
-  padding: 0;
-  margin-left: 4px;
-  outline: none;
-  font-size: 0.95em;
-  border-radius: 100%;
-  aspect-ratio: 1/1;
-  height: 100%;
-
-  &[data-focus-visible=true] {
-    outline: 2px solid slateblue;
-    outline-offset: -1px;
-  }
-}
-
-.tag-group .description {
-  font-size: 12px;
-}
-
-.tag-group .error-message {
-  color: red;
-  font-size: 12px;
-}
-```
-
-</details>
-
-### Button
-
-The `Button` component is used in the above example to remove a tag. It is built using the [useButton](../Button/useButton.html) hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useButton} from '@react-aria/button';
-import {mergeProps} from '@react-aria/utils';
-
-function Button(props) {
-  let ref = React.useRef(null);
-  let {buttonProps} = useButton(props, ref);
-  let {focusProps, isFocusVisible} = useFocusRing({within: false});
-  return <button {...mergeProps(buttonProps, focusProps)} ref={ref} data-focus-visible={isFocusVisible}>{props.children}</button>;
-}
-```
-
-</details>
-
-
-## Styled examples
-
-<ExampleCard
-  url="https://codesandbox.io/s/usetaggroup-with-tailwind-css-zxxrpv"
-  preview={tailwindExample}
-  title="Tailwind CSS"
-  description="A TagGroup built with Tailwind." />
-
-## Usage
-
-### Remove tags
-
-The `onRemove` prop can be used to include a remove button which can be used to remove a tag. This allows the user to press the remove button, or press the backspace key while the tag is focused to remove the tag from the group. Additionally, when [selection](#selection) is enabled, all selected items will be deleted when pressing the backspace key on a selected tag.
-
-```tsx example
-import {useListData} from '@react-stately/data';
-
-function Example() {
-  let list = useListData({
-    initialItems: [
-      { id: 1, name: "News" },
-      { id: 2, name: "Travel" },
-      { id: 3, name: "Gaming" },
-      { id: 4, name: "Shopping" }
-    ]
-  });
-
-  return (
-    <TagGroup
-      label="Categories"
-      items={list.items}
-      onRemove={(keys) => list.remove(...keys)}>
-      {(item) => <Item>{item.name}</Item>}
-    </TagGroup>
-  );
-}
-```
-
-### Selection
-
-TagGroup supports multiple selection modes. By default, selection is disabled, however this can be changed using the `selectionMode` prop.
-Use `defaultSelectedKeys` to provide a default set of selected items (uncontrolled) and `selectedKeys` to set the selected items (controlled). The value of the selected keys must match the `key` prop of the items.
-See the `react-stately` [Selection docs](v3:selection.html) for more details.
-
-```tsx example
-import type {Selection} from 'react-stately';
-
-function Example() {
-  let [selected, setSelected] = React.useState<Selection>(new Set(['parking']));
-
-  return (
-    <>
-      <TagGroup label="Amenities" selectionMode="multiple" selectedKeys={selected} onSelectionChange={setSelected}>
-        <Item key="laundry">Laundry</Item>
-        <Item key="fitness">Fitness center</Item>
-        <Item key="parking">Parking</Item>
-        <Item key="pool">Swimming pool</Item>
-        <Item key="breakfast">Breakfast</Item>
-      </TagGroup>
-      <p>Current selection (controlled): {selected === 'all' ? 'all' : [...selected].join(', ')}</p>
-    </>
-  );
-}
-```
-
-### Links
-
-Tags may be links to another page or website. This can be achieved by passing the `href` prop to the `<Item>` component. Tags with an `href` are not selectable.
-
-```tsx example
-<TagGroup label="Links">
-  <Item href="https://adobe.com/" target="_blank">Adobe</Item>
-  <Item href="https://apple.com/" target="_blank">Apple</Item>
-  <Item href="https://google.com/" target="_blank">Google</Item>
-  <Item href="https://microsoft.com/" target="_blank">Microsoft</Item>
-</TagGroup>
-```
-
-```css hidden
-.tag-group [role="row"][data-href] {
-  cursor: pointer;
-}
-```
-
-#### Client side routing
-
-The `<Item>` component works with frameworks and client side routers like [Next.js](https://nextjs.org/) and [React Router](https://reactrouter.com/en/main). As with other React Aria components that support links, this works via the <TypeLink links={utilsDocs.links} type={utilsDocs.exports.RouterProvider} /> component at the root of your app. See the [framework setup guide](../frameworks) to learn how to set this up.
-
-### Disabled tags
-
-TagGroup supports marking items as disabled using the `disabledKeys` prop. Each key in this list
-corresponds with the `key` prop passed to the `Item` component, or automatically derived from the values passed
-to the `items` prop. Disabled items are not focusable, selectable, or keyboard navigable.
-See [Collections](v3:collections.html) for more details.
-
-```tsx example
-<TagGroup label="Sandwich contents" selectionMode="multiple" disabledKeys={['tuna']}>
-  <Item key="lettuce">Lettuce</Item>
-  <Item key="tomato">Tomato</Item>
-  <Item key="cheese">Cheese</Item>
-  <Item key="tuna">Tuna Salad</Item>
-  <Item key="egg">Egg Salad</Item>
-  <Item key="ham">Ham</Item>
-</TagGroup>
-```
-
-### Description
-
-The `description` prop can be used to associate additional help text with a tag group.
-
-```tsx example
-<TagGroup label="Categories" description="Your selected categories.">
-  <Item key="news">News</Item>
-  <Item key="travel">Travel</Item>
-  <Item key="gaming">Gaming</Item>
-  <Item key="shopping">Shopping</Item>
-</TagGroup>
-```
-
-### Error message
-
-The `errorMessage` prop can be used to help the user fix a validation error.
-
-```tsx example
-<TagGroup label="Categories" errorMessage="Invalid set of categories.">
-  <Item key="news">News</Item>
-  <Item key="travel">Travel</Item>
-  <Item key="gaming">Gaming</Item>
-  <Item key="shopping">Shopping</Item>
-</TagGroup>
-```
diff --git a/packages/react-aria/docs/textfield/useTextField.mdx b/packages/react-aria/docs/textfield/useTextField.mdx
deleted file mode 100644
index c8a9072ddf7..00000000000
--- a/packages/react-aria/docs/textfield/useTextField.mdx
+++ /dev/null
@@ -1,223 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/textfield';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/textfield/package.json';
-import Anatomy from './anatomy.svg';
-
-
----
-category: Forms
-keywords: [textfield, textbox, input, label, aria]
----
-
-# useTextField
-
-<PageDescription>{docs.exports.useTextField.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useTextField']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/TR/wai-aria-1.2/#textbox'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useTextField} links={docs.links} />
-
-## Features
-
-Text fields can be built with [&lt;input&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
-or [&lt;textarea&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)
-and [&lt;label&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) elements,
-but you must manually ensure that they are semantically connected via ids for accessibility.
-`useTextField` helps automate this, and handle other accessibility features while
-allowing for custom styling.
-
-* Built with a native `<input>` or `<textarea>` element
-* Visual and ARIA labeling support
-* Change, clipboard, composition, selection, and input event support
-* Support for native HTML constraint validation with customizable UI, custom validation functions, realtime validation, and server-side validation errors
-* Support for description and error message help text linked to the input via ARIA
-
-## Anatomy
-
-<Anatomy />
-
-Text fields consist of an input element and a label. `useTextField` automatically manages
-the relationship between the two elements using the `for` attribute on the `<label>` element
-and the `aria-labelledby` attribute on the `<input>` element.
-
-`useTextField` also supports optional description and error message elements, which can be used
-to provide more context about the field, and any validation messages. These are linked with the
-input via the `aria-describedby` attribute.
-
-`useTextField` returns props that you should spread onto the appropriate element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTextField.return.base?.id ?? docs.exports.useTextField.return.id].properties} />
-</TypeContext.Provider>
-
-If there is no visual label, an `aria-label` or `aria-labelledby` prop must be passed instead
-to identify the element to screen readers.
-
-## Example
-
-```tsx example export=true
-import type {AriaTextFieldProps} from '@react-aria/textfield';
-import {useTextField} from '@react-aria/textfield';
-
-function TextField(props: AriaTextFieldProps) {
-  let {label} = props;
-  let ref = React.useRef(null);
-  let {labelProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors} = useTextField(props, ref);
-
-  return (
-    <div style={{display: 'flex', flexDirection: 'column', width: 200}}>
-      <label {...labelProps}>{label}</label>
-      <input {...inputProps} ref={ref} />
-      {props.description && <div {...descriptionProps} style={{fontSize: 12}}>{props.description}</div>}
-      {isInvalid && <div {...errorMessageProps} style={{color: 'red', fontSize: 12}}>{validationErrors.join(' ')}</div>}
-    </div>
-  );
-}
-
-<TextField label="Email" />
-```
-
-### Text area
-
-`useTextField` also supports multi-line text entry with the `<textarea>` element via the `inputElementType` prop.
-
-```tsx example
-import type {AriaTextFieldProps} from '@react-aria/textfield';
-import {useTextField} from '@react-aria/textfield';
-
-function TextArea(props: AriaTextFieldProps<HTMLTextAreaElement>) {
-  let {label} = props;
-  let ref = React.useRef(null);
-  let {labelProps, inputProps} = useTextField({...props, inputElementType: 'textarea'}, ref);
-
-  return (
-    <div style={{display: 'flex', flexDirection: 'column', width: 200}}>
-      <label {...labelProps}>{label}</label>
-      <textarea {...inputProps} ref={ref} />
-    </div>
-  );
-}
-
-<TextArea label="Description" />
-```
-
-## Usage
-
-The following examples show how to use the `TextField` component created in the above example.
-
-### Default value
-
-A TextField's `value` is empty by default, but an initial, uncontrolled, value can be provided using the `defaultValue` prop.
-
-```tsx example
-<TextField
-  label="Email"
-  defaultValue="me@email.com" />
-```
-
-### Controlled value
-
-The `value` prop can be used to make the value controlled. The `onChange` event is fired when the user edits the text, and receives the new value.
-
-```tsx example
-function Example() {
-  let [text, setText] = React.useState('');
-
-  return (
-    <>
-      <TextField label="Your text" onChange={setText} />
-      <p>Mirrored text: {text}</p>
-    </>
-  );
-}
-```
-
-### Description
-
-The `description` prop can be used to associate additional help text with a text field.
-
-```tsx example
-<TextField
-  label="Email"
-  description="Enter an email for us to contact you about your order." />
-```
-
-### Validation
-
-useTextField supports HTML constraint validation props such as `isRequired`, `type="email"`, `minLength`, and `pattern`, as well as custom validation functions, realtime validation, and server-side validation. It can also be integrated with other form libraries. See the [Forms](../forms) guide to learn more.
-
-When a TextField has the `validationBehavior="native"` prop, validation errors block form submission. To display validation errors, use the `validationErrors` and `errorMessageProps` returned by `useTextField`. This allows you to render error messages from all of the above sources with consistent custom styles.
-
-```tsx example
-<form>
-  <TextField
-    label="Email"
-    name="email"
-    /*- begin highlight -*/
-    type="email"
-    isRequired
-    validationBehavior="native"
-    /*- end highlight -*/
-  />
-  <input type="submit" style={{marginTop: 8}} />
-</form>
-```
-
-### Disabled
-
-A TextField can be disabled using the `isDisabled` prop.
-
-```tsx example
-<TextField label="Email" isDisabled />
-```
-
-### Read only
-
-The `isReadOnly` boolean prop makes the TextField's text content immutable. Unlike `isDisabled`, the TextField remains focusable
-and the contents can still be copied. See [the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.
-
-```tsx example
-<TextField label="Email" defaultValue="abc@adobe.com" isReadOnly />
-```
-
-### Required
-
-A TextField can be marked as required using the `isRequired` prop. This is exposed to assistive technologies by React Aria. It's your responsibility to add additional visual styling if needed.
-
-```tsx example
-<TextField label="Email" isRequired />
-```
-
-### HTML forms
-
-TextField supports the `name` prop for integration with HTML forms. In addition, attributes such as `type`, `pattern`, `inputMode`, and others are passed through to the underlying `<input>` element.
-
-```tsx example
-<TextField label="Email" name="email" type="email" />
-```
-
-## Internationalization
-
-### RTL
-
-In right-to-left languages, text fields should be mirrored. The label should be right aligned,
-along with the text in the text field. Ensure that your CSS accounts for this.
diff --git a/packages/react-aria/docs/toast/useToast.mdx b/packages/react-aria/docs/toast/useToast.mdx
deleted file mode 100644
index d89f5fe0586..00000000000
--- a/packages/react-aria/docs/toast/useToast.mdx
+++ /dev/null
@@ -1,371 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/toast';
-import statelyDocs from 'docs:@react-stately/toast';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, PageDescription, TypeLink} from '@react-spectrum/docs';
-import packageData from '@react-aria/toast/package.json';
-import Anatomy from './toast-anatomy.svg';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import {Keyboard} from '@react-spectrum/text';
-
-```tsx import
-import {useToastRegion} from '@react-aria/toast';
-```
-
----
-category: Status
-keywords: [toast, notifications, alert, aria]
----
-
-# useToast
-
-<PageDescription>{docs.exports.useToast.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useToastRegion', 'useToast']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useToastRegion} links={docs.links} />
-<FunctionAPI function={docs.exports.useToast} links={docs.links} />
-
-## Features
-
-There is no built in way to display toast notifications in HTML. <TypeLink links={docs.links} type={docs.exports.useToastRegion} /> and <TypeLink links={docs.links} type={docs.exports.useToast} /> help achieve accessible toasts that can be styled as needed.
-
-* **Accessible** – Toasts follow the [ARIA alertdialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/). They are rendered in a [landmark region](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/), which keyboard and screen reader users can easily jump to when an alert is announced.
-* **Focus management** – When a toast unmounts, focus is moved to the next toast if any. Otherwise, focus is restored to where it was before navigating to the toast region. Tabbing through the Toast region will move from newest to oldest.
-
-## Anatomy
-
-<Anatomy role="img" aria-label="Toast anatomy diagram, showing the toast's title and close button within the toast region." />
-
-A toast region is an [ARIA landmark region](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/) labeled "Notifications" by default. A toast region contains one or more visible toasts, in chronological order. When the limit is reached, additional toasts are queued until the user dismisses one. Each toast is a non-modal ARIA [alertdialog](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/), containing the content of the notification and a close button.
-
-Landmark regions including the toast container can be navigated using the keyboard by pressing the <Keyboard>F6</Keyboard> key to move forward, and the <Keyboard>Shift</Keyboard> + <Keyboard>F6</Keyboard> key to move backward. This provides an easy way for keyboard users to jump to the toasts from anywhere in the app. When the last toast is closed, keyboard focus is restored.
-
-`useToastRegion` returns props that you should spread onto the toast container element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useToastRegion.return.id].properties} />
-</TypeContext.Provider>
-
-`useToast` returns props that you should spread onto an individual toast and its child elements:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useToast.return.id].properties} />
-</TypeContext.Provider>
-
-## Example
-
-Toasts consist of three components. The first is a `ToastProvider` component which will manage the state for the toast queue with the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useToastState} /> hook. Alternatively, you could use a global toast queue ([see below](#global-toast-queue)).
-
-```tsx
-import {useToastState} from '@react-stately/toast';
-
-function ToastProvider({children, ...props}) {
-  let state = useToastState({
-    maxVisibleToasts: 5
-  });
-
-  return (
-    <>
-      {children(state)}
-      {state.visibleToasts.length > 0 && <ToastRegion {...props} state={state} />}
-    </>
-  );
-}
-```
-
-```tsx import
-// Actual implementation we use in the docs, using global queue.
-function ToastProvider({children}) {
-  return children(toastQueue);
-}
-```
-
-The `ToastRegion` component will be rendered when there are toasts to display. It uses the <TypeLink links={docs.links} type={docs.exports.useToastRegion} /> hook to create a landmark region, allowing keyboard and screen reader users to easily navigate to it.
-
-```tsx example export=true render=false
-import type {AriaToastRegionProps} from '@react-aria/toast';
-import type {ToastState} from '@react-stately/toast';
-import {useToastRegion} from '@react-aria/toast';
-
-interface ToastRegionProps<T> extends AriaToastRegionProps {
-  state: ToastState<T>
-}
-
-function ToastRegion<T extends React.ReactNode>({state, ...props}: ToastRegionProps<T>) {
-  let ref = React.useRef(null);
-  let {regionProps} = useToastRegion(props, state, ref);
-
-  return (
-    <div {...regionProps} ref={ref} className="toast-region">
-      {state.visibleToasts.map(toast => (
-        <Toast key={toast.key} toast={toast} state={state} />
-      ))}
-    </div>
-  );
-}
-```
-
-Finally, we need the `Toast` component to render an individual toast within a `ToastRegion`, built with <TypeLink links={docs.links} type={docs.exports.useToast} />.
-
-```tsx example render=false export=true
-import type {AriaToastProps} from '@react-aria/toast';
-import {useToast} from '@react-aria/toast';
-
-// Reuse the Button from your component library. See below for details.
-import {Button} from 'your-component-library';
-
-interface ToastProps<T> extends AriaToastProps<T> {
-  state: ToastState<T>
-}
-
-function Toast<T extends React.ReactNode>({state, ...props}: ToastProps<T>) {
-  let ref = React.useRef(null);
-  let {toastProps, contentProps, titleProps, closeButtonProps} = useToast(props, state, ref);
-
-  return (
-    <div {...toastProps} ref={ref} className="toast">
-      <div {...contentProps}>
-        <div {...titleProps}>{props.toast.content}</div>
-      </div>
-      <Button {...closeButtonProps}>x</Button>
-    </div>
-  );
-}
-```
-
-```tsx example
-<ToastProvider>
-  {state => (
-    <Button onPress={() => state.add('Toast is done!')}>Show toast</Button>
-  )}
-</ToastProvider>
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-.toast-region {
-  position: fixed;
-  bottom: 16px;
-  right: 16px;
-  display: flex;
-  flex-direction: column-reverse;
-  gap: 8px;
-}
-
-.toast {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  background: slateblue;
-  color: white;
-  padding: 12px 16px;
-  border-radius: 8px;
-}
-
-.toast button {
-  background: none;
-  border: none;
-  appearance: none;
-  border-radius: 50%;
-  height: 32px;
-  width: 32px;
-  font-size: 16px;
-  border: 1px solid white;
-  color: white;
-  padding: 0;
-}
-
-.toast button:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px slateblue, 0 0 0 4px white;
-}
-
-.toast button:active {
-  background: rgba(255, 255, 255, 0.2);
-}
-```
-
-</details>
-
-### Button
-
-The `Button` component is used in the above example to close a toast. It is built using the [useButton](../Button/useButton.html) hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useButton} from '@react-aria/button';
-
-function Button(props) {
-  let ref = React.useRef(null);
-  let {buttonProps} = useButton(props, ref);
-  return <button {...buttonProps} ref={ref}>{props.children}</button>;
-}
-```
-
-</details>
-
-## Usage
-
-The following examples show how to use the `ToastProvider` component created in the above example.
-
-### Auto-dismiss
-
-Toasts support a `timeout` option to automatically hide them after a certain amount of time. For accessibility, toasts should have a minimum timeout of 5 seconds to give users enough time to read them. If a toast includes action buttons or other interactive elements it should not auto dismiss. In addition, timers will automatically pause when the user focuses or hovers over a toast.
-
-Be sure only to automatically dismiss toasts when the information is not important, or may be found elsewhere. Some users may require additional time to read a toast message, and screen zoom users may miss toasts entirely.
-
-```tsx example
-<ToastProvider>
-  {state => (
-    ///- begin highlight -///
-    <Button onPress={() => state.add('Toast still toasting!', {timeout: 5000})}>
-    {/*- end highlight -*/}
-      Show toast
-    </Button>
-  )}
-</ToastProvider>
-```
-
-### Programmatic dismissal
-
-Toasts may be programmatically dismissed if they become irrelevant before the user manually closes them. `state.add` returns a key for the toast which may be passed to `state.close` to dismiss the toast.
-
-```tsx example
-function Example() {
-  let [toastKey, setToastKey] = React.useState(null);
-
-  return (
-    <ToastProvider>
-      {state => (
-        <Button
-          onPress={() => {
-            if (!toastKey) {
-              ///- begin highlight -///
-              setToastKey(state.add('Unable to save', {onClose: () => setToastKey(null)}));
-              ///- end highlight -///
-            } else {
-              ///- begin highlight -///
-              state.close(toastKey);
-              ///- end highlight -///
-            }
-          }}>
-          {toastKey ? 'Hide' : 'Show'} Toast
-        </Button>
-      )}
-    </ToastProvider>
-  );
-}
-```
-
-## Advanced topics
-
-### Global toast queue
-
-In the above examples, each `ToastProvider` has a separate queue. This setup is simple, and fine for most cases where you can wrap the entire app in a single `ToastProvider`. However, in more complex situations, you may want to keep the toast queue outside the React tree so that toasts can be queued from anywhere. This can be done by creating your own <TypeLink links={statelyDocs.links} type={statelyDocs.exports.ToastQueue} /> and subscribing to it using the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useToastQueue} /> hook rather than `useToastState`.
-
-```tsx example export=true hidden
-import {ToastQueue, useToastQueue} from '@react-stately/toast';
-import {createPortal} from 'react-dom';
-
-// Create a global toast queue.
-///- begin highlight -///
-const toastQueue = new ToastQueue({
-  maxVisibleToasts: 5
-});
-///- end highlight -///
-
-function GlobalToastRegion(props) {
-  // Subscribe to it.
-  ///- begin highlight -///
-  let state = useToastQueue(toastQueue);
-  ///- end highlight -///
-
-  // Render toast region.
-  return state.visibleToasts.length > 0
-    ? createPortal(<ToastRegion {...props} state={state} />, document.body)
-    : null;
-}
-
-// Render it somewhere in your app.
-<GlobalToastRegion />
-```
-
-Now you can queue a toast from anywhere:
-
-```tsx example
-<Button onPress={() => toastQueue.add('Toast is done!')}>Show toast</Button>
-```
-
-### TypeScript
-
-A `ToastQueue` and `useToastState` use a generic type to represent toast content. The examples so far have used strings, but you can type this however you want to enable passing custom objects or options. This example uses a custom object to support toasts with both a title and description.
-
-```tsx
-import type {QueuedToast} from '@react-stately/toast';
-
-/*- begin highlight -*/
-interface MyToast {
-  title: string,
-  description: string
-}
-/*- end highlight -*/
-
-function ToastProvider() {
-  /*- begin highlight -*/
-  let state = useToastState<MyToast>();
-  /*- end highlight -*/
-
-  // ...
-}
-
-interface ToastProps {
-  /*- begin highlight -*/
-  toast: QueuedToast<MyToast>
-  /*- end highlight -*/
-}
-
-function Toast(props: ToastProps) {
-  // ...
-
-  let {toastProps, titleProps, descriptionProps, closeButtonProps} = useToast(props, state, ref);
-
-  return (
-    <div {...toastProps} ref={ref} className="toast">
-      <div>
-        {/*- begin highlight -*/}
-        <div {...titleProps}>{props.toast.content.title}</div>
-        <div {...descriptionProps}>{props.toast.content.description}</div>
-        {/*- end highlight -*/}
-      </div>
-      <Button {...closeButtonProps}>x</Button>
-    </div>
-  );
-}
-
-// Queuing a toast
-/*- begin highlight -*/
-state.add({title: 'Success!', description: 'Toast is done.'});
-/*- end highlight -*/
-```
diff --git a/packages/react-aria/docs/toolbar/useToolbar.mdx b/packages/react-aria/docs/toolbar/useToolbar.mdx
deleted file mode 100644
index 0edaaeeb962..00000000000
--- a/packages/react-aria/docs/toolbar/useToolbar.mdx
+++ /dev/null
@@ -1,159 +0,0 @@
-{/* Copyright 2023 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/toolbar';
-import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
-import {HeaderInfo, FunctionAPI, TypeContext, TypeLink, InterfaceType, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/toolbar/package.json';
-import Anatomy from './toolbar-anatomy.svg';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
-
----
-category: Content
-keywords: [toolbar, aria]
----
-
-# useToolbar
-
-<PageDescription>{docs.exports.useToolbar.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useToolbar']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useToolbar} links={docs.links} />
-
-## Features
-
-There is no native element to implement a toolbar in HTML. `useToolbar`
-helps achieve accessible toolbar components that can be styled as needed.
-
-* Exposed to assistive technology as a `toolbar` element via ARIA
-* Support for arrow key navigation
-* Support for both horizontal and vertical orientations
-* Support for interactive children including button, toggle button, menu, checkbox, and link
-* Automatic scrolling support during keyboard navigation
-
-## Anatomy
-
-<Anatomy />
-
-A toolbar consists of a container element for a set of interactive controls.
-`useToolbar` handles exposing this to assistive technology using ARIA, along with
- handling arrow key navigation between children.
-
-`useToolbar` returns props that you should spread onto the appropriate element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useToolbar.return.id].properties} />
-</TypeContext.Provider>
-
-An `aria-label` or `aria-labelledby` prop must be provided to identify the toolbar to assistive technology.
-
-## Example
-
-### Toolbar
-
-This example uses the <TypeLink links={docs.links} type={docs.exports.useToolbar} /> hook, spread on a container to handle
-navigation of components inside it.
-
-```tsx example
-import {useToolbar} from '@react-aria/toolbar';
-import {useRef} from 'react';
-
-// Reuse the Button from your component library. See below for details.
-import {Button} from 'your-component-library';
-
-function Toolbar(props) {
-  let ref = useRef<HTMLDivElement | null>(null);
-  // Get props for the toolbar element
-  let {toolbarProps} = useToolbar(props, ref);
-
-  return (
-    <div {...toolbarProps} ref={ref}>
-      {props.children}
-    </div>
-  );
-}
-
-<Toolbar aria-label="Actions">
-  <Button>Copy</Button>
-  <Button>Cut</Button>
-  <Button>Paste</Button>
-</Toolbar>
-```
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
-
-```css
-[role=toolbar] {
-  --separator-color: var(--spectrum-global-color-gray-500);
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-}
-```
-
-</details>
-
-### Button
-
-The `Button` component is used in the above example as an interactive child. It is built using the [useButton](../Button/useButton.html) hook, and can be shared with many other components.
-
-<details>
-  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
-
-```tsx example export=true render=false
-import {useButton} from '@react-aria/button';
-
-function Button(props) {
-  let {children} = props;
-  let ref = useRef<HTMLButtonElement | null>(null);
-  let {buttonProps, isPressed} = useButton({
-    ...props,
-    elementType: 'span'
-  }, ref);
-
-  return (
-    <span
-      {...buttonProps}
-      style={{
-        background: isPressed ? '#bbb' : '#aaa',
-        color: 'black',
-        cursor: 'default',
-        padding: '5px 10px'
-      }}
-      ref={ref}>
-      {children}
-    </span>
-  );
-}
-```
-
-</details>
-
-## Internationalization
-
-You are responsible for localizing all labels, both for the toolbar itself as well as all the
-content that is passed into the toolbar.
-
-### RTL
-
-In right-to-left languages, the toolbar should be mirrored both at the toolbar level as well as inside groups as appropriate.
-Ensure that your CSS accounts for this.
diff --git a/packages/react-aria/docs/tooltip/useTooltipTrigger.mdx b/packages/react-aria/docs/tooltip/useTooltipTrigger.mdx
deleted file mode 100644
index f276fecffbc..00000000000
--- a/packages/react-aria/docs/tooltip/useTooltipTrigger.mdx
+++ /dev/null
@@ -1,186 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/tooltip';
-import statelyDocs from 'docs:@react-stately/tooltip';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-aria/tooltip/package.json';
-import Anatomy from './anatomy.svg';
-
----
-category: Overlays
-keywords: [tooltip, aria]
----
-
-# useTooltipTrigger
-
-<PageDescription>{docs.exports.useTooltipTrigger.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useTooltipTrigger', 'useTooltip']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/TR/wai-aria-1.2/#tooltip'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useTooltipTrigger} links={docs.links} />
-<FunctionAPI function={docs.exports.useTooltip} links={docs.links} />
-
-## Features
-
-The HTML `title` attribute can be used to create a tooltip, but it cannot be styled. Custom styled
-tooltips can be hard to build in an accessible way. `useTooltipTrigger` and `useTooltip` help build
-fully accessible tooltips that can be styled as needed.
-
-* Keyboard focus management and cross browser normalization
-* Hover management and cross browser normalization
-* Labeling support for screen readers (aria-describedby)
-* Exposed as a tooltip to assistive technology via ARIA
-* Matches native tooltip behavior with delay on hover of first tooltip and no delay on subsequent tooltips.
-
-## Anatomy
-
-<Anatomy />
-
-A tooltip consists of two parts: the trigger element and the tooltip itself.
-Users may reveal the tooltip by hovering or focusing the trigger.
-
-`useTooltipTrigger` returns props to be spread onto its target trigger and the tooltip:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTooltipTrigger.return.id].properties} />
-</TypeContext.Provider>
-
-`useTooltip` returns props to be spread onto the tooltip:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTooltip.return.id].properties} />
-</TypeContext.Provider>
-
-Tooltip state is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTooltipTriggerState} />
-hook in `@react-stately/tooltip`. The state object should be passed as an option to `useTooltipTrigger` and `useTooltip`.
-
-## Example
-
-This example implements a Tooltip that renders in an absolute position next to its target. The <TypeLink links={docs.links} type={docs.exports.useTooltip} /> hook applies the correct ARIA attributes to the tooltip, and `useTooltipTrigger` associates it to the trigger element.
-
-Two instances of the example are rendered to demonstrate the behavior of the delay on hover. If you hover over the first button, the tooltip will be shown after a delay. Hovering over the second button shows the tooltip immediately. If you wait for a delay before hovering another element, the delay restarts.
-
-```tsx example export=true
-import {useTooltip, useTooltipTrigger} from '@react-aria/tooltip';
-import {useTooltipTriggerState} from '@react-stately/tooltip';
-import {mergeProps} from '@react-aria/utils';
-
-function Tooltip({state, ...props}) {
-  let {tooltipProps} = useTooltip(props, state);
-
-  return (
-    <span
-      style={{
-        position: 'absolute',
-        left: '5px',
-        top: '100%',
-        maxWidth: 150,
-        marginTop: '10px',
-        backgroundColor: 'white',
-        color: 'black',
-        padding: '5px',
-        border: '1px solid gray'
-      }}
-      {...mergeProps(props, tooltipProps)} >
-      {props.children}
-    </span>
-  );
-}
-
-function TooltipButton(props) {
-  let state = useTooltipTriggerState(props);
-  let ref = React.useRef(null);
-
-  // Get props for the trigger and its tooltip
-  let {triggerProps, tooltipProps} = useTooltipTrigger(props, state, ref);
-
-  return (
-    <span style={{position: 'relative'}}>
-      <button ref={ref} {...triggerProps} style={{fontSize: 18}} onClick={() => alert('Pressed button')}>{props.children}</button>
-      {state.isOpen && (
-        <Tooltip state={state} {...tooltipProps}>{props.tooltip}</Tooltip>
-      )}
-    </span>
-  );
-}
-
-<TooltipButton tooltip="Edit">✏️</TooltipButton>
-<TooltipButton tooltip="Delete">🚮</TooltipButton>
-```
-
-## Usage
-
-The following examples show how to use the `TooltipButton` component created in the above example.
-
-### Delay
-
-Tooltips appear after a short delay when hovering the trigger, or instantly when using keyboard focus. This delay can be adjusted for hover using the `delay` prop.
-
-```tsx example
-<TooltipButton tooltip="Save" delay={0}>💾</TooltipButton>
-```
-
-### Close Delay
-
-Tooltips disappear after a short delay when no longer hovering the trigger, or instantly when using keyboard focus. This delay can be adjusted for hover using the `closeDelay` prop.
-
-```tsx example
-<TooltipButton tooltip="Refresh" closeDelay={0}>🔄</TooltipButton>
-```
-
-### Trigger
-
-By default, tooltips appear both on hover and on focus. The `trigger` prop can be set to `"focus"` to display the tooltip only on focus, and not on hover.
-
-```tsx example
-<TooltipButton tooltip="Burn CD" trigger="focus">💿</TooltipButton>
-```
-
-### Controlled open state
-
-The open state of the tooltip can be controlled via the `defaultOpen` and `isOpen` props.
-
-
-```tsx example
-function Example() {
-  let [isOpen, setOpen] = React.useState(false);
-
-  return (
-    <>
-      <p>Tooltip is {isOpen ? 'showing' : 'not showing'}</p>
-      <TooltipButton tooltip="Notifications" isOpen={isOpen} onOpenChange={setOpen}>📣</TooltipButton>
-    </>
-  );
-}
-```
-
-### Disabled
-
-The `isDisabled` prop can be provided to a TooltipTrigger to disable the tooltip, without disabling the trigger it displays on.
-
-```tsx example
-<TooltipButton tooltip="Print" isDisabled>🖨</TooltipButton>
-```
-
-## Internationalization
-
-### RTL
-
-In right-to-left languages, tooltips should be mirrored across trigger. Ensure that your CSS and overlay positioning (if any) accounts for this.
diff --git a/packages/react-aria/exports/index.ts b/packages/react-aria/exports/index.ts
index 21ebf17a085..84ae4850e3a 100644
--- a/packages/react-aria/exports/index.ts
+++ b/packages/react-aria/exports/index.ts
@@ -165,6 +165,13 @@ export {useId} from '../src/utils/useId';
 export {useObjectRef} from '../src/utils/useObjectRef';
 export {RouterProvider} from '../src/utils/openLink';
 export {VisuallyHidden, useVisuallyHidden} from '../src/visually-hidden/VisuallyHidden';
+export {
+  useTokenField,
+  tokenFieldPositionToDOMRange,
+  setTokenFieldSelection,
+  getSelection
+} from '../src/tokenfield/useTokenField';
+export {useToken} from '../src/tokenfield/useToken';
 
 export type {
   AriaAutocompleteProps,
@@ -328,6 +335,7 @@ export type {FocusWithinProps, FocusWithinResult} from '../src/interactions/useF
 export type {HoverProps, HoverResult} from '../src/interactions/useHover';
 export type {InteractOutsideProps} from '../src/interactions/useInteractOutside';
 export type {KeyboardProps, KeyboardResult} from '../src/interactions/useKeyboard';
+export type {KeyboardShortcutBindings} from '../src/interactions/createKeyboardShortcutHandler';
 export type {LongPressProps, LongPressResult} from '../src/interactions/useLongPress';
 export type {
   ContextMenuProps,
@@ -486,3 +494,5 @@ export type {AriaTreeProps, TreeProps, TreeAria, AriaTreeOptions} from '../src/t
 export type {AriaTreeItemOptions, TreeItemAria} from '../src/tree/useTreeItem';
 export type {VisuallyHiddenAria, VisuallyHiddenProps} from '../src/visually-hidden/VisuallyHidden';
 export type {Key, Orientation, RangeValue} from '@react-types/shared';
+export type {TokenProps, TokenAria} from '../src/tokenfield/useToken';
+export type {AriaTokenFieldProps, TokenFieldAria} from '../src/tokenfield/useTokenField';
diff --git a/packages/react-aria/exports/useTokenField.ts b/packages/react-aria/exports/useTokenField.ts
index b57c1c8c7b8..61f3de508a0 100644
--- a/packages/react-aria/exports/useTokenField.ts
+++ b/packages/react-aria/exports/useTokenField.ts
@@ -10,7 +10,11 @@
  * governing
  */
 
-export {useTokenField, positionToDOMRange, setSelection} from '../src/tokenfield/useTokenField';
+export {
+  useTokenField,
+  tokenFieldPositionToDOMRange,
+  setTokenFieldSelection
+} from '../src/tokenfield/useTokenField';
 export {useToken} from '../src/tokenfield/useToken';
 export type {TokenFieldAria, AriaTokenFieldProps} from '../src/tokenfield/useTokenField';
 export type {TokenAria, TokenProps} from '../src/tokenfield/useToken';
diff --git a/packages/react-aria/src/tokenfield/useToken.ts b/packages/react-aria/src/tokenfield/useToken.ts
index 1f7996e4bba..9f51ed2ec75 100644
--- a/packages/react-aria/src/tokenfield/useToken.ts
+++ b/packages/react-aria/src/tokenfield/useToken.ts
@@ -16,10 +16,16 @@ import {useEvent} from '../utils/useEvent';
 export interface TokenProps {}
 
 export interface TokenAria {
+  /** Props for the token element. */
   tokenProps: HTMLAttributes<HTMLSpanElement>;
+  /** Whether the token is currently selected. */
   isSelected: boolean;
 }
 
+/**
+ * Provides the behavior and accessibility implementation for a token within a token field.
+ * A token field allows users to enter text with inline tokens.
+ */
 export function useToken(
   // Unused but matches the normal signature.
   _props: TokenProps,
diff --git a/packages/react-aria/src/tokenfield/useTokenField.ts b/packages/react-aria/src/tokenfield/useTokenField.ts
index 9359385b7a8..99374c93dfd 100644
--- a/packages/react-aria/src/tokenfield/useTokenField.ts
+++ b/packages/react-aria/src/tokenfield/useTokenField.ts
@@ -90,6 +90,13 @@ export interface TokenFieldAria {
 
 const CLIPBOARD_MIME_TYPE = 'application/vnd.react-aria.tokens+json';
 
+/**
+ * Provides the behavior and accessibility implementation for a token field.
+ * A token field allows users to enter text with inline tokens.
+ *
+ * @param props - Props for the token field.
+ * @param state - State for the token field, as returned by `useTokenFieldState`.
+ */
 export function useTokenField<T extends TokenFieldValue = TokenFieldValue>(
   props: AriaTokenFieldProps<T>,
   state: TokenFieldState,
@@ -411,7 +418,7 @@ export function useTokenField<T extends TokenFieldValue = TokenFieldValue>(
       let end = value.findLineBoundary(selection[1], Direction.Forward);
       if (start && end) {
         e.preventDefault();
-        setSelection(ref.current!, start, end, true);
+        setTokenFieldSelection(ref.current!, start, end, true);
       }
     }
   });
@@ -654,11 +661,15 @@ function getPosition(container: Element, node: Node, offset: number): Position {
 let isProgrammaticSelectionChange = Symbol('isProgrammaticSelectionChange');
 
 function setCursor(root: Element, pos: Position, fireEvent = false) {
-  setSelection(root, pos, pos, fireEvent);
+  setTokenFieldSelection(root, pos, pos, fireEvent);
 }
 
-// Exported for tests.
-export function setSelection(root: Element, start: Position, end: Position, fireEvent = false) {
+export function setTokenFieldSelection(
+  root: Element,
+  start: Position,
+  end: Position,
+  fireEvent = false
+) {
   let selection = window.getSelection();
   if (selection) {
     let range = createDOMRange(root, start, end);
@@ -668,7 +679,7 @@ export function setSelection(root: Element, start: Position, end: Position, fire
   }
 }
 
-export function positionToDOMRange(root: Element, pos: Position): Range {
+export function tokenFieldPositionToDOMRange(root: Element, pos: Position): Range {
   return createDOMRange(root, pos, pos);
 }
 
diff --git a/packages/react-stately/docs/autocomplete/useAutocompleteState.mdx b/packages/react-stately/docs/autocomplete/useAutocompleteState.mdx
deleted file mode 100644
index 10962de8d01..00000000000
--- a/packages/react-stately/docs/autocomplete/useAutocompleteState.mdx
+++ /dev/null
@@ -1,44 +0,0 @@
-{/* Copyright 2025 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/autocomplete';
-import {ClassAPI, HeaderInfo, FunctionAPI, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/autocomplete/package.json';
-import {InlineAlert, Content, Heading} from '@adobe/react-spectrum';
-
----
-category: Pickers
-keywords: [autocomplete, state]
-preRelease: beta
----
-
-# useAutocompleteState
-
-<PageDescription>{docs.exports.useAutocompleteState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useAutocompleteState']} />
-
-<InlineAlert variant="notice" marginTop={60}>
-  <Heading>Under construction</Heading>
-  <Content>This hook is in <strong>beta</strong>. More documentation is coming soon!</Content>
-</InlineAlert>
-
-## API
-
-<FunctionAPI function={docs.exports.useAutocompleteState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useAutocompleteState.return.id]} />
-
diff --git a/packages/react-stately/docs/calendar/useCalendarState.mdx b/packages/react-stately/docs/calendar/useCalendarState.mdx
deleted file mode 100644
index b840c6e41fa..00000000000
--- a/packages/react-stately/docs/calendar/useCalendarState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/calendar';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/calendar/package.json';
-
----
-category: Date and Time
-keywords: [date, calendar, state]
----
-
-# useCalendarState
-
-<PageDescription>{docs.exports.useCalendarState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useCalendarState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useCalendarState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useCalendarState.return.base.id]} />
-
-## Example
-
-See the docs for [useCalendar](useCalendar.html) in react-aria for an example of `useCalendarState`.
diff --git a/packages/react-stately/docs/calendar/useRangeCalendarState.mdx b/packages/react-stately/docs/calendar/useRangeCalendarState.mdx
deleted file mode 100644
index 2de01bfae3c..00000000000
--- a/packages/react-stately/docs/calendar/useRangeCalendarState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/calendar';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/calendar/package.json';
-
----
-category: Date and Time
-keywords: [date, calendar, state]
----
-
-# useRangeCalendarState
-
-<PageDescription>{docs.exports.useRangeCalendarState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useRangeCalendarState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useRangeCalendarState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useRangeCalendarState.return.base.id]} />
-
-## Example
-
-See the docs for [useRangeCalendar](useRangeCalendar.html) in react-aria for an example of `useRangeCalendarState`.
diff --git a/packages/react-stately/docs/checkbox/useCheckboxGroupState.mdx b/packages/react-stately/docs/checkbox/useCheckboxGroupState.mdx
deleted file mode 100644
index 7108633db8a..00000000000
--- a/packages/react-stately/docs/checkbox/useCheckboxGroupState.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/checkbox';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/checkbox/package.json';
-
----
-category: Forms
-keywords: [toggle, checkbox, switch, input, state]
----
-
-# useCheckboxGroupState
-
-<PageDescription>{docs.exports.useCheckboxGroupState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useCheckboxGroupState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useCheckboxGroupState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useCheckboxGroupState.return.id]} />
diff --git a/packages/react-stately/docs/color/useColorAreaState.mdx b/packages/react-stately/docs/color/useColorAreaState.mdx
deleted file mode 100644
index 6283ebb522a..00000000000
--- a/packages/react-stately/docs/color/useColorAreaState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2022 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/color';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/color/package.json';
-
----
-category: Color
-keywords: [color picker, color area, state]
----
-
-# useColorAreaState
-
-<PageDescription>{docs.exports.useColorAreaState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useColorAreaState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useColorAreaState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useColorAreaState.return.id]} />
-
-## Example
-
-See the docs for [useColorArea](useColorArea.html) in react-aria for an example of `useColorAreaState`.
diff --git a/packages/react-stately/docs/color/useColorFieldState.mdx b/packages/react-stately/docs/color/useColorFieldState.mdx
deleted file mode 100644
index 09e2209b77b..00000000000
--- a/packages/react-stately/docs/color/useColorFieldState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/color';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/color/package.json';
-
----
-category: Color
-keywords: [color, input, color picker, state]
----
-
-# useColorFieldState
-
-<PageDescription>{docs.exports.useColorFieldState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useColorFieldState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useColorFieldState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useColorFieldState.return.id]} />
-
-## Example
-
-See the docs for [useColorField](useColorField.html) in react-aria for an example of `useColorFieldState`.
diff --git a/packages/react-stately/docs/color/useColorSliderState.mdx b/packages/react-stately/docs/color/useColorSliderState.mdx
deleted file mode 100644
index e35e934d946..00000000000
--- a/packages/react-stately/docs/color/useColorSliderState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/color';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/color/package.json';
-
----
-category: Color
-keywords: [color slider, color picker, state]
----
-
-# useColorSliderState
-
-<PageDescription>{docs.exports.useColorSliderState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useColorSliderState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useColorSliderState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useColorSliderState.return.id]} />
-
-## Example
-
-See the docs for [useColorSlider](useColorSlider.html) in react-aria for an example of `useColorSliderState`.
diff --git a/packages/react-stately/docs/color/useColorWheelState.mdx b/packages/react-stately/docs/color/useColorWheelState.mdx
deleted file mode 100644
index 43f66910e3b..00000000000
--- a/packages/react-stately/docs/color/useColorWheelState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/color';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/color/package.json';
-
----
-category: Color
-keywords: [color wheel, color picker, state]
----
-
-# useColorWheelState
-
-<PageDescription>{docs.exports.useColorWheelState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useColorSliderState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useColorWheelState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useColorWheelState.return.id]} />
-
-## Example
-
-See the docs for [useColorWheel](useColorWheel.html) in react-aria for an example of `useColorWheelState`.
diff --git a/packages/react-stately/docs/combobox/useComboBoxState.mdx b/packages/react-stately/docs/combobox/useComboBoxState.mdx
deleted file mode 100644
index 653aa947bd9..00000000000
--- a/packages/react-stately/docs/combobox/useComboBoxState.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/combobox';
-import {ClassAPI, HeaderInfo, FunctionAPI, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/combobox/package.json';
-
----
-category: Pickers
-keywords: [combobox, state]
-after_version: 3.0.0-alpha.0
----
-
-# useComboBoxState
-
-<PageDescription>{docs.exports.useComboBoxState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useComboBoxState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useComboBoxState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useComboBoxState.return.base.id]} />
-
-## Example
-
-See the docs for [useComboBox](useComboBox.html) in react-aria for an example of `useComboBoxState`.
diff --git a/packages/react-stately/docs/data/useAsyncList.mdx b/packages/react-stately/docs/data/useAsyncList.mdx
deleted file mode 100644
index 97993a7ed0e..00000000000
--- a/packages/react-stately/docs/data/useAsyncList.mdx
+++ /dev/null
@@ -1,256 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/data';
-import {HeaderInfo, TypeContext, ClassAPI, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/data/package.json';
-
----
-category: Data
-keywords: [lists, async loading, infinite loading, state]
----
-
-# useAsyncList
-
-<PageDescription>{docs.exports.useAsyncList.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useAsyncList']} />
-
-## Introduction
-
-`useAsyncList` extends on [useListData](useListData.html), adding support for async loading, pagination, sorting, and filtering.
-It manages loading and error states, supports abortable requests, and works with any data fetching library or the built-in
-browser [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) API.
-
-## API
-
-<FunctionAPI function={docs.exports.useAsyncList} links={docs.links} />
-
-## Options
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useAsyncList.parameters[0].value.base.id]} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useAsyncList.return.base.id]} />
-
-## Example
-
-To construct an async list, pass a `load` function to `useAsyncList` that returns the items to render.
-You can use the state returned by `useAsyncList` to render a [collection component](collections.html).
-
-This example fetches a list of Pokemon from an API and displays them in a Picker. It uses
-[fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to load the data, passing through the abort signal
-given by `useAsyncList` and returning the results from the API. The `isLoading` prop is passed to the Picker
-to tell it to render the loading spinner while data is loading.
-
-```tsx
-let list = useAsyncList({
-  async load({signal}) {
-    let res = await fetch('https://pokeapi.co/api/v2/pokemon', {signal});
-    let json = await res.json();
-    return {items: json.results};
-  }
-});
-
-<Picker
-  label="Pick a Pokemon"
-  items={list.items}
-  isLoading={list.isLoading}>
-  {item => <Item key={item.name}>{item.name}</Item>}
-</Picker>
-```
-
-### Infinite loading
-
-`useAsyncList` also supports paginated data, which is common in many APIs to avoid loading too many items at once.
-This is accomplished by returning a cursor in addition to `items` from the load function. When the `loadMore` method
-is called, the cursor is passed back to your `load` function, which you can use to determine the URL for the next
-page. The `onLoadMore` prop supported by many collection components notifies you when you should load more data
-as the user scrolls.
-
-This example expands on the previous one to support infinite scrolling through all known Pokemon. It returns the
-`next` property from the API response as the `cursor`, and uses it instead of the original API URL for subsequent
-page loads. It passes the `onLoadMore` prop to Picker, which triggers loading more items as the user scrolls down.
-
-```tsx
-let list = useAsyncList({
-  async load({signal, cursor}) {
-    // If no cursor is available, then we're loading the first page.
-    // Otherwise, the cursor is the next URL to load, as returned from the previous page.
-    let res = await fetch(cursor || 'https://pokeapi.co/api/v2/pokemon', {signal});
-    let json = await res.json();
-    return {
-      items: json.results,
-      cursor: json.next
-    };
-  }
-});
-
-<Picker
-  label="Pick a Pokemon"
-  items={list.items}
-  isLoading={list.isLoading}
-  onLoadMore={list.loadMore}>
-  {item => <Item key={item.name}>{item.name}</Item>}
-</Picker>
-```
-
-### Reloading data
-
-Data can be reloaded by calling the `reload` method of the list.
-
-```tsx
-list.reload();
-```
-
-## Sorting
-
-Some components like tables support sorting data. You may also have custom UI to implement this in other components.
-This can be implemented by passing a `sort` function to `useAsyncList`, or by using the `sortDescriptor` passed to
-`load` if no `sort` function is given. Passing a separate `sort` function could be useful when implementing client side
-sorting. Using the `sortDescriptor` in `load` is useful when you need to implement server side sorting, which might be
-an API parameter.
-
-### Client side sorting
-
-This example shows how to implement client side sorting by passing a `sort` function to `useAsyncList` and sorting the
-items array.
-
-```tsx
-let collator = useCollator();
-
-let list = useAsyncList({
-  async load({signal}) {
-    // Same load function as before
-  },
-  sort({items, sortDescriptor}) {
-    return {
-      items: items.sort((a, b) => {
-        // Compare the items by the sorted column
-        let cmp = collator.compare(a[sortDescriptor.column], b[sortDescriptor.column]);
-
-        // Flip the direction if descending order is specified.
-        if (sortDescriptor.direction === 'descending') {
-          cmp *= -1;
-        }
-
-        return cmp;
-      })
-    };
-  }
-});
-```
-
-### Server side sorting
-
-Server side sorting could be implemented by using the `sortDescriptor` in the `load` function, and passing a
-parameter to the API.
-
-```tsx
-let list = useAsyncList({
-  async load({signal, sortDescriptor}) {
-    let url = new URL('http://example.com/api');
-    if (sortDescriptor) {
-      url.searchParams.append('sort_key', sortDescriptor.column);
-      url.searchParams.append('sort_direction', sortDescriptor.direction);
-    }
-
-    let res = await fetch(url, {signal});
-    let json = await res.json();
-    return {
-      items: json.results
-    };
-  }
-});
-```
-
-## Filtering
-
-There are many instances where your list of data may need to be filtered, such as during user lookup or query searches.
-For server side filtering, this can be implemented by using the `filterText` option passed to the `load` function.
-The `setFilterText` method updates the current `filterText` value and triggers the `load` function. This allows
-you to reload the results with the new filter text.
-
-### Server side filtering
-
-The example below shows how server side filtering could be implemented by using `filterText` in the `load` function and passing a parameter to the API.
-The input value of the ComboBox is controlled by providing `list.filterText` as the ComboBox's `inputValue` prop, and `list.setFilterText` as the `onInputChange` prop.
-The `loadingState` prop is also used to show the appropriate loading indicator depending on the state of the list.
-
-```tsx
-let list = useAsyncList({
-  async load({signal, filterText}) {
-    let res = await fetch(`https://swapi.py4e.com/api/people/?search=${filterText}`, {signal});
-    let json = await res.json();
-
-    return {
-      items: json.results
-    };
-  }
-});
-
-<ComboBox
-  label="Star Wars Character Lookup"
-  items={list.items}
-  inputValue={list.filterText}
-  onInputChange={list.setFilterText}
-  loadingState={list.loadingState}>
-  {item => <Item key={item.name}>{item.name}</Item>}
-</ComboBox>
-```
-
-## Pre-selecting items
-
-`useAsyncList` manages selection state for the list in addition to its data. If you need to programmatically select items
-during the initial load, you can do so using the `initialSelectedKeys` option or by returning `selectedKeys` from the
-`load` function in addition to `items`.
-
-### Selecting before loading
-
-If you know what keys to select before items are loaded from the server, use the `initialSelectedKeys` option.
-
-```tsx
-let list = useAsyncList({
-  initialSelectedKeys: ['foo', 'bar'],
-  async load({signal}) {
-    // Same load function as before
-  }
-});
-```
-
-### Selecting based on loaded data
-
-If you need to compute which keys to select based on the loaded data, return `selectedKeys` from the `load` function
-in addition to the `items`.
-
-```tsx
-let list = useAsyncList({
-  async load({signal}) {
-    let res = await fetch('http://example.com/api', {signal});
-    let json = await res.json();
-
-    // Return items and compute selectedKeys based on the data and return a list of ids.
-    return {
-      items: json.results,
-      selectedKeys: json.results.filter(item => item.isSelected).map(item => item.id)
-    };
-  }
-});
-```
-
-## Client side updates
-
-All client side updating methods supported by `useListData` are also supported by `useAsyncList`.
-See the docs for [useListData](useListData.html) for more details.
diff --git a/packages/react-stately/docs/data/useListData.mdx b/packages/react-stately/docs/data/useListData.mdx
deleted file mode 100644
index c902a0812ed..00000000000
--- a/packages/react-stately/docs/data/useListData.mdx
+++ /dev/null
@@ -1,152 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/data';
-import {HeaderInfo, TypeContext, ClassAPI, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/data/package.json';
-
----
-category: Data
-keywords: [lists, insert, remove, state]
----
-
-# useListData
-
-<PageDescription>{docs.exports.useListData.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useListData']} />
-
-## Introduction
-
-React requires all data structures passed as props to be immutable. This enables them to be diffed correctly to determine
-what has changed since the last render. This can be challenging to accomplish from scratch in a performant way in JavaScript.
-
-`useListData` helps manage an immutable list data structure, with helper methods to update the data in an efficient way.
-Since the data is stored in React state, calling these methods to update the data automatically causes the component
-to re-render accordingly.
-
-In addition, `useListData` stores selection state for the list, based on unique item keys. This can be updated programmatically,
-and is automatically updated when items are removed from the list.
-
-## API
-
-<FunctionAPI function={docs.exports.useListData} links={docs.links} />
-
-## Options
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useListData.parameters[0].value.base.id]} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useListData.return.base.id]} />
-
-## Example
-
-To construct a list, pass an initial set of items along with a function to get a key for each item.
-You can use the state returned by `useListData` to render a [collection component](collections.html).
-
-This example renders a `ListBox` using the items managed by `useListData`. It uses the `name` property of each item
-as the unique key for that item, and the `items` property as the children. In addition, it manages the selection state
-for the listbox, which will automatically be updated when items are removed from the tree.
-
-```tsx
-let list = useListData({
-  initialItems: [
-    {name: 'Aardvark'},
-    {name: 'Kangaroo'},
-    {name: 'Snake'}
-  ],
-  initialSelectedKeys: ['Kangaroo'],
-  getKey: item => item.name
-});
-
-<ListBox
-  items={list.items}
-  selectedKeys={list.selectedKeys}
-  onSelectionChange={list.setSelectedKeys}>
-  {item => <Item key={item.name}>{item.name}</Item>}
-</ListBox>
-```
-
-### Inserting items
-
-To insert a new item into the list, use the `insert` method or one of the other convenience methods.
-Each of these methods also accepts multiple items, so you can insert multiple items at once.
-
-```tsx
-// Insert an item after the first one
-list.insert(1, {name: 'Horse'});
-
-// Insert multiple items
-list.insert(1, {name: 'Horse'}, {name: 'Giraffe'});
-```
-
-```tsx
-// Insert an item before another item
-list.insertBefore('Kangaroo', {name: 'Horse'});
-
-// Insert multiple items before another item
-list.insertBefore('Kangaroo', {name: 'Horse'}, {name: 'Giraffe'});
-```
-
-```tsx
-// Insert an item after another item
-list.insertAfter('Kangaroo', {name: 'Horse'});
-
-// Insert multiple items after another item
-list.insertAfter('Kangaroo', {name: 'Horse'}, {name: 'Giraffe'});
-```
-
-```tsx
-// Append an item
-list.append({name: 'Horse'});
-
-// Append multiple items
-list.append({name: 'Horse'}, {name: 'Giraffe'});
-```
-
-```tsx
-// Prepend an item
-list.prepend({name: 'Horse'});
-
-// Prepend multiple items
-list.prepend({name: 'Horse'}, {name: 'Giraffe'});
-```
-
-### Removing items
-
-```tsx
-// Remove an item
-list.remove('Kangaroo');
-
-// Remove multiple items
-list.remove('Kangaroo', 'Snake');
-```
-
-```tsx
-// Remove all selected items
-list.removeSelectedItems();
-```
-
-### Moving items
-
-```tsx
-list.move('Snake', 0);
-```
-
-### Updating items
-
-```tsx
-list.update('Snake', {name: 'Rattle Snake'});
-```
diff --git a/packages/react-stately/docs/data/useTreeData.mdx b/packages/react-stately/docs/data/useTreeData.mdx
deleted file mode 100644
index 9ec0c4c3ceb..00000000000
--- a/packages/react-stately/docs/data/useTreeData.mdx
+++ /dev/null
@@ -1,189 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/data';
-import {HeaderInfo, TypeContext, ClassAPI, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/data/package.json';
-
----
-category: Data
-keywords: [tree, insert, remove, update, state]
----
-
-# useTreeData
-
-<PageDescription>{docs.exports.useTreeData.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useTreeData']} />
-
-## Introduction
-
-React requires all data structures passed as props to be immutable. This enables them to be diffed correctly to determine
-what has changed since the last render. This can be challenging to accomplish from scratch in a performant way in JavaScript.
-
-`useTreeData` helps manage an immutable tree data structure, with helper methods to update the data in an efficient way.
-Since the data is stored in React state, calling these methods to update the data automatically causes the component
-to re-render accordingly.
-
-In addition, `useTreeData` stores selection state for the tree, based on unique item keys. This can be updated programmatically,
-and is automatically updated when items are removed from the tree.
-
-## API
-
-<FunctionAPI function={docs.exports.useTreeData} links={docs.links} />
-
-## Options
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useTreeData.parameters[0].value.base.id]} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useTreeData.return.base.id]} />
-
-## Example
-
-To construct a tree, pass an initial set of items along with functions to get a key for each item, and its children.
-`useTreeData` processes these items into nodes, which you can use to render a [collection component](collections.html).
-Each node has `key`, `value`, and `children` properties.
-
-This example renders a `ListBox` with two sections, each with three child items. It uses the `name` property of each item
-as the unique key for that item, and the `items` property as the children. In addition, it manages the selection state
-for the listbox, which will automatically be updated when items are removed from the tree.
-
-```tsx
-interface ItemValue {
-  name: string;
-  items?: Array<ItemValue>;
-}
-
-let tree = useTreeData<ItemValue>({
-  initialItems: [
-    {
-      name: 'People',
-      items: [
-        {name: 'David'},
-        {name: 'Sam'},
-        {name: 'Jane'}
-      ]
-    },
-    {
-      name: 'Animals',
-      items: [
-        {name: 'Aardvark'},
-        {name: 'Kangaroo'},
-        {name: 'Snake'}
-      ]
-    }
-  ],
-  initialSelectedKeys: ['Sam', 'Kangaroo'],
-  getKey: item => item.name,
-  getChildren: item => item.items || []
-});
-
-<ListBox
-  aria-label="List organisms"
-  items={tree.items}
-  selectionMode="multiple"
-  selectedKeys={tree.selectedKeys}
-  onSelectionChange={(keys) => {
-    if (keys !== 'all') {
-      tree.setSelectedKeys(keys);
-    }
-  }}>
-  {node =>
-    <Section title={node.value.name} items={node.children}>
-      {node => <Item>{node.value.name}</Item>}
-    </Section>
-  }
-</ListBox>
-```
-
-### Inserting items
-
-To insert a new item into the tree, use the `insert` method or use one of the other convenience methods.
-Pass a `parentKey` to insert into, or `null` to insert a root item.
-
-```tsx
-// Insert an item into the root, after 'People'
-tree.insert(null, 1, {name: 'Plants'});
-
-// Insert an item into the 'People' node, after 'David'
-tree.insert('People', 1, {name: 'Judy'});
-```
-
-```tsx
-// Insert an item before another item
-tree.insertAfter('Kangaroo', {name: 'Horse'});
-
-// Insert multiple items before another item
-tree.insertAfter('Kangaroo', {name: 'Horse'}, {name: 'Giraffe'});
-```
-
-```tsx
-// Insert an item after another item
-tree.insertAfter('Kangaroo', {name: 'Horse'});
-
-// Insert multiple items after another item
-tree.insertAfter('Kangaroo', {name: 'Horse'}, {name: 'Giraffe'});
-```
-
-```tsx
-// Append an item to the root
-tree.append(null, {name: 'Plants'});
-
-// Append an item to the 'People' node
-tree.append('People', {name: 'Plants'});
-```
-
-```tsx
-// Prepend an item to the root
-tree.prepend(null, {name: 'Plants'});
-
-// Prepend an item at the start of the 'People' node
-tree.prepend('People', {name: 'Plants'});
-```
-
-### Removing items
-
-```tsx
-// Remove an item
-list.remove('Kangaroo');
-
-// Remove multiple items
-list.remove('Kangaroo', 'Snake');
-```
-
-```tsx
-// Remove all selected items
-list.removeSelectedItems();
-```
-
-### Moving items
-
-```tsx
-// Move an item within the same parent
-tree.move('Sam', 'People', 0);
-
-// Move an item to a different parent
-tree.move('Sam', 'Animals', 1);
-
-// Move an item to the root
-tree.move('Sam', null, 1);
-```
-
-### Updating items
-
-```tsx
-tree.update('Sam', {name: 'Samantha'});
-```
diff --git a/packages/react-stately/docs/datepicker/useDateFieldState.mdx b/packages/react-stately/docs/datepicker/useDateFieldState.mdx
deleted file mode 100644
index ff30b4c7be8..00000000000
--- a/packages/react-stately/docs/datepicker/useDateFieldState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/datepicker';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/datepicker/package.json';
-
----
-category: Date and Time
-keywords: [date, time, field, state]
----
-
-# useDateFieldState
-
-<PageDescription>{docs.exports.useDateFieldState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useDateFieldState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useDateFieldState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useDateFieldState.return.id]} />
-
-## Example
-
-See the docs for [useDateField](useDateField.html) in react-aria for an example of `useDateFieldState`.
diff --git a/packages/react-stately/docs/datepicker/useDatePickerState.mdx b/packages/react-stately/docs/datepicker/useDatePickerState.mdx
deleted file mode 100644
index 7268686c0a2..00000000000
--- a/packages/react-stately/docs/datepicker/useDatePickerState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/datepicker';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/datepicker/package.json';
-
----
-category: Date and Time
-keywords: [date, time, date picker, state]
----
-
-# useDatePickerState
-
-<PageDescription>{docs.exports.useDatePickerState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useDatePickerState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useDatePickerState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useDatePickerState.return.id]} />
-
-## Example
-
-See the docs for [useDatePicker](useDatePicker.html) in react-aria for an example of `useDatePickerState`.
diff --git a/packages/react-stately/docs/datepicker/useDateRangePickerState.mdx b/packages/react-stately/docs/datepicker/useDateRangePickerState.mdx
deleted file mode 100644
index 73687dba996..00000000000
--- a/packages/react-stately/docs/datepicker/useDateRangePickerState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/datepicker';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/datepicker/package.json';
-
----
-category: Date and Time
-keywords: [date, time, range, date picker, state]
----
-
-# useDateRangePickerState
-
-<PageDescription>{docs.exports.useDateRangePickerState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useDateRangePickerState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useDateRangePickerState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useDateRangePickerState.return.id]} />
-
-## Example
-
-See the docs for [useDateRangePicker](useDateRangePicker.html) in react-aria for an example of `useDateRangePickerState`.
diff --git a/packages/react-stately/docs/datepicker/useTimeFieldState.mdx b/packages/react-stately/docs/datepicker/useTimeFieldState.mdx
deleted file mode 100644
index 557f87dcdde..00000000000
--- a/packages/react-stately/docs/datepicker/useTimeFieldState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/datepicker';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/datepicker/package.json';
-
----
-category: Date and Time
-keywords: [date, time, field, state]
----
-
-# useTimeFieldState
-
-<PageDescription>{docs.exports.useTimeFieldState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useTimeFieldState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useTimeFieldState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useTimeFieldState.return.id]} />
-
-## Example
-
-See the docs for [useTimeField](useTimeField.html) in react-aria for an example of `useTimeFieldState`.
diff --git a/packages/react-stately/docs/disclosure/useDisclosureGroupState.mdx b/packages/react-stately/docs/disclosure/useDisclosureGroupState.mdx
deleted file mode 100644
index fcb67b80bd5..00000000000
--- a/packages/react-stately/docs/disclosure/useDisclosureGroupState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2024 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/disclosure';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/disclosure/package.json';
-
----
-category: Navigation
-keywords: [disclosure, collapse, expand, state]
----
-
-# useDisclosureGroupState
-
-<PageDescription>{docs.exports.useDisclosureGroupState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useDisclosureGroupState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useDisclosureGroupState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useDisclosureGroupState.return.id]} />
-
-## Example
-
-See the docs for [useDisclosure](../Disclosure/useDisclosure.html#disclosure-group) in react-aria for an example of `useDisclosureGroupState`.
diff --git a/packages/react-stately/docs/disclosure/useDisclosureState.mdx b/packages/react-stately/docs/disclosure/useDisclosureState.mdx
deleted file mode 100644
index 79688243147..00000000000
--- a/packages/react-stately/docs/disclosure/useDisclosureState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2024 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/disclosure';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/disclosure/package.json';
-
----
-category: Navigation
-keywords: [disclosure, state]
----
-
-# useDisclosureState
-
-<PageDescription>{docs.exports.useDisclosureState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useDisclosureState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useDisclosureState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useDisclosureState.return.id]} />
-
-## Example
-
-See the docs for [useDisclosure](useDisclosure.html) in react-aria for an example of `useDisclosureState`.
diff --git a/packages/react-stately/docs/dnd/useDraggableCollectionState.mdx b/packages/react-stately/docs/dnd/useDraggableCollectionState.mdx
deleted file mode 100644
index 604b7dce0d4..00000000000
--- a/packages/react-stately/docs/dnd/useDraggableCollectionState.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/dnd';
-import {HeaderInfo, TypeContext, InterfaceType, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/dnd/package.json';
-
----
-category: Drag and Drop
-keywords: [lists, state, dragging, dropping, drag, drop]
----
-
-# useDraggableCollectionState
-
-<PageDescription>{docs.exports.useDraggableCollectionState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useDraggableCollectionState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useDraggableCollectionState} links={docs.links} />
-
-## Interface
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useDraggableCollectionState.return.id].properties} />
-</TypeContext.Provider>
-
-## Example
-
-See the docs for [useDraggableCollection](useDraggableCollection.html) in react-aria for an example of `useDraggableCollectionState`.
diff --git a/packages/react-stately/docs/dnd/useDroppableCollectionState.mdx b/packages/react-stately/docs/dnd/useDroppableCollectionState.mdx
deleted file mode 100644
index 739cbb66a42..00000000000
--- a/packages/react-stately/docs/dnd/useDroppableCollectionState.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/dnd';
-import {HeaderInfo, TypeContext, InterfaceType, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/dnd/package.json';
-
----
-category: Drag and Drop
-keywords: [lists, state, dragging, dropping, drag, drop]
----
-
-# useDroppableCollectionState
-
-<PageDescription>{docs.exports.useDroppableCollectionState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useDroppableCollectionState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useDroppableCollectionState} links={docs.links} />
-
-## Interface
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useDroppableCollectionState.return.id].properties} />
-</TypeContext.Provider>
-
-## Example
-
-See the docs for [useDroppableCollection](useDroppableCollection.html) in react-aria for an example of `useDroppableCollectionState`.
diff --git a/packages/react-stately/docs/list/useListState.mdx b/packages/react-stately/docs/list/useListState.mdx
deleted file mode 100644
index 224f52854a5..00000000000
--- a/packages/react-stately/docs/list/useListState.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/list';
-import {HeaderInfo, TypeContext, InterfaceType, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/list/package.json';
-
----
-category: Collections
-keywords: [lists, state]
----
-
-# useListState
-
-<PageDescription>{docs.exports.useListState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useListState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useListState} links={docs.links} />
-
-## Interface
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useListState.return.base.id].properties} />
-</TypeContext.Provider>
-
-## Example
-
-See the docs for [useListBox](ListBox/useListBox.html) in react-aria for an example of `useListState`.
diff --git a/packages/react-stately/docs/list/useSingleSelectListState.mdx b/packages/react-stately/docs/list/useSingleSelectListState.mdx
deleted file mode 100644
index bffa8074b07..00000000000
--- a/packages/react-stately/docs/list/useSingleSelectListState.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/list';
-import {HeaderInfo, TypeContext, InterfaceType, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/list/package.json';
-
----
-category: Collections
-keywords: [lists, state]
----
-
-# useSingleSelectListState
-
-<PageDescription>{docs.exports.useSingleSelectListState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useSingleSelectListState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useSingleSelectListState} links={docs.links} />
-
-## Interface
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useSingleSelectListState.return.base.id].properties} />
-</TypeContext.Provider>
diff --git a/packages/react-stately/docs/menu/useMenuTriggerState.mdx b/packages/react-stately/docs/menu/useMenuTriggerState.mdx
deleted file mode 100644
index 52e882032fe..00000000000
--- a/packages/react-stately/docs/menu/useMenuTriggerState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/menu';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/menu/package.json';
-
----
-category: Overlays
-keywords: [menu trigger, state]
----
-
-# useMenuTriggerState
-
-<PageDescription>{docs.exports.useMenuTriggerState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useMenuTriggerState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useMenuTriggerState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useMenuTriggerState.return.id]} />
-
-## Example
-
-See the docs for [useMenu](useMenu.html) in react-aria for an example of `useMenuTriggerState`.
diff --git a/packages/react-stately/docs/numberfield/useNumberFieldState.mdx b/packages/react-stately/docs/numberfield/useNumberFieldState.mdx
deleted file mode 100644
index ed580836232..00000000000
--- a/packages/react-stately/docs/numberfield/useNumberFieldState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/numberfield';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/numberfield/package.json';
-
----
-category: Forms
-keywords: [number field, input, form, state]
----
-
-# useNumberFieldState
-
-<PageDescription>{docs.exports.useNumberFieldState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useNumberFieldState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useNumberFieldState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useNumberFieldState.return.id]} />
-
-## Example
-
-See the docs for [useNumberField](useNumberField.html) in react-aria for an example of `useNumberFieldState`.
diff --git a/packages/react-stately/docs/overlays/useOverlayTriggerState.mdx b/packages/react-stately/docs/overlays/useOverlayTriggerState.mdx
deleted file mode 100644
index c8da2293ca1..00000000000
--- a/packages/react-stately/docs/overlays/useOverlayTriggerState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/overlays';
-import {ClassAPI, HeaderInfo, FunctionAPI, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/overlays/package.json';
-
----
-category: Overlays
-keywords: [overlay trigger, state]
----
-
-# useOverlayTriggerState
-
-<PageDescription>{docs.exports.useOverlayTriggerState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useOverlayTriggerState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useOverlayTriggerState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useOverlayTriggerState.return.id]} />
-
-## Example
-
-See the docs for [usePopover](Popover/usePopover.html) in react-aria for an example of `useOverlayTriggerState`.
diff --git a/packages/react-stately/docs/radio/useRadioGroupState.mdx b/packages/react-stately/docs/radio/useRadioGroupState.mdx
deleted file mode 100644
index dddcf9b2bc7..00000000000
--- a/packages/react-stately/docs/radio/useRadioGroupState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/radio';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/radio/package.json';
-
----
-category: Forms
-keywords: [radio group, state]
----
-
-# useRadioGroupState
-
-<PageDescription>{docs.exports.useRadioGroupState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useRadioGroupState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useRadioGroupState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useRadioGroupState.return.id]} />
-
-## Example
-
-See the docs for [useRadioGroup](useRadioGroup.html) in react-aria for an example of `useRadioGroupState`.
diff --git a/packages/react-stately/docs/searchfield/useSearchFieldState.mdx b/packages/react-stately/docs/searchfield/useSearchFieldState.mdx
deleted file mode 100644
index 18b40c37b14..00000000000
--- a/packages/react-stately/docs/searchfield/useSearchFieldState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/searchfield';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/searchfield/package.json';
-
----
-category: Forms
-keywords: [search field, input, state]
----
-
-# useSearchFieldState
-
-<PageDescription>{docs.exports.useSearchFieldState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useSearchFieldState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useSearchFieldState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useSearchFieldState.return.id]} />
-
-## Example
-
-See the docs for [useSearchField](useSearchField.html) in react-aria for an example of `useSearchField`.
diff --git a/packages/react-stately/docs/select/useSelectState.mdx b/packages/react-stately/docs/select/useSelectState.mdx
deleted file mode 100644
index 27f25374610..00000000000
--- a/packages/react-stately/docs/select/useSelectState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/select';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/select/package.json';
-
----
-category: Pickers
-keywords: [select, state]
----
-
-# useSelectState
-
-<PageDescription>{docs.exports.useSelectState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useSelectState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useSelectState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useSelectState.return.base.id]} />
-
-## Example
-
-See the docs for [useSelect](useSelect.html) in react-aria for an example of `useSelectState`.
diff --git a/packages/react-stately/docs/selection/useMultipleSelectionState.mdx b/packages/react-stately/docs/selection/useMultipleSelectionState.mdx
deleted file mode 100644
index 9126cf8970a..00000000000
--- a/packages/react-stately/docs/selection/useMultipleSelectionState.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/selection';
-import listDocs from 'docs:@react-stately/list';
-import selectDocs from 'docs:@react-stately/select';
-import {HeaderInfo, ClassAPI, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/selection/package.json';
-
-```jsx import
-import '@react-spectrum/docs/src/client';
-```
-
----
-category: Selection
-keywords: [multiple selection, state]
----
-
-# useMultipleSelectionState
-
-<PageDescription>{docs.exports.useMultipleSelectionState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useMultipleSelectionState']} />
-
-## Introduction
-
-`useMultipleSelectionState` manages selection state for many components. Oftentimes, you won't
-need to use this hook directly, since it's included in hooks
-like <TypeLink links={listDocs.links} type={listDocs.exports.useListState} />,
-and <TypeLink links={selectDocs.links} type={selectDocs.exports.useSelectState} />.
-These expose a <TypeLink links={docs.links} type={docs.exports.SelectionManager} />, which provides a higher level way
-to manipulate selection state.
-
-## API
-
-<FunctionAPI links={docs.links} function={docs.exports.useMultipleSelectionState} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useMultipleSelectionState.return.id]} />
diff --git a/packages/react-stately/docs/slider/useSliderState.mdx b/packages/react-stately/docs/slider/useSliderState.mdx
deleted file mode 100644
index 29d983e40eb..00000000000
--- a/packages/react-stately/docs/slider/useSliderState.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/slider';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/slider/package.json';
-
----
-category: Sliders
-keywords: [slider, range, input, state]
-after_version: 3.0.0-alpha.3
----
-
-# useSliderState
-
-<PageDescription>{docs.exports.useSliderState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useSliderState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useSliderState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useSliderState.return.id]} />
-
-## Example
-
-See the docs for [useSlider](useSlider.html) in react-aria for an example of `useSliderState`.
diff --git a/packages/react-stately/docs/table/useTableState.mdx b/packages/react-stately/docs/table/useTableState.mdx
deleted file mode 100644
index e45b1c93d65..00000000000
--- a/packages/react-stately/docs/table/useTableState.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/table';
-import {ClassAPI, HeaderInfo, FunctionAPI, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/table/package.json';
-
----
-category: Collections
-keywords: [table, state, grid]
----
-
-# useTableState
-
-<PageDescription>{docs.exports.useTableState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useTableState', 'useTableColumnResizeState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useTableState} links={docs.links} />
-<FunctionAPI function={docs.exports.useTableColumnResizeState} links={docs.links} />
-<FunctionAPI function={docs.exports.Cell} links={docs.links} />
-<FunctionAPI function={docs.exports.Column} links={docs.links} />
-<FunctionAPI function={docs.exports.Row} links={docs.links} />
-<FunctionAPI function={docs.exports.TableBody} links={docs.links} />
-<FunctionAPI function={docs.exports.TableHeader} links={docs.links} />
-
-## Interface
-
-### useTableState
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useTableState.return.base.id]} />
-
-### useTableColumnResizeState
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useTableColumnResizeState.return.base.id]} />
-
-## Example
-
-See the docs for [useTable](useTable.html) in react-aria for an example of `useTableState`, `useTableColumnResizeState`, `Cell`, `Column`,
-`Row`, `TableBody`, and `TableHeader`.
diff --git a/packages/react-stately/docs/tabs/useTabListState.mdx b/packages/react-stately/docs/tabs/useTabListState.mdx
deleted file mode 100644
index b4e13e9c83d..00000000000
--- a/packages/react-stately/docs/tabs/useTabListState.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/tabs';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/tabs/package.json';
-
----
-category: Collections
-keywords: [tabs, state, collections]
-after_version: 3.0.0-rc.0
----
-
-# useTabListState
-
-<PageDescription>{docs.exports.useTabListState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useTabListState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useTabListState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useTabListState.return.base.id]} />
-
-## Example
-
-See the docs for [useTabList](useTabList.html) in react-aria for an example of `useTabListState`.
diff --git a/packages/react-stately/docs/toast/useToastState.mdx b/packages/react-stately/docs/toast/useToastState.mdx
deleted file mode 100644
index 04b06253624..00000000000
--- a/packages/react-stately/docs/toast/useToastState.mdx
+++ /dev/null
@@ -1,46 +0,0 @@
-{/* Copyright 2022 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/toast';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/toast/package.json';
-
----
-category: Status
-keywords: [toast, notifications, alert, state]
----
-
-# useToastState
-
-<PageDescription>{docs.exports.useToastState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useToastState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useToastState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useToastState.return.base.id]} />
-
-## ToastQueue
-
-`useToastState` uses a `ToastQueue` under the hood, which means the queue is owned by the component that calls it. If you want to have a global toast queue outside the React tree, you can use the `ToastQueue` class directly. The <TypeLink links={docs.links} type={docs.exports.useToastQueue} /> hook can be used to to subscribe to a `ToastQueue` within a React component, and returns the same interface as described above.
-
-<ClassAPI links={docs.links} class={docs.exports.ToastQueue} />
-
-## Example
-
-See the docs for [useToast](useToast.html) in react-aria for an example of `useToastState`.
diff --git a/packages/react-stately/docs/toggle/useToggleState.mdx b/packages/react-stately/docs/toggle/useToggleState.mdx
deleted file mode 100644
index 9f65d8b6ddb..00000000000
--- a/packages/react-stately/docs/toggle/useToggleState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/toggle';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/toggle/package.json';
-
----
-category: Forms
-keywords: [toggle, checkbox, switch, input, state]
----
-
-# useToggleState
-
-<PageDescription>{docs.exports.useToggleState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useToggleState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useToggleState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useToggleState.return.id]} />
-
-## Example
-
-See the docs for [useCheckbox](Checkbox/useCheckbox.html) in react-aria for an example of `useToggleState`.
diff --git a/packages/react-stately/docs/tooltip/useTooltipTriggerState.mdx b/packages/react-stately/docs/tooltip/useTooltipTriggerState.mdx
deleted file mode 100644
index d0635fb232a..00000000000
--- a/packages/react-stately/docs/tooltip/useTooltipTriggerState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/tooltip';
-import {ClassAPI, HeaderInfo, FunctionAPI, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/tooltip/package.json';
-
----
-category: Overlays
-keywords: [tooltip trigger, tooltip, state]
----
-
-# useTooltipTriggerState
-
-<PageDescription>{docs.exports.useTooltipTriggerState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useTooltipTriggerState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useTooltipTriggerState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useTooltipTriggerState.return.id]} />
-
-## Example
-
-See the docs for [useTooltipTrigger](useTooltipTrigger.html) in react-aria for an example of `useTooltipTriggerState`.
diff --git a/packages/react-stately/docs/tree/useTreeState.mdx b/packages/react-stately/docs/tree/useTreeState.mdx
deleted file mode 100644
index 0e954088b03..00000000000
--- a/packages/react-stately/docs/tree/useTreeState.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-{/* Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License. */}
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/tree';
-import {ClassAPI, HeaderInfo, TypeContext, FunctionAPI, TypeLink, PageDescription} from '@react-spectrum/docs';
-import packageData from '@react-stately/tree/package.json';
-
----
-category: Collections
-keywords: [tree, state]
----
-
-# useTreeState
-
-<PageDescription>{docs.exports.useTreeState.description}</PageDescription>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useTreeState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useTreeState} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useTreeState.return.base.id]} />
-
-## Example
-
-See the docs for [useMenu](../Menu/useMenu.html) in react-aria for an example of `useTreeState`.
diff --git a/packages/react-stately/exports/index.ts b/packages/react-stately/exports/index.ts
index e6a7f818cd6..5b60d451d31 100644
--- a/packages/react-stately/exports/index.ts
+++ b/packages/react-stately/exports/index.ts
@@ -170,6 +170,14 @@ export type {WaterfallLayoutOptions} from '../src/layout/WaterfallLayout';
 export type {InvalidationContext} from '../src/virtualizer/types';
 export type {RectCorner} from '../src/virtualizer/Rect';
 export type {VirtualizerState} from '../src/virtualizer/useVirtualizerState';
+export type {TokenFieldProps, TokenFieldState} from '../src/tokenfield/useTokenFieldState';
+export type {
+  TokenFieldSegment,
+  TextSegment,
+  TokenSegment,
+  Position,
+  TokenFieldValueOptions
+} from '../src/tokenfield/TokenFieldValue';
 
 export {useCalendarState} from '../src/calendar/useCalendarState';
 export {useRangeCalendarState} from '../src/calendar/useRangeCalendarState';
@@ -232,3 +240,5 @@ export {GridLayout} from '../src/layout/GridLayout';
 export {ListLayout} from '../src/layout/ListLayout';
 export {TableLayout} from '../src/layout/TableLayout';
 export {WaterfallLayout} from '../src/layout/WaterfallLayout';
+export {useTokenFieldState} from '../src/tokenfield/useTokenFieldState';
+export {TokenFieldValue, Direction} from '../src/tokenfield/TokenFieldValue';
diff --git a/packages/react-stately/src/tokenfield/useTokenFieldState.ts b/packages/react-stately/src/tokenfield/useTokenFieldState.ts
index 8cb3d29b9cd..d3b08fccd6b 100644
--- a/packages/react-stately/src/tokenfield/useTokenFieldState.ts
+++ b/packages/react-stately/src/tokenfield/useTokenFieldState.ts
@@ -30,6 +30,10 @@ export interface TokenFieldState<T extends TokenFieldValue = TokenFieldValue> {
   setComposing: (isComposing: boolean) => void;
 }
 
+/**
+ * Provides state management for a token field. Tracks the field value and the
+ * composition state.
+ */
 export function useTokenFieldState<T extends TokenFieldValue = TokenFieldValue>(
   props: TokenFieldProps<T>
 ): TokenFieldState<T> {
diff --git a/yarn.lock b/yarn.lock
index 9e0d3af73db..67c78467c9a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7377,7 +7377,6 @@ __metadata:
     "@internationalized/date": "npm:^3.12.2"
     "@internationalized/number": "npm:^3.6.7"
     "@react-aria/test-utils": "npm:^1.0.0-alpha.8"
-    "@react-aria/utils": "npm:^3.8.0"
     "@react-spectrum/s2": "npm:1.5.1"
     "@react-types/shared": "npm:^3.36.0"
     "@storybook/jest": "npm:^0.2.3"