Add anatomy diagrams to React Aria docs (#1452)

Author: devongovett

packages/@react-aria/breadcrumbs/docs/anatomy.svg

@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-aria/breadcrumbs';
 import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType} from '@react-spectrum/docs';
 import packageData from '@react-aria/breadcrumbs/package.json';
+import Anatomy from './anatomy.svg';
 
 ```jsx import
 import {useBreadcrumbs, useBreadcrumbItem} from '@react-aria/breadcrumbs';
@@ -52,8 +53,10 @@ Breadcrumbs provide a list of links to parent pages of the current page in heira
 
 ## Anatomy
 
-Breadcrumbs consist of a navigation landmark element and a list of links. The last link
-represents the current page in the hierarchy, with the previous links representing the
+<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 <kbd>Enter</kbd> key to navigate to that page. Optionally, breadcrumbs can be used
 in place of a page title, in which case the last breadcrumb acts as a heading.

packages/@react-aria/breadcrumbs/docs/useBreadcrumbs.mdx

@@ -16,6 +16,7 @@ import focusDocs from 'docs:@react-aria/focus';
 import statelyDocs from 'docs:@react-stately/toggle';
 import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs';
 import packageData from '@react-aria/checkbox/package.json';
+import Anatomy from './checkbox-anatomy.svg';
 
 ```jsx import
 import {useCheckbox} from '@react-aria/checkbox';
@@ -56,6 +57,8 @@ that can be styled as needed.
 
 ## 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 <kbd>Tab</kbd> key to navigate to it and the <kbd>Space</kbd> key to toggle it.

packages/@react-aria/checkbox/docs/checkbox-anatomy.svg

@@ -16,6 +16,7 @@ import focusDocs from 'docs:@react-aria/focus';
 import statelyDocs from 'docs:@react-stately/checkbox';
 import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs';
 import packageData from '@react-aria/checkbox/package.json';
+import Anatomy from './checkboxgroup-anatomy.svg';
 
 ```jsx import
 import {useCheckboxGroup, useCheckboxGroupItem} from '@react-aria/checkbox';
@@ -60,6 +61,8 @@ checkbox groups that can be styled as needed.
 
 ## 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

packages/@react-aria/checkbox/docs/checkboxgroup-anatomy.svg

@@ -15,6 +15,7 @@ import overlaysDocs from 'docs:@react-aria/overlays';
 import focusDocs from 'docs:@react-aria/focus';
 import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs';
 import packageData from '@react-aria/dialog/package.json';
+import Anatomy from './anatomy.svg';
 
 ---
 category: Overlays
@@ -54,6 +55,8 @@ helps achieve accessible dialogs that can be styled as needed.
 
 ## 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.useModal} />, <TypeLink links={overlaysDocs.links} type={overlaysDocs.exports.usePreventScroll} />,