diff --git a/packages/dev/s2-docs/assets/internationalized.ico b/packages/dev/s2-docs/assets/internationalized.ico
new file mode 100644
index 00000000000..d0dee54937d
Binary files /dev/null and b/packages/dev/s2-docs/assets/internationalized.ico differ
diff --git a/packages/dev/s2-docs/assets/react-aria.ico b/packages/dev/s2-docs/assets/react-aria.ico
new file mode 100644
index 00000000000..f2df355f0df
Binary files /dev/null and b/packages/dev/s2-docs/assets/react-aria.ico differ
diff --git a/packages/dev/s2-docs/pages/s2/Calendar.mdx b/packages/dev/s2-docs/pages/s2/Calendar.mdx
index 3d1b9119d2a..23ec382c20c 100644
--- a/packages/dev/s2-docs/pages/s2/Calendar.mdx
+++ b/packages/dev/s2-docs/pages/s2/Calendar.mdx
@@ -177,6 +177,7 @@ Use the `focusedValue` or `defaultFocusedValue` prop to control which date is fo
 "use client";
 import {Calendar, ActionButton} from '@react-spectrum/s2';
 import {CalendarDate, today, getLocalTimeZone} from '@internationalized/date';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example() {
@@ -184,7 +185,7 @@ function Example() {
   let [focusedDate, setFocusedDate] = useState(defaultDate);
 
   return (
-    <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8}}>
+    <div className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8})}>
       <ActionButton onPress={() => setFocusedDate(today(getLocalTimeZone()))}>
         Today
       </ActionButton>
diff --git a/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx b/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx
index 076dca3ab08..7ecc1ad5288 100644
--- a/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx
+++ b/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx
@@ -57,6 +57,7 @@ Use the `name` prop to submit the selected checkboxes to the server. Set the `is
 ```tsx render
 "use client";
 import {CheckboxGroup, Checkbox, Button, Form} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 <Form/* PROPS */>
   <CheckboxGroup
@@ -77,7 +78,7 @@ import {CheckboxGroup, Checkbox, Button, Form} from '@react-spectrum/s2';
     <Checkbox value="cookies" isRequired>Cookie policy</Checkbox>
     {/*- end highlight -*/}
   </CheckboxGroup>
-  <Button type="submit" style={{marginTop: 8}}>Submit</Button>
+  <Button type="submit" className={style({marginTop: 8})}>Submit</Button>
 </Form>
 ```
 
diff --git a/packages/dev/s2-docs/pages/s2/ColorArea.mdx b/packages/dev/s2-docs/pages/s2/ColorArea.mdx
index e4ed78b1ab1..c2f54f2a509 100644
--- a/packages/dev/s2-docs/pages/s2/ColorArea.mdx
+++ b/packages/dev/s2-docs/pages/s2/ColorArea.mdx
@@ -29,6 +29,7 @@ The `onChange` event is called as the user drags, and `onChangeEnd` is called wh
 ```tsx render
 "use client";
 import {ColorArea, parseColor} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example() {
@@ -45,7 +46,7 @@ function Example() {
         onChange={setCurrentValue}
         onChangeEnd={setFinalValue} />
         {/*- end highlight -*/}
-      <pre style={{fontSize: 12}}>
+      <pre className={style({font: 'body'})}>
         onChange value: {currentValue.toString('hex')}{'\n'}
         onChangeEnd value: {finalValue.toString('hex')}
       </pre>
diff --git a/packages/dev/s2-docs/pages/s2/ColorField.mdx b/packages/dev/s2-docs/pages/s2/ColorField.mdx
index a28337dcad8..7e4f6ef6262 100644
--- a/packages/dev/s2-docs/pages/s2/ColorField.mdx
+++ b/packages/dev/s2-docs/pages/s2/ColorField.mdx
@@ -28,6 +28,7 @@ Use the `value` or `defaultValue` prop to set the color value, and `onChange` to
 import {ColorField} from '@react-spectrum/s2';
 import {useState} from 'react';
 import {parseColor} from '@react-stately/color';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 function Example() {
   let [value, setValue] = useState(parseColor('#e73623'));
@@ -39,7 +40,7 @@ function Example() {
         placeholder="Enter a color"
         value={value}
         onChange={setValue} />
-      <pre style={{fontSize: 12}}>Current value: {value.toString('hex')}</pre>
+      <pre className={style({font: 'body'})}>Current value: {value.toString('hex')}</pre>
     </div>
   );
 }
@@ -52,13 +53,14 @@ By default, ColorField displays a hex value. Set the `colorSpace` and `channel`
 ```tsx render
 "use client";
 import {ColorField, parseColor} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example() {
   let [color, setColor] = useState(parseColor('#7f007f'));
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+    <div className={style({ display: 'flex', flexDirection: 'column', gap: 8 })}>
       <ColorField
         label="Hue"
         placeholder="Select a hue"
@@ -82,7 +84,7 @@ function Example() {
         onChange={setColor}
         colorSpace="hsl"
         channel="lightness" />
-      <pre style={{fontSize: 12}}>Current value: {color?.toString('hex')}</pre>
+      <pre className={style({font: 'body'})}>Current value: {color?.toString('hex')}</pre>
     </div>
   );
 }
diff --git a/packages/dev/s2-docs/pages/s2/ColorSlider.mdx b/packages/dev/s2-docs/pages/s2/ColorSlider.mdx
index 179aad8bc09..ee7b72c0e1c 100644
--- a/packages/dev/s2-docs/pages/s2/ColorSlider.mdx
+++ b/packages/dev/s2-docs/pages/s2/ColorSlider.mdx
@@ -28,6 +28,7 @@ The `onChange` event is called as the user drags, and `onChangeEnd` is called wh
 ```tsx render
 "use client";
 import {ColorSlider, parseColor} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example() {
@@ -43,7 +44,7 @@ function Example() {
         onChange={setCurrentValue}
         onChangeEnd={setFinalValue} />
         {/*- end highlight -*/}
-      <pre style={{fontSize: 12}}>
+      <pre className={style({font: 'body'})}>
         onChange value: {currentValue.toString('hex')}{'\n'}
         onChangeEnd value: {finalValue.toString('hex')}
       </pre>
diff --git a/packages/dev/s2-docs/pages/s2/ColorSwatch.mdx b/packages/dev/s2-docs/pages/s2/ColorSwatch.mdx
index 96ce289a0bb..8b99e7d45ae 100644
--- a/packages/dev/s2-docs/pages/s2/ColorSwatch.mdx
+++ b/packages/dev/s2-docs/pages/s2/ColorSwatch.mdx
@@ -25,8 +25,9 @@ A ColorSwatch displays a color value passed via the `color` prop. The value can
 ```tsx render
 "use client";
 import {ColorSwatch} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
-<div style={{display: 'flex', gap: 12, alignItems: 'center'}}>
+<div className={style({display: 'flex', gap: 12, alignItems: 'center'})}>
   <ColorSwatch color="#ff6600" />
   <ColorSwatch color="rgb(255, 0, 255)" />
   <ColorSwatch color="hsl(120, 100%, 42%)" />
diff --git a/packages/dev/s2-docs/pages/s2/ColorSwatchPicker.mdx b/packages/dev/s2-docs/pages/s2/ColorSwatchPicker.mdx
index cd9810677e6..fbae353e8aa 100644
--- a/packages/dev/s2-docs/pages/s2/ColorSwatchPicker.mdx
+++ b/packages/dev/s2-docs/pages/s2/ColorSwatchPicker.mdx
@@ -30,6 +30,7 @@ Use the `value` or `defaultValue` prop to set the selected color, and `onChange`
 ```tsx render
 "use client";
 import {ColorSwatchPicker, ColorSwatch, parseColor} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example() {
@@ -48,7 +49,7 @@ function Example() {
         <ColorSwatch color="#8b5cf6" />
         <ColorSwatch color="#ec4899" />
       </ColorSwatchPicker>
-      <pre style={{fontSize: 12}}>Selected color: {value.toString('rgb')}</pre>
+      <pre className={style({font: 'body'})}>Selected color: {value.toString('rgb')}</pre>
     </>
   );
 }
diff --git a/packages/dev/s2-docs/pages/s2/ColorWheel.mdx b/packages/dev/s2-docs/pages/s2/ColorWheel.mdx
index b0fc043c98a..fd06582c1cd 100644
--- a/packages/dev/s2-docs/pages/s2/ColorWheel.mdx
+++ b/packages/dev/s2-docs/pages/s2/ColorWheel.mdx
@@ -29,6 +29,7 @@ The `onChange` event is called as the user drags, and `onChangeEnd` is called wh
 import {ColorWheel} from '@react-spectrum/s2';
 import {useState} from 'react';
 import {parseColor} from '@react-stately/color';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 function Example() {
   let [currentValue, setCurrentValue] = useState(parseColor('hsl(50, 100%, 50%)'));
@@ -42,7 +43,7 @@ function Example() {
         onChange={setCurrentValue}
         onChangeEnd={setFinalValue} />
         {/*- end highlight -*/}
-      <pre style={{fontSize: 12}}>
+      <pre className={style({font: 'body'})}>
         onChange value: {currentValue.toString('hex')}{'\n'}
         onChangeEnd value: {finalValue.toString('hex')}
       </pre>
diff --git a/packages/dev/s2-docs/pages/s2/ComboBox.mdx b/packages/dev/s2-docs/pages/s2/ComboBox.mdx
index 7738d59a6c6..bec8a9e7981 100644
--- a/packages/dev/s2-docs/pages/s2/ComboBox.mdx
+++ b/packages/dev/s2-docs/pages/s2/ComboBox.mdx
@@ -318,6 +318,7 @@ Both `inputValue` and `selectedKey` can be controlled simultaneously. However, e
 ```tsx render
 "use client";
 import {ComboBox, ComboBoxItem, type Key} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function ControlledComboBox() {
@@ -358,7 +359,7 @@ function ControlledComboBox() {
 
   return (
     <div>
-       <ComboBox
+      <ComboBox
         label="Pick a engineering major"
         placeholder="Select a major"
         /*- begin highlight -*/
@@ -370,7 +371,7 @@ function ControlledComboBox() {
         {/*- end highlight -*/}
         {item => <ComboBoxItem>{item.name}</ComboBoxItem>}
       </ComboBox>
-      <pre style={{fontSize: 12}}>
+      <pre className={style({font: 'body'})}>
         Current selected major id: {fieldState.selectedKey}{'\n'}
         Current input text: {fieldState.inputValue}
       </pre>
diff --git a/packages/dev/s2-docs/pages/s2/DropZone.mdx b/packages/dev/s2-docs/pages/s2/DropZone.mdx
index bd60edf18d4..c6b40508207 100644
--- a/packages/dev/s2-docs/pages/s2/DropZone.mdx
+++ b/packages/dev/s2-docs/pages/s2/DropZone.mdx
@@ -43,7 +43,7 @@ function Example(props) {
         } else if (item?.kind === 'file') {
           let file = await item.getFile();
           let url = URL.createObjectURL(file);
-          setContent(<img src={url} alt={item.name} style={{maxHeight: '100%', maxWidth: '100%'}} />);
+          setContent(<img src={url} alt={item.name} className={style({maxHeight: 'full', maxWidth: 'full'})} />);
         }
       }}>
       {content || (
@@ -60,7 +60,7 @@ function Example(props) {
               acceptedFileTypes={['image/jpeg', 'image/png', 'image/gif']}
               onSelect={files => {
                 let url = URL.createObjectURL(files[0]);
-                setContent(<img src={url} alt={files[0].name} style={{maxHeight: '100%', maxWidth: '100%'}} />);
+                setContent(<img src={url} alt={files[0].name} className={style({maxHeight: 'full', maxWidth: 'full'})} />);
               }}>
               <Button variant="accent">Browse files</Button>
             </FileTrigger>
diff --git a/packages/dev/s2-docs/pages/s2/Form.mdx b/packages/dev/s2-docs/pages/s2/Form.mdx
index 85b788497ea..d8c64df8097 100644
--- a/packages/dev/s2-docs/pages/s2/Form.mdx
+++ b/packages/dev/s2-docs/pages/s2/Form.mdx
@@ -158,7 +158,7 @@ function Example() {
         isRequired
         label="Last name"
         placeholder="Enter your last name" />
-      <div style={{display: 'flex', gap: 8}}>
+      <div className={style({display: 'flex', gap: 8})}>
         <Button type="submit" variant="accent">Submit</Button>
         <Button type="reset" variant="secondary">Reset</Button>
       </div>
diff --git a/packages/dev/s2-docs/pages/s2/InlineAlert.mdx b/packages/dev/s2-docs/pages/s2/InlineAlert.mdx
index 0c48908605e..73c74d94060 100644
--- a/packages/dev/s2-docs/pages/s2/InlineAlert.mdx
+++ b/packages/dev/s2-docs/pages/s2/InlineAlert.mdx
@@ -26,13 +26,14 @@ Use the `autoFocus` prop to focus the alert when it first renders. This is usefu
 ```tsx render hideImports
 "use client";
 import {InlineAlert, Heading, Content, Button} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example() {
   let [shown, setShown] = useState(false);
 
   return (
-    <div style={{display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'center'}}>
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'center'})}>
       <Button variant="primary" onPress={() => setShown(!shown)}>
         {shown ? 'Hide Alert' : 'Show Alert'}
       </Button>
diff --git a/packages/dev/s2-docs/pages/s2/Picker.mdx b/packages/dev/s2-docs/pages/s2/Picker.mdx
index 4c314dd4f34..88c956a12fb 100644
--- a/packages/dev/s2-docs/pages/s2/Picker.mdx
+++ b/packages/dev/s2-docs/pages/s2/Picker.mdx
@@ -209,6 +209,7 @@ Use the `defaultValue` or `value` prop to set the selected item. The value corre
 ```tsx render docs={docs.exports.Picker} links={docs.links} props={['selectionMode']} wide
 "use client";
 import {Picker, PickerItem} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example(props) {
@@ -232,7 +233,7 @@ function Example(props) {
         <PickerItem id="bison">Bison</PickerItem>
         <PickerItem id="skunk">Skunk</PickerItem>
       </Picker>
-      <pre style={{fontSize: 12}}>Current selection: {JSON.stringify(animal)}</pre>
+      <pre className={style({font: 'body'})}>Current selection: {JSON.stringify(animal)}</pre>
     </div>
   );
 }
diff --git a/packages/dev/s2-docs/pages/s2/Popover.mdx b/packages/dev/s2-docs/pages/s2/Popover.mdx
index 7a285bacaab..e0bf9ee4944 100644
--- a/packages/dev/s2-docs/pages/s2/Popover.mdx
+++ b/packages/dev/s2-docs/pages/s2/Popover.mdx
@@ -54,7 +54,7 @@ function Example() {
   let triggerRef = useRef(null);
 
   return (
-    <div style={{display: 'flex', flexDirection: 'column', gap: 64, alignItems: 'center'}}>
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 64, alignItems: 'center'})}>
       <Button onPress={() => setOpen(!isOpen)}>
         Open popover
       </Button>
diff --git a/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx b/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx
index 7b8fc8cbda5..519bac96393 100644
--- a/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx
+++ b/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx
@@ -197,6 +197,7 @@ Use the `focusedValue` or `defaultFocusedValue` prop to control which date is fo
 "use client";
 import {RangeCalendar, ActionButton} from '@react-spectrum/s2';
 import {CalendarDate, today, getLocalTimeZone} from '@internationalized/date';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example() {
@@ -204,7 +205,7 @@ function Example() {
   let [focusedDate, setFocusedDate] = useState(defaultDate);
 
   return (
-    <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8}}>
+    <div className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8})}>
       <ActionButton onPress={() => setFocusedDate(today(getLocalTimeZone()))}>
         Today
       </ActionButton>
diff --git a/packages/dev/s2-docs/pages/s2/RangeSlider.mdx b/packages/dev/s2-docs/pages/s2/RangeSlider.mdx
index 3689090ed77..d236c22eb3b 100644
--- a/packages/dev/s2-docs/pages/s2/RangeSlider.mdx
+++ b/packages/dev/s2-docs/pages/s2/RangeSlider.mdx
@@ -29,6 +29,7 @@ Use the `value` or `defaultValue` prop to set the RangeSlider's value. The value
 ```tsx render
 "use client";
 import {RangeSlider} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example() {
@@ -44,7 +45,7 @@ function Example() {
         onChange={setCurrentValue}
         onChangeEnd={setFinalValue} />
         {/*- end highlight -*/}
-      <pre style={{fontSize: 12}}>
+      <pre className={style({font: 'body'})}>
         onChange value: {JSON.stringify(currentValue)}{'\n'}
         onChangeEnd value: {JSON.stringify(finalValue)}
       </pre>
diff --git a/packages/dev/s2-docs/pages/s2/SearchField.mdx b/packages/dev/s2-docs/pages/s2/SearchField.mdx
index ba718f1ae8e..93edb280ce1 100644
--- a/packages/dev/s2-docs/pages/s2/SearchField.mdx
+++ b/packages/dev/s2-docs/pages/s2/SearchField.mdx
@@ -29,6 +29,7 @@ Use the `value` or `defaultValue` prop to set the text value, and `onChange` to
 ```tsx render
 "use client";
 import {SearchField} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example() {
@@ -45,7 +46,7 @@ function Example() {
         onChange={setSearch}
         onSubmit={setSubmittedSearch} />
       {/*- end highlight -*/}
-      <pre style={{fontSize: 12}}>
+      <pre className={style({font: 'body'})}>
         Value: {search}{'\n'}
         Submitted value: {submittedSearch}
       </pre>
diff --git a/packages/dev/s2-docs/pages/s2/Slider.mdx b/packages/dev/s2-docs/pages/s2/Slider.mdx
index 256d892b842..60fee9a47c2 100644
--- a/packages/dev/s2-docs/pages/s2/Slider.mdx
+++ b/packages/dev/s2-docs/pages/s2/Slider.mdx
@@ -26,6 +26,7 @@ Use the `value` or `defaultValue` prop to set the slider's value. The `onChange`
 ```tsx render
 "use client";
 import {Slider} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
 function Example() {
@@ -41,7 +42,7 @@ function Example() {
         onChange={setCurrentValue}
         onChangeEnd={setFinalValue} />
         {/*- end highlight -*/}
-      <pre style={{fontSize: 12}}>
+      <pre className={style({font: 'body'})}>
         onChange value: {currentValue}{'\n'}
         onChangeEnd value: {finalValue}
       </pre>
diff --git a/packages/dev/s2-docs/pages/s2/Tabs.mdx b/packages/dev/s2-docs/pages/s2/Tabs.mdx
index 2257c66bf12..3bd7a1013e6 100644
--- a/packages/dev/s2-docs/pages/s2/Tabs.mdx
+++ b/packages/dev/s2-docs/pages/s2/Tabs.mdx
@@ -164,9 +164,9 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
     borderStyle: 'solid', 
     borderColor: 'gray-300',
     borderRadius: 'default',
-    overflow: 'hidden'
-  })}
-  style={{resize: 'horizontal'}}>
+    overflow: 'hidden',
+    resize: 'horizontal'
+  })}>
   {/*- begin focus -*/}
   <Tabs aria-label="Tabs">
     <TabList>
diff --git a/packages/dev/s2-docs/pages/s2/Tooltip.mdx b/packages/dev/s2-docs/pages/s2/Tooltip.mdx
index 614e169e3c8..914cda306a5 100644
--- a/packages/dev/s2-docs/pages/s2/Tooltip.mdx
+++ b/packages/dev/s2-docs/pages/s2/Tooltip.mdx
@@ -28,12 +28,13 @@ Tooltips appear after a "warmup" delay when hovering, or instantly on focus. Onc
 ```tsx render docs={docs.exports.TooltipTrigger} links={docs.links} props={['trigger', 'delay', 'isDisabled']} type="vanilla"
 "use client";
 import {TooltipTrigger, Tooltip, ActionButton} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import Edit from '@react-spectrum/s2/icons/Edit';
 import Save from '@react-spectrum/s2/icons/SaveFloppy';
 
 function Example(props) {
   return (
-    <div style={{display: 'flex', gap: 8}}>
+    <div className={style({display: 'flex', gap: 8})}>
       {/*- begin highlight -*/}
       <TooltipTrigger {...props}/* PROPS */>
       {/*- end highlight -*/}
@@ -69,8 +70,9 @@ Tooltips must be placed on focusable elements so they are accessible to keyboard
 ```tsx render
 "use client";
 import {Tooltip, TooltipTrigger, Button, ContextualHelp, Heading, Content} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
-<div style={{display: 'flex', gap: '6px', alignItems: 'center'}}>
+<div className={style({display: 'flex', gap: 8, alignItems: 'center'})}>
   <Button isDisabled>Delete resource</Button>
   {/*- begin highlight -*/}
   <ContextualHelp variant="info">
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index 735d3232e5b..a1b9b88641d 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -2,6 +2,10 @@ import {MobileOnPageNav, Nav, OnPageNav, SideNav, SideNavItem, SideNavLink} from
 import type {Page, PageProps, TocNode} from '@parcel/rsc';
 import React, {ReactElement} from 'react';
 import '../src/client';
+// @ts-ignore
+import internationalizedFavicon from 'url:../assets/internationalized.ico';
+// @ts-ignore
+import reactAriaFavicon from 'url:../assets/react-aria.ico';
 import './anatomy.css';
 import {ClassAPI} from './ClassAPI';
 import {Code} from './Code';
@@ -84,6 +88,18 @@ const getDescription = (currentPage: Page): string => {
   return library ? `Documentation for ${pageTitle} in ${library}.` : `Documentation for ${pageTitle}.`;
 };
 
+const getFaviconUrl = (currentPage: Page): string => {
+  const library = getLibraryFromPage(currentPage);
+  switch (library) {
+    case 'react-aria':
+      return reactAriaFavicon;
+    case 'internationalized':
+      return internationalizedFavicon;
+    default:
+      return 'https://www.adobe.com/favicon.ico';
+  }
+};
+
 let articleStyles = style({
   maxWidth: {
     default: 'none',
@@ -103,7 +119,7 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="alternate" type="text/markdown" title="LLM-friendly version" href={currentPage.url.replace(/\.html$/, '.md')} />
-        <link rel="icon" href="https://www.adobe.com/favicon.ico" />
+        <link rel="icon" href={getFaviconUrl(currentPage)} />
         <meta name="description" content={getDescription(currentPage)} />
         <meta property="og:image" content={getOgImageUrl(currentPage)} />
         <title>{getTitle(currentPage)}</title>
diff --git a/packages/dev/s2-docs/src/MarkdownMenu.tsx b/packages/dev/s2-docs/src/MarkdownMenu.tsx
index baf2ad0003f..18dbc2a9dba 100644
--- a/packages/dev/s2-docs/src/MarkdownMenu.tsx
+++ b/packages/dev/s2-docs/src/MarkdownMenu.tsx
@@ -1,7 +1,8 @@
 'use client';
 
-import {ActionButton, Menu, MenuItem, MenuTrigger} from '@react-spectrum/s2';
+import {ActionButton, Menu, MenuItem, MenuTrigger, Text} from '@react-spectrum/s2';
 import Copy from '@react-spectrum/s2/icons/Copy';
+import OpenIn from '@react-spectrum/s2/icons/OpenIn';
 import React, {useCallback} from 'react';
 
 interface MarkdownMenuProps {
@@ -46,8 +47,14 @@ export function MarkdownMenu({url}: MarkdownMenuProps) {
         <Copy />
       </ActionButton>
       <Menu onAction={onAction}>
-        <MenuItem id="copy">Copy Page as Markdown</MenuItem>
-        <MenuItem id="view">View Page as Markdown</MenuItem>
+        <MenuItem id="copy">
+          <Copy />
+          <Text>Copy Page as Markdown</Text>
+        </MenuItem>
+        <MenuItem id="view">
+          <OpenIn />
+          <Text>View Page as Markdown</Text>
+        </MenuItem>
       </Menu>
     </MenuTrigger>
   );
diff --git a/packages/dev/s2-docs/src/Nav.tsx b/packages/dev/s2-docs/src/Nav.tsx
index c67beb542a5..ecacc66dae7 100644
--- a/packages/dev/s2-docs/src/Nav.tsx
+++ b/packages/dev/s2-docs/src/Nav.tsx
@@ -249,7 +249,7 @@ export function MobileOnPageNav({children, currentPage}) {
   }, [currentPage]);
 
   return (
-    <Picker aria-label="Table of contents" selectedKey={selected} isQuiet size="L">
+    <Picker aria-label="Table of contents" value={selected} isQuiet size="L">
       {children}
     </Picker>
   );
diff --git a/packages/dev/s2-docs/src/VisualExampleClient.tsx b/packages/dev/s2-docs/src/VisualExampleClient.tsx
index 30c718569a7..ca69b2d7b06 100644
--- a/packages/dev/s2-docs/src/VisualExampleClient.tsx
+++ b/packages/dev/s2-docs/src/VisualExampleClient.tsx
@@ -477,8 +477,8 @@ function UnionControl({control, value, onChange, isPicker = false}) {
       <Picker
         label={control.name}
         contextualHelp={<PropContextualHelp control={control} />}
-        selectedKey={value == null && control.optional && !control.default ? '__none' : value}
-        onSelectionChange={v => onChange(v === '__none' ? null : v)}
+        value={value == null && control.optional && !control.default ? '__none' : value}
+        onChange={v => onChange(v === '__none' ? null : v)}
         styles={style({width: 130})}>
         {control.optional && !control.default ? <PickerItem id="__none">Default</PickerItem> : null}
         {control.value.elements.filter(e => e.value).map(element => (
@@ -587,8 +587,8 @@ function NumberFormatControl({control, value, onChange}: ControlProps) {
       <Picker
         label={control.name}
         contextualHelp={<PropContextualHelp control={control} />}
-        selectedKey={value?.style || 'decimal'}
-        onSelectionChange={id => {
+        value={value?.style || 'decimal'}
+        onChange={id => {
           switch (id) {
             case 'decimal':
               onChange({style: 'decimal'});
@@ -621,8 +621,8 @@ function NumberFormatControl({control, value, onChange}: ControlProps) {
         {value?.style === 'decimal' && (
           <Picker
             label="Sign Display"
-            selectedKey={value?.signDisplay ?? 'auto'}
-            onSelectionChange={signDisplay => onChange({...value, signDisplay})}
+            value={value?.signDisplay ?? 'auto'}
+            onChange={signDisplay => onChange({...value, signDisplay})}
             styles={style({width: 130})}>
             <PickerItem id="auto">Auto</PickerItem>
             <PickerItem id="always">Always</PickerItem>
@@ -892,11 +892,11 @@ function LocaleControl({control, value, onChange}: ControlProps) {
 
   return (
     <>
-      <Picker label="Locale" items={locales} selectedKey={lang} onSelectionChange={updateLocale}>
+      <Picker label="Locale" items={locales} value={lang} onChange={updateLocale}>
         {item => <PickerItem id={item.value}>{item.label}</PickerItem>}
       </Picker>
       {extension === 'calendar' && (
-        <Picker label="Calendar" selectedKey={calendar} onSelectionChange={updateCalendar}>
+        <Picker label="Calendar" value={calendar} onChange={updateCalendar}>
           <PickerSection>
             <Header>
               <Heading>Preferred</Heading>
@@ -916,7 +916,7 @@ function LocaleControl({control, value, onChange}: ControlProps) {
         </Picker>
       )}
       {extension === 'numberingSystem' && (
-        <Picker label="Numbering system" selectedKey={numberingSystem} onSelectionChange={updateNumberingSystem}>
+        <Picker label="Numbering system" value={numberingSystem} onChange={updateNumberingSystem}>
           <PickerItem id="latn">Latin</PickerItem>
           <PickerItem id="arab">Arabic</PickerItem>
           <PickerItem id="hanidec">Hanidec</PickerItem>